/* Daley Growth Consulting — single-page site */

@font-face {
  font-family: "TAN Harmoni";
  src: url("assets/TanHarmoni.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Daley Growth — official brand palette from style guide.
     F7EEE4 cream / 592C1B deep brown / ECBD6B tan / B5945B bronze / 87ACBA blue / A03E25 rust */
  --cream: #F7EEE4;          /* primary cream background */
  --cream-deep: #ECDFD2;     /* deeper warm cream — cards / lifts */
  --espresso: #592C1B;       /* primary deep brown — dark sections */
  --espresso-dark: #421F11;  /* deeper layered brown */
  --moss: #B5945B;           /* bronze — secondary / hairlines on cream (var name kept for compat) */
  --pink: #ECBD6B;           /* tan/gold — soft accent / wash (var name kept) */
  --tan: #ECBD6B;
  --tan-deep: #B5945B;
  --blue: #87ACBA;           /* dusty blue — secondary accent */
  --orange: #A03E25;         /* rust — primary action accent (var name kept for compat) */
  --orange-hover: #82321E;
  --ink: #A03E25;            /* rust — primary body/heading text on cream */
  --muted-on-cream: #8A3320; /* slightly darker rust for muted body copy */
  --muted-on-dark: #E5D3C5;  /* cream-tinted muted on dark */
  --hairline-dark: rgba(247, 238, 228, 0.10);
  --hairline-light: rgba(89, 44, 27, 0.14);
  --serif: "TAN Harmoni", "Italiana", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --serif-text: "Cormorant Garamond", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: "Glacial Indifference", "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

::selection { background: var(--orange); color: var(--cream); }

/* ---------- Typography ---------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

.eyebrow {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--orange);
  display: inline-block;
}

/* ---------- Layout ---------- */

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

section { position: relative; }

.section-pad {
  padding: 140px 0;
}

@media (max-width: 720px) {
  .section-pad { padding: 88px 0; }
  .wrap { padding: 0 22px; }
}

.bg-cream { background: var(--cream); color: var(--ink); position: relative; }
.bg-dark  { background: var(--espresso); color: var(--cream); position: relative; }
.bg-darkest { background: var(--espresso-dark); color: var(--cream); position: relative; }

/* ---------- Topographic / paper textures ----------
   Two SVG noise-fields layered as faint paper grain on cream
   and topographic contour lines on dark sections.            */
.bg-cream::before,
.bg-dark::before,
.bg-darkest::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-repeat: repeat;
}
/* Direct children sit above the texture so type stays crisp. */
.bg-cream > *,
.bg-dark > *,
.bg-darkest > * { position: relative; z-index: 1; }

/* Cream: organic paper grain — fibers + warm specks, very low contrast. */
.bg-cream::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.17  0 0 0 0 0.10  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  mix-blend-mode: multiply;
  opacity: .55;
}

/* Dark: topographic contour lines + light grain.
   Contours: thin moss-tinted strokes at low alpha that look like
   surveyor's elevation lines. Grain: tiny variance to break flat fill. */
.bg-dark::before,
.bg-darkest::before {
  background-image:
    /* Wavy contour curves (SVG vector) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'><g fill='none' stroke='%23B5945B' stroke-width='1' stroke-opacity='0.18'><path d='M-50 120 C 200 90, 380 180, 560 130 S 920 60, 1260 130'/><path d='M-50 200 C 220 160, 420 260, 620 210 S 980 130, 1260 210'/><path d='M-50 290 C 240 240, 460 350, 680 300 S 1040 210, 1260 300'/><path d='M-50 380 C 260 330, 500 440, 740 390 S 1100 290, 1260 390'/><path d='M-50 470 C 280 420, 540 530, 800 480 S 1160 380, 1260 480'/><path d='M-50 560 C 300 510, 580 620, 860 570 S 1180 470, 1260 570'/><path d='M-50 650 C 320 600, 620 710, 920 660 S 1200 560, 1260 660'/><path d='M-50 740 C 340 690, 660 800, 980 750 S 1220 650, 1260 750'/></g><g fill='none' stroke='%23ECBD6B' stroke-width='0.6' stroke-opacity='0.10'><path d='M-50 160 C 220 130, 400 220, 580 170 S 940 100, 1260 170'/><path d='M-50 340 C 260 290, 480 400, 700 350 S 1060 260, 1260 350'/><path d='M-50 520 C 300 470, 600 580, 880 530 S 1180 430, 1260 530'/></g></svg>"),
    /* Fine grain */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.97  0 0 0 0 0.93  0 0 0 0 0.89  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 1200px 800px, 320px 320px;
  background-repeat: repeat, repeat;
  opacity: .9;
  mix-blend-mode: screen;
}

/* Sections that already use a complex background image (the hero) opt out. */
.no-texture::before { display: none !important; }

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background-color .25s ease, backdrop-filter .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(247, 238, 228, 0.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hairline-light);
}
.nav.on-dark {
  /* hero is dark — invert nav text by default */
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  max-width: 1280px;
  margin: 0 auto;
}
.brand {
  display: inline-flex; align-items: center;
  text-decoration: none;
  color: inherit;
}
/* --- Brand logo (small DG mark for the nav) --- */
.brand-logo {
  display: inline-block;
  width: 240px;
  height: 78px;
  object-fit: contain;
  object-position: left center;
  flex: 0 0 auto;
}
.brand-logo.lg { width: 320px; height: 104px; }
.brand-logo.sm { width: 150px; height: 50px; }
/* The DG mark PNG is dark espresso on transparent — invert to cream on dark sections. */
.brand-logo.on-dark {
  filter: brightness(0) invert(1) sepia(6%) saturate(700%) hue-rotate(-12deg) brightness(1.0);
  opacity: .96;
}

/* --- Daley Growth main logo (stacked Daley/Growth + CONSULTING arch) --- */
.brand-wordmark {
  display: inline-block;
  width: 180px;
  height: 122px;
  object-fit: contain;
  object-position: left center;
  flex: 0 0 auto;
}
.brand-wordmark.center { object-position: center; }
.brand-wordmark.xl { width: 280px; height: 190px; }
/* Compact size for the nav bar */
.brand-wordmark.nav-wordmark {
  width: 132px;
  height: 90px;
  margin: -8px 0;
}
/* When the wordmark sits on a cream section, swap to the rust variant so
   it reads with high contrast against the cream surface. */
.brand-wordmark.to-dark {
  content: url("assets/daley-logo-rust.png");
}
.nav-links {
  display: flex; gap: 34px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  color: inherit;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 450;
  opacity: .82;
  transition: opacity .15s ease, color .15s ease;
}
.nav-links a:hover { opacity: 1; color: var(--orange); }

.nav-right { display: flex; align-items: center; gap: 22px; }

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-inner { padding: 16px 22px; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 8px 22px -10px rgba(160, 62, 37, 0.55);
}
.btn-primary:hover { background: var(--orange-hover); }

.btn-primary.lg {
  padding: 18px 30px;
  font-size: 16px;
}

.btn-secondary {
  background: var(--blue);
  color: var(--espresso);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 22px -10px rgba(89, 122, 138, 0.55);
}
.btn-secondary:hover { background: #6F95A4; color: var(--espresso); }
.btn-secondary .arrow {
  display: inline-block;
  transition: transform .2s ease;
}
.btn-secondary:hover .arrow { transform: translateY(3px); }
.btn-secondary.lg {
  padding: 18px 30px;
  font-size: 16px;
}

.btn-ghost {
  background: transparent;
  color: inherit;
  opacity: .9;
  padding: 10px 0;
  border-radius: 0;
}
.btn-ghost .arrow { transition: transform .2s ease; }
.btn-ghost:hover .arrow { transform: translateX(4px); }
.btn-ghost:hover { transform: none; opacity: 1; color: var(--orange); }

/* ---------- HERO ---------- */

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 140px 0 100px;
}

/* ---------- YELLOW HERO VARIANT ---------- */
/* Replaces the dark espresso hero with a brand-yellow field hosting an
   AI-network canvas + small ops-style readouts. Text colors flip to
   espresso so they read against the warm yellow ground. */
.hero.hero-yellow {
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(255, 213, 132, 0.55), transparent 60%),
    radial-gradient(110% 80% at 10% 95%, rgba(160, 62, 37, 0.10), transparent 60%),
    #ECBD6B;
  color: var(--espresso);
}

/* ---------- Tech texture overlay (yellow hero ONLY) ----------
   Two stacked layers, both pointer-events:none, z-index:0 so they
   sit under .hero-title-block (z:3) and .hero-stage / .hero-bottom (z:2).
 
   ::before — static "circuit board" wallpaper:
     - fine espresso dot grid (radial-gradient @ 22px)
     - inline-SVG circuit tile w/ traces + nodes (160px)
     - masked w/ a radial fade so it dies into the existing
       yellow->sunlight radial gradients at the corners, keeping
       the headline area calm.
 
   ::after — slow downward "scan beam":
     - thin espresso band w/ soft falloff, multiply-blended into
       the yellow so it darkens the texture beneath as it passes.
     - 9s linear loop. Disabled under prefers-reduced-motion. */
.hero.hero-yellow::before,
.hero.hero-yellow::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
 
.hero.hero-yellow::before {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(89, 44, 27, 0.22) 1px, transparent 1.6px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='none' stroke='%23592C1B' stroke-width='1' stroke-linecap='square' opacity='0.32'><path d='M20 20 H60 V52 H100 V92 H132'/><path d='M132 92 V128'/><path d='M20 108 H44 V136 H84'/><path d='M120 20 V44 H148'/><path d='M76 20 V36'/></g><g fill='%23592C1B' opacity='0.42'><circle cx='20' cy='20' r='2'/><circle cx='60' cy='52' r='1.8'/><circle cx='100' cy='92' r='2.2'/><circle cx='132' cy='92' r='1.6'/><circle cx='132' cy='128' r='1.8'/><circle cx='20' cy='108' r='1.8'/><circle cx='84' cy='136' r='2'/><circle cx='148' cy='44' r='1.8'/><circle cx='76' cy='36' r='1.6'/><rect x='98' y='50' width='4' height='4'/><rect x='42' y='106' width='4' height='4'/></g></svg>");
  background-size: 22px 22px, 160px 160px;
  background-position: 0 0, 0 0;
  -webkit-mask-image: radial-gradient(120% 95% at 50% 60%, #000 30%, rgba(0,0,0,0.55) 65%, transparent 100%);
          mask-image: radial-gradient(120% 95% at 50% 60%, #000 30%, rgba(0,0,0,0.55) 65%, transparent 100%);
  opacity: 0.9;
}
 
.hero.hero-yellow::after {
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(89, 44, 27, 0.00) 40%,
      rgba(89, 44, 27, 0.10) 49%,
      rgba(89, 44, 27, 0.18) 50%,
      rgba(89, 44, 27, 0.10) 51%,
      rgba(89, 44, 27, 0.00) 60%,
      transparent 100%);
  background-size: 100% 220%;
  background-repeat: no-repeat;
  background-position: 0 -25%;
  mix-blend-mode: multiply;
  animation: heroScan 9s linear infinite;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 88%, transparent 100%);
}
 
@keyframes heroScan {
  0%   { background-position: 0 -25%; }
  100% { background-position: 0 125%; }
}
 
@media (prefers-reduced-motion: reduce) {
  .hero.hero-yellow::after { animation: none; opacity: 0.5; }
}

/* On yellow, the AI network is the star — keep it crisp, no opacity dip. */
.hero.hero-yellow .hero-canvas { opacity: 1; }

/* Vignette: subtle yellow→deeper-yellow wash on the left for headline
   contrast, fade into the cream of the next section at the bottom. */
.hero.hero-yellow .hero-vignette {
  background:
    radial-gradient(60% 50% at 30% 55%, rgba(247, 238, 228, 0.32), transparent 65%),
    linear-gradient(180deg, transparent 76%, var(--cream) 100%);
}

/* Text recolor for yellow ground */
.hero.hero-yellow .hero-overline { color: var(--espresso); opacity: 0.85; }
.hero.hero-yellow .hero-primary {
  /* Match the Daley wordmark: cream fill, espresso outline.
     paint-order paints the stroke first so letterforms stay readable
     instead of the stroke eating into the fill. */
  color: var(--cream);
  -webkit-text-stroke: 2.2px var(--espresso);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 rgba(89, 44, 27, 0.18);
  /* Headline — sized so the wordmark treatment reads bold
     without crowding the rest of the hero. */
  max-width: 38ch;
  font-size: clamp(54px, 8.4vw, 132px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  text-wrap: balance;
  transition: -webkit-text-stroke-width 0.9s ease, text-shadow 0.9s ease;
}
/* When the title takes the stage over the still-running animation,
   thicken the stroke and add a soft drop-shadow so it pops cleanly
   against any color happening behind it. */
.hero.hero-yellow.hero-titled .hero-primary {
  -webkit-text-stroke-width: 3px;
  text-shadow:
    0 4px 0 rgba(57, 26, 15, 0.32),
    0 14px 40px rgba(57, 26, 15, 0.55);
}
.hero.hero-yellow.hero-titled .hero-headline {
  color: var(--cream);
  text-shadow: 0 2px 18px rgba(57, 26, 15, 0.6);
}
@media (max-width: 720px) {
  .hero.hero-yellow .hero-primary {
    -webkit-text-stroke-width: 1.5px;
    font-size: clamp(40px, 12vw, 76px);
    max-width: 22ch;
  }
}
.hero.hero-yellow .hero-headline {
  /* Subheading styled to match the "Build. Teach. Scale." overline:
     sans, uppercase, letter-spaced — pulled up tight against the H1. */
  font-family: var(--sans);
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--espresso);
  line-height: 1.4;
  margin-top: 14px;
  max-width: none;
}
.hero.hero-yellow .hero-headline .beat {
  display: block;
}
@media (max-width: 720px) {
  .hero.hero-yellow .hero-headline {
    font-size: 11.5px;
    letter-spacing: 0.2em;
    margin-top: 10px;
  }
}
.hero.hero-yellow .hero-headline .beat.accent { color: var(--orange); }
.hero.hero-yellow .hero-meta { color: rgba(89, 44, 27, 0.7); }
.hero.hero-yellow .hero-meta .scroll-cue .line { background: rgba(89, 44, 27, 0.55); }

/* Ghost CTA needs a darker border/text on yellow */
.hero.hero-yellow .btn-ghost { color: var(--espresso); }
.hero.hero-yellow .btn-ghost::after,
.hero.hero-yellow .btn-ghost {
  border-color: rgba(89, 44, 27, 0.35);
}
.hero.hero-yellow .btn-ghost:hover { color: var(--orange); }

/* ---------- Ops-control readouts (top of hero) ---------- */
.hero-readouts {
  position: absolute;
  top: 96px;
  left: 0; right: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(28px, 5vw, 64px);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--espresso);
  opacity: 0.88;
}
.hero-readout {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.hero-readout .hr-tag {
  background: var(--espresso);
  color: var(--cream);
  padding: 3px 8px 4px;
  letter-spacing: 0.16em;
  font-size: 10.5px;
}
.hero-readout .hr-sep { opacity: 0.5; }
.hero-readout .hr-val { opacity: 0.85; }

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hero-status .hs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(160, 62, 37, 0.18);
  animation: hsBlink 1.4s ease-in-out infinite;
}
.hero-status .hs-text {
  display: inline-block;
  min-width: 22ch;
  text-align: right;
}
@keyframes hsBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (max-width: 820px) {
  .hero-readouts {
    top: 86px;
    padding: 0 22px;
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .hero-readout .hr-val { display: none; }
  .hero-status .hs-text { min-width: 0; }
}
@media (max-width: 540px) {
  .hero-status .hs-text { font-size: 9.5px; }
}

/* ---------- Hero scenario panel ----------
/* ---------- Hero desk animation ----------
   Two sequenced scenes (~6s each, ~13s total) showing a Digital
   Employee acting on multiple tasks at once for a real employee.
   Left = person card + the trigger that came in.
   Center = pulsing link to the Digital Employee.
   Right = an action stream of completed tasks animating in one
   at a time. After both scenarios play, the H1 title fades in
   over a dimmed version of this composition.                       */

.hero-desk {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 132px clamp(22px, 4vw, 56px) 116px;
  opacity: 1;
  transition: opacity 0.55s cubic-bezier(.4,.0,.2,1),
              filter 1.2s cubic-bezier(.4,.0,.2,1);
}
.hero-desk.out { opacity: 0; }

/* When the title lands the whole animation dims back so the H1
   has the floor — keeps motion alive but firmly in supporting role. */
.hero.hero-titled .hero-desk {
  opacity: 0.28;
  filter: saturate(0.65);
}

.hd-counter {
  position: absolute;
  /* Sits below the DGC // DIGITAL EMPLOYEE NETWORK readout so the
     two never overlap on tall hero layouts. */
  top: 148px;
  left: clamp(28px, 5vw, 64px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--espresso);
  opacity: 0.7;
}
.hd-counter-num { color: var(--orange); }
.hd-counter-sep { opacity: 0.45; }
.hd-counter-tag {
  background: var(--espresso);
  color: var(--cream);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: 0.20em;
}

.hd-stage {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 140px minmax(320px, 1fr);
  align-items: center;
  gap: clamp(8px, 1.6vw, 24px);
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

/* -------- LEFT — person + trigger -------- */
.hd-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
}
.hd-person,
.hd-trigger {
  width: 100%;
  max-width: 360px;
  background: rgba(247, 238, 228, 0.78);
  border: 1px solid rgba(89, 44, 27, 0.24);
  border-radius: 10px;
  padding: 14px 16px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 14px 36px -24px rgba(89, 44, 27, 0.4);
  opacity: 0;
  transform: translateX(-12px);
  animation: hdSlideIn 0.7s cubic-bezier(.4,.0,.2,1) both;
}
.hd-person {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hd-person-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--espresso);
  color: var(--cream);
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  flex: none;
}
.hd-person-status {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--orange);
  border: 2px solid rgba(247, 238, 228, 0.95);
  animation: hsBlink 1.6s ease-in-out infinite;
}
.hd-person-name {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--espresso);
  letter-spacing: -0.005em;
}
.hd-person-role {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--orange);
  margin-top: 2px;
}
.hd-person-org {
  font-family: var(--sans);
  font-size: 11px;
  color: rgba(89, 44, 27, 0.65);
  margin-top: 2px;
}

.hd-trigger-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.hd-trigger-kind {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.20em;
  color: var(--espresso);
  opacity: 0.78;
  text-transform: uppercase;
}
.hd-trigger-meta {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: rgba(89, 44, 27, 0.55);
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}
.hd-trigger-from {
  font-family: var(--serif-text);
  font-size: 12px;
  color: var(--espresso);
  opacity: 0.82;
  margin-bottom: 3px;
}
.hd-trigger-subj {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.18;
  color: var(--espresso);
  letter-spacing: -0.005em;
  margin-bottom: 8px;
}
.hd-trigger-body {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.42;
  color: rgba(89, 44, 27, 0.82);
}

/* -------- CENTER — Digital Employee link -------- */
.hd-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 100px;
  opacity: 0;
  animation: hdFadeIn 0.7s cubic-bezier(.4,.0,.2,1) 0.5s both;
}
.hd-link-line {
  position: absolute;
  top: 50%;
  left: -6px;
  right: -6px;
  height: 1px;
  background: linear-gradient(to right, rgba(89, 44, 27, 0.18), rgba(89, 44, 27, 0.45) 50%, rgba(89, 44, 27, 0.18));
  transform: translateY(-0.5px);
  overflow: visible;
}
.hd-link-pulse {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px rgba(160, 62, 37, 0.7);
  animation: hdPulseTravel 2.4s cubic-bezier(.4,.0,.2,1) infinite;
}
.hd-link-pulse-2 { animation-delay: 0.8s; }
.hd-link-pulse-3 { animation-delay: 1.6s; }

.hd-link-node {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: var(--espresso);
  color: var(--cream);
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 12px 32px -16px rgba(89, 44, 27, 0.6);
}
.hd-link-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(247, 238, 228, 0.65);
  animation: hsBlink 1.2s ease-in-out infinite;
}
.hd-link-label {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}
.hd-link-sub {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 238, 228, 0.6);
}

/* -------- RIGHT — action stream -------- */
.hd-right { display: flex; }
.hd-stream {
  width: 100%;
  max-width: 420px;
  background: var(--espresso);
  color: var(--cream);
  border-radius: 12px;
  padding: 18px 20px 16px;
  box-shadow: 0 24px 60px -28px rgba(89, 44, 27, 0.65);
  opacity: 0;
  transform: translateX(12px);
  animation: hdSlideInRight 0.7s cubic-bezier(.4,.0,.2,1) 0.5s both;
}
.hd-stream-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(247, 238, 228, 0.12);
}
.hd-stream-title {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--tan, #ECBD6B);
  text-transform: uppercase;
}
.hd-stream-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(247, 238, 228, 0.75);
}
.hd-stream-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(160, 62, 37, 0.25);
  animation: hsBlink 1.2s ease-in-out infinite;
  display: inline-block;
}

.hd-actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hd-action {
  display: grid;
  grid-template-columns: 46px 22px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px dashed rgba(247, 238, 228, 0.10);
  opacity: 0;
  transform: translateY(6px);
  animation: hdActionIn 0.55s cubic-bezier(.4,.0,.2,1) both;
}
.hd-action:last-child { border-bottom: none; }
.hd-action-time {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(236, 189, 107, 0.85);
}
.hd-action-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--cream);
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 0 0 0 3px rgba(160, 62, 37, 0.15);
}
.hd-action-check svg { width: 14px; height: 14px; }
.hd-action-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.hd-action-label {
  font-family: var(--serif);
  font-size: 14.5px;
  color: var(--cream);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.hd-action-detail {
  font-family: var(--sans);
  font-size: 10.5px;
  color: rgba(247, 238, 228, 0.6);
  letter-spacing: 0.04em;
}

.hd-summary {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(247, 238, 228, 0.14);
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 238, 228, 0.78);
  opacity: 0;
  animation: hdActionIn 0.6s cubic-bezier(.4,.0,.2,1) both;
}
.hd-summary-num { color: var(--tan, #ECBD6B); font-weight: 700; }
.hd-summary-sep { opacity: 0.6; }

/* Slow progress bar at the bottom — paces each ~6s scene */
.hd-progress {
  position: absolute;
  bottom: 78px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(140px, 18vw, 240px);
  height: 1px;
  background: rgba(89, 44, 27, 0.18);
  z-index: 1;
}
.hd-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--orange);
  animation: hdTick 7500ms linear forwards;
}

@keyframes hdSlideIn {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes hdSlideInRight {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes hdFadeIn {
  to { opacity: 1; }
}
@keyframes hdActionIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hdTick {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes hdPulseTravel {
  0%   { left: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Title-scrim — a radial dim that fades in WITH the title so the H1
   has guaranteed contrast over the (still running) animation. */
.hero-title-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(58% 48% at 50% 50%, rgba(57, 26, 15, 0.55), rgba(57, 26, 15, 0.22) 55%, transparent 78%);
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(.4,.0,.2,1);
}
.hero.hero-titled .hero-title-scrim { opacity: 1; }

@media (max-width: 820px) {
  /* The readouts wrap to one tighter row on small screens — pull the
     counter down a bit more so it still clears them. */
  .hd-counter { top: 138px; }
}
@media (max-width: 1200px) {
  .hd-stage {
    grid-template-columns: minmax(240px, 1fr) 110px minmax(280px, 1fr);
  }
  .hd-stream { max-width: 360px; }
  .hd-action-label { font-size: 13px; }
}
@media (max-width: 1020px) {
  .hd-stage {
    grid-template-columns: minmax(220px, 1fr) 90px minmax(260px, 1fr);
    gap: 6px;
  }
  .hd-person, .hd-trigger { max-width: 320px; padding: 12px 14px; }
  .hd-stream { padding: 14px 16px 12px; }
  .hd-trigger-subj { font-size: 13.5px; }
  .hd-trigger-body { font-size: 11.5px; }
}
@media (max-width: 920px) {
  .hero-desk { display: none; }
}

/* ---------- Title reveal choreography ----------
   For the first 15 seconds the hero shows the demo cards only — the H1,
   subhead, and CTAs sit at opacity 0 just below their natural position.
   When the host adds .hero-titled, they fade up in a slow staggered
   sequence so the title "lands" on top of the running demo. */
.hero.hero-yellow .hero-primary,
.hero.hero-yellow .hero-headline,
.hero.hero-yellow .hero-actions {
  transition:
    opacity 1.0s cubic-bezier(.4,.0,.2,1),
    transform 1.0s cubic-bezier(.4,.0,.2,1);
}
.hero.hero-demo .hero-primary,
.hero.hero-demo .hero-headline,
.hero.hero-demo .hero-actions {
  opacity: 0;
  transform: translateY(22px);
  pointer-events: none;
}
.hero.hero-titled .hero-primary { transition-delay: 0s; }
.hero.hero-titled .hero-headline { transition-delay: 0.32s; }
.hero.hero-titled .hero-actions { transition-delay: 0.58s; }

/* ---------- "LIVE DEMO" center stamp ----------
   Sits in the lower-center of the hero during the demo phase. Quiet,
   uppercase, with a slow pulsing dot. Fades away as the title lands. */
.hero-demo-stamp {
  position: absolute;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(89, 44, 27, 0.30);
  background: rgba(247, 238, 228, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--espresso);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(.4,.0,.2,1);
}
.hero.hero-demo .hero-demo-stamp { opacity: 1; }
.hero-demo-stamp .hds-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(160, 62, 37, 0.18);
  animation: hsBlink 1.5s ease-in-out infinite;
}
@media (max-width: 920px) {
  .hero-demo-stamp { display: none; }
  /* On mobile we skip the demo entirely — show the H1 immediately. */
  .hero.hero-demo .hero-primary,
  .hero.hero-demo .hero-headline,
  .hero.hero-demo .hero-actions {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  opacity: .92;
  pointer-events: none;
}
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Subtle darken on the left so the headline still reads, but very gentle. */
    linear-gradient(95deg, rgba(66, 31, 17, 0.55) 0%, rgba(66, 31, 17, 0.18) 38%, transparent 70%),
    /* Tiny fade into the next section at the bottom. */
    linear-gradient(180deg, transparent 78%, var(--espresso) 100%);
}

.hero-inner { position: relative; z-index: 2; text-align: center; }

/* Center every block inside the hero column */
.hero-inner > * { margin-left: auto; margin-right: auto; }
.hero-inner .hero-overline,
.hero-inner .hero-primary,
.hero-inner .hero-headline { display: block; }
.hero-inner .hero-headline {
  /* still single-column stack of beats, but the whole block is centered */
  text-align: center;
}
.hero-inner .hero-actions {
  justify-content: center;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 8px;
  border: 1px solid var(--hairline-dark);
  border-radius: 999px;
  background: rgba(247, 238, 228,0.04);
  font-size: 13px;
  color: var(--muted-on-dark);
  margin-bottom: 36px;
}
.hero-tag .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(160, 62, 37,0.20);
}

.hero-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.hero-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--orange);
}

/* Hero overline — small brand stamp above the H1 */
.hero-overline {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--tan);
  opacity: 0.92;
  margin-bottom: 22px;
}
@media (max-width: 720px) {
  .hero-overline { font-size: 11.5px; letter-spacing: 0.26em; margin-bottom: 16px; }
}

/* The hero primary headline — the single largest piece of type on the site. */
.hero-primary {
  font-family: var(--serif);
  font-size: clamp(54px, 9vw, 132px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--cream);
  font-weight: 400;
  max-width: 18ch;
  padding-bottom: 0.06em;
  margin: 0 auto;
  text-wrap: balance;
  text-align: center;
}
@media (max-width: 720px) {
  .hero-primary {
    font-size: clamp(44px, 12vw, 80px);
    line-height: 1.02;
    letter-spacing: -0.018em;
  }
  .hero-primary br { display: none; }
}

.hero h1 {
  font-size: clamp(44px, 7.5vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 18ch;
  padding-bottom: 0.12em;
}
.hero h1 .accent {
  color: var(--orange);
  font-style: italic;
  font-family: var(--serif-text);
}

/* Three-beat supporting headline (under the primary) */
.hero-headline {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--cream);
  max-width: 22ch;
  margin: 36px auto 0;
  display: block;
  text-align: center;
}
.hero-headline .beat {
  display: block;
}
.hero-headline .beat.accent {
  color: var(--orange);
  font-style: italic;
  font-family: var(--serif-text);
}
@media (max-width: 720px) {
  .hero-headline {
    font-size: clamp(22px, 6vw, 32px);
    margin-top: 28px;
  }
}

.hero-sub {
  margin-top: 28px;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--muted-on-dark);
  max-width: 56ch;
}

.hero-actions {
  margin-top: 44px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.hero-meta {
  position: absolute;
  bottom: 36px; left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--muted-on-dark);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-meta .scroll-cue {
  display: inline-flex; align-items: center; gap: 10px;
}
.hero-meta .scroll-cue .line {
  width: 28px; height: 1px; background: var(--muted-on-dark); display: inline-block;
}

@media (max-width: 720px) {
  .hero-meta { display: none; }
}

/* ---------- Problem ---------- */

.problem h2 {
  font-size: clamp(36px, 5.2vw, 64px);
  line-height: 1.06;
  max-width: 18ch;
  margin-top: 28px;
}
.problem-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 72px;
  align-items: center;
}
.problem-text { min-width: 0; }
.problem-body {
  margin-top: 40px;
  display: block;
  max-width: 56ch;
}
.problem-body p {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--muted-on-cream);
}
.problem-body p + p {
  margin-top: 22px;
}
@media (max-width: 920px) {
  .problem-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* --- Workflow animation --- */
.problem-anim {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin-left: auto;
}
.workflow-anim {
  position: relative;
  width: 100%;
  padding: 28px 24px;
  background:
    radial-gradient(120% 80% at 30% 50%, rgba(236, 189, 107, 0.10), transparent 65%),
    var(--cream-deep);
  border: 1px solid var(--hairline-light);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(247, 238, 228, 0.6) inset,
    0 18px 40px -28px rgba(89, 44, 27, 0.35);
}
.workflow-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 500 / 400;
}

/* Soft pulse on the molecule satellites — wave around the ring */
.workflow-svg .wf-sat {
  transform-origin: center;
  animation: wfSatPulse 3.5s ease-in-out infinite;
}
.workflow-svg .wf-sat-0 { animation-delay: 0s; }
.workflow-svg .wf-sat-1 { animation-delay: 0.5s; }
.workflow-svg .wf-sat-2 { animation-delay: 1.0s; }
.workflow-svg .wf-sat-3 { animation-delay: 1.5s; }
.workflow-svg .wf-sat-4 { animation-delay: 2.0s; }
@keyframes wfSatPulse {
  0%, 100% { fill: #ECBD6B; }
  35%      { fill: #A03E25; }
}

/* Hub-orbit dashed circle slow spin */
@keyframes wfHubSpin {
  to { transform: rotate(360deg); }
}

/* Output card items — staggered fade-in loop. We animate opacity only;
   animating `transform` here would clobber the SVG <g transform="translate(...)">
   positioning attribute and stack every line on top of the header. */
.workflow-svg .wf-out {
  opacity: 0;
  animation: wfOutIn 7.2s ease-out infinite;
}
.workflow-svg .wf-out-0 { animation-delay: 0.4s;  }
.workflow-svg .wf-out-1 { animation-delay: 1.6s;  }
.workflow-svg .wf-out-2 { animation-delay: 2.8s;  }
.workflow-svg .wf-out-3 { animation-delay: 4.0s;  }
@keyframes wfOutIn {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  72%  { opacity: 1; }
  82%  { opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .workflow-svg .wf-sat,
  .workflow-svg .wf-out,
  .workflow-svg .wf-packet,
  .workflow-svg [style*="wfHubSpin"] { animation: none !important; }
  .workflow-svg .wf-out { opacity: 1; }
}

@media (max-width: 920px) {
  .problem-anim { max-width: 520px; margin-left: 0; margin-right: auto; }
}

/* ---------- Services ---------- */

.services-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}
.services-head h2 {
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.06;
  margin-top: 22px;
  max-width: 14ch;
}
.services-head p {
  max-width: 36ch;
  color: var(--muted-on-dark);
  font-size: 17px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 920px) {
  .services-grid { grid-template-columns: 1fr; }
}

.svc-card {
  position: relative;
  padding: 36px 32px 32px;
  border: 1px solid var(--hairline-dark);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(247, 238, 228,0.025), rgba(247, 238, 228,0.0));
  transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
  display: flex;
  flex-direction: column;
  min-height: 440px;
  overflow: hidden;
}
.svc-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s ease;
}
.svc-card:hover {
  transform: translateY(-4px);
  border-color: rgba(247, 238, 228,0.18);
  background: linear-gradient(180deg, rgba(247, 238, 228,0.05), rgba(247, 238, 228,0.01));
}
.svc-card:hover::before { transform: scaleX(1); }

.svc-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  padding: 5px 10px;
  border: 1px solid rgba(160, 62, 37,0.36);
  border-radius: 999px;
  margin-bottom: 22px;
}
.svc-tag-spacer { height: 32px; }

.svc-num {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--muted-on-dark);
  margin-bottom: 12px;
}
.svc-card h3 {
  font-size: 28px;
  line-height: 1.15;
  margin-bottom: 16px;
}
.svc-card p {
  color: var(--muted-on-dark);
  font-size: 15.5px;
  line-height: 1.6;
  margin-bottom: 28px;
}
.svc-price {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--cream);
  padding-top: 20px;
  border-top: 1px solid var(--hairline-dark);
  margin-bottom: 22px;
}
.svc-price small {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted-on-dark);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-weight: 500;
}
.svc-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cream);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  padding-top: 4px;
}
.svc-cta .arrow { transition: transform .2s ease; color: var(--orange); }
.svc-cta:hover .arrow { transform: translateX(4px); }

/* ---------- Capabilities ("What we build") ---------- */
/* Mirrors the proof-card structure so the two grids read as one design
   family: animated illustration on top with a tag pill, body always
   visible below with title + descriptive copy. */

.capabilities .cap-head {
  max-width: 900px;
  margin-bottom: 56px;
}
.capabilities .cap-head h2 {
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1.06;
  margin-top: 22px;
}
.capabilities .cap-intro {
  margin-top: 28px;
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--muted-on-dark);
  max-width: 70ch;
}

.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;          /* matches .proof-grid exactly */
}
@media (max-width: 900px) {
  .cap-grid { grid-template-columns: 1fr; gap: 18px; }
}

.cap-card {
  border: 1px solid var(--hairline-dark);
  border-radius: 16px;
  background: rgba(247, 238, 228, 0.025);
  overflow: hidden;
  position: relative;
  transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
}
.cap-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--tan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
  z-index: 2;
}
.cap-card:hover {
  transform: translateY(-4px);
  border-color: rgba(247, 238, 228, 0.18);
  background: rgba(247, 238, 228, 0.04);
}
.cap-card:hover::before { transform: scaleX(1); }

.cap-art {
  position: relative;
  aspect-ratio: 16 / 11;
  background:
    radial-gradient(120% 90% at 50% 0%,
      rgba(160, 62, 37, 0.10) 0%,
      rgba(160, 62, 37, 0) 55%),
    linear-gradient(180deg,
      rgba(247, 238, 228, 0.025),
      rgba(247, 238, 228, 0.005));
  border-bottom: 1px solid var(--hairline-dark);
  overflow: hidden;
  padding: 56px 12px 16px;
}
.cap-art .cap-svg {
  position: absolute;
  inset: 56px 12px 16px 12px;
  width: calc(100% - 24px);
  height: calc(100% - 72px);
  display: block;
}

.cap-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tan);
  font-weight: 500;
  background: rgba(30, 16, 8, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 5px 11px;
  border: 1px solid rgba(236, 189, 107, 0.36);
  border-radius: 999px;
}

.cap-body { padding: 24px 26px 28px; }
.cap-body h3 {
  font-size: 21px;
  line-height: 1.18;
  margin-bottom: 12px;
  letter-spacing: -0.005em;
  color: var(--cream);
}
.cap-body p {
  font-size: 14.5px;
  color: var(--muted-on-dark);
  line-height: 1.6;
}

/* --- Capability illustration animations (mirror WorkArt vocabulary) --- */

/* Agents: breathing core glow + sequenced satellite check ticks */
.cap-svg-agents .cag-glow {
  transform-origin: 240px 130px;
  animation: cagBreathe 3.4s ease-in-out infinite;
}
@keyframes cagBreathe {
  0%, 100% { opacity: 0.6; transform: scale(0.96); }
  50%      { opacity: 1;   transform: scale(1.05); }
}
.cap-svg-agents .cag-check,
.cap-svg-agents .cag-check-bg {
  opacity: 0;
  animation: cagCheckIn 9s ease-in-out infinite;
}
@keyframes cagCheckIn {
  0%, 4%   { opacity: 0; }
  10%, 88% { opacity: 1; }
  100%     { opacity: 0; }
}

/* Training: breathing knowledge core + person-glyph ring pulse */
.cap-svg-training .ctr-glow {
  transform-origin: 240px 130px;
  animation: ctrBreathe 3.4s ease-in-out infinite;
}
@keyframes ctrBreathe {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50%      { opacity: 0.95; transform: scale(1.06); }
}
.cap-svg-training .ctr-person {
  transform-box: fill-box;
  transform-origin: center;
  animation: ctrPersonPulse 3s ease-in-out infinite;
}
.cap-svg-training .ctr-person-0 { animation-delay: 0.0s; }
.cap-svg-training .ctr-person-1 { animation-delay: 0.2s; }
.cap-svg-training .ctr-person-2 { animation-delay: 0.4s; }
.cap-svg-training .ctr-person-3 { animation-delay: 0.6s; }
.cap-svg-training .ctr-person-4 { animation-delay: 0.8s; }
.cap-svg-training .ctr-person-5 { animation-delay: 1.0s; }
.cap-svg-training .ctr-person-6 { animation-delay: 1.2s; }
.cap-svg-training .ctr-person-7 { animation-delay: 1.4s; }
@keyframes ctrPersonPulse {
  0%, 60%, 100% { opacity: 0.55; }
  30%           { opacity: 1; }
}

.cap-cta {
  margin-top: 64px;
  display: flex;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .cap-svg-agents .cag-glow,
  .cap-svg-agents .cag-check,
  .cap-svg-agents .cag-check-bg,
  .cap-svg-training .ctr-glow,
  .cap-svg-training .ctr-person { animation: none; opacity: 1; transform: none; }
}

/* ---------- How it works (refined for new content) ---------- */

.how-head .how-intro {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted-on-cream);
  max-width: 64ch;
}
/* Make the how-it-works step numbers visually consistent with cap-num style */
.step-num {
  font-family: var(--serif-text);
  font-style: italic;
  font-weight: 500;
}

.how-head { margin-bottom: 80px; max-width: 720px; }
.how-head h2 {
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.06;
  margin-top: 22px;
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
  position: relative;
}
.how-grid::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 4%;
  right: 4%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-light) 10%, var(--hairline-light) 90%, transparent);
}
@media (max-width: 920px) {
  .how-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .how-grid::before { display: none; }
}
@media (max-width: 560px) {
  .how-grid { grid-template-columns: 1fr; }
}

.step {
  position: relative;
  padding-top: 0;
}
.step-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--hairline-light);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--espresso);
  position: relative;
  z-index: 1;
  margin-bottom: 24px;
  transition: border-color .25s ease, color .25s ease;
}
.step:hover .step-num {
  border-color: var(--orange);
  color: var(--orange);
}
.step h3 {
  font-size: 22px;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.step p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-on-cream);
}
/* Emotional close on the final step — slightly heavier, in rust ink so it
   reads as the section's payoff line rather than another body sentence. */
.step .step-closer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline-light);
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* ---------- Proof ---------- */

.proof-head {
  margin-bottom: 64px;
  max-width: 760px;
}
.proof-head h2 {
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.06;
  margin-top: 22px;
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 920px) {
  .proof-grid { grid-template-columns: 1fr; }
}

.proof-card {
  border: 1px solid var(--hairline-dark);
  border-radius: 16px;
  background: rgba(247, 238, 228,0.025);
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease;
  position: relative;
}
.proof-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
  z-index: 2;
}
.proof-card:hover { transform: translateY(-4px); border-color: rgba(247, 238, 228,0.18); }
.proof-card:hover::before { transform: scaleX(1); }

.proof-img {
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(247, 238, 228,0.05) 0 12px,
      rgba(247, 238, 228,0.02) 12px 24px
    ),
    rgba(247, 238, 228,0.02);
  border-bottom: 1px solid var(--hairline-dark);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.proof-img-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  background: var(--espresso);
  padding: 6px 10px;
  border: 1px solid var(--hairline-dark);
  border-radius: 4px;
}

/* New illustrated artwork area (replaces .proof-img). NDA-friendly diagrams. */
.proof-art {
  position: relative;
  aspect-ratio: 16 / 11;
  background:
    radial-gradient(120% 90% at 50% 0%,
      rgba(160, 62, 37,0.10) 0%,
      rgba(160, 62, 37,0) 55%),
    linear-gradient(180deg,
      rgba(247, 238, 228,0.025),
      rgba(247, 238, 228,0.005));
  border-bottom: 1px solid var(--hairline-dark);
  overflow: hidden;
  padding: 56px 12px 16px;
}
.proof-art .work-svg {
  position: absolute;
  inset: 56px 12px 16px 12px;
  width: calc(100% - 24px);
  height: calc(100% - 72px);
  display: block;
}

/* --- Animated work illustrations ---
   Pipeline: packets handle themselves via SMIL <animateMotion>.
   App: a soft "live cursor" sweeps the rows; each row's check + progress
   bar are revealed in sequence via a class-driven keyframe.
   Agent: glow breathes; citation packets and core ripple are SMIL.       */

.work-svg-app .wapp-check,
.work-svg-app .wapp-bar {
  opacity: 0;
  transform-origin: 240px center;   /* used for the bar grow */
  animation: wappReveal 9s ease-in-out infinite;
}
.work-svg-app .wapp-bar {
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
  animation-name: wappBarReveal;
}
.work-svg-app .wapp-row-0 .wapp-check,
.work-svg-app .wapp-row-0 .wapp-bar { animation-delay: 0.3s; }
.work-svg-app .wapp-row-1 .wapp-check,
.work-svg-app .wapp-row-1 .wapp-bar { animation-delay: 1.1s; }
.work-svg-app .wapp-row-2 .wapp-check,
.work-svg-app .wapp-row-2 .wapp-bar { animation-delay: 1.9s; }
.work-svg-app .wapp-row-3 .wapp-check,
.work-svg-app .wapp-row-3 .wapp-bar { animation-delay: 2.7s; }
.work-svg-app .wapp-row-4 .wapp-check,
.work-svg-app .wapp-row-4 .wapp-bar { animation-delay: 3.5s; }

@keyframes wappReveal {
  0%, 5%   { opacity: 0; }
  10%, 88% { opacity: 1; }
  100%     { opacity: 0; }
}
@keyframes wappBarReveal {
  0%, 5%   { opacity: 0; transform: scaleX(0); }
  10%      { opacity: 1; transform: scaleX(0); }
  18%      { opacity: 1; transform: scaleX(1); }
  88%      { opacity: 1; transform: scaleX(1); }
  100%     { opacity: 0; transform: scaleX(1); }
}

/* Live cursor sweeping the rows — implies real-time updates landing in
   the tracker. Loops every 9s in sync with the reveal cycle. */
.work-svg-app .wapp-cursor {
  animation: wappCursor 9s linear infinite;
}
@keyframes wappCursor {
  0%   { transform: translateY(0);    opacity: 0; }
  4%   { opacity: 1; }
  20%  { transform: translateY(28px); }
  40%  { transform: translateY(56px); }
  60%  { transform: translateY(84px); }
  80%  { transform: translateY(112px); }
  92%  { opacity: 1; }
  100% { transform: translateY(112px); opacity: 0; }
}

/* Agent core glow breathes */
.work-svg-agent .wagent-glow {
  transform-origin: 240px 130px;
  animation: wagentBreathe 3.4s ease-in-out infinite;
}
@keyframes wagentBreathe {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50%      { opacity: 0.95; transform: scale(1.04); }
}

/* Pipeline packet drop-shadow already handled inline; nothing extra here. */

@media (prefers-reduced-motion: reduce) {
  .work-svg-app .wapp-check,
  .work-svg-app .wapp-bar { opacity: 1; transform: none; animation: none; }
  .work-svg-app .wapp-cursor { display: none; }
  .work-svg-agent .wagent-glow { animation: none; opacity: 0.7; }
  .work-svg-pipeline animateMotion,
  .work-svg-pipeline animate,
  .work-svg-pipeline animateTransform { animation: none; }
}
.proof-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;          /* never wrap to a second line */
  color: var(--orange);
  font-weight: 500;
  background: rgba(30, 16, 8, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 5px 11px;
  border: 1px solid rgba(160, 62, 37, 0.36);
  border-radius: 999px;
}

.proof-stack {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--hairline-dark);
}
.proof-stack li {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted-on-dark);
  background: rgba(247, 238, 228,0.04);
  border: 1px solid var(--hairline-dark);
  padding: 4px 9px;
  border-radius: 4px;
}
.proof-body { padding: 24px 26px 28px; }
.proof-body h3 {
  font-size: 21px;
  margin-bottom: 10px;
}
.proof-body p {
  font-size: 14.5px;
  color: var(--muted-on-dark);
  line-height: 1.55;
}

/* ---------- Measured outcomes (sits under the .proof-grid) ----------
   Mirrors the case-study cards 1:1 by sharing the same 3-column grid and
   gap. The lead-in line + thin rule above it cues the eye that this row
   is a continuation, not a new section. */

.metrics-block {
  margin-top: 36px;
  padding-top: 28px;
  position: relative;
}
.metrics-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 1px;
  background: rgba(236, 189, 107, 0.45);
}
.metrics-intro {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--muted-on-dark);
  max-width: 64ch;
  margin: 0 0 36px;
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;                 /* matches .proof-grid gap exactly */
}
@media (max-width: 920px) {
  .metrics-grid { grid-template-columns: 1fr; }
}
.metric-card {
  position: relative;
  padding: 8px 4px 12px;
}
.metric-number {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.96;
  letter-spacing: -0.01em;
  color: var(--cream);
  text-wrap: balance;
}
.metric-rule {
  width: 36px;
  height: 1.5px;
  background: var(--tan);
  margin: 18px 0 14px;
  opacity: .9;
}
.metric-label {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--cream);
  max-width: 30ch;
  margin-bottom: 10px;
}
.metric-context {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted-on-dark);
  max-width: 32ch;
  margin: 0;
}
.metric-motif {
  width: 96px;
  height: auto;
  margin-top: 18px;
  display: block;
  opacity: .9;
}
.metrics-foot {
  margin: 44px 0 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted-on-dark);
  opacity: .7;
  max-width: 60ch;
}

.tools-bar {
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid var(--hairline-dark);
}
.tools-label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  margin-bottom: 28px;
  text-align: center;
}

/* ---- Marquee: infinite horizontal scroll of brand tools ---- */
.tools-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Negative side margins so the marquee bleeds beyond .wrap padding */
  margin: 0 -32px;
  padding: 8px 0;
}
.tools-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: tools-scroll 56s linear infinite;
  will-change: transform;
}
.tools-marquee:hover .tools-track {
  animation-play-state: paused;
}
@keyframes tools-scroll {
  from { transform: translate3d(0, 0, 0); }
  /* Track has the list duplicated 2x — slide exactly half. */
  to { transform: translate3d(-50%, 0, 0); }
}

.tools-track .tool {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border: 1px solid var(--hairline-dark);
  border-radius: 999px;
  background: rgba(247, 238, 228,0.025);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--cream);
  white-space: nowrap;
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.tools-track .tool:hover {
  background: rgba(247, 238, 228,0.07);
  border-color: rgba(236, 189, 107, 0.22);
}
.tools-track .tool-logo {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  opacity: .95;
  flex: 0 0 auto;
}
.tools-track .tool-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}
.tools-track .tool-more {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 17px;
  color: var(--orange);
  background: transparent;
  border-color: transparent;
  padding-left: 8px;
  padding-right: 8px;
}

/* Soft fade on the marquee edges so chips dissolve in/out of view */
.tools-fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 2;
}
.tools-fade-l {
  left: 0;
  background: linear-gradient(90deg, var(--espresso) 0%, rgba(89, 44, 27,0) 100%);
}
.tools-fade-r {
  right: 0;
  background: linear-gradient(270deg, var(--espresso) 0%, rgba(89, 44, 27,0) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .tools-track { animation: none; }
}

/* ---------- About ---------- */

.about-wrap {
  max-width: 1040px;
  margin: 0 auto;
}
.about-head {
  margin-bottom: 44px;
  max-width: none;
}
.about-head h2 {
  max-width: 22ch;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.04;
}

/* Float the founder portrait into the running text so copy wraps around it.
   The figure sits in the top-right corner of the body, ~38% column width,
   and the paragraphs flow alongside and below. */
.about-photo {
  float: right;
  width: 38%;
  max-width: 360px;
  margin: 6px 0 22px 36px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--cream-deep);
  border: 1px solid var(--hairline-light);
  shape-outside: inset(0 round 12px);
}
.about-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.about-photo-cap {
  position: absolute;
  left: 14px;
  bottom: 14px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(89, 44, 27, 0.74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 6px 10px;
  border-radius: 4px;
}

.about h2 {
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.08;
  margin-top: 22px;
  margin-bottom: 0;
}
.about-body::after {
  content: "";
  display: block;
  clear: both;
}
.about-body p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted-on-cream);
  margin-bottom: 18px;
}
.about-body p.signature {
  display: none;
}

@media (max-width: 720px) {
  .about-photo {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 28px 0;
    shape-outside: none;
  }
}

.about-pullquote {
  position: relative;
  margin: 36px 0 0;
  padding: 28px 32px 28px 36px;
  border-left: 3px solid var(--orange);
  background: rgba(160, 62, 37, 0.07);     /* hint of Tiger's Eye wash */
  border-radius: 4px;
}
.about-pullquote p {
  font-family: var(--serif-text);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.about-pullquote-mark {
  position: absolute;
  top: -10px;
  left: 18px;
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 72px;
  line-height: 1;
  color: var(--orange);
  opacity: .6;
  pointer-events: none;
  user-select: none;
}

/* ---------- FAQ ("Ask Ann-Marie" conversation thread, click-to-reveal) ---- */

.faq-head { margin-bottom: 72px; max-width: 760px; }
.faq-head h2 {
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.06;
  margin-top: 22px;
}
.faq-intro {
  margin-top: 22px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--muted-on-dark);
  max-width: 64ch;
}
.faq-intro a {
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: var(--tan);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .2s ease, color .2s ease;
}
.faq-intro a:hover { color: var(--tan); }

.faq-thread {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;        /* consistent spacing between every row */
}

.faq-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  scroll-margin-top: 100px;
}

/* While a row is open (or in the typing beat), pin its question button
   to the top of the viewport, just below the nav, so the user can read
   the answer below it AND see the question they asked AND click that
   same question to collapse. We're in single-open accordion mode now,
   so there's never more than one sticky question on screen — no
   stacking issues like the old multi-open attempt. */
.faq-row.open .faq-msg-question,
.faq-row.typing .faq-msg-question {
  position: sticky;
  top: 88px;
  z-index: 4;
  /* drop-shadow so the pinned question reads as elevated above the
     answer card as it scrolls under it */
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.35));
}
@media (max-width: 720px) {
  .faq-row.open .faq-msg-question,
  .faq-row.typing .faq-msg-question {
    top: 64px;
  }
}

.faq-msg { max-width: 86%; }
.faq-msg-question {
  align-self: flex-end;
  text-align: left;
  /* Reserve some breathing room when the question stickies */
  padding-bottom: 4px;
}
.faq-msg-answer {
  align-self: flex-start;
}

/* Sender labels */
.faq-sender {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 8px;
}
.faq-msg-question .faq-sender {
  color: var(--muted-on-dark);
  justify-content: flex-start;
}
.faq-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
  border: 1px solid rgba(236, 189, 107, 0.45);
}

/* Question button — sits inside h3 so heading semantics are preserved. */
.faq-q-wrap {
  margin: 0;
  font-weight: inherit;
  /* the h3 keeps its semantic role but the visual heading style lives on .faq-q */
}
.faq-q-btn {
  appearance: none;
  background: rgba(247, 238, 228, 0.92);
  color: var(--ink);
  border: 1px solid rgba(89, 44, 27, 0.06);
  cursor: pointer;
  text-align: left;
  font: inherit;
  width: 100%;
  display: inline-flex;
  align-items: flex-start;
  gap: 14px;
  border-radius: 18px;
  border-bottom-right-radius: 6px;
  padding: 20px 22px;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.faq-q-btn:hover {
  background: rgba(247, 238, 228, 1);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -16px rgba(0, 0, 0, 0.4);
}
.faq-q-btn:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 3px;
}
.faq-q-btn .faq-num {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 15px;
  color: var(--tan-deep);
  letter-spacing: 0.04em;
  flex: 0 0 auto;
  padding-top: 4px;
}
.faq-q-btn .faq-q {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.22;
  letter-spacing: 0;
  color: var(--ink);
  flex: 1 1 auto;
  text-wrap: pretty;
}
.faq-q-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 8px;
  color: var(--tan-deep);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), color .2s ease;
  flex: 0 0 auto;
  align-self: center;
}
.faq-row.open .faq-q-caret,
.faq-row.typing .faq-q-caret {
  transform: rotate(180deg);
  color: var(--orange);
}
.faq-row.open .faq-q-btn,
.faq-row.typing .faq-q-btn {
  background: rgba(247, 238, 228, 1);
  border-left: 2px solid var(--tan);
  padding-left: 20px;
}

/* Answer bubble */
.faq-bubble {
  border-radius: 18px;
  padding: 22px 26px;
  text-align: left;
  position: relative;
}
.faq-bubble-answer {
  background: rgba(247, 238, 228, 0.04);
  border: 1px solid rgba(236, 189, 107, 0.22);
  border-left: 2px solid var(--tan);
  border-bottom-left-radius: 6px;
}
.faq-bubble-answer p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted-on-dark);
  margin: 0 0 14px;
}
.faq-bubble-answer p:last-child { margin-bottom: 0; }
.faq-bubble-answer a {
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: var(--tan);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .2s ease, color .2s ease;
}
.faq-bubble-answer a:hover { color: var(--tan); }

/* Typing indicator */
.faq-typing {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 11px 16px;
  background: rgba(247, 238, 228, 0.06);
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  margin-left: 38px;
}
.faq-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted-on-dark);
  animation: faqDot 1.1s infinite ease-in-out;
}
.faq-typing span:nth-child(2) { animation-delay: 0.18s; }
.faq-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes faqDot {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.45; }
  30%           { transform: translateY(-4px); opacity: 1;    }
}

/* --- Collapse / expand behavior --- */

/* Question fades up on first scroll-in, then stays visible. */
.faq-row.reveal { opacity: 1; transform: none; }
.faq-row .faq-msg-question {
  opacity: 0;
}
.faq-row.in .faq-msg-question {
  animation: faqFadeUp 0.55s cubic-bezier(.2,.7,.2,1) both;
}

/* Typing + answer are collapsed by default. Phased class-driven reveal
   (no animation-fill-mode tricks) so closing always returns cleanly to
   the base state. */
.faq-row .faq-typing,
.faq-row .faq-msg-answer {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height .35s cubic-bezier(.2,.7,.2,1),
              opacity .25s ease,
              margin-top .25s ease;
}

/* Phase 1 — typing visible, answer still hidden */
.faq-row.typing .faq-typing {
  opacity: 1;
  max-height: 60px;
  margin-top: 14px;
}

/* Phase 2 — typing tucks back, answer reveals */
.faq-row.open .faq-msg-answer {
  opacity: 1;
  max-height: 1600px;
  margin-top: 14px;
  pointer-events: auto;
  transition: max-height .55s cubic-bezier(.2,.7,.2,1),
              opacity .35s ease,
              margin-top .3s ease;
}

@keyframes faqFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --- Mobile: stack full width, no alternation --- */
@media (max-width: 720px) {
  .faq-thread { gap: 14px; }
  .faq-msg, .faq-msg-question, .faq-msg-answer { max-width: 100%; align-self: stretch; }
  .faq-msg-question { text-align: left; }
  .faq-msg-question .faq-sender { justify-content: flex-start; }
  .faq-q-btn { padding: 16px 18px; }
  .faq-q-btn .faq-q { font-size: 18px; }
  .faq-bubble { padding: 18px 20px; }
  .faq-bubble-answer p { font-size: 15px; }
  .faq-avatar { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-row .faq-msg-question,
  .faq-row .faq-typing,
  .faq-row .faq-msg-answer { opacity: 1 !important; animation: none !important; }
  .faq-row .faq-typing,
  .faq-row .faq-msg-answer { transition: none !important; }
  .faq-typing { display: none; }
  .faq-typing span { animation: none; }
  .faq-q-caret { transition: none; }
}

/* ---------- Final CTA ---------- */

.final-cta {
  text-align: center;
  padding: 160px 0;
}
.final-cta h2 {
  font-size: clamp(40px, 6.4vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  max-width: 18ch;
  margin: 0 auto;
}
.final-cta h2 .accent { color: var(--orange); font-style: italic; font-family: var(--serif-text); }
.final-cta p {
  margin: 32px auto 44px;
  max-width: 56ch;
  font-size: 18px;
  color: var(--muted-on-dark);
  line-height: 1.6;
}
.final-cta .small {
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--muted-on-dark);
  letter-spacing: 0.04em;
}

/* ---------- Footer ---------- */

footer.site-footer {
  padding: 80px 0 40px;
  border-top: 1px solid rgba(247, 238, 228,0.06);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 60px;
  align-items: flex-start;
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
}
.footer-brand { font-family: var(--serif); font-size: 22px; }
.footer-brand .brand-wordmark { margin-left: -4px; }
.footer-tag {
  margin-top: 18px;
  color: var(--cream);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  max-width: 22ch;
  text-wrap: balance;
}
.footer-col h4 {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  margin-bottom: 18px;
  font-weight: 500;
}
.footer-col ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.footer-col a {
  color: var(--cream);
  text-decoration: none;
  font-size: 15px;
  opacity: .9;
  transition: opacity .15s, color .15s;
}
.footer-col a:hover { color: var(--orange); opacity: 1; }
.footer-bottom {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid rgba(247, 238, 228,0.06);
  display: flex; justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: var(--muted-on-dark);
}
.footer-stamp {
  font-family: var(--serif-text);
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--tan);
}

/* ---------- Scroll fade-in ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
/* Hero reveals show without delay so the page never appears empty on first paint. */
.hero .reveal {
  opacity: 1;
  transform: none;
}
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

/* ---------- Misc ---------- */

.divider-rule {
  height: 1px;
  background: var(--hairline-light);
}


/* ============================================================
   On-dark accent override — per brand direction, the rust accent
   reads poorly on the deep brown background, so on .bg-dark /
   .bg-darkest sections we swap text/border/stroke accents to tan
   (#ECBD6B). Solid CTA buttons keep the rust fill (it reads fine
   as a button on brown), but their hover, ghost variants, and
   inline accents shift to tan.
   ============================================================ */

.bg-dark .eyebrow,
.bg-darkest .eyebrow {
  color: var(--tan);
}
.bg-dark .eyebrow::before,
.bg-darkest .eyebrow::before {
  background: var(--tan);
}
.bg-dark .hero-eyebrow,
.bg-darkest .hero-eyebrow {
  color: var(--tan);
}
.bg-dark .hero-eyebrow::before,
.bg-darkest .hero-eyebrow::before {
  background: var(--tan);
}
.bg-dark .hero h1 .accent,
.bg-dark .hero-headline .beat.accent {
  color: var(--tan);
}

/* Nav at top (over hero): hover accent matches body action color */
.nav:not(.scrolled) .nav-links a:hover { color: var(--orange); }

/* Capability cards (dark) — top-bar accent stays tan on hover */
.bg-dark .cap-card::before { background: var(--tan); }

/* Service cards (dark) — tags, ctas, top-bar accent */
.bg-dark .svc-card::before { background: var(--tan); }
.bg-dark .svc-tag {
  color: var(--tan);
  border-color: rgba(236, 189, 107, 0.42);
}
.bg-dark .svc-cta .arrow { color: var(--tan); }

/* Proof cards (dark) */
.bg-dark .proof-card::before { background: var(--tan); }
.bg-dark .proof-tag {
  color: var(--tan);
  border-color: rgba(236, 189, 107, 0.42);
}

/* Tools marquee "& more" italic on dark */
.bg-dark .tools-track .tool-more { color: var(--tan); }

/* Final CTA accent on dark — final-cta itself IS the .bg-dark element,
   so we need a compound selector, not descendant. */
.bg-dark.final-cta h2 .accent,
.bg-darkest.final-cta h2 .accent { color: var(--tan); }

/* Footer link hover on darkest bg */
.bg-darkest .footer-col a:hover { color: var(--tan); }

/* Ghost button on dark — hover color */
.bg-dark .btn-ghost:hover,
.bg-darkest .btn-ghost:hover { color: var(--tan); }

/* Keep the question visible at all times — open, typing, or collapsed */
.faq-row .faq-msg-question {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  max-height: none !important;
  height: auto !important;
  margin-bottom: 16px !important;
  overflow: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* Make sure the row itself doesn't collapse to zero height when closed */
.faq-row {
  display: block !important;
  max-height: none !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* More breathing room between sender label and question bubble */
.faq-msg-question {
  gap: 32px !important;
  align-items: center !important;
}

/* Tighten the gap between FAQ and final CTA */
.faq {
  padding-bottom: 60px !important;
}
#contact {
  padding-top: 80px !important;
}

/* Subtle background shift so the CTA feels like a moment of its own */
#contact {
  background: #4a2a1f !important;
  border-top: 1px solid rgba(212, 165, 116, 0.15) !important;
}

/* ==========================================================================
   NEW HERO STYLES — paste this entire file at the BOTTOM of styles-v2.css
   (below your existing FAQ overrides, replacing the old mobile-hero override).

   Last updated: 2026-05-25
   Replaces the old "INPUT > PARSE > ROUTE" desk animation hero with a new
   three-agent dashboard hero (Maya, Atlas, Sage) and two-phase choreography:
     phase-intro  (0-3s)  — big title + outlined italic subhead
     phase-stage  (3s+)   — title shrinks, LIVE badge + dashboard fade in
   On mobile (<=920px) the intro phase is skipped — stage layout shows immediately.
   ========================================================================== */


/* ---------- Base hero ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* ---------- Yellow hero variant ---------- */
.hero.hero-yellow {
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(255, 213, 132, 0.55), transparent 60%),
    radial-gradient(110% 80% at 10% 95%, rgba(160, 62, 37, 0.10), transparent 60%),
    #ECBD6B;
  color: var(--espresso);
}

/* ---------- H1 — cream fill + espresso outline (wordmark feel) ---------- */
.hero.hero-yellow .hero-primary {
  color: var(--cream);
  -webkit-text-stroke: 2.6px var(--espresso);
  paint-order: stroke fill;
  text-shadow: 0 5px 0 rgba(89, 44, 27, 0.20);
  max-width: 22ch;
  font-size: clamp(72px, 11.6vw, 184px);
  line-height: 1.0;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 auto;
  transition:
    font-size 1.1s cubic-bezier(.4,.0,.2,1),
    max-width 1.1s cubic-bezier(.4,.0,.2,1),
    -webkit-text-stroke-width 0.9s ease,
    text-shadow 0.9s ease;
}
.hero.hero-yellow.phase-stage .hero-primary {
  font-size: clamp(26px, 4vw, 52px);
  max-width: 22ch;
  letter-spacing: -0.018em;
  -webkit-text-stroke-width: 1.5px;
  text-shadow: 0 2px 0 rgba(89, 44, 27, 0.16);
}

/* ---------- Intro eyebrow (above the title) ---------- */
.hero-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 auto 36px;
  max-width: 660px;
  color: rgba(89, 44, 27, 0.7);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 1;
  transition:
    opacity 0.55s cubic-bezier(.4,.0,.2,1),
    transform 0.9s cubic-bezier(.4,.0,.2,1),
    margin 0.9s cubic-bezier(.4,.0,.2,1),
    max-height 0.9s cubic-bezier(.4,.0,.2,1);
  overflow: hidden;
}
.hero.phase-stage .hero-eyebrow {
  opacity: 0;
  transform: translateY(-12px);
  margin-bottom: 0;
  max-height: 0;
  pointer-events: none;
}
.he-line {
  flex: 1 1 auto;
  height: 1px;
  min-width: 40px;
  background-image: linear-gradient(to right, rgba(89, 44, 27, 0.45) 50%, transparent 50%);
  background-size: 6px 1px;
  background-repeat: repeat-x;
}
.he-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--orange);
  flex: none;
}
.he-mark svg {
  display: block;
  animation: heMarkSpin 22s linear infinite;
}
.he-text { white-space: nowrap; flex: none; }
@keyframes heMarkSpin { to { transform: rotate(360deg); } }

/* ---------- Intro subhead (outlined italic serif) ---------- */
.hero.hero-yellow .hero-sub-intro {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.7vw, 36px);
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--cream);
  -webkit-text-stroke: 1.4px var(--espresso);
  paint-order: stroke fill;
  text-shadow: 0 2px 0 rgba(89, 44, 27, 0.16);
  white-space: nowrap;
}

/* ---------- Phased layout: title-block / stage / bottom ---------- */
.hero-title-block {
  flex: 0 0 auto;
  text-align: center;
  padding: 110px clamp(20px, 4vw, 56px) 20px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 3;
  transition:
    min-height 1.1s cubic-bezier(.4,.0,.2,1),
    padding 1.1s cubic-bezier(.4,.0,.2,1);
}
.hero.phase-intro .hero-title-block {
  min-height: calc(100vh - 110px);
  padding-bottom: 80px;
}
.hero.phase-stage .hero-title-block {
  min-height: 0;
  padding-top: 100px;
  padding-bottom: 22px;
}

.hero-subline {
  position: relative;
  margin: 26px auto 0;
  width: 100%;
  max-width: 1040px;
  display: grid;
  grid-template-areas: "stack";
  place-items: center;
  transition: margin 1.0s cubic-bezier(.4,.0,.2,1);
}
.hero.phase-stage .hero-subline { margin-top: 20px; }
.hero-sub {
  grid-area: stack;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 14px;
  row-gap: 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--espresso);
  transition: opacity 0.7s cubic-bezier(.4,.0,.2,1);
}
.hero-sub-intro { opacity: 1; }
.hero-sub-stage { opacity: 0; }
.hero.phase-stage .hero-sub-intro { opacity: 0; pointer-events: none; }
.hero.phase-stage .hero-sub-stage { opacity: 1; transition-delay: 0.5s; }
.hero.phase-stage .hero-sub-stage {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  column-gap: 12px;
  row-gap: 8px;
}

/* ---------- Stage subhead pieces ---------- */
.hss-text {
  /* Highlighted pill so the phrase reads clearly over the
     textured yellow hero. Burnt-orange ground + cream text;
     echoes the LIVE chip but with a touch more padding so
     it reads as the primary headline of the row. */
  white-space: nowrap;
  background: var(--orange);
  color: var(--cream);
  padding: 6px 12px;
  border-radius: 5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 6px 16px -10px rgba(89, 44, 27, 0.65);
}
.hss-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--orange);
  color: var(--cream);
  padding: 5px 9px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  flex: none;
}
.hss-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cream);
  animation: hsBlink 1.2s ease-in-out infinite;
}
.hss-client {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(247, 238, 228, 0.85);
  border: 1px solid rgba(89, 44, 27, 0.28);
  padding: 5px 10px 5px 9px;
  border-radius: 999px;
  color: var(--espresso);
  font-family: var(--sans);
  flex: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hss-client svg { opacity: 0.65; flex: none; }
.hss-client-name {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.hss-client-tag {
  font-weight: 500;
  font-size: 9.5px;
  opacity: 0.65;
  letter-spacing: 0.18em;
  padding-left: 8px;
  border-left: 1px solid rgba(89, 44, 27, 0.22);
  text-transform: uppercase;
}
.hss-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding-left: 14px;
  border-left: 1px solid rgba(89, 44, 27, 0.25);
  color: rgba(89, 44, 27, 0.7);
  font-size: 10.5px;
  letter-spacing: 0.14em;
}
.hss-counter-num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.hss-counter-arrow {
  color: var(--orange);
  font-size: 12px;
  font-weight: 700;
  position: relative;
  top: -1px;
}

/* ---------- Stage (dashboard) region ---------- */
.hero-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4px clamp(20px, 4vw, 56px);
  min-height: 0;
  position: relative;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s cubic-bezier(.4,.0,.2,1);
}
.hero.phase-stage .hero-stage {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.55s;
}

/* ---------- Bottom CTAs ---------- */
.hero-bottom {
  flex: 0 0 auto;
  padding: 16px clamp(20px, 4vw, 56px) 44px;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(.4,.0,.2,1);
}
.hero.phase-stage .hero-bottom {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.95s;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin: 0;
}

/* ---------- Agent dashboard ---------- */
.hero-agents {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  pointer-events: none;
}
.ha-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}

.ha-card {
  background: var(--espresso);
  color: var(--cream);
  border-radius: 14px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 24px 60px -28px rgba(89, 44, 27, 0.65);
  border: 1px solid rgba(247, 238, 228, 0.08);
  opacity: 0;
  transform: translateY(14px);
  animation: haCardIn 0.7s cubic-bezier(.4,.0,.2,1) both;
  position: relative;
  overflow: hidden;
}
.ha-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--orange);
}
.ha-card-tan::before  { background: var(--tan); }
.ha-card-blue::before { background: var(--blue); }
.ha-card:nth-child(1) { animation-delay: 0.10s; }
.ha-card:nth-child(2) { animation-delay: 0.22s; }
.ha-card:nth-child(3) { animation-delay: 0.34s; }

.ha-card-head { display: flex; align-items: center; gap: 12px; }
.ha-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  flex: none;
}
.ha-id { flex: 1; min-width: 0; }
.ha-name {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--cream);
  line-height: 1.1;
}
.ha-role {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 238, 228, 0.60);
  margin-top: 2px;
}
.ha-pulse {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
}
.ha-pulse > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(160, 62, 37, 0.20);
  animation: hsBlink 1.2s ease-in-out infinite;
}
.ha-card-tan  .ha-pulse > span { background: var(--tan);  box-shadow: 0 0 0 4px rgba(236, 189, 107, 0.22); }
.ha-card-blue .ha-pulse > span { background: var(--blue); box-shadow: 0 0 0 4px rgba(135, 172, 186, 0.22); }

/* Active task block */
.ha-now {
  background: rgba(247, 238, 228, 0.05);
  border-radius: 10px;
  padding: 12px 13px 14px;
  border: 1px solid rgba(247, 238, 228, 0.07);
}
.ha-now-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 8px;
}
.ha-card-tan  .ha-now-label { color: var(--tan); }
.ha-card-blue .ha-now-label { color: var(--blue); }
.ha-now-spinner {
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: haSpin 0.9s linear infinite;
}
.ha-now-action {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.18;
  color: var(--cream);
  letter-spacing: -0.005em;
}
.ha-now-detail {
  font-family: var(--sans);
  font-size: 11.5px;
  color: rgba(247, 238, 228, 0.70);
  margin-top: 4px;
  margin-bottom: 11px;
  line-height: 1.4;
}
.ha-now-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(247, 238, 228, 0.10);
  overflow: hidden;
  position: relative;
}
.ha-now-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--orange);
  border-radius: 999px;
  animation: haFill 5000ms cubic-bezier(.3,.0,.7,1) forwards;
  box-shadow: 0 0 8px rgba(160, 62, 37, 0.55);
}
.ha-card-tan  .ha-now-fill { background: var(--tan);  box-shadow: 0 0 8px rgba(236, 189, 107, 0.55); }
.ha-card-blue .ha-now-fill { background: var(--blue); box-shadow: 0 0 8px rgba(135, 172, 186, 0.55); }

/* JUST COMPLETED feed */
.ha-feed { flex: 1; min-height: 0; }
.ha-feed-label {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247, 238, 228, 0.55);
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(247, 238, 228, 0.08);
}
.ha-feed ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ha-feed-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: start;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  animation: haFeedIn 0.55s cubic-bezier(.4,.0,.2,1) both;
}
.ha-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(160, 62, 37, 0.22);
  color: var(--orange);
  display: grid;
  place-items: center;
  flex: none;
  margin-top: 1px;
}
.ha-card-tan  .ha-check { background: rgba(236, 189, 107, 0.18); color: var(--tan); }
.ha-card-blue .ha-check { background: rgba(135, 172, 186, 0.24); color: var(--blue); }
.ha-check svg { width: 13px; height: 13px; }
.ha-feed-text { min-width: 0; }
.ha-feed-task {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.22;
  color: var(--cream);
  letter-spacing: -0.005em;
}
.ha-feed-outcome {
  font-family: var(--sans);
  font-size: 10.5px;
  color: rgba(247, 238, 228, 0.62);
  margin-top: 2px;
  line-height: 1.4;
}
.ha-feed-time {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(247, 238, 228, 0.45);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}

/* Card footer stat */
.ha-card-foot {
  border-top: 1px solid rgba(247, 238, 228, 0.10);
  padding-top: 12px;
  margin-top: auto;
}
.ha-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.ha-stat-num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  color: var(--orange);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.ha-card-tan  .ha-stat-num { color: var(--tan); }
.ha-card-blue .ha-stat-num { color: var(--blue); }
.ha-stat-label {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 238, 228, 0.62);
}

/* ---------- Keyframes ---------- */
@keyframes hsBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes haCardIn { to { opacity: 1; transform: translateY(0); } }
@keyframes haFeedIn { to { opacity: 1; transform: translateY(0); } }
@keyframes haFill   { to { width: 100%; } }
@keyframes haSpin   { to { transform: rotate(360deg); } }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .ha-grid { gap: 10px; }
  .ha-card { padding: 14px 14px 12px; gap: 10px; }
  .ha-name { font-size: 16px; }
  .ha-now-action { font-size: 15.5px; }
  .ha-feed-task { font-size: 13px; }
  .ha-stat-num { font-size: 20px; }
  .hero.phase-stage .hero-primary { font-size: clamp(26px, 4vw, 48px); }
}

@media (max-width: 920px) {
  /* Mobile: skip intro/stage choreography; show stage layout straight
     away, with cards stacked vertically. */
  .hero { min-height: auto; }
  .hero-eyebrow { display: none; }
  .hero-title-block,
  .hero.phase-intro .hero-title-block,
  .hero.phase-stage .hero-title-block {
    padding: 96px 18px 8px;
    min-height: 0 !important;
  }
  .hero-primary {
    font-size: clamp(48px, 11vw, 84px) !important;
    letter-spacing: -0.005em !important;
    -webkit-text-stroke-width: 1.8px;
    text-shadow: 0 3px 0 rgba(89, 44, 27, 0.18);
    max-width: 16ch;
  }
  .hero-subline { margin-top: 18px; min-height: 0; }
  .hero-sub {
    position: static;
    transform: none;
    white-space: normal;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    font-size: 11.5px;
    letter-spacing: 0.16em;
    gap: 10px;
  }
  .hero-sub-intro { display: none; }
  .hero-sub-stage { opacity: 1; }
  .hss-counter { padding-left: 0; border-left: none; }
  .hss-client-tag { display: none; }
  .hero-stage, .hero-bottom {
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: none !important;
  }
  .hero-stage  { padding: 18px 16px 8px; }
  .hero-bottom { padding: 16px 16px 44px; }
  .hero-actions {
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .ha-grid { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 540px) {
  .hero-title-block,
  .hero.phase-intro .hero-title-block,
  .hero.phase-stage .hero-title-block {
    padding: 88px 14px 8px;
  }
  .hero-stage  { padding: 14px 12px 8px; }
  .hero-bottom { padding: 14px 14px 40px; }
  .hero-primary {
    font-size: clamp(40px, 10.5vw, 56px) !important;
    letter-spacing: 0 !important;
    -webkit-text-stroke-width: 1.4px;
  }
  .hero-sub { font-size: 11px; letter-spacing: 0.14em; }
  .hss-counter-num { font-size: 18px; }
  .ha-card { padding: 16px 14px 14px; }
  .ha-name { font-size: 17px; }
  .ha-now-action { font-size: 15.5px; }
  .ha-feed-task { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title-block,
  .hero-stage,
  .hero-bottom,
  .hero-sub,
  .hero-primary {
    transition: none !important;
  }
}

/* ==========================================================================
   HERO POLISH — append this ENTIRE file at the very BOTTOM of styles-v2.css
   (after the new hero CSS block you pasted earlier).
 
   Added 2026-05-25 to address three issues:
     1. The shrunken title was too small — bumped up so it still has presence.
     2. Negative space between nav and title was too generous — tightened.
     3. Nav links didn't contrast against the yellow hero — forced espresso
        and added uppercase tracking + hover underline for an editorial feel.
   ========================================================================== */
 
 
/* ---------- 1+2. Bigger title in stage phase + tighter spacing ---------- */
 
.hero.hero-yellow.phase-stage .hero-primary {
  /* was clamp(26px, 4vw, 52px) — now ~50% bigger so it dominates the frame */
  font-size: clamp(42px, 6vw, 80px) !important;
  letter-spacing: -0.02em !important;
  -webkit-text-stroke-width: 1.8px !important;
  text-shadow: 0 3px 0 rgba(89, 44, 27, 0.18) !important;
}
 
/* Pull the title closer to the nav, and tighten the gap below it. */
.hero.phase-stage .hero-title-block {
  padding-top: 56px !important;
  padding-bottom: 12px !important;
}
.hero.phase-stage .hero-subline { margin-top: 12px !important; }
.hero.phase-stage .hero-stage   { padding-top: 0 !important; }
 
/* Same idea on smaller screens — keep the proportion. */
@media (max-width: 1080px) {
  .hero.hero-yellow.phase-stage .hero-primary {
    font-size: clamp(38px, 6.2vw, 68px) !important;
  }
}
@media (max-width: 920px) {
  .hero.hero-yellow.phase-stage .hero-primary,
  .hero-primary {
    font-size: clamp(40px, 9.5vw, 64px) !important;
  }
  .hero.phase-stage .hero-title-block,
  .hero.phase-intro .hero-title-block {
    padding-top: 72px !important;
    padding-bottom: 8px !important;
  }
}
 
 
/* ---------- 3. Nav contrast + editorial polish on yellow hero ---------- */
 
/* When the nav is at the top of the page (before the user scrolls),
   force a saturated espresso color so links actually read against the
   yellow. The Nav component's JS detector defaults to cream which gets
   washed out — !important here wins because the JS sets color inline. */
.nav:not(.scrolled) .nav-links a {
  color: var(--espresso) !important;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  padding: 6px 2px;
  transition: color 0.2s ease;
}
 
/* Subtle hover underline that grows from left — gives the nav an
   editorial, polished feel without being heavy. */
.nav:not(.scrolled) .nav-links a::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s cubic-bezier(.4, .0, .2, 1);
}
.nav:not(.scrolled) .nav-links a:hover::after { transform: scaleX(1); }
.nav:not(.scrolled) .nav-links a:hover {
  color: var(--orange) !important;
}
 
/* A little more breathing room between the nav links so the tracked
   uppercase doesn't feel cramped. */
.nav:not(.scrolled) .nav-links {
  gap: 36px;
}
 
/* When the user scrolls and the nav switches to its "scrolled" state
   (usually a darker pill bg), let the existing CSS handle color but
   keep the editorial typography. */
.nav.scrolled .nav-links a {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
 
/* Mobile: dial back the tracking so things don't wrap awkwardly. */
@media (max-width: 720px) {
  .nav:not(.scrolled) .nav-links a,
  .nav.scrolled .nav-links a {
    font-size: 11px;
    letter-spacing: 0.12em;
  }
  .nav:not(.scrolled) .nav-links { gap: 20px; }
}