/* =========================================================
   Nonstrain — Foundation styles
   Warm-minimal, refined, restrained. The "$10k" look.
   ========================================================= */

:root {
  /* Petrol teal palette — Canvas / Deep / Ink / Sand / Coral */
  --bg: #F6F3EC;            /* Canvas */
  --bg-alt: #ECE7D7;        /* darker canvas — alternating sections */
  --ink: #093F39;           /* Deep teal — headlines, dark surfaces, structural dark */
  --ink-soft: #1C211F;      /* Body ink — main paragraphs, sub-headlines */
  --ink-softer: #6B716E;    /* meta, smaller text */
  --primary: #0F5C54;       /* Petrol primary — secondary brand color */
  --accent: #E3A063;        /* Sand — primary CTA, accents, highlights */
  --accent-rgb: 227 160 99;
  --accent-press: #C88247;  /* darker sand for hover */
  --accent-2: #E3A063;
  --accent-2-rgb: 227 160 99;
  --warm: #E2673C;          /* Coral — used sparingly, for fire */
  --warm-rgb: 226 103 60;
  --warm-press: #C6531D;
  --line: #DCD6C5;          /* soft hairline */
  --line-strong: #9AA39F;   /* mid line — palette's explicit Line color */
  --card: #FFFFFF;
  --copy-mark: var(--ink);  /* deep teal — inline copy emphasis */
}

/* Inline copy-emphasis span. */
.copy-mark { color: var(--copy-mark); }

/* Smooth scroll is handled in JS so we can cap duration when jumping past the
   600vh story section — otherwise the browser smooth-scroll feels frozen. */
html { scroll-behavior: auto; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* All anchorable sections clear the fixed nav (72px nav + 16px breathing room). */
section[id],
main > section { scroll-margin-top: 88px; }

/* =========================================================
   Grain overlay — adds tactile texture to the warm base.
   SVG turbulence, fixed full-screen, very low opacity.
   ========================================================= */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* =========================================================
   Nav
   ========================================================= */
.nav { background: transparent; }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 8px 12px;
  margin: -8px -4px;
  border-radius: 8px;
  transition: color 200ms ease, background 240ms ease, transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-link:hover {
  color: var(--accent-press);
  background: rgb(var(--accent-rgb) / 0.07);
  transform: translateY(-1px);
}
.nav-link.is-current { color: var(--accent-press); }
.nav-link::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-link:hover::after,
.nav-link.is-current::after { transform: scaleX(1); }

/* A small dot indicator that appears on the current section */
.nav-link.is-current { padding-left: 26px; }
.nav-link.is-current::before {
  content: '';
  position: absolute;
  left: 12px; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.18);
  animation: nav-dot-appear 300ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes nav-dot-appear {
  from { opacity: 0; transform: translate(-4px, -50%); }
  to   { opacity: 1; transform: translateY(-50%); }
}

/* On-scroll state */
.nav.is-scrolled {
  background: rgba(250, 248, 244, 0.82);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav.is-scrolled .nav-inner { height: 60px; }

/* Mobile menu */
.mobile-menu {
  display: flex;
  flex-direction: column;
  transform: translateY(-8px);
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
}
/* HARD GUARANTEE: when the HTML `hidden` attribute is present the menu
   must be display:none, regardless of any Tailwind utility on the element.
   Without this, Tailwind's `.flex` (author origin) beats the UA stylesheet's
   `[hidden] { display: none }` and the menu stays fullscreen behind every
   click on the nav and hero.  */
.mobile-menu[hidden] { display: none !important; }
.mobile-menu.is-open { transform: translateY(0); opacity: 1; }
.mobile-link {
  display: block;
  padding: 14px 4px;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mobile-link:hover { color: var(--accent-press); }

/* =========================================================
   Buttons
   ========================================================= */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background: var(--accent);       /* sand */
  color: var(--ink);                /* deep teal text */
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  padding: 0.625rem 1.125rem;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 2px rgba(9, 63, 57, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.30) inset;
  transition:
    background 220ms ease,
    color 220ms ease,
    transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 280ms ease;
  will-change: transform;
  cursor: pointer;
}
/* Coral fire sweep — sand stays as base, warm coral glaze slides across on hover. */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgb(var(--warm-rgb) / 0.30) 45%,
    rgb(var(--warm-rgb) / 0.15) 60%,
    transparent 100%
  );
  transform: translateX(-110%);
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: -1;
  pointer-events: none;
}
.btn-primary:hover::before { transform: translateX(0); }

.btn-primary:hover {
  background: var(--accent-press);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(9, 63, 57, 0.10),
    0 10px 28px rgba(9, 63, 57, 0.14),
    0 0 0 4px rgb(var(--warm-rgb) / 0.20);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Arrow nudges right on hover */
.btn-primary > svg,
.btn-ghost > svg,
.reveal-link > svg,
.lead-submit > svg,
.audit-cta > svg,
.founding-cta > svg,
.final-cta-btn > svg,
.pillar-cta > svg {
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.btn-primary:hover > svg,
.btn-ghost:hover > svg,
.reveal-link:hover > svg,
.lead-submit:hover > svg,
.audit-cta:hover > svg,
.founding-cta:hover > svg,
.final-cta-btn:hover > svg,
.pillar-cta:hover > svg {
  transform: translateX(3px);
}

/* Variant — keep blue available where signal really matters */
.btn-primary.btn-blue {
  background: var(--accent);
  box-shadow: 0 1px 2px rgba(46,115,230,0.18), 0 6px 16px rgba(46,115,230,0.18);
}
.btn-primary.btn-blue:hover {
  background: var(--accent-press);
  box-shadow: 0 2px 4px rgba(46,115,230,0.22), 0 10px 24px rgba(46,115,230,0.24);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background: transparent;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  padding: 0.625rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  position: relative;
  overflow: hidden;
  transition:
    border-color 220ms ease,
    background 220ms ease,
    transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 240ms ease,
    color 200ms ease;
}
/* Soft sand fill that slides in on hover */
.btn-ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgb(var(--accent-rgb) / 0) 0%,
    rgb(var(--accent-rgb) / 0.12) 50%,
    rgb(var(--accent-rgb) / 0) 100%
  );
  transform: translateX(-110%);
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.btn-ghost:hover::before { transform: translateX(0); }

.btn-ghost:hover {
  border-color: var(--ink);
  background: rgba(9, 63, 57, 0.04);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(9, 63, 57, 0.07);
}
.btn-ghost:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.btn-lg { padding: 0.875rem 1.375rem; font-size: 0.9375rem; border-radius: 12px; }

/* =========================================================
   Hero — clean typographic, Calendly/Linear feel.
   Single subtle blue wash + cursor-tracked glow.
   ========================================================= */
.hero { position: relative; z-index: 2; }

/* Single calm ambient wash */
.hero-wash {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 1;
}
.hero-wash-blue {
  width: 880px; height: 880px;
  top: -340px; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgb(var(--accent-rgb) / 0.16) 0%, rgb(var(--accent-rgb) / 0) 60%);
}

/* Optional secondary wash — only displayed when a duotone variant is active.
   Lets the orange-and-teal cinematic look exist without changing the default hero. */
.hero-wash-secondary {
  display: none;
  position: absolute;
  pointer-events: none;
  width: 720px; height: 720px;
  top: -240px; left: 75%;
  transform: translateX(-50%);
  border-radius: 50%;
  filter: blur(90px);
  background: radial-gradient(circle, rgb(var(--accent-2-rgb) / 0.20) 0%, rgb(var(--accent-2-rgb) / 0) 60%);
}
[data-duotone] .hero-wash-blue {
  width: 720px; height: 720px; top: -240px; left: 25%;
}
[data-duotone] .hero-wash-secondary { display: block; }

/* Cursor-tracked spotlight — adds subtle life without kitsch */
.hero-spotlight {
  position: absolute;
  pointer-events: none;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--accent-rgb) / 0.10) 0%, rgb(var(--accent-rgb) / 0) 60%);
  filter: blur(20px);
  left: var(--mx, 50%);
  top: var(--my, 40%);
  transform: translate(-50%, -50%);
  transition: opacity 300ms ease;
  opacity: 0;
}
.hero:hover .hero-spotlight { opacity: 1; }

/* Eyebrow — minimal pill, no warm dot */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.375rem 0.75rem 0.375rem 0.625rem;
  background: rgba(255,255,255,0.65);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.16);
}

/* H1 — heavy sans, confident SaaS scale */
.hero-h1 {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 6.4vw, 5rem);
  line-height: 1.03;
  letter-spacing: -0.038em;
  color: var(--ink);
}
.hero-h1 .h1-soft {
  color: var(--ink-soft);
  font-weight: 500;
}

.hero-sub {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  font-weight: 400;
}
@media (min-width: 768px) { .hero-sub { font-size: 1.1875rem; } }

/* The interactive cycler — a single living line.
   Calm slide+fade between phrases, defensible copy. */
.hero-cycler {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 1.75rem;
  padding: 0.5rem 0.875rem 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  font-size: 0.875rem;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  max-width: 100%;
}
.cycler-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 500;
}
.cycler-pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
}
.cycler-pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgb(var(--accent-rgb) / 0.35);
  animation: cycler-pulse 1.8s ease-out infinite;
}
@keyframes cycler-pulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}
.cycler-slot {
  position: relative;
  display: inline-block;
  min-width: 9.5rem;
  height: 1.4em;
  overflow: hidden;
  color: var(--ink);
  font-weight: 600;
}
.cycler-slot-item {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity 380ms ease, transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cycler-slot-item.is-active {
  opacity: 1; transform: translateY(0);
}
.cycler-slot-item.is-leaving {
  opacity: 0; transform: translateY(-0.6em);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.75rem;
  padding-top: 1.5rem;
  margin-top: 2.75rem;
  border-top: 1px solid var(--line);
  max-width: 720px;
}
.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  letter-spacing: -0.005em;
  font-weight: 500;
}
.trust-icon { color: var(--accent); flex-shrink: 0; opacity: 0.9; }

/* =========================================================
   Reveal animation (page load)
   Drives the hero entrance. Children opt in with .reveal +
   inline style --reveal-delay.
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: reveal 700ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: var(--reveal-delay, 0ms);
}
@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll-triggered reveal (sections below the fold).
   Per-element stagger via inline style: --reveal-delay. */
.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 520ms ease-out var(--reveal-delay, 0ms),
    transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms);
}
.scroll-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion: kill the choreography, keep the message */
@media (prefers-reduced-motion: reduce) {
  .reveal, .scroll-reveal { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   Utility — section rhythm helpers
   ========================================================= */
.section { padding-top: 96px; padding-bottom: 96px; }
@media (min-width: 768px) { .section { padding-top: 140px; padding-bottom: 140px; } }

/* =========================================================
   Section header primitives — reusable across all sections
   ========================================================= */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.eyebrow-line {
  width: 28px; height: 1px;
  background: var(--accent);
  display: inline-block;
}

.section-h2 {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.section-lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  font-weight: 400;
}
@media (min-width: 768px) { .section-lede { font-size: 1.1875rem; } }

/* =========================================================
   §4.3 — Flow ("What automated looks like")
   The signature comprehension moment.
   ========================================================= */
.flow-section {
  position: relative;
  z-index: 2;
  padding-top: 120px;
  padding-bottom: 140px;
}
@media (min-width: 768px) {
  .flow-section { padding-top: 160px; padding-bottom: 200px; }
}

.flow-wash {
  position: absolute;
  pointer-events: none;
  width: 1100px; height: 600px;
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgb(var(--accent-rgb) / 0.06) 0%, rgb(var(--accent-rgb) / 0) 65%);
  filter: blur(60px);
}

.flow-header { position: relative; }

.flow {
  position: relative;
  margin-top: 80px;
}
@media (min-width: 768px) { .flow { margin-top: 110px; } }

/* ---------- Desktop horizontal track ---------- */
.flow-track {
  display: none;
  position: absolute;
  top: 28px; left: 6%; right: 6%;
  height: 1px;
  z-index: 1;
}
@media (min-width: 900px) { .flow-track { display: block; } }

.flow-track-line {
  position: absolute;
  inset: 0;
  background: var(--line-strong);
}
.flow-track-progress {
  position: absolute;
  top: 0; left: 0;
  height: 1px;
  width: 0%;
  background: linear-gradient(90deg, rgb(var(--accent-2-rgb) / 0) 0%, rgb(var(--accent-2-rgb) / 1) 18%, rgb(var(--accent-rgb) / 1) 100%);
  transition: width 1500ms cubic-bezier(0.5, 0.1, 0.3, 1);
}
.flow.is-active .flow-track-progress { width: 100%; }

.flow-track-pulse {
  position: absolute;
  top: -3px; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.18);
  transform: translateX(-50%);
  transition: left 1500ms cubic-bezier(0.5, 0.1, 0.3, 1), opacity 200ms ease;
  opacity: 0;
}
.flow.is-active .flow-track-pulse {
  opacity: 1;
  left: 100%;
}

/* ---------- Steps ---------- */
.flow-steps {
  list-style: none;
  display: grid;
  gap: 48px;
  position: relative;
  z-index: 2;
}
@media (min-width: 900px) {
  .flow-steps {
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    padding: 0 6%;
  }
}

.flow-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 540ms ease-out, transform 540ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.flow-step.is-active { opacity: 1; transform: translateY(0); }

@media (min-width: 900px) {
  .flow-step {
    align-items: center;
    text-align: center;
  }
}

/* mobile: vertical timeline line on the left */
@media (max-width: 899.98px) {
  .flow-steps::before {
    content: '';
    position: absolute;
    top: 28px; bottom: 28px; left: 27px;
    width: 1px;
    background: linear-gradient(180deg, var(--accent) 0%, var(--line-strong) 100%);
    opacity: 0.5;
  }
}

.flow-node {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  box-shadow: 0 1px 2px rgba(14,15,17,0.04);
  transition: color 320ms ease, border-color 320ms ease, box-shadow 320ms ease, transform 320ms ease;
}
.flow-step.is-active .flow-node {
  color: var(--accent);
  border-color: rgb(var(--accent-rgb) / 0.4);
  box-shadow: 0 1px 2px rgba(14,15,17,0.04), 0 0 0 6px rgb(var(--accent-rgb) / 0.10), 0 10px 28px rgb(var(--accent-rgb) / 0.18);
  transform: translateY(-1px);
}
.flow-step.is-active .flow-node-final {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 1px 2px rgba(14,15,17,0.10), 0 12px 28px rgba(14,15,17,0.16);
}

.flow-num {
  position: absolute;
  top: -8px; right: -8px;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 5px;
  line-height: 1;
}
.flow-step.is-active .flow-num {
  color: var(--accent-press);
  border-color: rgb(var(--accent-rgb) / 0.3);
}
.flow-step.is-active .flow-node-final + .flow-text,
.flow-step[data-step="5"].is-active .flow-num {
  color: var(--ink);
  border-color: var(--line-strong);
}

.flow-icon { display: inline-flex; }

.flow-text {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  max-width: 100%;
}
.flow-step.is-active .flow-text { color: var(--ink); }

@media (min-width: 900px) {
  .flow-text { font-size: 0.9375rem; max-width: 200px; }
}

/* ---------- Punchline ---------- */
.flow-punchline {
  position: relative;
  margin-top: 100px;
  text-align: center;
}
@media (min-width: 768px) { .flow-punchline { margin-top: 140px; } }

.flow-punchline-text {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.028em;
  color: var(--ink);
  max-width: 820px;
  margin: 0 auto;
}
.flow-punchline-text em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent-press);
  letter-spacing: -0.02em;
}
[data-duotone] .flow-punchline-text em { color: rgb(var(--accent-2-rgb)); }

.flow-punchline-line {
  width: 48px; height: 2px;
  background: var(--accent);
  margin: 32px auto 0;
  border-radius: 1px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: opacity 600ms ease 200ms, transform 700ms cubic-bezier(0.22,0.61,0.36,1) 200ms;
}
.flow-punchline.is-in .flow-punchline-line { opacity: 1; transform: scaleX(1); }

/* Soft italic-serif second-line treatment for section headlines (used in §4.4 etc.) */
.section-h2-soft {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: -0.025em;
}

/* =========================================================
   §4.4 — The Problem
   Warm agitation. Plain language. Three blocks with a calm
   numbered rail (line draws, dot pulses) on the left.
   ========================================================= */
.problem-section {
  background: var(--bg-alt);
  padding-top: 120px;
  padding-bottom: 140px;
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .problem-section { padding-top: 160px; padding-bottom: 200px; }
}

.problem-list {
  list-style: none;
  margin: 80px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
@media (min-width: 768px) {
  .problem-list { margin-top: 110px; gap: 96px; }
}

.problem-block {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 20px;
  align-items: start;
  /* Scroll-reveal stagger driven via data-reveal-delay (read by JS) */
  transition-delay: var(--reveal-delay, 0ms);
}
@media (min-width: 768px) {
  .problem-block {
    grid-template-columns: 140px 1fr;
    gap: 40px;
  }
}

.problem-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 8px;
}

.problem-num {
  display: inline-block;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.08);
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}

.problem-rail-line {
  display: block;
  width: 1px;
  height: 0;
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.55) 0%, rgb(var(--accent-rgb) / 0) 100%);
  margin: 14px 0 0 13px;
  transition: height 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 200ms;
}
.problem-block.is-in .problem-rail-line { height: 64px; }
@media (min-width: 768px) {
  .problem-block.is-in .problem-rail-line { height: 90px; }
}

.problem-rail-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin: 6px 0 0 10px;
  position: relative;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 380ms ease 1100ms, transform 380ms cubic-bezier(0.22,0.61,0.36,1) 1100ms;
}
.problem-block.is-in .problem-rail-dot { opacity: 1; transform: scale(1); }
.problem-rail-dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: rgb(var(--accent-rgb) / 0.35);
  opacity: 0;
  pointer-events: none;
}
.problem-block.is-in .problem-rail-dot::after {
  animation: problem-pulse 2.6s ease-out infinite 1500ms;
}
@keyframes problem-pulse {
  0% { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0; }
}

.problem-title {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.028em;
  color: var(--ink);
  max-width: 780px;
}

.problem-text {
  margin-top: 1.125rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  max-width: 700px;
}
@media (min-width: 768px) {
  .problem-text { font-size: 1.1875rem; margin-top: 1.25rem; }
}

/* =========================================================
   §4.5 — Services + Data Trust
   Pillar 1 (primary card) + warm-clay data trust block + Pillar 2 (quiet roadmap)
   ========================================================= */
.services-section {
  padding-top: 120px;
  padding-bottom: 140px;
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .services-section { padding-top: 160px; padding-bottom: 180px; }
}

/* ---- Shared pillar tag ---- */
.pillar-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 7px;
  line-height: 1;
}
.pillar-tag-accent {
  color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.08);
  border: 1px solid rgb(var(--accent-rgb) / 0.22);
}
.pillar-tag-quiet {
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line-strong);
  text-transform: uppercase;
}
.quiet-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-softer);
  box-shadow: 0 0 0 3px rgb(123 114 104 / 0.12);
}

/* ---- Pillar 1 primary card ---- */
.pillar {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  position: relative;
  box-shadow: 0 1px 2px rgba(15,12,10,0.04), 0 14px 40px rgba(15,12,10,0.04);
  transition: transform 280ms cubic-bezier(0.22,0.61,0.36,1), box-shadow 280ms ease;
}

.pillar-primary { margin-top: 80px; padding: 40px 28px; }
@media (min-width: 768px) {
  .pillar-primary { margin-top: 110px; padding: 64px 56px; }
}
@media (min-width: 1024px) {
  .pillar-primary { padding: 72px 64px; }
}

.pillar-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .pillar-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
  }
}

.pillar-content { min-width: 0; }
.pillar-title {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.032em;
  color: var(--ink);
  margin-top: 1rem;
}
.pillar-title-md {
  font-weight: 700;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.pillar-body {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  margin-top: 1.25rem;
  max-width: 600px;
}
@media (min-width: 768px) {
  .pillar-body { font-size: 1.125rem; }
}
.pillar-body-sm { font-size: 1rem; }
@media (min-width: 768px) { .pillar-body-sm { font-size: 1.0625rem; } }

.pillar-cta { margin-top: 2rem; }

/* ---- Mini cycling Map / Build / Run ---- */
.pillar-visual { min-width: 0; }

.mini-flow {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  position: relative;
}
.mini-flow::before {
  /* subtle vertical thread between steps */
  content: '';
  position: absolute;
  top: 56px; bottom: 56px; left: 38px;
  width: 1px;
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.35) 0%, rgb(var(--accent-rgb) / 0.10) 100%);
}

.mini-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  transition: background 320ms ease;
  position: relative;
}
.mini-step.is-active {
  background: rgb(var(--accent-rgb) / 0.06);
}

.mini-step-num {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-softer);
  background: var(--card);
  border: 1px solid var(--line);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}
.mini-step.is-active .mini-step-num {
  color: var(--accent);
  border-color: rgb(var(--accent-rgb) / 0.4);
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.10);
}

.mini-step-body { min-width: 0; }
.mini-step-label {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.mini-step-sub {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-top: 2px;
  letter-spacing: -0.005em;
}

/* ---- Data Trust block — warm clay accent ---- */
.data-trust {
  margin-top: 40px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warm);
  border-radius: 20px;
  padding: 28px 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  position: relative;
  box-shadow: 0 1px 2px rgba(15,12,10,0.04), 0 10px 28px rgba(15,12,10,0.035);
}
@media (min-width: 768px) {
  .data-trust {
    grid-template-columns: 56px 1fr;
    padding: 40px 44px;
    margin-top: 48px;
    gap: 28px;
    align-items: start;
  }
}

.data-trust-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgb(var(--warm-rgb) / 0.10);
  border: 1px solid rgb(var(--warm-rgb) / 0.30);
  color: var(--warm-press);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.data-trust-tag {
  display: inline-block;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--warm-press);
}

.data-trust-title {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin-top: 0.625rem;
}

.data-trust-body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  margin-top: 0.875rem;
  max-width: 760px;
}
@media (min-width: 768px) { .data-trust-body { font-size: 1.0625rem; } }

/* ---- Pillar 2 quiet roadmap card ---- */
.pillar-roadmap {
  margin-top: 40px;
  padding: 32px 28px;
  background: var(--bg-alt);
  border: 1px dashed var(--line-strong);
  box-shadow: none;
}
@media (min-width: 768px) {
  .pillar-roadmap { padding: 44px 48px; margin-top: 48px; }
}

.pillar-roadmap-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .pillar-roadmap-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 48px;
    align-items: end;
  }
}

.pillar-roadmap-side {
  display: flex;
  justify-content: flex-start;
}
@media (min-width: 900px) { .pillar-roadmap-side { justify-content: flex-end; } }

.soft-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-bottom: 1px solid rgb(var(--accent-rgb) / 0.3);
  padding-bottom: 2px;
  transition: color 180ms ease, border-color 180ms ease, gap 200ms ease;
}
.soft-link:hover {
  color: var(--accent-press);
  border-color: var(--accent);
  gap: 0.6rem;
}
.soft-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

/* =========================================================
   §4.6 — How it works (Map · Build · Run)
   Three numbered rows, generous spacing, detail strips,
   closing CTA.
   ========================================================= */
.how-section {
  background: var(--bg-alt);
  padding-top: 120px;
  padding-bottom: 140px;
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) {
  .how-section { padding-top: 160px; padding-bottom: 180px; }
}

.how-steps {
  list-style: none;
  margin: 80px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
@media (min-width: 768px) {
  .how-steps { margin-top: 110px; gap: 72px; }
}

.how-step {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 20px;
  align-items: start;
}
@media (min-width: 768px) {
  .how-step {
    grid-template-columns: 140px 1fr;
    gap: 56px;
  }
}

.how-num-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 4px;
}

.how-num {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 4.8vw, 3.75rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--accent);
  /* Subtle gradient text — gives the number a quiet depth */
  background: linear-gradient(135deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-rgb) / 0.7) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.how-num-line {
  display: block;
  width: 1px;
  height: 100%;
  min-height: 80px;
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.35) 0%, rgb(var(--accent-rgb) / 0) 100%);
  margin: 18px 0 0 18px;
  flex: 1;
}
@media (min-width: 768px) {
  .how-num-line { margin: 22px 0 0 22px; }
}

.how-body { min-width: 0; }

.how-title {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 2.8vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.how-text {
  margin-top: 1rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  max-width: 720px;
}
@media (min-width: 768px) { .how-text { font-size: 1.125rem; } }

/* Details strip — labeled facts inline */
.how-details {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin: 1.75rem 0 0;
  padding: 1rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  max-width: 760px;
}
.how-details li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0 1rem;
  border-right: 1px solid var(--line);
  flex: 0 1 auto;
  min-height: 1.25rem;
}
.how-details li:first-child { padding-left: 0; }
.how-details li:last-child { border-right: 0; padding-right: 0; }

.how-detail-label {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-softer);
}
.how-detail-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}

@media (max-width: 767px) {
  .how-details { flex-direction: column; padding: 0.75rem 1rem; }
  .how-details li {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0.5rem 0;
    width: 100%;
    justify-content: space-between;
  }
  .how-details li:last-child { border-bottom: 0; }
}

/* Closing line + CTA */
.how-close {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .how-close {
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
    margin-top: 100px;
  }
}
.how-close-text {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* =========================================================
   §4.7 — Proof (Biodanza, honest)
   ========================================================= */
.proof-section {
  background: var(--bg);
  padding-top: 120px;
  padding-bottom: 140px;
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .proof-section { padding-top: 160px; padding-bottom: 180px; }
}

/* ---- Project card ---- */
.proof-card {
  margin-top: 80px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px 24px;
  box-shadow: 0 1px 2px rgba(15,12,10,0.04), 0 14px 40px rgba(15,12,10,0.045);
}
@media (min-width: 768px) {
  .proof-card { padding: 48px 52px; margin-top: 110px; }
}

.proof-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.proof-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.08);
  border: 1px solid rgb(var(--accent-rgb) / 0.22);
  padding: 6px 12px 6px 9px;
  border-radius: 999px;
}
.proof-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
  flex-shrink: 0;
}
.proof-status-dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: rgb(var(--accent-rgb) / 0.35);
  animation: proof-status-pulse 2.2s ease-out infinite;
  pointer-events: none;
}
.proof-status-year {
  opacity: 0.7;
  font-weight: 500;
}
@keyframes proof-status-pulse {
  0% { transform: scale(0.6); opacity: 0.85; }
  100% { transform: scale(2.6); opacity: 0; }
}

.proof-project {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
@media (min-width: 768px) { .proof-project { text-align: right; } }

.proof-project-name {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.proof-project-meta {
  font-size: 0.75rem;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}

/* ---- Progress timeline ---- */
.proof-progress {
  list-style: none;
  margin: 28px 0 0;
  padding: 18px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 900px) {
  .proof-progress {
    flex-direction: row;
    padding: 22px 28px;
    gap: 0;
    align-items: stretch;
  }
}

.proof-stage {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  position: relative;
}
@media (min-width: 900px) {
  .proof-stage { padding-right: 32px; }
  .proof-stage::after {
    content: '';
    position: absolute;
    top: 11px;
    right: 8px;
    width: 16px;
    height: 1px;
    background: var(--line-strong);
  }
  .proof-stage:last-child {
    padding-right: 0;
  }
  .proof-stage:last-child::after { display: none; }
}

.proof-stage-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--card);
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
}

.proof-stage-done .proof-stage-mark {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.proof-stage-active .proof-stage-mark {
  background: var(--card);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.10);
}
.proof-stage-active .proof-stage-mark::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  animation: proof-active-pulse 1.8s ease-in-out infinite;
}
@keyframes proof-active-pulse {
  0%, 100% { transform: scale(0.6); opacity: 0.55; }
  50%      { transform: scale(1);   opacity: 1; }
}

.proof-stage-pending .proof-stage-mark { border-style: dashed; }

.proof-stage-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.proof-stage-name {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.proof-stage-pending .proof-stage-name { color: var(--ink-softer); }

.proof-stage-sub {
  font-size: 0.75rem;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}

/* ---- Body + goal ---- */
.proof-body { margin-top: 32px; }
@media (min-width: 768px) { .proof-body { margin-top: 40px; } }

.proof-text {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 760px;
  letter-spacing: -0.005em;
}
@media (min-width: 768px) { .proof-text { font-size: 1.125rem; } }

.proof-goal {
  margin-top: 28px;
  padding: 20px 24px;
  background: rgb(var(--accent-rgb) / 0.05);
  border: 1px solid rgb(var(--accent-rgb) / 0.18);
  border-radius: 14px;
}
.proof-goal-tag {
  display: inline-block;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.625rem;
}
.proof-goal-text {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: -0.012em;
  font-weight: 500;
  max-width: 720px;
}
@media (min-width: 768px) { .proof-goal-text { font-size: 1.0625rem; } }
.proof-goal-meta {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}

/* ---- Marcel manifesto quote ---- */
.proof-quote {
  margin: 64px auto 0;
  max-width: 880px;
  padding: 0 8px;
  text-align: left;
  position: relative;
}
@media (min-width: 768px) { .proof-quote { margin-top: 80px; padding: 0 16px; } }

.proof-quote-mark {
  position: absolute;
  top: -32px;
  left: -8px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 7rem;
  line-height: 1;
  color: rgb(var(--accent-rgb) / 0.18);
  pointer-events: none;
}
@media (min-width: 768px) {
  .proof-quote-mark { top: -40px; left: -10px; font-size: 9rem; }
}

.proof-quote-text {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.proof-quote-emph {
  font-style: italic;
  color: var(--accent-press);
}

.proof-quote-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
}
.proof-quote-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.proof-quote-author strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.proof-quote-role {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ---- Founding-client invitation ---- */
.founding-card {
  margin-top: 56px;
  padding: 36px 28px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .founding-card { padding: 56px 56px; margin-top: 72px; }
}

/* Subtle ambient wash inside the dark founding card */
.founding-card::before {
  content: '';
  position: absolute;
  width: 520px; height: 520px;
  top: -260px; right: -120px;
  background: radial-gradient(circle, rgb(var(--accent-rgb) / 0.30) 0%, rgb(var(--accent-rgb) / 0) 60%);
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}
.founding-card > * { position: relative; z-index: 1; }

.founding-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--accent-rgb) / 0.95);
  align-self: flex-start;
}
.founding-tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.22);
}

.founding-title {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.032em;
  color: var(--bg);
}

.founding-text {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(250, 246, 236, 0.78);
  max-width: 760px;
  letter-spacing: -0.005em;
}
@media (min-width: 768px) { .founding-text { font-size: 1.125rem; } }
/* On dark bg, copy-mark renders too dark by default (uses --ink). Lift it. */
.founding-card .copy-mark { color: var(--bg); }

/* CTA on dark bg — switch primary button to white-on-dark */
.founding-cta {
  background: var(--bg);
  color: var(--ink);
  margin-top: 8px;
  align-self: flex-start;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}
.founding-cta:hover {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 12px 28px rgba(0,0,0,0.16);
}

/* =========================================================
   §4.8 — Our promise
   ========================================================= */
.promise-section {
  background: var(--bg-alt);
  padding-top: 120px;
  padding-bottom: 140px;
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) {
  .promise-section { padding-top: 160px; padding-bottom: 180px; }
}

.promise-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.promise-seal {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
  color: var(--accent);
  box-shadow: 0 1px 2px rgba(15,12,10,0.05), 0 8px 24px rgb(var(--accent-rgb) / 0.10);
}
.promise-seal-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgb(var(--accent-rgb) / 0.30);
  pointer-events: none;
  animation: promise-pulse 3s ease-out infinite;
}
@keyframes promise-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

.section-eyebrow.justify-center,
.promise-inner .section-eyebrow {
  justify-content: center;
}

.promise-text {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) { .promise-text { font-size: 1.1875rem; } }

.promise-signature {
  margin-top: 2.5rem;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.0625rem;
  color: var(--ink);
  letter-spacing: -0.015em;
}

/* =========================================================
   §4.9 — About (two humans)
   Warm clay finally appears on the second person.
   ========================================================= */
.about-section {
  background: var(--bg);
  padding-top: 120px;
  padding-bottom: 140px;
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .about-section { padding-top: 160px; padding-bottom: 180px; }
}

.about-grid {
  margin-top: 80px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    margin-top: 110px;
  }
}

.about-person {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 600px) {
  .about-person {
    grid-template-columns: 180px 1fr;
    gap: 32px;
    align-items: start;
  }
}

.about-photo {
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  background: linear-gradient(140deg, rgb(var(--accent-rgb) / 0.10) 0%, rgb(var(--accent-rgb) / 0.04) 100%);
  border: 1px solid rgb(var(--accent-rgb) / 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.about-photo-warm {
  background: linear-gradient(140deg, rgb(var(--warm-rgb) / 0.12) 0%, rgb(var(--warm-rgb) / 0.05) 100%);
  border-color: rgb(var(--warm-rgb) / 0.30);
}

.about-photo-initial {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 5.5rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgb(var(--accent-rgb) / 0.6);
}
.about-photo-warm .about-photo-initial {
  color: rgb(var(--warm-rgb) / 0.7);
}

.about-photo-tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-softer);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 3px 7px;
  border-radius: 5px;
  line-height: 1;
}

.about-person-body { min-width: 0; }

.about-name-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-wrap: wrap;
}

.about-name {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.about-langs {
  display: inline-flex;
  gap: 4px;
}
.about-lang {
  display: inline-block;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--warm-press);
  background: rgb(var(--warm-rgb) / 0.10);
  border: 1px solid rgb(var(--warm-rgb) / 0.30);
  padding: 3px 7px;
  border-radius: 5px;
  line-height: 1;
}

.about-bio {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  max-width: 460px;
}
@media (min-width: 768px) { .about-bio { font-size: 1.0625rem; } }

/* Joint quote */
.about-quote {
  margin: 80px auto 0;
  max-width: 880px;
  padding: 40px 24px 0;
  text-align: center;
  position: relative;
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) {
  .about-quote { margin-top: 110px; padding: 56px 16px 0; }
}

.about-quote-mark {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 3.5rem;
  line-height: 1;
  color: rgb(var(--warm-rgb) / 0.5);
  pointer-events: none;
}

.about-quote-text {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.4vw, 1.875rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.about-quote-emph {
  color: var(--warm-press);
  font-style: italic;
}

.about-quote-author {
  margin-top: 20px;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}

/* =========================================================
   §4.10 — Free audit offer
   Standout block — soft gradient wash, most "designed" moment.
   ========================================================= */
.audit-section {
  background: var(--bg-alt);
  padding-top: 100px;
  padding-bottom: 120px;
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) {
  .audit-section { padding-top: 140px; padding-bottom: 160px; }
}

.audit-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 40px 28px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(15,12,10,0.04), 0 24px 56px rgba(15,12,10,0.06);
}
@media (min-width: 768px) {
  .audit-card { padding: 64px 64px 56px; }
}

.audit-wash {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
}
.audit-wash-purple {
  width: 540px; height: 540px;
  top: -240px; left: -140px;
  background: radial-gradient(circle, rgb(var(--accent-rgb) / 0.16) 0%, rgb(var(--accent-rgb) / 0) 60%);
}
.audit-wash-warm {
  width: 480px; height: 480px;
  bottom: -200px; right: -120px;
  background: radial-gradient(circle, rgb(var(--warm-rgb) / 0.14) 0%, rgb(var(--warm-rgb) / 0) 60%);
}
.audit-card > *:not(.audit-wash) { position: relative; z-index: 1; }

.audit-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

.audit-h2 {
  margin-top: 1rem;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.audit-list {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 24px;
}
@media (min-width: 700px) {
  .audit-list { grid-template-columns: 1fr 1fr; gap: 16px 36px; }
}

.audit-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}
@media (min-width: 768px) { .audit-list li { font-size: 1rem; } }
.audit-list li strong { color: var(--ink); font-weight: 600; }

.audit-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  margin-top: 1px;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.12);
}

.audit-reframe {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: -0.012em;
  font-weight: 500;
  max-width: 720px;
}
@media (min-width: 768px) { .audit-reframe { font-size: 1.1875rem; } }

.audit-cta { margin-top: 2rem; }

/* =========================================================
   §4.11 — Not ready? Lead-magnet band
   ========================================================= */
.lead-section {
  background: var(--bg);
  padding-top: 80px;
  padding-bottom: 80px;
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .lead-section { padding-top: 100px; padding-bottom: 100px; }
}

.lead-band {
  background: var(--ink);
  color: var(--bg);
  border-radius: 24px;
  padding: 36px 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 900px) {
  .lead-band {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    padding: 48px 56px;
    align-items: center;
  }
}

.lead-band::before {
  content: '';
  position: absolute;
  width: 460px; height: 460px;
  top: -200px; left: -80px;
  background: radial-gradient(circle, rgb(var(--accent-rgb) / 0.22) 0%, rgb(var(--accent-rgb) / 0) 60%);
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}
.lead-band > * { position: relative; z-index: 1; }

.lead-band .section-eyebrow {
  color: rgba(250, 246, 236, 0.65);
}
.lead-band .eyebrow-line {
  background: var(--accent);
}

.lead-band-title {
  margin-top: 0.75rem;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--bg);
}

.lead-band-body {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(250, 246, 236, 0.72);
  max-width: 460px;
  letter-spacing: -0.005em;
}
@media (min-width: 768px) { .lead-band-body { font-size: 1.0625rem; } }
.lead-band .copy-mark { color: var(--bg); }

.lead-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lead-field { display: flex; flex-direction: column; gap: 6px; }

.lead-label {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(250, 246, 236, 0.5);
}

/* Tally embed wrapper — cream card on the dark teal lead-band */
.lead-form-tally {
  background: var(--bg);
  border-radius: 16px;
  padding: 18px;
  border: 1px solid rgba(250, 246, 236, 0.14);
  box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 16px 40px rgba(0,0,0,0.18);
}
.lead-form-tally iframe {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  min-height: 240px;
}
.lead-form-tally .lead-note {
  margin-top: 14px;
  padding: 0 4px;
  color: var(--ink-softer);
}

.lead-input {
  /* Light cream field on the dark teal band — gives the typed text
     real contrast so it stays legible from first keystroke. */
  background: var(--bg);
  border: 1px solid rgba(250, 246, 236, 0.22);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--ink-soft);                /* dark gray-teal typed text */
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  caret-color: var(--accent-press);
  transition: border-color 180ms ease, background 180ms ease;
}
.lead-input::placeholder { color: var(--ink-softer); }     /* readable gray placeholder */
.lead-input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink-soft);
  -webkit-box-shadow: 0 0 0 30px var(--bg) inset;
  caret-color: var(--accent-press);
}
.lead-input:focus {
  outline: none;
  background: var(--card);               /* white on focus — even more contrast */
  border-color: var(--accent);
  color: var(--ink);                     /* near-black on focus */
}

.lead-submit {
  margin-top: 8px;
  align-self: flex-start;
  background: var(--bg);
  color: var(--ink);
}
.lead-submit:hover {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 12px 28px rgba(0,0,0,0.18);
}

.lead-note {
  font-size: 0.75rem;
  color: rgba(250, 246, 236, 0.45);
  letter-spacing: -0.005em;
}
.lead-note em { font-style: italic; opacity: 0.7; }

/* =========================================================
   §4.12 — FAQ
   Custom accordion with smooth height animation.
   ========================================================= */
.faq-section {
  background: var(--bg-alt);
  padding-top: 100px;
  padding-bottom: 120px;
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) {
  .faq-section { padding-top: 140px; padding-bottom: 160px; }
}

.faq-list {
  list-style: none;
  margin: 64px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 880px;
}
@media (min-width: 768px) { .faq-list { margin-top: 96px; } }

.faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 200ms ease;
}
.faq-item:hover { border-color: var(--line-strong); }
.faq-item.is-open {
  border-color: rgb(var(--accent-rgb) / 0.30);
  background: var(--card);
  box-shadow: 0 1px 2px rgba(15,12,10,0.04), 0 8px 24px rgba(15,12,10,0.04);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  cursor: pointer;
  transition: color 180ms ease;
}
@media (min-width: 768px) { .faq-q { font-size: 1.0625rem; padding: 22px 24px; } }
.faq-q:hover { color: var(--accent-press); }
.faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.faq-chev {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  flex-shrink: 0;
  transition: background 200ms ease, border-color 200ms ease, transform 280ms cubic-bezier(0.22,0.61,0.36,1);
}
.faq-chev::before,
.faq-chev::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 9px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 280ms cubic-bezier(0.22,0.61,0.36,1), background 200ms ease;
}
.faq-chev::before { transform: translate(-50%, -50%) rotate(0deg); }
.faq-chev::after  { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.is-open .faq-chev {
  background: var(--accent);
  border-color: var(--accent);
}
.faq-item.is-open .faq-chev::before,
.faq-item.is-open .faq-chev::after { background: var(--ink); }
.faq-item.is-open .faq-chev::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq-a {
  overflow: hidden;
  transition: max-height 360ms cubic-bezier(0.22,0.61,0.36,1), opacity 260ms ease;
  max-height: 0;
  opacity: 0;
}
.faq-item.is-open .faq-a { opacity: 1; }
.faq-a p {
  padding: 0 22px 22px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  max-width: 720px;
}
@media (min-width: 768px) {
  .faq-a p { padding: 0 24px 24px; font-size: 1rem; }
}

/* =========================================================
   §4.13 — Final CTA
   Soft gradient wash, calm confident closing moment.
   ========================================================= */
.final-cta {
  background: var(--bg);
  padding-top: 120px;
  padding-bottom: 140px;
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) {
  .final-cta { padding-top: 160px; padding-bottom: 180px; }
}

.final-cta-wash {
  position: absolute;
  width: 920px; height: 920px;
  top: -380px; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgb(var(--accent-rgb) / 0.18) 0%, rgb(var(--accent-rgb) / 0) 60%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.final-cta-wash-2 {
  position: absolute;
  width: 720px; height: 720px;
  bottom: -300px; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgb(var(--warm-rgb) / 0.12) 0%, rgb(var(--warm-rgb) / 0) 60%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.final-cta-inner { max-width: 820px; margin: 0 auto; }

.final-cta-eyebrow { justify-content: center; }

.final-cta-h2 {
  margin-top: 1.5rem;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.25rem, 5.6vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.038em;
  color: var(--ink);
}

.final-cta-body {
  margin: 1.75rem auto 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 600px;
  letter-spacing: -0.005em;
}
@media (min-width: 768px) { .final-cta-body { font-size: 1.1875rem; } }

.final-cta-btn { margin-top: 2.5rem; }

.final-cta-micro {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  color: var(--ink-softer);
  letter-spacing: 0.01em;
}

/* =========================================================
   §4.14 — Footer
   ========================================================= */
.site-footer {
  background: var(--ink);
  color: var(--bg);
  padding: 56px 0 32px;
  position: relative;
  z-index: 3;
}

.footer-top {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(250, 246, 236, 0.10);
}
@media (min-width: 768px) {
  .footer-top { flex-direction: row; justify-content: space-between; align-items: center; }
}

.footer-logo {
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 280ms cubic-bezier(0.22,0.61,0.36,1);
}
.footer-logo:hover { transform: translateY(-1px); }
.footer-logo .text-accent { color: var(--accent); }
.footer-logo-mark {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(96%) sepia(7%) saturate(390%) hue-rotate(7deg) brightness(102%) contrast(94%);
  transition: filter 240ms ease, transform 600ms cubic-bezier(0.22,0.61,0.36,1);
}
.footer-logo:hover .footer-logo-mark {
  transform: rotate(180deg);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.footer-nav a {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(250, 246, 236, 0.7);
  letter-spacing: -0.005em;
  transition: color 180ms ease;
}
.footer-nav a:hover { color: var(--bg); }

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 24px;
}
@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 768px) {
  .footer-meta { flex-direction: row; align-items: center; gap: 20px; }
}

.footer-tagline {
  font-size: 0.8125rem;
  color: rgba(250, 246, 236, 0.55);
  letter-spacing: -0.005em;
}

.footer-email {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bg);
  border-bottom: 1px solid rgba(250, 246, 236, 0.30);
  padding-bottom: 1px;
  transition: border-color 180ms ease;
}
.footer-email:hover { border-color: var(--accent); }

.footer-copy {
  font-size: 0.75rem;
  color: rgba(250, 246, 236, 0.45);
  letter-spacing: 0.005em;
}

/* =========================================================
   Scroll progress bar (Linear/Stripe pattern)
   ========================================================= */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
  background: transparent;
}
.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent) 0%, rgb(var(--warm-rgb)) 100%);
  transition: width 80ms linear;
  box-shadow: 0 0 12px rgb(var(--accent-rgb) / 0.4);
}

/* =========================================================
   Hero H1 word-by-word stagger reveal
   ========================================================= */
.hero-h1-stagger { display: block; }
.h1-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}
.h1-word {
  display: inline-block;
  margin-right: 0.25em;
  opacity: 0;
  transform: translateY(0.9em);
  animation: word-rise 720ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(var(--reveal-delay, 0ms) + var(--word-i, 0) * 70ms);
}
.h1-line:nth-child(1) .h1-word:nth-child(1) { --word-i: 0; }
.h1-line:nth-child(1) .h1-word:nth-child(2) { --word-i: 1; }
.h1-line:nth-child(1) .h1-word:nth-child(3) { --word-i: 2; }
.h1-line:nth-child(1) .h1-word:nth-child(4) { --word-i: 3; }
.h1-line:nth-child(2) .h1-word:nth-child(1) { --word-i: 4; }
.h1-line:nth-child(2) .h1-word:nth-child(2) { --word-i: 5; }
.h1-line:nth-child(2) .h1-word:nth-child(3) { --word-i: 6; }
.h1-line:nth-child(2) .h1-word:nth-child(4) { --word-i: 7; }

@keyframes word-rise {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .h1-word { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* =========================================================
   §4.4b — Horizontal scroll-pinned story
   ========================================================= */
.story-wrapper {
  position: relative;
  height: 600vh;   /* 6 scenes × 100vh of scroll */
  background: var(--bg);
}

.story-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.story-header {
  position: relative;
  z-index: 3;
  padding: 90px 24px 0;
  max-width: var(--content, 1140px);
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .story-header { padding: 110px 40px 0; }
}

.story-eyebrow { justify-content: flex-start; }

.story-titlewrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.story-title {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.032em;
  color: var(--ink);
  max-width: 720px;
}
.story-title-soft {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
}

.story-time-tracker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  box-shadow: 0 1px 2px rgba(15,12,10,0.03);
}
.story-time-icon {
  display: inline-flex;
  color: var(--accent);
}
.story-time-label {
  font-weight: 500;
}
.story-time-value {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.story-progress {
  position: relative;
  margin-top: 32px;
  height: 4px;
}
.story-progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--accent) 0%, rgb(var(--accent-rgb) / 0.7) 100%);
  border-radius: 2px;
  transition: width 90ms linear;
}
.story-progress::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--line);
  border-radius: 2px;
}
.story-progress-fill { z-index: 1; }

.story-progress-dots {
  position: absolute;
  inset: -3px 0 -3px 0;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}
.story-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--line-strong);
  transition: background 280ms ease, border-color 280ms ease, transform 280ms cubic-bezier(0.22,0.61,0.36,1);
}
.story-dot.is-passed,
.story-dot.is-active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.15);
}
.story-dot-final.is-active {
  background: var(--ink);
  border-color: var(--ink);
}

/* Horizontal track */
.story-track {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  height: 100%;
  /* total = 6 * 100vw. translate by -500vw at progress=1 to land on last scene */
  transform: translate3d(calc(var(--story-progress, 0) * -500vw), 0, 0);
  transition: transform 30ms linear;
  will-change: transform;
}

.story-scene {
  flex: 0 0 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}
@media (min-width: 768px) {
  .story-scene { padding: 0 40px; }
}

.scene-stage {
  width: 100%;
  max-width: 1140px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .scene-stage {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 72px;
  }
}

.scene-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 600ms ease 100ms, transform 700ms cubic-bezier(0.22,0.61,0.36,1) 100ms;
}
.story-scene.is-active .scene-visual {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.scene-text {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 540ms ease 220ms, transform 600ms cubic-bezier(0.22,0.61,0.36,1) 220ms;
}
.story-scene.is-active .scene-text {
  opacity: 1;
  transform: translateY(0);
}

.scene-num {
  display: inline-block;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.08);
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}
.scene-time {
  display: inline-block;
  margin-left: 10px;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.scene-time-delta { color: var(--warm-press); font-weight: 600; }

.scene-headline {
  margin-top: 1.25rem;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.032em;
  color: var(--ink);
  max-width: 520px;
}

.scene-body {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  max-width: 480px;
}
@media (min-width: 768px) { .scene-body { font-size: 1.0625rem; } }

/* Scroll hint */
.story-scroll-hint {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-softer);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
  z-index: 3;
}
.story-scroll-hint .story-scroll-arrow {
  display: inline-block;
  animation: scroll-hint-bob 1.6s ease-in-out infinite;
  font-weight: 400;
}
@keyframes scroll-hint-bob {
  0%,100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(4px); opacity: 1; }
}

/* ===== Mock UI cards inside scenes ===== */
.ui-email, .ui-compose, .ui-calendar, .ui-form, .ui-crm {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 22px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 1px 2px rgba(15,12,10,0.04), 0 18px 50px rgba(15,12,10,0.08);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  position: relative;
}

/* Avatar circle */
.ui-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

/* Generic pills */
.ui-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 6px;
  line-height: 1;
}
.ui-pill-quiet {
  background: var(--bg-alt);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.ui-pill-accent {
  background: rgb(var(--accent-rgb) / 0.10);
  color: var(--accent-press);
  border: 1px solid rgb(var(--accent-rgb) / 0.30);
}
.ui-badge {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
}
.ui-badge-new {
  background: rgb(var(--accent-rgb) / 0.10);
  color: var(--accent-press);
  border: 1px solid rgb(var(--accent-rgb) / 0.30);
}

/* Email card */
.ui-email-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.ui-email-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.ui-email-from { font-weight: 700; font-size: 0.875rem; color: var(--ink); letter-spacing: -0.01em; }
.ui-email-time { font-size: 0.75rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ui-email-subject {
  margin-top: 14px;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.ui-email-preview {
  margin-top: 8px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}
.ui-email-actions {
  margin-top: 14px;
  display: flex;
  gap: 6px;
}

/* Compose draft */
.ui-compose-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.ui-compose-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-softer);
}
.ui-compose-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--warm-press);
  font-variant-numeric: tabular-nums;
}
.ui-compose-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--warm);
  position: relative;
}
.ui-compose-dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: rgb(var(--warm-rgb) / 0.35);
  animation: scene-pulse 1.6s ease-out infinite;
}
@keyframes scene-pulse {
  0% { transform: scale(0.7); opacity: 0.7; }
  100% { transform: scale(2.4); opacity: 0; }
}

.ui-compose-field {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.ui-compose-key {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-softer);
  width: 56px;
}
.ui-compose-body {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--ink);
  line-height: 1.55;
  letter-spacing: -0.005em;
}
.ui-compose-body p { margin: 0 0 8px; }
.ui-compose-body p:last-child { margin-bottom: 0; }
.ui-cursor {
  display: inline-block;
  width: 1px;
  height: 0.95em;
  background: var(--ink);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cursor-blink 1s steps(2) infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }

/* Calendar */
.ui-calendar-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.ui-calendar-month {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.ui-calendar-year { font-size: 0.875rem; color: var(--ink-soft); }
.ui-calendar-event {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
}
.ui-calendar-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 0;
}
.ui-calendar-day {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-softer);
}
.ui-calendar-num {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.ui-calendar-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-calendar-title { font-weight: 700; font-size: 0.875rem; color: var(--ink); letter-spacing: -0.01em; }
.ui-calendar-detail { font-size: 0.75rem; color: var(--ink-soft); }
.ui-calendar-meta { font-size: 0.75rem; color: var(--ink-softer); padding-top: 10px; border-top: 1px solid var(--line); }

/* Form */
.ui-form-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.ui-form-title { font-weight: 700; font-size: 0.9375rem; color: var(--ink); letter-spacing: -0.015em; }
.ui-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.ui-form-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-softer);
}
.ui-form-line {
  height: 12px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.ui-form-line-tall { height: 32px; }
.ui-form-foot { margin-top: 14px; display: flex; gap: 6px; }

/* CRM */
.ui-crm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.ui-crm-title { font-weight: 700; font-size: 0.9375rem; color: var(--ink); letter-spacing: -0.015em; }
.ui-crm-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
}
.ui-crm-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ui-crm-name { font-weight: 700; font-size: 0.875rem; color: var(--ink); letter-spacing: -0.01em; }
.ui-crm-meta { font-size: 0.75rem; color: var(--ink-soft); }
.ui-status-flip {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 90px;
  height: 22px;
  overflow: hidden;
}
.ui-status-from,
.ui-status-to {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 6px;
  padding: 0 8px;
  transition: transform 600ms cubic-bezier(0.22,0.61,0.36,1);
}
.ui-status-from {
  background: var(--bg-alt);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.ui-status-to {
  background: rgb(var(--accent-rgb) / 0.12);
  color: var(--accent-press);
  border: 1px solid rgb(var(--accent-rgb) / 0.30);
}
.story-scene.is-active .ui-status-from { transform: translateY(-26px); }
.story-scene.is-active .ui-status-to   { transform: translateY(-26px); }
.ui-crm-foot { display: flex; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ===== Final reveal scene (dark) ===== */
.story-scene-reveal { background: var(--ink); color: var(--bg); }
.story-scene-reveal .scene-stage {
  grid-template-columns: 1fr;
  text-align: center;
  position: relative;
}
.story-scene-reveal::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgb(var(--accent-rgb) / 0.18) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgb(var(--warm-rgb) / 0.15) 0%, transparent 50%);
  pointer-events: none;
}
.scene-reveal-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.reveal-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
}
.reveal-num {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(5rem, 12vw, 10rem);
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--bg);
  background: linear-gradient(180deg, var(--bg) 0%, rgba(250,246,236,0.4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.reveal-unit {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--accent);
  letter-spacing: -0.02em;
}
.reveal-headline {
  margin: 0;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--bg);
}
.reveal-emph {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.reveal-headline-soft {
  display: block;
  color: rgba(250, 246, 236, 0.65);
  font-weight: 400;
  margin-top: 0.25rem;
}
.reveal-question {
  margin: 8px 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  color: rgba(250, 246, 236, 0.85);
  letter-spacing: -0.02em;
}
.reveal-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 16px;
  padding: 12px 22px;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 12px;
  transition: background 180ms ease, transform 200ms cubic-bezier(0.22,0.61,0.36,1), box-shadow 200ms ease;
}
.reveal-link:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 14px 32px rgba(0,0,0,0.20);
}

/* ===== Mobile / reduced-motion fallback ===== */
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .story-wrapper { height: auto; }
  .story-pin {
    position: static;
    height: auto;
    overflow: visible;
    padding-bottom: 80px;
  }
  .story-header { padding-top: 80px; }
  .story-track {
    flex-direction: column;
    transform: none !important;
    margin-top: 48px;
  }
  .story-scene {
    flex: 0 0 auto;
    width: 100%;
    padding: 56px 24px;
    border-top: 1px solid var(--line);
  }
  .story-scene:first-of-type { border-top: 0; }
  .scene-visual,
  .scene-text { opacity: 1; transform: none; }
  .story-scroll-hint { display: none; }
  .story-progress { display: none; }
}

/* =========================================================
   Hover lifts — give the cards a bit more life
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  .pillar-primary,
  .data-trust,
  .proof-card,
  .faq-item,
  .audit-card {
    transition: transform 320ms cubic-bezier(0.22,0.61,0.36,1), box-shadow 320ms ease, border-color 220ms ease;
  }
  .pillar-primary:hover,
  .data-trust:hover,
  .proof-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(15,12,10,0.05), 0 22px 50px rgba(15,12,10,0.08);
  }
  .audit-card:hover {
    box-shadow: 0 3px 6px rgba(15,12,10,0.06), 0 28px 64px rgba(15,12,10,0.10);
  }
}

/* =========================================================
   Nav logo — infinity icon PNG + Nonstrain wordmark PNG.
   Both PNGs sit on square transparent canvases; we crop the
   wordmark with object-fit: cover so the surrounding white
   space doesn't make the logo lock-up feel loose.
   ========================================================= */
.nav-logo-mark {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: inline-block;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 240ms ease, width 240ms ease, height 240ms ease;
  will-change: transform;
  flex: 0 0 auto;
}
.nav-logo:hover .nav-logo-mark {
  transform: rotate(180deg) scale(1.04);
}

.nav-logo-word {
  display: inline-block;
  height: 30px;
  width: 132px;            /* ~4.4:1 — crops the square canvas down to the text band */
  object-fit: cover;
  object-position: center;
  flex: 0 0 auto;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1), height 240ms ease, width 240ms ease;
  margin-left: -6px;       /* tighten the gap because the wordmark image carries its own left padding */
}
.nav-logo:hover .nav-logo-word { transform: translateX(2px); }

/* Nav shrinks both marks proportionally on scroll */
.nav.is-scrolled .nav-logo-mark { width: 36px; height: 36px; }
.nav.is-scrolled .nav-logo-word { height: 26px; width: 116px; }

/* =========================================================
   ALIVE LAYER — supplementary motion polish
   These rules add subtle, accumulating life to the site:
   - floating hero washes
   - parallax-y drift on section washes
   - hover lifts on cards & list items
   - icon micro-motion on the trust strip
   - "breathing" on every accent ring
   - section-eyebrow line draws in
   - cycler-pulse expands wider
   - cursor-following sparkle inside primary card
   ========================================================= */

/* ---- Hero washes — slow continuous drift ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero-wash-blue {
    animation: wash-drift 14s ease-in-out infinite alternate;
  }
  .hero-wash-secondary {
    animation: wash-drift-2 18s ease-in-out infinite alternate;
  }
  @keyframes wash-drift {
    0%   { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
    100% { transform: translateX(-50%) translateY(-26px) scale(1.06); opacity: 0.85; }
  }
  @keyframes wash-drift-2 {
    0%   { transform: translateX(-50%) translateY(8px) scale(1.02); }
    100% { transform: translateX(-50%) translateY(-18px) scale(0.96); }
  }
}

/* ---- Trust strip — icons softly breathe (staggered) ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero-trust li .trust-icon {
    animation: trust-breathe 3.8s ease-in-out infinite;
  }
  .hero-trust li:nth-child(2) .trust-icon { animation-delay: 0.6s; }
  .hero-trust li:nth-child(3) .trust-icon { animation-delay: 1.2s; }
  @keyframes trust-breathe {
    0%, 100% { transform: translateY(0); opacity: 0.9; }
    50%      { transform: translateY(-1.5px); opacity: 1; }
  }
}

/* ---- Section eyebrow line — animated draw on reveal ---- */
.scroll-reveal .eyebrow-line {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(0.22,0.61,0.36,1) 120ms;
}
.scroll-reveal.is-in .eyebrow-line { transform: scaleX(1); }

/* ---- Flow steps — clickable feeling, lift on hover ---- */
@media (hover: hover) and (pointer: fine) {
  .flow-node {
    cursor: default;
  }
  .flow-step:hover .flow-node {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 1px 2px rgba(14,15,17,0.06), 0 0 0 6px rgb(var(--accent-rgb) / 0.12), 0 18px 36px rgba(14,15,17,0.10);
    border-color: rgb(var(--accent-rgb) / 0.5);
    color: var(--accent);
  }
  .flow-step:hover .flow-text {
    color: var(--ink);
  }
}

/* ---- How-steps numbers — gentle vertical drift on hover ---- */
@media (hover: hover) and (pointer: fine) {
  .how-num { transition: transform 600ms cubic-bezier(0.22,0.61,0.36,1), filter 400ms ease; }
  .how-step:hover .how-num {
    transform: translateY(-4px) scale(1.04);
    filter: drop-shadow(0 12px 24px rgb(var(--accent-rgb) / 0.25));
  }
}

/* ---- Mini-flow — pulsing dot on the active step ---- */
.mini-step.is-active .mini-step-num::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 14px;
  border: 1px solid rgb(var(--accent-rgb) / 0.35);
  animation: mini-ring 1.8s ease-out infinite;
  pointer-events: none;
}
.mini-step-num { position: relative; }
@keyframes mini-ring {
  0%   { transform: scale(0.85); opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* ---- Pillar primary card — subtle moving gradient on hover ---- */
.pillar-primary {
  position: relative;
  overflow: hidden;
}
.pillar-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px circle at var(--mx, 50%) var(--my, 0%),
    rgb(var(--accent-rgb) / 0.07) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
  z-index: 0;
}
.pillar-primary:hover::after { opacity: 1; }
.pillar-grid { position: relative; z-index: 1; }

/* ---- Audit check icons — pop in with stagger ---- */
.audit-list li {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 480ms ease, transform 520ms cubic-bezier(0.22,0.61,0.36,1);
}
.audit-card.is-in .audit-list li { opacity: 1; transform: translateX(0); }
.audit-card.is-in .audit-list li:nth-child(1) { transition-delay: 80ms; }
.audit-card.is-in .audit-list li:nth-child(2) { transition-delay: 160ms; }
.audit-card.is-in .audit-list li:nth-child(3) { transition-delay: 240ms; }
.audit-card.is-in .audit-list li:nth-child(4) { transition-delay: 320ms; }
.audit-card.is-in .audit-list li:nth-child(5) { transition-delay: 400ms; }
.audit-card.is-in .audit-list li:nth-child(6) { transition-delay: 480ms; }

/* ---- Promise seal — pulsing aura ---- */
@media (prefers-reduced-motion: no-preference) {
  .promise-seal-pulse {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgb(var(--accent-rgb) / 0.4);
    animation: seal-pulse 2.4s ease-out infinite;
    pointer-events: none;
  }
  @keyframes seal-pulse {
    0%   { transform: scale(0.85); opacity: 0.9; }
    100% { transform: scale(1.6); opacity: 0; }
  }
}

/* ---- Final CTA washes — slow gentle drift ---- */
@media (prefers-reduced-motion: no-preference) {
  .final-cta-wash, .final-cta-wash-2 {
    animation: cta-wash-drift 16s ease-in-out infinite alternate;
  }
  .final-cta-wash-2 { animation-duration: 22s; animation-direction: alternate-reverse; }
  @keyframes cta-wash-drift {
    0%   { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-46%, -54%) scale(1.08); }
  }
}

/* ---- About-photo — slow color drift behind the initial ---- */
@media (prefers-reduced-motion: no-preference) {
  .about-photo::before {
    content: '';
    position: absolute;
    inset: -30%;
    background: conic-gradient(
      from 0deg,
      rgb(var(--accent-rgb) / 0.18),
      rgb(var(--warm-rgb) / 0.10),
      rgb(var(--accent-rgb) / 0.18)
    );
    animation: about-orbit 14s linear infinite;
    pointer-events: none;
    opacity: 0;
    transition: opacity 320ms ease;
  }
  .about-photo { position: relative; overflow: hidden; }
  .about-photo:hover::before { opacity: 0.6; }
  @keyframes about-orbit {
    to { transform: rotate(360deg); }
  }
}

/* ---- Founding-card — subtle moving border shimmer ---- */
.founding-card { position: relative; overflow: hidden; }
.founding-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgb(var(--accent-rgb) / 0.20) 50%,
    transparent 70%
  );
  background-size: 220% 100%;
  background-position: -50% 0;
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
  mix-blend-mode: screen;
}
@media (hover: hover) and (pointer: fine) {
  .founding-card:hover::after {
    opacity: 1;
    animation: founding-shimmer 2s linear infinite;
  }
  @keyframes founding-shimmer {
    to { background-position: 150% 0; }
  }
}

/* ---- FAQ — chevron flip is smoother, item lifts on hover ---- */
@media (hover: hover) and (pointer: fine) {
  .faq-item {
    transition: transform 280ms cubic-bezier(0.22,0.61,0.36,1), box-shadow 280ms ease, border-color 220ms ease;
  }
  .faq-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(15,12,10,0.04), 0 8px 22px rgba(15,12,10,0.05);
  }
}

/* ---- Lead form inputs — soft focus glow ---- */
.lead-input {
  transition: border-color 220ms ease, box-shadow 240ms ease, background 220ms ease;
}
.lead-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.15);
  background: var(--card);
}

/* ---- Scroll-progress bar — small accent shimmer ---- */
.scroll-progress-bar {
  position: relative;
  overflow: hidden;
}
.scroll-progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.5) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: progress-sweep 2.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress-bar::after { animation: none; }
}
@keyframes progress-sweep {
  to { transform: translateX(100%); }
}

/* ---- Defensive — ensure interactive controls always cursor:pointer ---- */
.btn-primary,
.btn-ghost,
.faq-q,
.nav-link,
.mobile-link,
.soft-link,
.reveal-link,
.lead-submit,
.pillar-cta,
.founding-cta,
.audit-cta,
.final-cta-btn,
.nav-logo,
.footer-logo,
button[type="submit"],
[role="button"] {
  cursor: pointer;
}

/* ---- Defensive — guarantee no decorative overlay can swallow clicks ---- */
.grain-overlay,
.hero-wash,
.hero-wash-secondary,
.hero-spotlight,
.flow-wash,
.audit-wash,
.final-cta-wash,
.final-cta-wash-2,
.scroll-progress,
.scroll-progress-bar {
  pointer-events: none !important;
}

/* ---- Defensive — magnetic CTAs must remain clickable ---- */
.js-magnetic { will-change: transform; }
.js-magnetic > * { pointer-events: none; }
.js-magnetic { position: relative; }

/* =========================================================
   EMAIL BAND — quiet, distinctly-coloured strip between hero
   and the flow section. Houses the brand tagline + the two
   email fallbacks so the hero itself stays calm.
   ========================================================= */
.email-band {
  position: relative;
  z-index: 2;
  padding: 36px 0;
  /* soft sand-tinted gradient — distinct from the cream hero,
     but doesn't read as a heavy "section" */
  background:
    linear-gradient(180deg,
      rgb(var(--accent-rgb) / 0.05) 0%,
      rgb(var(--accent-rgb) / 0.10) 50%,
      rgb(var(--accent-rgb) / 0.05) 100%);
  border-top: 1px solid rgb(var(--accent-rgb) / 0.22);
  border-bottom: 1px solid rgb(var(--accent-rgb) / 0.22);
}
@media (min-width: 768px) {
  .email-band { padding: 44px 0; }
}

.email-band-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}

.email-band-tagline {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.125rem, 2vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--accent-press);
  margin: 0;
}

.email-band-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 20px;
  font-size: 0.875rem;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}

.email-band-label {
  font-weight: 500;
  color: var(--ink-soft);
}

.email-band-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 8px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 2px rgba(15,12,10,0.03);
  transition: border-color 200ms ease, color 200ms ease, transform 220ms cubic-bezier(0.22,0.61,0.36,1), box-shadow 220ms ease, background 200ms ease;
}
.email-band-link:hover {
  border-color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.06);
  color: var(--accent-press);
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(15,12,10,0.04), 0 8px 22px rgba(15,12,10,0.06);
}

.email-band-name {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent-press);
}

.email-band-addr {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 600;
}

.email-band-langs {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink-softer);
  background: rgb(var(--accent-rgb) / 0.12);
  border: 1px solid rgb(var(--accent-rgb) / 0.30);
  padding: 2px 7px;
  border-radius: 5px;
  text-transform: uppercase;
}

.email-band-sep {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgb(var(--accent-rgb) / 0.45);
  display: inline-block;
}
@media (max-width: 639px) {
  .email-band-sep { display: none; }
  .email-band-link { width: 100%; max-width: 320px; justify-content: center; }
}

/* =========================================================
   Audit stat line — the 9-14h risk-reversal number lives here,
   right under "Here's exactly what you get."
   ========================================================= */
.audit-stat-line {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}
@media (min-width: 768px) { .audit-stat-line { font-size: 1.125rem; } }

.audit-stat-num {
  display: inline-block;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.25em;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-right: 0.25rem;
}
.audit-stat-line em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent-press);
}

/* =========================================================
   About-photo — real founder portraits on a soft, contrast-rich background
   Marcel: warm sand → cream gradient
   Diana: cool mint-teal → cream gradient (mirrors her mint top)
   ========================================================= */
.about-photo {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border: 1px solid var(--line);
  box-shadow: 0 2px 4px rgba(15,12,10,0.04), 0 18px 40px rgba(15,12,10,0.08);
}
.about-photo-marcel {
  background:
    radial-gradient(ellipse at 50% 80%, rgb(var(--accent-rgb) / 0.45) 0%, rgb(var(--accent-rgb) / 0) 70%),
    linear-gradient(180deg, #F2EAD8 0%, #E6D4B0 100%);
}
.about-photo-diana {
  background:
    radial-gradient(ellipse at 50% 80%, rgba(20, 110, 96, 0.30) 0%, rgba(20, 110, 96, 0) 70%),
    linear-gradient(180deg, #DDEFE9 0%, #B8DDD2 100%);
}
.about-photo-img {
  position: relative;
  z-index: 2;
  width: 96%;
  height: auto;
  max-height: 110%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  transition: transform 600ms cubic-bezier(0.22,0.61,0.36,1);
  filter: drop-shadow(0 8px 18px rgba(9, 63, 57, 0.18));
}
.about-person:hover .about-photo-img {
  transform: translateY(-4px) scale(1.02);
}
/* Hide old placeholder elements if they linger */
.about-photo-initial, .about-photo-tag { display: none; }

/* About-section email link below the bio */
.about-email-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.25rem;
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  transition: border-color 200ms ease, background 200ms ease, transform 220ms cubic-bezier(0.22,0.61,0.36,1), box-shadow 220ms ease, color 180ms ease;
}
.about-email-link:hover {
  border-color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.06);
  color: var(--accent-press);
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(15,12,10,0.04), 0 8px 20px rgba(15,12,10,0.06);
}
.about-email-link svg { color: var(--accent); flex-shrink: 0; }

/* =========================================================
   Audit checklist — final item gets the visual weight
   Spans the full grid width, sits on its own row, bolded.
   ========================================================= */
.audit-final {
  grid-column: 1 / -1;
  margin-top: 1.25rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid rgb(var(--accent-rgb) / 0.25);
  position: relative;
  /* override the staggered translate-X from the audit-card.is-in rule with a deeper delay */
}
.audit-card.is-in .audit-list li.audit-final { transition-delay: 580ms; }
.audit-final > span:last-child {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) {
  .audit-final > span:last-child { font-size: 1.1875rem; }
}
.audit-final > span:last-child em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent-press);
}
.audit-check-final {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--ink) !important;
  box-shadow: 0 0 0 5px rgb(var(--accent-rgb) / 0.20), 0 0 0 1px rgb(var(--accent-rgb) / 0.5) !important;
  transform: scale(1.05);
}