/* ═══════════════════════════════════════════════════
   Geomatrica Spatial — MAIN STYLESHEET  v18
   ═══════════════════════════════════════════════════ */

/* ── RESET & BASE ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Brand colours */
  --cyan:          #0077C8;
  --teal:          #0077C8;
  --teal-dark:     #005fa0;
  --teal-glow:     rgba(0, 119, 200, 0.2);
  --blue:          #0077C8;
  --blue-mid:      #005fa0;
  /* Backgrounds */
  --bg:            #f5f7fa;
  --bg-2:          #ffffff;
  --bg-3:          #eef1f6;
  --panel:         #ffffff;
  --surface:       #ffffff;
  --surface-2:     #e8edf5;
  --surface-glass: rgba(255,255,255,0.9);
  /* Text */
  --text:          #1a2744;
  --text-muted:    #5a6a88;
  --muted:         #5a6a88;
  --text-dim:      #9aadcc;
  --white:         #ffffff;
  /* Borders */
  --border:        rgba(26,39,68,0.1);
  --line:          rgba(26,39,68,0.1);
  --border-glow:   rgba(0, 119, 200, 0.3);
  /* Gradients */
  --grad-brand:    linear-gradient(135deg, #00AEEF 0%, #0077C8 100%);
  --grad-hero:     linear-gradient(180deg, rgba(5,9,20,0.3) 0%, rgba(5,9,20,0.7) 60%, rgba(5,9,20,0.95) 100%);
  --grad-card:     linear-gradient(180deg, transparent 40%, rgba(5,9,20,0.95) 100%);
  /* Animation speeds */
  --fast:          0.2s;
  --med:           0.4s;
  --slow:          0.7s;
  /* Radius */
  --radius:        8px;
  --radius-lg:     16px;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Open Sans', system-ui, sans-serif;
  background: #f5f7fa;
  color: #1a2744;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; transition: color var(--fast) ease; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}


/* ── WORD SCROLL REVEAL ── */
.rv-word {
  opacity: 0.1;
  /* No transition — JS drives each frame for smooth scroll-sync */
}

/* ── ACCENT TEXT UTILITY ── */
.gradient-text {
  color: #0077C8;
  -webkit-text-fill-color: #0077C8;
}

/* ── SECTION LABEL ── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: #0077C8;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  margin-bottom: 18px;
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px;
  background: #0077C8;
  flex-shrink: 0;
}

/* ── SECTION TITLE ── */
.section-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 56px;
  color: #1a2744;
}

/* ═══════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════ */
.header-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  transition: transform 0.35s ease;
}

.header-bar.hidden {
  transform: translateY(-100%);
  pointer-events: none;
}

/* Masthead top-bar */
.masthead {
  border-bottom: 1px solid var(--border);
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 48px;
  height: 38px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.top-widgets { display: flex; gap: 24px; }

.top-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-weight: 600;
  transition: color var(--fast) ease;
}

.top-link:hover { color: var(--teal); }

.social-icons { display: flex; align-items: center; gap: 4px; }

.social-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: all var(--fast) ease;
}

.social-link svg { width: 14px; height: 14px; flex-shrink: 0; }

.social-link:hover { color: var(--white); background: rgba(255,255,255,0.06); }
.social-link.social-linkedin:hover  { color: #0077b5; }
.social-link.social-facebook:hover  { color: #1877f2; }
.social-link.social-instagram:hover { color: #e1306c; }

/* Main nav */
.main-nav-bar { height: 110px; }

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 110px;
  padding: 0 56px;
}

/* Logo */
.logo { display: flex; align-items: center; overflow: visible; height: 110px; position: relative; }

.logo-img {
  height: 32px;
  width: auto;
  flex-shrink: 0;
  margin-left: 0;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 1;
  transition: opacity var(--med) ease, transform var(--med) ease;
  animation: logoEntrance 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.logo-img-text { display: none; }

@keyframes logoEntrance {
  from {
    opacity: 0;
    transform: translateX(-16px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.logo:hover .logo-img {
  opacity: 0.82;
  transform: scale(1.03);
}

/* Nav links */
.main-menu {
  display: flex;
  align-items: center;
  gap: 2px;
}

.menu-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.7);
  border-radius: var(--radius);
  position: relative;
  transition: color var(--fast) ease, background var(--fast) ease;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
}

.menu-item::after { display: none; }

.menu-item:hover { color: #ffffff; background: transparent; }

.menu-contact-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.7);
  border-radius: var(--radius);
  padding: 8px 14px;
  box-shadow: none;
}

.menu-contact-btn:hover {
  color: #ffffff;
  background: transparent;
  transform: none;
  box-shadow: none;
}

.menu-login-btn {
  background: transparent;
  color: rgba(255,255,255,0.7);
  border: none;
  border-radius: var(--radius);
  padding: 8px 14px;
}
.menu-login-btn:hover {
  color: #ffffff;
  background: transparent;
  transform: none;
}

/* Dropdown */
.menu-dropdown { position: relative; }
.menu-dropdown > span.menu-item { cursor: default; user-select: none; }
.menu-dropdown > span.menu-item::after { display: none; }
.dropdown-arrow { width: 10px; height: 6px; vertical-align: middle; margin-left: 4px; transition: transform var(--fast) ease; }
.menu-dropdown:hover .dropdown-arrow { transform: rotate(180deg); }

.submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  transform: translateY(0);
  min-width: 200px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 12px;
  padding: 8px;
  display: none;
  flex-direction: column;
  box-shadow: none;
  animation: submenuIn 0.18s ease;
  z-index: 1001;
}

@keyframes submenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.menu-dropdown:hover .submenu,
.menu-dropdown.open  .submenu { display: flex; }

/* Invisible bridge — fills the gap so the mouse can travel from trigger → panel */
.submenu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

.submenu-item {
  display: block;
  padding: 8px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.88);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.submenu-item:hover { background: rgba(255,255,255,0.06); color: #ffffff; }

.submenu-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 6px 4px;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  border-radius: var(--radius);
  padding: 8px;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: all var(--fast) ease;
}

.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ═══════════════════════════════════════════════════
   CTA BUTTONS
   ═══════════════════════════════════════════════════ */
.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.93rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: all var(--med) cubic-bezier(0.16,1,0.3,1);
  text-decoration: none;
  white-space: nowrap;
}

.cta-primary {
  background: linear-gradient(135deg, #00AEEF, #0077C8);
  color: var(--white);
  box-shadow: 0 10px 28px rgba(0, 119, 200, 0.28);
}

.cta-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(0, 119, 200, 0.42);
}

.cta-secondary {
  background: rgba(255,255,255,0.06);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.25) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cta-secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.4) !important;
  transform: translateY(-3px);
}

.cta-outline {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.3) !important;
}

.cta-outline:hover {
  border-color: var(--cyan) !important;
  color: var(--cyan);
  transform: translateY(-3px);
}

.cta-ghost {
  background: rgba(255,255,255,0.05);
  color: var(--text);
  border: 1px solid var(--border) !important;
}

.cta-ghost:hover {
  background: rgba(255,255,255,0.1);
  color: var(--white);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  margin-top: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  transform: scale(1.04);
  animation: heroBgIn 8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes heroBgIn {
  from { transform: scale(1.12); }
  to   { transform: scale(1.04); }
}

.hero-overlay {
  display: none;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,  rgba(3,8,20,0.78) 0%, rgba(3,8,20,0.46) 42%, rgba(3,8,20,0.08) 78%, transparent 100%),
    linear-gradient(180deg, rgba(3,8,20,0.60) 0%, rgba(3,8,20,0.20) 20%, rgba(3,8,20,0.10) 55%, rgba(3,8,20,0.55) 100%);
  z-index: 1;
}

.hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  padding: 0 80px;
}

.hero-content {
  max-width: 780px;
  padding-top: 80px;
  position: relative;
  z-index: 2;
  animation: fadeUp 0.8s 0.2s both;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid rgba(0, 174, 239, 0.45);
  border-radius: 999px;
  color: #00AEEF;
  background: rgba(0, 174, 239, 0.12);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.hero-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(38px, 4vw, 62px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 20px;
  text-shadow: 0 1px 20px rgba(0,0,0,0.35);
}

.hero-title-accent {
  display: block;
  font-size: 0.88em;
  font-weight: 300;
  color: #00AEEF;
  letter-spacing: -0.02em;
}

.hero-sub {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.8;
  margin-bottom: 40px;
  max-width: 480px;
  font-weight: 300;
  letter-spacing: 0.02em;
}

.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}

.hero-trusted {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.trusted-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: rgba(255,255,255,0.82);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background var(--fast) ease, border-color var(--fast) ease;
}

.trusted-tag:hover {
  background: rgba(0, 174, 239, 0.1);
  border-color: rgba(0, 174, 239, 0.3);
  color: rgba(255,255,255,0.9);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════
   CAPABILITIES STRIP
   ═══════════════════════════════════════════════════ */
.capabilities-strip {
  background: #1a2744;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.cap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.cap-item {
  padding: 32px 40px;
  border-right: 1px solid rgba(255,255,255,0.07);
  transition: background 0.2s ease;
  text-decoration: none;
}

.cap-item:last-child { border-right: none; }
.cap-item:hover { background: rgba(0,119,200,0.12); }

.cap-name {
  font-family: 'Oswald', sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ffffff;
  margin-bottom: 7px;
  transition: color 0.2s ease;
}

.cap-item:hover .cap-name { color: #00AEEF; }

.cap-desc {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .cap-item { border-bottom: 1px solid rgba(255,255,255,0.07); padding: 24px 28px; }
  .cap-item:nth-child(2n) { border-right: none; }
}

/* ═══════════════════════════════════════════════════
   STATS BAR
   ═══════════════════════════════════════════════════ */
.stats-bar {
  background: #1a2744;
  border-top: none;
  border-bottom: none;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.stats-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0,174,239,0.06), transparent);
}

.stats-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 40px;
  flex: 1;
  text-align: center;
  transition: background var(--fast) ease;
}

.stat-item:hover { background: rgba(255,255,255,0.04); }

.stat-number {
  font-family: 'Rajdhani', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: #00AEEF;
  -webkit-text-fill-color: #00AEEF;
  line-height: 1;
}

.stat-suffix {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #00AEEF;
  margin-left: 2px;
}

.stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55);
  margin-top: 6px;
}

.stat-divider {
  width: 1px;
  height: 50px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   INTRO / ABOUT
   ═══════════════════════════════════════════════════ */
.intro-section {
  background: #ffffff;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.intro-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,119,200,0.3), transparent);
}

.intro-headline {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 64px;
  max-width: 900px;
  color: #1a2744;
}

.intro-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
}

.intro-accent-bar {
  width: 48px; height: 3px;
  background: var(--grad-brand);
  border-radius: 3px;
  margin-bottom: 28px;
}

.intro-left h3,
.intro-right h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 2rem;
  font-weight: 300;
  text-transform: uppercase;
  color: #1a2744;
  margin-bottom: 20px;
}

.intro-split p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.85;
  margin-bottom: 16px;
}

.intro-split strong { color: #1a2744; font-weight: 600; }

.text-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--teal);
  transition: gap var(--fast) ease, color var(--fast) ease;
}

.text-cta:hover { color: #0077C8; gap: 14px; }

.arrow-icon { transition: transform var(--fast) ease; }
.text-cta:hover .arrow-icon { transform: translateX(4px); }

/* ═══════════════════════════════════════════════════
   SERVICES LIST
   ═══════════════════════════════════════════════════ */
.services-section {
  background: #ffffff;
  padding: 100px 0;
  position: relative;
}

.svc-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}

.svc-header .section-title {
  margin-bottom: 0;
}

.svc-header-desc {
  font-size: 0.9rem;
  color: #5a6a88;
  line-height: 1.8;
  padding-bottom: 6px;
}

.svc-list {
  border-top: 1px solid rgba(26,39,68,0.1);
}

.svc-row {
  display: grid;
  grid-template-columns: 48px 1fr 1fr 32px;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(26,39,68,0.08);
  text-decoration: none;
  transition: background 0.15s ease;
}

.svc-row:hover { background: #f5f7fa; margin: 0 -24px; padding-left: 24px; padding-right: 24px; }

.svc-num {
  font-family: 'Oswald', sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #9aadcc;
}

.svc-name {
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1a2744;
  transition: color 0.15s ease;
}

.svc-row:hover .svc-name { color: #0077C8; }

.svc-desc {
  font-size: 0.82rem;
  color: #5a6a88;
  line-height: 1.5;
}

.svc-arrow {
  font-size: 1rem;
  color: #9aadcc;
  justify-self: end;
  transition: color 0.15s ease, transform 0.15s ease;
}

.svc-row:hover .svc-arrow { color: #0077C8; transform: translateX(4px); }

.svc-header-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
}

.svc-all-link {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #0077C8;
  display: inline-block;
}

.svc-all-link:hover { opacity: 0.7; }

.svc-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  margin-top: 3px;
}

.svc-tile {
  position: relative;
  height: 300px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
}

.svc-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,10,25,0.72) 0%, rgba(5,10,25,0.1) 55%, transparent 100%);
  transition: opacity 0.3s ease;
}

.svc-tile:hover::before {
  opacity: 0.85;
}

.svc-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,119,200,0.12);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.svc-tile:hover::after { opacity: 1; }

.svc-tile-body {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 28px;
}

.svc-tile-name {
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ffffff;
}

.svc-tile-arrow {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.5);
  transition: color 0.2s ease, transform 0.2s ease;
}

.svc-tile:hover .svc-tile-arrow {
  color: #ffffff;
  transform: translate(3px, -3px);
}

.svc-photo-grid--3 { grid-template-columns: repeat(3, 1fr); }
.svc-tile--tall { height: 420px; }

.svc-tile-body { flex-direction: column; align-items: flex-start; gap: 6px; }
.svc-photo-grid--3 .svc-tile-body { flex-direction: row; align-items: flex-end; gap: 0; }
.svc-tile-cat {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 6px;
}

@media (max-width: 768px) {
  .svc-header { grid-template-columns: 1fr; gap: 16px; }
  .svc-photo-grid { grid-template-columns: 1fr; }
  .svc-photo-grid--3 { grid-template-columns: 1fr; }
  .svc-tile { height: 220px; }
  .svc-tile--tall { height: 260px; }
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(26,39,68,0.12);
  box-shadow: 0 4px 24px rgba(26,39,68,0.08);
}

.service-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
}

.service-tile > a {
  display: block;
  width: 100%; height: 100%;
  position: relative;
}

.service-tile-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}

.service-tile:hover .service-tile-bg { transform: scale(1.08); }

.service-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,9,26,0.3) 0%, rgba(7,9,26,0.85) 100%);
  transition: background var(--med) ease;
}

.service-tile:hover .service-tile-overlay {
  background: linear-gradient(180deg, rgba(7,9,26,0.1) 0%, rgba(7,9,26,0.9) 100%);
}

.service-tile-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 28px;
  z-index: 10;
}

.service-icon {
  width: 44px; height: 44px;
  background: rgba(0,119,200,0.1);
  border: 1px solid rgba(0,119,200,0.2);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: #0077C8;
  transition: all var(--med) ease;
  transform: translateY(8px);
  opacity: 0;
}

.service-tile:hover .service-icon {
  opacity: 1;
  transform: translateY(0);
  background: rgba(0,119,200,0.2);
  box-shadow: 0 0 20px rgba(0,119,200,0.25);
}

.service-icon svg { width: 22px; height: 22px; }

.tile-label {
  font-family: 'Oswald', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
  margin-bottom: 8px;
  transition: color var(--fast) ease;
}

.service-tile:hover .tile-label { color: var(--teal); }

.tile-desc {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  max-width: 200px;
  transform: translateY(6px);
  opacity: 0;
  transition: all var(--med) ease;
}

.service-tile:hover .tile-desc { opacity: 1; transform: translateY(0); }

/* Corner accent on hover */
.service-tile::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 40px 40px 0;
  border-color: transparent #0077C8 transparent transparent;
  opacity: 0;
  transition: opacity var(--fast) ease;
  z-index: 20;
}

.service-tile:hover::after { opacity: 0.6; }

/* ═══════════════════════════════════════════════════
   CAREERS SECTION
   ═══════════════════════════════════════════════════ */
.careers-section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  background: #1a2744;
  border-top: none;
  border-bottom: none;
}

.careers-bg-overlay {
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1600&h=800&fit=crop');
  background-size: cover;
  background-position: center;
  opacity: 0.18;
}

.careers-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.careers-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: #00AEEF;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  margin-bottom: 24px;
}

.careers-badge::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px;
  background: #00AEEF;
  flex-shrink: 0;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,201,167,0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(0,201,167,0); }
}

.careers-content h2 {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 28px;
  color: #ffffff;
}

.careers-content p {
  font-size: 1rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.8;
  margin-bottom: 40px;
  max-width: 640px;
}

.careers-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════
   WHY GEOMETRICA
   ═══════════════════════════════════════════════════ */
.why-section {
  background: #f5f7fa;
  padding: 80px 0;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 48px;
  border-top: 1px solid rgba(26,39,68,0.1);
}

.why-item {
  padding: 40px 40px 40px 0;
  border-right: 1px solid rgba(26,39,68,0.1);
  padding-right: 40px;
}

.why-item:first-child { padding-left: 0; }
.why-item:last-child { border-right: none; padding-right: 0; padding-left: 40px; }
.why-item:nth-child(2) { padding-left: 40px; }

.why-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1a2744;
  margin-bottom: 14px;
}

.why-body {
  font-size: 0.875rem;
  color: #5a6a88;
  line-height: 1.85;
}

@media (max-width: 768px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-item { border-right: none; border-bottom: 1px solid rgba(26,39,68,0.1); padding: 32px 0; }
  .why-item:first-child, .why-item:nth-child(2), .why-item:last-child { padding-left: 0; padding-right: 0; }
  .why-item:last-child { border-bottom: none; }
}

/* ═══════════════════════════════════════════════════
   PORTFOLIO
   ═══════════════════════════════════════════════════ */
.portfolio-section {
  background: #ffffff;
  padding: 100px 0;
  position: relative;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.portfolio-card {
  background: #ffffff;
  border: 1px solid rgba(26,39,68,0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(26,39,68,0.06);
  transition: all var(--med) cubic-bezier(0.16,1,0.3,1);
  position: relative;
}

.portfolio-card::before {
  display: none;
}

.portfolio-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.1);
  border-color: rgba(0,119,200,0.2);
}

.card-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.card-image {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.portfolio-card:hover .card-image { transform: scale(1.06); }

.card-img-overlay {
  position: absolute;
  inset: 0;
  background: var(--grad-card);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 14px;
}

.card-category {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: rgba(0,0,0,0.52);
  border: none;
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 3px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.card-content {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-date {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--teal);
  margin-bottom: 10px;
  font-weight: 600;
}

.card-content h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #1a2744;
  margin-bottom: 10px;
  line-height: 1.4;
}

.card-content p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 20px;
  flex: 1;
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
  margin-top: auto;
  transition: gap var(--fast) ease, color var(--fast) ease;
}

.read-more span { transition: transform var(--fast) ease; }
.read-more:hover { color: #0077C8; gap: 10px; }
.read-more:hover span { transform: translateX(4px); }

/* ═══════════════════════════════════════════════════
   CONTACT + SOCIALS
   ═══════════════════════════════════════════════════ */
.contact-section {
  background: #f5f7fa;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.contact-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,119,200,0.3), transparent);
}

.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}

/* Info column */
.contact-info-block {
  background: #ffffff;
  border: 1px solid rgba(26,39,68,0.1);
  border-radius: var(--radius-lg);
  padding: 36px;
  margin-bottom: 28px;
  box-shadow: 0 2px 16px rgba(26,39,68,0.06);
}

.contact-info-block h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1a2744;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.contact-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.contact-detail-row:last-child { margin-bottom: 0; }

.contact-detail-icon {
  width: 40px; height: 40px;
  background: rgba(0,119,200,0.08);
  border: 1px solid rgba(0,119,200,0.15);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0077C8;
  flex-shrink: 0;
}

.contact-detail-icon svg { width: 18px; height: 18px; }

.contact-detail-row strong {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: 600;
}

.contact-detail-row p {
  font-size: 0.9rem;
  color: var(--text);
}

.contact-detail-row a {
  color: var(--teal);
  transition: color var(--fast) ease;
}

.contact-detail-row a:hover { color: #0077C8; }

/* Socials panel */
.socials-panel {
  background: #ffffff;
  border: 1px solid rgba(26,39,68,0.1);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  box-shadow: 0 2px 16px rgba(26,39,68,0.06);
}

.socials-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1a2744;
  margin-bottom: 8px;
}

.socials-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
}

.socials-cards { display: flex; flex-direction: column; gap: 12px; }

.social-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--radius);
  border: 1px solid rgba(26,39,68,0.1);
  background: #f5f7fa;
  transition: all var(--med) ease;
  position: relative;
  overflow: hidden;
}

.social-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  transition: opacity var(--fast) ease;
  opacity: 0;
  border-radius: 0 2px 2px 0;
}

.social-card:hover { transform: translateX(4px); }

.linkedin-card::before  { background: #0077b5; }
.instagram-card::before { background: linear-gradient(#f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.facebook-card::before  { background: #1877f2; }

.social-card:hover::before { opacity: 1; }

.linkedin-card:hover  { border-color: rgba(0,119,181,0.4);  box-shadow: 0 4px 20px rgba(0,119,181,0.15);  background: rgba(0,119,181,0.06); }
.instagram-card:hover { border-color: rgba(225,48,108,0.4); box-shadow: 0 4px 20px rgba(225,48,108,0.15); background: rgba(225,48,108,0.06); }
.facebook-card:hover  { border-color: rgba(24,119,242,0.4); box-shadow: 0 4px 20px rgba(24,119,242,0.15); background: rgba(24,119,242,0.06); }

.social-card-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.social-card-icon svg { width: 22px; height: 22px; }
.linkedin-card  .social-card-icon { background: rgba(0,119,181,0.12);  color: #0077b5; }
.instagram-card .social-card-icon { background: rgba(225,48,108,0.12); color: #e1306c; }
.facebook-card  .social-card-icon { background: rgba(24,119,242,0.12); color: #1877f2; }

.social-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.social-card-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a2744;
}

.social-card-handle {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.social-card-arrow {
  font-size: 1.1rem;
  color: var(--text-dim);
  transition: transform var(--fast) ease, color var(--fast) ease;
}

.social-card:hover .social-card-arrow {
  transform: translateX(4px);
  color: var(--text);
}

/* Contact form */
.contact-form-col {}

.contact-form {
  background: #ffffff;
  border: 1px solid rgba(26,39,68,0.1);
  border-radius: var(--radius-lg);
  padding: 44px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(26,39,68,0.06);
}

.contact-form::before {
  content: '';
  position: absolute;
  top: -1px; left: 10%; right: 10%;
  height: 2px;
  background: var(--grad-brand);
  border-radius: 0 0 4px 4px;
}

.form-header h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  text-transform: uppercase;
  color: #1a2744;
  margin-bottom: 6px;
}

.form-header p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
  background: #f5f7fa;
  border: 1px solid rgba(26,39,68,0.15);
  color: #1a2744;
  padding: 13px 16px;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  border-radius: var(--radius);
  transition: all var(--fast) ease;
  outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: #9aadcc; }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #0077C8;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0,119,200,0.1);
}

.form-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2300c9a7' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.form-group select option { background: var(--surface-2); }

.form-group textarea { resize: vertical; min-height: 120px; }

.submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--grad-brand);
  color: #ffffff;
  padding: 16px 36px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  align-self: flex-start;
  transition: all var(--med) ease;
  box-shadow: 0 4px 24px rgba(0,119,200,0.3);
  position: relative;
  overflow: hidden;
}

.submit-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.12);
  opacity: 0;
  transition: opacity var(--fast) ease;
}

.submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 40px rgba(0,119,200,0.45);
}

.submit-btn:hover::after { opacity: 1; }
.submit-btn:disabled { opacity: 0.6; transform: none; cursor: not-allowed; }

.submit-icon { font-size: 1.1rem; transition: transform var(--fast) ease; }
.submit-btn:hover .submit-icon { transform: translateX(4px); }

.form-message {
  font-size: 0.85rem;
  min-height: 20px;
  color: var(--text-muted);
  transition: all var(--fast) ease;
}

.form-message.success { color: #10e990; }
.form-message.error   { color: #f05050; }

/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */
.footer {
  background: #1a2744;
  border-top: none;
  padding: 80px 0 0;
  position: relative;
  overflow: hidden;
}

.footer-glow {
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 800px; height: 200px;
  background: radial-gradient(ellipse, rgba(0,174,239,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.footer-main {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand {}

.footer-logo-img {
  height: 60px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  margin-bottom: 20px;
  transition: filter var(--fast) ease, transform var(--fast) ease;
  opacity: 0.9;
}

.footer-logo:hover .footer-logo-img {
  filter: brightness(0) invert(1);
  opacity: 1;
  transform: scale(1.03);
}

.footer-tagline {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  margin-bottom: 4px;
}

.footer-links-group h4 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.45);
  margin-bottom: 20px;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  transition: all var(--fast) ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-nav a::before {
  content: '';
  width: 0; height: 1px;
  background: #00AEEF;
  transition: width var(--fast) ease;
}

.footer-nav a:hover { color: #ffffff; padding-left: 4px; }
.footer-nav a:hover::before { width: 12px; }

.footer-social-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-social-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  transition: all var(--fast) ease;
}

.footer-social-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.footer-social-link:hover { color: #00AEEF; transform: translateX(4px); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
}

.footer-bottom p {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.3);
}

.footer-bottom-links {
  display: flex;
  gap: 28px;
}

.footer-bottom-links a {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.3);
  transition: color var(--fast) ease;
}

.footer-bottom-links a:hover { color: #00AEEF; }

/* ═══════════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — TABLET
   ═══════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .footer-main { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 960px) {
  .container { padding: 0 32px; }
  .nav-container { padding: 0 32px; }
  .hero .container { padding: 0 32px; }
  .logo { height: 88px; }
  .logo-img { height: 28px; margin-left: 0; width: auto; }

  .main-menu { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: transparent; border-bottom: none; padding: 20px 32px; gap: 4px; backdrop-filter: none; }
  .main-menu.active { display: flex; }
  .menu-item { padding: 12px 16px; border-radius: var(--radius); }
  .menu-dropdown .submenu { position: static; display: none; background: none; box-shadow: none; border: none; padding: 0 8px; margin-top: 4px; }
  .menu-dropdown.open .submenu { display: flex; }
  .hamburger { display: flex; }
  .preview-grid { grid-template-columns: repeat(2, 1fr); }

  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .intro-split { grid-template-columns: 1fr; gap: 48px; }
  .contact-wrapper { grid-template-columns: 1fr; }
  .stats-grid { flex-wrap: wrap; }
  .stat-item { flex: 1 1 40%; }
  .stat-divider { display: none; }
  .contact-form { padding: 32px; }
  .form-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — MOBILE
   ═══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .nav-container { padding: 0 20px; }
  .hero .container { padding: 0 20px; }
  .logo { height: 80px; }
  .logo-img { height: 26px; margin-left: 0; width: auto; }

  .hero { height: 100vh; min-height: 560px; margin-top: 0; }
  .hero-title { font-size: 2.4rem; }
  .hero-cta { flex-direction: column; align-items: flex-start; }
  .preview-grid { grid-template-columns: 1fr; }

  .intro-section,
  .services-section,
  .careers-section,
  .portfolio-section,
  .contact-section { padding: 72px 0; }

  .section-title { font-size: 1.8rem; margin-bottom: 40px; }
  .intro-headline { font-size: 1.3rem; }
  .services-grid { grid-template-columns: 1fr 1fr; gap: 2px; }
  .portfolio-grid { grid-template-columns: 1fr; }

  .stats-grid { flex-wrap: wrap; padding: 0 20px; }
  .stat-item { flex: 1 1 45%; padding: 24px 10px; }

  .career-actions { flex-direction: column; }

  .footer-main { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  .socials-cards { gap: 10px; }
  .contact-form { padding: 24px; }
}

/* ═══════════════════════════════════════════════════
   INNER PAGE — SHARED HERO & LAYOUT
   ═══════════════════════════════════════════════════ */
.page-hero {
  background: #0d1829;
  padding: 88px 0 100px;
  margin-top: 110px;
  position: relative;
  overflow: hidden;
}

/* Subtle dot grid — precision/technical feel */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(154,173,204,0.10) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* Right-side blue glow */
.page-hero::after {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(0,119,200,0.18) 0%, transparent 68%);
  pointer-events: none;
}

/* Left blue accent bar */
.page-hero .container {
  position: relative;
  padding-left: 72px;
}
.page-hero .container::before {
  content: '';
  position: absolute;
  left: 48px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #0077C8 0%, rgba(0,119,200,0.08) 100%);
}

.page-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Oswald', sans-serif;
  font-size: 0.6rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: rgba(154,173,204,0.7);
  margin-bottom: 20px;
}

.page-hero-label::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: #0077C8;
  flex-shrink: 0;
}

.page-hero h1 {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.0;
  color: #ffffff;
}

.page-hero h1 span { color: #0077C8; }

.page-hero-sub {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.85;
  max-width: 480px;
  margin-top: 20px;
  font-weight: 300;
}

.page-hero-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}

.page-body {
  background: #f5f7fa;
  padding: 80px 0 100px;
}

/* ── HOME: simple CTA strip ── */
.home-cta-strip {
  background: #0077C8;
  padding: 52px 0;
}

.home-cta-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.home-cta-strip h3 {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.home-cta-strip p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
  margin-top: 6px;
}

.cta-white {
  background: #ffffff;
  color: #0077C8;
  border-radius: 6px;
  padding: 14px 32px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.cta-white:hover {
  background: #1a2744;
  color: #ffffff;
  transform: translateY(-2px);
}

/* ── PORTFOLIO VIEW ALL ── */
.view-all-row {
  text-align: center;
  margin-top: 48px;
}

/* ── SERVICE DETAIL ── */
.service-detail-body {
  background: #ffffff;
  padding: 80px 0 100px;
}

.service-detail-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 72px;
  align-items: start;
}

.service-overview h2 {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 400;
  text-transform: uppercase;
  color: #1a2744;
  margin-bottom: 24px;
}

.service-overview p {
  font-size: 0.95rem;
  color: #5a6a88;
  line-height: 1.85;
  margin-bottom: 16px;
}

.service-sidebar {
  background: #f0f4f9;
  border-radius: 12px;
  padding: 36px;
  border: 1px solid rgba(26,39,68,0.06);
  position: sticky;
  top: 130px;
}

.service-sidebar h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #1a2744;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(26,39,68,0.1);
}

.deliverables-list {
  list-style: none;
  margin-bottom: 32px;
}

.deliverables-list li {
  font-size: 0.88rem;
  color: #1a2744;
  padding: 10px 0;
  border-bottom: 1px solid rgba(26,39,68,0.07);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}

.deliverables-list li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #0077C8;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

@media (max-width: 960px) {
  .service-detail-grid { grid-template-columns: 1fr; }
  .service-sidebar { position: static; }
  .page-hero-inner { flex-direction: column; align-items: flex-start; }
  .home-cta-strip-inner { flex-direction: column; text-align: center; }
}

/* ═══════════════════════════════════════════════════
   DESIGN REFINEMENTS
   ═══════════════════════════════════════════════════ */

/* About section — right column gets a light panel treatment */
.intro-right {
  background: #f0f4f9;
  padding: 40px;
  border-radius: 12px;
  border: 1px solid rgba(26,39,68,0.06);
}

/* Read-more links — use the brand blue consistently */
.read-more { color: #0077C8; }
.read-more:hover { color: #005fa0; }

/* Card date colour — match blue */
.card-date { color: #0077C8; }

/* Hero pill — squared slightly for a more deliberate feel */
.hero-pill {
  border-radius: 4px;
}

/* Trusted tags — slightly more geometric */
.trusted-tag {
  border-radius: 4px;
}

/* Section titles — slightly heavier weight */
.section-title {
  font-weight: 400;
}

/* Intro split — ensure alignment on all screen sizes */
@media (max-width: 960px) {
  .intro-right {
    padding: 28px;
  }
}

@media (max-width: 640px) {
  .intro-right {
    padding: 24px;
  }
}

/* ═══════════════════════════════════════════════════
   SERVICE PAGE — PHOTO ELEMENTS
   ═══════════════════════════════════════════════════ */

.service-banner {
  width: 100%;
  height: 460px;
  background-size: cover;
  background-position: center;
  display: block;
}

.svc-inline-photo {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  margin: 36px 0;
}

.svc-photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 36px 0;
}

.svc-photo-pair img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

@media (max-width: 700px) {
  .service-banner { height: 260px; }
  .svc-photo-pair { grid-template-columns: 1fr; }
  .svc-photo-pair img { height: 200px; }
}

/* ═══════════════════════════════════════════════════
   CATEGORY SERVICE PAGES
   ═══════════════════════════════════════════════════ */

.cat-intro {
  padding: 64px 0;
  background: #ffffff;
  border-bottom: 1px solid rgba(26,39,68,0.08);
}

.cat-intro-text {
  font-size: 1.05rem;
  color: #5a6a88;
  line-height: 1.9;
  max-width: 820px;
}

.cat-services {
  padding: 4px 0 100px;
  background: #f5f7fa;
}

.cat-svc-block {
  background: #ffffff;
  margin-bottom: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.cat-svc-block--rev { direction: rtl; }
.cat-svc-block--rev > * { direction: ltr; }

.cat-svc-photo {
  height: 480px;
  background-size: cover;
  background-position: center;
}

.cat-svc-content {
  padding: 52px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cat-svc-num {
  font-family: 'Oswald', sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: #9aadcc;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.cat-svc-name {
  font-family: 'Oswald', sans-serif;
  font-size: 1.75rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1a2744;
  margin-bottom: 18px;
  line-height: 1.2;
}

.cat-svc-desc {
  font-size: 0.88rem;
  color: #5a6a88;
  line-height: 1.9;
  margin-bottom: 22px;
}

.cat-svc-specs {
  background: #f5f7fa;
  border-left: 3px solid #0077C8;
  padding: 14px 18px;
  margin-bottom: 22px;
  font-size: 0.85rem;
  color: #1a2744;
  line-height: 1.75;
}

.cat-svc-specs strong {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #9aadcc;
  margin-bottom: 6px;
}

.cat-svc-delivers {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cat-svc-delivers li {
  font-size: 0.83rem;
  color: #5a6a88;
  padding: 6px 0;
  border-bottom: 1px solid rgba(26,39,68,0.06);
  display: flex;
  align-items: center;
  gap: 10px;
}

.cat-svc-delivers li::before {
  content: '';
  width: 16px;
  height: 2px;
  background: #0077C8;
  flex-shrink: 0;
}

@media (max-width: 960px) {
  .cat-svc-block,
  .cat-svc-block--rev {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .cat-svc-photo { height: 300px; }
  .cat-svc-content { padding: 40px 32px; }
}

/* ── SERVICE COLOR ACCENTS ── */
.clr-green  { color: #22c55e !important; }
.clr-orange { color: #f97316 !important; }
.clr-purple { color: #a855f7 !important; }

/* ── SERVICE SUB-NAV ── */
.svc-subnav {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  padding: 0 48px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.svc-subnav-tab {
  font-family: 'Oswald', sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  padding: 15px 24px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.svc-subnav-tab:hover { color: rgba(255,255,255,0.75); }
.svc-subnav-tab[data-active="green"]  { color: #22c55e; border-color: #22c55e; }
.svc-subnav-tab[data-active="orange"] { color: #f97316; border-color: #f97316; }
.svc-subnav-tab[data-active="purple"] { color: #a855f7; border-color: #a855f7; }

/* ── SECTOR GRID (Surveying industry sectors) ── */
.sectors-section {
  background: #f8fafc;
  padding: 80px 0 100px;
}
.sector-intro-text {
  max-width: 680px;
  margin: 0 auto 60px;
  text-align: center;
  font-size: 0.95rem;
  color: rgba(26,39,68,0.65);
  line-height: 1.75;
}
.sector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(26,39,68,0.07);
}
.sector-card {
  background: #ffffff;
  padding: 44px 36px;
  border-top: 3px solid transparent;
  transition: border-color 0.25s;
}
.sector-card:hover { border-top-color: #22c55e; }
.sector-card-num {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #22c55e;
  margin-bottom: 16px;
}
.sector-card-name {
  font-family: 'Oswald', sans-serif;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #1a2744;
  margin-bottom: 14px;
}
.sector-card-desc {
  font-size: 0.83rem;
  color: rgba(26,39,68,0.6);
  line-height: 1.72;
}
@media (max-width: 900px) {
  .sector-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sector-grid { grid-template-columns: 1fr; }
  .sector-card { padding: 32px 24px; }
}

/* ═══════════════════════════════════════════════════
   MODERN ENHANCEMENT LAYER
   ═══════════════════════════════════════════════════ */

/* ── Custom text selection ── */
::selection {
  background: rgba(0, 119, 200, 0.25);
  color: #1a2744;
}
::-moz-selection {
  background: rgba(0, 119, 200, 0.25);
  color: #1a2744;
}

/* ── Scroll padding for fixed header ── */
html {
  scroll-padding-top: 120px;
}

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0d1829; }
::-webkit-scrollbar-thumb { background: #1a2744; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #0077C8; }

/* ── Focus-visible ring — keyboard nav ── */
:focus-visible {
  outline: 2px solid #0077C8;
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── Page load fade-in ── */
body {
  animation: pageIn 0.45s ease both;
}
@keyframes pageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Header — glassmorphism when scrolled ── */
.header-bar.scrolled {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 rgba(26,39,68,0.08), 0 4px 32px rgba(26,39,68,0.06);
}

/* ── Nav link — animated underline ── */
.menu-item::after {
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}

/* ── Contact button — subtle glow on hover ── */
.menu-contact-btn {
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* ── CTA buttons — shine sweep on hover ── */
.cta-primary,
.cta-secondary,
.cta-white,
.submit-btn {
  position: relative;
  overflow: hidden;
}
.cta-primary::before,
.cta-white::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
}
.cta-primary:hover::before,
.cta-white:hover::before {
  left: 160%;
}

/* ── Hero — subtle grain overlay ── */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.35;
  z-index: 1;
  mix-blend-mode: overlay;
}

/* ── Stats bar — animated glow sweep ── */
.stats-bar {
  position: relative;
  overflow: hidden;
}
.stats-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -200%;
  width: 80%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,174,239,0.04), transparent);
  animation: statsSweep 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes statsSweep {
  0%   { left: -200%; }
  100% { left: 200%; }
}

/* ── Stat numbers — tabular figures ── */
.stat-number {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ── Portfolio cards — layered shadow depth ── */
.portfolio-card {
  box-shadow:
    0 1px 2px rgba(26,39,68,0.04),
    0 4px 12px rgba(26,39,68,0.06),
    0 8px 24px rgba(26,39,68,0.04);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.4s ease;
}
.portfolio-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 2px 4px rgba(26,39,68,0.04),
    0 8px 24px rgba(26,39,68,0.08),
    0 20px 48px rgba(0,119,200,0.1);
}

/* ── Card image — prevent layout shift + smooth load ── */
.card-image {
  will-change: transform;
}
.card-img-wrap {
  background: #eef1f6;
}

/* ── Svc tiles — inset shadow refinement ── */
.svc-tile {
  will-change: transform;
}
.svc-tile::before {
  transition: opacity 0.4s ease;
}

/* ── Service subnav — pulls up to overlap hero bottom ── */
.svc-subnav {
  position: relative;
  z-index: 5;
  margin-top: -52px;
  scrollbar-width: none;
}
.svc-subnav::-webkit-scrollbar { display: none; }

/* ── Service banner — parallax hint ── */
.service-banner {
  will-change: transform;
}

/* ── Cat service blocks — image zoom on hover ── */
.cat-svc-block:hover .cat-svc-photo {
  background-size: 105%;
  transition: background-size 0.7s ease;
}
.cat-svc-photo {
  transition: background-size 0.7s ease;
}

/* ── Cat svc spec bar — glowing left border ── */
.cat-svc-specs {
  border-left: 3px solid #0077C8;
  position: relative;
  transition: border-color 0.3s ease;
}
.cat-svc-block:hover .cat-svc-specs {
  border-color: #00AEEF;
  box-shadow: -4px 0 16px rgba(0, 174, 239, 0.12);
}

/* ── Deliverables list — stagger on hover ── */
.cat-svc-delivers li {
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.cat-svc-delivers li::before {
  transition: background 0.2s ease, width 0.25s ease;
}
.cat-svc-block:hover .cat-svc-delivers li::before {
  background: #00AEEF;
  width: 22px;
}

/* ── Sector cards — sharper hover ── */
.sector-card {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.sector-card:hover {
  border-top-color: #22c55e;
  box-shadow: 0 -4px 0 0 rgba(34,197,94,0.15), 0 8px 32px rgba(26,39,68,0.08);
  transform: translateY(-2px);
}

/* ── Sector card number — animated ── */
.sector-card-num {
  transition: letter-spacing 0.3s ease;
}
.sector-card:hover .sector-card-num {
  letter-spacing: 0.28em;
}

/* ── Footer — top gradient border ── */
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,174,239,0.4), rgba(0,119,200,0.4), transparent);
}

/* ── Footer links — stagger color ── */
.footer-nav a {
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.footer-nav a::before {
  transition: width 0.25s ease;
}

/* ── Footer social ── */
.footer-social-link {
  transition: color 0.2s ease, transform 0.25s ease;
}

/* ── Form inputs — floating glow ring ── */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  box-shadow: 0 0 0 3px rgba(0,119,200,0.12), 0 1px 4px rgba(0,119,200,0.08);
}

/* ── Submit button — ripple-ready ── */
.submit-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: translateX(-100%) skewX(-20deg);
  transition: transform 0.5s ease;
}
.submit-btn:hover::before {
  transform: translateX(200%) skewX(-20deg);
}

/* ── Contact form — top border glow ── */
.contact-form::before {
  animation: gradientBorderPulse 4s ease-in-out infinite;
}
@keyframes gradientBorderPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* ── About team overlay — smoother gradient ── */
.ab-team-photo {
  will-change: transform;
}

/* ── About approach items — left border accent ── */
.ab-approach-item {
  position: relative;
  border-left: 2px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.ab-approach-item:hover {
  border-left-color: #0077C8;
}

/* ── About approach number — glow ── */
.ab-approach-num {
  transition: color 0.25s ease;
}
.ab-approach-item:hover .ab-approach-num {
  color: #00AEEF;
  text-shadow: 0 0 16px rgba(0,174,239,0.35);
}

/* ── Section intro text ── */
.cat-intro-text {
  position: relative;
}
.cat-intro-text::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: #0077C8;
  margin-bottom: 24px;
}

/* ── Dark sections — ambient bottom light ── */
.stats-bar::before,
.careers-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,174,239,0.3), transparent);
}

/* ── Why section items — accent on hover ── */
.why-item {
  transition: background 0.25s ease;
  border-radius: 4px;
  position: relative;
}
.why-title {
  transition: color 0.2s ease;
}
.why-item:hover .why-title { color: #0077C8; }

/* ── Cap strip items ── */
.cap-item {
  transition: background 0.25s ease;
}
.cap-name {
  transition: color 0.2s ease;
}

/* ── Page hero — enhanced left bar glow ── */
.page-hero .container::before {
  box-shadow: 2px 0 20px rgba(0,119,200,0.2);
}

/* ── Staggered grid reveals (when .visible class added) ── */
.sector-grid .sector-card:nth-child(1) { transition-delay: 0s; }
.sector-grid .sector-card:nth-child(2) { transition-delay: 0.05s; }
.sector-grid .sector-card:nth-child(3) { transition-delay: 0.1s; }
.sector-grid .sector-card:nth-child(4) { transition-delay: 0.15s; }
.sector-grid .sector-card:nth-child(5) { transition-delay: 0.2s; }
.sector-grid .sector-card:nth-child(6) { transition-delay: 0.25s; }

.ab-approach-grid .ab-approach-item:nth-child(1) { transition-delay: 0s; }
.ab-approach-grid .ab-approach-item:nth-child(2) { transition-delay: 0.06s; }
.ab-approach-grid .ab-approach-item:nth-child(3) { transition-delay: 0.12s; }
.ab-approach-grid .ab-approach-item:nth-child(4) { transition-delay: 0.18s; }
.ab-approach-grid .ab-approach-item:nth-child(5) { transition-delay: 0.24s; }
.ab-approach-grid .ab-approach-item:nth-child(6) { transition-delay: 0.30s; }

.portfolio-grid .portfolio-card:nth-child(1) { transition-delay: 0s; }
.portfolio-grid .portfolio-card:nth-child(2) { transition-delay: 0.07s; }
.portfolio-grid .portfolio-card:nth-child(3) { transition-delay: 0.14s; }

/* ── Image rendering ── */
img {
  image-rendering: -webkit-optimize-contrast;
}

/* ── Reduced motion — accessibility ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ── High contrast mode support ── */
@media (forced-colors: active) {
  .cta-primary, .submit-btn { border: 2px solid ButtonText; }
  .menu-contact-btn { border: 2px solid ButtonText; }
}

/* ── Print styles ── */
@media print {
  .header-bar, .footer, .hamburger, .svc-subnav { display: none; }
  .page-hero { margin-top: 0; }
  body { color: #000; background: #fff; }
}

/* ═══════════════════════════════════════════════════
   PREMIUM ENHANCEMENT LAYER — VOLUME II
   Deep micro-interactions, ambient glows, glass,
   animated gradients, advanced hover system
   ═══════════════════════════════════════════════════ */

/* ── Extended design tokens ── */
:root {
  --glow-blue:    0 0 40px rgba(0,119,200,0.25);
  --glow-cyan:    0 0 40px rgba(0,174,239,0.25);
  --glow-sm:      0 0 16px rgba(0,119,200,0.18);
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:    0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg:    0 12px 40px rgba(0,0,0,0.12);
  --shadow-xl:    0 24px 64px rgba(0,0,0,0.16);
  --ease-out-expo: cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:   cubic-bezier(0.4,0,0.2,1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;
}

/* ── Global keyframe library ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,119,200,0); }
  50%       { box-shadow: 0 0 30px 4px rgba(0,119,200,0.2); }
}
@keyframes rotateBorder {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
@keyframes scanDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100vh); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes breathe {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.08); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes borderDraw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}
@keyframes dotGrid {
  0%   { background-position: 0 0; }
  100% { background-position: 28px 28px; }
}

/* ═══════════════════════════════════════════════════
   HEADER — PREMIUM REFINEMENTS
   ═══════════════════════════════════════════════════ */

/* Subtle bottom gradient accent when scrolled */
.header-bar.scrolled::after {
  display: none;
}

/* Logo — subtle float on hover */
.logo:hover .logo-img {
  animation: float 3s ease-in-out infinite;
}

/* Nav link — color fill from left */
.menu-item {
  overflow: hidden;
}
.menu-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,119,200,0.05);
  border-radius: var(--radius);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-out-expo);
  z-index: -1;
}
.menu-item:hover::before { transform: scaleX(1); }

/* Contact button — animated border */
.menu-contact-btn {
  position: relative;
}
.menu-contact-btn::before {
  opacity: 0;
}
.menu-contact-btn:hover::before { opacity: 0; }

/* ═══════════════════════════════════════════════════
   HERO — PREMIUM TREATMENTS
   ═══════════════════════════════════════════════════ */

/* Static dark vignette overlay */
.hero::before {
  background:
    linear-gradient(90deg,  rgba(3,8,20,0.78) 0%, rgba(3,8,20,0.46) 42%, rgba(3,8,20,0.08) 78%, transparent 100%),
    linear-gradient(180deg, rgba(3,8,20,0.45) 0%, rgba(3,8,20,0.10) 30%, rgba(3,8,20,0.10) 65%, rgba(3,8,20,0.55) 100%);
}

/* Hero pill — pulsing border */
.hero-pill {
  animation: pulseGlow 3s ease-in-out infinite;
  position: relative;
}

/* Hero title — word-by-word fade up */
.hero-title { animation: fadeUp 0.7s 0.2s var(--ease-out-expo) both; }
.hero-sub    { animation: fadeUp 0.7s 0.38s var(--ease-out-expo) both; }
.hero-cta    { animation: fadeUp 0.7s 0.52s var(--ease-out-expo) both; }
.hero-trusted{ animation: fadeUp 0.7s 0.66s var(--ease-out-expo) both; }

/* Trusted tags — hover micro-lift */
.trusted-tag {
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.trusted-tag:hover {
  transform: translateY(-2px);
}

/* Hero bg — slower, more premium zoom */
.hero-bg {
  animation: heroBgIn 12s cubic-bezier(0.16,1,0.3,1) both;
}

/* ═══════════════════════════════════════════════════
   CAPABILITIES STRIP — PREMIUM
   ═══════════════════════════════════════════════════ */

.cap-item {
  position: relative;
  overflow: hidden;
}

/* Vertical sliding highlight */
.cap-item::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #0077C8, #00AEEF);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out-expo);
}
.cap-item:hover::before { transform: scaleX(1); }

/* Cap icon dots */
.cap-item::after {
  content: '';
  position: absolute;
  top: 16px; right: 20px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #0077C8;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s ease, transform 0.3s var(--ease-out-expo);
  box-shadow: 0 0 10px rgba(0,119,200,0.6);
}
.cap-item:hover::after {
  opacity: 1;
  transform: scale(1);
}

/* ═══════════════════════════════════════════════════
   STATS BAR — PREMIUM GLOW
   ═══════════════════════════════════════════════════ */

.stat-item {
  position: relative;
}

/* Glow orb behind number */
.stat-number {
  position: relative;
}
.stat-number::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,174,239,0.15) 0%, transparent 70%);
  pointer-events: none;
  animation: breathe 4s ease-in-out infinite;
}

/* Stat hover — number brightens */
.stat-item:hover .stat-number {
  color: #00AEEF;
  transition: color 0.3s ease;
}
.stat-item:hover .stat-suffix {
  color: #00AEEF;
  transition: color 0.3s ease;
}

/* ═══════════════════════════════════════════════════
   INTRO SECTION — PREMIUM
   ═══════════════════════════════════════════════════ */

/* Accent bar — animated width */
.intro-accent-bar {
  transition: width 0.6s var(--ease-out-expo);
}
.intro-left:hover .intro-accent-bar { width: 80px; }

/* Intro headline — gradient on key words */
.intro-headline strong {
  background: linear-gradient(135deg, #1a2744, #0077C8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Right panel — hover lift */
.intro-right {
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s ease;
}
.intro-right:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(26,39,68,0.1);
}

/* ═══════════════════════════════════════════════════
   SERVICE TILES — PREMIUM INTERACTIONS
   ═══════════════════════════════════════════════════ */

/* Tile border glow on hover */
.svc-tile {
  transition: box-shadow 0.4s ease;
}
.svc-tile:hover {
  box-shadow: inset 0 0 0 1px rgba(0,174,239,0.3);
}

/* Tile name color transition */
.svc-tile-name {
  transition: color 0.25s ease;
}
.svc-tile:hover .svc-tile-name {
  color: #00AEEF;
}

/* Service tile overlay — color wash */
.svc-tile:hover::after {
  background: linear-gradient(135deg,
    rgba(0,119,200,0.15) 0%,
    rgba(0,174,239,0.08) 100%
  );
}

/* ── Photo grid gap glow ── */
.svc-photo-grid {
  background: rgba(0,119,200,0.15);
}
.svc-photo-grid--3 {
  background: rgba(0,119,200,0.15);
}

/* ═══════════════════════════════════════════════════
   PORTFOLIO — PREMIUM CARD SYSTEM
   ═══════════════════════════════════════════════════ */

/* Card category badge — gradient bg */
.card-category {
  background: linear-gradient(135deg, rgba(0,119,200,0.7), rgba(0,174,239,0.7));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.25s ease;
}
.portfolio-card:hover .card-category {
  transform: translateY(-2px);
}

/* Card image — warm desaturate on hover */
.card-image {
  transition: transform 0.7s var(--ease-out-expo), filter 0.5s ease;
  filter: saturate(0.9);
}
.portfolio-card:hover .card-image {
  transform: scale(1.07);
  filter: saturate(1.05) brightness(1.02);
}

/* Card content — border reveal */
.card-content {
  position: relative;
}
.card-content::before {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,119,200,0.2), transparent);
}

/* Card title — hover color */
.portfolio-card:hover .card-content h3 { color: #0077C8; }

/* Read more — animated underline */
.read-more {
  position: relative;
  padding-bottom: 2px;
}
.read-more::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: #0077C8;
  transition: width 0.3s var(--ease-out-expo);
}
.read-more:hover::after { width: 100%; }

/* ═══════════════════════════════════════════════════
   CAREERS SECTION — ANIMATED BACKGROUND
   ═══════════════════════════════════════════════════ */

.careers-section {
  overflow: hidden;
}

/* Animated ambient light orbs */
.careers-section::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,119,200,0.12) 0%, transparent 65%);
  top: -200px; left: -100px;
  animation: float 8s ease-in-out infinite;
  pointer-events: none;
}
.careers-section::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,174,239,0.08) 0%, transparent 65%);
  bottom: -100px; right: -80px;
  animation: float 10s ease-in-out infinite reverse;
  pointer-events: none;
}

/* Careers heading — gradient text */
.careers-content h2 {
  background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════════════════════
   WHY Geomatrica — PREMIUM
   ═══════════════════════════════════════════════════ */

.why-item {
  padding: 40px 40px 40px 0;
  position: relative;
}

/* Accent number watermark */
.why-item:nth-child(1)::before,
.why-item:nth-child(2)::before,
.why-item:nth-child(3)::before {
  font-family: 'Oswald', sans-serif;
  font-size: 5rem;
  font-weight: 700;
  color: rgba(26,39,68,0.04);
  position: absolute;
  top: 20px; right: 20px;
  line-height: 1;
  pointer-events: none;
  transition: color 0.3s ease;
}
.why-item:nth-child(1)::before { content: '01'; }
.why-item:nth-child(2)::before { content: '02'; }
.why-item:nth-child(3)::before { content: '03'; }
.why-item:hover::before { color: rgba(0,119,200,0.07); }

/* Why title — underline on hover */
.why-title {
  display: inline-block;
  position: relative;
}
.why-title::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: #0077C8;
  transition: width 0.3s var(--ease-out-expo);
}
.why-item:hover .why-title::after { width: 100%; }

/* ═══════════════════════════════════════════════════
   CONTACT SECTION — PREMIUM FORM
   ═══════════════════════════════════════════════════ */

/* Contact form — glass elevation */
.contact-form {
  transition: box-shadow 0.4s ease, transform 0.4s var(--ease-out-expo);
}
.contact-form:focus-within {
  box-shadow: 0 8px 40px rgba(0,119,200,0.1), 0 2px 16px rgba(26,39,68,0.08);
  transform: translateY(-2px);
}

/* Input — animated left border */
.form-group {
  position: relative;
}
.form-group input,
.form-group select,
.form-group textarea {
  border-left: 2px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-left-color: #0077C8;
}

/* Label — slide up on focus */
.form-group label {
  transition: color 0.2s ease, letter-spacing 0.2s ease;
}
.form-group:focus-within label {
  color: #0077C8;
  letter-spacing: 0.16em;
}

/* Info blocks — hover glow */
.contact-info-block {
  transition: box-shadow 0.3s ease, transform 0.3s var(--ease-out-expo);
}
.contact-info-block:hover {
  box-shadow: 0 8px 32px rgba(0,119,200,0.08);
  transform: translateY(-3px);
}

/* Detail icon — hover glow */
.contact-detail-icon {
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.contact-detail-row:hover .contact-detail-icon {
  background: rgba(0,119,200,0.15);
  box-shadow: 0 0 16px rgba(0,119,200,0.2);
  transform: scale(1.08);
}

/* Socials panel — hover lift */
.socials-panel {
  transition: box-shadow 0.3s ease, transform 0.3s var(--ease-out-expo);
}
.socials-panel:hover {
  box-shadow: 0 8px 32px rgba(26,39,68,0.08);
  transform: translateY(-3px);
}

/* ═══════════════════════════════════════════════════
   PAGE HERO — INNER PAGES
   ═══════════════════════════════════════════════════ */

/* Animated dot grid */
.page-hero::before {
  animation: dotGrid 12s linear infinite;
}

/* h1 — stagger in */
.page-hero h1 { animation: slideInLeft 0.65s 0.1s var(--ease-out-expo) both; }
.page-hero-sub { animation: slideInLeft 0.65s 0.25s var(--ease-out-expo) both; }

/* Right glow — breathe */
.page-hero::after {
  animation: breathe 6s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════
   SERVICE CATEGORY PAGES — ENHANCED
   ═══════════════════════════════════════════════════ */

/* Cat block — slide-in from sides */
.cat-svc-block { position: relative; }
.cat-svc-block::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,119,200,0.15), transparent);
}

/* Cat svc name — hover gradient */
.cat-svc-name {
  transition: color 0.3s ease;
  display: inline-block;
}
.cat-svc-block:hover .cat-svc-name { color: #0077C8; }

/* Cat svc photo — full overlay on hover */
.cat-svc-photo {
  position: relative;
  overflow: hidden;
}
.cat-svc-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(0,119,200,0.08) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
}
.cat-svc-block:hover .cat-svc-photo::after { opacity: 1; }

/* Service banner — gradient overlay */
.service-banner {
  position: relative;
}
.service-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(5,12,30,0.4) 0%,
    transparent 40%,
    transparent 60%,
    rgba(5,12,30,0.4) 100%
  );
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   SECTOR CARDS — DEEPER POLISH
   ═══════════════════════════════════════════════════ */

.sector-card {
  position: relative;
  overflow: hidden;
}

/* Number watermark */
.sector-card::before {
  content: attr(data-num);
  position: absolute;
  bottom: -10px; right: -8px;
  font-family: 'Oswald', sans-serif;
  font-size: 6rem;
  font-weight: 700;
  color: rgba(26,39,68,0.04);
  line-height: 1;
  pointer-events: none;
  transition: color 0.3s ease, transform 0.3s ease;
}
.sector-card:hover::before {
  color: rgba(34,197,94,0.06);
  transform: scale(1.05) translateX(-4px);
}

/* Sector card — icon dot */
.sector-card-num::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(34,197,94,0.5);
  animation: glowPulse 2s ease-in-out infinite;
}

/* Sector card name — hover color */
.sector-card:hover .sector-card-name { color: #22c55e; transition: color 0.25s ease; }

/* ═══════════════════════════════════════════════════
   ABOUT PAGE — PREMIUM TEAM SECTION
   ═══════════════════════════════════════════════════ */

/* Team photo — color grade on hover */
.ab-team-card {
  position: relative;
  overflow: hidden;
}

/* Name reveal — slide up */
.ab-team-overlay {
  transition: padding-bottom 0.4s var(--ease-out-expo);
}
.ab-team-card:hover .ab-team-overlay {
  padding-bottom: 52px;
}

/* Name — animate in */
.ab-team-name {
  transition: letter-spacing 0.4s ease, transform 0.4s var(--ease-out-expo);
  display: block;
}
.ab-team-card:hover .ab-team-name {
  letter-spacing: 0.08em;
}

/* Role — slide up from below */
.ab-team-role {
  display: block;
  transform: translateY(4px);
  opacity: 0;
  transition: transform 0.4s var(--ease-out-expo) 0.1s, opacity 0.4s ease 0.1s;
}
.ab-team-card:hover .ab-team-role {
  transform: translateY(0);
  opacity: 1;
}

/* Thin blue line accent above name */
.ab-team-overlay::before {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, #0077C8, #00AEEF);
  margin-bottom: 20px;
  transition: width 0.5s var(--ease-out-expo) 0.05s;
}
.ab-team-card:hover .ab-team-overlay::before {
  width: 48px;
}

/* Approach item — number watermark */
.ab-approach-item {
  overflow: hidden;
  position: relative;
}
.ab-approach-item::after {
  content: attr(data-num);
  position: absolute;
  bottom: -16px; right: 16px;
  font-family: 'Oswald', sans-serif;
  font-size: 5rem;
  font-weight: 700;
  color: rgba(255,255,255,0.025);
  line-height: 1;
  pointer-events: none;
  transition: color 0.3s ease;
}
.ab-approach-item:hover::after {
  color: rgba(0,119,200,0.08);
}

/* Mission text — accent word glow */
.ab-mission-text span {
  position: relative;
  transition: text-shadow 0.3s ease;
}
.ab-mission-text:hover span {
  text-shadow: 0 0 20px rgba(0,119,200,0.4);
}

/* Story heading — gradient */
.ab-heading {
  background: linear-gradient(135deg, #1a2744 0%, #2d4a7a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════════════════════
   SUBNAV — DEEPER STYLING
   ═══════════════════════════════════════════════════ */

/* Subnav background — fully transparent */
.svc-subnav {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
}

/* Active tab glow */
.svc-subnav-tab[data-active="green"] {
  text-shadow: 0 0 16px rgba(34,197,94,0.4);
}
.svc-subnav-tab[data-active="orange"] {
  text-shadow: 0 0 16px rgba(249,115,22,0.4);
}
.svc-subnav-tab[data-active="purple"] {
  text-shadow: 0 0 16px rgba(168,85,247,0.4);
}

/* Tab hover — underline from center */
.svc-subnav-tab {
  position: relative;
  transition: color 0.25s ease;
}
.svc-subnav-tab::before {
  content: '';
  position: absolute;
  bottom: -1px; left: 50%; right: 50%;
  height: 2px;
  background: currentColor;
  transition: left 0.3s var(--ease-out-expo), right 0.3s var(--ease-out-expo);
}
.svc-subnav-tab:hover::before {
  left: 20px;
  right: 20px;
}
.svc-subnav-tab[data-active]::before {
  left: 20px;
  right: 20px;
}

/* ═══════════════════════════════════════════════════
   CAT INTRO — PULL QUOTE TREATMENT
   ═══════════════════════════════════════════════════ */

.cat-intro {
  position: relative;
  overflow: hidden;
}
.cat-intro::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 300px; height: 100%;
  background: linear-gradient(to left, rgba(0,119,200,0.04), transparent);
  pointer-events: none;
}

.cat-intro-text {
  font-size: 1.08rem;
  line-height: 1.95;
  position: relative;
}

/* ═══════════════════════════════════════════════════
   FOOTER — DEEPER POLISH
   ═══════════════════════════════════════════════════ */

/* Footer brand — hover glow on logo */
.footer-logo-img {
  transition: filter 0.3s ease, transform 0.3s var(--ease-out-expo), opacity 0.3s ease;
}
.footer-logo:hover .footer-logo-img {
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(0,174,239,0.5));
  transform: scale(1.04);
}

/* Footer links — stagger on parent hover */
.footer-links-group:hover .footer-nav a:nth-child(1) { transition-delay: 0s; }
.footer-links-group:hover .footer-nav a:nth-child(2) { transition-delay: 0.04s; }
.footer-links-group:hover .footer-nav a:nth-child(3) { transition-delay: 0.08s; }
.footer-links-group:hover .footer-nav a:nth-child(4) { transition-delay: 0.12s; }
.footer-links-group:hover .footer-nav a:nth-child(5) { transition-delay: 0.16s; }

/* Footer bottom — gradient separator */
.footer-bottom {
  position: relative;
}
.footer-bottom::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.08) 20%,
    rgba(0,174,239,0.2) 50%,
    rgba(255,255,255,0.08) 80%,
    transparent 100%
  );
}

/* Social link — hover glow */
.footer-social-link {
  position: relative;
  padding: 4px 0;
}
.footer-social-link svg {
  transition: filter 0.25s ease, transform 0.25s var(--ease-out-expo);
}
.footer-social-link:hover svg {
  filter: drop-shadow(0 0 6px rgba(0,174,239,0.6));
  transform: scale(1.15);
}

/* ═══════════════════════════════════════════════════
   SCROLL REVEAL — ENHANCED VARIANTS
   ═══════════════════════════════════════════════════ */

/* Reveal from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.7s ease, transform 0.7s var(--ease-out-expo);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

/* Reveal from right */
.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.7s ease, transform 0.7s var(--ease-out-expo);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Reveal scale */
.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.6s ease, transform 0.6s var(--ease-out-expo);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Base reveal — springier easing */
.reveal {
  transition: opacity 0.65s ease, transform 0.65s var(--ease-out-expo);
}

/* ═══════════════════════════════════════════════════
   GLASS PANELS — REUSABLE
   ═══════════════════════════════════════════════════ */

.glass-panel {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
}
.glass-panel-dark {
  background: rgba(5,12,30,0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
}

/* ═══════════════════════════════════════════════════
   GRADIENT BORDER — REUSABLE
   ═══════════════════════════════════════════════════ */

.gradient-border {
  position: relative;
  border-radius: var(--radius-lg);
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, #0077C8, #00AEEF, #0077C8);
  background-size: 200% 200%;
  animation: rotateBorder 4s linear infinite;
  z-index: -1;
}

/* ═══════════════════════════════════════════════════
   GLOW UTILITIES
   ═══════════════════════════════════════════════════ */

.glow-blue  { box-shadow: var(--glow-blue); }
.glow-cyan  { box-shadow: var(--glow-cyan); }
.glow-sm    { box-shadow: var(--glow-sm); }

/* Text glows */
.text-glow-blue { text-shadow: 0 0 20px rgba(0,119,200,0.5); }
.text-glow-cyan { text-shadow: 0 0 20px rgba(0,174,239,0.5); }

/* ═══════════════════════════════════════════════════
   PREMIUM DIVIDERS
   ═══════════════════════════════════════════════════ */

.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(26,39,68,0.15), transparent);
  margin: 0;
  border: none;
}
.divider-glow {
  background: linear-gradient(90deg, transparent, rgba(0,119,200,0.4), rgba(0,174,239,0.4), transparent);
  height: 1px;
}

/* ═══════════════════════════════════════════════════
   GRADIENT TEXT UTILITY
   ═══════════════════════════════════════════════════ */

.gradient-text-blue {
  background: linear-gradient(135deg, #00AEEF, #0077C8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-animated {
  background: linear-gradient(270deg, #00AEEF, #0077C8, #005fa0, #0077C8, #00AEEF);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rotateBorder 6s ease infinite;
}

/* ═══════════════════════════════════════════════════
   BACK-TO-TOP — FLOATING BUTTON
   ═══════════════════════════════════════════════════ */

.back-to-top {
  position: fixed;
  bottom: 32px; right: 32px;
  width: 48px; height: 48px;
  background: #1a2744;
  border: 1px solid rgba(0,119,200,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 500;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s var(--ease-out-expo), background 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}
.back-to-top:hover {
  background: #0077C8;
  box-shadow: 0 8px 32px rgba(0,119,200,0.35);
  transform: translateY(-4px);
}

/* ═══════════════════════════════════════════════════
   HOME CTA STRIP — PREMIUM
   ═══════════════════════════════════════════════════ */

.home-cta-strip {
  position: relative;
  overflow: hidden;
}
.home-cta-strip::before {
  content: '';
  position: absolute;
  top: -80px; left: -80px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 65%);
  pointer-events: none;
}
.home-cta-strip::after {
  content: '';
  position: absolute;
  bottom: -80px; right: 10%;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 65%);
  pointer-events: none;
}
.home-cta-strip h3 {
  text-shadow: 0 2px 20px rgba(0,0,0,0.2);
}

/* ═══════════════════════════════════════════════════
   CARD HOVER CHIP — PREMIUM DETAIL
   ═══════════════════════════════════════════════════ */

/* Subtle corner marker on service tiles */
.svc-tile::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 0 36px 36px;
  border-color: transparent transparent rgba(0,174,239,0.18) transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.svc-tile:hover::after { opacity: 1; }

/* ═══════════════════════════════════════════════════
   MOBILE — PREMIUM TOUCH STATES
   ═══════════════════════════════════════════════════ */

@media (max-width: 960px) {
  /* Mobile menu — slide down from top */
  .main-menu {
    transform: translateY(-8px);
    transition: transform 0.3s var(--ease-out-expo), opacity 0.3s ease;
    opacity: 0;
  }
  .main-menu.active {
    transform: translateY(0);
    opacity: 1;
  }

  /* Team grid — gap increase */
  .ab-team-grid { gap: 4px; }

  /* Subnav — no shadow */
  .svc-subnav { box-shadow: none; }
}

@media (max-width: 640px) {
  /* Back to top — smaller on mobile */
  .back-to-top { width: 42px; height: 42px; bottom: 20px; right: 20px; }

  /* Better tap targets */
  .menu-item { padding: 14px 16px; }
  .svc-subnav-tab { padding: 16px 20px; }
  .footer-nav a { padding: 4px 0; }
}

/* ═══════════════════════════════════════════════════
   ACTIVE / CURRENT PAGE NAV INDICATOR
   ═══════════════════════════════════════════════════ */

/* When JS adds .active to a menu-item */
.menu-item.active {
  color: #0077C8;
}
.menu-item.active::after {
  transform: scaleX(1);
}

/* ═══════════════════════════════════════════════════
   SECTION TRANSITION OVERLAPS
   ═══════════════════════════════════════════════════ */

/* Dark-to-light transition — top gradient shadow */
.intro-section::after,
.about-section-light::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(245,247,250,0.5));
  pointer-events: none;
}

/* Light-to-dark transition */
.careers-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,174,239,0.3), transparent);
  z-index: 3;
}

/* ═══════════════════════════════════════════════════
   FOCUS & ACCESSIBILITY ENHANCEMENTS
   ═══════════════════════════════════════════════════ */

/* Skip to content */
.skip-to-content {
  position: fixed;
  top: -100%;
  left: 20px;
  z-index: 9999;
  background: #0077C8;
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-to-content:focus { top: 20px; }

/* Better link focus styles */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #0077C8;
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════
   IMAGE LOADING — LAZY / PLACEHOLDER
   ═══════════════════════════════════════════════════ */

img[loading="lazy"] {
  transition: opacity 0.5s ease;
}
img.loaded { opacity: 1; }

/* Image shimmer placeholder */
.img-placeholder {
  background: linear-gradient(90deg, #eef1f6 25%, #e4e9f2 50%, #eef1f6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ═══════════════════════════════════════════════════
   NUMBER FORMATTING
   ═══════════════════════════════════════════════════ */

/* All numeric content — consistent rendering */
.stat-number,
.sector-card-num,
.ab-approach-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ═══════════════════════════════════════════════════
   SECTION-SPECIFIC AMBIENT GLOWS
   ═══════════════════════════════════════════════════ */

/* Stats bar — top edge glow */
.stats-bar {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(255,255,255,0.04);
}

/* Capabilities strip — bottom separator */
.capabilities-strip {
  position: relative;
}
.capabilities-strip::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(0,174,239,0.2),
    transparent
  );
}

/* Intro section — bottom edge */
.intro-section::before {
  background: linear-gradient(90deg, transparent, rgba(0,119,200,0.2), transparent);
}

/* ═══════════════════════════════════════════════════
   PREMIUM HOVER CURSOR TREATMENT
   ═══════════════════════════════════════════════════ */

.svc-strip,
.portfolio-card,
.ab-team-card,
.service-tile,
.svc-tile,
.sector-card {
  cursor: pointer;
}

a[href],
button,
[role="button"] {
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════
   DARK SECTION INNER CONTENT CONTRAST
   ═══════════════════════════════════════════════════ */

/* Better text rendering on dark backgrounds */
.stats-bar *,
.capabilities-strip *,
.careers-section *,
.page-hero *,
.ab-approach *,
.ab-team *,
.ab-mission * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════════
   OVERFLOW — PROTECT LAYOUTS
   ═══════════════════════════════════════════════════ */

.stats-bar,
.capabilities-strip,
.careers-section,
.footer,
.page-hero,
.intro-section,
.services-section,
.portfolio-section {
  position: relative;
}

/* ═══════════════════════════════════════════════════
   WILL-CHANGE HINTS — ANIMATION PERF
   ═══════════════════════════════════════════════════ */

.portfolio-card,
.sector-card,
.ab-team-photo,
.svc-tile,
.cta-primary,
.menu-contact-btn,
.cap-item,
.stat-item {
  will-change: transform;
}

/* Avoid will-change on everything that doesn't animate */
.footer-nav a,
.footer-social-link,
.contact-detail-icon {
  will-change: auto;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE REFINEMENTS — TABLET
   ═══════════════════════════════════════════════════ */

@media (max-width: 960px) {
  /* Why section — single column */
  .why-item::before,
  .why-item:nth-child(2)::before,
  .why-item:nth-child(3)::before {
    font-size: 4rem;
    right: 10px;
    top: 10px;
  }

  /* Portfolio card — shadow less aggressive */
  .portfolio-card:hover {
    transform: translateY(-4px);
  }

  /* Contact form — no lift on focus */
  .contact-form:focus-within {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════
   FINAL OVERRIDES — SPECIFICITY PATCH
   ═══════════════════════════════════════════════════ */

/* Ensure color utilities beat page-hero span rule */
.page-hero h1 .clr-green  { color: #22c55e !important; -webkit-text-fill-color: #22c55e !important; }
.page-hero h1 .clr-orange { color: #f97316 !important; -webkit-text-fill-color: #f97316 !important; }
.page-hero h1 .clr-purple { color: #a855f7 !important; -webkit-text-fill-color: #a855f7 !important; }

/* ── Page hero — service colour left bar ── */
.page-hero.page-hero--green .container::before {
  background: linear-gradient(to bottom, #22c55e 0%, rgba(34,197,94,0.08) 100%) !important;
  box-shadow: 2px 0 20px rgba(34,197,94,0.25) !important;
}
.page-hero.page-hero--orange .container::before {
  background: linear-gradient(to bottom, #f97316 0%, rgba(249,115,22,0.08) 100%) !important;
  box-shadow: 2px 0 20px rgba(249,115,22,0.25) !important;
}
.page-hero.page-hero--purple .container::before {
  background: linear-gradient(to bottom, #a855f7 0%, rgba(168,85,247,0.08) 100%) !important;
  box-shadow: 2px 0 20px rgba(168,85,247,0.25) !important;
}

/* ═══════════════════════════════════════════════════
   PRODUCTS SECTION
   ═══════════════════════════════════════════════════ */
.gs-products-section {
  background: #080f1e;
  padding: 96px 0 0;
}

.gs-products-sub {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: 64px;
  max-width: 480px;
}

.gs-products-section .section-label { color: rgba(255,255,255,0.4); }
.gs-products-section .section-label::before { background: rgba(255,255,255,0.2); }
.gs-products-section .section-title { color: #ffffff; margin-bottom: 12px; }

.gs-products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.gs-product-card {
  display: flex;
  flex-direction: column;
  padding: 56px 64px 48px;
  border-right: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-decoration: none;
  transition: background 0.2s ease;
  cursor: pointer;
}
.gs-product-card:last-child { border-right: none; }
.gs-product-card:hover { background: rgba(255,255,255,0.03); }

.gs-product-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}
.gs-product-icon--iuris {
  background: rgba(0, 119, 200, 0.15);
  color: #00AEEF;
}
.gs-product-icon--gis {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

.gs-product-body { flex: 1; }

.gs-product-type {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 10px;
}

.gs-product-name {
  font-family: 'Oswald', sans-serif;
  font-size: 1.8rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #ffffff;
  margin-bottom: 16px;
  line-height: 1.1;
}

.gs-product-desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.75;
  max-width: 360px;
  margin-bottom: 40px;
}

.gs-product-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.4);
  transition: color 0.2s ease;
}
.gs-product-card:hover .gs-product-cta { color: #ffffff; }

@media (max-width: 768px) {
  .gs-products-grid { grid-template-columns: 1fr; }
  .gs-product-card { padding: 40px 24px; border-right: none; }
  .gs-product-card:last-child { border-top: 1px solid rgba(255,255,255,0.06); }
}

/* ═══════════════════════════════════════════════════
   HOME PAGE — FULL REDESIGN
   ═══════════════════════════════════════════════════ */

/* ── Hero ── */
.hp-hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.hp-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  transform: scale(1.04);
  animation: heroBgIn 8s cubic-bezier(0.16, 1, 0.3, 1) both;
  /* Deeper blacks, cooler steel-blue tones, slightly desaturated */
  filter: brightness(0.78) contrast(1.18) saturate(0.72) hue-rotate(-8deg);
}

.hp-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    /* Radial dark pool behind the headline text (left-centre) */
    radial-gradient(ellipse 55% 65% at 18% 52%, rgba(3,7,16,0.68) 0%, transparent 72%),
    /* Cool steel-blue atmospheric tint */
    linear-gradient(135deg, rgba(10,22,48,0.22) 0%, rgba(6,18,36,0.10) 50%, rgba(4,12,28,0.18) 100%),
    /* Main vertical gradient — darker than before */
    linear-gradient(180deg,
      rgba(3,7,18,0.68) 0%,
      rgba(3,7,18,0.38) 32%,
      rgba(3,7,18,0.65) 65%,
      rgba(3,6,14,0.96) 85%,
      #030610 100%
    );
}

/* ── Film grain overlay ── */
.hp-hero-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.048;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='256' height='256' filter='url(%23g)'/></svg>");
  background-repeat: repeat;
  background-size: 256px 256px;
  mix-blend-mode: overlay;
}

.hp-hero-content {
  position: relative;
  z-index: 4;
  max-width: 760px;
  padding: 0 80px;
  text-align: left;
}

.hp-hero-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin: 0 0 24px;
}

.hp-hero-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2.4rem, 4.5vw, 5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: #ffffff;
  margin: 0 0 36px;
  text-transform: uppercase;
}

.hp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border-radius: 2px;
  font-family: 'Oswald', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.hp-btn--white {
  background: #ffffff;
  color: #0d1829;
  border: none;
}
.hp-btn--white:hover { background: rgba(255,255,255,0.88); }

.hp-btn--ghost {
  background: transparent;
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.35);
}
.hp-btn--ghost:hover { border-color: #fff; color: #fff; }

/* ── Shared layout ── */
.hp-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 48px;
}

.hp-section-head {
  margin-bottom: 64px;
}

.hp-label {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0077C8;
  margin-bottom: 16px;
}

.hp-section-title {
  font-family: 'Inter', 'Open Sans', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #0f172a;
  margin-bottom: 0;
  padding-bottom: 20px;
  text-transform: none;
  position: relative;
  display: inline-block;
}
.hp-section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: #0077C8;
  border-radius: 2px;
}

.hp-section-sub {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.7;
  max-width: 520px;
  margin-top: 20px;
}

/* ── Services ── */
.hp-services {
  background: #07091a;
  padding: 112px 0;
  position: relative;
  overflow: hidden;
}

.hp-svc-topo {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='500' viewBox='0 0 600 500'%3E%3Cg fill='none' stroke='%230077C8' stroke-width='0.8' opacity='0.18'%3E%3Cellipse cx='400' cy='200' rx='180' ry='80'/%3E%3Cellipse cx='400' cy='200' rx='220' ry='110'/%3E%3Cellipse cx='400' cy='200' rx='260' ry='140'/%3E%3Cellipse cx='400' cy='200' rx='300' ry='170'/%3E%3Cellipse cx='400' cy='200' rx='340' ry='200'/%3E%3Cellipse cx='350' cy='300' rx='150' ry='60'/%3E%3Cellipse cx='350' cy='300' rx='190' ry='90'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: 0;
}

.hp-services .hp-container { position: relative; z-index: 1; }

.hp-services .hp-label {
  color: rgba(255,255,255,0.45);
  display: flex;
  align-items: center;
  gap: 10px;
}

.hp-label-dash { color: #0077C8; }

.hp-section-title {
  color: #ffffff !important;
}

.hp-title-accent { color: #0077C8; }

.hp-services .hp-section-sub {
  color: rgba(255,255,255,0.55);
  border-left: 3px solid #0077C8;
  padding-left: 16px;
  max-width: 460px;
}

.hp-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  background: transparent;
  border: none;
  overflow: visible;
}

.hp-service-card {
  display: flex;
  flex-direction: column;
  background: #0d1226;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.22s ease, border-color 0.22s ease;
}

.hp-service-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.16); }

.hp-svc-photo {
  height: 160px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.hp-svc-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,9,26,0.25) 0%, rgba(7,9,26,0.65) 100%);
}

.hp-svc-body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hp-service-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.hp-service-card--blue .hp-service-icon  { background: #1d4ed8; }
.hp-service-card--green .hp-service-icon { background: #16a34a; }
.hp-service-card--purple .hp-service-icon{ background: #7c3aed; }

.hp-svc-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  display: block;
}

.hp-service-card--blue  .hp-svc-num { color: #60a5fa; }
.hp-service-card--green .hp-svc-num { color: #4ade80; }
.hp-service-card--purple .hp-svc-num{ color: #c084fc; }

.hp-service-name {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0;
  padding-bottom: 14px;
  position: relative;
}

.hp-service-name::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  border-radius: 2px;
}

.hp-service-card--blue  .hp-service-name::after { background: #60a5fa; }
.hp-service-card--green .hp-service-name::after { background: #4ade80; }
.hp-service-card--purple .hp-service-name::after{ background: #c084fc; }

.hp-service-desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.78;
  flex: 1;
  margin-top: 16px;
  margin-bottom: 24px;
}

.hp-service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: gap 0.2s ease;
}

.hp-service-card--blue  .hp-service-link { color: #60a5fa; }
.hp-service-card--green .hp-service-link { color: #4ade80; }
.hp-service-card--purple .hp-service-link{ color: #c084fc; }

.hp-service-card:hover .hp-service-link { gap: 10px; }

/* ── Product Slider ── */
.psl-section {
  position: relative;
  background: #07091a;
  overflow: hidden;
  height: 640px;
}

.psl-track {
  display: flex;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.psl-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.psl-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 0.6s ease;
}

/* Cinematic overlay: heavy on the left, fades to near-transparent on the right */
.psl-slide-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,  rgba(4,8,24,0.93) 0%, rgba(4,8,24,0.60) 38%, rgba(4,8,24,0.22) 65%, rgba(4,8,24,0.10) 100%),
    linear-gradient(to top,    rgba(4,8,24,0.55) 0%, transparent 35%);
}
.psl-slide-overlay--green {
  background:
    linear-gradient(to right,  rgba(2,18,10,0.95) 0%, rgba(2,18,10,0.62) 38%, rgba(2,18,10,0.22) 65%, rgba(2,18,10,0.08) 100%),
    linear-gradient(to top,    rgba(2,18,10,0.55) 0%, transparent 35%);
}

/* Content wrapper — purely a positioning context */
.psl-slide-content {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ── Bottom-left info block ── */
.psl-slide-left {
  position: absolute;
  left: 80px;
  bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 400px;
}

.psl-badge {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: rgba(255,255,255,0.92);
}
.psl-badge--green {
  background: none;
  border: none;
  color: rgba(255,255,255,0.92);
}

.psl-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.65);
  margin: 0;
}

.psl-cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.55);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s;
}
.psl-cta:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.psl-cta--green { border-color: rgba(110,231,183,0.6); color: #6ee7b7; }
.psl-cta--green:hover { background: rgba(16,185,129,0.15); border-color: #6ee7b7; }

/* ── Large title — right side, vertically centered ── */
.psl-slide-right {
  position: absolute;
  right: 72px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.psl-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(4rem, 8.5vw, 8rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.97);
  text-align: right;
  margin: 0;
}

/* Arrow — centered on sides */
.psl-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.psl-arrow:hover {
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.45);
  transform: translateY(-50%) scale(1.08);
}
.psl-arrow--prev { left: 28px; }
.psl-arrow--next { right: 28px; }

/* Section label — "Products" top-center */
.psl-section-label {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  z-index: 10;
  pointer-events: none;
}

/* Counter — top-left, slide number */
.psl-counter {
  position: absolute;
  top: 32px;
  left: 80px;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
  z-index: 10;
}

@media (max-width: 960px) {
  .psl-section { height: 520px; }
  .psl-slide-left { left: 40px; bottom: 44px; }
  .psl-slide-right { right: 36px; }
  .psl-title { font-size: clamp(3rem, 7vw, 5.5rem); }
  .psl-counter { left: 40px; }
}

@media (max-width: 640px) {
  .psl-section { height: 580px; }
  .psl-slide-left { left: 24px; bottom: 36px; max-width: 260px; }
  .psl-slide-right { right: 24px; top: 50%; bottom: auto; transform: translateY(-60%); }
  .psl-title { font-size: clamp(2.8rem, 11vw, 3.8rem); }
  .psl-counter { left: 24px; top: 20px; }
  .psl-arrow--prev { left: 16px; }
  .psl-arrow--next { right: 16px; }
}

/* ═══════════════════════════════════════════════════
   PORTFOLIO — BMW-STYLE MOUSE-DRIVEN CAROUSEL
   ═══════════════════════════════════════════════════ */

.port-section {
  background: #04080f;
  padding: 80px 0 80px;
  overflow: hidden;
  position: relative;
  margin-top: 0;
}

.port-section::before {
  display: none;
}

/* Section header */
.port-header {
  padding: 0 10vw;
  margin-bottom: 56px;
}

.port-section-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 14px 0 0;
  line-height: 1;
}

.port-section-hint {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.22);
  margin: 0;
}

/* ── Featured single-project layout ── */
.port-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  padding: 0 10vw;
  text-decoration: none;
}

.port-featured-img {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.port-featured-img img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.port-featured:hover .port-featured-img img { transform: scale(1.04); }

.port-featured-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.port-featured-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 16px 0 20px;
  line-height: 1.05;
  transition: color 0.25s ease;
}
.port-featured:hover .port-featured-title { color: #0077C8; }

.port-featured-desc {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.8;
  margin: 0 0 32px;
  max-width: 420px;
}

.port-featured-cta {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #0077C8;
  padding-bottom: 5px;
  border-bottom: 1px solid #0077C8;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
.port-featured:hover .port-featured-cta { opacity: 1; }

@media (max-width: 768px) {
  .port-featured { grid-template-columns: 1fr; gap: 32px; padding: 0 24px; }
  .port-featured-img img { height: 260px; }
}

/* Carousel outer — clips the track */
.port-carousel {
  position: relative;
  width: 100%;
  cursor: none;
  padding-bottom: 8px;
}

/* Track — flex row, moved by JS */
.port-track {
  display: flex;
  gap: 24px;
  padding: 0 10vw 0 10vw;
  width: max-content;
  will-change: transform;
  transition: transform 0s; /* JS lerp handles smoothing */
}

/* ── Individual card ── */
.port-card {
  width: 380px;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
}

.port-card-img {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
}

.port-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.port-card:hover .port-card-img img { transform: scale(1.06); }

/* Dark overlay on image — brightens on hover */
.port-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4,8,15,0.75) 0%, rgba(4,8,15,0.1) 60%);
  display: flex;
  align-items: flex-end;
  padding: 20px 22px;
  transition: background 0.35s ease;
}
.port-card:hover .port-card-overlay {
  background: linear-gradient(to top, rgba(4,8,15,0.55) 0%, rgba(0,119,200,0.08) 100%);
}

.port-read-btn {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.5);
  padding: 7px 14px;
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.08);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.port-card:hover .port-read-btn {
  background: rgba(0,119,200,0.35);
  border-color: #0077C8;
}

/* Coming soon image placeholder */
.port-card-img--soon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.port-soon-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Oswald', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 8px 18px;
}

.port-card--soon .port-card-img { opacity: 0.7; }

/* Card body */
.port-card-body {
  padding: 22px 4px 0;
}

.port-card-tag {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.28);
  margin-bottom: 10px;
}

.port-card-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #ffffff;
  margin-bottom: 10px;
  line-height: 1.2;
  transition: color 0.25s ease;
}
.port-card:hover .port-card-title { color: #0077C8; }
.port-card--soon .port-card-title { color: rgba(255,255,255,0.35); }

.port-card-desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.38);
  line-height: 1.72;
  max-width: 340px;
}

/* ── Custom cursor (circle + arrow) ── */
.port-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 48px; height: 48px;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.25s ease;
  will-change: transform;
}
.port-cursor.visible { opacity: 1; }

/* Footer link */
.port-footer {
  padding: 40px 10vw 0;
}

.port-all-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.3);
  text-decoration: none;
  transition: color 0.2s ease, gap 0.2s ease;
}
.port-all-link:hover { color: #ffffff; gap: 11px; }

/* ── Responsive ── */
@media (max-width: 960px) {
  .hp-services-grid { grid-template-columns: 1fr; }
  .hp-container { padding: 0 32px; }
  .hp-services { padding: 80px 0; }
  .port-section { padding: 80px 0 60px; }
  .port-card { width: 300px; }
  .port-card-img { height: 200px; }
}

@media (max-width: 640px) {
  .hp-hero-title { font-size: clamp(3rem, 14vw, 5rem); }
  .hp-hero-content { padding: 0 24px; }
  .hp-container { padding: 0 20px; }
  .hp-services { padding: 64px 0; }
  .hp-section-head { margin-bottom: 40px; }
  .hp-service-card { padding: 32px 24px; }
  .port-section { padding: 64px 0 48px; }
  .port-header { padding: 0 24px; margin-bottom: 40px; }
  .port-track { padding: 0 24px; gap: 16px; }
  .port-card { width: 270px; }
  .port-card-img { height: 175px; }
  .port-footer { padding: 32px 24px 0; }
}

/* ── Legacy override — keep old hero hidden on home page ── */
.home-page .hero { display: none; }

/* ═══════════════════════════════════════════════════
   PAGE HERO — PHOTO VARIANT (all inner pages)
   ═══════════════════════════════════════════════════ */
.page-hero--photo {
  margin-top: 0 !important;
  background: none !important;
  padding-top: calc(110px + 72px) !important;
  padding-bottom: 60px !important;
  min-height: 420px;
  max-height: 520px;
}

.page-hero--photo .page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 50%;
  animation: heroBgIn 8s cubic-bezier(0.16,1,0.3,1) both;
  z-index: 0;
}

.page-hero--photo .page-hero-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(5,10,24,0.20) 0%,
    rgba(5,10,24,0.20) 60%,
    rgba(4,8,15,0.65) 80%,
    rgba(4,8,15,0.95) 94%,
    #04080f 100%
  );
  z-index: 1;
}

/* Bleed the fade ~80px below the hero boundary into the subnav */
.page-hero--photo::after {
  content: '';
  position: absolute;
  bottom: -80px; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, #04080f 0%, #04080f 100%);
  z-index: 10;
  pointer-events: none;
  display: block !important;
}

.page-hero--photo .container,
.page-hero--photo .page-hero-inner {
  position: relative;
  z-index: 2;
}

/* Disable dot-grid and glow when photo is shown */
.page-hero--photo::before { background-image: none !important; animation: none !important; }
.page-hero--photo::after  { display: none !important; }

@media (max-width: 960px) {
  .page-hero--photo { padding-top: calc(88px + 60px) !important; padding-bottom: 64px !important; min-height: 460px; }
}
@media (max-width: 640px) {
  .page-hero--photo { padding-top: calc(80px + 48px) !important; padding-bottom: 48px !important; min-height: 380px; }
}

/* ═══════════════════════════════════════════════════
   SERVICES PAGE — REDESIGN
   ═══════════════════════════════════════════════════ */

.svp-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 48px;
}

/* Hero */
.svp-hero {
  position: relative;
  height: 62vh;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.svp-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 50%;
  transform: scale(1.03);
  animation: heroBgIn 8s cubic-bezier(0.16,1,0.3,1) both;
}

.svp-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,10,24,0.45) 0%, rgba(5,10,24,0.20) 40%, rgba(5,10,24,0.72) 100%);
}

.svp-hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: 72px;
}

.svp-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 16px 0 20px;
  text-transform: none;
  line-height: 1.1;
}
.svp-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
  max-width: 560px;
}

/* Sections */
.svp-section { padding: 96px 0; }
.svp-section--white { background: #ffffff; }
.svp-section--soft { background: #f8fafc; }

.svp-section-head { margin-bottom: 56px; }

.svp-section-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #0f172a;
  margin: 12px 0 14px;
  text-transform: none;
  line-height: 1.2;
}
.svp-section-sub {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.7;
  max-width: 500px;
}

/* Category tags */
.svp-category-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 50px;
}
.svp-category-tag--services {
  background: #eff6ff;
  color: #0077C8;
}
.svp-category-tag--software {
  background: #f0fdf4;
  color: #16a34a;
}

/* Card grid */
.svp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.svp-cards--two {
  grid-template-columns: repeat(2, 1fr);
}

/* Individual cards */
.svp-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e8edf5;
  border-radius: 16px;
  padding: 36px 32px;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.svp-card:hover {
  box-shadow: 0 12px 40px rgba(15,23,42,0.09);
  transform: translateY(-2px);
  border-color: #cbd5e1;
}
.svp-section--soft .svp-card { background: #ffffff; }
.svp-card--software { background: #ffffff; }

.svp-card-head {
  display: flex;
  gap: 20px;
  margin-bottom: 28px;
  align-items: flex-start;
}

.svp-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.svp-card-icon--blue   { background: #eff6ff; color: #0077C8; }
.svp-card-icon--orange { background: #fff7ed; color: #ea580c; }
.svp-card-icon--purple { background: #faf5ff; color: #9333ea; }
.svp-card-icon--cyan   { background: #e0f2fe; color: #0077C8; }
.svp-card-icon--green  { background: #f0fdf4; color: #16a34a; }

.svp-card-name {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.svp-card-desc {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.7;
}

/* Product badge */
.svp-product-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0077C8;
  background: #eff6ff;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.svp-product-badge--download {
  color: #16a34a;
  background: #f0fdf4;
}

/* Tag pills */
.svp-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex: 1;
}
.svp-tag-list li {
  font-size: 0.75rem;
  font-weight: 500;
  color: #475569;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 50px;
}

/* CTA link */
.svp-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #0077C8;
  margin-top: auto;
  transition: gap 0.2s ease;
}
.svp-card:hover .svp-card-link { gap: 10px; }

/* Divider */
.svp-divider {
  height: 1px;
  background: #e8edf5;
  margin: 0;
}

/* Responsive */
@media (max-width: 960px) {
  .svp-cards { grid-template-columns: 1fr; }
  .svp-cards--two { grid-template-columns: 1fr; }
  .svp-container { padding: 0 32px; }
  .svp-section { padding: 72px 0; }
  .svp-hero { height: 52vh; min-height: 380px; }
}
@media (max-width: 640px) {
  .svp-container { padding: 0 20px; }
  .svp-card { padding: 28px 20px; }
  .svp-section { padding: 56px 0; }
  .svp-hero { height: 48vh; min-height: 340px; }
}

/* ═══════════════════════════════════════════════════
   HERO — CENTERED (Claude-style)
   ═══════════════════════════════════════════════════ */
.hero--centered .hero-content {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding-top: 0;
}

.hero--centered::before {
  background: rgba(3,8,20,0.52) !important;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 24px;
}

.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: rgba(255,255,255,0.3);
}

.hero-eyebrow::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: rgba(255,255,255,0.3);
}

.hero--centered .hero-title {
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1.05;
  margin-bottom: 24px;
}

.hero--centered .hero-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
  max-width: 520px;
  margin: 0 auto 40px;
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 50px;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.hero-btn--primary {
  background: #ffffff;
  color: #0d1829;
}
.hero-btn--primary:hover {
  background: rgba(255,255,255,0.88);
  transform: translateY(-1px);
}

.hero-btn--ghost {
  background: transparent;
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.25);
}
.hero-btn--ghost:hover {
  border-color: rgba(255,255,255,0.6);
  color: #ffffff;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-btn { width: 100%; justify-content: center; max-width: 280px; }
}

/* Right glow — match service colour */
.page-hero.page-hero--green::after  { background: radial-gradient(circle, rgba(34,197,94,0.14) 0%, transparent 68%); }
.page-hero.page-hero--orange::after { background: radial-gradient(circle, rgba(249,115,22,0.14) 0%, transparent 68%); }
.page-hero.page-hero--purple::after { background: radial-gradient(circle, rgba(168,85,247,0.14) 0%, transparent 68%); }

/* ═══════════════════════════════════════════════════
   SERVICES INTRO SCREEN
   ═══════════════════════════════════════════════════ */

.svc-intro-wrapper {
  position: relative;
  height: 180vh;
  background: #04080f;
}

.svc-intro-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8vw;
  overflow: hidden;
}

.svc-intro-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin: 0 0 20px;
}

.svc-intro-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(5rem, 11vw, 10rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.92;
  color: #ffffff;
  margin: 0;
}

.svc-intro-fade {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 60%;
  background: linear-gradient(to bottom, transparent 0%, rgba(4,8,15,0.6) 50%, #04080f 100%);
  pointer-events: none;
  z-index: 1;
}

.svc-intro-content {
  position: relative;
  z-index: 2;
  will-change: opacity, transform;
}

/* ═══════════════════════════════════════════════════
   SCROLLYTELLING — SERVICES SECTION
   ═══════════════════════════════════════════════════ */

/* Tall wrapper gives scroll room for 3 chapters */
.stt-wrapper {
  position: relative;
  height: 400vh;
  background: #04080f;
}

/* Sticky viewport-filling container */
.stt-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #04080f;
  display: flex;
  align-items: stretch;
}

/* ── Background images ── */
.stt-images {
  position: absolute;
  top: 0; bottom: 0;
  left: 38%; right: 0;
}

.stt-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.stt-img--active { opacity: 1; }

/* Gradient fade from dark left into the image */
.stt-images::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #04080f 0%, rgba(4,8,15,0.65) 30%, rgba(4,8,15,0.1) 70%, rgba(4,8,15,0) 100%);
  z-index: 1;
  pointer-events: none;
}


/* ── Section-transition fade overlays (real elements, not pseudo — reliable z-index) ── */
.stt-fade-top,
.stt-fade-bottom,
.swt-fade-top {
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
}

/* Full-black cover that fades out as you scroll into stt — ensures seamless merge */
.stt-entry-cover {
  position: absolute;
  inset: 0;
  background: #04080f;
  z-index: 50;
  pointer-events: none;
}

/* Fades services scrollytelling IN from intro screen */
.stt-fade-top {
  top: 0;
  height: 30%;
  z-index: 3;
  background: linear-gradient(to bottom,
    #04080f 0%,
    #04080f 8%,
    rgba(4,8,15,0.85) 30%,
    transparent 100%
  );
}

/* Fades services section OUT — solid black at bottom, then gradient up */
.stt-fade-bottom {
  bottom: 0;
  height: 55%;
  z-index: 3;
  background: linear-gradient(to top,
    #04080f 0%,
    #04080f 18%,
    rgba(4,8,15,0.97) 30%,
    rgba(4,8,15,0.8) 50%,
    rgba(4,8,15,0.3) 75%,
    transparent 100%
  );
}

/* Full-black cover that fades out as you scroll into swt */
.swt-entry-cover {
  position: absolute;
  inset: 0;
  background: #04080f;
  z-index: 50;
  pointer-events: none;
}

/* Fades software section IN — solid black at very top, gradients out */
.swt-fade-top {
  top: 0;
  height: 35%;
  background: linear-gradient(to bottom,
    #04080f 0%,
    #04080f 12%,
    rgba(4,8,15,0.9) 28%,
    rgba(4,8,15,0.5) 55%,
    transparent 100%
  );
  z-index: 3;
}

/* Bottom solid black band — fully covers the section's exit */
.stt-sticky::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 320px;
  background: linear-gradient(to top, #04080f 0%, #04080f 35%, rgba(4,8,15,0.7) 65%, transparent 100%);
  z-index: 10;
  pointer-events: none;
}

/* Subtle colour tint overlay — set by JS via CSS var */
.stt-color-overlay {
  position: absolute;
  inset: 0;
  left: 38%;
  opacity: 0.12;
  transition: background 0.9s ease;
  z-index: 1;
  pointer-events: none;
}

/* ── Left content panel ── */
.stt-panel {
  position: relative;
  z-index: 2;
  width: 52%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  display: flex;
  align-items: center;
  padding: 0 64px 0 72px;
}

.stt-panel-inner {
  width: 100%;
}

/* Section label reuse */
.stt-panel .hp-label {
  margin-bottom: 18px;
  display: block;
}

.stt-main-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.62rem, 0.85vw, 0.72rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  line-height: 1.7;
  color: rgba(255,255,255,0.36);
  margin-bottom: 56px;
}

.stt-title-accent {
  transition: color 0.6s ease;
}

/* ── Swappable service info ── */
.stt-info-wrap {
  position: relative;
  min-height: 220px;
  margin-bottom: 36px;
}

.stt-info {
  position: absolute;
  top: 0; left: 0; right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  /* visibility snaps to hidden AFTER opacity finishes fading out */
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
  pointer-events: none;
}

.stt-info--active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  /* visibility snaps to visible IMMEDIATELY so opacity can animate in */
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0s;
}

.stt-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.stt-icon--blue   { background: rgba(0,119,200,0.15);  color: #0077C8; }
.stt-icon--green  { background: rgba(34,197,94,0.12);  color: #22c55e; }
.stt-icon--purple { background: rgba(168,85,247,0.12); color: #a855f7; }

.stt-num {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  margin-bottom: 8px;
}
.stt-num--blue   { color: #0077C8; }
.stt-num--green  { color: #22c55e; }
.stt-num--purple { color: #a855f7; }

.stt-name::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: currentColor;
  opacity: 0.5;
  margin-bottom: 18px;
}

.stt-name {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: 16px;
}

.stt-desc {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.78;
  margin-bottom: 24px;
  max-width: 400px;
}

.stt-link {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  opacity: 0.75;
  transition: opacity 0.2s ease;
  margin-top: 6px;
}
.stt-link:hover { opacity: 1; }
.stt-link--blue   { color: #22c55e; }
.stt-link--green  { color: #22c55e; }
.stt-link--orange { color: #f97316; }
.stt-link--purple { color: #a855f7; }

/* ── Progress dots ── */
.stt-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stt-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width 0.35s ease, background 0.35s ease, border-radius 0.35s ease;
  flex-shrink: 0;
}
.stt-dot--active { width: 28px; border-radius: 4px; }
.stt-dot--blue   { background: #22c55e; }
.stt-dot--green  { background: #f97316; }
.stt-dot--orange { background: #f97316; }
.stt-dot--purple { background: #a855f7; }

/* Keep geospatial (middle chapter) explicitly orange in active state. */
.stt-dot[data-idx="1"].stt-dot--active { background: #f97316; }

.stt-scroll-hint {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.25);
  margin-left: 10px;
  transition: opacity 0.5s ease;
}
.stt-scroll-hint.hidden { opacity: 0; }

/* ── Vertical progress bar ── */
.stt-progress-track {
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 140px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  z-index: 10;
}

.stt-progress-fill {
  width: 100%;
  height: 0%;
  border-radius: 2px;
  transition: height 0.08s linear, background 0.6s ease;
}

/* ═══════════════════════════════════════════════════
   SOFTWARE — BMW ANNUAL REPORT SPLIT LAYOUT
   ═══════════════════════════════════════════════════ */

.swt-wrapper {
  position: relative;
  height: 1100vh;
  background: #04080f;
}

.swt-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #04080f;
}

/* Bottom fade — blends swt section into portfolio below */
.swt-sticky::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 28%;
  background: linear-gradient(to bottom, transparent 0%, rgba(4,8,15,0.7) 60%, #04080f 100%);
  z-index: 200;
  pointer-events: none;
}


/* ── CSS bokeh left-panel (replaces video) ── */
.swt-sticky::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 40% at 18% 35%, rgba(0,80,160,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 40% 55% at 28% 72%, rgba(10,30,80,0.3) 0%, transparent 65%),
    radial-gradient(ellipse 60% 30% at 8% 60%, rgba(0,40,120,0.18) 0%, transparent 60%);
}

/* ── Right-side cinematic background image (left 40% reserved for video bokeh) ── */
.swt-images {
  position: absolute;
  top: 0; bottom: 0;
  left: 38%; right: 0;
  z-index: 1;
}
.swt-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform-origin: center center;
  transition: opacity 1.4s ease;
}
.swt-img--active { opacity: 1; }

/* Dark gradient overlay — solid dark left half, sharp break into image */
.swt-img-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    #04080f 0%,
    #04080f 38%,
    rgba(4,8,15,0.96) 46%,
    rgba(4,8,15,0.75) 56%,
    rgba(4,8,15,0.3) 70%,
    rgba(4,8,15,0.05) 85%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* ── Eyebrow (kept for JS compat) ── */
.swt-eyebrow {
  display: none;
}

/* ── Chapters ── */
.swt-chapter {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 22vh 8vw 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 0s linear 1s;
  z-index: 150;
  pointer-events: none;
}
.swt-chapter--active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease, visibility 0s linear 0s;
  pointer-events: auto;
}

/* Staggered text entry — pre line */
.swt-name-pre {
  display: block;
  transform: translateY(36px);
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0s,
              opacity 0.7s ease 0s;
}
.swt-chapter--active .swt-name-pre {
  transform: translateY(0);
  opacity: 1;
}

/* Staggered text entry — hero line (follows with delay) */
.swt-name-hero {
  display: block;
  transform: translateY(56px);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.12s,
              opacity 0.8s ease 0.12s;
}
.swt-chapter--active .swt-name-hero {
  transform: translateY(0);
  opacity: 1;
}

/* Atmospheric glow */
.swt-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(110px);
  z-index: 0;
}
.swt-glow--cyan {
  width: 50vw; height: 60vh;
  background: radial-gradient(circle, rgba(0,174,239,0.18) 0%, transparent 70%);
  top: -10%; left: -20%;
}
.swt-glow--emerald {
  width: 50vw; height: 60vh;
  background: radial-gradient(circle, rgba(16,185,129,0.16) 0%, transparent 70%);
  bottom: -10%; left: -20%;
}
.swt-glow--violet {
  width: 50vw; height: 60vh;
  background: radial-gradient(circle, rgba(139,92,246,0.18) 0%, transparent 70%);
  top: 10%; left: -15%;
}

/* ── Big clickable product name ── */
.swt-name-link {
  display: block;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 3;
}
.swt-name-link:hover .swt-name-hero { opacity: 0.82; }

/* "Project" / "Current" / "GIS" — outline */
.swt-name-pre {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2rem, 5.5vw, 6rem);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.55);
  line-height: 1.05;
  margin-bottom: 0;
}

/* "Iuris" / "Software" / "Templates" — massive solid */
.swt-name-hero {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(5rem, 13vw, 15rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 0.88;
}

/* Ken Burns slow zoom on active image */
@keyframes swtZoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1.0);  }
}
.swt-img--active {
  animation: swtZoom 6s ease-out forwards;
}


/* ── Top fade blend from services ── */
.swt-fade-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 22%;
  background: linear-gradient(to bottom, rgba(4,8,15,0.85) 0%, transparent 100%);
  z-index: 3;
  pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .swt-images { opacity: 0.3; }
  .swt-img-fade { background: linear-gradient(to bottom, rgba(4,8,15,0.97) 0%, rgba(4,8,15,0.8) 60%, rgba(4,8,15,0.95) 100%); }
  .swt-chapter { padding: 30vh 6vw 0; justify-content: flex-start; }
  .swt-name-pre { font-size: clamp(1.4rem, 7vw, 3rem); }
  .swt-name-hero { font-size: clamp(4rem, 18vw, 8rem); }
}

/* ═══════════════════════════════════════════════════
   SOFTWARE SHOWCASE SECTION
   ═══════════════════════════════════════════════════ */

.sw-section {
  background: #04080f;
  padding: 0;
}

.sw-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 72px 64px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.sw-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.3);
  display: block;
  margin-bottom: 14px;
}

.sw-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #ffffff;
  flex: 1;
}

.sw-header-sub {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.35);
  max-width: 260px;
  line-height: 1.7;
  flex-shrink: 0;
  text-align: right;
}

/* Product panels */
.sw-product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 62vh;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.sw-product:last-child {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Image side */
.sw-product-img {
  position: relative;
  overflow: hidden;
}

.sw-product-img-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s ease;
}

.sw-product:hover .sw-product-img-bg {
  transform: scale(1.04);
}

.sw-product-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(4,8,15,0.25);
  transition: background 0.4s ease;
}

.sw-product:hover .sw-product-img::after {
  background: rgba(4,8,15,0.12);
}

/* Content side */
.sw-product-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 72px;
  background: #04080f;
  position: relative;
}

/* Reverse layout for second product */
.sw-product--rev .sw-product-img  { order: 2; }
.sw-product--rev .sw-product-content { order: 1; padding: 64px 72px 64px 72px; }

.sw-product-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.35);
  margin-bottom: 20px;
}
.sw-product-tag::before {
  content: '';
  width: 20px;
  height: 1.5px;
  background: currentColor;
  flex-shrink: 0;
}

.sw-product-name {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: #ffffff;
  margin-bottom: 20px;
}

.sw-product-desc {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.78;
  max-width: 380px;
  margin-bottom: 36px;
}

.sw-product-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  transition: gap 0.25s ease, opacity 0.2s;
}
.sw-product:hover .sw-product-cta { gap: 16px; }

.sw-product-cta--cyan   { color: #00AEEF; }
.sw-product-cta--emerald { color: #10b981; }

/* Vertical accent bar on content side */
.sw-product-content::before {
  content: '';
  position: absolute;
  top: 64px; bottom: 64px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  transition: opacity 0.3s ease;
  opacity: 0;
}
.sw-product:hover .sw-product-content::before { opacity: 1; }
.sw-product--iuris .sw-product-content::before { background: #00AEEF; }
.sw-product--gis   .sw-product-content::before { background: #10b981; }

@media (max-width: 900px) {
  .sw-product { grid-template-columns: 1fr; min-height: auto; }
  .sw-product-img { height: 280px; order: 1 !important; }
  .sw-product-content { order: 2 !important; padding: 48px 40px; }
  .sw-product-content::before { display: none; }
  .sw-header { padding: 72px 40px 48px; flex-direction: column; align-items: flex-start; }
  .sw-header-sub { text-align: left; }
}

@media (max-width: 600px) {
  .sw-product-content { padding: 40px 24px; }
  .sw-header { padding: 56px 24px 40px; }
}

/* ── Software chapter chip ── */
.stt-software-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 18px;
}
.stt-software-tag::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

/* Cyan (Project Iuris) */
.stt-link--cyan { color: #00AEEF; }
.stt-dot--cyan  { background: #00AEEF; }

/* Emerald (GIS Templates) */
.stt-link--emerald { color: #10b981; }
.stt-dot--emerald  { background: #10b981; }

/* Dot separator between services and software */
.stt-dot-sep {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.18);
  margin: 0 6px;
  flex-shrink: 0;
}

/* Animated title transition */
.stt-main-title { transition: opacity 0.35s ease; }
.stt-main-title.fading { opacity: 0; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .stt-wrapper { height: 360vh; }
  .stt-panel { width: 70%; padding: 0 32px 0 40px; }
  .stt-images { left: 50%; }
}

@media (max-width: 640px) {
  .stt-wrapper { height: 320vh; }
  .stt-sticky { align-items: flex-end; padding-bottom: 64px; }
  .stt-panel { width: 100%; padding: 0 24px; }
  .stt-images { left: 0; }
  .stt-images::before {
    background: linear-gradient(to top, #04080f 30%, rgba(4,8,15,0.75) 65%, rgba(4,8,15,0.3) 100%);
  }
  .stt-progress-track { display: none; }
}

/* ── Expanded card styles ── */
.geo-story-spec-block {
  background: rgba(249,115,22,0.08);
  border-left: 2px solid #f97316;
  padding: 12px 16px;
  margin-bottom: 22px;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.52);
  line-height: 1.65;
}
.geo-story-spec-block strong {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #f97316;
  margin-bottom: 5px;
}

.geo-story-delivers {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}
.geo-story-delivers li {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.48);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  gap: 10px;
}
.geo-story-delivers li::before {
  content: '';
  width: 16px;
  height: 1px;
  background: #f97316;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════
   GEOSPATIAL PAGE SCROLLYTELLING
   ═══════════════════════════════════════════════════ */

.geo-story {
  position: relative;
  height: 520vh;
  background: #04080f;
  color: #ffffff;
}

.geo-story-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  overflow: hidden;
  background: #04080f;
  isolation: isolate;
}

.geo-story-entry {
  position: absolute;
  inset: 0;
  z-index: 12;
  background: #04080f;
  pointer-events: none;
}

.geo-story-bg-wrap {
  position: absolute;
  inset: 0;
}

.geo-story-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.75s ease;
}

.geo-story-bg.is-active {
  opacity: 1;
}

.geo-story-bg-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to right, #04080f 0%, #04080f 32%, rgba(4,8,15,0.88) 46%, rgba(4,8,15,0.4) 65%, rgba(4,8,15,0.1) 100%),
    radial-gradient(circle at 62% 42%, rgba(249,115,22,0.2), transparent 34%);
  pointer-events: none;
}

.geo-story-sticky::before { display: none; }

.geo-story-sticky::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  z-index: 3;
  background: linear-gradient(to top, #04080f 0%, rgba(4,8,15,0.88) 38%, transparent 100%);
  pointer-events: none;
}

.geo-story-panel {
  position: relative;
  z-index: 4;
  min-height: 100vh;
  width: 48%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 48px 80px 72px;
}

.geo-story-kicker {
  color: #f97316;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  margin-bottom: 18px;
}

.geo-story-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin-bottom: 22px;
}

.geo-story-sub {
  max-width: 430px;
  color: rgba(255,255,255,0.58);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 46px;
}

.geo-story-copy {
  position: relative;
  min-height: 520px;
}

.geo-story-card {
  position: absolute;
  inset: 0 auto auto 0;
  width: min(430px, 100%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
  pointer-events: none;
}

.geo-story-card.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0s;
  pointer-events: auto;
}

.geo-story-num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f97316;
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 18px;
}

.geo-story-num::after {
  content: '';
  width: 44px;
  height: 2px;
  background: currentColor;
  opacity: 0.72;
}

.geo-story-card h3 {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.65rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: 18px;
}

.geo-story-card p {
  color: rgba(255,255,255,0.68);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 20px;
}

.geo-story-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.geo-story-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.74);
  font-size: 0.72rem;
  font-weight: 700;
}

.geo-story-card a {
  display: inline-flex;
  color: #f97316;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
}

.geo-story-meter {
  position: absolute;
  z-index: 5;
  top: 50%;
  right: 42px;
  transform: translateY(-50%);
  display: grid;
  justify-items: center;
  gap: 12px;
  color: rgba(255,255,255,0.45);
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.geo-story-current {
  color: #f97316;
}

.geo-story-track {
  width: 2px;
  height: 180px;
  background: rgba(255,255,255,0.14);
  border-radius: 2px;
  overflow: hidden;
}

.geo-story-fill {
  width: 100%;
  height: 0%;
  background: linear-gradient(to bottom, #f97316, #22c55e, #00aeef);
  border-radius: inherit;
}

.geo-story-dots {
  position: absolute;
  z-index: 5;
  left: 72px;
  bottom: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.geo-story-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,0.22);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}

.geo-story-dot.is-active {
  width: 34px;
  background: #f97316;
}

@media (max-width: 900px) {
  .geo-story-bg-wrap::before {
    background: linear-gradient(to top, #04080f 0%, rgba(4,8,15,0.82) 50%, rgba(4,8,15,0.35) 100%);
  }
  .geo-story-panel {
    width: 100%;
    justify-content: flex-end;
    padding: 110px 32px 100px;
  }
  .geo-story-sub,
  .geo-story-card {
    max-width: 520px;
  }
  .geo-story-meter { display: none; }
  .geo-story-dots {
    left: 32px;
    bottom: 42px;
  }
}

@media (max-width: 560px) {
  .geo-story { height: 460vh; }
  .geo-story-panel { padding: 92px 22px 92px; }
  .geo-story-title { font-size: 2.4rem; }
  .geo-story-copy { min-height: 380px; }
  .geo-story-card p { font-size: 0.9rem; }
  .geo-story-dots { left: 22px; }
}