/* ============================================================
   HOME PAGE — Kirtane & Pandit
   ============================================================ */

/* ---------- Reset & Root ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:         #0b1e3d;
  --navy-mid:     #132850;
  --navy-light:   #1e3a6e;
  --dark:         #181818;
  --white:        #ffffff;
  --off-white:    #ffffff;   /* was #f5f3ef cream — switched to pure white site-wide */
  --gray:         #8a8f99;
  --gray-light:   #c4c8d0;
  --gold:         #b8966e;
  --hero-navy:    #062541;
  --hero-charcoal:#181818;
  --glass-bg:     rgba(11,30,61,0.55);
  --glass-border: rgba(255,255,255,0.12);
  --radius-pill:  100px;
  --radius-card:  16px;
  /* Universal font — DM Sans applied to BOTH variables so every existing
     reference (display + body) gets the same modern geometric sans across
     the whole site. The Cormorant Garamond and Inter fallbacks remain
     listed for graceful degradation if Google Fonts ever fails to load. */
  --font-serif:   'DM Sans', 'Cormorant Garamond', 'Georgia', serif;
  --font-sans:    'DM Sans', 'Inter', 'Helvetica Neue', sans-serif;
  --ease-butter:  cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: auto;
}
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

body {
  font-family: var(--font-sans);
  background: var(--dark);
  color: var(--white);
  overflow-x: hidden;
}

/* ---------- Scroll progress ---------- */
#progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--gold);
  width: 0%;
  z-index: 99999;
  pointer-events: none;
  display: none; /* Hidden — removed per design */
}

/* ============================================================
   TEXT LOGO  —  Kirtane & Pandit  (placeholder until artwork)
   Fixed top-left, mirroring the nav-pill on the right.
   Color auto-inverts via body.is-dark-section toggle (set by JS).
============================================================ */
#kp-logo {
  position: fixed;
  top: 22px; left: 28px;
  z-index: 99999;
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 16px 10px 14px;
  border-radius: 100px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.16);
  text-decoration: none;
  color: var(--white);
  transition:
    color 0.45s ease,
    background 0.45s ease,
    border-color 0.45s ease,
    transform 0.4s var(--ease-butter);
  user-select: none;
}
#kp-logo:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
}
.kp-logo__mark {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--gold);
  color: var(--navy);
}
.kp-logo__word {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1;
}
.kp-logo__word em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  margin: 0 1px;
}

/* When the logo sits over a cream/light section, swap to navy chrome */
body.kp-logo-dark #kp-logo {
  background: rgba(11,30,61,0.06);
  border-color: rgba(11,30,61,0.18);
  color: var(--navy);
}
body.kp-logo-dark #kp-logo:hover {
  background: rgba(11,30,61,0.12);
  border-color: rgba(11,30,61,0.32);
}

@media (max-width: 640px) {
  #kp-logo { top: 16px; left: 16px; padding: 8px 12px 8px 10px; gap: 8px; }
  .kp-logo__word { display: none; } /* keep just the K&P mark on phones */
}

/* ---------- Scroll progress ---------- */
#progress-bar { } /* (declaration above is the source of truth) */

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

/* SplitText line wrapper — clip each line */
.split-line { overflow: hidden; display: block; }

/* ============================================================
   NAV PILL
   ============================================================ */
#nav-pill {
  position: fixed;
  top: 28px; right: 28px;
  z-index: 99999;           /* above nav panel always */
  cursor: pointer;
  user-select: none;
}

/* --- default state: pill shape --- */
.pill-collapsed {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--glass-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  /* morph transitions */
  transition:
    padding 0.38s var(--ease-butter),
    border-radius 0.38s var(--ease-butter),
    background 0.3s,
    border-color 0.3s,
    width 0.38s var(--ease-butter);
}
#nav-pill:hover .pill-collapsed {
  background: rgba(11,30,61,0.78);
  border-color: rgba(255,255,255,0.24);
}

/* dot */
.pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  transition: opacity 0.2s, transform 0.3s;
}

/* label */
.pill-label {
  display: inline-block;
  max-width: 80px;          /* enough for "Menu" text */
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.18s, transform 0.22s var(--ease-butter), max-width 0.35s var(--ease-butter), margin 0.35s var(--ease-butter);
}

/* × icon — hidden by default */
.pill-close {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: rotate(-45deg) scale(0.7);
  transition: opacity 0.22s, transform 0.35s var(--ease-butter);
  pointer-events: none;
  color: var(--white);
}

/* --- open state: morph to circle --- */
body.nav-open #nav-pill .pill-collapsed {
  padding: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.25);
}
body.nav-open #nav-pill .pill-dot {
  opacity: 0;
  transform: scale(0);
}
body.nav-open #nav-pill .pill-label {
  opacity: 0;
  transform: translateX(6px);
  max-width: 0;
  margin: 0;
}
body.nav-open #nav-pill .pill-close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  pointer-events: none;
}
body.nav-open #nav-pill:hover .pill-collapsed {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.45);
}
/* rotate × on hover */
body.nav-open #nav-pill:hover .pill-close {
  transform: rotate(90deg) scale(1.05);
}

/* Full-screen nav panel */
#nav-panel {
  position: fixed;
  inset: 0;
  background: rgba(8,18,38,0.97);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 8vw;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-butter), visibility 0.45s;
}
#nav-panel.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.nav-panel__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 48px;
}
.nav-panel__links li { overflow: hidden; }
.nav-panel__links li a {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  line-height: 1.1;
  display: inline-block;
  transition: color 0.3s, transform 0.35s var(--ease-butter);
  transform: translateY(100%);
}
#nav-panel.open .nav-panel__links li a {
  transform: translateY(0);
}
.nav-panel__links li:nth-child(1) a { transition-delay: 0.04s; }
.nav-panel__links li:nth-child(2) a { transition-delay: 0.08s; }
.nav-panel__links li:nth-child(3) a { transition-delay: 0.12s; }
.nav-panel__links li:nth-child(4) a { transition-delay: 0.16s; }
.nav-panel__links li:nth-child(5) a { transition-delay: 0.20s; }
.nav-panel__links li a:hover { color: var(--white); transform: translateX(14px); }

.nav-panel__footer {
  display: flex;
  gap: 36px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.nav-panel__footer a {
  font-size: 0.78rem;
  color: var(--gray);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color 0.3s;
}
.nav-panel__footer a:hover { color: var(--white); }

/* ============================================================
   HERO
   ============================================================ */
/* ============================================================
   HERO  —  original design + scroll-scrubbed bar reveal
   ----------------------------------------------------------------
   #hero       : 300vh runway — gives ScrollTrigger room to scrub.
   .hero__pin  : 100vh pinned viewport.
   .hero__video-wrap / .hero__video-fallback : original background.
   .hero__bars : transparent at load; charcoal bars grow up on scroll.
   .hero__content : original content, highest z-index.
============================================================ */
#hero {
  position: relative;
  width: 100%;
  height: 145vh;   /* runway: 100vh pinned + 45vh of unstick travel */
  background: transparent; /* CRITICAL: transparent so the About section
                              stacked behind shows through hero's tail
                              (the 45vh below the pin) as the curtain lifts.
                              The .hero__video-fallback inside .hero__pin
                              still prevents the pre-paint flash. */
  z-index: 2;      /* sits ABOVE the About section so the curtain rises
                      through hero while About is already in place behind. */
}

.hero__pin {
  position: sticky;          /* CSS-native pin — no GSAP JS overhead, no 1-frame jitter */
  top: 0;
  width: 100%;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 0 6vw 7vh;
  /* Curtain clip variables — set here on the pin so both .hero__video-wrap
     and .hero__video-fallback (siblings) inherit and stay in sync. */
  --h1: 0%;
  --h2: 0%;
  --h3: 0%;
}

/* ----- Original video background -------------------------------- */
.hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;  /* above fallback so video renders over gradient when loaded */
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% calc(100% - var(--h3)),
    66.6667% calc(100% - var(--h3)),
    66.6667% calc(100% - var(--h2)),
    33.3333% calc(100% - var(--h2)),
    33.3333% calc(100% - var(--h1)),
    0% calc(100% - var(--h1))
  );
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--h3)), 66.6667% calc(100% - var(--h3)), 66.6667% calc(100% - var(--h2)), 33.3333% calc(100% - var(--h2)), 33.3333% calc(100% - var(--h1)), 0% calc(100% - var(--h1)));
  will-change: clip-path;
}
.hero__video-wrap video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  object-position: center;
  backface-visibility: hidden;
}

.hero__video-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Dark navy — invisible against the site's dark palette so any brief
     pre-paint peek-through blends rather than flashing a vivid blue. */
  background: var(--navy);
  /* Mirror the curtain clip so the fallback disappears in sync with the
     video, exposing the About section behind. Without this, the fallback
     stays painted as a solid navy patch through every clipped column. */
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% calc(100% - var(--h3, 0%)),
    66.6667% calc(100% - var(--h3, 0%)),
    66.6667% calc(100% - var(--h2, 0%)),
    33.3333% calc(100% - var(--h2, 0%)),
    33.3333% calc(100% - var(--h1, 0%)),
    0% calc(100% - var(--h1, 0%))
  );
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--h3, 0%)), 66.6667% calc(100% - var(--h3, 0%)), 66.6667% calc(100% - var(--h2, 0%)), 33.3333% calc(100% - var(--h2, 0%)), 33.3333% calc(100% - var(--h1, 0%)), 0% calc(100% - var(--h1, 0%)));
  will-change: clip-path;
}

/* ----- Bar layer (between video and content) -------------------- */
.hero__bars {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;       /* anchors bars to bottom — height grows UP */
  z-index: 1;                  /* above video overlay, below content */
  pointer-events: none;
}
.hero__bar {
  position: relative;
  width: calc(100% / 3);
  height: 0%;                  /* GSAP scrubs to data-final on scroll */
  background-color: transparent;  /* clip-path on .hero__video-wrap performs the reveal */
}
/* Hairline seam between bars — barely visible on cream */
.hero__bar + .hero__bar {
  box-shadow: -1px 0 0 rgba(11,30,61,0.04);
}
/* Cap rule removed — was creating a visible navy line at top of bars */

/* Dark top-edge fade — masks the saturated-blue video sky at the
   very top of the frame so it blends into the site's dark palette.
   Dark → transparent (no cream, no white — just depth). */
.hero__pin::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(6,12,26,0.49) 0%, transparent 100%);
  z-index: 3;
  pointer-events: none;
}

/* ----- Original content (top of stack) -------------------------- */
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: flex-end;
  gap: 48px;
}
.hero__heading {
  font-family: var(--font-serif);
  /* Eased down slightly (2026-06-11) so the 3-line heading clears the
     bottom on short/wide viewports without being clipped. */
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--white);
  /* GSAP tweens this to --navy as cream bars rise —
     heading reads as the Who We Are section title by completion */
  will-change: color;
}
.hero__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 28px;
}
.hero__para {
  font-family: var(--font-serif);
  font-size: 1rem;            /* 16px, client-set */
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,0.96);
  max-width: 480px;
  text-align: right;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.30);
}
.hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.hero__scroll span {
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.hero__scroll-circle {
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: bounce 2.2s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

@media (max-width: 820px) {
  #hero { height: 130vh; }
  .hero__pin { padding: 0 5vw 6vh; }
  .hero__content { grid-template-columns: 1fr; gap: 24px; }
  .hero__right { align-items: flex-start; }
  .hero__para { text-align: left; }
}
/* Short desktop/laptop viewports (2026-06-11): the pin's min-height:620px
   makes it TALLER than the viewport when the laptop window is < 620px high
   (common with a bookmarks bar), pushing the bottom-aligned heading below
   the fold ("of Trust" clipped). Drop the floor here so the pin matches the
   actual viewport and the heading fits. Scoped min-width:821px so mobile is
   untouched; taller viewports (>700px) are unaffected (the floor is already
   non-binding there). */
@media (min-width: 821px) and (max-height: 700px) {
  .hero__pin { min-height: 0; }
}

/* ============================================================
   WHY KIRTANE & PANDIT?  —  Swiper carousel + radial backdrop
   Center-focused image-on-top cards over an animated radial line
   pattern. Cursor-driven spotlight (~280px radius) sharpens the
   pattern within the hot zone.
============================================================ */
#why-kp {
  position: relative;
  width: 100%;
  padding: clamp(80px, 9vw, 140px) clamp(24px, 6vw, 96px) clamp(40px, 4vw, 70px);
  background: var(--off-white);
  overflow: hidden;
  isolation: isolate;
}

/* ---- Mesh-dot backdrop (transparent, faintly visible at rest) ---- */
.why-kp__backdrop {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background: transparent;
  --mx: 50%; --my: 50%;
  --r: 200px;     /* spotlight radius */
}
/* Halftone-style dot mesh — small navy dots on a transparent grid.
   Two layers: a faint base that's always visible, and a brighter
   "sharp" copy revealed only inside the cursor radius via mask. */
.why-kp__radial {
  position: absolute; inset: -8%;        /* slight overscan so rotation never bares the corners */
  background-image: radial-gradient(circle, rgba(11,30,61,0.55) 1.2px, transparent 1.6px);
  background-size: 16px 16px;
  background-repeat: repeat;
  background-color: transparent;
  /* Subtle radial fade — keeps the centre prominent and edges soft */
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 35%, rgba(0,0,0,0.3) 80%, transparent 100%);
          mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 35%, rgba(0,0,0,0.3) 80%, transparent 100%);
}
.why-kp__radial--soft {
  opacity: 0.22;                         /* always visible, faint */
  animation: whyKpDrift 60s linear infinite;
}
.why-kp__radial--sharp {
  opacity: 0;
  background-image: radial-gradient(circle, rgba(11,30,61,0.85) 1.4px, transparent 1.9px);
  background-size: 16px 16px;
  -webkit-mask: radial-gradient(circle var(--r) at var(--mx) var(--my),
    rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0) 100%);
          mask: radial-gradient(circle var(--r) at var(--mx) var(--my),
    rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0) 100%);
  transition: opacity 0.4s ease;
}
#why-kp.is-hovering .why-kp__radial--sharp { opacity: 1; }

/* Mild gold spotlight glow following cursor */
.why-kp__spotlight {
  position: absolute;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  left: var(--mx); top: var(--my);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(184,150,110,0.08) 0%, rgba(184,150,110,0.025) 50%, transparent 70%);
  pointer-events: none;
  filter: blur(18px);
  opacity: 0;
  transition: opacity 0.35s ease;
}
#why-kp.is-hovering .why-kp__spotlight { opacity: 1; }

/* Slow drift on the base layer — barely-perceptible motion, never a full rotation
   (avoids creating a visible "spinning" feel that would distract from the cards). */
@keyframes whyKpDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-1.2%, 0.8%, 0) scale(1.02); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* ---- Section head ---- */
.why-kp__head {
  position: relative; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 32px;
  max-width: 1320px; margin: 0 auto clamp(40px, 5vw, 64px);
}
/* Soft white wash that masks the mesh dots under the head text
   without affecting layout — radial fade from solid white at the
   text's anchor point, dissolving outward. Keeps the title and
   lede crisp regardless of the cursor-spotlit dot mesh behind. */
.why-kp__head::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -6%; top: -20%;
  right: -6%; bottom: -10%;
  background: radial-gradient(
    ellipse 60% 80% at 25% 50%,
    rgba(255,255,255,0.96) 0%,
    rgba(255,255,255,0.88) 35%,
    rgba(255,255,255,0.55) 65%,
    rgba(255,255,255,0) 100%
  );
  pointer-events: none;
}
.why-kp__heading {
  position: relative;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0;
  /* Multiple soft white halos lift letters off the dot mesh */
  text-shadow:
    0 0 32px rgba(255,255,255,0.95),
    0 0 16px rgba(255,255,255,0.95),
    0 0  4px rgba(255,255,255,0.95);
}
.why-kp__heading-arrow { display: inline-block; margin-left: 12px; color: var(--gold); transform: translateY(-4px); font-size: 0.7em; }
.why-kp__sub {
  position: relative;
  margin-top: 14px; max-width: 560px;
  font-family: var(--font-sans); font-weight: 450;
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.65;
  color: rgba(11,30,61,0.92);
  text-shadow:
    0 0 18px rgba(255,255,255,0.95),
    0 0  8px rgba(255,255,255,0.95);
}
.why-kp__chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border: 1px solid rgba(11,30,61,0.18);
  border-radius: 999px; background: white;
  font-family: var(--font-sans); font-size: 0.85rem; color: var(--navy);
  text-decoration: none;
  flex-shrink: 0;
  transition: gap 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.why-kp__chip:hover { gap: 16px; border-color: var(--gold); color: var(--gold); }
.why-kp__chip-arrow { font-size: 0.95rem; }

/* ---- Carousel + cards ---- */
.why-kp__carousel {
  position: relative; z-index: 2;
  max-width: none; margin: 0;
  padding: 0 clamp(20px, 4vw, 64px) 24px;
  overflow: visible;
}
/* Carousel paints on its own white "stage" so the dot mesh never
   bleeds into the band behind the cards (even between/around them).
   The pseudo extends slightly beyond the slide row for the active
   card's pop scale and shadow. */
.why-kp__carousel::before {
  content: "";
  position: absolute;
  left: -2vw; right: -2vw;
  top: 0; bottom: 0;
  background: #fff;
  z-index: -1;
  pointer-events: none;
  border-radius: 28px;
  box-shadow: 0 1px 0 rgba(11,30,61,0.04);
}
.why-kp__carousel .swiper-wrapper { align-items: stretch; padding: 32px 0; }
.why-kp__carousel .swiper-slide {
  height: auto; display: flex;
  transition: transform 0.55s cubic-bezier(0.16,1,0.3,1);
}

/* Active slide gets the "pop" — bigger, lifted, stronger shadow.
   Cards stay 100% OPAQUE in all states so the dot mesh behind never
   shows through (previous opacity:0.6 on inactive cards was making the
   surface translucent and revealing the backdrop pattern). */
.why-kp__carousel .swiper-slide.swiper-slide-active {
  transform: scale(1.06);
  z-index: 3;
}
.why-kp__carousel .swiper-slide.swiper-slide-active .why-card {
  box-shadow: 0 28px 70px rgba(11,30,61,0.18), 0 6px 16px rgba(11,30,61,0.08);
  border-color: rgba(11,30,61,0.10);
}
.why-kp__carousel .swiper-slide:not(.swiper-slide-active) {
  transform: scale(0.92);
}
.why-kp__carousel .swiper-slide:not(.swiper-slide-active) .why-card {
  /* Tone down the *content* (image + text) without making the card
     surface translucent — the white background stays opaque so the
     dot pattern can't bleed through. */
  filter: saturate(0.85);
}
.why-kp__carousel .swiper-slide:not(.swiper-slide-active) .why-card__title,
.why-kp__carousel .swiper-slide:not(.swiper-slide-active) .why-card__desc,
.why-kp__carousel .swiper-slide:not(.swiper-slide-active) .why-card__btn {
  opacity: 0.7;
}

.why-card {
  display: flex; flex-direction: column;
  background: #fff;                  /* fully opaque — hides backdrop dots */
  border: 1px solid rgba(11,30,61,0.05);
  border-radius: 22px;
  padding: 18px 0 28px;
  box-shadow: 0 12px 40px rgba(11,30,61,0.08);
  transition: box-shadow 0.45s ease, border-color 0.45s ease;
  width: 100%;
  position: relative;
  z-index: 1;
}
.why-card:hover { box-shadow: 0 18px 56px rgba(11,30,61,0.14); }
.why-card__media {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(11,30,61,0.05);
  margin: 0 18px 22px;
}
.why-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.4s var(--ease-butter, cubic-bezier(0.16,1,0.3,1));
}
.why-card:hover .why-card__media img { transform: scale(1.05); }

.why-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  font-weight: 500; color: var(--navy);
  margin: 0 22px 10px; line-height: 1.25;
}
.why-card__desc {
  font-family: var(--font-sans);
  font-size: clamp(0.98rem, 1.05vw, 1.05rem);
  line-height: 1.6;
  font-weight: 450;
  letter-spacing: -0.003em;
  color: rgba(11,30,61,0.92);
  margin: 0 22px 24px;
  flex: 1;
}
.why-card__btn {
  align-self: flex-start;
  margin: 0 22px;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: none;
  background: rgba(11,30,61,0.06);
  color: var(--navy);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}
.why-card__btn:hover { background: var(--gold); color: white; transform: translateX(4px); }

/* ---- Nav (arrows + dots) ---- */
.why-kp__nav {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: 20px;
  margin: 36px auto 0;
  width: max-content;
  max-width: 100%;
  padding: 0;
  text-align: center;
}
.why-kp__nav > * { flex-shrink: 0; }
/* Pagination shrinks to its bullets so the next arrow sits flush with
   the last bar instead of floating to the right with empty space.
   !important needed to defeat Swiper's CDN CSS which forces
   .swiper-pagination { width: 100% }. */
.why-kp__pagination.swiper-pagination-horizontal,
.why-kp__pagination {
  width: auto !important;
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  flex-shrink: 0;
}
.why-kp__arrow {
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid rgba(11,30,61,0.2); background: transparent;
  color: var(--navy); cursor: pointer; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.why-kp__arrow:hover { background: var(--navy); color: white; border-color: var(--navy); }
.why-kp__pagination { display: flex; gap: 8px; align-items: center; }
.why-kp__pagination .swiper-pagination-bullet {
  width: 28px; height: 4px; border-radius: 2px;
  background: rgba(11,30,61,0.18); opacity: 1;
  display: inline-block; cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
}
.why-kp__pagination .swiper-pagination-bullet-active {
  background: var(--navy); width: 44px;
}

/* ---- Mobile ---- */
@media (max-width: 820px) {
  .why-kp__head { flex-direction: column; }
  .why-kp__carousel .swiper-slide:not(.swiper-slide-active) .why-card {
    transform: scale(0.98); opacity: 0.85;
  }
}
/* ============================================================
   ABOUT  —  Corevia-inspired layout (replaces Who We Are)
   Centred intro · two rounded image cards (right one carries a
   floating glass UI chip) · two-column statement with inline +
   button and dark Learn-more pill · four-up stats row.
============================================================ */
#who-we-are.about {
  background: var(--off-white);
  color: var(--navy);
  /* Top padding: existing clamp() PLUS a hard +100px breathing room
     above the "A member of KGS Alliance" heading. The +100px is
     applied AFTER the curtain finishes rising — the curtain itself
     is driven by margin-top:-45vh and translateY(--about-y) below,
     both untouched, so the rise animation is unaffected.
     Side + bottom padding preserved verbatim. */
  padding: calc(clamp(64px, 8vw, 110px) + 100px) 7vw clamp(96px, 12vw, 160px);
  position: relative;
  overflow: hidden;
  /* Stacks BEHIND the hero. The negative margin slides the About section
     up under the hero's scroll runway so it's literally sitting behind the
     curtain bars during the rise — once they reach 100% the content is
     already in place, no dead cream screen, no padding jump. */
  margin-top: -45vh;
  /* Compensate the permanent translateY(-55vh) that lands at curtain
     end — without this, the body's dark background shows as a 55vh
     "black band" between About's painted bottom and the next section's
     flow top. The negative margin pulls subsequent sections up by the
     same amount so they butt against About's painted bottom edge. */
  margin-bottom: -55vh;
  z-index: 1;
  transform: translateY(var(--about-y, 0vh));
  will-change: transform;
}
@media (max-width: 720px) {
  /* On mobile #hero is 130vh (runway = 30vh, translateY ends at -70vh) */
  #who-we-are.about { margin-bottom: -70vh; }
}
.about__wrap {
  max-width: 1240px;
  margin: 0 auto;
}

/* ── 1. Intro ────────────────────────────────────────────── */
.about__intro {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(56px, 7vw, 96px);
}
.about__kicker {
  display: inline-block;
  max-width: 100%;            /* allow wrap on narrow screens — no h-overflow */
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-size: 1.40rem;         /* client-set kicker size (was 0.72rem default) */
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: clamp(20px, 2.6vw, 32px);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s var(--ease-butter, cubic-bezier(0.16,1,0.3,1)),
              transform 0.7s var(--ease-butter, cubic-bezier(0.16,1,0.3,1));
}
.about__title {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 5.4vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  color: var(--navy);
}
.about__lede {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-size: clamp(0.92rem, 1vw, 1rem);
  line-height: 1.6;
  color: rgba(11,30,61,0.62);
  max-width: 56ch;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s 0.1s var(--ease-butter, cubic-bezier(0.16,1,0.3,1)),
              transform 0.7s 0.1s var(--ease-butter, cubic-bezier(0.16,1,0.3,1));
}
.about.in-view .about__kicker,
.about.in-view .about__lede { opacity: 1; transform: translateY(0); }

/* ── 2. Image pair ──────────────────────────────────────── */
.about__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
  margin-bottom: clamp(80px, 10vw, 140px);
}
.about__images--single {
  grid-template-columns: 1fr;
}
.about__images--single .about__image {
  /* Match the photo's natural aspect ratio exactly (1240×540) so
     object-fit: cover doesn't crop anything. With the ratio aligned,
     the photo displays edge-to-edge with no crop. */
  aspect-ratio: 1240 / 540;
  /* No backstop fill and NO drop-shadow — earlier iterations tried
     #ddd / a navy halo / a soft diffuse shadow, but on the cream
     page background any of those reads as a grey/white patch under
     the image. The image now terminates cleanly at its rounded edge
     with nothing visually below it. */
  background: transparent;
  box-shadow: none;
}
.about__image {
  position: relative;
  margin: 0;
  border-radius: clamp(20px, 2.4vw, 32px);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: #ddd;
  box-shadow: 0 10px 40px -20px rgba(11,30,61,0.18);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.95s var(--ease-butter, cubic-bezier(0.16,1,0.3,1)),
              transform 0.95s var(--ease-butter, cubic-bezier(0.16,1,0.3,1));
}
.about__image--right { transition-delay: 0.12s; }
.about.in-view .about__image { opacity: 1; transform: translateY(0); }

.about__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-butter, cubic-bezier(0.16,1,0.3,1)),
              filter 0.6s ease;
  will-change: transform;
}
.about__image:hover img {
  transform: scale(1.06);
  filter: saturate(1.05) contrast(1.02);
}

/* Floating glass UI chip on the right image */
.about__chip {
  position: absolute;
  top: clamp(20px, 2.4vw, 32px);
  right: clamp(20px, 2.4vw, 32px);
  width: clamp(150px, 14vw, 184px);
  padding: clamp(14px, 1.4vw, 18px);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 16px;
  box-shadow: 0 18px 60px -28px rgba(11,30,61,0.4);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  color: var(--navy);
  transform: translateY(-6px);
}
.about__chip-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(11,30,61,0.7);
}
.about__chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
}
.about__chip-gauge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about__chip-gauge svg { display: block; }
.about__chip-arc {
  transition: stroke-dashoffset 1.4s var(--ease-butter, cubic-bezier(0.16,1,0.3,1));
}
.about.in-view .about__chip-arc {
  stroke-dashoffset: 4; /* 98% of 201 ≈ 197 drawn → offset ≈ 4 */
}
.about__chip-num {
  position: absolute;
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--navy);
}
.about__chip-foot {
  font-size: 0.68rem;
  line-height: 1.4;
  color: rgba(11,30,61,0.6);
}

/* ── 3. Statement row ─────────────────────────────────── */
.about__statement-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(32px, 5vw, 80px);
  margin-bottom: clamp(72px, 9vw, 120px);
  align-items: start;
}
.about__label {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--navy);
  padding-top: 14px;
}
.about__statement {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.68vw, 1.54rem); /* 70% of previous clamp(1.5rem, 2.4vw, 2.2rem) */
  line-height: 1.42;
  letter-spacing: -0.018em;
  color: var(--navy);
  margin: 0 0 clamp(28px, 3vw, 40px);
  max-width: 46ch; /* wider character width compensates for smaller type */
}
.about__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--off-white);
  margin: 0 6px;
  vertical-align: 6px;
  transition: transform 0.4s var(--ease-butter, cubic-bezier(0.16,1,0.3,1)),
              background 0.4s ease;
}
.about__statement:hover .about__plus { transform: rotate(90deg); background: var(--gold); }

.about__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--off-white);
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  transition: background 0.4s ease, transform 0.4s var(--ease-butter, cubic-bezier(0.16,1,0.3,1)), gap 0.4s var(--ease-butter, cubic-bezier(0.16,1,0.3,1));
}
.about__cta::after {
  content: '→';
  font-size: 0.95rem;
  transform: translateX(0);
  transition: transform 0.4s var(--ease-butter, cubic-bezier(0.16,1,0.3,1));
}
.about__cta:hover { background: var(--gold); color: var(--navy); gap: 14px; }
.about__cta:hover::after { transform: translateX(3px); }

/* ── 4. Stats row ─────────────────────────────────── */
/* ============================================================
   STATS  —  CSS keyframe marquee (truly seamless)
   The track holds 12 cards (6 originals + 6 clones from JS).
   translateX 0 → -50% loops back to 0 with no visible reset
   because the clone set sits in the exact position the original
   just left.

   Breaks out of the 1240px .about__wrap to near-full viewport
   width using a viewport-anchored margin trick.
============================================================ */
.about__stats {
  position: relative;

  /* Break out of the parent .about__wrap (max-width: 1240px) to
     near-full viewport width, with a small symmetric padding. */
  width: calc(100vw - 32px);
  margin-left:  calc(50% - 50vw + 16px);
  margin-right: calc(50% - 50vw + 16px);
  max-width: 1840px;
  margin-top: clamp(36px, 4vw, 56px);

  background: #0b1e3d;
  border-radius: 24px;
  /* Horizontal padding gives the cards a clean inset gap from the
     rounded edges of the navy rail instead of the previous blurred
     fade mask. Cards just slide in / out of the rounded corners. */
  padding: clamp(22px, 2.4vw, 32px) clamp(16px, 2vw, 28px);
  overflow: hidden;
}
/* Centre the rail when it's wider than the page; cap to max-width.
   Can't use margin:auto here — the panel (1840px) is wider than its
   containing block (.about__wrap, 1240px), so auto margins collapse to
   left:0 / right:negative and shove it off-centre. Centre it manually:
   50% = half the wrap (620px); 920px = half the panel. */
@media (min-width: 1872px) {
  .about__stats {
    width: 1840px;
    margin-left: calc(50% - 920px);
    margin-right: 0;
  }
}

/* The track  — JS-driven now (see home.js). The CSS keyframe animation
   was replaced with a RAF loop so we can pause and seek during pointer
   drag. The keyframes block is left for graceful degradation if the JS
   ever fails to run (older browsers / errors elsewhere). */
.about__stats .swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  align-items: stretch;
  gap: 0;
  will-change: transform;
}
.about__stats {
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.about__stats.is-dragging { cursor: grabbing; }
.about__stats img, .about__stats svg { -webkit-user-drag: none; }

@keyframes aboutMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Card frame — fixed width, sits on the track. Sized down ~20% to
   feel less dominant in the section. */
.about__stat {
  flex: 0 0 auto;
  /* Slightly wider cards to give the larger type room to breathe
     without the longest numbers (e.g. 1,200+) truncating. */
  width: clamp(240px, 22vw, 300px);
  display: flex;
  flex-direction: column;
  align-items: center;          /* centre cross-axis content */
  text-align: center;           /* centre inline text inside cards */
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: clamp(22px, 1.8vw, 30px) clamp(18px, 1.4vw, 24px) clamp(18px, 1.4vw, 22px);
  margin: 4px clamp(6px, 0.7vw, 10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  min-height: 270px;
  transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.about__stat:hover {
  border-color: rgba(184,150,110,0.50);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 24px 50px -22px rgba(0,0,0,0.35), 0 0 0 1px rgba(184,150,110,0.25);
  transform: translateY(-3px);
}
/* DESKTOP ONLY (2026-06-11, regression request): the marquee showed ~4.5
   cards; narrow each card on desktop so ~6 fit in one view. ~14.3vw keeps
   6 visible across 1280–1920 (rail caps at 1840). Mobile (≤600) + tablet
   (601–1023) keep their existing sizing — deliberately NOT touched. */
@media (min-width: 1024px) {
  .about__stat { width: clamp(185px, 14.3vw, 280px); }
  /* Reserve a uniform 2-line height for the label so the big numbers all
     sit on the SAME line across cards (1-line labels like "Employees" no
     longer pull their number up vs 2-line labels like "Countries Worked
     in"). Labels top-align as a clean header row. 2026-06-11. */
  .about__stat-sub {
    min-height: 2.4em;
    text-align: center;
  }
}

/* ── Card head (label + period pill) ── */
.about__stat-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.about__stat-label {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #fff;
}
.about__stat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.08);
  user-select: none;
  cursor: default;
}
.about__stat-pill svg { opacity: 0.55; flex-shrink: 0; }

/* ── Sub-label ── */
.about__stat-sub {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-size: clamp(1.15rem, 1.35vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.92);
  margin: 0 0 12px;
  line-height: 1.2;
}

/* ── Big number row — centred under the sub-label ── */
.about__stat-num-row {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}
.about__stat-num {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.8rem, 4.4vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: #fff;
}
.about__stat-num sup {
  font-size: 0.42em;
  vertical-align: 0.55em;
  margin-left: 4px;
  font-weight: 500;
  color: #fff;
}
/* Coral up-arrow removed per client request. Markup kept in the DOM
   (cards are JS-cloned for the marquee, so a single CSS hide covers
   originals + clones). To restore, change display:none back to
   inline-flex. */
.about__stat-arrow {
  display: none;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: #d97a4a;
  margin-top: 10px;
}
.about__stat-arrow svg { width: 100%; height: 100%; display: block; }

/* ── Decorative chart area — uniform footprint across all cards ── */
.about__stat-chart {
  flex: 1 1 auto;
  min-height: 76px;
  display: flex; align-items: center;
  margin-bottom: 12px;
  pointer-events: none;
}
.about__stat-chart svg { width: 100%; height: 100%; min-height: 76px; display: block; }
/* On dark navy background, override inline navy fills/strokes to white */
.about__stat-chart [fill="#0b1e3d"]          { fill: rgba(255,255,255,0.75) !important; }
.about__stat-chart [stroke="#0b1e3d"]        { stroke: rgba(255,255,255,0.80) !important; }
.about__stat-chart [stroke="rgba(11,30,61,0.10)"] { stroke: rgba(255,255,255,0.10) !important; }
.about__stat-chart [stroke="rgba(11,30,61,0.18)"] { stroke: rgba(255,255,255,0.15) !important; }
.about__stat-chart g[stroke="rgba(11,30,61,0.18)"] { stroke: rgba(255,255,255,0.18) !important; }
/* Legacy --center kept as a no-op fallback so any old markup still flows */
.about__stat-chart--center { justify-content: center; }
.about__stat-chart--center svg { width: 100%; height: 100%; min-height: 96px; }

/* (Mobile compact sizing for .about__stat lives in the responsive
   block near .about__stat-go — the @media (max-width: 600px) rules
   there carry !important widths, so they are the single source of
   truth for phone card sizing.) */

/* ===== KPI infograph animations =====
   The bar/line/donut/globe SVGs were static.  These keyframes give the
   stats section a quiet but persistent lively feel — pulses on country
   pins, drift on dashed arcs, slow rotation on the donut. */
.kpi-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: kpiPulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes kpiPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.55); opacity: 0.55; }
}

.kpi-arc-line {
  stroke-dashoffset: 0;
  animation: kpiArcDrift 6s linear infinite;
}
.kpi-arc-line--2 { animation-direction: reverse; animation-duration: 8s; }
@keyframes kpiArcDrift {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -28; }
}

.kpi-spin {
  transform-box: fill-box;
  transform-origin: 110px 40px;
  animation: kpiSpin 18s linear infinite;
}
@keyframes kpiSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.kpi-arc {
  animation: kpiArcDraw 2.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.2s;
}
@keyframes kpiArcDraw {
  from { stroke-dashoffset: 180; }
  to   { stroke-dashoffset: 38;  }
}

.kpi-globe {
  transform-box: fill-box;
  transform-origin: 110px 40px;
  animation: kpiGlobeBob 6s ease-in-out infinite;
}
@keyframes kpiGlobeBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

.kpi-traveller {
  filter: drop-shadow(0 0 4px rgba(184,150,110,0.65));
}

/* ===== Additional KPI animations — applied to the other 5 stat
   cards so EVERY infograph has motion (previously only the globe
   "Countries Worked in" card animated). All are pure-CSS so they
   apply automatically to the JS-cloned marquee slides too. They're
   opacity / scale based and respect prefers-reduced-motion below. */

/* Radar ring — expands outward and fades. Used for the gold marker
   ring (Decades, Partners) and the flagship office pulse rings
   (Regional Offices). transform-box:fill-box keeps the scale
   centred on the circle regardless of its cx/cy. */
.kpi-radar {
  transform-box: fill-box;
  transform-origin: center;
  animation: kpiRadar 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes kpiRadar {
  0%   { transform: scale(0.65); opacity: 0.7; }
  70%  { opacity: 0; }
  100% { transform: scale(2.2);  opacity: 0; }
}

/* Glow — gentle opacity breathing. SAFE for elements that already
   carry a transform="" attribute (Industry hexes, the gold Employees
   figure) because it never touches transform. */
.kpi-glow {
  animation: kpiGlow 3s ease-in-out infinite;
}
@keyframes kpiGlow {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Breathe — subtle full-group opacity wave, for the Partners
   connecting lines. Slower + shallower than glow so it reads as a
   quiet background pulse. */
.kpi-breathe {
  animation: kpiBreathe 4.5s ease-in-out infinite;
}
@keyframes kpiBreathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* Twinkle group — staggers an opacity fade across child elements so
   the dots / pins / hexes / people light up in sequence. Each child
   gets an incremental delay (covers up to 11 children for the
   Employees grid). */
.kpi-twinkle-group > * {
  animation: kpiTwinkle 2.6s ease-in-out infinite;
}
.kpi-twinkle-group > *:nth-child(1)  { animation-delay: 0s;    }
.kpi-twinkle-group > *:nth-child(2)  { animation-delay: 0.22s; }
.kpi-twinkle-group > *:nth-child(3)  { animation-delay: 0.44s; }
.kpi-twinkle-group > *:nth-child(4)  { animation-delay: 0.66s; }
.kpi-twinkle-group > *:nth-child(5)  { animation-delay: 0.88s; }
.kpi-twinkle-group > *:nth-child(6)  { animation-delay: 1.10s; }
.kpi-twinkle-group > *:nth-child(7)  { animation-delay: 1.32s; }
.kpi-twinkle-group > *:nth-child(8)  { animation-delay: 1.54s; }
.kpi-twinkle-group > *:nth-child(9)  { animation-delay: 1.76s; }
.kpi-twinkle-group > *:nth-child(10) { animation-delay: 1.98s; }
.kpi-twinkle-group > *:nth-child(11) { animation-delay: 2.20s; }
@keyframes kpiTwinkle {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1;    }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .kpi-pulse, .kpi-arc-line, .kpi-spin, .kpi-arc, .kpi-globe,
  .kpi-radar, .kpi-glow, .kpi-breathe,
  .kpi-twinkle-group > *,
  .kpi-traveller animateMotion {
    animation: none !important;
  }
}

/* ── Foot row (description + go arrow) — DESC IS NOW PROMINENT ── */
.about__stat-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(184,150,110,0.45);
  padding-top: 16px;
}
.about__stat-desc {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(1.02rem, 1.18vw, 1.15rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,0.85);
  margin: 0;
  flex: 1;
}
.about__stat-go {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.3s ease, transform 0.3s ease;
}
.about__stat:hover .about__stat-go {
  background: var(--gold); color: #fff; transform: translateX(3px);
}
.about__stat-go svg { width: 13px; height: 13px; display: block; }

/* Responsive */
@media (max-width: 900px) {
  .about__statement-row { grid-template-columns: 1fr; gap: 16px; }
  .about__label { padding-top: 0; }
  .about__stat { width: clamp(240px, 70vw, 300px) !important; }
}
@media (max-width: 600px) {
  /* 2026-06-10 (client request): +25% top padding so the intro kicker
     clears the mobile menu. ONLY this line added — nothing else. */
  #who-we-are.about { padding: clamp(72px, 14vw, 110px) 6vw; padding-top: 40%; }
  .about__images { grid-template-columns: 1fr; }
  /* Compact stat cards (2026-06-10, client request): the previous
     78vw × 280px cards dominated a phone screen. ~44vw shows two
     cards side-by-side, numbers stay legible, and the marquee
     auto-scroll is untouched (the RAF loop measures the track live). */
  .about__stat {
    min-height: 0;
    width: 44vw !important;
    padding: 14px 12px 10px;
    margin: 3px 5px;
    border-radius: 13px;
  }
  .about__stat-sub { font-size: 0.82rem; margin-bottom: 5px; }
  .about__stat-num-row { margin-bottom: 6px; gap: 6px; }
  .about__stat-num { font-size: 1.8rem; }
  .about__stat-chart { margin-bottom: 4px; min-height: 0; }
  .about__stat-chart svg { min-height: 0; max-height: 56px; }
  .about__stats { padding: 12px 10px; border-radius: 18px; }
  .about__chip { width: 130px; padding: 12px; }
  .about__chip-num { font-size: 1.25rem; }
  .about__chip-gauge svg { width: 60px; height: 60px; }
}

/* ============================================================
   STATS
   ============================================================ */
#stats {
  padding: clamp(90px, 11vw, 140px) 6vw;
  position: relative;
  overflow: hidden;
}
.stats__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 150% 110% at 65% 60%, #1a3d86 0%, #0b1e3d 55%, #060e1f 100%);
}
.stats__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(-45deg,
      transparent, transparent 3px,
      rgba(255,255,255,0.014) 3px, rgba(255,255,255,0.014) 6px);
}

.stats__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}
.stats__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
  gap: 24px;
  flex-wrap: wrap;
}
.stats__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.15;
  max-width: 420px;
}
.stats__subtitle {
  font-size: 0.88rem;
  color: var(--gray);
  max-width: 280px;
  line-height: 1.65;
  text-align: right;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Mobile Swiper (hidden on desktop) */
.stats__swiper { display: none; }

.stat-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  padding: 38px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color 0.3s, transform 0.4s var(--ease-butter);
}
.stat-card:hover {
  border-color: rgba(255,255,255,0.26);
  transform: translateY(-5px);
}
.stat-card__number {
  font-family: var(--font-serif);
  font-size: clamp(3.2rem, 5vw, 5.4rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-card__number sup {
  font-size: 0.42em;
  vertical-align: super;
  color: var(--gold);
}
.stat-card__number span.plus { color: var(--gold); font-size: 0.7em; }
.stat-card__divider {
  width: 100%;
  height: 1px;
  background: var(--glass-border);
}
.stat-card__label {
  font-size: 0.8rem;
  color: var(--gray-light);
  line-height: 1.55;
}

/* ============================================================
   OUR PEOPLE
   ============================================================ */
#our-people {
  padding: clamp(90px, 11vw, 140px) 6vw;
  background: var(--off-white);
  color: var(--navy);
  overflow: hidden;
}
.people__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.people__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 56px;
}
.people__heading {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.2vw, 4.4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.people__desc {
  font-size: 0.96rem;
  line-height: 1.72;
  color: #4a5568;
  max-width: 400px;
}

.people__list { list-style: none; }

.person-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid rgba(11,30,61,0.11);
  cursor: pointer;
  transition: padding 0.4s var(--ease-butter);
  gap: 20px;
}
.people__list li:last-child .person-row {
  border-bottom: 1px solid rgba(11,30,61,0.11);
}
.person-row__left { flex: 1; }
.person-row__name {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 600;
  color: rgba(11,30,61,0.45);
  line-height: 1.1;
  transition: color 0.35s;
}
.person-row:hover .person-row__name,
.person-row.active .person-row__name { color: var(--navy); }

.person-row__bio {
  font-size: 0.82rem;
  color: var(--gold);
  letter-spacing: 0.04em;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s var(--ease-butter), opacity 0.35s, margin-top 0.35s;
}
.person-row.active .person-row__bio {
  max-height: 60px;
  opacity: 1;
  margin-top: 6px;
}

.person-row__role {
  font-size: 0.8rem;
  color: var(--gray);
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
  transition: color 0.35s;
}
.person-row:hover .person-row__role,
.person-row.active .person-row__role { color: var(--navy); }

.person-row__thumb {
  width: 72px; height: 72px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.4s var(--ease-butter), transform 0.4s var(--ease-butter);
}
.person-row:hover .person-row__thumb {
  opacity: 1;
  transform: translateX(0);
}
.person-row__thumb-inner {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--navy-mid), var(--navy-light));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: rgba(255,255,255,0.55);
}

/* ============================================================
   OUR SOLUTIONS
   ============================================================ */
/* ============================================================
   OUR SERVICES — pinned horizontal scroll stage
   ============================================================ */
#our-solutions {
  /* 6 panels × 60vh of scroll travel each + entry/exit buffer.
     If you change the number of .solutions__panel children below,
     update --panel-count, this height, the .solutions__track width
     and the .solutions__panel width to match.
     6 × 60vh = 360vh. */
  --panel-count: 6;
  height: 360vh;
  position: relative;
  background: var(--navy);  /* matches panels — no white bleed at entry/exit */
}

/* ---- Sticky stage ---- */
.solutions__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--navy);  /* dark fallback before images load */
}

/* Dot-grid texture (white dots on dark bg) */
.solutions__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
  z-index: 2;
}

/* ---- Progress bar ---- */
.solutions__progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(11,30,61,0.07);
  z-index: 3;
}
.solutions__progress-fill {
  height: 100%;
  width: 0%;
  background: var(--gold);
  will-change: width;
}

/* ---- Horizontal track ---- */
.solutions__track {
  display: flex;
  width: 600%;          /* 6 panels — keep in sync with --panel-count */
  height: 100%;
  will-change: transform;
  position: relative;
  z-index: 1;
}

/* ---- Individual panel ---- */
.solutions__panel {
  width: calc(100% / 6); /* 1/6 of track = 100vw — must stay in sync with --panel-count */
  height: 100%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* LEFT half — photo with dark overlay */
.solutions__panel::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 52%;
  height: 100%;
  background-image:
    linear-gradient(to right, rgba(13,27,52,0.92) 0%, rgba(13,27,52,0.86) 100%),
    var(--panel-bg, none);
  background-size: cover;
  background-position: center;
  transform: scale(1.07);
  transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.solutions__panel.is-entering::before,
.solutions__panel:first-child::before { transform: scale(1.0); }

/* RIGHT half — clean off-white panel */
.solutions__panel::after {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 50%;
  height: 100%;
  background: var(--off-white);
  z-index: 0;
}

.solutions__panel-inner {
  width: 100vw;
  height: 100%;
  display: grid;
  grid-template-columns: 64px 1fr 1px 1fr;
  align-items: center;
  gap: 0 clamp(32px, 4.5vw, 72px);
  padding: 0 clamp(36px, 5.5vw, 88px);
  position: relative;
  overflow: hidden;
}

/* ---- Left meta strip ---- */
.solutions__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
  border-right: 1px solid rgba(255,255,255,0.14);
  padding-right: 20px;
  position: relative; /* sit above ::before */
  z-index: 1;
}
.solutions__eyebrow {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);            /* read top-to-bottom, not bottom-to-top */
  font-family: var(--font-sans);
  font-size: clamp(0.85rem, 1vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 1;
  text-shadow: 0 0 18px rgba(11,30,61,0.6);
}
.solutions__counter {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #fff;
  opacity: 1;
}
.solutions__counter em { font-style: italic; color: var(--gold); opacity: 1; }

/* ---- Title body ---- */
.solutions__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative; /* sit above ::before */
  z-index: 1;
}
.solutions__num-sm {
  font-family: var(--font-serif);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--gold);
  opacity: 0.85;
  margin-bottom: 10px;
  display: block;
}
.solutions__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(2.8rem, 5.2vw, 5.6rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.0;
  margin: 0 0 18px;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.18);
}
.solutions__tagline {
  font-family: var(--font-sans);
  font-size: clamp(0.78rem, 1.05vw, 0.9rem);
  color: rgba(245,243,239,0.68);
  line-height: 1.62;
  max-width: 310px;
  margin-bottom: 28px;
}
/* Per client request, hide the per-card "Explore →" CTA across all
   5 service panels in the horizontal solutions stage. The anchor
   markup is intentionally left in the DOM so re-enabling later is
   a one-line `display: none` removal — and so anchor-based
   navigation (assistive tech, screen readers) still works if
   someone tabs to the focused element directly. */
.solutions__explore {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(184,150,110,0.3);
  padding-bottom: 3px;
  width: fit-content;
  transition: border-color 0.3s, gap 0.3s var(--ease-butter);
}
.solutions__explore:hover { border-color: var(--gold); gap: 14px; }
.sol-arrow { display: inline-block; }

/* ---- Vertical divider (dark left → white right boundary) ---- */
.solutions__divider {
  align-self: stretch;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(184,150,110,0.35) 30%,
    rgba(184,150,110,0.5) 50%,
    rgba(184,150,110,0.35) 70%,
    transparent
  );
  position: relative;
  z-index: 1;
}

/* ---- Sub-items (right white panel — big editorial list) ---- */
.solutions__items {
  padding-left: clamp(28px, 4vw, 60px);
  padding-right: clamp(20px, 3vw, 40px);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.solutions__items ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
}
.solutions__items li {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.0vw, 3rem);
  color: rgba(11,30,61,0.82);
  line-height: 1.05;
  letter-spacing: -0.01em;
  padding: 0.12em 0;
  border-bottom: 1px solid rgba(11,30,61,0.08);
}
.solutions__items li:first-child { border-top: 1px solid rgba(11,30,61,0.08); }
/* Each list item is now a link to the matching /services/{slug} page.
   The anchor inherits the italic-serif look from the li; hover lifts it. */
.solutions__items li a {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: color 0.22s, padding-left 0.3s var(--ease-butter);
}
.solutions__items li a:hover {
  color: var(--navy);
  padding-left: 0.3em;
}
/* remove old bullet */
.solutions__items li::before { display: none; }

/* ---- Ghost numeral ---- */
.solutions__ghost {
  position: absolute;
  right: clamp(20px, 3vw, 48px);
  bottom: -0.18em;
  font-family: var(--font-serif);
  font-size: clamp(130px, 21vw, 300px);
  font-weight: 700;
  font-style: italic;
  color: rgba(255,255,255,0.07);
  opacity: 1;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  letter-spacing: -0.04em;
  z-index: 1;
  will-change: transform;
}

/* ---- Panel entry animation ---- */
.solutions__panel .solutions__body,
.solutions__panel .solutions__items {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s var(--ease-butter),
              transform 0.65s var(--ease-butter);
}
.solutions__panel.is-entering .solutions__body {
  opacity: 1; transform: translateY(0);
  transition-delay: 0s;
}
.solutions__panel.is-entering .solutions__items {
  opacity: 1; transform: translateY(0);
  transition-delay: 0.12s;
}
/* Always show first panel on load */
.solutions__panel:first-child .solutions__body,
.solutions__panel:first-child .solutions__items {
  opacity: 1; transform: translateY(0);
}

/* ============================================================
   PARALLAX BREAKS
   Three cinematic section breakers — each uses a fixed-depth
   background (GSAP scrub) with atmospheric overlay + text.
   Replace .pb__bg--img background-image URLs with client photos.
   ============================================================ */

/* ---- Shell ---- */
.pb {
  position: relative;
  height: 55vh;
  min-height: 320px;
  overflow: hidden;
  isolation: isolate;
}

/* ---- Background layers ---- */
.pb__bg {
  position: absolute;
  top: -20%;
  left: 0;
  right: 0;
  height: 140%;
  z-index: 0;
  will-change: transform;
}
.pb__bg--img {
  background-size: cover;
  background-position: center;
}
.pb__bg--video {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pb__bg--video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;     /* muted — it's the same hero clip */
}

/* ---- Overlays ---- */
.pb__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.pb__overlay--navy {
  background: linear-gradient(
    135deg,
    rgba(11,30,61,0.47) 0%,
    rgba(11,30,61,0.31) 60%,
    rgba(11,30,61,0.21) 100%
  );
}
.pb__overlay--dark {
  background: linear-gradient(
    to right,
    rgba(6,15,30,0.43) 0%,
    rgba(6,15,30,0.33) 50%,
    rgba(6,15,30,0.43) 100%
  );
}
.pb__overlay--warm {
  background: linear-gradient(
    120deg,
    rgba(11,30,61,0.13) 0%,
    rgba(6,15,30,0.42) 55%,
    rgba(6,15,30,0.49) 100%
  );
}

/* ---- Content wrapper ---- */
.pb__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(36px, 7vw, 120px);
}
.pb__content--center {
  align-items: center;
  text-align: center;
}
.pb__content--right {
  align-items: flex-end;
  text-align: right;
  padding-right: clamp(36px, 8vw, 140px);
}

/* ---- Eyebrow ---- */
.pb__eyebrow {
  font-family: var(--font-serif);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s var(--ease-butter), transform 0.7s var(--ease-butter);
}
.pb.in-view .pb__eyebrow {
  opacity: 0.8;
  transform: translateY(0);
}

/* ---- Quote / Main text ---- */
.pb__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.9rem, 3.8vw, 4.2rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.12;
  margin: 0;
  max-width: 780px;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.85s 0.1s var(--ease-butter), transform 0.85s 0.1s var(--ease-butter);
}
.pb.in-view .pb__quote {
  opacity: 1;
  transform: translateY(0);
}
.pb__quote--sm {
  font-size: clamp(1.6rem, 3vw, 3.4rem);
}

/* ---- Break 2: Stat display ---- */
.pb__stat {
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 8vw, 9.5rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.03em;
  opacity: 0;
  transform: scale(0.94) translateY(10px);
  transition: opacity 0.9s 0.1s var(--ease-butter), transform 0.9s 0.1s var(--ease-butter);
}
.pb.in-view .pb__stat {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.pb__stat-plus {
  color: var(--gold);
  font-size: 0.65em;
  vertical-align: super;
}
.pb__stat-label {
  font-family: var(--font-sans);
  font-size: clamp(0.75rem, 1.1vw, 0.92rem);
  color: rgba(245,241,235,0.55);
  letter-spacing: 0.06em;
  margin-top: 12px;
  max-width: 400px;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s 0.35s var(--ease-butter), transform 0.7s 0.35s var(--ease-butter);
}
.pb.in-view .pb__stat-label {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Break 3: CTA link ---- */
.pb__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  margin-top: 28px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(184,150,110,0.35);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s 0.4s var(--ease-butter), transform 0.6s 0.4s var(--ease-butter),
              border-color 0.3s, gap 0.3s;
}
.pb.in-view .pb__cta {
  opacity: 1;
  transform: translateY(0);
}
.pb__cta:hover { border-color: var(--gold); gap: 16px; }
.pb__cta-arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease-butter);
}
.pb__cta:hover .pb__cta-arrow { transform: translateX(4px); }

/* ---- Specific break sizing ---- */
.pb--1 { height: 52vh; }
.pb--2 { height: 58vh; }
.pb--3 { height: 48vh; }

/* ---- Responsive ---- */
@media (max-width: 680px) {
  .pb { height: auto; min-height: 260px; padding: 72px 0; }
  .pb__bg { top: 0; height: 100%; }
  /* 2026-06-10 (client request): the band is height:auto here, but the
     content stayed position:absolute — so a tall block (the careers
     copy) couldn't grow the band and overflow:hidden clipped the
     heading at the top. In-flow content lets the band size to fit. */
  .pb__content { position: static; inset: auto; }
  .pb__content--right { align-items: flex-start; text-align: left; padding-right: 24px; }
}

/* ============================================================
   RECENT TRANSACTIONS
   ============================================================ */
#transactions {
  background: var(--off-white);
  padding: clamp(90px, 11vw, 140px) 0 clamp(90px, 11vw, 140px) 6vw;
  overflow: hidden;
}
.transactions__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-right: 6vw;
  margin-bottom: 48px;
  flex-wrap: wrap;
  gap: 20px;
}
.transactions__heading {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.2vw, 4.4rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--navy);
}
.transactions__swiper {
  overflow: visible !important;
  cursor: grab;
}
.transactions__swiper:active { cursor: grabbing; }
.transactions__swiper .swiper-wrapper { align-items: stretch; }

.txn-card {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  min-height: 290px;
  border: 1px solid rgba(11,30,61,0.08);
  transition: border-color 0.35s, transform 0.4s var(--ease-butter), box-shadow 0.35s;
}
.txn-card:hover {
  border-color: rgba(11,30,61,0.2);
  box-shadow: 0 12px 40px rgba(11,30,61,0.1);
  transform: translateY(-5px);
}
.txn-card--cta {
  background: var(--navy);
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  justify-content: space-between;
}
.txn-card__tag {
  display: inline-flex;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  background: rgba(11,30,61,0.06);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  align-self: flex-start;
}
.txn-card--cta .txn-card__tag {
  background: rgba(255,255,255,0.1);
  color: var(--gold);
}
.txn-card__amount {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  font-weight: 600;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.022em;
}
.txn-card--cta .txn-card__amount { color: var(--white); }
.txn-card__desc {
  font-size: 0.87rem;
  color: #4a5568;
  line-height: 1.65;
  flex: 1;
}
.txn-card--cta .txn-card__desc { color: rgba(255,255,255,0.55); }
.txn-card__cta-label {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.2;
}
.btn-outline-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1.5px solid rgba(255,255,255,0.32);
  border-radius: var(--radius-pill);
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  transition: all 0.35s var(--ease-butter);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
}
.btn-outline-white svg { transition: transform 0.3s var(--ease-butter); }
.btn-outline-white:hover svg { transform: translateX(4px); }

/* ============================================================
   NEWS & INSIGHTS
   ============================================================ */
#news {
  background: var(--navy);
  padding: clamp(60px, 8vw, 100px) 6vw clamp(90px, 11vw, 140px);
  overflow: hidden;
}

/* ---- Section header ---- */
.news__hd {
  max-width: 1200px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 3vw, 48px);
  padding-bottom: clamp(22px, 3vw, 36px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.news__hd-eyebrow {
  font-family: var(--font-serif);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.7;
  white-space: nowrap;
}
.news__hd-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(2.2rem, 4vw, 4.2rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1;
  margin: 0;
  letter-spacing: -0.015em;
}
.news__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  align-items: start;
}
.news__sticky {
  position: sticky;
  top: 100px;
}
.news__cta-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  padding: 44px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.news__cta-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.2;
}
.news__cta-body {
  font-size: 0.87rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.68;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 28px;
  background: var(--white);
  color: var(--navy);
  border-radius: var(--radius-pill);
  font-size: 0.87rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.3s, color 0.3s, transform 0.35s var(--ease-butter);
}
.btn-primary:hover {
  background: var(--gold);
  color: var(--white);
  transform: translateY(-2px);
}
.btn-primary svg { transition: transform 0.3s var(--ease-butter); }
.btn-primary:hover svg { transform: translateX(4px); }

.news__list { list-style: none; }
.news-article {
  padding: 34px 0;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  cursor: pointer;
}
.news__list li:first-child .news-article {
  border-top: 1px solid rgba(255,255,255,0.09);
}
.news-article__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.news-article__tag {
  display: inline-flex;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.08);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.news-article__date {
  font-size: 0.75rem;
  color: var(--gray);
  margin-left: auto;
  letter-spacing: 0.03em;
}
.news-article__title {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.28;
  transition: color 0.3s;
}
.news-article:hover .news-article__title { color: var(--gold); }
.news-article__summary {
  font-size: 0.87rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 14px;
}
.news-article__arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: var(--gold);
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s, transform 0.35s var(--ease-butter);
}
.news-article:hover .news-article__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================================
   PARTNER CTA
   ============================================================ */
#partner-cta {
  position: relative;
  padding: clamp(90px, 11vw, 140px) 6vw;
  overflow: hidden;
}
.partner-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 140% 140% at 80% 50%, #1a4a9e 0%, #0b1e3d 55%, #060e1f 100%);
}
.partner-cta__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(-45deg,
      transparent, transparent 3px,
      rgba(255,255,255,0.018) 3px, rgba(255,255,255,0.018) 6px);
}
.partner-cta__card {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  background: var(--glass-bg);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  padding: clamp(52px, 7vw, 88px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.partner-cta__title {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.5vw, 4.5rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--white);
}
.partner-cta__right {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.partner-cta__body {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.72;
}

/* ============================================================
   FOOTER
   ============================================================ */
#footer {
  background: #090d18;
  padding: 64px 6vw 40px;
  color: var(--white);
}
.footer__inner { max-width: 1200px; margin: 0 auto; }
.footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 52px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 36px;
}
.footer__brand { }
.footer__logo-img {
  height: clamp(18px, 1.8vw, 26px);
  width: auto;
  display: block;
  margin-bottom: 10px;
  /* Footer is dark navy — invert the logo to white */
  filter: brightness(0) saturate(0) invert(1);
}
.footer__tagline {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.38);
  line-height: 1.62;
  max-width: 230px;
}
.footer__col-title {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 18px;
}
.footer__links { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer__links a {
  font-size: 0.86rem;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.3s;
}
.footer__links a:hover { color: var(--white); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}
.footer__disclaimer {
  font-size: 0.71rem;
  color: rgba(255,255,255,0.2);
  line-height: 1.72;
  max-width: 800px;
}
.footer__back-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.3s;
}
.footer__back-top:hover { opacity: 1; }
.footer__back-top span {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
}
.footer__back-top-circle {
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.3s, background 0.3s;
}
.footer__back-top:hover .footer__back-top-circle {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.05);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .solutions__panel-inner { grid-template-columns: 56px 1fr; }
  .solutions__divider, .solutions__items { display: none; }
  .solutions__title { font-size: clamp(2.2rem, 7vw, 3.6rem); }
  /* on narrow: extend photo full-width, restore white text */
  .solutions__panel::before { width: 100%; }
  .solutions__panel::after { display: none; }
  .solutions__meta { border-right-color: rgba(255,255,255,0.14); }
  .news__inner { grid-template-columns: 1fr; }
  .news__sticky { position: static; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .people__header { gap: 24px; }
}
@media (max-width: 768px) {
  .hero__content { grid-template-columns: 1fr; }
  .hero__right { align-items: flex-start; }
  .hero__para { text-align: left; max-width: 100%; }
  .stats__grid { display: none; }
  .stats__swiper { display: block; }
  .people__header { grid-template-columns: 1fr; }
  .solutions__panel-inner { padding: 0 24px; gap: 0 20px; }
  .solutions__meta { display: none; }
  /* 2026-06-10 (client request): with the meta rail hidden, the body
     was landing in the leftover 56px grid column — one-word-per-line
     text. Single full-width column, centred, with viewport-
     proportionate type so it reads easily at any age. Desktop/laptop
     (≥992px) untouched — these rules live only in this ≤768 block. */
  .solutions__panel-inner { grid-template-columns: 1fr; }
  .solutions__body {
    align-items: center;
    text-align: center;
    justify-content: center;
  }
  .solutions__num-sm { font-size: 0.78rem; margin-bottom: 12px; }
  .solutions__title {
    font-size: clamp(2.6rem, 11vw, 3.8rem);
    margin-bottom: 16px;
  }
  .solutions__tagline {
    font-size: clamp(1.02rem, 4.4vw, 1.25rem);
    line-height: 1.7;
    max-width: min(30ch, 88vw);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 14px;
    color: rgba(245,243,239,0.82);
  }
  /* 2026-06-10 (client request): the per-category service list was
     display:none ≤1024, so mobile panels showed only the title side.
     Re-enable it stacked under the copy. The desktop list is navy on
     the white half-panel; on mobile the photo runs full-width, so the
     list flips to white. Desktop (>768px) untouched. */
  .solutions__items {
    display: block;
    padding: 0;
    width: min(30ch, 88vw);
    margin: 0 auto;
    text-align: center;
    overflow: visible;
  }
  .solutions__items li {
    font-size: 1.06rem;
    line-height: 1.3;
    padding: 0.46em 0;
    color: rgba(255,255,255,0.92);
    border-bottom-color: rgba(255,255,255,0.18);
  }
  .solutions__items li:first-child { border-top-color: rgba(255,255,255,0.18); }
  .solutions__items li a:hover { padding-left: 0; color: #fff; }
  .partner-cta__card { grid-template-columns: 1fr; gap: 36px; }
  .footer__top { grid-template-columns: 1fr; gap: 28px; }
  #nav-pill { top: 18px; right: 18px; }
  #nav-panel { padding: 48px 6vw; }
  .nav-panel__footer { flex-wrap: wrap; gap: 18px; }
}


/* ============================================================
   MEGA-MENU — Precision Luxury Navigation
   ============================================================ */

/* Panel shell */
#nav-panel {
  display: flex;
  flex-direction: column;
  padding: 0;
  justify-content: stretch;
  background: #04080f;
}
#nav-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

/* Two-column wrapper */
.mega-menu {
  flex: 1;
  display: grid;
  grid-template-columns: 340px 1fr;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* LEFT PANEL */
.mega-menu__left {
  border-right: 1px solid rgba(255,255,255,0.06);
  padding: 0 36px 0 8vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Ghost ordinal number */
.mega-ghost-num {
  position: absolute;
  right: -12px;
  bottom: -24px;
  font-family: var(--font-serif);
  font-size: clamp(160px, 20vw, 340px);
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.045);
  line-height: 0.85;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.06em;
  z-index: 0;
  transition: opacity 0.35s ease;
}

/* Sliding gold indicator */
.nav-indicator {
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  background: linear-gradient(180deg, transparent 0%, var(--gold) 40%, var(--gold) 60%, transparent 100%);
  border-radius: 0 1px 1px 0;
  transition: top 0.38s var(--ease-butter), height 0.32s var(--ease-butter), opacity 0.28s;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

/* Counter badge */
.mega-panel-counter {
  position: absolute;
  top: 28px;
  right: 36px;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.18);
  z-index: 3;
  pointer-events: none;
}
.mega-panel-counter em {
  font-style: normal;
  color: var(--gold);
  font-weight: 600;
}

/* Nav list */
.mega-menu .nav-panel__links {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}
.mega-menu .nav-panel__links li { overflow: visible; }

/* Each item */
.mega-menu .nav-panel__links li a.mega-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  font-family: var(--font-serif);
  font-size: 1.55rem;        /* slightly smaller so long names fit */
  font-weight: 600;
  color: rgba(255,255,255,0.22);
  text-decoration: none;
  line-height: 1.15;
  letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  opacity: 0;
  transform: translateY(20px);
  transition: color 0.3s ease, opacity 0.4s ease, transform 0.45s var(--ease-butter);
  position: relative;
}
.mega-menu .nav-panel__links li:first-child a.mega-item {
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* Entrance */
#nav-panel.open .mega-menu .nav-panel__links li a.mega-item { opacity: 1; transform: translateY(0); }
#nav-panel.open .mega-menu .nav-panel__links li:nth-child(1) a { transition-delay: 0.05s; }
#nav-panel.open .mega-menu .nav-panel__links li:nth-child(2) a { transition-delay: 0.09s; }
#nav-panel.open .mega-menu .nav-panel__links li:nth-child(3) a { transition-delay: 0.13s; }
#nav-panel.open .mega-menu .nav-panel__links li:nth-child(4) a { transition-delay: 0.17s; }
#nav-panel.open .mega-menu .nav-panel__links li:nth-child(5) a { transition-delay: 0.21s; }

/* Ordinal number (injected by JS) */
.mega-item-num {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--gold);
  opacity: 0.35;
  width: 20px;
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 0.45em;
  transition: opacity 0.25s ease;
}

/* Label wrapper — wrap at word boundaries only, never mid-word */
.mega-item-label {
  flex: 1;
  transition: transform 0.32s var(--ease-butter);
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* Hover */
.mega-menu .nav-panel__links li a.mega-item:hover { color: rgba(255,255,255,0.7); letter-spacing: 0.005em; }
.mega-menu .nav-panel__links li a.mega-item:hover .mega-item-label { transform: translateX(5px); }
.mega-menu .nav-panel__links li a.mega-item:hover .mega-item-num { opacity: 0.85; }

/* Active */
.mega-menu .nav-panel__links li a.mega-item.active { color: var(--white); letter-spacing: -0.01em; }
.mega-menu .nav-panel__links li a.mega-item.active .mega-item-num { opacity: 1; color: var(--gold); }
.mega-menu .nav-panel__links li a.mega-item.active .mega-item-label { transform: translateX(5px); }

/* Chevron */
.mega-menu .nav-panel__links li a.mega-item::after {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg) translateX(-6px);
  opacity: 0;
  margin-left: auto;
  flex-shrink: 0;
  transition: opacity 0.24s ease, transform 0.28s var(--ease-butter);
}
.mega-menu .nav-panel__links li a.mega-item:hover::after,
.mega-menu .nav-panel__links li a.mega-item.active::after {
  opacity: 0.4;
  transform: rotate(45deg) translateX(0);
}

/* Cursor dot */
.nav-cursor-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.22s var(--ease-butter), opacity 0.25s;
  opacity: 0;
}
.nav-cursor-dot.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* RIGHT PANEL */
.mega-menu__right {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.mega-menu__right::before {
  content: '';
  position: absolute;
  left: 0; top: 15%; height: 70%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(184,150,110,0.18), transparent);
  pointer-events: none;
  z-index: 0;
}

/* Sub-panels */
.mega-sub-panel {
  position: absolute;
  inset: 0;
  padding: 44px 6vw 44px 5vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  opacity: 0;
  pointer-events: none;
  transform: translateX(18px);
  transition: opacity 0.3s ease, transform 0.38s var(--ease-butter);
  overflow-y: auto;
  overscroll-behavior: contain;  /* own scroll boundary — doesn't leak to page */
  z-index: 1;
}
.mega-sub-panel.active { opacity: 1; pointer-events: all; transform: translateX(0); }

/* ---- Panel eyebrow (small gold label) — injected by JS ---- */
.mega-panel-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s ease 0.03s, transform 0.32s var(--ease-butter) 0.03s;
  flex-shrink: 0;
}
.mega-sub-panel.active .mega-panel-eyebrow { opacity: 1; transform: translateY(0); }
.mega-panel-eyebrow::before {
  content: '';
  width: 20px; height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

/* ---- Panel title (large serif) — injected by JS ---- */
.mega-panel-title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 3.8vw, 3.6rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.32s ease 0.06s, transform 0.38s var(--ease-butter) 0.06s;
  flex-shrink: 0;
}
.mega-sub-panel.active .mega-panel-title { opacity: 1; transform: translateY(0); }

/* ---- Video band (350px placeholder) — injected by JS ---- */
.mega-panel-video-band {
  width: 100%;
  height: 350px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  margin-bottom: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.34s ease 0.09s, transform 0.4s var(--ease-butter) 0.09s;
}
.mega-panel-video-band::before {
  /* subtle diagonal grid pattern */
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 20px,
    rgba(255,255,255,0.018) 20px,
    rgba(255,255,255,0.018) 21px
  );
}
.mega-sub-panel.active .mega-panel-video-band { opacity: 1; transform: translateY(0); }

.mega-panel-video-band__label {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.mega-panel-video-band__label span {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.18);
}
.mega-panel-video-band__dot {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mega-panel-video-band__dot::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent rgba(255,255,255,0.2);
  margin-left: 2px;
}

.mega-sub-panel__hint {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-style: italic;
  color: rgba(255,255,255,0.14);
  line-height: 1.5;
  max-width: 340px;
}

/* ============================================================
   UNIFIED PANEL CONTENT SYSTEM
   One token set governs About, Services, Industries, Publications.
   No panel-specific overrides anywhere below this block.
   ============================================================ */

/* ------ Grid containers (all identical) ------ */
.mega-about-grid,
.mega-services-grid,
.mega-industries-grid {
  display: grid;
  gap: 0 32px;
  width: 100%;
  align-items: start;
}
.mega-about-grid      { grid-template-columns: repeat(2, 1fr); }
.mega-services-grid   { grid-template-columns: repeat(5, 1fr); }
.mega-industries-grid { grid-template-columns: repeat(5, 1fr); }

/* ------ Column unit ------ */
/* .mega-col used by About + Services */
/* .mega-sector-card used by Industries — styled identically */
.mega-col,
.mega-sector-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* card reset */
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  text-decoration: none;
  /* entrance animation */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.36s var(--ease-butter);
}

.mega-sub-panel.active .mega-col,
.mega-sub-panel.active .mega-sector-card              { opacity: 1; transform: translateY(0); }
.mega-sub-panel.active .mega-col:nth-child(1),
.mega-sub-panel.active .mega-sector-card:nth-child(1) { transition-delay: 0.04s; }
.mega-sub-panel.active .mega-col:nth-child(2),
.mega-sub-panel.active .mega-sector-card:nth-child(2) { transition-delay: 0.08s; }
.mega-sub-panel.active .mega-col:nth-child(3),
.mega-sub-panel.active .mega-sector-card:nth-child(3) { transition-delay: 0.12s; }
.mega-sub-panel.active .mega-col:nth-child(4),
.mega-sub-panel.active .mega-sector-card:nth-child(4) { transition-delay: 0.16s; }
.mega-sub-panel.active .mega-col:nth-child(5),
.mega-sub-panel.active .mega-sector-card:nth-child(5) { transition-delay: 0.20s; }

/* ------ Column header (gold rule) ------ */
.mega-col__header,
.mega-sector-card__title {
  font-family: var(--font-sans);
  font-size: 0.72rem;               /* clear, not competing with title */
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 11px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(184,150,110,0.25);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.22s ease;
}
.mega-col:hover .mega-col__header,
.mega-sector-card:hover .mega-sector-card__title {
  color: rgba(220,185,135,0.95);
}

/* ------ Item lists ------ */
.mega-list,
.mega-sector-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ------ Universal item text (+50% from 0.88rem → 1.32rem) ------ */
.mega-list li a,
.mega-sector-card__list li {
  display: block;
  padding: 7px 0;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 400;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  letter-spacing: 0.005em;
  line-height: 1.45;
  position: relative;
  transition: color 0.2s ease, padding-left 0.26s var(--ease-butter);
}

/* Gold needle underline on hover */
.mega-list li a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.26s var(--ease-butter);
}
.mega-list li a:hover        { color: var(--white); padding-left: 10px; }
.mega-list li a:hover::after { width: 36px; }

/* Industries card hover — brighten all items together */
.mega-sector-card:hover .mega-sector-card__list li { color: rgba(255,255,255,0.72); }

/* Footer bar */
#nav-panel > .nav-panel__footer {
  flex-shrink: 0;
  padding: 15px 8vw;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin: 0;
  z-index: 2;
  position: relative;
}

/* RESPONSIVE */
@media (max-width: 1280px) {
  .mega-menu            { grid-template-columns: 300px 1fr; }
  .mega-services-grid   { grid-template-columns: repeat(3, 1fr); }
  .mega-industries-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .mega-menu            { grid-template-columns: 260px 1fr; }
  .mega-menu .nav-panel__links li a.mega-item { font-size: 1.55rem; }
  .mega-services-grid   { grid-template-columns: repeat(2, 1fr); gap: 20px 24px; }
  .mega-industries-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 24px; }
  .mega-about-grid      { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  #nav-panel            { padding: 0 !important; overflow-y: auto; }
  .mega-menu            { display: block; overflow-y: visible; }
  .mega-menu__left      { border-right: none; padding: 52px 6vw 0; overflow: visible; }
  .mega-menu__right     { position: static; display: block; height: auto; overflow: visible; padding: 0 6vw; }
  .mega-sub-panel       { position: static; opacity: 1; pointer-events: all; transform: none; padding: 0; display: none; overflow: visible; transition: none; }
  .mega-sub-panel.active,
  .mega-sub-panel.mobile-open { display: block; padding: 8px 0 20px; }
  /* kill entrance animations on mobile */
  .mega-col, .mega-sector-card { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mega-panel-eyebrow   { display: none; }
  .mega-menu .nav-panel__links li a.mega-item { font-size: 1.35rem; padding: 14px 0; white-space: normal; }
  .mega-menu .nav-panel__links li a.mega-item::after { content: '+'; width: auto; height: auto; border: none; font-size: 1.1rem; font-weight: 300; transform: none; opacity: 1; margin-right: 4px; color: rgba(255,255,255,0.28); }
  .mega-menu .nav-panel__links li a.mega-item.active::after { content: '-'; }
  .mega-ghost-num, .nav-indicator, .mega-panel-counter, .nav-cursor-dot { display: none; }
  .mega-about-grid,
  .mega-services-grid,
  .mega-industries-grid { grid-template-columns: 1fr; gap: 20px 0; }
  #nav-panel > .nav-panel__footer { padding: 20px 6vw 32px; gap: 14px; }
}

/* ============================================================
   MISSION  —  CBR-inspired single-thought block
   White background (alternates with cream Who We Are above), one
   editorial line, italic gold accent words light up on scroll,
   inline arrow link. Generous vertical breathing room.
============================================================ */
#mission {
  background: var(--white, #ffffff);
  color: var(--navy);
  padding: clamp(120px, 17vw, 220px) 7vw;
  position: relative;
  overflow: hidden;
}
#mission::before {
  /* hairline rule top — subtle section delineation, navy at 8% */
  content: '';
  position: absolute;
  top: 0; left: 7vw; right: 7vw;
  height: 1px;
  background: rgba(11,30,61,0.08);
}
.mission__wrap {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.mission__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: clamp(40px, 6vw, 76px);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s var(--ease-butter), transform 0.8s var(--ease-butter);
}
.mission__eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
#mission.in-view .mission__eyebrow { opacity: 1; transform: translateY(0); }

.mission__statement {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5vw, 5rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--navy);
  margin: 0 auto clamp(56px, 7vw, 96px);
  max-width: 22ch;
}
/* Italic accent words — start navy, light up to gold AFTER line reveal */
.mission__statement em {
  font-style: italic;
  color: var(--navy);
  transition: color 0.65s ease;
}
.mission__statement em:nth-of-type(1) { transition-delay: 0.55s; }
.mission__statement em:nth-of-type(2) { transition-delay: 0.85s; }
#mission.lit .mission__statement em { color: var(--gold); }

/* Inline arrow link — restrained, expands gap on hover */
.mission__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  padding: 8px 0 10px;
  border-bottom: 1px solid rgba(11,30,61,0.22);
  transition:
    gap 0.42s var(--ease-butter),
    border-color 0.4s ease,
    color 0.3s ease;
  opacity: 0;
  transform: translateY(10px);
  transition-property: opacity, transform, gap, border-color;
  transition-duration: 0.7s, 0.8s, 0.42s, 0.4s;
  transition-timing-function: var(--ease-butter), var(--ease-butter), var(--ease-butter), ease;
  transition-delay: 0.4s, 0.4s, 0s, 0s;
}
#mission.in-view .mission__link { opacity: 1; transform: translateY(0); }
.mission__link:hover {
  gap: 22px;
  border-color: var(--gold);
  color: var(--navy);
}
.mission__link svg { display: block; }
.mission__link .mission__arrow {
  display: inline-flex;
  transition: transform 0.45s var(--ease-butter);
}
.mission__link:hover .mission__arrow { transform: translateX(6px); }

/* Responsive */
@media (max-width: 720px) {
  #mission { padding: clamp(80px, 18vw, 140px) 6vw; }
  .mission__statement { font-size: clamp(1.7rem, 7vw, 2.6rem); max-width: 18ch; }
  .mission__link { font-size: 0.72rem; letter-spacing: 0.14em; }
}

/* ============================================================
   SERVICE PILLARS  —  2×2 grid (CBR-inspired)
   White field, hairline dividers, oversized numerals,
   serif pillar names, partner-tone supporting copy.
============================================================ */
#pillars {
  background: #ffffff;
  color: var(--navy);
  padding: clamp(120px, 16vw, 200px) 7vw clamp(120px, 16vw, 200px);
  position: relative;
  overflow: hidden;
}
#pillars::before {
  content: '';
  position: absolute;
  top: 0; left: 7vw; right: 7vw;
  height: 1px;
  background: rgba(11,30,61,0.08);
}

.pillars__head {
  max-width: 1320px;
  margin: 0 auto clamp(64px, 8vw, 112px);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}

.pillars__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease-butter, cubic-bezier(0.16,1,0.3,1)),
              transform 0.7s var(--ease-butter, cubic-bezier(0.16,1,0.3,1));
  grid-column: 1;
  align-self: start;
  margin-top: 8px;
}
.pillars__eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
}
#pillars.in-view .pillars__eyebrow { opacity: 1; transform: translateY(0); }

.pillars__heading {
  grid-column: 2;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 5.6rem);
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin: 0;
  max-width: 14ch;
}
.pillars__heading em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

.pillars__lede {
  grid-column: 2;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  color: rgba(11,30,61,0.7);
  max-width: 42ch;
  margin: clamp(20px, 2.4vw, 32px) 0 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s 0.1s var(--ease-butter, cubic-bezier(0.16,1,0.3,1)),
              transform 0.7s 0.1s var(--ease-butter, cubic-bezier(0.16,1,0.3,1));
}
#pillars.in-view .pillars__lede { opacity: 1; transform: translateY(0); }

/* Grid */
.pillars__grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(11,30,61,0.1);
  border-left: 1px solid rgba(11,30,61,0.1);
}

.pillar {
  position: relative;
  display: block;
  padding: clamp(40px, 4.5vw, 72px) clamp(28px, 3.5vw, 56px) clamp(48px, 5vw, 80px);
  border-right: 1px solid rgba(11,30,61,0.1);
  border-bottom: 1px solid rgba(11,30,61,0.1);
  text-decoration: none;
  color: var(--navy);
  background: #ffffff;
  transition: background 0.5s var(--ease-butter, cubic-bezier(0.16,1,0.3,1));
  opacity: 0;
  transform: translateY(28px);
  overflow: hidden;
}
.pillar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px circle at var(--mx, 50%) var(--my, 50%), rgba(184,150,110,0.08), transparent 40%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.pillar:hover::after { opacity: 1; }
.pillar:hover { background: #fbfaf7; }

#pillars.in-view .pillar { opacity: 1; transform: translateY(0); transition: opacity 0.85s var(--ease-butter, cubic-bezier(0.16,1,0.3,1)), transform 0.85s var(--ease-butter, cubic-bezier(0.16,1,0.3,1)), background 0.5s ease; }
#pillars.in-view .pillar:nth-child(1) { transition-delay: 0.05s; }
#pillars.in-view .pillar:nth-child(2) { transition-delay: 0.15s; }
#pillars.in-view .pillar:nth-child(3) { transition-delay: 0.25s; }
#pillars.in-view .pillar:nth-child(4) { transition-delay: 0.35s; }

.pillar__num {
  display: block;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.3vw, 1.25rem);
  letter-spacing: 0.02em;
  color: var(--gold);
  margin-bottom: clamp(40px, 5vw, 72px);
  position: relative;
}
.pillar__num::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--gold);
  vertical-align: middle;
  margin-right: 14px;
  transform: translateY(-2px);
}

.pillar__name {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -0.018em;
  margin: 0 0 clamp(16px, 1.6vw, 22px);
  color: var(--navy);
  transition: color 0.4s ease;
}
.pillar:hover .pillar__name { color: #1a3566; }

.pillar__body {
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.65;
  color: rgba(11,30,61,0.72);
  margin: 0 0 clamp(28px, 3vw, 40px);
  max-width: 38ch;
}

.pillar__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  transition: gap 0.35s var(--ease-butter, cubic-bezier(0.16,1,0.3,1)),
              color 0.35s ease;
}
.pillar__arrow svg { display: block; }
.pillar:hover .pillar__cta { gap: 18px; color: var(--gold); }

/* Responsive */
@media (max-width: 900px) {
  .pillars__head {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .pillars__eyebrow,
  .pillars__heading,
  .pillars__lede { grid-column: 1; }
}
@media (max-width: 720px) {
  #pillars { padding: clamp(80px, 18vw, 140px) 6vw; }
  .pillars__heading { font-size: clamp(2rem, 8vw, 3.2rem); }
  .pillars__grid { grid-template-columns: 1fr; }
  .pillar { padding: clamp(36px, 9vw, 56px) clamp(24px, 6vw, 40px); }
  .pillar__num { margin-bottom: clamp(28px, 7vw, 48px); }
}

/* ============================================================
   SECTORS  —  Stacked sticky cinematic chapters
   Dark navy beneath; each chapter is a full-bleed pinned
   card with parallax image + hover-video swap. Corner
   brackets, cursor follower, asymmetric typography variants,
   progress rail.
============================================================ */
#sectors {
  position: relative;
  background: #06122a;
  color: var(--off-white);
  isolation: isolate;
  overflow: hidden;
}
#sectors::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 220px;
  background: linear-gradient(to bottom, #ffffff 0%, #06122a 100%);
  z-index: 1;
  pointer-events: none;
}

/* ---------- Opener ---------- */
.sectors__opener {
  position: relative;
  z-index: 2;
  padding: clamp(140px, 18vw, 240px) 7vw clamp(80px, 10vw, 140px);
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}
.sectors__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  grid-column: 1;
  align-self: start;
  margin-top: 8px;
}
.sectors__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
}
.sectors__heading {
  grid-column: 2;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.6vw, 6rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--off-white);
}
.sectors__heading em { font-style: italic; color: var(--gold); }
.sectors__lede {
  grid-column: 2;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.65;
  color: rgba(245,243,239,0.7);
  max-width: 46ch;
  margin: clamp(20px, 2.4vw, 32px) 0 0;
}
.sectors__scroll-cue {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,243,239,0.55);
  margin-top: clamp(48px, 8vw, 96px);
}
.sectors__scroll-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--gold), transparent);
  max-width: 220px;
  position: relative;
  overflow: hidden;
}
.sectors__scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  width: 60px;
  animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse {
  0% { transform: translateX(-60px); }
  100% { transform: translateX(220px); }
}

/* ---------- Sticky stack ---------- */
.sectors__stack {
  position: relative;
  z-index: 2;
}

.sector {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  z-index: var(--sector-z);
  cursor: none; /* gold dot replaces cursor */
}

/* ---------- Media layer ---------- */
.sector__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.sector__img,
.sector__video {
  position: absolute;
  inset: -8% -4%; /* slight oversize for parallax breathing room */
  width: 108%;
  height: 116%;
  object-fit: cover;
  will-change: transform;
}
.sector__img {
  filter: saturate(0.7) brightness(0.85) contrast(1.05);
  transition: filter 0.9s var(--ease-butter, cubic-bezier(0.16,1,0.3,1)),
              transform 0.9s var(--ease-butter, cubic-bezier(0.16,1,0.3,1));
}
.sector__video {
  opacity: 0;
  transition: opacity 0.85s var(--ease-butter, cubic-bezier(0.16,1,0.3,1));
  pointer-events: none;
}
.sector.is-active .sector__video { opacity: 0.55; }
.sector:hover .sector__img { filter: saturate(1.1) brightness(1) contrast(1); transform: scale(1.04); }
.sector:hover .sector__video { opacity: 0.85; }

.sector__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(6,18,42,0.51) 0%, rgba(6,18,42,0.27) 45%, rgba(6,18,42,0.45) 100%),
    radial-gradient(60% 50% at 50% 50%, transparent 0%, rgba(6,18,42,0.24) 100%);
  z-index: 1;
  transition: opacity 0.6s ease;
}
.sector:hover .sector__scrim { opacity: 0.47; }

.sector__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.93 0 0 0 0 0.87 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Corner brackets ---------- */
.sector__bracket {
  position: absolute;
  width: clamp(40px, 5vw, 72px);
  height: clamp(40px, 5vw, 72px);
  z-index: 3;
  pointer-events: none;
  transition: transform 0.7s var(--ease-butter, cubic-bezier(0.16,1,0.3,1)),
              opacity 0.6s ease;
  opacity: 0.6;
}
.sector__bracket--tl { top: 28px; left: 28px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); transform: translate(-8px,-8px); }
.sector__bracket--tr { top: 28px; right: 28px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); transform: translate(8px,-8px); }
.sector__bracket--bl { bottom: 28px; left: 28px; border-bottom: 1px solid var(--gold); border-left: 1px solid var(--gold); transform: translate(-8px,8px); }
.sector__bracket--br { bottom: 28px; right: 28px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); transform: translate(8px,8px); }
.sector:hover .sector__bracket { opacity: 1; transform: translate(0,0); }

/* ---------- Cursor follower ---------- */
.sector__cursor {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 1px rgba(184,150,110,0.3), 0 0 30px rgba(184,150,110,0.6);
  pointer-events: none;
  z-index: 6;
  left: 0; top: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.4s var(--ease-butter, cubic-bezier(0.16,1,0.3,1)),
              width 0.35s ease, height 0.35s ease;
  mix-blend-mode: difference;
}
.sector:hover .sector__cursor { transform: translate(var(--cx, 50%), var(--cy, 50%)) scale(1); }

/* ---------- Content (variants) ---------- */
.sector__content {
  position: absolute;
  z-index: 4;
  padding: clamp(40px, 5vw, 72px);
  max-width: clamp(420px, 48vw, 680px);
  pointer-events: none; /* let cursor track through */
}
.sector__content > * { pointer-events: auto; }
.sector--tl .sector__content { top: 0; left: 0; }
.sector--tr .sector__content { top: 0; right: 0; text-align: right; }
.sector--bl .sector__content { bottom: 0; left: 0; }
.sector--br .sector__content { bottom: 0; right: 0; text-align: right; }
.sector--c  .sector__content { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; max-width: 720px; }

.sector__row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: clamp(24px, 3vw, 40px);
  justify-content: inherit;
}
.sector--tr .sector__row,
.sector--br .sector__row { flex-direction: row-reverse; }
.sector--c  .sector__row { justify-content: center; }

.sector__numeral {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3.5rem, 7vw, 7rem);
  line-height: 0.8;
  color: var(--gold);
  letter-spacing: -0.02em;
  display: inline-block;
  position: relative;
}
.sector__numeral::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-butter, cubic-bezier(0.16,1,0.3,1));
}
.sector.is-active .sector__numeral::after { transform: scaleX(1); }

.sector__chapter {
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245,243,239,0.6);
}

.sector__name {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-weight: 400;
  font-size: clamp(2.8rem, 7.5vw, 8rem);
  line-height: 0.96;
  letter-spacing: -0.028em;
  margin: 0 0 clamp(20px, 2vw, 28px);
  color: var(--off-white);
  display: flex;
  flex-wrap: wrap;
  gap: 0.18em;
  align-items: baseline;
}
.sector--tr .sector__name,
.sector--br .sector__name { justify-content: flex-end; }
.sector--c  .sector__name { justify-content: center; }
.sector__word--em { font-style: italic; color: var(--gold); }
.sector__amp {
  font-style: italic;
  color: var(--gold);
  opacity: 0.8;
  font-size: 0.78em;
  font-weight: 300;
  transform: translateY(-0.06em);
}

.sector__tag {
  display: inline-block;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,243,239,0.7);
  margin-bottom: clamp(28px, 3vw, 40px);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(184,150,110,0.35);
}

/* Services list */
.sector__services {
  list-style: none;
  margin: 0 0 clamp(28px, 3vw, 40px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 28px;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: 0.92rem;
  color: rgba(245,243,239,0.85);
}
.sector--c .sector__services {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
}
.sector__services li {
  position: relative;
  padding-left: 18px;
  line-height: 1.6;
  transition: color 0.3s ease, transform 0.4s var(--ease-butter, cubic-bezier(0.16,1,0.3,1));
}
.sector__services li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--gold);
  transition: width 0.4s var(--ease-butter, cubic-bezier(0.16,1,0.3,1));
}
.sector__services li:hover { color: var(--gold); transform: translateX(4px); }
.sector__services li:hover::before { width: 14px; }
.sector--c .sector__services li { padding-left: 0; }
.sector--c .sector__services li::before { display: none; }

/* CTA link */
.sector__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--off-white);
  text-decoration: none;
  padding: 14px 22px;
  border: 1px solid rgba(245,243,239,0.25);
  border-radius: 999px;
  background: rgba(11,30,61,0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: gap 0.4s var(--ease-butter, cubic-bezier(0.16,1,0.3,1)),
              border-color 0.4s ease, color 0.4s ease, background 0.4s ease;
}
.sector__link:hover {
  gap: 20px;
  color: #06122a;
  background: var(--gold);
  border-color: var(--gold);
}
.sector__link svg { display: block; }

/* Credit line */
.sector__credit {
  position: absolute;
  z-index: 4;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245,243,239,0.45);
  pointer-events: none;
}
.sector--tl .sector__credit { bottom: 28px; left: 28px; }
.sector--tr .sector__credit { bottom: 28px; left: 28px; }
.sector--bl .sector__credit { top: 28px; right: 28px; }
.sector--br .sector__credit { top: 28px; left: 28px; }
.sector--c  .sector__credit { top: 28px; left: 28px; }

/* ---------- Progress rail ---------- */
.sectors__rail {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.sectors__rail.is-visible { opacity: 1; pointer-events: auto; }

.sectors__rail-dot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 0;
  color: rgba(245,243,239,0.55);
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  transition: color 0.3s ease;
}
.sectors__rail-num {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 0.85rem;
  width: 18px;
  text-align: right;
}
.sectors__rail-label {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}
.sectors__rail-line {
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  transition: width 0.4s var(--ease-butter, cubic-bezier(0.16,1,0.3,1));
}
.sectors__rail-dot:hover { color: var(--off-white); }
.sectors__rail-dot:hover .sectors__rail-label { opacity: 1; transform: translateX(0); }
.sectors__rail-dot:hover .sectors__rail-line { width: 36px; }
.sectors__rail-dot.is-active { color: var(--gold); }
.sectors__rail-dot.is-active .sectors__rail-line { width: 44px; }
.sectors__rail-dot.is-active .sectors__rail-label { opacity: 1; transform: translateX(0); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .sectors__opener {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .sectors__eyebrow,
  .sectors__heading,
  .sectors__lede,
  .sectors__scroll-cue { grid-column: 1; }
  .sectors__rail { display: none; }
}
@media (max-width: 720px) {
  .sectors__opener { padding: clamp(110px, 22vw, 180px) 6vw clamp(60px, 12vw, 100px); }
  .sector { cursor: auto; }
  .sector__cursor { display: none; }
  .sector__content { max-width: 90vw; padding: clamp(28px, 7vw, 48px); }
  .sector__name { font-size: clamp(2.4rem, 12vw, 4rem); }
  .sector__numeral { font-size: clamp(2.8rem, 14vw, 4.4rem); }
  .sector__services { grid-template-columns: 1fr; font-size: 0.85rem; }
  .sector--c .sector__services { grid-template-columns: 1fr; }
  .sector__bracket { width: 28px; height: 28px; }
  .sector__bracket--tl, .sector__bracket--tr { top: 16px; }
  .sector__bracket--bl, .sector__bracket--br { bottom: 16px; }
  .sector__bracket--tl, .sector__bracket--bl { left: 16px; }
  .sector__bracket--tr, .sector__bracket--br { right: 16px; }
}

/* ============================================================
   NUMBERS BAND  —  Phase 1 of merged homepage rebuild
   Dark navy field, oversized serif numerals, restrained grid,
   editorial eyebrow, marquee close-out.
============================================================ */
#numbers-band {
  position: relative;
  padding: clamp(96px, 12vw, 168px) 0 0;
  background-color: #0a1a36;
  background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1920&q=70');
  background-size: cover;
  background-position: center;
  color: #ffffff;
  overflow: hidden;
  isolation: isolate;
}
#numbers-band::before {
  content: "";
  position: absolute; inset: 0;
  background:
    /* Navy overlay — keeps image subtle */
    linear-gradient(rgba(10,26,54,0.87), rgba(10,26,54,0.87)),
    /* Gold accent radials on top */
    radial-gradient(60% 50% at 18% 0%, rgba(184,150,110,0.18), transparent 70%),
    radial-gradient(48% 40% at 82% 100%, rgba(184,150,110,0.10), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.nb__grain {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

.nb__intro {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 96px);
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(56px, 7vw, 96px);
}
.nb__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,243,239,0.62);
  padding-bottom: 14px;
}
.nb__eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold, #b8966e);
  box-shadow: 0 0 0 4px rgba(184,150,110,0.18);
}
.nb__eyebrow-rule {
  flex: 0 0 32px;
  height: 1px;
  background: rgba(245,243,239,0.28);
}
.nb__eyebrow-year {
  color: rgba(245,243,239,0.46);
  font-style: italic;
  letter-spacing: 0.18em;
}
.nb__heading {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: #ffffff;
  margin: 0;
}
.nb__heading em {
  font-style: italic;
  color: var(--gold, #b8966e);
  font-weight: 500;
}
.nb__heading-soft {
  display: block;
  margin-top: 0.35em;
  color: rgba(245,243,239,0.58);
  font-size: 0.62em;
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: 0;
  max-width: 56ch;
}

.nb__grid {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 96px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(245,243,239,0.12);
  border-left: 1px solid rgba(245,243,239,0.12);
}
.nb__cell {
  position: relative;
  padding: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 40px) clamp(40px, 4.6vw, 60px);
  border-right: 1px solid rgba(245,243,239,0.08);
  border-bottom: 1px solid rgba(245,243,239,0.08);
  display: flex;
  flex-direction: column;
  min-height: 280px;
  /* Glassmorphic cell — layered frost on the dark navy section */
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.5s ease, box-shadow 0.5s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.nb__cell:hover {
  background: rgba(255,255,255,0.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08),
              0 0 40px rgba(184,150,110,0.07);
}
.nb__index {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: rgba(245,243,239,0.42);
  margin-bottom: clamp(20px, 3vw, 36px);
}
.nb__figure {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  line-height: 0.92;
  color: #ffffff;
  margin-bottom: clamp(20px, 2.4vw, 28px);
  letter-spacing: -0.04em;
}
.nb__num {
  font-size: clamp(64px, 7.2vw, 112px);
  font-feature-settings: "lnum" 1, "tnum" 0;
  display: inline-block;
  /* hide the digit until JS counter starts -- prevents the "0" flash */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nb__cell.in-view .nb__num {
  opacity: 1;
  transform: translateY(0);
}
.nb__suffix {
  font-size: clamp(28px, 3vw, 44px);
  color: var(--gold, #b8966e);
  font-style: italic;
  font-weight: 500;
  margin-left: 2px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}
.nb__cell.in-view .nb__suffix { opacity: 1; transform: translateY(0); }
.nb__rule {
  width: 28px;
  height: 1px;
  background: var(--gold, #b8966e);
  margin-bottom: 16px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s;
}
.nb__cell.in-view .nb__rule { transform: scaleX(1); }
.nb__label {
  font-family: "Inter", sans-serif;
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #ffffff;
  margin-bottom: 8px;
}
.nb__caption {
  font-family: "Inter", sans-serif;
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(245,243,239,0.62);
  margin-top: auto;
  max-width: 30ch;
}

.nb__marquee {
  position: relative;
  z-index: 2;
  margin-top: clamp(72px, 9vw, 120px);
  padding: clamp(28px, 3.4vw, 44px) 0;
  border-top: 1px solid rgba(245,243,239,0.14);
  border-bottom: 1px solid rgba(245,243,239,0.14);
  overflow: hidden;
  white-space: nowrap;
}
.nb__marquee-track {
  display: inline-flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 56px);
  color: #ffffff;
  letter-spacing: -0.01em;
  animation: nbMarquee 32s linear infinite;
  will-change: transform;
}
.nb__marquee-dot {
  color: var(--gold, #b8966e);
  font-size: 0.5em;
  vertical-align: middle;
}
@keyframes nbMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 980px) {
  .nb__intro {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 24px;
  }
  .nb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nb__cell { min-height: 220px; }
}
@media (max-width: 600px) {
  .nb__grid { grid-template-columns: 1fr; }
  .nb__cell { min-height: auto; padding: 36px 24px; }
}



/* ============================================================
   TOP BAR + MEGA PANELS  (premium hover-driven nav)
============================================================ */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 18px clamp(20px, 3.6vw, 56px);
  font-family: var(--font-sans);
  color: rgba(255,255,255,0.92);
  background: linear-gradient(to bottom, rgba(11,30,61,0.33) 0%, rgba(11,30,61,0.0) 100%);
  transition: background 0.45s ease, backdrop-filter 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease, color 0.4s ease;
  border-bottom: 1px solid transparent;
}
.topbar[data-state="scrolled"] {
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: rgba(11,30,61,0.08);
  box-shadow: 0 6px 28px rgba(11,30,61,0.06);
  color: var(--navy);
}
.topbar.is-mega-open {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: rgba(11,30,61,0.06);
  color: var(--navy);
}

/* Logo — PNG image mark */
.topbar__logo {
  /* Anchor is the positioning context for the two stacked logo
     images (white over dark hero, colour over scrolled bar). */
  position: relative;
  display: inline-flex; align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.topbar__logo-img {
  /* New logos include the "A Member of KGS Alliance" tagline below
     the main wordmark, so the image is ~1.9× taller per unit width
     than the previous wordmark-only logo (4.47:1 vs 8.46:1 aspect).
     Bumping the display height by ~1.7× restores the K&P wordmark
     itself to roughly the size it was with the previous logo. */
  height: clamp(34px, 3.4vw, 48px);
  width: auto;
  display: block;
  transition: opacity 0.4s ease;
}
/* The colour logo is the "real" element — drives the anchor's layout
   width — and is visible by default (scrolled/light-bar state). */
.topbar__logo-img--color {
  position: relative;
  z-index: 1;
}
/* The white logo is absolutely positioned ON TOP, hidden by default. */
.topbar__logo-img--white {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}
/* Over the dark hero (top of page, no mega-panel open):
   show the white logo, hide the colour one. */
.topbar[data-state="top"]:not(.is-mega-open) .topbar__logo-img--white { opacity: 1; }
.topbar[data-state="top"]:not(.is-mega-open) .topbar__logo-img--color { opacity: 0; }

/* Centre nav */
.topbar__nav { justify-self: center; }
.topbar__nav ul {
  display: inline-flex; align-items: center;
  gap: clamp(6px, 1.4vw, 22px);
  margin: 0; padding: 0; list-style: none;
}
.topbar__nav-item { position: static; }
.topbar__nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  font-size: 0.88rem; font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  color: inherit;
  border-radius: 999px;
  transition: color 0.3s ease, background 0.3s ease;
  white-space: nowrap;
}
.topbar__nav-link:hover { color: var(--navy); background: rgba(11,30,61,0.06); }
.topbar[data-state="top"]:not(.is-mega-open) .topbar__nav-link:hover { color: #fff; background: rgba(255,255,255,0.10); }

.topbar__nav-caret { opacity: 0.7; transition: transform 0.3s ease, opacity 0.3s ease; }
.topbar__nav-item.is-open .topbar__nav-caret { transform: rotate(180deg); opacity: 1; }
.topbar__nav-item.is-open > .topbar__nav-link { color: var(--navy); background: rgba(11,30,61,0.06); }

/* Right cluster */
.topbar__right {
  display: inline-flex; align-items: center; gap: 14px;
  justify-self: end;
}
.topbar__phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem; font-weight: 500;
  color: inherit; text-decoration: none;
  padding: 6px 10px; border-radius: 999px;
  transition: opacity 0.3s ease;
  /* Keep phone number on a single line on laptop widths where the
     nav cluster runs out of horizontal slack. */
  white-space: nowrap;
  flex-shrink: 0;
}
.topbar__phone svg { opacity: 0.7; flex-shrink: 0; }
.topbar__phone:hover { opacity: 0.85; }
.topbar__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.01em;
  color: inherit; text-decoration: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
/* On tighter laptops (1024–1280) trim padding so all three (nav + phone + CTA)
   fit on one row instead of wrapping. */
@media (max-width: 1280px) {
  .topbar__phone { padding: 6px 8px; font-size: 0.82rem; }
  .topbar__cta   { padding: 10px 18px; font-size: 0.82rem; }
  .topbar__right { gap: 10px; }
}
.topbar__cta:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Burger */
.topbar__burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 4px;
  width: 38px; height: 38px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  padding: 10px;
}
.topbar__burger span {
  display: block; height: 1.5px; width: 100%; background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.topbar.is-mobile-open .topbar__burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.topbar.is-mobile-open .topbar__burger span:nth-child(2) { opacity: 0; }
.topbar.is-mobile-open .topbar__burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Mega panels — fixed sibling of the topbar, anchored just below it.
   --topbar-h is set by JS to the bar's measured height so the panel
   always docks against the bar regardless of viewport / breakpoint. */
.megapanels {
  position: fixed;
  top: var(--topbar-h, 64px);
  left: 0; right: 0;
  z-index: 199;
  pointer-events: none;
}
.megapanel {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid rgba(11,30,61,0.08);
  box-shadow: 0 24px 60px rgba(11,30,61,0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0.28s;
  pointer-events: none;
  /* Strictly content-driven — no max-height, no overflow scrollbar. */
  height: auto;
}

/* ──────────────────────────────────────────────────────────
   Close button — sits at top-right inside the open panel
────────────────────────────────────────────────────────── */
.megapanel__close {
  position: absolute;
  top: 14px; right: clamp(20px, 4vw, 56px);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--navy);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  z-index: 5;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.megapanel__close:hover {
  background: #fff;
  color: var(--navy);
}
.megapanel__close svg { display: block; transition: transform 0.3s ease; }
.megapanel__close:hover svg { transform: rotate(90deg); }
.megapanel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0s;
}
.megapanel__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1.05fr 1fr;
  grid-auto-rows: max-content;            /* row height = content, never stretches */
  gap: clamp(20px, 2.2vw, 40px);
  align-items: start;
  align-content: start;
  justify-items: stretch;
  max-width: 1480px;
  margin: 0 auto;
  padding: 28px clamp(28px, 4vw, 56px) clamp(28px, 3vw, 40px);
  min-height: 0;
}
/* Defensive: every direct child of the inner grid must be content-sized
   and start-aligned, so nothing can stretch the row to fill the panel. */
.megapanel__inner > * {
  align-self: start;
  height: auto;
  min-height: 0;
}

/* Cols 1-2: feature cards */
.megapanel__feats {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 1.6vw, 24px);
}
.megafeat {
  position: relative;
  display: flex; flex-direction: column;
  text-decoration: none;
  color: var(--navy);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s ease;
}
.megafeat:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(11,30,61,0.16); }
.megafeat__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: rgba(11,30,61,0.05);
  overflow: hidden;
  margin-bottom: 16px;
  border-radius: 12px;
}
.megafeat__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.4s cubic-bezier(0.16,1,0.3,1);
}
.megafeat:hover .megafeat__media img { transform: scale(1.07); }
.megafeat__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,30,61,0.19) 0%, transparent 55%);
  opacity: 0; transition: opacity 0.4s ease;
}
.megafeat:hover .megafeat__scrim { opacity: 1; }
.megafeat__cat {
  display: inline-block;
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 4px 6px;
}
.megafeat__title {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.15vw, 1.22rem);
  font-weight: 500; line-height: 1.3;
  margin: 0 4px 14px; color: var(--navy);
}
.megafeat__cta {
  display: inline-flex; align-items: center; gap: 6px;
  /* Was margin: auto 4px 4px — the `auto` top stretched the parent
     flex card to fill the grid row and dragged the panel taller. */
  margin: 4px 4px 4px;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--navy);
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.megafeat:hover .megafeat__cta { opacity: 1; transform: translateX(0); }

/* Col 3: text links */
.megapanel__links { display: flex; flex-direction: column; }
.megapanel__col-eyebrow {
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(11,30,61,0.5);
  margin-bottom: 18px;
}
.megapanel__links ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px; flex: 1;
}
.megalink {
  position: relative;
  display: block;
  padding: 14px 12px 14px 18px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--navy);
  transition: background 0.3s ease;
}
.megalink__accent {
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 0;
  background: var(--navy);
  transform: translateY(-50%);
  transition: height 0.4s cubic-bezier(0.16,1,0.3,1);
}
.megalink:hover { background: rgba(11,30,61,0.04); }
.megalink:hover .megalink__accent { height: 70%; }
.megalink__title {
  display: block;
  font-size: 0.95rem; font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: 3px;
}
.megalink__sub {
  display: block;
  font-size: 0.78rem; font-weight: 400;
  color: rgba(11,30,61,0.6);
  line-height: 1.45;
}

/* Col 4: newsletter */
.megapanel__news {
  background: #f6f6f4;
  border-radius: 14px;
  padding: clamp(22px, 2vw, 32px);
  display: flex; flex-direction: column;
  gap: 14px;
}
.meganews__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(11,30,61,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--navy);
  margin-bottom: 4px;
}
.meganews__title {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.15vw, 1.22rem);
  font-weight: 500; line-height: 1.3;
  color: var(--navy); margin: 0;
}
.meganews__sub {
  font-size: 0.85rem; line-height: 1.55;
  color: rgba(11,30,61,0.65); margin: 0;
}
.meganews__cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;          /* fixed gap — no flex push-to-bottom */
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--navy);
  border-radius: 999px;
  font-size: 0.85rem; font-weight: 500;
  color: var(--navy); text-decoration: none;
  align-self: flex-start;
  transition: background 0.3s ease, color 0.3s ease, gap 0.3s ease;
}
.meganews__cta:hover { background: var(--navy); color: #fff; gap: 14px; }

/* Stagger entrance */
.megapanel.is-open .megafeat,
.megapanel.is-open .megalink,
.megapanel.is-open .megapanel__news {
  animation: megaFadeUp 0.5s cubic-bezier(0.16,1,0.3,1) both;
}
.megapanel.is-open .megafeat:nth-child(1) { animation-delay: 0.04s; }
.megapanel.is-open .megafeat:nth-child(2) { animation-delay: 0.10s; }
.megapanel.is-open .megalink:nth-child(1) { animation-delay: 0.14s; }
.megapanel.is-open .megalink:nth-child(2) { animation-delay: 0.18s; }
.megapanel.is-open .megalink:nth-child(3) { animation-delay: 0.22s; }
.megapanel.is-open .megalink:nth-child(4) { animation-delay: 0.26s; }
.megapanel.is-open .megalink:nth-child(5) { animation-delay: 0.30s; }
.megapanel.is-open .megapanel__news       { animation-delay: 0.20s; }
@keyframes megaFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MEGAPANEL — SPREAD LAYOUT
   Used by Services (and any future menu with many sub-items).
   6 columns of grouped text-links, with a small header above.
============================================================ */
.megapanel__inner--spread {
  display: block;                       /* override the compact grid */
  padding: clamp(28px, 3vw, 44px) clamp(28px, 4vw, 56px);
  min-height: 0;
}
.megaspread__head {
  display: flex; align-items: baseline;
  gap: 16px;
  padding-bottom: clamp(18px, 2vw, 28px);
  margin-bottom: clamp(20px, 2vw, 28px);
  border-bottom: 1px solid rgba(11,30,61,0.08);
}
.megaspread__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  flex-shrink: 0;
}
.megaspread__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0;
}

.megaspread__cols {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(20px, 2vw, 32px);
}
.megaspread__col {
  display: flex; flex-direction: column;
  gap: 10px;
}
.megaspread__col-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--navy);
  margin: 0 0 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(184,150,110,0.45);
}

.megaspread__list { list-style: none; margin: 0; padding: 0; }
.megaspread__list li + li { margin-top: 2px; }

.megaspread__link {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 7px 10px 7px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  line-height: 1.35;
  color: rgba(11,30,61,0.78);
  transition: background 0.3s ease, color 0.3s ease, padding 0.35s ease;
}
.megaspread__link::before {
  /* Subtle left accent that grows on hover */
  content: "";
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 2px; height: 0;
  background: var(--gold);
  border-radius: 2px;
  transition: height 0.35s cubic-bezier(0.16,1,0.3,1);
}
.megaspread__link-text { flex: 1; min-width: 0; }
.megaspread__link-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: transparent;
  color: rgba(11,30,61,0.4);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1), background 0.3s ease, color 0.3s ease;
}
.megaspread__link:hover {
  background: #f7f5f0;
  color: var(--navy);
  padding-left: 16px;
}
.megaspread__link:hover::before { height: 60%; }
.megaspread__link:hover .megaspread__link-arrow {
  opacity: 1;
  transform: translateX(0);
  background: var(--gold);
  color: #0b1e3d;
}

/* ============================================================
   SPREAD + PREVIEW VARIANT (Industries)
   Column links on the LEFT, image preview pane on the RIGHT.
   Image cross-fades when hovering over different columns.
============================================================ */
.megapanel__inner--spread-preview .megaspread__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 360px);
  gap: clamp(20px, 2.5vw, 36px);
  align-items: stretch;
}
.megapanel__inner--spread-preview .megaspread__cols {
  grid-template-columns: repeat(5, 1fr);
}

/* Industry-column hover affordance */
.megaspread__col.has-preview {
  border-radius: 10px;
  transition: background 0.4s ease;
  padding: 6px 6px 8px;
  margin: -6px -6px -8px;
}
.megaspread__col.has-preview:hover {
  background: rgba(184,150,110,0.06);
}

/* Column title that links to the industry main page */
.megaspread__col-title--link {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  text-decoration: none;
  transition: color 0.3s ease, gap 0.3s ease;
}
.megaspread__col-title--link svg {
  color: rgba(11,30,61,0.4);
  transition: color 0.3s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.megaspread__col-title--link:hover {
  color: var(--gold);
  gap: 12px;
}
.megaspread__col-title--link:hover svg {
  color: var(--gold);
  transform: rotate(0deg) scale(1.1);
}

/* Preview pane on the right */
.megaspread__preview {
  position: relative;
  display: flex; flex-direction: column;
  gap: 14px;
}
.megaspread__preview-media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: #ececea;
  flex: 1 1 auto;
  box-shadow: 0 18px 40px -22px rgba(11,30,61,0.30);
}
.megaspread__preview-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease, transform 1.4s cubic-bezier(0.16,1,0.3,1);
  transform: scale(1.06);
}
.megaspread__preview-media img.is-swapping { opacity: 0.4; }
.megaspread__preview-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(184,150,110,0.20), transparent 55%),
    linear-gradient(180deg, rgba(11,30,61,0) 50%, rgba(11,30,61,0.55) 100%);
  pointer-events: none;
}
.megaspread__preview-cap {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 0 4px 4px;
}
.megaspread__preview-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.megaspread__preview-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--navy);
  letter-spacing: -0.005em;
  transition: opacity 0.3s ease;
}
.megaspread__preview-title.is-swapping { opacity: 0.4; }

/* ============================================================
   SECTORS VARIANT (Industries) — big vertical heading list on
   the LEFT, image preview pane on the RIGHT. Hovering a heading
   cross-fades the preview (reuses .megaspread__preview-* + the
   data-mega-img / data-mega-preview-img JS hooks).
============================================================ */
.megapanel__inner--sectors {
  display: block;                       /* override the compact 4-col grid */
  /* Top padding matched to .megapanel__inner--spread (Services) so the
     eyebrow/title start at the same height across both panels. 2026-06-11. */
  padding: clamp(28px, 3vw, 44px) clamp(28px, 4vw, 56px);
  min-height: 0;
}
.megasectors__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 24vw, 380px);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.megasectors__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Shorter preview so the panel doesn't tower over the page behind it */
.megasectors__preview .megaspread__preview-media {
  aspect-ratio: 5 / 4;
  max-height: 340px;
}
.megasectors__list li + li { border-top: 1px solid rgba(11,30,61,0.08); }
.megasector {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 22px);
  /* Tighter rows (2026-06-11) so all 7 sectors fit in view without the
     last item(s) being clipped by the panel/viewport edge. */
  padding: clamp(7px, 0.8vw, 11px) 6px;
  text-decoration: none;
  color: var(--navy);
  position: relative;
  transition: padding-left 0.45s cubic-bezier(0.16,1,0.3,1), color 0.3s ease;
}
.megasector__index {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: rgba(11,30,61,0.35);
  min-width: 24px;
  transition: color 0.3s ease;
}
.megasector__name {
  flex: 1;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.55vw, 1.6rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}
.megasector__arrow {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(11,30,61,0.16);
  color: var(--navy);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1),
              background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.megasector__arrow svg { width: 13px; height: 13px; display: block; }
.megasector:hover {
  color: var(--gold);
  padding-left: clamp(14px, 1.4vw, 22px);
}
.megasector:hover .megasector__name,
.megasector:hover .megasector__index { color: var(--gold); }
.megasector:hover .megasector__arrow {
  opacity: 1;
  transform: translateX(0);
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}
.megasectors__preview {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Responsive */
@media (max-width: 1100px) {
  .megasectors__body { grid-template-columns: 1fr; }
  .megasectors__preview { display: none; }
}
@media (max-width: 600px) {
  .megasector__name { font-size: 1.25rem; }
}

/* Responsive */
@media (max-width: 1280px) {
  .megaspread__cols { grid-template-columns: repeat(4, 1fr); }
  .megapanel__inner--spread-preview .megaspread__body {
    grid-template-columns: 1fr;
  }
  .megapanel__inner--spread-preview .megaspread__cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .megaspread__preview { display: none; }
}
@media (max-width: 980px) {
  .megaspread__cols { grid-template-columns: repeat(3, 1fr); }
  .megapanel__inner--spread-preview .megaspread__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .megaspread__cols { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .megapanel__inner--spread-preview .megaspread__cols { grid-template-columns: repeat(2, 1fr); }
  .megaspread__head { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width: 460px) {
  .megaspread__cols { grid-template-columns: 1fr; }
  .megapanel__inner--spread-preview .megaspread__cols { grid-template-columns: 1fr; }
}


/* Responsive */
@media (max-width: 1100px) {
  .megapanel__inner { grid-template-columns: 1fr 1fr 1fr; }
  .megapanel__feats { grid-column: span 2; }
  .megapanel__news  { display: none; }
}
@media (max-width: 900px) {
  .topbar__nav, .topbar__phone { display: none; }
  .topbar__burger { display: inline-flex; }
  .topbar__cta { display: none; }
  .topbar { grid-template-columns: 1fr auto; }
  .topbar__right { gap: 8px; }

  .megapanels { position: fixed; top: 64px; left: 0; right: 0; bottom: 0; max-height: calc(100vh - 64px); overflow: auto; }
  .megapanel  { position: relative; box-shadow: none; border-bottom: 1px solid rgba(11,30,61,0.08); }
  .megapanel__inner {
    grid-template-columns: 1fr;
    padding: 24px 24px 32px;
    min-height: 0;
    gap: 20px;
  }
  .megapanel__feats { grid-column: span 1; grid-template-columns: 1fr; }
  .megafeat__media { aspect-ratio: 21 / 9; }

  /* ── Mobile menu open ───────────────────────────────────────────
     When the hamburger is tapped, slide the nav DOWN from the topbar
     as a stacked accordion. Tapping a top-level item then opens its
     mega panel via the click handler in home.js. */
  .topbar.is-mobile-open .topbar__nav {
    display: block;
    position: fixed;
    top: var(--topbar-h, 64px);
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid rgba(11,30,61,0.08);
    box-shadow: 0 8px 28px -8px rgba(11,30,61,0.18);
    padding: 6px 0;
    z-index: 90;
    max-height: calc(100vh - var(--topbar-h, 64px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .topbar.is-mobile-open .topbar__nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .topbar.is-mobile-open .topbar__nav-item {
    width: 100%;
    border-bottom: 1px solid rgba(11,30,61,0.06);
  }
  .topbar.is-mobile-open .topbar__nav-item:last-child { border-bottom: none; }
  .topbar.is-mobile-open .topbar__nav-link {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-radius: 0;
    font-size: 1.02rem;
    color: var(--navy);
    background: transparent;
  }
  .topbar.is-mobile-open .topbar__nav-link:hover,
  .topbar.is-mobile-open .topbar__nav-link:active {
    background: rgba(11,30,61,0.04);
    color: var(--navy);
  }
  .topbar.is-mobile-open .topbar__nav-item.is-open .topbar__nav-caret {
    transform: rotate(180deg);
  }
}
body.has-mobile-nav-open { overflow: hidden; }

/* Hide legacy nav pill / panel — replaced by .topbar */
#nav-pill, #nav-panel { display: none !important; }


/* ============================================================
   NEWS & INSIGHTS  —  CBR-style SectionTiles (12-col grid +
   scroll-progress parallax slide-in). Dead-code companions
   .news__*, .news-article* are no longer rendered.
============================================================ */
#news.st {
  /* Full-bleed white background — the inner blocks (title, items,
     button) handle their own 1480 px max-width + auto centring,
     so the section paints edge-to-edge with no dark side gutters. */
  padding: clamp(72px, 8vw, 130px) clamp(20px, 5vw, 80px);
  background: #fff;
  overflow: hidden;
  width: 100%;
}
#news .st-title,
#news .st-items,
#news .st-button-container {
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
}

#news .st-title {
  display: flex; align-items: flex-start; gap: 18px;
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 500; line-height: 1; letter-spacing: -0.025em;
  color: var(--navy);
  border-top: 1px solid rgba(11,30,61,0.12);
  padding-top: 0.4em;
  margin: 0 0 clamp(28px, 3vw, 56px);
}
#news .st-title-icon {
  width: 0.7em; height: 0.7em;
  flex-shrink: 0;
  color: var(--navy);
  transform: scale(0);
  transform-origin: bottom left;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1) 0.1s;
}
#news.-observed .st-title-icon { transform: scale(1); }
#news .st-title-text {
  display: inline-block;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1) 0.05s,
              transform 0.8s cubic-bezier(0.16,1,0.3,1) 0.05s;
}
#news.-observed .st-title-text { opacity: 1; transform: translateY(0); }

/* 12-col grid */
#news .st-items {
  --gap: 1.2rem;
  --distance: 1.667rem;
  --scroll-progress: 0;
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(12, 1fr);
}

#news .st-item {
  --hover-scale: 1.01;
  position: relative;
  /* NO min-height: with aspect-ratio:16/9 on the small cards, a min-height
     taller than their 16:9 height made the aspect-ratio compute WIDTH from
     height (h×16/9), overrunning the grid column and overlapping neighbours
     on laptop-width screens. Height now derives from the column width. */
  border-radius: 18px;
  will-change: transform;
}
#news .st-item:nth-child(1) {
  --hover-scale: 1.008;
  grid-column: span 6; grid-row: span 2;
  /* No fixed aspect here: the big card STRETCHES to exactly fill 2 rows of
     the 16:9 small cards, so all bottoms align. Its image (16:9) cover-fits
     the resulting ~1.74 box — a ~2% trim, imperceptible. 2026-06-10. */
  transform: translateX(calc(var(--distance) * -1 + var(--distance) * var(--scroll-progress)))
             translateY(calc(var(--distance) - var(--distance) * var(--scroll-progress)));
}
#news .st-item:nth-child(2),
#news .st-item:nth-child(3) { grid-column: span 3; }
/* The four small cards are the 16:9 anchors that size the grid rows. */
#news .st-item:nth-child(2),
#news .st-item:nth-child(3),
#news .st-item:nth-child(4),
#news .st-item:nth-child(5) { aspect-ratio: 16 / 9; }
#news .st-item:nth-child(2) {
  transform: translateY(calc(var(--distance) - var(--distance) * var(--scroll-progress)));
}
#news .st-item:nth-child(3) {
  transform: translateX(calc(var(--distance) - var(--distance) * var(--scroll-progress)))
             translateY(calc(var(--distance) - var(--distance) * var(--scroll-progress)));
}
/* 2026-06-10 (client request): the bottom-right slot was a single wide
   card that left half the tile blank. Now two small cards (4 + 5) fill a
   clean 2×2 grid on the right, mirroring the latest 5 blogs (1 large + 4). */
#news .st-item:nth-child(4) {
  grid-column: span 3;
  transform: translateY(calc(var(--distance) * 2 - var(--distance) * 2 * var(--scroll-progress)));
}
#news .st-item:nth-child(5) {
  --hover-scale: 1.013;
  grid-column: span 3;
  transform: translateX(calc(var(--distance) * 2 - var(--distance) * 2 * var(--scroll-progress)))
             translateY(calc(var(--distance) * 2 - var(--distance) * 2 * var(--scroll-progress)));
}

/* 2026-06-10 (client request): blog title moved OUT of the image overlay
   to BELOW the thumbnail (the covers have their own designed title baked
   in, so an overlaid one duplicated it). The link is now a flex column:
   16:9 media box on top + clean navy title beneath on the white section. */
/* 2026-06-10: title-below removed per client — the covers carry their own
   designed title and read cleaner as pure thumbnails. Link + media fill the
   card via absolute inset:0 (no %-height chain, since the big card has no
   intrinsic aspect-ratio — it stretches to span its 2 grid rows). */
#news .st-item-link {
  position: absolute; inset: 0;
  display: block;
  text-decoration: none;
}
#news .st-item-media {
  position: absolute; inset: 0;
  overflow: hidden;
  border-radius: 18px;
  background-color: var(--bg-color, var(--navy));
  box-shadow: 0 14px 36px rgba(11,30,61,0.18), 0 2px 6px rgba(11,30,61,0.08);
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s ease;
}
#news .st-item:hover .st-item-media {
  box-shadow: 0 24px 56px rgba(11,30,61,0.22), 0 4px 10px rgba(11,30,61,0.10);
  transform: scale(var(--hover-scale));
}
/* Show the designed cover fully — no heavy tint, since no text overlays it. */
#news .st-item-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 1;
  display: block;
}
/* Title block hidden (2026-06-10) — removed per client; covers carry the
   title. Kept in the DOM (display:none) so it's a one-line restore. */
#news .st-item-details {
  display: none;
}
#news .st-item-caption {
  margin: 0 0 0.5em;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
}
#news .st-item-title {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.4vw, 1.4rem);
  font-weight: 500;
  line-height: 1.22;
  margin: 0;
  color: var(--navy);
}
/* The large featured card gets a bigger title to balance its size. */
#news .st-item:nth-child(1) .st-item-title {
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
}
#news .st-item:hover .st-item-title { color: var(--gold); }
#news .st-item-title { transition: color 0.25s ease; }

/* Circular arrow button */
#news .st-item-btn {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  width: 42px; height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background 0.35s ease, transform 0.35s ease;
}
#news .st-item:hover .st-item-btn { background: rgba(255,255,255,0.22); transform: rotate(-12deg); }
#news .st-item-btn svg { width: 14px; height: 14px; }

/* Reveal on intersect */
#news .st-items:not(.-observed) .st-item { opacity: 0; }
#news .st-items.-observed .st-item { opacity: 1; transition: opacity 0.6s ease; }

/* View-more pill */
#news .st-button-container { margin-top: clamp(28px, 3.5vw, 56px); text-align: center; }
#news .st-view-more {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px;
  border: 1px solid var(--navy);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.85rem; font-weight: 500;
  color: var(--navy); text-decoration: none;
  transition: background 0.35s ease, color 0.35s ease, gap 0.35s ease;
}
#news .st-view-more svg { width: 12px; height: 12px; }
#news .st-view-more:hover { background: var(--navy); color: #fff; gap: 16px; }

/* Responsive */
/* Laptop-class screens (2026-06-11): the card reveal offsets each tile by
   --distance until the scroll-progress hits 1. On shorter viewports the
   progress formula yields a lower value at the same on-screen position, so
   tiles sit visibly shifted — the big card's leftward shift gets clipped by
   the section's overflow:hidden ("Acc…" cut). Shrinking --distance here keeps
   the reveal subtle and clip-free on laptops; large monitors (>1700px) keep
   the original, fuller slide untouched. */
@media (max-width: 1700px) {
  #news .st-items { --distance: 0.55rem; }
}
@media (max-width: 900px) {
  #news .st-items { grid-template-columns: repeat(6, 1fr); }
  #news .st-item:nth-child(1) { grid-column: span 6; grid-row: auto; aspect-ratio: 16/9; }
  #news .st-item:nth-child(2),
  #news .st-item:nth-child(3),
  #news .st-item:nth-child(4),
  #news .st-item:nth-child(5) { grid-column: span 3; }
}
@media (max-width: 600px) {
  #news .st-items { grid-template-columns: 1fr; }
  #news .st-item, #news .st-item:nth-child(n) {
    grid-column: span 1; aspect-ratio: 16/9; transform: none;
  }
}

/* ============================================================
   IMAGE BANNER  —  adapted from CBR's SectionImage.
   Opens from a small centred slot into a full-width banner as
   --scroll-progress lerps 0 → 1 (driven by JS scroll listener).
============================================================ */
#banner.si {
  position: relative;
  width: 100%;
  margin: 0;
  /* 2026-06-10: slimmer vertical padding so the section reads as a thin
     banner band rather than a tall block. */
  padding: clamp(24px, 3vw, 48px) clamp(20px, 5vw, 80px);
  background: #fff;
  overflow: hidden;
}
#banner .si-inner {
  --scroll-progress: 0;
  /* speed > 1 makes the clip-path open faster — at speed 2.2 the band
     reaches full width by the time it sits near viewport centre. */
  --speed: 2.2;
  --progress: calc(var(--scroll-progress, 0) * var(--speed));
  --inset: calc(50% - 50% * var(--progress));
  --radius-start: 28px;
  --radius-end: 16px;
  --radius: calc(var(--radius-start) - (var(--radius-start) - var(--radius-end)) * var(--progress));
  position: relative;
  width: 100%;
  /* Cap so the full (uncropped) 2000×543 banner image is AT MOST 400px
     tall, and centre it so the reveal expands symmetrically over it.
     1473px ≈ the width at which a 2000:543 image is exactly 400px tall. */
  max-width: min(100%, calc(400px * 2000 / 543));
  margin: 0 auto;
  /* 2026-06-10 animation change: expand LEFT↔RIGHT only. Top/bottom
     insets are fixed at 0 so the full band height is always shown (no
     vertical slot). It starts from a zero-width centre line
     (inset 50% L/R at progress 0) and opens outward to full width. */
  -webkit-clip-path: inset(0 var(--inset) 0 var(--inset) round var(--radius));
          clip-path: inset(0 var(--inset) 0 var(--inset) round var(--radius));
  will-change: clip-path;
}
#banner .si-media {
  display: block;
  width: 100%;
  height: auto;
  /* New banner image is 2000×543 (≈3.68:1). Match the aspect-ratio so
     object-fit crops nothing — the entire handshake stays visible while
     the band is held to ≤400px tall via the inner's max-width cap. */
  aspect-ratio: 2000 / 543;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  pointer-events: none;
}
@media (max-width: 700px) {
  #banner .si-inner { --radius-start: 18px; --radius-end: 12px; }
}

/* ============================================================
   LEADER SPEAKS  —  split layout (portrait + pull-quote)
   Sits directly after the Services section.
============================================================ */
#leader-speaks {
  width: 100%;
  background: #fff;
  padding: clamp(72px, 8vw, 130px) clamp(20px, 5vw, 80px);
}
.leader__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.78fr 1fr;
  gap: clamp(28px, 3.6vw, 56px);
  align-items: stretch;
}

/* Portrait */
.leader__media {
  position: relative;
  margin: 0;
  width: 100%;             /* fill the grid column horizontally */
  align-self: start;       /* don't stretch vertically — aspect-ratio drives height */
  border-radius: 24px;
  overflow: hidden;        /* clip image to figure */
  min-width: 0;
  background: rgba(11,30,61,0.05);
  aspect-ratio: 4 / 5;
}
.leader__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.6s cubic-bezier(0.16,1,0.3,1);
}
#leader-speaks:hover .leader__media img { transform: scale(1.03); }

/* Right column */
.leader__body {
  display: flex; flex-direction: column;
  padding: clamp(8px, 1.2vw, 24px) 0;
}
.leader__eyebrow {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(11,30,61,0.55);
  margin-bottom: 22px;
}
.leader__heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0 0 clamp(20px, 1.6vw, 28px);
  max-width: 18ch;
}
.leader__heading em {
  font-style: italic;
  font-weight: 400;
  color: rgba(11,30,61,0.55);
}
.leader__lede {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.65;
  color: rgba(11,30,61,0.72);
  margin: 0 0 14px;
  max-width: 56ch;
}
.leader__lede + .leader__lede { margin-top: 0; }

/* "More details" pull-tab */
.leader__more {
  margin-top: clamp(20px, 2vw, 32px);
  background: #f6f6f4;
  border-radius: 18px;
  padding: clamp(18px, 1.8vw, 24px);
}
.leader__more-label {
  display: inline-flex; align-items: center; gap: 8px;
  width: 100%; justify-content: center;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(11,30,61,0.55);
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(11,30,61,0.08);
}
.leader__more-label svg { opacity: 0.55; }

/* Value tiles */
.leader__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.leader__tile {
  background: #fff;
  border-radius: 14px;
  padding: 18px 18px 20px;
  border: 1px solid rgba(11,30,61,0.05);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.leader__tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(11,30,61,0.08);
}
.leader__tile-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(11,30,61,0.06);
  color: var(--navy);
  margin-bottom: 14px;
}
.leader__tile-icon svg { width: 18px; height: 18px; display: block; }
.leader__tile-title {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.005em;
  margin: 0 0 6px;
}
.leader__tile-desc {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(11,30,61,0.6);
  margin: 0;
}

/* Signature */
.leader__sign {
  display: flex; flex-direction: column; gap: 2px;
  margin: clamp(24px, 2.4vw, 36px) 0 0;
}
.leader__sign-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.725rem; /* 150% of original 1.15rem */
  color: var(--navy);
  letter-spacing: -0.005em;
}
.leader__sign-role {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(11,30,61,0.5);
}

/* Responsive */
@media (max-width: 900px) {
  .leader__inner { grid-template-columns: 1fr; gap: 32px; }
  .leader__media { aspect-ratio: 4 / 4; min-height: 360px; }
}
@media (max-width: 560px) {
  .leader__tiles { grid-template-columns: 1fr; }
}

/* ============================================================
   CASE STUDIES  —  showcase row of tall portrait cards.
   At-rest each card shows only the title peeking above the
   bottom edge; hover slides the inner panel up to expose the
   description + CTA. Stagger-reveals into view with a clip-path
   sweep (CSS only, with .-observed toggled by IntersectionObserver).
============================================================ */
#case-studies {
  width: 100%;
  background: #fff;
  padding: clamp(40px, 4vw, 70px) clamp(20px, 5vw, 80px) clamp(72px, 8vw, 130px);
}

/* Section intro */
.ssr-intro { max-width: 1320px; margin: 0 auto clamp(36px, 4vw, 56px); }
.ssr-intro-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: end;
  border-top: 1px solid rgba(11,30,61,0.12);
  padding-top: clamp(24px, 2.4vw, 36px);
}
.ssr-intro-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0;
}
.ssr-intro-aside {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: start;
  justify-self: end;
  max-width: 28em;
}
.ssr-intro-arrow { width: 36px; height: 36px; color: var(--navy); flex-shrink: 0; }
.ssr-intro-text {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(11,30,61,0.7);
  margin: 0;
}

/* Showcase row */
.ssr {
  --gap: 1.2rem;
  --card-h: 39rem;            /* +30% taller for breathing room */
  --reveal-delay: 0.6s;
  display: flex;
  gap: var(--gap);
  max-width: 1320px;
  margin: 0 auto;
  height: var(--card-h);
}
.ssr-item {
  flex: 1 1 0;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--navy);
  /* Entrance: clipped to a thin centre strip; expands when .-observed */
  -webkit-clip-path: inset(0% 50% 100% 50% round 22px);
          clip-path: inset(0% 50% 100% 50% round 22px);
  transition: clip-path 1.1s cubic-bezier(0.16,1,0.3,1) var(--item-delay, 0s),
              -webkit-clip-path 1.1s cubic-bezier(0.16,1,0.3,1) var(--item-delay, 0s),
              margin-top 0.55s cubic-bezier(0.16,1,0.3,1);
  --item-delay: 0s;
}
.ssr-item:nth-child(1) { --item-delay: 0s; }
.ssr-item:nth-child(2) { --item-delay: 0.15s; }
.ssr-item:nth-child(3) { --item-delay: 0.30s; }
.ssr-item:nth-child(4) { --item-delay: 0.45s; }

.ssr.-observed .ssr-item {
  -webkit-clip-path: inset(0% 0% 0% 0% round 22px);
          clip-path: inset(0% 0% 0% 0% round 22px);
}
.ssr-item:hover { margin-top: -6px; }

.ssr-item-link {
  display: block; height: 100%;
  text-decoration: none; color: inherit;
  border-radius: inherit;
  position: relative;
}
.ssr-item-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: 50% 100%;
  transition: transform 1.4s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
.ssr-item:hover .ssr-item-image { transform: scale(1.05); }

/* Bottom content panel */
.ssr-item-content {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 100%;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
  /* At rest the panel sits high enough to show the number + the FULL
     title (up to 4 lines on a 4-up row) — no clipping at any breakpoint. */
  transform: translateY(calc(100% - 9.5rem));
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.ssr-item:hover .ssr-item-content { transform: translateY(0); }

.ssr-item-content-inner {
  display: flex; flex-direction: column;
  height: 100%;
  padding: 22px 22px 24px;
  background: var(--navy);
  color: #fff;
  border-radius: 22px;
  pointer-events: auto;
}

.ssr-item-number {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
}
.ssr-item-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  line-height: 1.25;
  margin: 0 0 14px;
  color: #fff;
}
.ssr-item-description {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  margin: 0 0 auto;
  /* Hidden until hover */
  opacity: 0;
  transition: opacity 0.5s ease 0.05s;
}
.ssr-item-cta { margin-top: 18px; opacity: 0; transition: opacity 0.5s ease 0.1s; }
.ssr-item:hover .ssr-item-description,
.ssr-item:hover .ssr-item-cta { opacity: 1; }

.ssr-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  transition: background 0.35s ease, border-color 0.35s ease, gap 0.35s ease;
}
.ssr-pill svg { width: 11px; height: 11px; }
.ssr-item:hover .ssr-pill { background: var(--gold); border-color: var(--gold); gap: 14px; }

/* Responsive */
@media (max-width: 1024px) {
  .ssr { --card-h: 34rem; }
}
@media (max-width: 820px) {
  .ssr-intro-row { grid-template-columns: 1fr; }
  .ssr-intro-aside { justify-self: start; }
  .ssr {
    height: auto;
    flex-wrap: wrap;
  }
  .ssr-item {
    flex: 1 1 calc(50% - var(--gap));
    height: 22rem;
  }
}
@media (max-width: 560px) {
  .ssr-item { flex: 1 1 100%; height: 20rem; }
  .ssr-item-content { transform: translateY(calc(100% - 10rem)); }
}

/* ============================================================
   PARALLAX BREAK — CAREERS enquiry variant
   (Replaces the ₹40,000 Cr track-record block.)
============================================================ */
.pb--careers .pb__overlay--dark {
  background: linear-gradient(180deg, rgba(11,30,61,0.37) 0%, rgba(11,30,61,0.47) 100%);
}
.pb__content--careers {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  max-width: 720px;
  left: 0; right: 0;
  padding: clamp(60px, 8vw, 110px) clamp(20px, 5vw, 60px);
  color: #fff;
}
/* 2026-06-10 (client request): on phones the band is height:auto, so
   absolute content can't grow it — the heading was clipped at the top
   by the band's overflow:hidden. In-flow content sizes the band to
   fit. Desktop (>680px) keeps the absolute centred layout above. */
@media (max-width: 680px) {
  /* position: relative (NOT static) so the content stays in-flow (band grows
     to fit it) AND remains positioned, so its z-index:2 takes effect and it
     paints ABOVE the absolute bg/overlay. With static, z-index is inert and
     the overlay covered the heading/body/CTA — the section looked empty on
     mobile (only the eyebrow bled through). 2026-06-11. */
  .pb__content--careers { position: relative; z-index: 2; inset: auto; padding: 0 20px; }
}
/* Laptop fix (2026-06-11): on short viewports the band's 58vh height wasn't
   tall enough for the centred content, so it overflowed its padding and read
   as cramped. This min-height floor restores full breathing room on short
   screens; taller viewports (where 58vh already exceeds 520px) AND phones
   (≤680px, in-flow content) are left untouched. */
@media (min-width: 681px) {
  .pb--careers { min-height: 520px; }
}
.pb__content--careers .pb__careers-heading,
.pb__content--careers .pb__careers-body,
.pb__content--careers .pb__careers-cta,
.pb__content--careers .pb__eyebrow {
  margin-left: auto;
  margin-right: auto;
}
.pb__content--careers .pb__eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 22px;
}
.pb__careers-heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 22px;
}
.pb__careers-body {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255,255,255,0.85);
  margin: 0 auto 30px;
  max-width: 56ch;
}
.pb__careers-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, gap 0.35s ease;
}
.pb__careers-cta:hover {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
  gap: 14px;
}


/* ============================================================
   GLOBAL READABILITY PASS
   K&P is a 65-year audit / advisory firm — the body copy needs
   to read like the firm signs off on it. Every paragraph below
   is bumped to a darker, slightly heavier, more legible state
   than the muted defaults that were in place earlier.
============================================================ */

/* Homepage section-level paragraphs */
.about__lede,
.why-kp__lede,
.our-people__lede,
.our-solutions__lede,
.case-studies__lede,
.leader__lede,
.about__statement-body p {
  color: rgba(11, 30, 61, 0.92) !important;
  font-weight: 450;
}

/* Why-K&P pillar copy — already updated above, kept here as a guard */
.why-card__desc { color: rgba(11, 30, 61, 0.92) !important; }

/* Service / case-study / blog body paragraphs */
.svc-main p,
.cs-section p,
.bp-section p,
.kpc-intro__body p,
.kpc-practice__body p,
.ab-intro p,
.al-welcome__body,
.al-pillar__desc,
.ct-form__sub,
.ct-rail__desc {
  color: rgba(11, 30, 61, 0.88);
}

/* Card descriptions across modules — bump from 0.65/0.7 to 0.85+ */
.svc-callout__desc,
.al-pillar__desc,
.cs-rcard__excerpt,
.cs-phase__desc,
.bp-rcard__excerpt,
.hb-card__excerpt,
.ptr-origin__legacy p,
.ptr-card__role,
.ptr-tier__note,
.csp-card__desc,
.csp-pill__desc,
.kpc-card__desc {
  color: rgba(11, 30, 61, 0.84);
}

/* FAQ answers — these were sitting at 0.72; bump for legibility */
.svc-faq__a,
.ct-faq__a {
  color: rgba(11, 30, 61, 0.88);
}

/* Footer disclaimer & utility copy */
.footer__tagline,
.footer__disclaimer {
  color: rgba(255, 255, 255, 0.78);
}


/* ============================================================
   HOME — BLOGS  (#home-blogs)
   Asymmetric: 1 large featured card LEFT, 3 stacked rows RIGHT.
============================================================ */
#home-blogs {
  padding: clamp(72px, 8vw, 130px) clamp(20px, 5vw, 80px);
  background: var(--off-white, #fff);
  position: relative;
}

.hb__head {
  max-width: 1480px;
  margin: 0 auto clamp(36px, 4vw, 56px);
  display: flex; align-items: end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.hb__head-l { max-width: 720px; }
.hb__eyebrow {
  display: inline-block;
  font-family: var(--font-sans, "DM Sans", system-ui, sans-serif);
  font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
  border-top: 1px solid rgba(184,150,110,0.45);
  padding-top: 12px;
  margin-bottom: 14px;
}
.hb__title {
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0;
}
.hb__title em { font-style: italic; font-weight: 400; color: var(--gold); }

.hb__more {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  border: 1px solid rgba(11,30,61,0.18);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-sans, "DM Sans", system-ui, sans-serif);
  font-size: 0.84rem; font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  transition: background 0.35s ease, color 0.35s ease, gap 0.35s ease, transform 0.35s ease;
}
.hb__more svg { width: 13px; height: 10px; }
.hb__more:hover { background: var(--navy); color: #fff; gap: 14px; transform: translateY(-2px); }

/* GRID — single row, 4 equal columns; width matches .hb__head */
.hb__grid {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  align-items: stretch;
}

@media (max-width: 1100px) {
  .hb__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .hb__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   PUBLICATIONS MARQUEE  —  auto-scrolling row, pause on hover,
   pointer-drag enabled. Mirrors the about__stats marquee pattern.
============================================================ */
.hb__marquee {
  position: relative;
  width: calc(100vw - 32px);
  margin-left:  calc(50% - 50vw + 16px);
  margin-right: calc(50% - 50vw + 16px);
  max-width: 1840px;
  overflow: hidden;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  /* Edge fade removed per client request — cards now cut crisply at
     the marquee bounds. The arrow controls below give users explicit
     navigation that the fade used to imply. */
}
@media (min-width: 1872px) {
  .hb__marquee {
    width: 1840px;
    margin-left: calc(50% - 920px);
    margin-right: 0;
  }
}
.hb__marquee.is-dragging { cursor: grabbing; }
.hb__marquee img, .hb__marquee svg { -webkit-user-drag: none; }

.hb__marquee-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  align-items: stretch;
  gap: clamp(16px, 1.8vw, 24px);
  padding: 6px clamp(6px, 1vw, 16px);
  will-change: transform;
}

/* Cards inside the marquee — fixed width so the track has a known
   scrollWidth. The grid-mode hb-card styles still apply for visuals. */
.hb__marquee .hb-card {
  flex: 0 0 auto;
  width: clamp(260px, 22vw, 340px);
}

/* Mobile responsive: slightly smaller cards so 1.5–2 cards fit on
   a phone screen and the marquee remains touch-friendly. */
@media (max-width: 600px) {
  .hb__marquee .hb-card { width: clamp(220px, 70vw, 280px); }
}


/* Prev / next arrow nav below the marquee. Mirrors the soft
   navy-on-cream pattern used elsewhere on the page (why-kp,
   transactions). Two circular buttons centred, with a 24px gap. */
.hb__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: clamp(36px, 4vw, 56px);
}
.hb__nav-btn {
  appearance: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(11,30,61,0.18);
  background: #fff;
  color: var(--navy, #0b1e3d);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease, color 0.3s ease,
              border-color 0.3s ease, transform 0.3s ease,
              box-shadow 0.3s ease;
}
.hb__nav-btn:hover,
.hb__nav-btn:focus-visible {
  background: var(--navy, #0b1e3d);
  color: #fff;
  border-color: var(--navy, #0b1e3d);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(11,30,61,0.45);
  outline: none;
}
.hb__nav-btn:active { transform: translateY(0); }
.hb__nav-btn svg { display: block; }

/* ============================================================
   CARD — base
============================================================ */
.hb-card {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid rgba(11,30,61,0.06);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 1px 2px rgba(11,30,61,0.04);
  transition:
    transform 0.55s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.55s cubic-bezier(0.16,1,0.3,1),
    border-color 0.4s ease;
}
.hb-card:hover {
  transform: translateY(-4px);
  border-color: rgba(184,150,110,0.55);
  box-shadow:
    0 28px 56px -22px rgba(11,30,61,0.32),
    0 0 0 4px rgba(184,150,110,0.10);
}

.hb-card__media {
  position: relative;
  margin: 0;
  background: #ececea;
  overflow: hidden;
}
.hb-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.16,1,0.3,1);
}
.hb-card:hover .hb-card__media img { transform: scale(1.06); }

/* Category pill on the image */
.hb-card__cat {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  display: inline-flex; align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
  font-family: var(--font-sans, "DM Sans", system-ui, sans-serif);
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--navy);
}

.hb-card__copy {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(20px, 2vw, 28px);
}

.hb-card__meta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans, "DM Sans", system-ui, sans-serif);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(11,30,61,0.55);
}
.hb-card__sep {
  width: 4px; height: 4px;
  border-radius: 999px;
  background: rgba(11,30,61,0.30);
}

.hb-card__title {
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
  transition: color 0.3s ease;
}
.hb-card:hover .hb-card__title { color: var(--gold); }

.hb-card__excerpt {
  font-family: var(--font-sans, "DM Sans", system-ui, sans-serif);
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(11,30,61,0.65);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hb-card__author {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 4px;
}
.hb-card__avatar {
  width: 38px; height: 38px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--gold), #6f5a3f 70%);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(11,30,61,0.06);
  flex-shrink: 0;
}
.hb-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-card__author-copy { display: flex; flex-direction: column; line-height: 1.3; }
.hb-card__author-name {
  font-family: var(--font-sans, "DM Sans", system-ui, sans-serif);
  font-size: 0.86rem; font-weight: 600;
  color: var(--navy);
}
.hb-card__author-role {
  font-family: var(--font-sans, "DM Sans", system-ui, sans-serif);
  font-size: 0.74rem;
  color: rgba(11,30,61,0.55);
}

.hb-card__cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(11,30,61,0.08);
  font-family: var(--font-sans, "DM Sans", system-ui, sans-serif);
  font-size: 0.86rem; font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--navy);
  transition: color 0.3s ease, gap 0.3s ease;
}
.hb-card__cta svg { width: 13px; height: 10px; }
.hb-card:hover .hb-card__cta { color: var(--gold); gap: 12px; }

/* ============================================================
   FEATURED VARIANT  —  big card, image on top, copy below
============================================================ */
/* ============================================================
   COL VARIANT — vertical card; portrait image on top, copy below.
   Used as the single card type in the homepage 4-column row.
============================================================ */
.hb-card--col {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
}
.hb-card--col .hb-card__media {
  position: relative;
  aspect-ratio: 1489 / 2105; /* matches extracted PDF cover dimensions */
  overflow: hidden;
  background: #0b1e3d;
}
.hb-card--col .hb-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hb-card--col .hb-card__copy {
  padding: clamp(14px, 1.4vw, 20px) clamp(14px, 1.4vw, 20px) clamp(18px, 1.8vw, 24px);
  gap: 8px;
}
.hb-card--col .hb-card__title {
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  margin: 2px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 540px) {
  .hb__head { flex-direction: column; align-items: flex-start; }
  .hb-card--col .hb-card__title { -webkit-line-clamp: 2; }
}

/* ============================================================
   ⚠️ DO NOT REVERT — REGRESSION-PROTECTED ⚠️ (2026-06-10)
   ANIMATION-OFF FALLBACK — html.anim-off is set by home.js when the
   vendor libraries (Lenis/GSAP/ScrollTrigger) failed to load. Without
   this, every scroll-reveal element (opacity:0 awaiting .in-view /
   GSAP) stays invisible and the page looks broken. Opacity-only on
   purpose: menus/overlays also use visibility:hidden so they remain
   closed; transforms are left alone so positioning is unaffected.
============================================================ */
html.anim-off body * { opacity: 1 !important; }