/* ==========================================================================
   Kadro Co. warm luminous glass
   tokens → base → utilities → components → sections → motion → responsive
   ========================================================================== */

/* ---- 1. Tokens (transcribed from the Kadro Design System) --------------- */
:root {
  /* ink: warm charcoal-greens, never pure black */
  --ink-900:#131C1A; --ink-800:#1F2B29; --ink-700:#32423F; --ink-600:#4C5E5B;
  --ink-500:#6F817E; --ink-400:#96A6A3; --ink-300:#BECAC8;

  /* sand: warm paper */
  --sand-100:#FAF6ED; --sand-200:#F3ECDD; --sand-300:#E7DCC6; --sand-400:#D3C3A4;
  --white:#FFFFFF;

  /* teal: primary */
  --teal-700:#0B3F3C; --teal-600:#10534F; --teal-500:#156A64; --teal-400:#3D8D86;
  --teal-200:#A6D2CD; --teal-100:#DAEEEA; --teal-50:#ECF7F5;

  /* brass: warmth + emphasis */
  --brass-600:#A67C24; --brass-500:#C3963B; --brass-400:#D9B36A;
  --brass-200:#ECD9AC; --brass-100:#F6EDD6;

  --oxblood-600:#7E2D26;

  /* type */
  --font-sans:"Geist", ui-sans-serif, -apple-system, "SF Pro Text", system-ui, sans-serif;
  --font-mono:"Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --fs-display:clamp(3rem, 2.1rem + 5.4vw, 4.75rem);
  --fs-h2:clamp(2.15rem, 1.5rem + 2.6vw, 2.9rem);
  --fs-h3:clamp(1.15rem, 1.05rem + .4vw, 1.375rem);
  --fs-lede:clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
  --fs-body:1rem;

  /* radii */
  --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --radius-2xl:36px; --radius-pill:999px;

  /* shadows: warm brown-black, never grey */
  --shadow-sm:0 1px 2px rgba(35,25,15,.05), 0 2px 6px rgba(35,25,15,.05);
  --shadow-md:0 2px 4px rgba(35,25,15,.04), 0 8px 20px -4px rgba(35,25,15,.10);
  --shadow-lg:0 4px 8px rgba(35,25,15,.05), 0 20px 40px -8px rgba(35,25,15,.14);
  --shadow-glass:inset 0 1px 0 rgba(255,255,255,.70),
                 0 1px 2px rgba(35,25,15,.05),
                 0 12px 32px -8px rgba(35,25,15,.14),
                 0 32px 64px -24px rgba(35,25,15,.18);

  /* motion */
  --ease-out:cubic-bezier(.2,.8,.25,1);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  /* easeOutQuint, the long settle. Entrances only; it is too slow to answer a click. */
  --ease-entrance:cubic-bezier(.22,1,.36,1);
  --ease-fast:cubic-bezier(.4,0,.2,1);    /* color + shadow feedback */
  --ease-micro:cubic-bezier(0,0,.2,1);    /* small transforms */
  --dur:200ms;
  --dur-fast:150ms;
  --dur-micro:200ms;
  --dur-entrance:720ms;

  /* layout */
  --container:1200px;
  --gutter:clamp(1.25rem, 4vw, 2.5rem);
  --section-y:clamp(3.75rem, 7vw, 8rem);
  --header-h:76px;
}

/* ---- 2. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }

html {
  scroll-padding-top:calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.reduced) { scroll-behavior:smooth; }
}

body {
  font:400 var(--fs-body)/1.6 var(--font-sans);
  color:var(--ink-700);
  background:var(--sand-100);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* soft ambient washes near the top of the page, plain scrolling background,
   no fixed layers (fixed + blend + backdrop-filter wedges some compositors) */
body {
  background-image:
    radial-gradient(1100px 640px at 10% -80px, rgba(218,238,234,.55), transparent 70%),
    radial-gradient(900px 560px at 96% 240px, rgba(246,237,214,.6), transparent 70%);
  background-repeat:no-repeat;
}

h1,h2,h3,h4 { color:var(--ink-900); text-wrap:balance; }
p { text-wrap:pretty; }
a { color:var(--teal-600); }
::selection { background:var(--teal-100); color:var(--ink-900); }

img, svg { display:block; max-width:100%; }
[hidden] { display:none !important; }
/* inline icon sprite (Lucide geometry, vendored as <symbol>s in index.html) */
.lucide {
  width:1.05em; height:1.05em; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ---- 3. Utilities -------------------------------------------------------- */
.container { max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section { padding-block:var(--section-y); position:relative; }
.section--sunken {
  background:linear-gradient(180deg, rgba(243,236,221,.0), rgba(243,236,221,.75) 14%, rgba(243,236,221,.75) 86%, rgba(243,236,221,0));
}

.visually-hidden {
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.skip-link {
  position:fixed; top:10px; left:10px; z-index:200;
  transform:translateY(-300%);
  background:var(--teal-700); color:var(--sand-100);
  padding:.65rem 1.1rem; border-radius:var(--radius-pill);
  font-weight:500; text-decoration:none;
  transition:transform var(--dur) var(--ease-out);
}
.skip-link:focus-visible { transform:none; border-radius:var(--radius-pill); }

.eyebrow {
  font:500 .75rem/1.2 var(--font-sans);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal-600);
}
.eyebrow--onbrand { color:var(--teal-200); }
.eyebrow--tight { letter-spacing:.09em; }

.display {
  font-size:var(--fs-display);
  font-weight:500; line-height:1.05; letter-spacing:-.042em;
  max-width:15ch;
}
.h2 {
  font-size:var(--fs-h2);
  font-weight:500; line-height:1.1; letter-spacing:-.032em;
  max-width:20ch;
}
.h2--onbrand { color:var(--sand-100); }
.h3 {
  font-size:var(--fs-h3);
  font-weight:600; line-height:1.3; letter-spacing:-.012em;
}

.lede {
  font-size:var(--fs-lede); line-height:1.6;
  color:var(--ink-700); max-width:46ch;
}
.section-lede {
  font-size:var(--fs-lede); line-height:1.6;
  color:var(--ink-700); max-width:52ch;
}

/* underline flourish on one hero word */
.uline { position:relative; white-space:nowrap; }
.uline::after {
  content:""; position:absolute; left:.02em; right:.02em; bottom:.02em;
  height:.09em; border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--brass-400), var(--brass-500));
  transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--ease-entrance) .55s;
}
.is-in .uline::after, html:not(.js) .uline::after { transform:scaleX(1); }

/* ---- 4. Buttons ----------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  border:0; cursor:pointer; text-decoration:none;
  font:500 .96rem/1 var(--font-sans);
  padding:.85rem 1.5rem; border-radius:var(--radius-pill);
  position:relative; overflow:hidden; isolation:isolate;
  /* background-image, not just -color: the primary/accent fills are gradients, so a
     background-color transition alone never fires and the fill snaps. */
  transition:transform var(--dur-micro) var(--ease-micro),
             box-shadow var(--dur-fast) var(--ease-fast),
             background-image var(--dur-fast) var(--ease-fast),
             background-color var(--dur-fast) var(--ease-fast),
             color var(--dur-fast) var(--ease-fast),
             border-color var(--dur-fast) var(--ease-fast);
}
.btn--lg { padding:1.05rem 1.8rem; font-size:1.03rem; }
.btn--sm { padding:.66rem 1.2rem; font-size:.9rem; }

.btn--primary {
  background:linear-gradient(180deg, var(--teal-600), var(--teal-700));
  color:var(--sand-100);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px -10px rgba(11,63,60,.55);
}
.btn--primary:hover {
  background:linear-gradient(180deg, var(--teal-500), var(--teal-600));
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 16px 32px -12px rgba(11,63,60,.55);
}

.btn--accent {
  background:linear-gradient(180deg, var(--brass-400), var(--brass-500));
  color:var(--ink-900);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 12px 28px -10px rgba(35,25,15,.5);
}
.btn--accent:hover {
  background:linear-gradient(180deg, #E2BF7C, var(--brass-400));
  transform:translateY(-2px);
}

.btn--secondary {
  background:rgba(255,255,255,.62);
  color:var(--ink-800);
  border:1px solid var(--sand-400);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), var(--shadow-sm);
}
.btn--secondary:hover { background:var(--white); transform:translateY(-2px); box-shadow:var(--shadow-md); }

.btn--ghost { background:transparent; color:var(--teal-600); padding-inline:1rem; }
.btn--ghost:hover { color:var(--teal-700); background:rgba(21,106,100,.07); }

.btn--ghost-light { background:transparent; color:var(--teal-200); border:1px solid rgba(166,210,205,.35); }
.btn--ghost-light:hover { color:var(--sand-100); border-color:rgba(166,210,205,.6); background:rgba(166,210,205,.08); }

/* press squash, declared after every variant :hover so it always wins the cascade */
/* keep the hover lift in the press transform, or the button drops 2px on click */
.btn:active, .btn:hover:active { transform:translateY(-1px) scale(.97); transition:transform 90ms var(--ease-fast); }

/* sheen sweep on hover, primary + accent only */
.btn--primary::after, .btn--accent::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.28) 48%, transparent 62%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease-out);
}
.btn--primary:hover::after, .btn--accent:hover::after { transform:translateX(120%); }

/* text links */
.text-link {
  color:var(--teal-600); font-weight:500; text-decoration:none; position:relative;
  transition:color var(--dur-fast) var(--ease-fast);
}
.text-link::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
  background:var(--brass-500); border-radius:var(--radius-pill);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-fast) var(--ease-fast);
}
.text-link:hover { color:var(--teal-700); }
.text-link:hover::after { transform:scaleX(1); }

/* focus: opaque two-tone ring so it holds ≥3:1 on light and dark surfaces */
:focus-visible {
  outline:3px solid var(--teal-600);
  outline-offset:2px;
  border-radius:6px;
  box-shadow:0 0 0 2px var(--sand-100);
}
.glass--dark :focus-visible, .closing-panel :focus-visible, .where--night :focus-visible {
  outline-color:var(--brass-400);
  box-shadow:0 0 0 2px rgba(19,28,26,.9);
}
.btn:focus-visible, .nav-link:focus-visible, .wordmark:focus-visible { border-radius:var(--radius-pill); }

/* ---- 5. Glass recipes ----------------------------------------------------- */
.glass {
  background:linear-gradient(135deg, rgba(255,255,255,.62), rgba(250,246,237,.36));
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:var(--shadow-glass);
}
/* no backdrop-filter on the dark variant on purpose: blur-under-mutation is the
   most expensive thing a page can do, and this surface sits behind animated content */
.glass--dark {
  background:linear-gradient(160deg, rgba(11,63,60,.96), rgba(19,28,26,.97));
  border:1px solid rgba(236,217,172,.16);
  box-shadow:inset 0 1px 0 rgba(236,217,172,.10), 0 32px 64px -24px rgba(35,25,15,.4);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background:rgba(250,246,237,.94); }
  .glass--dark { background:rgba(16,42,40,.97); }
}

/* ---- 6. Grain -------------------------------------------------------------- */
.grain {
  position:fixed; inset:0; z-index:90; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;
}

/* ---- 7. Header -------------------------------------------------------------- */
.top-sentinel { position:absolute; top:0; height:1px; width:1px; }

.site-header {
  position:fixed; top:14px; left:50%; z-index:100;
  transform:translateX(-50%);
  width:min(var(--container), calc(100% - 2 * var(--gutter)));
  border-radius:var(--radius-pill);
  transition:box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.header-row {
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:.6rem .75rem .6rem 1.5rem; max-width:none;
}
/* At the top the header sits on the hero with no chrome at all; the glass surface
   only arrives once content is actually passing underneath it. */
.site-header:not(.is-scrolled) {
  background:none; border-color:transparent; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  /* The bar keeps overflow:hidden so the scroll-progress bar stays inside the pill,
     but that also clips the CTA's drop shadow against the pill edge, which with no
     surface behind it reads as a hard cut around the button. The progress bar is
     scaleX(0) until you scroll, so nothing needs clipping up here. */
  overflow:visible;
  isolation:auto;
}
.site-header.is-scrolled {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),
             0 1px 2px rgba(35,25,15,.06),
             0 16px 40px -12px rgba(35,25,15,.22);
}

/* The logo is the wordmark: lowercase Geist Medium "kadro" with a brass dot on
   the baseline, drawn as outlines so it never waits on the font. Letters take
   currentColor so a dark panel can flip them; the dot stays brass. */
.wordmark { display:inline-flex; align-items:center; color:var(--teal-700); text-decoration:none; }
.wordmark__logo { height:1.42rem; width:auto; display:block; }
.wordmark--sm .wordmark__logo { height:1.2rem; }
@media (max-width: 560px) { .wordmark__logo { height:1.28rem; } }

.site-nav { display:flex; gap:1.75rem; }
.nav-link {
  font:500 .93rem/1 var(--font-sans); color:var(--ink-700);
  text-decoration:none; position:relative; padding-block:.4rem;
  transition:color var(--dur-fast) var(--ease-fast);
}
.nav-link::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--brass-500); border-radius:var(--radius-pill);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-fast) var(--ease-fast);
}
.nav-link:hover { color:var(--ink-900); }
.nav-link:hover::after { transform:scaleX(1); }

/* ---- 8. Hero ------------------------------------------------------------------ */
.hero {
  position:relative; overflow:hidden;
  padding-top:calc(var(--header-h) + clamp(3.5rem, 9vh, 6.5rem));
  padding-bottom:clamp(3rem, 8vh, 5.5rem);
}

.aurora { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.aurora__blob { position:absolute; border-radius:50%; will-change:transform; }
.aurora__blob--teal {
  width:64vw; height:64vw; min-width:560px; min-height:560px; top:-22%; left:-14%;
  background:radial-gradient(closest-side, rgba(166,210,205,.30), rgba(166,210,205,.09) 55%, rgba(166,210,205,0) 100%);
  animation:drift-a 38s ease-in-out infinite alternate;
}
.aurora__blob--brass {
  width:52vw; height:52vw; min-width:480px; min-height:480px; top:-6%; right:-16%;
  background:radial-gradient(closest-side, rgba(236,217,172,.32), rgba(236,217,172,.10) 55%, rgba(236,217,172,0) 100%);
  animation:drift-b 47s ease-in-out infinite alternate;
}
.aurora__blob--mint {
  width:46vw; height:46vw; min-width:420px; min-height:420px; bottom:-28%; left:24%;
  background:radial-gradient(closest-side, rgba(218,238,234,.7), rgba(218,238,234,.2) 55%, rgba(218,238,234,0) 100%);
  animation:drift-c 61s ease-in-out infinite alternate;
}
.aurora__wash {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(250,246,237,0) 55%, var(--sand-100) 96%);
}
@keyframes drift-a { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(7vw,6vh,0) scale(1.14); } }
@keyframes drift-b { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(-6vw,8vh,0) scale(1.1); } }
@keyframes drift-c { from { transform:translate3d(0,0,0) scale(1.05); } to { transform:translate3d(5vw,-5vh,0) scale(.96); } }

.hero-grid {
  display:grid; grid-template-columns:1.08fr .92fr;
  gap:clamp(2rem, 5vw, 4.5rem); align-items:center;
}
.hero-copy { display:flex; flex-direction:column; gap:1.4rem; }
.cta-row { display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; margin-top:.4rem; }
.hero-fine { font:400 .9rem/1.5 var(--font-sans); color:var(--ink-500); margin-top:.2rem; }
.reassure {
  display:flex; align-items:center; gap:.5rem;
  font-size:.9rem; color:var(--ink-600);
}
.reassure .lucide { width:1rem; height:1rem; color:var(--ink-500); }

.badge--live {
  display:inline-flex; align-items:center; gap:.42rem;
  font:500 .78rem/1 var(--font-sans); color:var(--teal-600);
  background:rgba(218,238,234,.75); border:1px solid rgba(166,210,205,.7);
  padding:.4rem .8rem; border-radius:var(--radius-pill);
  white-space:nowrap;
}
.badge__dot {
  width:.5rem; height:.5rem; border-radius:50%; background:var(--teal-500);
  position:relative;
}
.badge__dot::after {
  content:""; position:absolute; inset:-2px; border-radius:50%;
  border:2px solid rgba(21,106,100,.45); opacity:0;
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0% { transform:scale(.55); opacity:.9; }
  60% { transform:scale(1.9); opacity:0; }
  100% { transform:scale(1.9); opacity:0; }
}

/* ---- 10. Demo ------------------------------------------------------------------ */

.demo__glow {
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46% 60% at 24% 42%, rgba(166,210,205,.5), transparent 70%),
    radial-gradient(38% 52% at 78% 68%, rgba(236,217,172,.55), transparent 70%),
    linear-gradient(180deg, rgba(236,247,245,0), rgba(236,247,245,.85) 22%, rgba(236,247,245,.85) 78%, rgba(236,247,245,0));
}
.section-head { display:flex; flex-direction:column; gap:.9rem; margin-bottom:clamp(2.25rem, 5vw, 3.5rem); }
.section-head--row {
  flex-direction:row; align-items:flex-end; justify-content:space-between; gap:2rem;
}
.section-head--row > div { display:flex; flex-direction:column; gap:.9rem; }

@keyframes pop { from { transform:scale(.6); opacity:0; } to { transform:scale(1); opacity:1; } }

/* ---- 11. Cards (faux glass) ------------------------------------------------------ */
.card {
  position:relative;
  background:linear-gradient(150deg, rgba(255,255,255,.9), rgba(255,255,255,.66));
  border:1px solid rgba(255,255,255,.85);
  outline:1px solid rgba(231,220,198,.55); outline-offset:-2px;
  border-radius:var(--radius-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), var(--shadow-sm);
  padding:1.75rem;
}
.card::before {
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; box-shadow:var(--shadow-lg);
  opacity:0; transition:opacity var(--dur) var(--ease-out);
}
.card--service:hover { transform:translateY(-4px); }
.card--service:hover::before { opacity:1; }

.card__body { color:var(--ink-700); font-size:.97rem; }

.card--accent {
  background:linear-gradient(150deg, rgba(246,237,214,.95), rgba(246,237,214,.75));
  border-color:rgba(255,255,255,.7);
  outline-color:rgba(236,217,172,.8);
}

.card-grid {
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(1rem, 2vw, 1.5rem);
}
.card--service { display:flex; flex-direction:column; gap:1rem; }
.card--service .card__body { flex:1; }

.icon-well {
  width:46px; height:46px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--teal-50), var(--teal-100));
  border:1px solid rgba(166,210,205,.55);
  color:var(--teal-700);
}
.icon-well .lucide { width:22px; height:22px; }

.tag-row { display:flex; gap:.5rem; flex-wrap:wrap; }
.tag {
  font:500 .74rem/1 var(--font-mono);
  color:var(--ink-700);
  background:rgba(243,236,221,.9);
  border:1px solid rgba(231,220,198,.9);
  padding:.42rem .8rem; border-radius:var(--radius-pill);
}

/* ---- 12. Process ------------------------------------------------------------------ */
.process-grid {
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem, 6vw, 5rem); align-items:start;
}
.process-intro { display:flex; flex-direction:column; gap:.9rem; position:sticky; top:calc(var(--header-h) + 2rem); }
.steps {
  list-style:none; padding:0;
  display:flex; flex-direction:column; gap:1rem;
  position:relative;
}
.step { display:flex; gap:1.4rem; align-items:flex-start; }
.step__num {
  font:500 .9rem/1 var(--font-mono);
  color:var(--brass-600);
  background:rgba(246,237,214,.9);
  border:1px solid rgba(236,217,172,.9);
  padding:.55rem .7rem; border-radius:var(--radius-pill);
  flex:none; transform:translateY(.15rem);
}
.step .h3 { margin-bottom:.35rem; }

/* ---- 14. Closing ------------------------------------------------------------------ */
.closing { padding-block:clamp(2rem, 5vw, 4rem) var(--section-y); }
.closing-panel {
  position:relative; overflow:hidden;
  background:
    radial-gradient(60% 90% at 88% -10%, rgba(195,150,59,.35), transparent 60%),
    radial-gradient(50% 80% at -5% 110%, rgba(21,106,100,.5), transparent 65%),
    linear-gradient(165deg, var(--teal-600), var(--teal-700) 55%, #072B29);
  border-radius:var(--radius-2xl);
  border:1px solid rgba(236,217,172,.14);
  box-shadow:inset 0 1px 0 rgba(236,217,172,.12), 0 40px 80px -32px rgba(11,63,60,.6);
}
.closing-panel::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;
}
.closing-panel__inner {
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:clamp(2rem, 4vw, 4rem);
  padding:clamp(2.5rem, 6vw, 4.5rem);
  flex-wrap:wrap;
}
.closing-panel__inner > div:first-child { flex:1 1 20rem; max-width:46ch; }
.closing-panel__inner > div:first-child { display:flex; flex-direction:column; gap:1rem; }
.closing-lede {
  font-size:var(--fs-lede); line-height:1.55;
  color:var(--teal-200); max-width:44ch;
}

/* ---- 15. Footer ------------------------------------------------------------------ */
.site-footer {
  border-top:1px solid var(--sand-300);
  padding-block:2.25rem;
  background:rgba(243,236,221,.5);
}
.footer-row {
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}
.footer-nav { display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer-nav .nav-link { font-size:.88rem; color:var(--ink-600); }
.footer-nav .nav-link:hover { color:var(--ink-900); }
.footer-fine { font-size:.85rem; color:var(--ink-600); }
.footer-fine .text-link { font-weight:400; }

/* ---- 16. Reveals ------------------------------------------------------------------
   Reveals ride the `translate` property so `transform` stays free for hover lifts,
   the float bob and press squash on the same elements. */
.js [data-reveal] {
  opacity:0; translate:0 14px;
  transition:opacity var(--dur-entrance) var(--ease-entrance) var(--d, 0ms),
             translate var(--dur-entrance) var(--ease-entrance) var(--d, 0ms);
}
.js [data-reveal].is-in { opacity:1; translate:0 0; }

/* The reveal shorthand above resets transition-property, which silently dropped the
   cards' hover lift (it snapped in one frame while its shadow eased over 200ms).
   Cards need all three channels: reveal on opacity+translate, lift on transform,
   grid dim on filter. Must stay after the reveal block to win the cascade. */
.card, .js [data-reveal].card {
  transition:opacity var(--dur-entrance) var(--ease-entrance) var(--d, 0ms),
             translate var(--dur-entrance) var(--ease-entrance) var(--d, 0ms),
             transform var(--dur-micro) var(--ease-micro),
             filter var(--dur-micro) var(--ease-micro);
}
/* safety net: if main.js is slow or fails, nothing stays invisible */
html.reveal-all [data-reveal] { opacity:1; translate:0 0; }

/* no-JS: show final states outright */

/* ---- 17. Responsive ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .hero-grid { gap:2.5rem; }
  .process-intro { position:static; }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns:1fr; }
  
  
  .card-grid { grid-template-columns:1fr; }
  
  .process-grid { grid-template-columns:1fr; gap:2.25rem; }
  .section-head--row { flex-direction:column; align-items:flex-start; }
  .site-nav { display:none; }
  .header-row { padding-left:1.25rem; }
  
}

/* The underlined phrase is white-space:nowrap so the brass rule stays unbroken, which
   means the headline cannot reflow below ~360px. Step the display size down there
   rather than let an unbreakable line overflow (body has overflow-x:hidden, so an
   overflow here clips silently instead of showing a scrollbar). */
@media (max-width: 374px) {
  :root { --fs-display:2.7rem; --fs-h2:1.95rem; }
  .container { --gutter:1.1rem; }
}

@media (max-width: 560px) {
  .closing-panel { border-radius:24px; }
  /* one CTA per row, full bleed, 56px thumb target */
  .cta-row { flex-direction:column; align-items:stretch; gap:.65rem; }
  .cta-row .btn { width:100%; justify-content:center; }
  .btn--lg { padding:1.1rem 1.5rem; }
  
  .section-head { margin-bottom:2rem; gap:.7rem; }
  .hero-copy { gap:1.1rem; }
  .lede, .section-lede { font-size:1.02rem; line-height:1.55; }
  .card-grid { gap:.85rem; }
  .steps { gap:.85rem; }
    
  
  
  
  
  
}

/* ---- 18. Reduced motion ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
}
.reduced *,
.reduced *::before,
.reduced *::after,
html.reduced .aurora__blob,
html.reduced .badge__dot {
  animation:none !important;
  transition-duration:0ms !important;
  transition-delay:0ms !important;
}
html.reduced .js [data-reveal], html.reduced [data-reveal] { opacity:1; translate:0 0; transform:none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal] { opacity:1 !important; translate:0 0 !important; transform:none !important; }
  
}

/* ==========================================================================
   19. THE COOL LAYER: light, depth, kinetics. All additive.
   ========================================================================== */

/* ---- 19.1 WebGL aurora canvas ------------------------------------------- */
.aurora__gl {
  position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity:0; transition:opacity 1.6s ease .2s;
}
html.has-gl .aurora__gl { opacity:.58; }
/* when GL is live, soften the CSS blobs so they only fill the vignette */
html.has-gl .aurora__blob { opacity:.35; }
.hero { isolation:isolate; }

/* ---- 19.2 Intro bloom ------------------------------------------------------ */
.intro-veil {
  position:fixed; inset:0; z-index:300; pointer-events:none;
  background:var(--sand-100);
  display:grid; place-items:center;
  transition:opacity .9s var(--ease-out) .35s, visibility 0s 1.3s;
}
.intro-veil::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(38% 46% at 50% 50%, rgba(236,217,172,.9), rgba(236,217,172,0) 70%),
    radial-gradient(60% 70% at 50% 50%, rgba(218,238,234,.8), rgba(218,238,234,0) 72%);
  transform:scale(.2); opacity:0;
  transition:transform 1.4s var(--ease-out), opacity .5s ease;
}
.intro-mark {
  font:500 clamp(2rem, 4vw, 3rem)/1 var(--font-sans); letter-spacing:-.03em; color:var(--teal-700);
  display:inline-flex; align-items:baseline; gap:.055em;
  transform:translateY(12px) scale(.96); opacity:0;
  transition:transform .8s var(--ease-pop), opacity .5s ease;
}
/* the dot lands last, the one piece of the logo that is drawn, not typed */
.intro-mark .dot {
  width:.111em; height:.111em; border-radius:50%; background:var(--brass-500);
  transform:scale(0); transition:transform .5s var(--ease-pop) .35s;
}
html.intro-go .intro-mark { transform:none; opacity:1; }
html.intro-go .intro-mark .dot { transform:scale(1); }
html.intro-go .intro-veil::before { transform:scale(3.2); opacity:1; }
html.intro-go .intro-veil { opacity:0; visibility:hidden; }
/* hold the hero content until the veil lifts, then let reveals run */
html.intro .hero-copy .split-ready .w { transition-delay:calc(var(--i) * 80ms + 1.15s); }
html.intro .split-ready .uline::after { transition-delay:1.9s; }
html.intro .hero-copy, html.intro .site-header { transition-delay:1s !important; }
html.intro .site-header { opacity:0; transform:translate(-50%, -12px); }
html.intro-go .site-header, html.intro-done .site-header { opacity:1; transform:translate(-50%, 0); transition:opacity .8s var(--ease-out) 1s, transform .9s var(--ease-out) 1s; }

/* ---- 19.3 Pointer spotlight on glass + cards ---------------------------------
   .spot::after is a soft white light that follows the pointer, painted ABOVE the
   surface but BELOW the content (isolation + z-index:-1). On hover, cards also swap
   their border for a lit ring: a second background layer clipped to the border box. */
.spot { --mx:50%; --my:50%; position:relative; isolation:isolate; }
/* .spot only needs *a* containing block; it must not demote elements that are already
   positioned. Equal specificity meant it was overriding the header's position:fixed,
   dropping the bar into flow, pushing main down by its own height, and putting the
   hero's overflow clip right through the aurora. */
header.site-header { position:fixed; }
.spot::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  background:radial-gradient(260px circle at var(--mx) var(--my), rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
  opacity:0; transition:opacity .35s var(--ease-out);
}
.spot:hover::after { opacity:1; transition-duration:130ms; }  /* fast in, slow out (:758) */
.site-header.spot::after { opacity:1; background:radial-gradient(200px circle at var(--mx) var(--my), rgba(255,255,255,.5), rgba(255,255,255,0) 60%); }
/* ...but not before the bar has a surface: with the header transparent at the top of
   the page the glow floats free and its pill clip reads as a hard cut around the CTA. */
.site-header:not(.is-scrolled).spot::after { opacity:0; }
.closing-panel.spot::after { display:none; }  /* the dust canvas paints the pointer light instead */
.closing-panel__inner { position:relative; z-index:2; }

/* lit border ring on hover (cards + stat tiles) */
.card.spot:hover {
  border-color:transparent; outline-color:transparent;
  background-origin:padding-box, border-box;
  background-clip:padding-box, border-box;
}
.card.spot:hover {
  background-image:
    linear-gradient(150deg, rgba(255,255,255,.92), rgba(255,255,255,.7)),
    radial-gradient(320px circle at var(--mx) var(--my), rgba(195,150,59,.7), rgba(166,210,205,.45) 42%, rgba(255,255,255,.35) 72%);
}
.card--accent.spot:hover {
  background-image:
    linear-gradient(150deg, rgba(246,237,214,.97), rgba(246,237,214,.8)),
    radial-gradient(320px circle at var(--mx) var(--my), rgba(166,124,36,.75), rgba(217,179,106,.5) 42%, rgba(255,255,255,.35) 72%);
}

/* ---- 19.4 3D tilt on the hero object ([data-tilt-scene] > [data-tilt-wrap] > [data-tilt]) */
.tilt-scene { perspective:1400px; }
/* perspective only reaches direct children, and .hero-stack now sits between the
   scene and the card: preserve-3d hands the card the scene it is tilting in. */
.tilt-scene [data-tilt-wrap] { transform-style:preserve-3d; }
.tilt-scene [data-tilt] {
  --rx:0deg; --ry:0deg; --sx:50%; --sy:50%;
  transform-style:preserve-3d;
  will-change:transform;
}

.tilt-scene [data-tilt] { transform:rotateX(var(--rx)) rotateY(var(--ry)); transition:box-shadow .3s var(--ease-out); }
.tilt-scene [data-tilt]:hover {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),
             0 2px 4px rgba(35,25,15,.05),
             0 24px 48px -12px rgba(35,25,15,.22),
             0 48px 96px -32px rgba(11,63,60,.28);
}
/* specular sheen */
.tilt-scene [data-tilt]::before {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:
    radial-gradient(420px circle at var(--sx) var(--sy), rgba(255,255,255,.35), rgba(255,255,255,0) 55%),
    linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 60%);
  opacity:0; transition:opacity .4s var(--ease-out);
}
.tilt-scene [data-tilt]:hover::before { opacity:1; }
.tilt-scene [data-tilt] > * { position:relative; z-index:3; }

/* ---- 19.5 Split-text reveals ------------------------------------------------------ */
.split-ready .w {
  display:inline-block; white-space:nowrap;
  opacity:0; transform:translateY(.55em) rotate(1.2deg); filter:blur(8px);
  transition:opacity var(--dur-entrance) var(--ease-entrance),
             transform var(--dur-entrance) var(--ease-entrance),
             filter var(--dur-entrance) var(--ease-entrance);
  transition-delay:calc(var(--d, 0ms) + var(--i) * 70ms + 120ms);
  transform-origin:0 100%;
}
.is-in .split-ready .w, .is-in.split-ready .w { opacity:1; transform:none; filter:blur(0); }
html.reduced .split-ready .w, html:not(.js) .split-ready .w, html.reveal-all .split-ready .w { opacity:1; transform:none; filter:none; }
.hero-copy .split-ready .w { transition-delay:calc(var(--i) * 80ms + 60ms); }
/* the underline should draw after the word lands */
.split-ready .uline::after { transition-delay:.9s; }

/* ---- 19.6 Odometer digits ------------------------------------------------------ */
/* clip-path instead of overflow:hidden so the inline-flex keeps a real text baseline */
[data-odo] { display:inline-flex; line-height:1; vertical-align:baseline; }
/* contain:paint keeps the ten-digit strip out of the scrollable overflow of any scrolling
   ancestor (the deck pages), which clip-path alone does not */
.odo { display:inline-block; height:1em; position:relative; clip-path:inset(-.02em 0 -.06em 0); contain:paint; }
.odo__strip {
  display:flex; flex-direction:column; line-height:1;
  transform:translateY(0);
  transition:transform 1.5s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--k) * 90ms + 200ms);
}
.odo__strip > span { display:block; height:1em; }
.odo-go .odo__strip { transform:translateY(calc(var(--n) * -1em)); }
html.reduced .odo__strip, html:not(.js) .odo__strip { transition:none; transform:translateY(calc(var(--n) * -1em)); }

/* ---- 19.7 Header progress + nav pill --------------------------------------------- */
.header-progress {
  position:absolute; left:1.5rem; right:1.5rem; bottom:0; height:2px;
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--brass-400), var(--brass-500) 60%, var(--teal-400));
  transform:scaleX(0); transform-origin:left;
  opacity:.9;
}
.site-header { overflow:hidden; }
.site-nav { position:relative; }
.nav-pill {
  position:absolute; top:50%; left:0; height:2.05rem; transform:translateX(0);
  translate:0 -50%;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(35,25,15,.05);
  opacity:0; z-index:-1;
  transition:transform .45s var(--ease-pop), width .45s var(--ease-pop), opacity .25s ease;
  pointer-events:none;
}
.site-nav { isolation:isolate; }
.nav-link { position:relative; z-index:1; }
.nav-link.is-active { color:var(--teal-700); }
.nav-link.is-active::after { transform:scaleX(1); }

@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-100%); } }

/* ---- 19.9 Statement band (scroll-scrubbed text) ---------------------------------------- */
.statement { padding-block:clamp(3rem, 8vw, 6rem) clamp(1rem, 3vw, 2rem); }
.statement__text {
  font:600 clamp(1.7rem, 1rem + 3.2vw, 3.4rem)/1.18 var(--font-sans);
  letter-spacing:-.028em; max-width:26ch;
  color:var(--ink-900);
  text-wrap:balance;
}
.statement__text .w {
  display:inline-block; color:var(--ink-300);
  transition:color .35s var(--ease-out);
}
.statement__text .w.lit { color:var(--ink-900); }
.statement__text .w.lit.key { color:var(--teal-600); }
html.reduced .statement__text .w, html:not(.js) .statement__text .w { color:var(--ink-900); }

/* ---- 19.10 Process line ------------------------------------------------------------- */
.steps { padding-left:0; }
.steps__line {
  --draw:0%;
  position:absolute; left:calc(1.75rem + .95rem); top:2.6rem; bottom:2.6rem; width:2px;
  background:linear-gradient(180deg, var(--brass-400), var(--teal-400) 60%, rgba(61,141,134,0));
  transform-origin:top; transform:scaleY(0);
  border-radius:var(--radius-pill); opacity:.85; z-index:0;
  transition:transform 1.1s var(--ease-entrance);
}
.steps__line.is-drawn { transform:scaleY(1); }
.step { position:relative; z-index:1; }
.step .step__num { transition:background-color .35s var(--ease-out), color .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.step.is-lit .step__num { background:var(--teal-700); color:var(--sand-100); border-color:var(--teal-700); box-shadow:0 0 0 4px rgba(21,106,100,.15); }

/* ---- 19.11 Dust + light sweep in the closing panel ------------------------------------ */
.dust { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:.9; }
.closing-panel__inner { z-index:2; }
.closing-panel::before {
  content:""; position:absolute; inset:-40% -20%; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, rgba(236,217,172,0) 42%, rgba(236,217,172,.10) 50%, rgba(236,217,172,0) 58%);
  transform:translateX(-60%) rotate(0.001deg);
  animation:sweep 9s ease-in-out infinite;
}
@keyframes sweep { 0%, 55% { transform:translateX(-60%); } 85%, 100% { transform:translateX(60%); } }
html.reduced .closing-panel::before { animation:none; opacity:0; }
.closing-panel::after { z-index:1; }

/* ---- 19.12 Footer ghost wordmark ------------------------------------------------------- */
.site-footer { position:relative; overflow:hidden; padding-top:clamp(5rem, 12vw, 9rem); }
.footer-ghost {
  position:absolute; left:50%; bottom:-.28em; transform:translateX(-50%);
  font:500 clamp(9rem, 26vw, 24rem)/1 var(--font-sans); letter-spacing:-.03em;
  color:transparent;
  background:linear-gradient(180deg, rgba(231,220,198,.9), rgba(243,236,221,0) 85%);
  -webkit-background-clip:text; background-clip:text;
  pointer-events:none; user-select:none; white-space:nowrap;
  z-index:0;
}
.footer-row { position:relative; z-index:1; }

/* ---- 19.13 Buttons: glow + icon nudge ------------------------------------------------- */
.btn--primary::before, .btn--accent::before {
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-2;
  background:radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.35), transparent 60%);
  opacity:0; transition:opacity .3s ease;
}
.btn .lucide { transition:transform var(--dur-micro) var(--ease-micro); }
.btn:hover .lucide { transform:translateX(3px); }
.btn--primary { box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px -10px rgba(11,63,60,.55), 0 0 0 0 rgba(21,106,100,0); }
.btn--primary:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 18px 36px -12px rgba(11,63,60,.6), 0 0 40px -8px rgba(61,141,134,.35); }
.btn--accent:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 18px 36px -12px rgba(35,25,15,.55), 0 0 44px -6px rgba(217,179,106,.55); }

/* ---- 19.14 Icon wells breathe on hover ------------------------------------------- */
.card--service .icon-well { transition:transform var(--dur-micro) var(--ease-micro), box-shadow var(--dur-fast) var(--ease-fast); }
.card--service:hover .icon-well { transform:translateY(-2px) rotate(-4deg) scale(1.06); box-shadow:0 8px 20px -8px rgba(21,106,100,.35); }
.card--service .icon-well .lucide { transition:transform var(--dur-micro) var(--ease-micro); }
.card--service:hover .icon-well .lucide { transform:rotate(6deg); }

/* ---- 19.15 Testimonial: highlighter sweep on the key phrase --------------------------- */
.hl {
  background:linear-gradient(120deg, rgba(236,217,172,.0), rgba(236,217,172,.9) 8%, rgba(236,217,172,.9) 92%, rgba(236,217,172,0));
  background-repeat:no-repeat; background-size:0% 38%; background-position:0 82%;
  transition:background-size 1.1s var(--ease-entrance) .5s;
  border-radius:2px; padding-inline:.06em; margin-inline:-.06em;
}
.is-in .hl { background-size:100% 38%; }
html.reduced .hl, html:not(.js) .hl { background-size:100% 38%; }

/* ---- 19.17 Reduced-motion + small screens for the cool layer -------------------------- */
html.reduced .tilt-scene { animation:none; }
html.reduced .spot::after { display:none; }
html.reduced .header-progress { display:none; }
@media (max-width: 860px) {
  .footer-ghost { font-size:clamp(6rem, 30vw, 12rem); }
  .statement__text { max-width:none; }
  
  
}

.statement__text em { font-style:normal; }

/* ---- 19.18 Brass seal stamp (.seal inside a positioned parent; .is-stamped fires it) ---- */

.seal-host { position:relative; }
.seal {
  position:absolute; right:clamp(1rem, 3vw, 2rem); bottom:clamp(1rem, 3vw, 1.75rem);
  width:clamp(64px, 8vw, 88px); aspect-ratio:1; pointer-events:none; z-index:3;
  opacity:0; transform:rotate(-16deg) scale(.55);
}
.seal__svg { width:100%; height:100%; fill:none; stroke:var(--brass-400); }
.seal__ring { stroke-width:2.5; opacity:.75; }
.seal__ring--inner { stroke-width:1; opacity:.4; stroke-dasharray:3 5; }
.seal__check { stroke:var(--brass-300, #E2C286); stroke-width:6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:64; stroke-dashoffset:64; }
.seal.is-stamped {
  animation:stamp .62s var(--ease-pop) forwards;
}
.seal.is-stamped .seal__check { animation:draw-check .45s var(--ease-out) .22s forwards; }
.seal.is-stamped .seal__ring { animation:seal-ring .7s var(--ease-out) forwards; }
@keyframes stamp {
  0% { opacity:0; transform:rotate(-16deg) scale(.55); }
  55% { opacity:1; transform:rotate(-8deg) scale(1.08); }
  100% { opacity:1; transform:rotate(-8deg) scale(1); }
}
@keyframes draw-check { to { stroke-dashoffset:0; } }
@keyframes seal-ring { from { opacity:0; } to { opacity:.75; } }
html.reduced .seal { opacity:1; transform:rotate(-8deg) scale(1); }
html.reduced .seal__check { stroke-dashoffset:0; }
html:not(.js) .seal { display:none; }

/* ---- 19.19 Focus mode: hover a card in a grid, the room dims ------------------ */
@media (hover: hover) and (pointer: fine) {
  .card-grid:hover .card--service:not(:hover) {
    filter:opacity(.62); transform:scale(.99);
  }
}
html.reduced .card-grid:hover .card--service:not(:hover) { filter:none; transform:none; }

/* ---- 19.20 Machined brass ---------------------------------------------------- */
.uline::after {
  background:linear-gradient(90deg, #A67C24, #E2C078 22%, #C3963B 48%, #F0DDAF 72%, #B98C2E);
}

/* ---- 19.21 Golden hour: page light warms as you scroll ----------------------- */
.sunlight {
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(90% 60% at 84% 6%, rgba(236,217,172,.55), transparent 62%),
    radial-gradient(80% 55% at 10% 92%, rgba(195,150,59,.28), transparent 60%);
  opacity:calc(var(--sun, 0) * .5);
  transition:opacity .3s linear;
}
html.reduced .sunlight { opacity:.25; }

/* ---- 20. Beat sequencer (js/main.js): [data-beats] holds [data-step] groups that ease
   in on their own beat; [data-transient] steps leave when a later step fires. -------- */

/* replay */
.stage__replay {
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  margin:clamp(1.75rem, 4vw, 2.5rem) auto 0;
  padding:.6rem 1.15rem; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.72); color:var(--ink-600);
  border:1px solid rgba(35,25,15,.1); box-shadow:var(--shadow-sm);
  font:500 .82rem/1 var(--font-sans);
  transition:background-color var(--dur-fast) var(--ease-fast), color var(--dur-fast) var(--ease-fast), transform var(--dur-micro) var(--ease-micro);
}
.stage__replay:hover { background:var(--white); color:var(--ink-900); }
.stage__replay:hover { transform:translateY(-1px); }
.stage__replay:active { transform:scale(.97); transition:transform 90ms var(--ease-fast); }
.stage__replay .lucide { width:.85rem; height:.85rem; color:var(--teal-500); }

/* engine states: hidden until the beat fires, then eased in */
.js [data-beats][data-armed] [data-step] { opacity:0; transform:translateY(12px) scale(.97); }

.js [data-beats][data-armed] [data-step].is-in {
  opacity:1; transform:none;
  transition:opacity .42s var(--ease-out), transform .5s var(--ease-pop);
}

html.reduced .stage__replay, html:not(.js) .stage__replay { display:none; }

/* ---- 21. Safety net, made decisive -------------------------------------------------
   html.reveal-all is only ever set when main.js failed to load or run. In that state
   nothing may stay hidden or wait on a delay meant for a choreography that will never
   happen, including the intro's 1s hold and the demo's step gate. */
html.reveal-all [data-reveal],
html.reveal-all .hero-copy,
html.reveal-all .site-header {
  opacity:1 !important;
  translate:0 0 !important;
  transition-delay:0s !important;
}
html.reveal-all .site-header { transform:translate(-50%, 0) !important; }
html.reveal-all [data-beats] [data-step] { opacity:1 !important; transform:none !important; }

html.reveal-all .split-ready .w {
  opacity:1 !important; transform:none !important; filter:none !important; transition-delay:0s !important;
}
html.reveal-all .nav-pill, html.reveal-all .header-progress { opacity:0 !important; }

/* ---- 22. Book-a-consult form (lives on the dark closing panel) --------------------- */
.book { display:flex; flex-direction:column; gap:.85rem; min-width:0; flex:1 1 24rem; max-width:31rem; }
.book__row { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.field { display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.field__label {
  font:500 .78rem/1.3 var(--font-sans); letter-spacing:.01em;
  color:rgba(236,247,245,.72);
}
.field__input {
  width:100%; font:400 .95rem/1.4 var(--font-sans); color:var(--sand-100);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(236,247,245,.22);
  border-radius:var(--radius-md);
  padding:.72rem .85rem;
  transition:border-color var(--dur-fast) var(--ease-fast), background-color var(--dur-fast) var(--ease-fast);
}
.field__input::placeholder { color:rgba(236,247,245,.4); }
.field__input:hover { border-color:rgba(236,247,245,.36); }
.field__input:focus {
  outline:none; background:rgba(255,255,255,.11);
  border-color:var(--brass-400);
  box-shadow:0 0 0 3px rgba(195,150,59,.22);
}
.field__input:focus-visible { outline:none; }   /* the ring above is the focus indicator */
.field__input--area { resize:vertical; min-height:5.2rem; }
.book__submit { margin-top:.35rem; justify-content:center; }
.book__note {
  font:400 .82rem/1.5 var(--font-sans); color:rgba(236,247,245,.62); margin-top:.1rem;
}
.text-link--light { color:var(--brass-200); }
.text-link--light:hover { color:var(--sand-100); }
/* a field the browser flags as invalid only after a submit attempt */
.book.is-checked .field__input:invalid { border-color:var(--oxblood-600); }
.book__note.is-error { color:var(--brass-200); }

@media (max-width: 560px) {
  .book__row { grid-template-columns:1fr; }
}

/* ---- 23. Sub-pages (generated from site/ by scripts/build.mjs) --------------------------
   Hub, town, notes and 404 pages share the homepage chrome and these few components.
   Keep selectors flat; the reveal shorthand trap (section 16) applies here too. */
.page-head {
  position:relative;
  padding-top:calc(var(--header-h) + clamp(3rem, 8vh, 5.5rem));
  padding-bottom:clamp(1rem, 3vw, 2rem);
}
.page-head__inner { display:flex; flex-direction:column; gap:1.15rem; }
.page-head .display { max-width:18ch; }
.page-head .cta-row { margin-top:.4rem; }
.page-head .reassure { margin-top:-.2rem; }
.page-head--note .display--note { max-width:22ch; font-size:clamp(2.25rem, 1.6rem + 3.2vw, 3.6rem); }
html.intro .page-head [data-reveal] { transition-delay:1.05s !important; }

.crumbs { display:flex; flex-wrap:wrap; gap:.45rem; list-style:none; padding:0; font:500 .8rem/1.2 var(--font-sans); color:var(--ink-500); }
.crumbs a { color:var(--ink-600); text-decoration:none; }
.crumbs a:hover { color:var(--ink-900); text-decoration:underline; text-underline-offset:2px; }
.crumbs li + li::before { content:"/"; margin-right:.45rem; color:var(--ink-300); }

.town-intro { padding-top:clamp(1.5rem, 4vw, 3rem); }
.prose { max-width:68ch; font-size:1.06rem; line-height:1.7; color:var(--ink-700); }
.prose p + p, .prose ul + p, .prose p + ul, .prose h2 + p, .prose h3 + p { margin-top:1.15rem; }
.prose h2 { font-size:var(--fs-h3); font-weight:600; letter-spacing:-.015em; line-height:1.25; margin-top:2.2rem; }
.prose h3 { font-size:1.08rem; font-weight:600; margin-top:1.8rem; }
.prose h2:first-child, .prose h3:first-child { margin-top:0; }
.prose ul { padding-left:1.25rem; }
.prose li + li { margin-top:.45rem; }
.prose strong { color:var(--ink-900); font-weight:600; }
.prose a { color:var(--teal-600); text-decoration-thickness:1px; text-underline-offset:3px; }
.prose a:hover { color:var(--teal-700); }
.prose--note { font-size:1.1rem; }
.note .container { display:flex; flex-direction:column; gap:2.5rem; }
.note__related { display:flex; flex-direction:column; gap:.8rem; }

.link-row { display:flex; flex-wrap:wrap; gap:.6rem; }
.link-pill {
  display:inline-flex; align-items:center; gap:.4rem;
  font:500 .88rem/1 var(--font-sans); color:var(--teal-700); text-decoration:none;
  background:rgba(255,255,255,.7); border:1px solid rgba(231,220,198,.9);
  padding:.62rem 1rem; border-radius:var(--radius-pill);
  transition:background-color var(--dur-fast) var(--ease-fast), border-color var(--dur-fast) var(--ease-fast), color var(--dur-fast) var(--ease-fast);
}
.link-pill:hover { background:var(--white); border-color:var(--teal-200); color:var(--teal-700); }

.faq-section { padding-top:clamp(1rem, 3vw, 2rem); }
.faq { max-width:68ch; display:flex; flex-direction:column; }
.faq__item { padding:1.2rem 0; border-top:1px solid var(--sand-300); }
.faq__item:last-child { border-bottom:1px solid var(--sand-300); }
.faq__q { font-size:1.05rem; font-weight:600; color:var(--ink-900); letter-spacing:-.01em; line-height:1.35; }
.faq__a { margin-top:.5rem; color:var(--ink-700); line-height:1.65; }

/* link cards on the hub + notes index: .card is the faux-glass base from section 11 */
.town-card, .note-card {
  display:flex; flex-direction:column; gap:.7rem;
  color:inherit; text-decoration:none;
  /* transitions come from `.card, .js [data-reveal].card` (section 16). Do not redeclare here */
}
.town-card:hover, .note-card:hover { transform:translateY(-4px); }
.town-card:hover::before, .note-card:hover::before { opacity:1; }
.town-card .card__body, .note-card .card__body { flex:1; }
.town-card__go {
  display:inline-flex; align-items:center; gap:.35rem;
  font:500 .85rem/1 var(--font-sans); color:var(--teal-600);
}
.town-card__go .lucide { width:1em; height:1em; transition:transform var(--dur-fast) var(--ease-fast); }
.town-card:hover .town-card__go .lucide, .note-card:hover .town-card__go .lucide { transform:translateX(3px); }
.town-grid { margin-top:.5rem; }
.counties .prose { max-width:72ch; }

/* closing panel: where-we-are line + hidden honeypot + select */
.closing-where { font-size:.9rem; color:rgba(236,247,245,.62); }
.book__hp { position:absolute !important; left:-10000px; width:1px; height:1px; opacity:0; pointer-events:none; }
.field__input--select {
  appearance:none; -webkit-appearance:none; cursor:pointer;
  padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A6D2CD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .85rem center; background-size:16px 16px;
}
.field__input--select option { color:var(--ink-900); background:var(--sand-100); }
.book.is-sending .book__submit { opacity:.7; pointer-events:none; }

/* footer: service-area block above the existing row */
.footer-area {
  display:flex; flex-direction:column; gap:.9rem;
  padding-bottom:1.75rem; margin-bottom:1.75rem;
  border-bottom:1px solid var(--sand-300);
  position:relative; z-index:1;
}
.footer-area__text { font-size:.92rem; color:var(--ink-600); max-width:64ch; }
.footer-area__text strong { color:var(--ink-800); font-weight:600; }
.footer-area__links { display:flex; flex-wrap:wrap; gap:.35rem .9rem; }
.footer-area__links a { font:500 .85rem/1.4 var(--font-sans); color:var(--ink-700); text-decoration:none; }
.footer-area__links a:hover { color:var(--teal-700); text-decoration:underline; text-underline-offset:2px; }

@media (max-width: 560px) {
  .page-head { padding-top:calc(var(--header-h) + 2rem); }
}

/* ---- 24. Service-area map (built by site/templates/rmap.mjs) -----------------------
   Real Census geography, not a diagram. Line weights are in device pixels
   (vector-effect) so hairlines stay hairlines at any width, while type is in
   viewBox units so it grows with the map. */
.where-grid { display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(2rem, 4.5vw, 4rem); align-items:center; }
.where-copy { display:flex; flex-direction:column; gap:1.15rem; align-items:flex-start; }
.where-copy p { max-width:44ch; }
.where-ctas { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.15rem; }
.hub-stack { display:flex; flex-direction:column; gap:clamp(2rem, 4vw, 3.25rem); }
.hub-stack .prose { max-width:68ch; }

/* Every map is capped, because the label layout is solved for one width and can
   only be scaled so far either way before the type is too small or too coarse.
   Keep these in step with the `ref` each call site passes to rmap.render(). */
.smap-fig { margin:0; width:100%; margin-inline:auto; }
.smap-fig--band { max-width:620px; }          /* ref 540 · drawn 476–620 */
.smap-fig--full { max-width:760px; }          /* ref 620 · drawn 516–760 */
.smap-fig--sm  { max-width:620px; margin-top:2.25rem; }   /* ref 565 · drawn 516–620 */

.smap {
  width:100%; height:auto; display:block; overflow:hidden;
  font-family:var(--font-sans);
  border-radius:var(--smap-radius, var(--radius-lg));
  box-shadow:var(--smap-plate);
}
.smap__ground { fill:var(--smap-ground); }
/* fill comes from a per-map gradient set on the element itself, a CSS fill here
   would beat that presentation attribute and flatten it */
/* the shoreline echoed out into open water, the oldest trick on a sea chart,
   and the fastest way to make a body of water read as water */
.smap__echo path { fill:none; stroke:var(--smap-echo); }
.smap__echo path:first-child { opacity:.13; }
.smap__echo path:last-child  { opacity:.20; }

.smap__ctx path    { fill:none; stroke:var(--smap-ctxline); stroke-width:.9; vector-effect:non-scaling-stroke; }
.smap__states path { fill:none; stroke:var(--smap-stline); stroke-width:1.15; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.smap__county { stroke:var(--smap-seam); stroke-width:1.1; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
/* the footprint's lift: a drop shadow built from stacked strokes instead of a blur
   filter, because a filter re-renders on every camera frame and cost more than the
   rest of the map put together. Widths are device pixels (vector-effect), so the
   shadow keeps the same softness at every zoom. */
.smap__lift path { fill:var(--smap-lift-color); stroke:var(--smap-lift-color); stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.smap__lift-core { stroke:none; fill-opacity:calc(var(--smap-lift-op) * .55); }
.smap__lift-s1 { fill:none; stroke-width:4;  stroke-opacity:calc(var(--smap-lift-op) * .32); }
.smap__lift-s2 { fill:none; stroke-width:9;  stroke-opacity:calc(var(--smap-lift-op) * .18); }
.smap__lift-s3 { fill:none; stroke-width:15; stroke-opacity:calc(var(--smap-lift-op) * .10); }
.smap__lift-s4 { fill:none; stroke-width:22; stroke-opacity:calc(var(--smap-lift-op) * .05); }
.smap__inner  { fill:none; stroke:var(--smap-inner); }
.smap__edge   { fill:none; stroke:var(--smap-edge); stroke-width:1.15; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.smap__stateline { stroke:var(--smap-brass); stroke-width:1.15; vector-effect:non-scaling-stroke; stroke-dasharray:4 5; opacity:.85; }
.smap__road { fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.smap__road--out { stroke:var(--smap-road-out); stroke-width:.85; }
.smap__road--in  { stroke:var(--smap-road-in);  stroke-width:1; }

.smap__cname, .smap__state, .smap__lake, .smap__scale text {
  font-family:var(--font-mono); font-weight:500; text-transform:uppercase; text-anchor:middle;
}
.smap__cname { fill:var(--smap-cname); }
.smap__state { fill:var(--smap-statename); }
.smap__lake  { fill:var(--smap-lakename); }
.smap__scale text { fill:var(--smap-scale); }
.smap__scalebar { fill:none; stroke:var(--smap-scale); stroke-width:1.1; vector-effect:non-scaling-stroke; }

.smap__pin  { cursor:pointer; text-decoration:none; outline:none; -webkit-touch-callout:none; -webkit-user-drag:none; }
.smap__hit  { fill:transparent; }
.smap__halo {
  fill:var(--smap-halo); opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(.35);
  transition:opacity var(--dur) var(--ease-out), transform .35s var(--ease-pop);
}
.smap__dot {
  fill:var(--smap-dot); stroke:var(--smap-dotring); transform-box:fill-box; transform-origin:center;
  transition:transform var(--dur-micro) var(--ease-micro), fill var(--dur-fast) var(--ease-fast);
}
.smap__ring { fill:none; stroke:var(--smap-dot); stroke-width:1.3; vector-effect:non-scaling-stroke; opacity:.42; }
.smap__town {
  font-weight:600; fill:var(--smap-townname); paint-order:stroke;
  stroke:var(--smap-townhalo); stroke-linejoin:round; transition:fill var(--dur-fast) var(--ease-fast);
}
.smap__pin--t1 .smap__town { font-weight:650; letter-spacing:-.004em; }
.smap__pin--t3 .smap__town { font-weight:560; fill:var(--smap-townname-sm); }
/* Names that wait: one that could not fit without colliding (is-tucked), or one whose
   town only earns its name a few zoom levels in (smap__lod--wait, see the explorable
   block below). Both show the moment you reach for the dot. */
.smap__town.is-tucked, .smap__lod--wait .smap__town { opacity:0; transition:opacity var(--dur-fast) var(--ease-fast), fill var(--dur-fast) var(--ease-fast); }

@media (hover: hover) {
  .smap__pin:hover .smap__dot { fill:var(--smap-brass); transform:scale(1.3); }
  .smap__pin:hover .smap__halo { opacity:1; transform:scale(1); }
  .smap__pin:hover .smap__town { fill:var(--smap-hi); opacity:1; }
}
.smap__pin:focus-visible .smap__dot, .smap__pin.is-on .smap__dot { fill:var(--smap-brass); transform:scale(1.3); }
.smap__pin:focus-visible .smap__halo, .smap__pin.is-on .smap__halo { opacity:1; transform:scale(1); }
.smap__pin:focus-visible .smap__town, .smap__pin.is-on .smap__town { fill:var(--smap-hi); opacity:1; }

/* Two label sets ship in the same SVG, text inside an SVG is measured in user
   units, so a media query can't resize it without breaking the placement solved
   around it. Show whichever was laid out for this width. */
.smap--n { display:none; }
@media (max-width: 560px) {
  .smap--w { display:none; }
  .smap--n { display:inline; }
}

/* ---- the linked index beside the map ------------------------------------------------- */
.smap-index {
  display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.6rem; width:100%; max-width:44ch;
  padding:1.05rem 0 .2rem; border-top:1px solid rgba(211,195,164,.55);
}
.smap-index__h {
  font:500 .68rem/1 var(--font-mono); letter-spacing:.11em; text-transform:uppercase;
  color:var(--teal-600); margin:0 0 .6rem;
}
.smap-index__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.06rem; }
.smap-index__list a {
  position:relative; display:block; margin-left:-.8rem; padding:.19rem .45rem .19rem .8rem;
  border-radius:8px; font-size:.895rem; line-height:1.45; color:var(--ink-700); text-decoration:none;
  transition:color var(--dur-fast) var(--ease-fast), background-color var(--dur-fast) var(--ease-fast);
}
.smap-index__list a::before {
  content:""; position:absolute; left:.16rem; top:50%; width:4px; height:4px; margin-top:-2px;
  border-radius:50%; background:var(--teal-700); opacity:.3;
  transition:opacity var(--dur-fast) var(--ease-fast), background-color var(--dur-fast) var(--ease-fast), transform var(--dur) var(--ease-pop);
}
.smap-index__list a:hover, .smap-index__list a:focus-visible, .smap-index__list a.is-on {
  color:var(--ink-900); background:var(--teal-50);
}
.smap-index__list a:hover::before, .smap-index__list a:focus-visible::before, .smap-index__list a.is-on::before {
  opacity:1; background:var(--brass-500); transform:scale(1.5);
}

/* ---- palette: B · Relief. The twelve counties are one lit slab of brand teal
   on warm paper, with the lake sitting under it. Swap the block to restyle. --- */
.smap {
  --smap-ground:#F7F1E4; --smap-water-a:#BFD5DA; --smap-water-b:#DAE7E9; --smap-echo:#1D5A63;
  --smap-ctxline:rgba(170,146,104,.28); --smap-stline:rgba(146,122,84,.42);
  --smap-cty-a:#17635C; --smap-cty-b:#125550; --smap-cty-c:#0D4642;
  --smap-seam:rgba(236,247,245,.20); --smap-edge:rgba(9,45,42,.55); --smap-inner:rgba(255,255,255,.14);
  --smap-road-out:rgba(150,124,74,.20); --smap-road-in:rgba(233,199,132,.40);
  --smap-brass:#E8C57F; --smap-hi:#E8C57F;
  --smap-cname:rgba(203,232,226,.50); --smap-statename:rgba(120,102,70,.32);
  --smap-lakename:rgba(28,80,90,.5); --smap-scale:rgba(60,72,68,.58);
  --smap-halo:rgba(232,197,127,.34); --smap-dot:#F8F1DF; --smap-dotring:rgba(9,45,42,.6);
  --smap-townname:#F4EEE0; --smap-townname-sm:#DDEAE5; --smap-townhalo:rgba(8,38,35,.55);
  --smap-lift-color:#123A34; --smap-lift-op:.26;
  --smap-radius:18px;
  --smap-plate:inset 0 0 0 1px rgba(120,102,70,.16), 0 1px 2px rgba(35,25,15,.04), 0 18px 40px -18px rgba(35,25,15,.16);
}
.smap--b .smap__pin--t1 .smap__ring { stroke:var(--smap-brass); opacity:.75; }

/* ---- entrance: paper, then land, then the roads, then the towns ---------------------- */
.js .smap-fig .smap__ctx, .js .smap-fig .smap__states, .js .smap-fig .smap__statenames,
.js .smap-fig .smap__lift, .js .smap-fig .smap__land, .js .smap-fig .smap__edge, .js .smap-fig .smap__stateline,
.js .smap-fig .smap__road, .js .smap-fig .smap__cnames, .js .smap-fig .smap__lake,
.js .smap-fig .smap__scale, .js .smap-fig .smap__pin { opacity:0; }
.js .smap-fig .smap__lift, .js .smap-fig .smap__land, .js .smap-fig .smap__edge { translate:0 10px; }
.js .smap-fig .smap__pin { translate:0 7px; }

.js .smap-fig.is-in .smap__ctx, .js .smap-fig.is-in .smap__states {
  opacity:1; transition:opacity .55s var(--ease-entrance) 60ms;
}
.js .smap-fig.is-in .smap__lift, .js .smap-fig.is-in .smap__land, .js .smap-fig.is-in .smap__edge {
  opacity:1; translate:0 0;
  transition:opacity .7s var(--ease-entrance) 180ms, translate .8s var(--ease-entrance) 180ms;
}
.js .smap-fig.is-in .smap__road {
  opacity:1; transition:opacity .8s var(--ease-entrance) 420ms;
}
.js .smap-fig.is-in .smap__stateline { opacity:.85; transition:opacity .5s var(--ease-fast) 560ms; }
.js .smap-fig.is-in .smap__cnames, .js .smap-fig.is-in .smap__lake, .js .smap-fig.is-in .smap__scale {
  opacity:1; transition:opacity .6s var(--ease-entrance) 560ms;
}
.js .smap-fig.is-in .smap__statenames { opacity:1; transition:opacity .6s var(--ease-entrance) 620ms; }
.js .smap-fig.is-in .smap__pin {
  opacity:1; translate:0 0;
  transition:opacity .5s var(--ease-entrance) calc(700ms + var(--i) * 42ms),
             translate .6s var(--ease-entrance) calc(700ms + var(--i) * 42ms);
}
/* Skip the entrance, but only for the layers the entrance hid, sweeping every
   descendant to opacity:1 would also force the hover halos on and lock the tucked
   names open, which is a behavior change, not a motion one. */
html.reveal-all .smap-fig :is(.smap__ctx, .smap__states, .smap__statenames, .smap__lift, .smap__land,
  .smap__edge, .smap__road, .smap__cnames, .smap__lake, .smap__scale, .smap__pin),
html.reduced .smap-fig :is(.smap__ctx, .smap__states, .smap__statenames, .smap__lift, .smap__land,
  .smap__edge, .smap__road, .smap__cnames, .smap__lake, .smap__scale, .smap__pin) {
  opacity:1 !important; translate:0 0 !important;
}
html.reveal-all .smap-fig .smap__stateline, html.reduced .smap-fig .smap__stateline { opacity:.85 !important; }
html.reduced .smap-fig * { transition:none !important; animation:none !important; }

/* ---- the "Where we work" band opens on the cover ------------------------------------
   Phase one is the banner's composition: the twelve-county footprint, the interstates
   inside it and the four anchor towns (Chicago, Joliet, Valparaiso, Rensselaer), with
   nothing else on the map. Phase two eases the camera in and the furniture populates:
   county and state names, the lake, the scale bar, the roads outside the footprint.
   The other towns wait for the visitor to zoom (js/map.js); their --i delays below only
   matter if the script is missing. rmap.mjs numbers the anchors first in --i. */
.js .where .smap-fig .smap__cam {
  transform:scale(.93); transform-box:view-box; transform-origin:50% 50%;
}
.js .where .smap-fig.is-in .smap__cam {
  transform:scale(1);
  transition:transform 1.7s var(--ease-entrance) 1450ms;
}
.js .where .smap-fig.is-in :is(.smap__ctx, .smap__states) { transition-delay:1600ms; }
.js .where .smap-fig.is-in .smap__road--out { transition-delay:1700ms; }
.js .where .smap-fig.is-in .smap__stateline { transition-delay:1760ms; }
.js .where .smap-fig.is-in :is(.smap__cnames, .smap__lake, .smap__scale) { transition-delay:1820ms; }
.js .where .smap-fig.is-in .smap__statenames { transition-delay:1900ms; }
.js .where .smap-fig.is-in .smap__pin { transition-delay:calc(1940ms + (var(--i) - 4) * 55ms); }
.js .where .smap-fig.is-in .smap__pin--anchor { transition-delay:calc(700ms + var(--i) * 120ms); }
html.reveal-all .smap__cam, html.reduced .smap__cam { transform:none !important; }

@media (max-width: 1023px) {
  .where-grid { grid-template-columns:1fr; gap:2rem; justify-items:center; }
  .where-grid .smap-fig { order:-1; }
  .where-copy { align-self:start; width:100%; max-width:640px; }
  .where-copy p { max-width:56ch; }
  .smap-index { max-width:none; }
}
@media (max-width: 520px) { .smap-index { gap:.9rem 1rem; } }
/* ---- explorable (js/map.js): camera, level of detail, controls -----------------------
   The camera is a transform attribute on .smap__view; every .smap__fix takes the inverse
   scale so names and dots stay the size they were set at while the land grows under
   them. A pin waits for the zoom level its name has room at (data-lod-w / -n, solved in
   rmap.mjs), so at rest the map carries its four anchors and the rest populate as you
   zoom. Visibility, not opacity, does the hiding, so it never fights the entrance above.
   Without the script none of this applies and the still version stands. */
.smap-fig { position:relative; }
.smap { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.smap-fig.is-engaged .smap { cursor:grab; -webkit-user-select:none; user-select:none; }
.smap-fig.is-dragging .smap { cursor:grabbing; }
.smap-fig.is-engaged .smap__pin { cursor:pointer; }

.js .smap.is-live .smap__pin:not(.is-vis):not(.is-on) { visibility:hidden; transition:visibility 0s linear .22s; }
.js .smap.is-live .smap__pin:not(.is-vis):not(.is-on) .smap__lod { opacity:0; transition:opacity .2s var(--ease-fast); }
.js .smap.is-live .smap__pin.is-vis .smap__lod { opacity:1; animation:smap-in .5s var(--ease-entrance) backwards; }
.js .smap.is-live .smap__pin.is-vis .smap__dot { animation:smap-pop .55s var(--ease-pop) backwards; }
.js .smap.is-live .smap__lod--wait .smap__town:not(.is-tucked) { opacity:1; }
/* pointing at a town in the index brings its pin up even before its level (the :not(.is-on)
   above exempts it from hiding, so its entrance transitions stay intact) */
.js .smap.is-live .smap__pin.is-on .smap__lod { opacity:1; transition:opacity .2s var(--ease-fast); }
@keyframes smap-in  { from { opacity:0; translate:0 26px; } to { opacity:1; translate:0 0; } }
@keyframes smap-pop { from { transform:scale(.25); } to { transform:scale(1); } }

/* controls: zoom in, zoom out and reset, bottom right; a mono hint, top left */
.smap-ui { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .5s var(--ease-entrance) .4s; }
.smap-fig.is-in .smap-ui, html.reveal-all .smap-fig .smap-ui, html.reduced .smap-fig .smap-ui { opacity:1; }
.smap-zoom { position:absolute; right:.7rem; bottom:.7rem; display:flex; flex-direction:column; gap:4px; pointer-events:auto; }
.smap-btn {
  width:34px; height:34px; display:grid; place-items:center; padding:0; border-radius:10px; cursor:pointer;
  touch-action:manipulation;
  color:var(--teal-700); background:rgba(250,246,237,.88); border:1px solid rgba(120,102,70,.22);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 1px 2px rgba(35,25,15,.06), 0 10px 20px -12px rgba(35,25,15,.3);
  transition:background-color var(--dur-fast) var(--ease-fast), color var(--dur-fast) var(--ease-fast),
             border-color var(--dur-fast) var(--ease-fast), transform var(--dur-micro) var(--ease-micro),
             opacity var(--dur-fast) var(--ease-fast);
}
.smap-btn .lucide { width:16px; height:16px; }
.smap-btn:hover { background:#fff; color:var(--teal-600); }
.smap-btn:active { transform:scale(.94); }
.smap-btn.is-off:active { transform:none; }
.smap-btn.is-off { opacity:.38; cursor:default; }
.smap-btn.is-off:hover { background:rgba(250,246,237,.88); color:var(--teal-700); }
.smap-hint {
  position:absolute; left:.75rem; top:.7rem; margin:0; pointer-events:none;
  font:500 .62rem/1 var(--font-mono); letter-spacing:.11em; text-transform:uppercase; white-space:nowrap;
  color:var(--ink-600); background:rgba(250,246,237,.86); border:1px solid rgba(120,102,70,.18);
  border-radius:var(--radius-pill); padding:.44rem .66rem;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; translate:0 -4px; transition:opacity .35s var(--ease-out), translate .35s var(--ease-out);
}
.smap-hint.is-shown { opacity:1; translate:0 0; }
@media (hover: hover) { .smap-fig:hover .smap-hint.is-idle { opacity:1; translate:0 0; } }
@media (hover: none)  { .smap-hint.is-idle { opacity:1; translate:0 0; } }
.where--night .smap-btn { color:var(--sand-100); background:rgba(255,255,255,.07); border-color:rgba(236,247,245,.24); box-shadow:none; }
.where--night .smap-btn:hover { background:rgba(255,255,255,.13); border-color:var(--brass-400); color:var(--brass-400); }
.where--night .smap-btn.is-off:hover { background:rgba(255,255,255,.07); border-color:rgba(236,247,245,.24); color:var(--sand-100); }
.where--night .smap-hint { color:var(--teal-200); background:rgba(6,35,31,.6); border-color:rgba(236,247,245,.16); }
/* phones: the buttons run along the bottom edge instead of up the side, where they would
   sit on the Indiana label; rmap.mjs reserves the same shape for the narrow label set */
@media (max-width: 560px) { .smap-zoom { flex-direction:row; } }
@media (max-width: 560px) { .smap-btn { width:36px; height:36px; } }

/* ---- 25. Small shared bits ---------------------------------------------------------- */

.field__opt { font-style:normal; font-weight:400; color:rgba(236,247,245,.45); margin-left:.2rem; }

/* two-region footer index of towns */
.footer-area__region { font:500 .72rem/1.4 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-500); margin-right:.2rem; }
.footer-area__break { flex-basis:100%; height:0; }
/* ---- 26. Nocturne band: the Facebook banner's world, brought onto the page ---------
   Deep teal ground, brass-lit map, mono lockup. Used by the "Where we work" section. */
.where--night {
  position:relative; isolation:isolate; overflow:hidden;
  background:radial-gradient(1250px 900px at 28% 38%, #0E4A46 0%, #0B3F3C 56%, #062C2A 100%);
  color:var(--sand-100);
}
.where--night .container { position:relative; z-index:2; }
.where__aurora {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(720px 460px at 8% -14%, rgba(61,141,134,.22), transparent 64%),
             radial-gradient(680px 440px at 96% 114%, rgba(195,150,59,.14), transparent 62%);
}
.where__vig {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 95% at 50% 45%, transparent 52%, rgba(2,16,15,.34) 100%);
}
.where--night .where-copy p { color:var(--teal-200); }
.where--night .smap-index__list a { color:var(--sand-100); }
.where--night .smap-index__list a::before { background:var(--teal-400); }
.where--night .smap-index__list a:hover, .where--night .smap-index__list a:focus-visible,
.where--night .smap-index__list a.is-on { color:var(--brass-400); background:rgba(255,255,255,.06); }
.where--night .smap-index__head { color:rgba(236,247,245,.55); }

/* The banner spends brass on type, not just on the map. Put it back on the
   reading path here at the same low dosage: eyebrow, bullets, arrows. */
.where--night .eyebrow--onbrand {
  font-family:var(--font-mono); font-weight:500; letter-spacing:.085em;
  color:var(--brass-400);
}
.where--night .smap-index__list a::before { background:var(--brass-500); opacity:.55; }
.where--night .btn--onnight .lucide { color:var(--brass-400); }

/* CTA that reads on the dark ground */
.btn--onnight {
  background:rgba(255,255,255,.06); color:var(--sand-100);
  border:1px solid rgba(236,247,245,.28);
  transition:background-color var(--dur-fast) var(--ease-fast), border-color var(--dur-fast) var(--ease-fast), transform var(--dur-micro) var(--ease-micro);
}
.btn--onnight:hover { background:rgba(255,255,255,.11); border-color:var(--brass-400); color:var(--sand-100); }
.btn--onnight:active { transform:scale(.97); }

/* the map, lit the way the banner lights it: dark water, brass coastline, glowing towns */
.smap--night {
  --smap-ground:transparent; --smap-water-a:#06231F; --smap-water-b:#041A18; --smap-echo:#7FC4BC;
  --smap-ctxline:rgba(166,210,205,.10); --smap-stline:rgba(166,210,205,.16);
  --smap-cty-a:#17635C; --smap-cty-b:#125550; --smap-cty-c:#0C4340;
  --smap-seam:rgba(236,247,245,.17); --smap-edge:rgba(232,197,127,.72); --smap-inner:rgba(255,255,255,.10);
  --smap-road-out:rgba(6,35,31,.45); --smap-road-in:rgba(233,199,132,.34);
  --smap-brass:#E8C57F; --smap-hi:#E8C57F;
  --smap-cname:rgba(203,232,226,.38); --smap-statename:rgba(166,210,205,.22);
  --smap-lakename:rgba(166,210,205,.34); --smap-scale:rgba(203,232,226,.42);
  --smap-halo:rgba(232,197,127,.42); --smap-dot:#F8F1DF; --smap-dotring:rgba(6,35,31,.75);
  --smap-townname:#F6F0E2; --smap-townname-sm:#C9E0DB; --smap-townhalo:rgba(4,26,24,.62);
  --smap-lift-color:#02110F; --smap-lift-op:.34;
  /* no plate: on the night band the map floats on the gradient, the way the banner does */
  --smap-radius:0; --smap-plate:none;
}
.smap--night .smap__pin--t1 .smap__ring { stroke:var(--smap-brass); opacity:.8; }
.smap--night .smap__dot { filter:drop-shadow(0 0 5px rgba(232,197,127,.45)); }

/* hero lockup, straight off the banner: two mono lines, the promise in brass */
.hero-lockup { display:flex; flex-direction:column; gap:.28rem; margin-top:.15rem; }
.hero-lockup span {
  font:500 .78rem/1.7 var(--font-mono); letter-spacing:.085em; text-transform:uppercase;
  color:var(--ink-600);
}
/* brass-600 is 3.5:1 on sand, too light for 12px type, so this line gets the
   most saturated cousin of the same hue that still clears AA (4.8:1) */
.hero-lockup .hero-lockup__free { color:#8F651C; }

/* Page headlines carry the brand ink; section heads stay neutral. This is what
   makes the light hero read as the banner's tonal inverse rather than a default. */
.display { color:var(--teal-700); }
@media (max-width: 560px) { .hero-lockup span { font-size:.72rem; letter-spacing:.07em; } }

/* ---- 27. The assessment strip (town pages): the offer in four numbers ----------------- */
.assess { padding-top:clamp(1rem, 3vw, 2rem); }
.assess__grid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem, 5vw, 4.5rem); align-items:center; }
.assess__head { margin-bottom:0; }
.assess__facts { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.assess__fact {
  display:flex; flex-direction:column; gap:.35rem; padding:1.35rem 1.4rem;
  border-radius:var(--radius-lg);
  background:linear-gradient(150deg, rgba(255,255,255,.9), rgba(255,255,255,.62));
  border:1px solid rgba(255,255,255,.85);
  outline:1px solid rgba(231,220,198,.55); outline-offset:-2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), var(--shadow-sm);
}
.assess__num {
  font:500 clamp(2.2rem, 1.6rem + 2vw, 3.1rem)/1 var(--font-sans); letter-spacing:-.04em;
  color:var(--teal-700); font-variant-numeric:tabular-nums;
}
.assess__what { font:500 .9rem/1.4 var(--font-sans); color:var(--ink-600); }
@media (max-width: 860px) { .assess__grid { grid-template-columns:1fr; gap:1.75rem; } }
@media (max-width: 420px) { .assess__facts { gap:.6rem; } .assess__fact { padding:1.1rem 1rem; } }

/* ==========================================================================
   28. The story: the hero is one continuous scene. A 45-person company drawn as
   people; the interviews light them up; one job's route is traced and its leaks
   tagged; the leaks fly onto the opportunity map; the map becomes the plan. Four
   states (.s1 to .s4, cumulative) driven by scroll on desktop, by a timer on phones,
   and shown at their final composite without JS or under reduced motion.
   ========================================================================== */
.story { position:relative; padding:0; overflow:visible; }
.js .story.is-live { height:calc(100vh + 3 * 100vh); }
.story__stage {
  position:relative; min-height:100vh; overflow:hidden; isolation:isolate;
  padding-top:calc(var(--header-h) + 1.5rem); padding-bottom:2.5rem;
  display:flex; align-items:center;
}
.js .story.is-live .story__stage { position:sticky; top:0; height:100vh; min-height:0; }
.story__grid { display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2rem, 5vw, 4.5rem); align-items:center; width:100%; }
.story__copy { display:flex; flex-direction:column; gap:1.5rem; }
.story .hero-copy { gap:1.25rem; }
.lede--frag { max-width:40ch; }
.hero-live {
  display:inline-flex; align-items:center; gap:.5rem; margin-left:.7rem; vertical-align:middle;
  color:var(--ink-500); font:500 .62rem/1 var(--font-mono); letter-spacing:.1em; white-space:nowrap;
}
.hero-live i, .story__visual-bar i {
  width:.5rem; height:.5rem; border-radius:50%; background:var(--brass-500); box-shadow:0 0 0 4px rgba(195,150,59,.14);
}

/* the four beats of the story, one visible at a time on desktop */
.beats { position:relative; min-height:11.5rem; }
.story-control-head {
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.65rem;
  font:500 .64rem/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-500);
}
.story-control-status { color:#8F651C; text-align:right; }
.ticks {
  list-style:none; margin:0 0 1rem; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.45rem;
}
.ticks li { min-width:0; }
.ticks button {
  appearance:none; width:100%; min-width:0; padding:.58rem .45rem .54rem; border:1px solid rgba(211,195,164,.8);
  border-radius:10px; background:rgba(255,255,255,.36); color:var(--ink-500); cursor:pointer; text-align:left;
  font:500 .62rem/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
  transition:background-color var(--dur-fast) var(--ease-fast), border-color var(--dur-fast) var(--ease-fast), color var(--dur-fast) var(--ease-fast), transform var(--dur-micro) var(--ease-micro), box-shadow var(--dur-fast) var(--ease-fast);
}
.ticks button span { display:block; margin-bottom:.32rem; color:var(--brass-600); font-size:.6rem; }
.ticks button b { display:block; overflow:hidden; text-overflow:ellipsis; font:500 .7rem/1 var(--font-sans); letter-spacing:-.01em; text-transform:none; }
.ticks li.is-on button, .ticks button[aria-pressed="true"] {
  border-color:var(--teal-600); background:var(--teal-700); color:var(--sand-100);
  box-shadow:0 8px 18px -13px rgba(11,63,60,.65);
}
.ticks li.is-on button span, .ticks button[aria-pressed="true"] span { color:var(--brass-300, var(--brass-200)); }
.ticks button:hover { border-color:var(--teal-500); color:var(--teal-700); transform:translateY(-1px); }
.ticks li.is-on button:hover, .ticks button[aria-pressed="true"]:hover { color:var(--sand-100); }
.ticks button:focus-visible { outline:3px solid rgba(21,106,100,.3); outline-offset:2px; }
.beat {
  position:absolute; left:0; right:0; top:2.4rem;
  opacity:0; transform:translateY(14px); filter:blur(6px); pointer-events:none;
  transition:opacity .5s var(--ease-entrance), transform .55s var(--ease-entrance), filter .55s var(--ease-entrance);
}
.story[data-state="1"] .beat[data-n="1"], .story[data-state="2"] .beat[data-n="2"],
.story[data-state="3"] .beat[data-n="3"], .story[data-state="4"] .beat[data-n="4"] {
  opacity:1; transform:none; filter:none; pointer-events:auto; transition-delay:.12s;
}
.beat__t {
  font:500 clamp(1.45rem, 1.15rem + 1.2vw, 2.05rem)/1.15 var(--font-sans); letter-spacing:-.03em;
  color:var(--teal-700); max-width:16ch;
}
.beat__p { margin-top:.5rem; font-size:1rem; line-height:1.55; color:var(--ink-600); max-width:40ch; }

/* the scene */
.story__visual {
  position:relative; overflow:hidden; isolation:isolate; padding:2.9rem 1.15rem 4.15rem;
  border:1px solid rgba(217,179,106,.35); border-radius:var(--radius-xl);
  background:
    radial-gradient(70% 76% at 86% 8%, rgba(21,106,100,.84), rgba(21,106,100,0) 70%),
    radial-gradient(48% 48% at 5% 96%, rgba(195,150,59,.22), rgba(195,150,59,0) 68%),
    linear-gradient(145deg, #071f1d, #0b3f3c 54%, #082523);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 28px 70px -40px rgba(11,63,60,.7), 0 35px 80px -55px rgba(35,25,15,.72);
}
.story__visual::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.4;
  background-image:linear-gradient(rgba(236,247,245,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(236,247,245,.08) 1px, transparent 1px);
  background-size:34px 34px; mask-image:linear-gradient(180deg, rgba(0,0,0,.65), transparent 85%);
}
.story__visual::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,19,18,.18), transparent 35%, rgba(5,19,18,.16));
}
.story__visual-bar {
  position:absolute; z-index:3; top:1rem; left:1.2rem; right:1.2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  color:rgba(246,237,214,.68); font:500 .62rem/1 var(--font-mono); letter-spacing:.13em; text-transform:uppercase;
}
.story__visual-bar span { display:inline-flex; align-items:center; gap:.55rem; }
.story__visual-bar span:last-child { color:var(--brass-200); text-align:right; }
.story__visual-bar i { width:.38rem; height:.38rem; box-shadow:0 0 0 4px rgba(217,179,106,.1); }
.story__scene { position:relative; z-index:1; transform-origin:50% 50%; transition:transform 1s var(--ease-entrance), opacity .8s var(--ease-out); }
.scene { width:100%; height:auto; display:block; overflow:visible; }
.story__visual .p__dot { fill:var(--teal-200); opacity:.45; transition:fill .45s var(--ease-out), opacity .45s var(--ease-out), transform 1.1s var(--ease-entrance); }
.story__visual .p--lead .p__dot { opacity:.8; }
.story__visual .p__ring { fill:none; stroke:var(--brass-400); stroke-width:1.5; opacity:0; transform-box:fill-box; transform-origin:center; }
.story__visual .p--cust .p__dot { fill:var(--sand-100); stroke:rgba(246,237,214,.55); stroke-width:1.5; opacity:.95; }
.story__visual .who { font:500 10px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; fill:rgba(236,247,245,.58); transition:opacity .4s var(--ease-out); }
/* s1: every person gets interviewed, one after another, and lights brass */
.story.s1 .p__dot { fill:var(--brass-500); opacity:1; transition-delay:calc(var(--i) * 42ms); }
.story.s1 .p--cust .p__dot { fill:var(--sand-100); transition-delay:0s; }
.story.s1 .p__ring { animation:ping 1.1s var(--ease-out) both; animation-delay:calc(var(--i) * 42ms); }
@keyframes ping { 0% { opacity:.9; transform:scale(.6); } 100% { opacity:0; transform:scale(2.6); } }
/* s2: the job's route; everyone off it falls back */
.route {
  fill:none; stroke:var(--teal-600); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; opacity:0;
  transition:stroke-dashoffset 1.6s var(--ease-entrance) .15s, opacity .3s var(--ease-out);
}
.story.s2 .route { stroke-dashoffset:0; opacity:.95; }
.story.s2 .story__visual .p:not(.p--route) .p__dot { opacity:.16; fill:var(--teal-200); transition-delay:0s; }
.story.s2 .story__visual .p--route .p__dot { fill:var(--sand-100); opacity:1; transition-delay:0s; }
.story.s2 .p--cust .p__dot { fill:var(--sand-100); }
.story.s2 .p__ring { animation:none; }
.tag { opacity:0; transition:opacity .4s var(--ease-out) calc(.55s + var(--k) * .24s); }
.story__visual .tag rect { fill:rgba(5,25,24,.9); stroke:rgba(217,179,106,.7); stroke-width:1; }
.story__visual .tag text { font:500 10.5px/1 var(--font-mono); fill:var(--brass-200); letter-spacing:.06em; text-transform:uppercase; }
.story.s2 .tag { opacity:1; }
/* s3: the leaks fly to the map */
.grid { opacity:0; transition:opacity .8s var(--ease-out) .15s; }
.story__visual .grid__frame { fill:rgba(236,247,245,.08); stroke:rgba(236,247,245,.35); stroke-width:1; }
.story__visual .grid__mid { stroke:rgba(236,247,245,.3); stroke-width:1; stroke-dasharray:3 4; }
.story__visual .grid__q, .story__visual .grid__ax { font:500 10px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; fill:rgba(236,247,245,.52); }
.story__visual .grid__q--a { fill:var(--brass-200); }
.grid__path {
  fill:none; stroke:var(--brass-500); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.85;
  stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1s var(--ease-entrance) 1.35s;
}
.story__visual .mlabel {
  font:500 11.5px/1 var(--font-sans); fill:var(--sand-100); opacity:0;
  paint-order:stroke; stroke:#082523; stroke-width:4px; stroke-linejoin:round;
  transition:opacity .5s var(--ease-out) calc(1s + var(--k) * 90ms);
}
.story__visual .mlabel--x { fill:rgba(236,247,245,.58); }
.story__visual .p--x .p__dot { fill:none; stroke:rgba(236,247,245,.58); stroke-width:1.5; stroke-dasharray:3 3; opacity:0; transition:opacity .5s var(--ease-out) 1.15s; }
.story.s3 .grid { opacity:1; }
.story.s3 .grid__path { stroke-dashoffset:0; }
.story.s3 .route, .story.s3 .tag, .story.s3 .who { opacity:0; transition:opacity .35s var(--ease-out); }
.story.s3 .p:not(.p--f):not(.p--x) .p__dot { opacity:0; transition:opacity .5s var(--ease-out); }
.story.s3 .p.p--f .p__dot {
  transform:translate(var(--dx), var(--dy)); fill:var(--teal-600); stroke:none; opacity:1;
  transition:transform 1.1s var(--ease-entrance) calc(.15s + var(--k) * 90ms), fill .4s var(--ease-out), opacity .4s var(--ease-out);
}
.story.s3 .p--x .p__dot, .story.s3 .mlabel { opacity:1; }
/* s4: the map becomes the plan */
.story__cover {
  position:absolute; right:1rem; bottom:4rem; width:min(340px, 72%); z-index:2;
  opacity:0; transform:translateY(38px) rotate(1.5deg);
  transition:opacity .7s var(--ease-entrance), transform .9s var(--ease-entrance);
}
.story.s4 .story__cover { opacity:1; transform:none; transition-delay:.2s; }
.story.s4 .story__scene { transform:scale(.86) translate(-7%, -8%); opacity:.5; }
.story.s4 .story__cover .seal { animation:stamp .62s var(--ease-pop) forwards; animation-delay:1s; }
.story.s4 .story__cover .seal .seal__check { animation:draw-check .45s var(--ease-out) 1.2s forwards; }
.story.s4 .story__cover .seal .seal__ring { animation:seal-ring .7s var(--ease-out) 1s forwards; }
.story__cap {
  position:absolute; z-index:3; left:1.2rem; bottom:.55rem; margin:0;
  font:500 .58rem/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:rgba(246,237,214,.42);
}
.story__visual-readout {
  position:absolute; z-index:3; left:1.2rem; right:1.2rem; bottom:1.25rem; min-height:2.4rem;
  display:flex; align-items:end; justify-content:space-between; gap:1rem; padding:0 0 .15rem 7.8rem;
  border-bottom:1px solid rgba(217,179,106,.25); color:rgba(236,247,245,.66);
}
.story__visual-readout p:first-child { display:flex; flex-direction:column; gap:.18rem; }
.story__visual-readout span { font:500 .58rem/1 var(--font-mono); letter-spacing:.11em; text-transform:uppercase; color:var(--brass-200); }
.story__visual-readout strong { font:500 .88rem/1.2 var(--font-sans); color:var(--sand-100); letter-spacing:-.01em; }
.story__visual-readout p:last-child { max-width:28ch; margin:0; font-size:.72rem; line-height:1.35; text-align:right; }
/* without the script, or under reduced motion: the finished composite, every beat readable */
.story:not(.is-live) .beat, html.reduced .story .beat { position:static; opacity:1; transform:none; filter:none; pointer-events:auto; margin-top:1rem; }
.story:not(.is-live) .ticks, html.reduced .story .ticks { display:none; }
.story:not(.is-live) .grid, .story:not(.is-live) .mlabel, .story:not(.is-live) .p--x .p__dot,
html.reduced .story .grid, html.reduced .story .mlabel, html.reduced .story .p--x .p__dot { opacity:1; transition:none; }
.story:not(.is-live) .grid__path, html.reduced .story .grid__path { stroke-dashoffset:0; transition:none; }
.story:not(.is-live) .p:not(.p--f):not(.p--x) .p__dot, html.reduced .story .p:not(.p--f):not(.p--x) .p__dot { opacity:0; }
.story:not(.is-live) .p.p--f .p__dot, html.reduced .story .p.p--f .p__dot { transform:translate(var(--dx), var(--dy)); fill:var(--teal-600); stroke:none; opacity:1; transition:none; }
.story:not(.is-live) .who, .story:not(.is-live) .tag, .story:not(.is-live) .route,
html.reduced .story .who, html.reduced .story .tag, html.reduced .story .route { opacity:0; }
.story:not(.is-live) .story__cover, html.reduced .story .story__cover { opacity:1; transform:none; transition:none; }
.story:not(.is-live) .story__scene, html.reduced .story .story__scene { transform:scale(.86) translate(-7%, -8%); opacity:.5; }
.story:not(.is-live) .seal, html.reduced .story .seal { opacity:1; transform:rotate(-8deg) scale(1); animation:none; }
.story:not(.is-live) .seal__check, html.reduced .story .seal__check { stroke-dashoffset:0; }
html.reduced .story.is-live { height:auto; }
html.reduced .story.is-live .story__stage { position:relative; height:auto; min-height:100vh; }
html.reduced .story .p__ring { animation:none !important; }

/* the paper: near-white sheets, hairlines, mono running heads */
.sheet {
  position:relative; z-index:1;
  background:linear-gradient(180deg, #FFFDF8 0%, #FCF8EF 100%);
  border:1px solid rgba(255,255,255,.95);
  outline:1px solid rgba(211,195,164,.6); outline-offset:-2px;
  border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(35,25,15,.06),
             0 16px 34px -18px rgba(35,25,15,.28), 0 44px 70px -44px rgba(11,63,60,.3);
  color:var(--ink-800);
}
.sheet--cover { padding:1.35rem 1.4rem 1.2rem; display:flex; flex-direction:column; gap:.8rem; }
.sheet__kicker {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-right:4.4rem;
  font:500 .62rem/1.3 var(--font-mono); letter-spacing:.11em; text-transform:uppercase; color:#8F651C;
}
.sheet__tag { color:var(--ink-500); letter-spacing:.09em; border:1px solid rgba(211,195,164,.7); border-radius:var(--radius-pill); padding:.26rem .5rem; }
.sheet__title { font:500 1.2rem/1.2 var(--font-sans); letter-spacing:-.025em; color:var(--teal-700); max-width:16ch; }
.sheet__sub { margin-top:-.4rem; font-size:.84rem; line-height:1.45; color:var(--ink-600); }
.sheet__meta {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:.5rem; margin:0; padding:.7rem 0;
  border-top:1px solid rgba(211,195,164,.55); border-bottom:1px solid rgba(211,195,164,.55);
}
.sheet__meta div { display:flex; flex-direction:column; gap:.22rem; }
.sheet__meta dt { font:500 .58rem/1.2 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500); }
.sheet__meta dd { margin:0; font:500 1.2rem/1 var(--font-sans); letter-spacing:-.03em; color:var(--ink-900); font-variant-numeric:tabular-nums; }
.sheet__foot {
  display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start;
  padding:.55rem .8rem; border-radius:var(--radius-md);
  background:var(--teal-50); color:var(--teal-700); font:500 .78rem/1.3 var(--font-sans);
}
.sheet__foot .lucide { width:1rem; height:1rem; color:var(--teal-500); }
.sheet--cover .seal, .tilt-scene [data-tilt] > .seal { position:absolute; right:1rem; top:.75rem; bottom:auto; width:60px; }
.sheet__total {
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.4rem .7rem;
  padding-top:.9rem; border-top:1px solid rgba(211,195,164,.6);
  font-size:1rem; color:var(--ink-700);
}
.sheet__big {
  display:inline-flex; align-items:baseline;
  font:500 clamp(2rem, 1.6rem + 1.6vw, 3rem)/1 var(--font-sans); letter-spacing:-.04em;
  color:var(--teal-700); font-variant-numeric:tabular-nums;
}
.sheet__note { font:400 .85rem/1.5 var(--font-sans); color:var(--ink-500); }

/* ---- 29. The mission, scrubbed in ----------------------------------------------------- */
.statement--mission { padding-block:clamp(4rem, 10vw, 8rem) clamp(2rem, 5vw, 4rem); }
.mission-grid { display:grid; grid-template-columns:minmax(0, 1.14fr) minmax(17rem, .72fr); gap:clamp(2rem, 7vw, 7rem); align-items:end; }
.statement--mission .statement__text {
  font-size:clamp(1.85rem, 1.1rem + 3.4vw, 3.8rem); max-width:30ch; letter-spacing:-.032em; line-height:1.14;
}
.statement--mission .statement__text .w.lit.key { color:var(--teal-600); }
.mission-evidence {
  position:relative; overflow:hidden; padding:1.35rem 1.4rem 1.2rem; border:1px solid rgba(217,179,106,.35); border-radius:var(--radius-lg);
  background:
    radial-gradient(110% 100% at 100% 0%, rgba(21,106,100,.72), transparent 62%),
    linear-gradient(145deg, #082523, #0b3f3c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 22px 46px -34px rgba(11,63,60,.75);
}
.mission-evidence::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.32;
  background-image:linear-gradient(90deg, rgba(236,247,245,.09) 1px, transparent 1px), linear-gradient(rgba(236,247,245,.09) 1px, transparent 1px);
  background-size:26px 26px; mask-image:linear-gradient(135deg, #000, transparent 72%);
}
.mission-evidence__eyebrow { position:relative; z-index:1; margin-bottom:1rem; font:500 .62rem/1 var(--font-mono); letter-spacing:.13em; text-transform:uppercase; color:var(--brass-200); }
.mission-evidence__list { position:relative; z-index:1; list-style:none; margin:0; padding:0; border-top:1px solid rgba(236,247,245,.16); }
.mission-evidence__list li { display:grid; grid-template-columns:2rem 1fr; gap:.7rem; padding:.72rem 0; border-bottom:1px solid rgba(236,247,245,.14); }
.mission-evidence__list li > span { padding-top:.18rem; font:500 .63rem/1 var(--font-mono); letter-spacing:.08em; color:var(--brass-400); }
.mission-evidence__list p { display:flex; align-items:baseline; flex-wrap:wrap; gap:.15rem .42rem; margin:0; line-height:1.3; }
.mission-evidence__list strong { font:500 .92rem/1.25 var(--font-sans); color:var(--sand-100); }
.mission-evidence__list small { font:.76rem/1.35 var(--font-sans); color:rgba(236,247,245,.65); }

/* ---- 30. Who it's for: the number, then the ledger ------------------------------------ */
.fit-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem, 6vw, 5rem); align-items:start; }
.fit-figure { position:sticky; top:calc(var(--header-h) + 3rem); display:flex; flex-direction:column; gap:.4rem; }
.fit-num {
  display:inline-flex; align-items:baseline;
  font:500 clamp(7rem, 4rem + 14vw, 15rem)/.9 var(--font-sans); letter-spacing:-.07em; color:var(--teal-700);
  font-variant-numeric:tabular-nums;
}
.fit-num__plus { color:var(--brass-500); font-size:.55em; letter-spacing:0; margin-left:.04em; }
.fit-num__cap { font:500 .7rem/1.5 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500); max-width:22ch; }
.fit-copy { display:flex; flex-direction:column; gap:1.4rem; }
.fit-copy .section-head { margin-bottom:.2rem; }
.fit-lead { font-size:var(--fs-lede); line-height:1.6; color:var(--ink-700); max-width:52ch; }
.fit-list { list-style:none; margin:0; padding:0; counter-reset:fit; border-top:1px solid var(--sand-300); }
.fit-list li {
  counter-increment:fit; display:flex; align-items:baseline; gap:1.1rem;
  padding:.95rem 0; border-bottom:1px solid var(--sand-300);
  font:500 clamp(1.15rem, 1rem + .7vw, 1.5rem)/1.25 var(--font-sans); letter-spacing:-.02em; color:var(--ink-900);
  transition:padding-left var(--dur-micro) var(--ease-micro);
}
.fit-list li::before {
  content:counter(fit, decimal-leading-zero);
  font:500 .72rem/1 var(--font-mono); color:#8F651C; letter-spacing:.06em; flex:none; width:2rem;
}
@media (hover: hover) { .fit-list li:hover { padding-left:.5rem; } }
.fit-under { font-size:.95rem; color:var(--ink-600); max-width:52ch; }

/* ---- 31. The deck: the plan, page by page ---------------------------------------------
   Desktop: a sticky viewer; scrolling turns the pages, the list on the left follows and
   jumps. Phones: a horizontal snap track. No script or reduced motion: the pages stack. */
.deck { position:relative; }
.js .deck.is-live { height:calc(100vh + 4 * 70vh); padding:0; }
.js .deck.is-live .deck__stage { position:sticky; top:0; height:100vh; display:flex; align-items:center; }
.deck__grid { display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(2rem, 5vw, 4.5rem); align-items:center; width:100%; }
.js .deck.is-live .deck__grid { padding-top:calc(var(--header-h) + .5rem); }
.deck__side { display:flex; flex-direction:column; gap:1.4rem; }
.deck__side .section-head { margin-bottom:0; }
.deck__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; border-left:1px solid var(--sand-300); }
.deck__list a {
  position:relative; display:flex; align-items:baseline; gap:.75rem;
  padding:.55rem 0 .55rem 1.1rem; margin-left:-1px; border-left:2px solid transparent;
  font:500 .95rem/1.3 var(--font-sans); color:var(--ink-500); text-decoration:none;
  transition:color var(--dur-fast) var(--ease-fast), border-color var(--dur-fast) var(--ease-fast), padding-left var(--dur-micro) var(--ease-micro);
}
.deck__list a:hover { color:var(--ink-900); }
.deck__list a.is-active { color:var(--teal-700); border-left-color:var(--brass-500); padding-left:1.35rem; }
.deck__n { font:500 .7rem/1 var(--font-mono); letter-spacing:.06em; color:var(--ink-400); width:1.6rem; flex:none; }
.deck__list a.is-active .deck__n { color:#8F651C; }
.deck__nav { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.deck__btn {
  width:40px; height:40px; border-radius:50%; padding:0; cursor:pointer; display:grid; place-items:center;
  border:1px solid var(--sand-400); background:rgba(255,255,255,.7); color:var(--teal-700);
  transition:background-color var(--dur-fast) var(--ease-fast), border-color var(--dur-fast) var(--ease-fast), transform var(--dur-micro) var(--ease-micro);
}
.deck__btn .lucide { width:1rem; height:1rem; }
.deck__btn--prev .lucide { transform:rotate(180deg); }
.deck__btn:hover { background:#fff; border-color:var(--teal-200); }
.deck__btn:active { transform:scale(.94); }
.deck__counter { font:500 .76rem/1 var(--font-mono); letter-spacing:.12em; color:var(--ink-500); font-variant-numeric:tabular-nums; }
.deck__cur { color:var(--teal-700); }
.deck__hint { font:500 .64rem/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-400); margin-left:.3rem; }
.deck__viewer { position:relative; perspective:1600px; min-width:0; }
.js .deck.is-live .deck__viewer { height:min(calc(100vh - var(--header-h) - 2rem), 860px); }
/* inside the viewer the pages are set a little tighter, so each fits an 800px window */
.js .deck.is-live .page { gap:.65rem; padding:1.4rem 1.8rem 1.5rem; }
.js .deck.is-live .page__title { font-size:clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.js .deck.is-live .page__lede { font-size:.92rem; line-height:1.45; }
.js .deck.is-live .week { gap:.45rem; }
.js .deck.is-live .week__row { row-gap:0; }
.js .deck.is-live .week__what { font-size:.74rem; }
.js .deck.is-live .sheet__total { padding-top:.6rem; }
.js .deck.is-live .sheet__big { font-size:clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem); }
.js .deck.is-live .sheet__note { font-size:.8rem; }
.js .deck.is-live .math th, .js .deck.is-live .math td { padding:.36rem 0; font-size:.88rem; }
.js .deck.is-live .build li { padding:.6rem 0 .6rem 2rem; font-size:.9rem; }
.js .deck.is-live .sheet__warn { padding:.7rem .9rem; font-size:.85rem; }
.js .deck.is-live .road li li { font-size:.86rem; }
.js .deck.is-live .page__wm { font-size:7rem; bottom:-1rem; }
.page { padding:clamp(1.5rem, 2.8vw, 2.4rem); display:flex; flex-direction:column; gap:1rem; overflow:hidden; }
.deck:not(.is-live) .page + .page, html.reduced .deck .page + .page { margin-top:1.25rem; }
.js .deck.is-live .page {
  position:absolute; inset:0; opacity:0; pointer-events:none; overflow:auto;
  transform:translateY(46px) rotateX(-5deg); transform-origin:50% 100%;
  transition:opacity .55s var(--ease-entrance), transform .8s var(--ease-entrance);
}
.js .deck.is-live .page.is-current { opacity:1; transform:none; pointer-events:auto; z-index:2; }
.js .deck.is-live .page.is-past { opacity:0; transform:translateY(-36px) rotateX(5deg) scale(.97); }
.page__head { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding-bottom:.8rem; border-bottom:1px solid rgba(211,195,164,.6); }
.page__kicker { font:500 .64rem/1.3 var(--font-mono); letter-spacing:.11em; text-transform:uppercase; color:#8F651C; }
.page__pg { font:500 .66rem/1 var(--font-mono); letter-spacing:.1em; color:var(--ink-400); white-space:nowrap; }
.page__title { font:500 clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem)/1.1 var(--font-sans); letter-spacing:-.03em; color:var(--teal-700); }
.page__lede { font-size:1rem; line-height:1.55; color:var(--ink-600); max-width:56ch; }
.page__close { margin-top:.4rem; font-size:1.05rem; color:var(--ink-900); }
.page__wm {
  position:absolute; right:.6rem; bottom:-1.6rem; z-index:0; pointer-events:none; user-select:none;
  font:500 9rem/1 var(--font-sans); letter-spacing:-.07em; color:rgba(211,195,164,.2);
}
.page > * { position:relative; z-index:1; }
.page > .page__wm { z-index:0; }

/* page 01: the week, desk by desk */
.week { display:flex; flex-direction:column; gap:.75rem; }
.week__row {
  display:grid; grid-template-columns:7.2rem 1fr 2.6rem; grid-template-rows:auto auto;
  column-gap:.85rem; row-gap:.12rem; align-items:center;
}
.week__who { font:500 .86rem/1.2 var(--font-sans); color:var(--ink-900); }
.week__bar { display:block; height:10px; border-radius:var(--radius-pill); background:rgba(231,220,198,.7); overflow:hidden; }
.week__bar i {
  display:block; height:100%; border-radius:inherit;
  background:linear-gradient(90deg, var(--teal-600), var(--teal-400));
  transform:scaleX(0); transform-origin:left center;
  transition:transform 1s var(--ease-entrance) calc(var(--i) * 110ms + 220ms);
}
.is-in .week__bar i, .is-current .week__bar i { transform:scaleX(var(--w)); }
.week__h { font:500 .8rem/1 var(--font-mono); color:var(--ink-700); text-align:right; font-variant-numeric:tabular-nums; }
.week__what { grid-column:2 / 4; font:400 .78rem/1.3 var(--font-sans); color:var(--ink-500); }

/* page 02: the opportunity map, drawn the way the service-area map is drawn */
.omap {
  position:relative; aspect-ratio:1.28; width:100%; margin:1.5rem 0 1.7rem;
  border:1px solid rgba(211,195,164,.7); border-radius:10px;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(211,195,164,.8) calc(50% - .5px), rgba(211,195,164,.8) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(180deg, transparent calc(50% - .5px), rgba(211,195,164,.8) calc(50% - .5px), rgba(211,195,164,.8) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(180deg, rgba(236,247,245,.6), rgba(250,246,237,.15));
}
.js .deck.is-live .omap { aspect-ratio:auto; height:min(38vh, 380px); flex:none; }
.js .deck.is-live .page > * { flex:none; }
.omap__axis { position:absolute; font:500 .62rem/1 var(--font-mono); letter-spacing:.11em; text-transform:uppercase; color:var(--ink-500); }
.omap__axis--y { left:0; top:-1.3rem; }
.omap__axis--x { right:0; bottom:-1.3rem; }
.omap__q { position:absolute; font:500 .64rem/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-400); }
.omap__q--a { left:.75rem; top:.7rem; color:#8F651C; }
.omap__q--b { right:.75rem; top:.7rem; }
.omap__q--c { left:.75rem; bottom:.7rem; }
.omap__q--d { right:.75rem; bottom:.7rem; }
.omap__path { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.omap__path path {
  fill:none; stroke:var(--brass-500); stroke-width:2; vector-effect:non-scaling-stroke;
  stroke-linecap:round; stroke-linejoin:round; opacity:.8;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.1s var(--ease-entrance) 1.2s;
}
.is-in .omap__path path, .is-current .omap__path path { stroke-dashoffset:0; }
.omap__dots { list-style:none; margin:0; padding:0; }
.omap__dot {
  position:absolute; left:var(--x); top:var(--y);
  display:flex; align-items:center; gap:.45rem;
  transform:translate(-7px, -50%);
  opacity:0; transition:opacity .5s var(--ease-out) calc(var(--i) * 140ms + 300ms);
}
.omap__dot--l { flex-direction:row-reverse; transform:translate(calc(-100% + 7px), -50%); }
.omap__dot i {
  width:14px; height:14px; border-radius:50%; flex:none;
  background:var(--teal-600); box-shadow:0 0 0 3px #FFFDF8, 0 0 0 4px rgba(11,63,60,.28);
  transform:scale(.2); transition:transform .55s var(--ease-pop) calc(var(--i) * 140ms + 300ms);
}
.omap__dot span {
  font:500 .74rem/1.2 var(--font-sans); color:var(--ink-800); white-space:nowrap;
  background:rgba(255,253,248,.88); padding:.2rem .42rem; border-radius:6px;
}
.omap__dot--no i { background:transparent; border:2px dashed var(--ink-400); box-shadow:none; }
.omap__dot--no span { color:var(--ink-500); }
.is-in .omap__dot, .is-current .omap__dot { opacity:1; }
.is-in .omap__dot i, .is-current .omap__dot i { transform:scale(1); }
.omap__legend { display:none; list-style:none; margin:-.6rem 0 0; padding:0; }
.omap__legend li { display:flex; align-items:baseline; gap:.5rem; font:400 .78rem/1.35 var(--font-sans); color:var(--ink-700); }
.omap__legend b { font:600 .62rem/1 var(--font-mono); color:#8F651C; width:1rem; flex:none; }

/* page 03: the roadmap */
.road { list-style:none; margin:.2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; }
.road__phase { display:flex; flex-direction:column; gap:.6rem; }
.road__when { font:500 .7rem/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:#8F651C; }
.road__bar { display:block; height:6px; border-radius:var(--radius-pill); background:rgba(231,220,198,.7); overflow:hidden; }
.road__bar i {
  display:block; height:100%; background:linear-gradient(90deg, var(--brass-400), var(--brass-500));
  transform:scaleX(0); transform-origin:left;
  transition:transform .9s var(--ease-entrance) calc(var(--i) * 420ms + 200ms);
}
.road__phase:nth-child(2) .road__bar i { opacity:.7; }
.road__phase:nth-child(3) .road__bar i { opacity:.45; }
.is-in .road__bar i, .is-current .road__bar i { transform:scaleX(1); }
.road ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.road li li {
  position:relative; padding-left:1rem; font-size:.9rem; line-height:1.4; color:var(--ink-800);
  opacity:0; translate:0 6px;
  transition:opacity .5s var(--ease-out) calc(var(--i) * 420ms + 500ms), translate .5s var(--ease-out) calc(var(--i) * 420ms + 500ms);
}
.road li li::before { content:""; position:absolute; left:0; top:.55em; width:5px; height:5px; border-radius:50%; background:var(--teal-500); }
.is-in .road li li, .is-current .road li li { opacity:1; translate:0 0; }

/* page 04: the math */
.math { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:.92rem; }
.math th, .math td { text-align:left; padding:.55rem 0; border-bottom:1px solid rgba(211,195,164,.55); }
.math thead th { font:500 .64rem/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500); padding-bottom:.6rem; }
.math td, .math thead th:not(:first-child) { text-align:right; }
.math tbody th { font-weight:500; color:var(--ink-900); }
.math td { color:var(--ink-700); }
.math tfoot th, .math tfoot td { border-bottom:0; border-top:1.5px solid rgba(120,102,70,.5); color:var(--teal-700); font-weight:600; padding-top:.7rem; }

/* page 05: what to build */
.build { list-style:none; margin:0; padding:0; counter-reset:build; display:flex; flex-direction:column; }
.build li {
  counter-increment:build; position:relative; padding:.85rem 0 .85rem 2.2rem;
  border-top:1px solid rgba(211,195,164,.55); font-size:.95rem; line-height:1.5; color:var(--ink-700);
}
.build li::before {
  content:counter(build, decimal-leading-zero); position:absolute; left:0; top:1rem;
  font:500 .72rem/1 var(--font-mono); color:#8F651C; letter-spacing:.06em;
}
.build li b { font-weight:600; color:var(--ink-900); }
.sheet__warn {
  padding:.9rem 1rem; border-left:3px solid var(--brass-500); background:rgba(246,237,214,.7);
  border-radius:0 10px 10px 0; font-size:.9rem; line-height:1.5; color:var(--ink-800);
}
.sheet__warn b { font-weight:600; color:var(--ink-900); }

/* ---- 32. Two weeks: the timeline rail draws, the milestones light in order ----------- */
.how-lede { max-width:34ch; text-align:right; }
.tl {
  list-style:none; margin:0; padding:2.4rem 0 0; position:relative;
  display:grid; grid-template-columns:repeat(5, 1fr); gap:clamp(1rem, 2.5vw, 2rem);
}
.tl::before {
  content:""; position:absolute; left:0; right:0; top:.5rem; height:2px; border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--brass-400), var(--brass-500) 45%, var(--teal-400));
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.6s var(--ease-entrance) .15s;
}
.tl.is-in::before { transform:scaleX(1); }
.tl__step { position:relative; display:flex; flex-direction:column; gap:.45rem; }
.js .tl__step {
  opacity:0; translate:0 8px;
  transition:opacity .6s var(--ease-entrance) calc(.25s + var(--i) * .28s), translate .6s var(--ease-entrance) calc(.25s + var(--i) * .28s);
}
.tl.is-in .tl__step { opacity:1; translate:0 0; }
.tl__step::before {
  content:""; position:absolute; left:0; top:calc(-2.4rem + .5rem - 6px); width:14px; height:14px; border-radius:50%;
  background:var(--sand-100); border:2px solid var(--sand-400);
  transition:background-color .35s var(--ease-out) calc(.3s + var(--i) * .28s),
             border-color .35s var(--ease-out) calc(.3s + var(--i) * .28s),
             transform .45s var(--ease-pop) calc(.3s + var(--i) * .28s);
}
.tl.is-in .tl__step::before { background:var(--teal-600); border-color:var(--teal-600); transform:scale(1.12); }
.tl__day { font:500 .7rem/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:#8F651C; }
.tl__step .h3 { font-size:1.1rem; }
.tl__step p { font-size:.93rem; line-height:1.5; color:var(--ink-700); }

/* ---- 33. What we don't do: three refusals, each ending on the brand's period --------- */
.nots__list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(1.25rem, 3vw, 2.5rem); }
.nots__list li { display:flex; flex-direction:column; gap:.45rem; padding-top:1.1rem; border-top:1px solid var(--sand-400); }
.nots__no { font:500 clamp(2.6rem, 2rem + 2.6vw, 4.4rem)/1 var(--font-sans); letter-spacing:-.05em; color:var(--teal-700); }
.nots__no::after { content:"."; color:var(--brass-500); display:inline-block; }
.js .nots__list li.is-in .nots__no::after { animation:dotdrop .7s var(--ease-pop) both .35s; }
@keyframes dotdrop { from { transform:translateY(-.55em); opacity:0; } to { transform:none; opacity:1; } }
.nots__list p { font-size:1.02rem; line-height:1.5; color:var(--ink-700); max-width:30ch; }
.nots__list b { font-weight:600; color:var(--ink-900); }

/* ---- 34. Notes teaser, eyebrow marks, final states ---------------------------------- */
.notes-teaser .town-grid { margin-top:0; }
/* a brass square announces each section head */
.section-head .eyebrow::before, .hero .eyebrow::before, .page-head .eyebrow::before {
  content:""; display:inline-block; width:.5em; height:.5em; margin-right:.65em; vertical-align:.08em;
  background:var(--brass-500); transform:scale(0); transition:transform .5s var(--ease-pop) .25s;
}
.is-in .eyebrow::before, .is-in.eyebrow::before, html:not(.js) .eyebrow::before, html.reduced .eyebrow::before, html.reveal-all .eyebrow::before { transform:scale(1); }
.where--night .section-head .eyebrow::before, .closing-panel .eyebrow::before { background:var(--brass-400); }

html:not(.js) .week__bar i, html.reduced .week__bar i, html.reveal-all .week__bar i { transform:scaleX(var(--w)); transition:none; }
html:not(.js) .omap__dot, html.reduced .omap__dot, html.reveal-all .omap__dot { opacity:1; transition:none; }
html:not(.js) .omap__dot i, html.reduced .omap__dot i, html.reveal-all .omap__dot i { transform:scale(1); transition:none; }
html:not(.js) .omap__path path, html.reduced .omap__path path, html.reveal-all .omap__path path { stroke-dashoffset:0; transition:none; }
html:not(.js) .road__bar i, html.reduced .road__bar i, html.reveal-all .road__bar i { transform:scaleX(1); transition:none; }
html:not(.js) .road li li, html.reduced .road li li, html.reveal-all .road li li { opacity:1; translate:0 0; transition:none; }
html:not(.js) .tl::before, html.reduced .tl::before, html.reveal-all .tl::before { transform:none; transition:none; }
html:not(.js) .tl__step::before, html.reduced .tl__step::before, html.reveal-all .tl__step::before { background:var(--teal-600); border-color:var(--teal-600); transition:none; }
html:not(.js) .tl__step, html.reduced .tl__step, html.reveal-all .tl__step, html.reveal-all .js .tl__step { opacity:1 !important; translate:0 0 !important; }
html.reduced .seal, html:not(.js) .seal { opacity:1; transform:rotate(-8deg) scale(1); }
html.reduced .seal__check, html:not(.js) .seal__check { stroke-dashoffset:0; }
html.reveal-all .story .beat { position:static; opacity:1; transform:none; filter:none; }
html.reveal-all .deck.is-live .page { position:static; opacity:1; transform:none; }
html.reduced .deck.is-live, html.reveal-all .deck.is-live { height:auto; }
html.reduced .deck.is-live .deck__stage, html.reveal-all .deck.is-live .deck__stage { position:static; height:auto; }
html.reduced .deck.is-live .deck__viewer, html.reveal-all .deck.is-live .deck__viewer { height:auto; }
html.reduced .deck.is-live .page, html.reveal-all .deck.is-live .page { position:static; opacity:1; transform:none; pointer-events:auto; }
html.reduced .deck.is-live .page + .page { margin-top:1.25rem; }
html.reduced .deck.is-live .omap { aspect-ratio:1.28; height:auto; }

/* ---- responsive ---------------------------------------------------------------------- */
@media (max-width: 1100px) { .deck__grid { grid-template-columns:.9fr 1.1fr; } }
@media (max-width: 1024px) {
  .fit-figure { position:static; }
  .fit-grid { grid-template-columns:1fr; gap:1rem; }
  .fit-num { font-size:clamp(6rem, 4rem + 12vw, 11rem); }
  /* the deck becomes a horizontal snap track; the list gives way to the counter and arrows */
  .js .deck.is-live { height:auto; padding-block:var(--section-y); }
  .js .deck.is-live .deck__stage { position:static; height:auto; display:block; }
  .js .deck.is-live .deck__grid { padding-top:0; }
  .deck__grid { grid-template-columns:1fr; gap:1.5rem; }
  .deck__list { display:none; }
  .deck__hint { display:none; }
  .js .deck.is-live .deck__viewer {
    height:auto; display:flex; align-items:flex-start; gap:1rem; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--gutter)); padding:.3rem var(--gutter) 1rem; scroll-padding-inline:var(--gutter);
    scrollbar-width:none;
  }
  .js .deck.is-live .deck__viewer::-webkit-scrollbar { display:none; }
  .js .deck.is-live .page {
    position:static; flex:0 0 min(86%, 34rem); scroll-snap-align:center;
    opacity:1; transform:none; pointer-events:auto; overflow:hidden;
  }
  .js .deck.is-live .omap { aspect-ratio:1.15; height:auto; }
}
@media (max-width: 860px) {
  /* the story plays itself on phones: no sticky stage, every beat listed under the scene */
  .js .story.is-live { height:auto; }
  .js .story.is-live .story__stage { position:relative; height:auto; min-height:0; }
  .story__stage { padding-top:calc(var(--header-h) + 1rem); padding-bottom:1.5rem; }
  .story__grid { grid-template-columns:1fr; gap:1.75rem; }
  .story__copy { display:contents; }
  .story .hero-copy { order:1; }
  .story__visual { order:2; margin-bottom:2rem; }
  .beats { order:3; min-height:0; display:flex; flex-direction:column; gap:.75rem; }
  .story .hero-lockup { order:4; }
  .ticks { display:none; }
  .beat { position:static; opacity:.42; transform:none; filter:none; pointer-events:auto; padding-left:1rem; border-left:2px solid var(--sand-300); transition:opacity .4s var(--ease-out), border-color .4s var(--ease-out); }
  .story[data-state="1"] .beat[data-n="1"], .story[data-state="2"] .beat[data-n="2"],
  .story[data-state="3"] .beat[data-n="3"], .story[data-state="4"] .beat[data-n="4"] { opacity:1; border-left-color:var(--brass-500); }
  .beat__t { font-size:1.3rem; }
  .beat__p { font-size:.93rem; }
  .story__cover { width:min(300px, 72%); right:0; bottom:-6%; }
  .story__cap { bottom:-1.6rem; }
  .tl { grid-template-columns:1fr; padding:0 0 0 2rem; gap:1.6rem; }
  .tl::before {
    left:.42rem; right:auto; top:.4rem; bottom:.4rem; width:2px; height:auto;
    transform:scaleY(0); transform-origin:top;
    background:linear-gradient(180deg, var(--brass-400), var(--brass-500) 45%, var(--teal-400));
  }
  .tl.is-in::before { transform:scaleY(1); }
  .tl__step::before { left:-2rem; top:.2rem; }
  .how-lede { text-align:left; max-width:52ch; }
  .nots__list { grid-template-columns:1fr; }
  .nots__list li { flex-direction:row; align-items:baseline; gap:1rem; }
  .nots__no { font-size:2.2rem; width:3.2rem; flex:none; }
  .road { grid-template-columns:1fr; }
  .omap { aspect-ratio:1.05; }
  .statement--mission .statement__text { max-width:none; }
}
@media (max-width: 560px) {
  .week__row { grid-template-columns:5.4rem 1fr 2.3rem; }
  .sheet__meta { gap:.4rem; }
  .sheet__meta dd { font-size:1.05rem; }
  .sheet__kicker { padding-right:3.6rem; }
  .sheet--cover .seal { width:48px; }
  .sheet__big { font-size:2rem; }
  .page__wm { font-size:7rem; }
  /* at phone width the map's labels cannot share the square: numbered dots, legend below */
  .omap__dot span { display:none; }
  .omap__dot { transform:translate(-9px, -50%); }
  .omap__dot--l { transform:translate(-9px, -50%); }
  .omap__dot i { position:relative; width:18px; height:18px; }
  .omap__dot i::after { content:attr(data-n); position:absolute; inset:0; display:grid; place-items:center; font:600 .6rem/1 var(--font-mono); color:#FFFDF8; }
  .omap__dot--no i::after { color:var(--ink-600); }
  .omap__legend { display:grid; grid-template-columns:1fr 1fr; gap:.35rem .8rem; }
  .story__cover { width:min(260px, 76%); }
  .fit-num { font-size:6rem; }
}

html:not(.js) .story-control-head, html:not(.js) .ticks,
html.reduced .story-control-head, html.reduced .ticks { display:none; }

@media (max-width: 860px) {
  .hero-live { display:none; }
  .story-control-head { margin-bottom:0; }
  .ticks { display:grid; margin:0; }
  .ticks button { padding:.65rem .55rem .6rem; }
  .story__visual { padding:2.65rem .8rem 4.3rem; margin-bottom:0; border-radius:22px; }
  .story__visual-bar { top:.85rem; left:1rem; right:1rem; }
  .story__visual-readout { left:1rem; right:1rem; bottom:1.25rem; padding-left:0; }
  .story__visual-readout p:last-child { display:none; }
  .story__cover { right:.8rem; bottom:3.85rem; }
  .story__cap { left:1rem; bottom:.5rem; }
  .mission-grid { grid-template-columns:1fr; gap:2rem; }
  .mission-evidence { max-width:38rem; }
}

@media (max-width: 560px) {
  .ticks { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.5rem; }
  .ticks button { min-height:3.4rem; }
  .story__visual-readout strong { font-size:.8rem; }
  .story__visual-bar { font-size:.55rem; letter-spacing:.08em; }
  .story__visual-bar span:last-child { font-size:.53rem; }
  .story__cover { bottom:3.55rem; }
  .mission-evidence { padding:1.15rem 1.05rem 1rem; }
}


/* ---- 35. KADRO: one idea at a time ------------------------------------ */
:root { --clear-forest:#0B3F3C; --clear-dark:#082D2B; --clear-gold:#D9B36A; --clear-muted:#B3CBC5; }
body.home-showcase { background:var(--sand-100); background-image:none; }
.home-showcase .container { max-width:1360px; padding-inline:clamp(1.25rem,5vw,4.5rem); }
.home-showcase .site-header { top:0; left:0; width:100%; max-width:none; transform:none; border:0; border-bottom:1px solid rgba(11,63,60,.1); border-radius:0; background:rgba(250,246,237,.96); box-shadow:none; overflow:visible; }
.home-showcase .site-header .header-row { max-width:1360px; min-height:84px; padding-block:18px; }
.home-showcase .site-header .wordmark__logo { width:118px; height:auto; }
.home-showcase .site-header .wordmark,.home-showcase .site-header .nav-link { color:var(--clear-forest); }
.home-showcase .site-header .site-nav { gap:2rem; }
.home-showcase .site-header .nav-link { font-size:.9375rem; }
.home-showcase .site-header .btn { background:var(--clear-forest); color:var(--sand-100); border-radius:5px; padding:12px 20px; box-shadow:none; border:0; }
.home-showcase .site-header .btn:hover { background:var(--teal-600); }
.home-showcase .site-header::before,.home-showcase .site-header::after,.home-showcase .nav-pill,.home-showcase .header-progress,.home-showcase .grain,.home-showcase .sunlight,.home-showcase .footer-ghost { display:none; }
.home-showcase .site-header.is-scrolled { backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.home-showcase [data-reveal],.home-showcase .split-ready .w { opacity:1; transform:none; translate:none; filter:none; }
.clear-eyebrow { font:500 .8125rem/1.5 var(--font-sans); color:var(--teal-600); letter-spacing:.08em; text-transform:uppercase; }
.clear-hero { padding:154px 0 30px; }
.clear-hero .container { text-align:center; }
.clear-hero h1 { margin:26px auto 0; font-size:clamp(3.3rem,7.4vw,6.8rem); line-height:1.02; font-weight:450; letter-spacing:-.06em; color:var(--ink-900); text-wrap:initial; }
.clear-hero h1 em { font-style:normal; color:var(--clear-forest); }
.clear-hero__lede { font-size:clamp(1.0625rem,1.5vw,1.25rem); line-height:1.65; color:var(--ink-600); max-width:34rem; margin:28px auto 0; }
.clear-button { display:inline-flex; align-items:center; justify-content:center; gap:28px; padding:17px 24px; border-radius:5px; color:var(--sand-100); background:var(--clear-forest); text-decoration:none; font-size:1rem; font-weight:500; transition:background .2s; }
.clear-button:hover { background:var(--teal-600); }
.clear-hero .clear-button { margin-top:32px; }
.clear-hero__note { margin-top:13px; font-size:.875rem; color:var(--ink-600); }
.clear-hero__foot { display:flex; justify-content:space-between; align-items:baseline; gap:24px; margin-top:88px; padding:24px 0 0; border-top:1px solid rgba(11,63,60,.15); font-size:.875rem; color:var(--ink-600); text-align:left; }
.clear-hero__foot a { text-decoration:none; color:var(--clear-forest); display:flex; align-items:center; gap:30px; }
.clear-hero__foot a:hover { text-decoration:underline; text-underline-offset:5px; }
.clear-example { background:var(--clear-dark); color:var(--sand-100); padding:clamp(4.5rem,8vw,7.5rem) 0 38px; }
.clear-example .clear-eyebrow { color:var(--clear-gold); }
.clear-example__intro h2 { font-size:clamp(2.35rem,4.3vw,4rem); font-weight:450; line-height:1.1; letter-spacing:-.05em; color:var(--sand-100); margin-top:24px; text-wrap:initial; }
.clear-example__intro > p:last-child { margin-top:25px; font-size:1.125rem; line-height:1.7; color:var(--clear-muted); max-width:35rem; }
.clear-comparison { display:grid; grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr); align-items:center; gap:36px; margin-top:64px; }
.clear-comparison__label { font-size:.9375rem; color:var(--clear-muted); }
.clear-before blockquote { margin-top:24px; font-size:clamp(1.7rem,2.45vw,2.5rem); font-weight:400; line-height:1.42; letter-spacing:-.025em; color:var(--sand-100); }
.clear-before__caption { margin-top:26px; font-size:.9375rem; color:var(--clear-muted); }
.clear-comparison__arrow { font-size:3rem; font-weight:300; text-align:center; color:var(--clear-gold); }
.clear-after { padding:clamp(1.5rem,3vw,3rem); color:var(--ink-900); background:var(--sand-100); border-radius:5px; box-shadow:0 18px 55px -35px rgba(0,0,0,.45); }
.clear-after .clear-comparison__label { color:var(--ink-600); }
.clear-after h3 { font-size:2.2rem; line-height:1.2; font-weight:450; letter-spacing:-.045em; color:var(--clear-forest); margin:10px 0 28px; }
.clear-after dl > div { display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:20px; padding:18px 0; border-top:1px solid #D3C3A4; }
.clear-after dt { font-size:.875rem; line-height:1.6; color:var(--ink-600); }
.clear-after dd { margin:0; font-size:1.0625rem; line-height:1.6; }
.clear-after__foot { display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:22px; border-top:1px solid #D3C3A4; color:var(--clear-forest); font-size:.9375rem; }
.clear-example__caption { margin-top:44px; color:var(--clear-muted); font-size:.8125rem; line-height:1.6; text-align:right; }
.clear-example a:focus-visible { outline-color:var(--clear-gold); }

/* The assessment: one selected page, directly accessible. */
.home-showcase { --section-y:clamp(4.5rem,8vw,7.5rem); }
.home-showcase .h2 { font-size:clamp(2.3rem,4vw,3.7rem); line-height:1.1; letter-spacing:-.05em; font-weight:450; max-width:20ch; }
.home-showcase .eyebrow { font:500 .8125rem/1.5 var(--font-sans); color:var(--teal-600); letter-spacing:.07em; }
.home-showcase .section-head .eyebrow::before { display:none; }
.home-showcase .power-plan { background:none; }
.home-showcase .power-plan .deck__stage { position:relative; padding:0; min-height:0; height:auto; }
.home-showcase .power-plan .deck__grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2.5rem,6vw,6rem); align-items:start; }
.home-showcase .power-plan .deck__side { gap:0; min-width:0; }
.home-showcase .power-plan .section-head { gap:22px; margin-bottom:34px; }
.home-showcase .power-plan .section-lede { max-width:36ch; font-size:1.0625rem; line-height:1.7; }
.home-showcase .power-plan .deck__list { display:flex; flex-direction:column; list-style:none; gap:0; padding:0; margin:0; }
.power-plan .deck__list li { border-top:1px solid rgba(11,63,60,.17); }
.power-plan .deck__list li:last-child { border-bottom:1px solid rgba(11,63,60,.17); }
.power-plan .deck__list button { display:flex; align-items:center; gap:18px; width:100%; padding:20px 14px; color:var(--ink-600); background:none; border:0; cursor:pointer; text-align:left; font:450 1rem/1.4 var(--font-sans); transition:background .2s,color .2s; }
.power-plan .deck__list button:hover { background:rgba(166,210,205,.14); color:var(--clear-forest); }
.power-plan .deck__list button[aria-selected="true"] { background:var(--teal-50); color:var(--clear-forest); box-shadow:inset 3px 0 var(--clear-forest); }
.power-plan .deck__list button[aria-selected="true"]::after { content:"→"; margin-left:auto; }
.power-plan .deck__list button .deck__n { font-size:.8125rem; color:var(--ink-600); }
.power-plan .deck__list button[aria-selected="true"] .deck__n { color:var(--clear-forest); }
.home-showcase .power-plan .deck__viewer { position:relative; display:block; height:auto; min-height:0; overflow:visible; padding:0; margin:0; perspective:none; }
.power-plan__example { font-size:.8125rem; color:var(--ink-600); margin-bottom:16px; }
.home-showcase .power-plan .page { display:flex; flex-direction:column; position:relative; inset:auto; width:100%; min-width:0; min-height:555px; height:auto; margin:0; padding:32px; overflow:hidden; gap:24px; opacity:1; transform:none; pointer-events:auto; background:#FFFDF8; border:1px solid #D3C3A4; border-radius:5px; outline:0; box-shadow:0 16px 40px -32px rgba(11,63,60,.3); }
.home-showcase .power-plan .page[hidden] { display:none; }
.home-showcase .power-plan .page + .page { margin-top:0; }
.power-plan .page__title { font-size:clamp(1.8rem,2.4vw,2.4rem); font-weight:450; }
.power-plan .page__wm { display:none; }
.power-plan .week__who,.power-plan .week__h { font-size:.875rem; }
.power-plan .week__what { font-size:.875rem; line-height:1.5; color:var(--ink-600); padding-bottom:5px; }
.power-plan .week__row { grid-template-columns:7rem 1fr 2.6rem; }
.power-plan .week__bar { border-radius:1px; height:7px; }
.power-plan .week__bar i { transform:scaleX(var(--w)); border-radius:1px; }
.power-plan .sheet__total { padding-top:18px; margin-top:auto; font-size:1rem; line-height:1.55; }
.power-plan .sheet__big { font-size:2.7rem; }
.power-plan .sheet__note { font-size:.875rem; color:var(--ink-600); line-height:1.6; }
.power-plan .omap { margin:16px 0 18px; height:320px; aspect-ratio:auto; flex:none; }
.power-plan .omap__axis,.power-plan .omap__q { font-size:.75rem; letter-spacing:0; color:var(--ink-600); }
.power-plan .omap__q--a { color:#8F651C; }
.power-plan .omap__dot { opacity:1; }
.power-plan .omap__dot span { display:none; }
.power-plan .omap__dot i { transform:scale(1); width:20px; height:20px; position:relative; }
.power-plan .omap__dot i::after { content:attr(data-n); position:absolute; inset:0; display:grid; place-items:center; color:var(--sand-100); font:400 .75rem/1 var(--font-mono); }
.power-plan .omap__dot--no i::after { color:var(--ink-600); }
.home-showcase .power-plan .omap__dot--l { flex-direction:row; transform:translate(-10px,-50%); }
.power-plan .omap__path path { stroke-dashoffset:0; }
.power-plan .omap__legend { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; }
.power-plan .omap__legend li { font-size:.875rem; }
.power-plan .omap__legend b { font-size:.75rem; }
.power-plan .road { grid-template-columns:1fr; gap:24px; }
.power-plan .road__when { font-size:.875rem; }
.power-plan .road li li { opacity:1; translate:none; font-size:1rem; }
.power-plan .road__bar i { transform:scaleX(1); }
.power-plan .math { font-size:1rem; }
.power-plan .math thead th { font-size:.75rem; }
.power-plan .math th,.power-plan .math td { padding-block:10px; }
.power-plan .build li { font-size:1rem; padding-block:17px; }
.power-plan .build li::before { font-size:.75rem; top:22px; }
.power-plan [role="tab"]:focus-visible,.power-plan [role="tabpanel"]:focus-visible,.clear-button:focus-visible { outline:2px solid var(--teal-500); outline-offset:4px; }
html:not(.js) .power-plan .deck__list { display:none; }
html:not(.js) .home-showcase .power-plan .page + .page { margin-top:24px; }
.clear-ownership { padding:0 0 clamp(3rem,5vw,5rem); }
.clear-ownership p { padding-top:30px; border-top:1px solid rgba(11,63,60,.17); color:var(--clear-forest); font-size:1.125rem; }
.clear-ownership span { color:var(--ink-600); }
.home-showcase .how { border-top:1px solid rgba(11,63,60,.17); }
.home-showcase .how .section-head { margin-bottom:50px; }
.home-showcase .tl::before { transform:scaleX(1); }
.home-showcase .tl__step { opacity:1; translate:none; }
.home-showcase .tl__step::before { background:var(--clear-forest); border-color:var(--clear-forest); }
.home-showcase .tl__day { font-size:.8125rem; line-height:1.4; margin-bottom:10px; letter-spacing:0; }
.home-showcase .tl__step .h3 { font-size:1.125rem; line-height:1.4; }
.home-showcase .tl__step p { font-size:1rem; line-height:1.6; }
.clear-fit { padding:60px 0; border-block:1px solid rgba(11,63,60,.17); }
.clear-fit .container { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
.clear-fit h2 { font-size:clamp(2rem,3vw,3rem); font-weight:450; line-height:1.13; letter-spacing:-.045em; }
.clear-fit p { font-size:1.0625rem; line-height:1.75; color:var(--ink-600); }
.clear-fit .clear-fit__under { margin-top:18px; font-size:.9375rem; }
.clear-fit a { color:var(--clear-forest); text-underline-offset:4px; }
.home-showcase .closing-panel { background:var(--clear-forest); border:0; border-radius:6px; box-shadow:none; }
.home-showcase .closing-panel::before,.home-showcase .closing-panel::after,.home-showcase .closing-panel .dust { display:none; }
.home-showcase .closing-panel__inner { display:grid; grid-template-columns:1fr 1fr; align-items:start; padding:clamp(1.5rem,4vw,4rem); gap:clamp(2rem,5vw,5rem); }
.home-showcase .closing-panel__inner > div:first-child { max-width:none; }
.home-showcase .closing-panel__inner > .book { min-width:0; width:100%; }
.home-showcase .closing .h2 { color:var(--sand-100); font-size:clamp(2.3rem,3.7vw,3.7rem); }
.home-showcase .closing .eyebrow { color:var(--clear-gold); }
.home-showcase .closing-lede { font-size:1.0625rem; color:var(--clear-muted); line-height:1.7; }
.home-showcase .closing-where { color:var(--clear-muted); font-size:.9375rem; }
.home-showcase .field__label { font-size:.875rem; }
.home-showcase .field__input { border-radius:4px; min-height:48px; font-size:1rem; }
.home-showcase .field__opt { font-size:.8125rem; }
.home-showcase .book__submit { border-radius:4px; background:var(--clear-gold); color:var(--clear-dark); font-size:1rem; min-height:50px; box-shadow:none; }
.home-showcase .book__note { font-size:.875rem; color:var(--clear-muted); line-height:1.65; }
.home-showcase .book__note a { color:var(--sand-100); }
.home-showcase .site-footer { border-top:1px solid #D3C3A4; }
.home-showcase .footer-fine { font-size:.8125rem; }
.home-showcase .site-footer .wordmark__logo { width:104px; height:auto; }
.nav-toggle { display:none; }
@media(min-width:1500px){.clear-hero{padding-top:175px}.clear-hero__foot{margin-top:100px}}
@media(max-width:1100px){.clear-comparison{gap:24px;grid-template-columns:1fr 36px 1fr}.clear-after dl>div{grid-template-columns:1fr;gap:6px}.home-showcase .power-plan .deck__grid{gap:2.5rem}.home-showcase .power-plan .page{padding:26px}.clear-fit .container{gap:3rem}}
@media(max-width:1000px){
  .site-header,.site-header.is-scrolled{overflow:visible}
  .site-nav,.home-showcase .site-nav{display:none}
  .js .nav-toggle{display:flex;align-items:center;justify-content:center;gap:16px;padding:9px 12px;min-height:44px;background:transparent;border:1px solid rgba(11,63,60,.25);border-radius:4px;color:var(--clear-forest);font:500 .875rem/1.4 var(--font-sans);cursor:pointer;margin-left:auto}
  .site-nav.is-open{display:flex;flex-direction:column;position:absolute;top:calc(100% + 10px);left:0;right:0;background:var(--sand-100);border:1px solid #D3C3A4;border-radius:5px;padding:16px;gap:5px;box-shadow:0 20px 30px -20px #082523}
  .site-nav.is-open .nav-link{font-size:1rem;padding:14px 12px;line-height:1.3;min-height:44px}
  .home-showcase .site-nav.is-open{top:100%;left:var(--gutter);right:var(--gutter);padding:16px;gap:5px}
  .site-nav.is-open .nav-pill{display:none}
  .nav-toggle[aria-expanded="true"]>span:last-child{transform:rotate(45deg)}
  html:not(.js) .site-header{position:relative;top:0}
  html:not(.js) .header-row{flex-wrap:wrap}
  html:not(.js) .site-nav{display:flex;flex-wrap:wrap;order:3;width:100%;padding-bottom:12px;gap:16px}
  html:not(.js) .clear-hero{padding-top:50px}
}
@media(max-width:860px){
  .clear-hero{padding-top:135px}.clear-hero h1{font-size:clamp(3.15rem,8vw,4.9rem)}.clear-hero__foot{margin-top:65px;flex-direction:column;gap:18px;align-items:center;text-align:center}
  .clear-example__intro h2{font-size:clamp(2.4rem,5.9vw,3.1rem)}.clear-comparison{grid-template-columns:1fr;gap:28px;max-width:36rem;margin:48px auto 0}.clear-before blockquote{font-size:1.85rem;line-height:1.45}.clear-comparison__arrow{transform:rotate(90deg);line-height:1;justify-self:center}.clear-after{padding:30px}.clear-after dl>div{grid-template-columns:7.5rem 1fr;gap:20px}.clear-example__caption{text-align:center}
  .home-showcase .power-plan .deck__grid{grid-template-columns:1fr;gap:35px}.home-showcase .power-plan .deck__side{max-width:none}.home-showcase .power-plan .section-head{margin-bottom:26px}.home-showcase .power-plan .section-lede{max-width:50ch}.power-plan .deck__list button{padding:18px 16px}.home-showcase .power-plan .page{min-height:0;padding:30px;gap:26px}
  .clear-ownership p{font-size:1rem}.clear-ownership span{display:block;margin-top:7px}.home-showcase .how .section-head{display:block}.home-showcase .tl{grid-template-columns:1fr;gap:30px;padding:0 0 0 28px}.home-showcase .tl::before{left:6px;top:0;bottom:0;width:1px;height:auto;background:#D3C3A4;transform:none}.home-showcase .tl__step{padding-left:10px}.home-showcase .tl__step::before{left:-28px;top:2px;width:13px;height:13px}.home-showcase .tl__day{margin-bottom:3px}
  .clear-fit .container{grid-template-columns:1fr;gap:28px}.clear-fit p{max-width:45ch}.home-showcase .closing-panel__inner{grid-template-columns:1fr;padding:32px}.home-showcase .closing .h2{max-width:18ch}.home-showcase .closing-lede{max-width:46ch}
}
@media(max-width:520px){
  .home-showcase .header-row{gap:12px;flex-wrap:wrap}.home-showcase .site-header .header-row{min-height:74px;padding-block:14px}.home-showcase .site-header .btn--sm{padding:11px 12px;font-size:.875rem}.home-showcase .nav-toggle{padding:9px 10px;gap:10px}.home-showcase .site-header .wordmark__logo{width:94px}
  .clear-hero{padding-top:120px}.clear-hero h1{font-size:clamp(2.55rem,9.7vw,3.2rem);line-height:1.07;letter-spacing:-.057em;margin-top:26px}.clear-hero__lede{font-size:1.0625rem;line-height:1.7;margin-top:25px}.clear-hero .clear-button{margin-top:28px;width:100%;max-width:300px}.clear-hero__note{font-size:.8125rem}.clear-hero__foot{margin-top:50px;font-size:.8125rem;line-height:1.6;gap:17px}
  .clear-example{padding-top:64px}.clear-example__intro h2{font-size:2.35rem}.clear-example__intro>p:last-child{font-size:1.0625rem}.clear-comparison{margin-top:38px;gap:25px}.clear-comparison__label{font-size:.875rem}.clear-before blockquote{font-size:1.65rem;margin-top:18px}.clear-before__caption{font-size:.875rem;margin-top:18px}.clear-after{padding:24px}.clear-after h3{font-size:2rem;margin-bottom:23px}.clear-after dl>div{grid-template-columns:1fr;gap:5px;padding-block:16px}.clear-after dd{font-size:1rem}.clear-after__foot{font-size:.875rem}.clear-example__caption{margin-top:30px}
  .home-showcase .power-plan .page{padding:22px;gap:24px}.power-plan .page__title{font-size:1.85rem}.power-plan .page__lede{font-size:1rem}.power-plan .week__row{grid-template-columns:6.1rem 1fr 2.5rem;gap:5px 8px}.power-plan .week__what{grid-column:1/-1;margin-top:3px}.power-plan .sheet__big{font-size:2.4rem}.power-plan .omap{height:300px;margin-block:20px}.power-plan .omap__legend{grid-template-columns:1fr;gap:10px}.power-plan .math{font-size:.9375rem}
  .clear-fit{padding-block:44px}.clear-fit h2{font-size:2.2rem}.clear-fit p{font-size:1rem}.home-showcase .closing-panel__inner{padding:28px 22px}.home-showcase .closing .h2{font-size:2.3rem}.home-showcase .book__row{grid-template-columns:1fr}.home-showcase .closing{padding-top:28px}
}
.clear-hero h1,.clear-example h2 { overflow-wrap:break-word; }
.clear-fit .container > * { min-width:0; }
html.reveal-all .home-showcase .site-header { transform:none !important; }
@media(prefers-reduced-motion:reduce){.clear-button,.power-plan .deck__list button{transition:none}}
html.reduced .clear-button,html.reduced .power-plan .deck__list button { transition:none; }