/* =========================================================
   NM Goldstone & Co — Tokens & Foundation
   ========================================================= */

:root {
  /* Core */
  --navy-900: #0F1A2E;
  --navy-800: #16243D;
  --navy-700: #1E3050;

  --ivory-50:  #F7F5F0;
  --ivory-100: #EFEBE2;
  --ivory-200: #E3DDD0;

  /* Gold */
  --gold-500: #A8843E;
  --gold-400: #BE9A52;
  --gold-300: #D4B477;
  --gold-glow: rgba(168, 132, 62, 0.14);

  /* Ink */
  --ink-900: #11151C;
  --ink-700: #3A4150;
  --ink-500: #6A7180;

  --on-navy-100: #F3F1EC;
  --on-navy-70:  rgba(243, 241, 236, 0.72);
  --on-navy-45:  rgba(243, 241, 236, 0.45);

  /* Semantic */
  --success: #4E7A5B;
  --error:   #A6493C;

  /* Type */
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.50vw, 1.50rem);
  --step-2:  clamp(1.56rem, 1.40rem + 0.80vw, 2.00rem);
  --step-3:  clamp(1.95rem, 1.70rem + 1.25vw, 2.80rem);
  --step-4:  clamp(2.44rem, 2.00rem + 2.20vw, 4.00rem);
  --step-5:  clamp(3.05rem, 2.30rem + 3.75vw, 5.50rem);

  /* Spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* Radius */
  --radius-input: 10px;
  --radius-card: 14px;
  --radius-pill: 999px;

  /* Easing & duration */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur-base: 0.5s;
  --dur-slow: 0.9s;

  /* Elevation */
  --shadow-card: 0 1px 2px rgba(17, 21, 28, 0.04), 0 8px 24px rgba(17, 21, 28, 0.05);
  --shadow-header: 0 1px 0 rgba(243, 241, 236, 0.06), 0 12px 28px rgba(15, 26, 46, 0.35);

  /* Layout constants */
  --header-h: 72px;
}

/* =========================================================
   Modern reset
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul[role="list"], ol[role="list"] { list-style: none; }

html:focus-within { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, svg, video { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: 0; padding: 0; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 2px;
}

/* =========================================================
   Base typography
   ========================================================= */

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink-900);
  background: var(--ivory-50);
  font-weight: 400;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: inherit;
}

h1 { font-size: var(--step-4); line-height: 1.05; }
h2 { font-size: var(--step-3); line-height: 1.1; }
h3 { font-size: var(--step-2); line-height: 1.15; }
h4 { font-size: var(--step-1); line-height: 1.2; }

p { max-width: 68ch; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-500);
}

.tabular { font-variant-numeric: tabular-nums; }

/* =========================================================
   Layout utilities
   ========================================================= */

.container {
  width: 100%;
  max-width: calc(var(--container) + (var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(var(--container-narrow) + (var(--gutter) * 2));
}

.section {
  padding-block: var(--space-2xl);
}

@media (min-width: 48rem) {
  .section { padding-block: var(--space-3xl); }
}

.section--navy {
  background: var(--navy-900);
  color: var(--on-navy-100);
}

.section--ivory {
  background: var(--ivory-50);
  color: var(--ink-900);
}

/* NOTE: `content-visibility: auto` was previously applied to the scenes
   below the hero as a paint optimisation. It was removed because it feeds
   ScrollTrigger placeholder section heights (contain-intrinsic-size) at
   init, so the cumulative document height is underestimated and the
   reveal triggers for the deep scenes (5–8) land at scroll positions that
   never fire — leaving those reveals stuck at opacity 0. With the hero
   video now at 822 KB the paint win was marginal; correct reveals matter
   more. See SESSION_LOG Session 15. */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   Skip link
   ========================================================= */

.skip-link {
  position: absolute;
  top: -200%;
  left: var(--space-s);
  background: var(--navy-900);
  color: var(--on-navy-100);
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius-pill);
  z-index: 200;
  font-weight: 500;
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus-visible {
  top: var(--space-s);
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.85em 1.5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
  will-change: transform;
}

.btn--primary {
  background: var(--gold-500);
  color: var(--ink-900);
  box-shadow: 0 1px 2px rgba(17, 21, 28, 0.10);
}

.btn--primary:hover {
  background: var(--gold-400);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(168, 132, 62, 0.32);
}

.btn--primary:active { transform: translateY(0); }

.btn--secondary {
  background: transparent;
  color: inherit;
  border-color: var(--ink-700);
}

.section--navy .btn--secondary {
  border-color: var(--gold-500);
  color: var(--on-navy-100);
}

.btn--secondary:hover {
  background: var(--gold-glow);
}

/* =========================================================
   Site header / sticky nav
   ========================================================= */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  color: var(--on-navy-100);
  transition:
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.site-header.is-scrolled {
  /* Near-opaque navy fill instead of backdrop-filter — backdrop-filter
     repaints the blurred region on every scroll frame which, combined
     with the hero video decoding underneath, was a major scroll-jank
     contributor. Flat fill is visually 95% the same. */
  background: rgba(15, 26, 46, 0.98);
  box-shadow: var(--shadow-header);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}

/* Brand */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--on-navy-100);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: -0.02em;
  line-height: 1;
}

.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--gold-500);
}

.brand__amp { color: var(--gold-500); }

/* Desktop nav */

.site-nav {
  display: none;
  align-items: center;
  gap: var(--space-l);
}

@media (min-width: 64rem) {
  .site-nav { display: flex; }
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  list-style: none;
  padding: 0;
}

.site-nav__link {
  position: relative;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--on-navy-70);
  padding-block: var(--space-2xs);
  transition: color var(--dur-fast) var(--ease-out);
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--gold-500);
  transition: right var(--dur-fast) var(--ease-out);
}

.site-nav__link:hover {
  color: var(--on-navy-100);
}

.site-nav__link:hover::after { right: 0; }

.site-nav__cta {
  padding: 0.65em 1.25em;
  font-size: var(--step--1);
}

/* Hamburger */

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  color: var(--on-navy-100);
  border-radius: 8px;
}

@media (min-width: 64rem) {
  .nav-toggle { display: none; }
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  transform-origin: center;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile nav panel */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-base);
}

.mobile-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 26, 46, 0.55);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.mobile-nav__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 88vw);
  background: var(--navy-900);
  color: var(--on-navy-100);
  padding: calc(var(--header-h) + var(--space-l)) var(--gutter) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.35);
}

.mobile-nav.is-open {
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.mobile-nav.is-open::before { opacity: 1; }
.mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); }

.mobile-nav__close {
  position: absolute;
  top: var(--space-m);
  right: var(--gutter);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--on-navy-100);
  border-radius: 8px;
}

.mobile-nav__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.mobile-nav__list a {
  display: block;
  padding-block: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--on-navy-100);
  border-bottom: 1px solid rgba(243, 241, 236, 0.08);
  transition: color var(--dur-fast) var(--ease-out);
}

.mobile-nav__list a:hover { color: var(--gold-400); }

.mobile-nav__cta { align-self: flex-start; margin-top: var(--space-s); }

body.nav-open {
  overflow: hidden;
}

/* =========================================================
   Scene 1 — Hero
   ========================================================= */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  padding-block:
    calc(var(--header-h) + var(--space-2xl))
    var(--space-2xl);
  display: flex;
  align-items: center;
  background: var(--navy-900);
  color: var(--on-navy-100);
}

@media (min-width: 48rem) {
  .hero {
    padding-block:
      calc(var(--header-h) + var(--space-3xl))
      var(--space-3xl);
  }
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* Looping video background. Sits beneath everything; overlay darkens
   it so text/CTA contrast stays AA. No CSS filter on the video — running
   a per-frame filter on top of decoding causes scroll jank. The navy
   overlay below does the tonal knock-back instead. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Navy overlay — radial centre slightly lighter so the gold glow
   still has somewhere to breathe, edges deeper for vignette. */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 50% 45%,
      rgba(15, 26, 46, 0.55) 0%,
      rgba(15, 26, 46, 0.78) 70%,
      rgba(15, 26, 46, 0.88) 100%);
}

.hero__glow {
  position: absolute;
  top: 38%;
  left: 50%;
  width: min(900px, 110vw);
  aspect-ratio: 1 / 1;
  /* Use standalone `translate` for centering so GSAP's `transform`
     animations don't fight it. */
  translate: -50% -50%;
  background:
    radial-gradient(
      circle at center,
      rgba(168, 132, 62, 0.22) 0%,
      rgba(168, 132, 62, 0.10) 26%,
      rgba(168, 132, 62, 0.00) 62%
    );
  filter: blur(8px);
}

.hero__grain {
  position: absolute;
  inset: -2%;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.94  0 0 0 0 0.92  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: 0.045;
  mix-blend-mode: overlay;
}

.hero__rule {
  position: absolute;
  left: 50%;
  bottom: var(--space-l);
  transform: translateX(-50%);
  width: 1px;
  height: var(--space-l);
  background: linear-gradient(
    to bottom,
    rgba(168, 132, 62, 0) 0%,
    rgba(168, 132, 62, 0.55) 100%
  );
  opacity: 0.7;
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-m);
  max-width: calc(900px + (var(--gutter) * 2));
}

.hero__eyebrow {
  margin: 0;
}

.hero__heading {
  font-size: clamp(2.4rem, 1.9rem + 3.2vw, 4.6rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--on-navy-100);
  text-wrap: balance;
  max-width: 22ch;
  margin: 0;
}

.hero__sub {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--on-navy-70);
  max-width: 60ch;
  margin: 0;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
  margin-top: var(--space-2xs);
}

.hero__trust {
  list-style: none;
  padding: 0;
  margin: var(--space-l) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s) var(--space-l);
  font-size: var(--step--1);
  color: var(--on-navy-70);
  letter-spacing: 0.01em;
}

@media (min-width: 48rem) {
  .hero__trust {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-s) var(--space-l);
    margin-top: var(--space-xl);
    padding-top: var(--space-l);
    border-top: 1px solid rgba(243, 241, 236, 0.08);
    width: 100%;
  }
}

.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.hero__trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400);
}

/* Hero load animation initial state — JS plays from here.
   Gated behind `.js` so no-JS users (or a failed GSAP CDN) still see content. */
.js [data-hero-item] {
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-hero-item] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   Scene 2 — Problem → Need
   ========================================================= */

.problem {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-2xl);
  /* Soft vertical ivory -> gold wash (inspo13/14, on-brand tone). */
  background: linear-gradient(180deg, var(--ivory-50) 10%, rgba(168, 132, 62, 0.18) 100%);
}

@media (min-width: 48rem) {
  .problem { padding-block: var(--space-3xl); }
}

.problem__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

@media (min-width: 48rem) {
  .problem__container { gap: var(--space-2xl); }
}

/* Lead: heading + intro, centred & narrow */
.problem__lead,
.value__lead {
  max-width: 64ch;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.problem__heading,
.value__heading {
  margin: 0;
  text-wrap: balance;
}

.problem__intro {
  margin: 0 auto;
  color: var(--ink-700);
  font-size: var(--step-1);
  line-height: 1.55;
}

/* Pain cards — quiet, dense, the "problem" texture */
.pain-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
}

@media (min-width: 36rem) {
  .pain-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .pain-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-m);
  }
}

.pain-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-m);
  background: var(--ivory-100);
  border: 1px solid var(--ivory-200);
  border-radius: var(--radius-card);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.pain-card:hover {
  border-color: var(--gold-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.pain-card__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--ivory-50);
  border: 1px solid var(--ivory-200);
  color: var(--ink-700);
}

.pain-card__text {
  margin: 0;
  color: var(--ink-700);
  font-size: var(--step-0);
  line-height: 1.5;
  max-width: none;
}

/* Transition — the beat between problem and answer.
   2-col block on desktop (text + image), stacks on mobile. */
.problem__transition {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  align-items: center;
  padding-block: var(--space-l);
  max-width: 1080px;
  margin-inline: auto;
  width: 100%;
}

@media (min-width: 48rem) {
  .problem__transition {
    grid-template-columns: 6fr 5fr;
    gap: var(--space-2xl);
    padding-block: var(--space-xl);
    align-items: stretch;
  }
}

.problem__transition-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  align-items: flex-start;
  position: relative;
  padding-top: var(--space-l);
}

.problem__transition-content::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--gold-500);
  position: absolute;
  top: 0;
  left: 0;
}

.problem__transition-text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  text-wrap: balance;
  max-width: 28ch;
}

.problem__transition-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--ink-900);
  letter-spacing: 0.01em;
}

.problem__transition-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--ink-900);
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.problem__transition-cta:hover .problem__transition-arrow {
  background: var(--gold-400);
  transform: translateX(4px);
}

.problem__transition-cta:hover {
  color: var(--gold-500);
}

.problem__transition-media {
  margin: 0;
}

.problem__transition-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--ivory-200);
  box-shadow: var(--shadow-card);
  filter: saturate(0.85) contrast(1.02);
}

/* On mobile the block stacks, so keep the image a short banner rather
   than a tall panel (matches the value cards). */
@media (max-width: 47.99rem) {
  .problem__transition-media { align-self: start; }
}

/* On desktop the text column drives the row height; the image cell
   stretches to match and the image fills its cell (object-fit: cover
   crops as needed). */
@media (min-width: 48rem) {
  .problem__transition-media,
  .problem__transition-media img {
    height: 100%;
  }
  .problem__transition-media img { aspect-ratio: auto; }
}

/* Value cards — full-width stacked rows, 2-col internally on desktop
   (text-left, image-right per inspo08). */
.value__eyebrow {
  margin: 0;
}

.value-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

@media (min-width: 48rem) {
  .value-grid { gap: var(--space-xl); }
}

.value-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  overflow: hidden;        /* clips the full-bleed image to the rounded corners */
  background: var(--ivory-100);
  border: 1px solid var(--ivory-200);
  border-radius: var(--radius-card);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

@media (min-width: 48rem) {
  .value-card {
    grid-template-columns: 5fr 7fr;
  }
}

.value-card:hover {
  border-color: var(--gold-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.value-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-l);   /* card padding now lives on the text side only */
}

@media (min-width: 48rem) {
  .value-card__content { padding: var(--space-2xl); }
}

.value-card__title {
  margin: 0;
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  text-wrap: balance;
  max-width: 18ch;
}

.value-card__copy {
  margin: 0;
  color: var(--ink-700);
  line-height: 1.6;
  max-width: 42ch;
}

.value-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  margin-top: var(--space-s);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-900);
  transition: color var(--dur-fast) var(--ease-out);
}

.value-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--ink-900);
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.value-card__cta:hover { color: var(--gold-500); }

.value-card__cta:hover .value-card__arrow {
  background: var(--gold-400);
  transform: translateX(4px);
}

.value-card__media {
  margin: 0;
  width: 100%;
}

.value-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.02);
}

/* On mobile the card stacks, so the media must NOT inherit the grid's
   stretch — otherwise the cell grows to the text column's height and the
   image (object-fit: cover) renders as a tall portrait crop. Pin it to the
   top of its cell so the 16/9 banner ratio above is what actually shows. */
@media (max-width: 47.99rem) {
  .value-card__media { align-self: start; }
}

/* On desktop the text column drives the row height; the image cell
   stretches to match and the image fills its cell. */
@media (min-width: 48rem) {
  .value-card__media,
  .value-card__media img {
    height: 100%;
  }
  .value-card__media img { aspect-ratio: auto; }
}

/* ---------------------------------------------------------
   Image hover zoom
   The photographic media gently scales within its frame on
   hover. The frame clips the overflow so the radius stays
   clean; the image owns the transform. Slow + eased to match
   the editorial register — nothing snaps. Disabled under
   reduced-motion (see the global override block).
   --------------------------------------------------------- */
.value-card__media,
.problem__transition-media {
  overflow: hidden;
}

/* The standalone transition image keeps its own rounded frame; the value-card
   image is full-bleed and clipped by the card's own rounded corners. */
.problem__transition-media {
  border-radius: var(--radius-card);
}

.value-card__media img,
.problem__transition-media img,
.team-portrait img {
  transition: transform 0.7s var(--ease-out);
  will-change: transform;
}

.value-card:hover .value-card__media img,
.value-card:focus-within .value-card__media img,
.problem__transition-media:hover img,
.team-portrait:hover img {
  transform: scale(1.06);
}

/* =========================================================
   Scene 3 — Partner Promise
   ========================================================= */

.promise {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-2xl);
}

@media (min-width: 48rem) {
  .promise { padding-block: var(--space-3xl); }
}

.promise__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.promise__grain {
  position: absolute;
  inset: -2%;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.94  0 0 0 0 0.92  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: 0.035;
  mix-blend-mode: overlay;
}

.promise__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

@media (min-width: 48rem) {
  .promise__container { gap: var(--space-2xl); }
}

.promise__lead {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.promise__eyebrow { margin: 0; }

.promise__heading {
  margin: 0;
  font-weight: 500;
  font-size: var(--step-3);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--on-navy-100);
  text-wrap: balance;
  max-width: 24ch;
  margin-inline: auto;
}

.promise__body {
  margin: 0 auto;
  color: var(--on-navy-70);
  font-size: var(--step-1);
  line-height: 1.55;
  max-width: 56ch;
}

/* Promise list — inline rhythm with gold dot separators on desktop */
.promise-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  color: var(--on-navy-100);
}

@media (min-width: 48rem) {
  .promise-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-s) var(--space-l);
    padding-block: var(--space-l);
    border-top: 1px solid rgba(243, 241, 236, 0.08);
    border-bottom: 1px solid rgba(243, 241, 236, 0.08);
  }
}

.promise-list__item {
  position: relative;
  padding-inline: var(--space-2xs);
}

@media (min-width: 48rem) {
  .promise-list__item + .promise-list__item::before {
    content: "";
    position: absolute;
    left: calc(var(--space-l) * -0.5);
    top: 50%;
    width: 4px;
    height: 4px;
    background: var(--gold-500);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
}

/* Before / After block */
.ba {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.ba__lead {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  align-items: center;
}

.ba__eyebrow { margin: 0; }

.ba__heading {
  margin: 0;
  font-weight: 500;
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--on-navy-100);
  text-wrap: balance;
  max-width: 22ch;
}

.ba__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  max-width: 960px;
  width: 100%;
  margin-inline: auto;
}

@media (min-width: 48rem) {
  .ba__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    position: relative;
  }
  .ba__grid::before {
    content: "";
    position: absolute;
    top: var(--space-s);
    bottom: var(--space-s);
    left: 50%;
    width: 1px;
    background: linear-gradient(
      to bottom,
      rgba(168, 132, 62, 0) 0%,
      rgba(168, 132, 62, 0.35) 18%,
      rgba(168, 132, 62, 0.35) 82%,
      rgba(168, 132, 62, 0) 100%
    );
    transform: translateX(-50%);
  }
}

.ba__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.ba__col-label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ba__col--before .ba__col-label { color: var(--on-navy-45); }
.ba__col--after  .ba__col-label { color: var(--gold-400); }

.ba__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.ba__list li {
  font-size: var(--step-0);
  line-height: 1.5;
  padding-left: var(--space-m);
  position: relative;
}

.ba__col--before .ba__list li {
  color: var(--on-navy-45);
}

.ba__col--before .ba__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 10px;
  height: 1px;
  background: var(--on-navy-45);
}

.ba__col--after .ba__list li {
  color: var(--on-navy-100);
  font-weight: 500;
}

.ba__col--after .ba__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  background: var(--gold-500);
  border-radius: 50%;
}

.ba__closing {
  margin: 0 auto;
  max-width: 52ch;
  text-align: center;
  color: var(--on-navy-70);
  font-size: var(--step-1);
  line-height: 1.55;
  padding-top: var(--space-m);
  position: relative;
}

.ba__closing::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--gold-500);
  margin: 0 auto var(--space-m);
}

/* =========================================================
   Scene 4 — How We Help (services)
   ========================================================= */

.services {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-2xl);
}

/* Full-cover background photo with a medium ivory wash, sitting as a static
   backdrop behind the pinned deck. Mirrors the .proof__bg / .hero__bg pattern. */
.services__bg {
  position: absolute;
  inset: 0;                 /* full section height, incl. the pin distance */
  z-index: -1;              /* behind content, above the section's ivory fill */
  pointer-events: none;
}

/* Sticky, viewport-tall image so it stays put while the deck scrolls over it
   (never stretched across the tall pinned section). Its containing block is the
   absolute .services__bg, so it travels/sticks across the whole section. */
.services__bg-image {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  background-image:
    linear-gradient(rgba(247, 245, 240, 0.65), rgba(247, 245, 240, 0.7)),
    url("assets/images/services-bg.webp");
  background-size: cover;
  background-position: center;
}

/* Faint paper grain over the photo — same recipe as .proof__grain. */
.services__grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.94  0 0 0 0 0.92  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: 0.035;
  mix-blend-mode: overlay;
}

@media (min-width: 48rem) {
  .services { padding-block: var(--space-3xl); }
}

.services__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

@media (min-width: 48rem) {
  .services__container { gap: var(--space-2xl); }
}

.services__lead {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.services__heading {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 22ch;
  margin-inline: auto;
}

.services__intro {
  margin: 0 auto;
  color: var(--ink-700);
  font-size: var(--step-1);
  line-height: 1.55;
  max-width: 56ch;
}

/* Navy service cards on the ivory field (inspo11) */
.service-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

@media (min-width: 48rem) {
  .service-list { gap: var(--space-l); }
}

.service {
  position: relative;
  display: grid;
  gap: var(--space-m);
  padding: var(--space-l) var(--space-m);
  border-radius: 16px;
  background: linear-gradient(155deg, var(--navy-800) 0%, var(--navy-900) 100%);
  border: 1px solid rgba(243, 241, 236, 0.08);
}

@media (min-width: 48rem) {
  .service {
    padding: var(--space-l);
    gap: var(--space-l);
  }
}

/* Card-stacking scroll effect (Scene 4) — a pinned "deck".
   JS adds `.js-stack` on <html> only when motion is allowed; without it the
   cards stay a plain static list (reduced-motion / no-JS safe). The list pins
   for one viewport per card; the cards stack centre-screen as a deck and GSAP
   flicks the front card up and back as you scroll, bringing the next forward. */
.js-stack .services {
  /* `overflow: hidden` (left from the old watermark era) would clip the deck
     and interfere with the pin spacer. */
  overflow: visible;
}

/* Drop the container's flexbox so the deck is a plain block child: a flex item
   can't have pin spacing reserved for it, which let the deck scroll straight
   through. Block margins replace the flex gap around the heading/footnote. */
.js-stack .services__container { display: block; }
.js-stack .services__lead { margin-bottom: var(--space-2xl); }
.js-stack .services__footnote { margin-top: var(--space-2xl); }

.js-stack .service-list {
  position: relative;
  margin: 0;
  gap: 0;
  /* height is set inline by JS to the tallest card, so the deck occupies only
     its own space in normal flow (no viewport-tall gap). The pin then holds it
     centred in the viewport while the cards flick through. */
}

.js-stack .service {
  position: absolute;
  inset: 0;                /* fill the deck box: every card the same size and
                              aligned, so the stack flicks cleanly */
  align-content: center;   /* centre the content within the (taller) card */
  transform-origin: center center;
  box-shadow: 0 30px 70px -24px rgba(8, 14, 26, 0.6);
  will-change: transform, opacity;
}

/* Top row: title (left) and price (right) */
.service__top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: var(--space-m);
  row-gap: var(--space-2xs);
}

@media (min-width: 48rem) {
  .service__top {
    column-gap: var(--space-l);
  }
}

.service__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--gold-300);
  text-wrap: balance;
}

.service__price {
  margin: 0;
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3em;
  font-family: var(--font-display);
  line-height: 1;
}

.service__price-prefix,
.service__price-suffix {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--on-navy-45);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.service__price-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-2);
  color: var(--gold-300);
  letter-spacing: -0.02em;
  line-height: 1;
}

@media (min-width: 48rem) {
  .service__price {
    grid-column: auto;
    padding-left: 0;
    justify-content: flex-end;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

/* Body: copy stacked above the outcomes checklist (inspo11) */
.service__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.service__copy {
  margin: 0;
  color: var(--on-navy-70);
  font-size: var(--step-0);
  line-height: 1.6;
  max-width: 56ch;
}

.service__outcomes {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.service__outcomes-label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.service__outcomes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs) var(--space-l);
}

@media (min-width: 36rem) {
  .service__outcomes-list { grid-template-columns: 1fr 1fr; }
}

.service__outcomes-list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--step-0);
  color: var(--on-navy-100);
  line-height: 1.5;
}

/* Gold check mark — replaces the editorial dot for the card register */
.service__outcomes-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.05rem;
  height: 1.05rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4B477' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Footnote line under the list */
.services__footnote {
  margin: 0 auto;
  text-align: center;
  color: var(--ink-700);
  font-size: var(--step-0);
  max-width: 52ch;
  text-wrap: balance;
}

.services__footnote .link-underline {
  white-space: nowrap;
}

.link-underline {
  color: var(--ink-900);
  font-weight: 500;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  transition: color var(--dur-fast) var(--ease-out), background-size var(--dur-fast) var(--ease-out);
}

.link-underline:hover {
  color: var(--gold-500);
}

.section--navy .link-underline {
  color: var(--on-navy-100);
}

.section--navy .link-underline:hover {
  color: var(--gold-400);
}

.proof {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-2xl);
}

@media (min-width: 48rem) {
  .proof { padding-block: var(--space-3xl); }
}

.proof__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.proof__grain {
  position: absolute;
  inset: -2%;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.94  0 0 0 0 0.92  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: 0.035;
  mix-blend-mode: overlay;
}

.proof__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

@media (min-width: 48rem) {
  .proof__container { gap: var(--space-2xl); }
}

.proof__lead {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.proof__eyebrow { margin: 0; }

.proof__heading {
  margin: 0;
  font-weight: 500;
  font-size: var(--step-3);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--on-navy-100);
  text-wrap: balance;
  max-width: 26ch;
  margin-inline: auto;
}

/* Featured pull-quote — editorial register: ghosted hanging number behind,
   the quote in moderate Space Grotesk weight 500, hairline + attribution
   beneath. Sized to read in 2–3 lines, not single-word wrap. */
.proof__quote {
  position: relative;
  isolation: isolate;
  margin: 0 auto;
  padding-block: var(--space-l);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-l);
  width: 100%;
  max-width: 56rem;
}

.proof__quote-body {
  margin: 0;
  max-width: 28em;
}

.proof__quote-text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 0.95rem + 1.1vw, 1.85rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--on-navy-100);
  text-wrap: balance;
}

.proof__cite {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: var(--space-m);
  row-gap: var(--space-3xs);
  justify-content: center;
  text-align: left;
}

.proof__cite-rule {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--gold-500);
  grid-row: 1 / span 2;
  align-self: center;
}

.proof__cite-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--on-navy-100);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.proof__cite-role {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--on-navy-70);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* Trust points — vertical on mobile, horizontal with gold dot separators on desktop */
.proof-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  text-align: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--on-navy-70);
}

@media (min-width: 48rem) {
  .proof-points {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-s) var(--space-l);
    padding-block: var(--space-l);
    border-top: 1px solid rgba(243, 241, 236, 0.08);
    border-bottom: 1px solid rgba(243, 241, 236, 0.08);
  }
}

.proof-points__item {
  position: relative;
  padding-inline: var(--space-2xs);
}

@media (min-width: 48rem) {
  .proof-points__item + .proof-points__item::before {
    content: "";
    position: absolute;
    left: calc(var(--space-l) * -0.5);
    top: 50%;
    width: 4px;
    height: 4px;
    background: var(--gold-500);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
}

/* =========================================================
   Scene 6 — Meet the Team
   ========================================================= */

.team {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-2xl);
  /* Soft vertical ivory -> gold wash (inspo13/14, on-brand tone). */
  background: linear-gradient(180deg, var(--ivory-50) 10%, rgba(168, 132, 62, 0.18) 100%);
}

@media (min-width: 48rem) {
  .team { padding-block: var(--space-3xl); }
}

.team__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

@media (min-width: 48rem) {
  .team__container { gap: var(--space-2xl); }
}

.team__lead {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.team__heading {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 24ch;
  margin-inline: auto;
}

.team__intro {
  margin: 0 auto;
  color: var(--ink-700);
  font-size: var(--step-1);
  line-height: 1.55;
  max-width: 58ch;
}

/* Team list — alternating asymmetric editorial rows */
.team-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

@media (min-width: 48rem) {
  .team-list { gap: var(--space-3xl); }
}

.team-member {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  align-items: start;
}

@media (min-width: 48rem) {
  .team-member {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-2xl);
    align-items: center;
  }
  .team-member--reverse .team-member__media { order: 2; }
  .team-member--reverse .team-member__body  { order: 1; }
}

/* Portrait figure */
.team-member__media {
  margin: 0;
  position: relative;
}

.team-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(212, 180, 119, 0.10) 0%, rgba(212, 180, 119, 0) 60%),
    linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 100%);
  border: 1px solid var(--ivory-200);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}

/* Subtle paper grain over the placeholder so it reads as intentional */
.team-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.94  0 0 0 0 0.92  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.team-portrait__initials {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  letter-spacing: 0.04em;
  color: var(--gold-400);
  line-height: 1;
  position: relative;
  z-index: 1;
}

/* When a real <img> is added inside .team-member__media, this lets it
   inherit the same aspect/radius and replaces the placeholder. */
.team-member__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--ivory-200);
  box-shadow: var(--shadow-card);
  filter: saturate(0.85) contrast(1.02);
}

/* A photo placed inside the framed .team-portrait fills it edge to edge;
   the frame already supplies the radius, border and shadow (and clips the
   hover zoom), so drop the duplicates on the image itself. */
.team-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.team-member__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.team-member__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink-900);
  text-wrap: balance;
}

.team-member__role {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--ink-700);
  line-height: 1.4;
}

.team-member__years {
  margin: 0 0 var(--space-s);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.team-member__highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.team-member__highlights li {
  position: relative;
  padding-left: var(--space-m);
  font-size: var(--step-0);
  color: var(--ink-900);
  line-height: 1.5;
}

.team-member__highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 5px;
  height: 5px;
  background: var(--gold-500);
  border-radius: 50%;
}

/* =========================================================
   Scene 7 — Public Sector (authority)
   ========================================================= */

.ps {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-2xl);
}

@media (min-width: 48rem) {
  .ps { padding-block: var(--space-3xl); }
}

.ps__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.ps__grain {
  position: absolute;
  inset: -2%;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.94  0 0 0 0 0.92  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: 0.035;
  mix-blend-mode: overlay;
}

.ps__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

@media (min-width: 48rem) {
  .ps__container { gap: var(--space-2xl); }
}

/* Main lead */
.ps__lead {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.ps__heading {
  margin: 0;
  font-weight: 500;
  font-size: var(--step-3);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--on-navy-100);
  text-wrap: balance;
  max-width: 22ch;
  margin-inline: auto;
}

.ps__body {
  margin: 0 auto;
  color: var(--on-navy-70);
  font-size: var(--step-1);
  line-height: 1.55;
  max-width: 56ch;
}

/* Authority strip — text marks only, no fake logos */
.ps-authority {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  padding-block: var(--space-l);
  border-top: 1px solid rgba(168, 132, 62, 0.35);
  border-bottom: 1px solid rgba(168, 132, 62, 0.35);
}

.ps-authority__label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-navy-45);
}

.ps-authority__marks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  letter-spacing: 0.02em;
  color: var(--on-navy-100);
  text-align: center;
}

@media (min-width: 36rem) {
  .ps-authority__marks {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-s) var(--space-xl);
  }
}

.ps-authority__marks li {
  position: relative;
  padding-inline: var(--space-s);
}

@media (min-width: 36rem) {
  .ps-authority__marks li + li::before {
    content: "";
    position: absolute;
    left: calc(var(--space-xl) * -0.5);
    top: 50%;
    width: 5px;
    height: 5px;
    background: var(--gold-500);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
}

/* Accordion — image-9 credential cards */
.ps-accordion {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  max-width: 880px;
  width: 100%;
  margin-inline: auto;
}

.ps-accordion__item {
  position: relative;
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

/* Gold left-border indicator — grows top-to-bottom on open */
.ps-accordion__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gold-500);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-base) var(--ease-inout);
}

.ps-accordion__item.is-open::before { transform: scaleY(1); }

.ps-accordion__item.is-open {
  background: var(--navy-700);
  border-color: var(--navy-700);
}

.ps-accordion__item:hover:not(.is-open) {
  border-color: rgba(168, 132, 62, 0.45);
}

.ps-accordion__heading {
  margin: 0;
  font: inherit;
}

.ps-accordion__head {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--space-m);
  padding: var(--space-m) var(--space-l);
  text-align: left;
  color: var(--on-navy-100);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

@media (min-width: 48rem) {
  .ps-accordion__head {
    padding: var(--space-l) var(--space-xl);
    font-size: var(--step-2);
  }
}

.ps-accordion__title {
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  text-wrap: balance;
}

.ps-accordion__chevron {
  display: inline-flex;
  color: var(--gold-400);
  transition: transform var(--dur-base) var(--ease-inout), color var(--dur-fast) var(--ease-out);
}

.ps-accordion__item.is-open .ps-accordion__chevron {
  transform: rotate(180deg);
  color: var(--gold-300);
}

/* Panel — collapsed by default; JS animates height via GSAP */
.ps-accordion__panel {
  height: 0;
  overflow: hidden;
}

.ps-accordion__panel-inner {
  padding: 0 var(--space-l) var(--space-l);
  color: var(--on-navy-70);
  font-size: var(--step-0);
  line-height: 1.65;
  max-width: 64ch;
  text-align: left;
}

@media (min-width: 48rem) {
  .ps-accordion__panel-inner {
    padding: 0 var(--space-xl) var(--space-l);
  }
}

.ps-accordion__panel-inner p { margin: 0; max-width: none; }

/* Service points — what we deliver */
.ps-services {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  align-items: center;
  text-align: center;
  max-width: 880px;
  margin-inline: auto;
  width: 100%;
}

.ps-services__label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.ps-services__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs) var(--space-l);
  width: 100%;
  max-width: 720px;
  text-align: left;
}

@media (min-width: 36rem) {
  .ps-services__list {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
}

.ps-services__list li {
  position: relative;
  padding-left: var(--space-m);
  font-size: var(--step-0);
  color: var(--on-navy-100);
  line-height: 1.5;
}

.ps-services__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 5px;
  height: 5px;
  background: var(--gold-500);
  border-radius: 50%;
}

/* =========================================================
   Scene 8 — Final CTA + Contact
   ========================================================= */

.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-2xl);
}

@media (min-width: 48rem) {
  .cta { padding-block: var(--space-3xl); }
}

.cta__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

@media (min-width: 48rem) {
  .cta__container { gap: var(--space-2xl); }
}

.cta__lead {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.cta__heading {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 22ch;
  margin-inline: auto;
}

.cta__body {
  margin: 0 auto;
  color: var(--ink-700);
  font-size: var(--step-1);
  line-height: 1.55;
  max-width: 56ch;
}

/* Two-column layout: form (left), contact + promise (right) */
.cta__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: 1080px;
  margin-inline: auto;
  width: 100%;
}

@media (min-width: 56rem) {
  .cta__grid {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-2xl);
    align-items: start;
  }
}

/* Contact form */
.contact-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-l);
  background: var(--ivory-50);
  border: 1px solid var(--ivory-200);
  border-top: 2px solid var(--gold-500);
  border-radius: 0;
}

@media (min-width: 48rem) {
  .contact-form {
    padding: var(--space-xl);
    gap: var(--space-l);
  }
}

.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}

@media (min-width: 36rem) {
  .contact-form__row { grid-template-columns: 1fr 1fr; }
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.contact-form__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-700);
}

.contact-form__input {
  width: 100%;
  padding: 0.85em 1em;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.4;
  color: var(--ink-900);
  background: #FFFFFF;
  border: 1px solid var(--ivory-200);
  border-radius: var(--radius-input);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}

.contact-form__input::placeholder {
  color: var(--ink-500);
}

.contact-form__input:hover {
  border-color: var(--gold-300);
}

.contact-form__input:focus-visible {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(168, 132, 62, 0.18);
}

.contact-form__input[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(166, 73, 60, 0.12);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 9rem;
  font-family: var(--font-body);
}

.contact-form__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
}

@media (min-width: 36rem) {
  .contact-form__actions {
    flex-direction: row;
    align-items: center;
    gap: var(--space-m);
    flex-wrap: wrap;
  }
}

.contact-form__submit {
  min-width: min(14rem, 100%);
}

.contact-form__submit[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

.contact-form__hint {
  margin: 0;
  color: var(--ink-500);
  font-size: var(--step--1);
  max-width: none;
}

.contact-form__status {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.5;
  min-height: 1.25rem;
}

.contact-form__status[data-state="success"] {
  color: var(--success);
  font-weight: 500;
}

.contact-form__status[data-state="error"] {
  color: var(--error);
  font-weight: 500;
}

/* Right column: contact details + promise box */
.contact-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.contact-details__label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-500);
}

.contact-details__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  font-style: normal;
}

.contact-details__row {
  display: inline-block;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  color: var(--ink-900);
  letter-spacing: -0.01em;
  line-height: 1.3;
  max-width: none;
  align-self: flex-start;
}

.contact-details__address {
  color: var(--ink-700);
  font-weight: 500;
}

.promise-box {
  padding: var(--space-l);
  background: var(--navy-900);
  color: var(--on-navy-100);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  position: relative;
  overflow: hidden;
}

.promise-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gold-500);
}

.promise-box__label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.promise-box__body {
  margin: 0;
  color: var(--on-navy-100);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  line-height: 1.4;
  letter-spacing: -0.01em;
  max-width: 32ch;
}

/* =========================================================
   Site footer (real)
   ========================================================= */

.site-footer {
  background: var(--navy-900);
  color: var(--on-navy-70);
  padding-block: var(--space-xl);
  font-size: var(--step--1);
  border-top: 1px solid rgba(243, 241, 236, 0.06);
}

@media (min-width: 48rem) {
  .site-footer { padding-block: var(--space-2xl); }
}

.site-footer__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 56rem) {
  .site-footer__top {
    grid-template-columns: 4fr 8fr;
    gap: var(--space-2xl);
    align-items: start;
  }
}

.site-footer__brand-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  max-width: 36ch;
}

.site-footer .site-footer__brand {
  align-self: flex-start;
}

.site-footer__tagline {
  margin: 0;
  color: var(--on-navy-70);
  line-height: 1.55;
  font-size: var(--step--1);
  max-width: none;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}

@media (min-width: 36rem) {
  .site-footer__nav { grid-template-columns: repeat(3, 1fr); gap: var(--space-m); }
}

@media (min-width: 56rem) {
  .site-footer__nav { gap: var(--space-l); }
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.site-footer__col-label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.site-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.site-footer__col li {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--on-navy-70);
}

.site-footer__col a {
  color: var(--on-navy-70);
  transition: color var(--dur-fast) var(--ease-out);
}

.site-footer__col a:hover {
  color: var(--gold-400);
}

.site-footer__base {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding-top: var(--space-l);
  border-top: 1px solid rgba(243, 241, 236, 0.06);
}

@media (min-width: 36rem) {
  .site-footer__base {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.site-footer__meta {
  margin: 0;
  color: var(--on-navy-45);
  font-size: var(--step--1);
  max-width: none;
}

.site-footer__legal {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}

.site-footer__legal a {
  color: var(--on-navy-70);
  transition: color var(--dur-fast) var(--ease-out);
}

.site-footer__legal a:hover { color: var(--gold-400); }

/* =========================================================
   Reveal helper (used by scene scripts)
   ========================================================= */

/* Gated behind `.js` so no-JS users / failed GSAP load still see content. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
}

/* =========================================================
   Reduced motion
   ========================================================= */

/* --------------------------------------------------------
   Cookie consent banner
   Pinned bottom-left, restrained navy card. Only displayed
   (via [hidden] removal in JS) when GA is configured and no
   choice is stored. Slide-up entrance eases in; the global
   reduced-motion block zeroes the transition.
   -------------------------------------------------------- */

.cookie-banner {
  position: fixed;
  left: var(--space-m, 1rem);
  bottom: var(--space-m, 1rem);
  z-index: 200;
  width: min(26rem, calc(100vw - 2 * var(--space-m, 1rem)));
  background: linear-gradient(155deg, var(--navy-800, #16243d), var(--navy-900, #0F1A2E));
  border: 1px solid rgba(168, 132, 62, 0.32);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(8, 14, 26, 0.45);
  color: var(--ivory-50, #F7F5F0);
}

.cookie-banner[hidden] { display: none; }

.cookie-banner__inner {
  padding: 1.15rem 1.25rem 1.2rem;
}

.cookie-banner__text {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(247, 245, 240, 0.82);
}

.cookie-banner__text a {
  color: var(--gold-300, #D4B477);
  text-underline-offset: 3px;
}

.cookie-banner__actions {
  display: flex;
  gap: 0.65rem;
  justify-content: flex-end;
}

.cookie-banner__btn {
  padding: 0.6rem 1.15rem;
  font-size: 0.88rem;
}

/* Slide-up entrance (skipped under reduced motion via the global block). */
.cookie-banner:not([hidden]) {
  animation: cookie-rise 0.5s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

@keyframes cookie-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 30rem) {
  .cookie-banner {
    left: var(--space-s, 0.75rem);
    right: var(--space-s, 0.75rem);
    bottom: var(--space-s, 0.75rem);
    width: auto;
  }
  .cookie-banner__actions { justify-content: stretch; }
  .cookie-banner__btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* No hover zoom — the scale would snap rather than ease. */
  .value-card:hover .value-card__media img,
  .value-card:focus-within .value-card__media img,
  .problem__transition-media:hover img,
  .team-portrait:hover img {
    transform: none !important;
  }
}