/*
  FiveTwo Labs design system.
  One typeface (Geist), one warm accent, hairlines instead of boxes.
  The copper point is the recurring signature: the small starting thing.
*/
@layer reset, base, layout, components, utilities;

@view-transition { navigation: auto; }

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
  body, h1, h2, h3, h4, p, figure, ul, ol, dl, dd, blockquote { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  img, svg { display: block; max-width: 100%; }
  button, input, textarea, select { font: inherit; color: inherit; }
  fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
  legend { padding: 0; display: table; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; }
  [hidden] { display: none !important; }
}

@layer base {
  :root {
    --ink: #17191b;
    --ink-2: #202326;
    --cream: #f7f3ec;
    --stone: #ece6da;
    --sage: #87948b;
    --copper: #d9782d;
    --copper-deep: #a4501a;

    --fs-label: .75rem;
    --fs-body: 1.0625rem;
    --fs-lead: clamp(1.2rem, 1.05rem + .7vw, 1.6rem);
    --fs-h3: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
    --fs-h2: clamp(2rem, 1.2rem + 3.6vw, 4.5rem);
    --fs-h1: clamp(2.6rem, 1.3rem + 5.6vw, 6.75rem);
    --fs-display: clamp(3.2rem, .9rem + 10.5vw, 11rem);

    --max: 1240px;
    --pad: clamp(1.25rem, 4vw, 3rem);
    --space: clamp(5rem, 11vw, 10rem);
    --header-h: 4.5rem;
    --ease: cubic-bezier(.2, .7, .2, 1);

    --bg: var(--cream);
    --fg: var(--ink);
    --muted: #4f5553;
    --line: #d8d1c2;
    --accent: var(--copper-deep);
    --dot: var(--copper-deep);
    --focus: var(--copper-deep);
    --mark-five: var(--ink);
    --mark-two: var(--sage);

    font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color-scheme: light;
  }

  .theme-light { --bg: var(--cream); --fg: var(--ink); --muted: #4f5553; --line: #d8d1c2; --accent: var(--copper-deep); --dot: var(--copper-deep); --focus: var(--copper-deep); color-scheme: light; }
  .theme-stone { --bg: var(--stone); --fg: var(--ink); --muted: #464c4a; --line: #cfc7b5; --accent: var(--copper-deep); --dot: var(--copper-deep); --focus: var(--copper-deep); color-scheme: light; }
  .theme-dark { --bg: var(--ink); --fg: var(--cream); --muted: #a9b1ab; --line: #363b3e; --accent: #e8914f; --dot: var(--copper); --focus: #e8914f; color-scheme: dark; }

  body {
    background: var(--cream);
    color: var(--ink);
    font-size: var(--fs-body);
    line-height: 1.6;
    min-width: 320px;
    font-feature-settings: "ss01", "tnum" 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  ::selection { background: var(--copper); color: var(--ink); }
  :focus-visible { outline: 3px solid var(--focus, var(--copper-deep)); outline-offset: 4px; border-radius: 2px; }
  a { text-underline-offset: .22em; text-decoration-thickness: 1px; }
  :target { scroll-margin-top: calc(var(--header-h) + 1rem); }
  main:focus { outline: none; }

  h1, h2, h3 { font-weight: 560; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
  h1 { font-size: var(--fs-h1); letter-spacing: -.05em; line-height: .96; }
  h2 { font-size: var(--fs-h2); letter-spacing: -.045em; }
  h3 { font-size: var(--fs-h3); line-height: 1.12; }
  p { text-wrap: pretty; }

  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  .m-two { stroke: var(--mark-two); }
  .m-five { stroke: var(--mark-five); }
  .m-dot { fill: var(--copper); }
}

@layer layout {
  .wrap { width: min(100% - var(--pad) * 2, var(--max)); margin-inline: auto; }
  .section { background: var(--bg); color: var(--fg); padding-block: var(--space); }
  .section + .section { border-top: 1px solid var(--line); }
  .split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .split-wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

@layer components {
  /* Skip link + header */
  .skip { position: absolute; left: 1rem; top: -6rem; z-index: 100; background: var(--cream); color: var(--ink); padding: .8rem 1.1rem; border-radius: 999px; font-weight: 600; transition: top .2s var(--ease); }
  .skip:focus { top: 1rem; }

  .site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--cream); border-bottom: 1px solid #2a2e31; view-transition-name: site-header; --focus: #e8914f; }
  .bar { width: min(100% - var(--pad) * 2, var(--max)); margin-inline: auto; min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
  .brand .mark { width: 2.4rem; height: 2.1rem; --mark-five: var(--cream); --mark-two: var(--sage); }
  .wordmark { display: inline-block; width: 6.2rem; aspect-ratio: 980 / 142; background: var(--cream); -webkit-mask: url("/assets/img/wordmark.svg") center / contain no-repeat; mask: url("/assets/img/wordmark.svg") center / contain no-repeat; }
  .labs { font-size: .6875rem; letter-spacing: .32em; text-transform: uppercase; color: var(--sage); font-weight: 600; margin-left: -.2rem; }

  .nav ul { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
  .nav a:not(.btn) { text-decoration: none; font-size: .9375rem; color: #cfd4cf; padding: .5rem 0; position: relative; display: inline-flex; align-items: center; min-height: 44px; }
  .nav a:not(.btn):hover { color: var(--cream); }
  .nav a[aria-current="page"]:not(.btn) { color: var(--cream); }
  .nav a[aria-current="page"]:not(.btn)::before { content: ""; position: absolute; left: -.9rem; top: 50%; width: .4rem; height: .4rem; margin-top: -.2rem; border-radius: 50%; background: var(--copper); }

  .menu-btn { display: none; min-height: 44px; padding: 0 1.1rem; border: 1px solid #3a3f42; border-radius: 999px; color: var(--cream); font-size: .9rem; align-items: center; gap: .6rem; }
  .menu-btn::after { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--copper); transition: transform .3s var(--ease); }
  .menu-btn[aria-expanded="true"]::after { transform: scale(1.8); }

  /* Buttons: the copper point leads, and grows on intent */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 52px; padding: 0 1.7rem; border-radius: 999px; border: 1px solid var(--fg); background: var(--fg); color: var(--bg); text-decoration: none; font-weight: 600; font-size: 1rem; letter-spacing: -.01em; transform: translate(var(--mx, 0), var(--my, 0)); transition: transform .35s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
  .btn::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--copper); transition: transform .35s var(--ease); flex: none; }
  .btn:hover::before, .btn:focus-visible::before { transform: scale(1.7); }
  .btn-ghost { background: transparent; color: var(--fg); border-color: color-mix(in srgb, var(--fg) 38%, transparent); }
  .btn-ghost:hover { border-color: var(--fg); }
  .btn-sm { min-height: 44px; padding: 0 1.2rem; font-size: .9rem; background: var(--cream); color: var(--ink); border-color: var(--cream); }
  .btn-sm:hover { background: #fff; }
  .text-link { font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .1em; }
  .text-link:hover { color: var(--accent); }

  .label { font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
  .lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--muted); max-width: 40ch; letter-spacing: -.012em; }
  .muted { color: var(--muted); }
  .dot { color: var(--dot); }

  /* Chapter marker: number, line, name */
  .chapter { display: flex; align-items: center; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 4rem); }
  .chapter .num { font-variant-numeric: tabular-nums; }
  .chapter .rule { flex: 0 0 clamp(2rem, 8vw, 6rem); height: 1px; background: var(--line); transform-origin: left; }
  .chapter .rule::before { content: ""; display: block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--dot); margin-top: -.22rem; }

  /* Hero */
  .hero { background: var(--ink); color: var(--cream); --bg: var(--ink); --fg: var(--cream); --muted: #a9b1ab; --line: #363b3e; --dot: var(--copper); --focus: #e8914f; min-height: calc(100svh - var(--header-h)); display: flex; align-items: flex-end; padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem); position: relative; overflow: clip; }
  .hero-inner { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
  .display { font-size: var(--fs-display); line-height: .9; letter-spacing: -.06em; font-weight: 580; max-width: 12ch; }
  .display .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
  .display .line > span { display: block; }
  .display .period { color: var(--copper); }
  .hero-trail { display: flex; align-items: center; gap: 1rem; }
  .origin { width: clamp(.7rem, 1.4vw, 1.05rem); height: clamp(.7rem, 1.4vw, 1.05rem); border-radius: 50%; background: var(--copper); flex: none; }
  .hero-line { flex: 1; height: 1px; background: #4a5053; transform-origin: left; }
  .hero-foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: end; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
  .formula { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: baseline; font-size: .9375rem; color: var(--muted); }
  .formula b { font-weight: 500; color: var(--cream); }
  .formula i { font-style: normal; color: var(--copper); }

  /* Page hero (subpages) */
  .page-hero { padding-block: clamp(3.5rem, 9vw, 8rem) clamp(3rem, 7vw, 6rem); background: var(--cream); }
  .page-hero h1 { max-width: 16ch; margin-top: 1.5rem; }
  .page-hero .lead { margin-top: 2rem; max-width: 46ch; }
  /* The hero already carries its own bottom padding; the section after it only needs a short beat, not the full inter-section rhythm. */
  .page-hero + .section { padding-top: clamp(1.5rem, 4vw, 3rem); }

  /* Potential: asymmetric statement + roll call */
  .statement { font-size: clamp(1.9rem, 1rem + 3vw, 3.75rem); line-height: 1.05; letter-spacing: -.04em; font-weight: 560; text-wrap: balance; }
  .roll { display: grid; }
  .roll li { font-size: var(--fs-h1); letter-spacing: -.05em; line-height: 1; font-weight: 560; padding-block: .12em; border-bottom: 1px solid var(--line); color: var(--fg); display: flex; align-items: baseline; gap: 1rem; }
  .roll li:first-child { border-top: 1px solid var(--line); }
  .roll .n { font-size: var(--fs-label); letter-spacing: .12em; color: var(--muted); font-weight: 600; min-width: 2rem; font-variant-numeric: tabular-nums; }

  /* Constraint: big quotes divided by hairlines */
  .quotes { display: grid; }
  .quotes p { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.025em; padding-block: clamp(1.5rem, 3vw, 2.4rem); border-top: 1px solid var(--line); max-width: 30ch; }
  .quotes p:first-child { font-size: var(--fs-h2); letter-spacing: -.045em; line-height: 1; border-top: 0; padding-top: 0; font-weight: 560; max-width: 14ch; }
  .quotes p:last-child { border-bottom: 1px solid var(--line); }
  .constraint-copy { max-width: 46ch; color: var(--muted); font-size: var(--fs-lead); line-height: 1.5; margin-top: clamp(2rem, 4vw, 3rem); letter-spacing: -.01em; }

  /* Multiplication: 52 dots */
  .multiply .stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
  .field { display: grid; grid-template-columns: repeat(13, 1fr); gap: clamp(.4rem, 1.4vw, 1.1rem); width: 100%; }
  .field i { aspect-ratio: 1; border-radius: 50%; background: var(--sage); transition: transform .6s var(--ease), background-color .6s var(--ease), box-shadow .6s var(--ease); }
  .field i.core { background: var(--cream); }
  .field i.origin { background: var(--copper); }
  .js .field i:not(.on) { transform: scale(.3); background: transparent; box-shadow: inset 0 0 0 1px #4a5053; }
  .counter { display: flex; align-items: baseline; gap: .6rem; margin-top: 1.5rem; color: var(--muted); font-variant-numeric: tabular-nums; font-size: .9375rem; }
  .counter output { font-size: var(--fs-h3); color: var(--cream); font-weight: 560; letter-spacing: -.03em; min-width: 2ch; display: inline-block; }
  .multiply .statement { max-width: 16ch; }
  .multiply { background-image: radial-gradient(55% 60% at 78% 50%, rgb(217 120 45 / .13), transparent 70%); }
  .multiply .copy { color: var(--muted); font-size: var(--fs-lead); line-height: 1.5; margin-top: 1.5rem; max-width: 34ch; letter-spacing: -.01em; }
  .multiply .formula { margin-top: 2rem; }
  .multiply.pinned { height: 230svh; padding: 0; }
  .multiply.pinned .sticky { position: sticky; top: var(--header-h); min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; padding-block: 2rem; }

  /* Outcomes: rows, not cards */
  .rows { border-top: 1px solid var(--line); }
  .rows li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem clamp(2rem, 6vw, 6rem); padding-block: clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); align-items: baseline; }
  .rows h3 { font-size: var(--fs-h2); letter-spacing: -.05em; line-height: 1; }
  .rows h3::after { content: ""; display: inline-block; width: .16em; height: .16em; margin-left: .08em; border-radius: 50%; background: var(--dot); transform: scale(0); transition: transform .45s var(--ease); }
  .rows li:hover h3::after, .rows li:focus-within h3::after { transform: scale(1); }
  .rows p { color: var(--muted); max-width: 42ch; font-size: 1.125rem; }

  /* Capabilities index (home + page) */
  .caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
  .cap { padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--line); }
  .cap:nth-child(even) { padding-left: clamp(1rem, 3vw, 2.5rem); border-left: 1px solid var(--line); padding-right: 0; }
  .cap h3 { font-size: var(--fs-h2); letter-spacing: -.05em; line-height: 1; }
  .cap p { color: var(--muted); margin-top: 1rem; max-width: 34ch; }
  .cap .items { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .9375rem; }
  .cap .items li + li::before { content: "/"; color: var(--accent); margin-right: 1rem; }

  /* Approach: big words */
  .steps { border-top: 1px solid var(--line); counter-reset: step; }
  .steps li { display: grid; grid-template-columns: 6rem minmax(0, 7fr) minmax(0, 5fr); gap: 1rem clamp(1.5rem, 4vw, 4rem); padding-block: clamp(1.25rem, 3vw, 2.2rem); border-bottom: 1px solid var(--line); align-items: baseline; transition: padding-left .5s var(--ease); }
  .steps li:hover { padding-left: 1rem; }
  .steps .n { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 650; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
  .steps h3 { font-size: var(--fs-h1); letter-spacing: -.055em; line-height: .95; }
  .steps h3 .dot { color: var(--dot); }
  .steps p { color: var(--muted); max-width: 34ch; }

  /* Why */
  .belief { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.045em; font-weight: 560; max-width: 20ch; text-wrap: balance; }
  .belief em { font-style: normal; color: var(--muted); }
  .whisper { margin-top: clamp(2rem, 5vw, 4rem); font-size: .9375rem; }
  .whisper summary { display: inline-flex; align-items: center; gap: .7rem; cursor: pointer; min-height: 44px; list-style: none; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
  .whisper summary::-webkit-details-marker { display: none; }
  .whisper summary::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--dot); transition: transform .35s var(--ease); }
  .whisper[open] summary::before { transform: scale(1.8); }
  .whisper summary:hover { color: var(--fg); }
  .whisper p { margin-top: .6rem; max-width: 40ch; color: var(--muted); }

  /* Work: transformation anatomy */
  .anatomy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
  .anatomy li { padding: 1.5rem 1.25rem 1.5rem 0; border-bottom: 1px solid var(--line); }
  .anatomy li + li { padding-left: 1.25rem; border-left: 1px solid var(--line); }
  .anatomy .n { font-size: var(--fs-label); letter-spacing: .14em; color: var(--muted); font-weight: 600; }
  .anatomy h3 { font-size: var(--fs-h3); margin-top: .5rem; }
  .anatomy p { margin-top: .6rem; color: var(--muted); font-size: .975rem; }

  /* Final CTA */
  .cta { text-align: left; }
  .cta h2 { font-size: var(--fs-display); letter-spacing: -.06em; line-height: .92; max-width: 11ch; font-weight: 580; }
  .cta .hero-trail { margin-bottom: clamp(2rem, 5vw, 4rem); }
  .cta p.lead { margin-top: 2rem; }
  .cta { padding-bottom: 0; }
  .cta .marquee { margin-top: clamp(4rem, 9vw, 8rem); border-bottom: 0; }
  .cta .hero-actions { margin-top: 2.5rem; }

  /* Long-form (about, articles, privacy) */
  .prose { max-width: 40rem; }
  .prose > * + * { margin-top: 1.4em; }
  .prose h2 { font-size: var(--fs-h3); letter-spacing: -.03em; margin-top: 2.4em; }
  .prose p, .prose li { font-size: 1.1875rem; line-height: 1.65; }
  .prose ul { list-style: none; display: grid; gap: .7rem; }
  .prose ul li { padding-left: 1.4rem; position: relative; }
  .prose ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--dot); }
  .prose a { color: inherit; }
  .prose a:hover { color: var(--accent); }
  .pull { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.045em; font-weight: 560; max-width: 18ch; }
  .meta-row { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.5rem; }

  /* Insights list */
  .notes { border-top: 1px solid var(--line); }
  .note { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; padding-block: clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); }
  .note-n { color: var(--muted); font-size: var(--fs-label); letter-spacing: .14em; font-weight: 600; padding-top: .8rem; }
  .note-title { font-size: var(--fs-h2); letter-spacing: -.045em; line-height: 1.02; max-width: 18ch; }
  .note-title a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
  .note-title a:hover, .note-title a:focus-visible { background-size: 100% 1px; }
  .note-desc { color: var(--muted); max-width: 52ch; margin-top: 1rem; }
  .note-meta { color: var(--muted); font-size: .875rem; margin-top: 1rem; }
  .next { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--line); }

  /* Contact form */
  .form { display: grid; gap: 1.5rem; max-width: 40rem; }
  .field-row label { display: block; font-weight: 600; margin-bottom: .45rem; font-size: .9375rem; }
  .field-row .hint { display: block; font-weight: 400; color: var(--muted); font-size: .875rem; margin-top: .1rem; }
  .input { width: 100%; min-height: 52px; padding: .8rem 1rem; border: 1px solid #a69f90; border-radius: 12px; background: #fff; color: var(--ink); font-size: 1rem; transition: border-color .2s var(--ease); }
  textarea.input { min-height: 11rem; resize: vertical; line-height: 1.5; }
  .input:hover { border-color: var(--ink); }
  .input:focus-visible { outline: 3px solid var(--copper-deep); outline-offset: 2px; border-color: var(--ink); }
  .req { color: var(--copper-deep); }
  .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .direct { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); max-width: 40rem; }
  .mail { font-weight: 600; text-underline-offset: .25em; }

  /* Guided contact "bot": real fieldsets/labels, no framework. Chips are just styled radios. */
  .bot-step legend, .bot-step > .field-row:first-child label { font-size: var(--fs-h3); font-weight: 560; letter-spacing: -.02em; max-width: 26ch; }
  .bot-step[data-optional] legend .hint, .bot-step[data-optional] label .hint { font-size: .8rem; font-weight: 500; vertical-align: middle; margin-left: .5rem; }
  .bot-step + .bot-step { border-top: 1px solid var(--line); padding-top: 2rem; margin-top: .5rem; }
  .chip-group { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
  .chip { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.1rem; border: 1px solid #a69f90; border-radius: 999px; background: #fff; cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
  .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .chip span { font-size: .95rem; }
  .chip:hover { border-color: var(--ink); }
  .chip:has(input:focus-visible) { outline: 3px solid var(--copper-deep); outline-offset: 2px; }
  .chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--cream); }
  .chip:has(input:checked)::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--copper); margin-right: .55rem; }

  /* Progressive enhancement: hidden steps are real hidden attributes, excluded from tab order and validation. */
  .js .botform { counter-reset: botstep; }
  .js .bot-step { padding-block: .5rem; }
  .bot-nav { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
  .bot-next, .bot-back { min-height: 48px; }
  .bot-back { color: var(--muted); font-weight: 600; }
  .bot-back:hover { color: var(--fg); }
  .bot-progress-track { height: 3px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 2rem; }
  .bot-progress-bar { height: 100%; background: var(--copper-deep); transition: width .4s var(--ease); width: 0; }
  .bot-transcript { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
  .bot-answer { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--stone); font-size: .9rem; }
  .bot-answer b { font-weight: 600; }
  .bot-answer button { font-weight: 600; text-decoration: underline; text-underline-offset: .2em; flex: none; }
  .bot-answer button:hover { color: var(--accent); }

  /* Chip used as a plain toggle button (status filters), not a radio wrapper */
  .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
  .chip[aria-pressed="true"]::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--copper); margin-right: .55rem; }

  /* Admin / CRM (static, CSP-safe page under /admin/) */
  .admin-main { padding-block: clamp(2.5rem, 6vw, 5rem); }
  .admin-title { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.04em; margin-top: .5rem; }
  .admin-token-form { max-width: 26rem; margin-top: 2rem; }
  .admin-section { margin-top: 2.5rem; }
  .admin-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
  .admin-new-lead { max-width: 32rem; background: var(--stone); border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem; margin-bottom: 2rem; }
  .admin-new-lead-actions { display: flex; align-items: center; gap: 1.2rem; }
  .leads-list { display: grid; gap: 1rem; }
  .lead-card { border: 1px solid var(--line); border-radius: 16px; padding: 1.25rem 1.5rem; display: grid; gap: .6rem; }
  .lead-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; align-items: baseline; }
  .lead-head h3 { font-size: 1.25rem; letter-spacing: -.02em; }
  .lead-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .875rem; color: var(--muted); }
  .lead-tags { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .8rem; }
  .lead-tags span { border: 1px solid var(--line); border-radius: 999px; padding: .2rem .6rem; color: var(--muted); }
  .lead-message { color: var(--muted); font-size: .95rem; white-space: pre-wrap; }
  .lead-notes { display: grid; gap: .4rem; font-size: .875rem; color: var(--muted); }
  .lead-notes li { border-top: 1px solid var(--line); padding-top: .4rem; }
  .lead-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .4rem; }
  .lead-actions select.input { width: auto; min-height: 40px; padding: 0 .6rem; }
  .lead-note-form { display: flex; gap: .6rem; flex: 1 1 18rem; }
  .lead-note-form input.input { min-height: 40px; }
  .lead-note-form button { min-height: 40px; padding: 0 1rem; }

  .lead-quotes { margin-top: .75rem; border-top: 1px solid var(--line); padding-top: .75rem; }
  .quote-card { border: 1px solid var(--line); border-radius: 12px; padding: 1rem; margin-top: .75rem; display: grid; gap: .75rem; background: var(--stone); }
  .quote-items-rows { display: grid; gap: .5rem; }
  .quote-item-row { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 6rem 2rem; gap: .5rem; }
  .quote-item-row .input { min-height: 40px; }
  .quote-activity { font-size: .8125rem; }


  /* Loader markup ships on the home page only; hidden unless the intro class is set */
  .loader { display: none; }

  /* Weight contrast: one light word against a heavy one */
  .lt { font-weight: 270; letter-spacing: -.045em; }
  .outline { color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
  .outline-fg { color: var(--fg); }

  /* Words: split for entrance (.words) or to fill as you scroll (.fill) */
  .js .words .w { display: inline-block; opacity: 0; transform: translateY(.45em); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 38ms); }
  .js .words.in .w { opacity: 1; transform: none; }
  .is-fill .w { opacity: .2; transition: opacity .35s linear; }
  .is-fill .w.lit { opacity: 1; }

  /* Capabilities page: numbered rows */
  .cap-rows { border-top: 1px solid var(--line); }
  .cap-row { display: grid; grid-template-columns: 5rem minmax(0, 5fr) minmax(0, 6fr); gap: 1.5rem clamp(1.5rem, 4vw, 4rem); padding-block: clamp(2rem, 5vw, 4rem); border-bottom: 1px solid var(--line); align-items: start; transition: background-color .4s var(--ease); }
  .cap-row .num { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: 50%; font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
  .cap-row:hover .num { background: var(--copper); border-color: var(--copper); color: var(--ink); }
  .cap-row h2 { font-size: clamp(2rem, 1rem + 3vw, 4.25rem); line-height: .95; letter-spacing: -.04em; overflow-wrap: anywhere; }
  .cap-row .what { color: var(--muted); font-size: var(--fs-lead); line-height: 1.4; margin-top: 1rem; max-width: 24ch; letter-spacing: -.01em; }
  .cap-row ul { display: grid; gap: .1rem; }
  .cap-row li { padding-block: .8rem; border-bottom: 1px solid var(--line); display: grid; gap: .15rem; }
  .cap-row li:first-child { border-top: 1px solid var(--line); }
  .cap-row li b { font-weight: 600; }
  .cap-row li span { color: var(--muted); font-size: .975rem; }

  /* Origin story + beliefs (about) */
  .beliefs { counter-reset: belief; border-top: 1px solid var(--line); }
  .beliefs li { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; padding-block: clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); }
  .beliefs .n { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1; letter-spacing: -.05em; font-weight: 600; font-variant-numeric: tabular-nums; }
  .beliefs h3 { font-size: var(--fs-h3); }
  .beliefs p { color: var(--muted); max-width: 46ch; margin-top: .5rem; }
  .origin-note { border-left: 1px solid var(--line); padding-left: 1.5rem; margin-top: 2.5rem; color: var(--muted); max-width: 36rem; }
  .big-52 { font-size: clamp(8rem, 28vw, 24rem); line-height: .8; letter-spacing: -.08em; font-weight: 700; display: block; user-select: none; }
  .big-52 .two { color: var(--sage); }
  .big-52 .period { color: var(--copper); }

  /* Marquee: the question, repeated. Pauses on hover and focus; static when motion is reduced. */
  .marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: clamp(1.25rem, 3vw, 2.25rem); }
  .marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  .m-half { display: flex; flex: none; }
  .marquee-track span { font-size: var(--fs-h1); letter-spacing: -.05em; font-weight: 560; white-space: nowrap; padding-right: .4em; display: inline-flex; align-items: center; gap: .4em; }
  .marquee-track span::after { content: ""; width: .18em; height: .18em; border-radius: 50%; background: var(--copper); }
  .marquee-track span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* Back to top with progress ring */
  .to-top { position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); z-index: 60; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--ink); color: var(--cream); display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(.75rem); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s; box-shadow: 0 0 0 1px #3a3f42; --focus: #e8914f; }
  .to-top.show { opacity: 1; visibility: visible; transform: none; }
  .to-top svg { width: 100%; height: 100%; padding: .1rem; }
  .to-top circle { fill: none; stroke-width: 2; }
  .to-top .ring-bg { stroke: #3a3f42; }
  .to-top .ring { stroke: var(--copper); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: center; }
  .to-top .arrow { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .to-top:hover .arrow { stroke: var(--copper); }

  /* Custom cursor: additive, never replaces the system pointer */
  .cursor { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; opacity: 0; transition: opacity .25s; will-change: transform; }
  .cursor.on { opacity: 1; }
  .cursor-dot { position: absolute; left: 0; top: 0; width: .65rem; height: .65rem; margin: -.325rem 0 0 -.325rem; border-radius: 50%; background: var(--copper); display: grid; place-items: center; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .25s, border-color .25s, transform .2s; border: 1.5px solid transparent; }
  .cursor.is-link .cursor-dot { width: 3.5rem; height: 3.5rem; margin: -1.75rem 0 0 -1.75rem; background: color-mix(in srgb, var(--copper) 16%, transparent); border-color: var(--copper); }
  .cursor.is-text .cursor-dot { opacity: 0; }
  .cursor.has-label .cursor-dot { width: 5rem; height: 5rem; margin: -2.5rem 0 0 -2.5rem; background: var(--copper); }
  .cursor.down .cursor-dot { transform: scale(.82); }
  .cursor-label { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }

  /* Footer */
  .site-footer { background: var(--ink); color: var(--cream); --muted: #a9b1ab; --line: #363b3e; --focus: #e8914f; padding-block: clamp(4rem, 9vw, 7rem) 2rem; }
  .foot-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; align-items: end; }
  .foot-line { font-size: var(--fs-h1); line-height: .95; letter-spacing: -.055em; font-weight: 580; }
  .foot-line .dot { color: var(--copper); }
  .foot-cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem; }
  .foot-cols .label { margin-bottom: 1rem; }
  .foot-cols ul { display: grid; gap: .2rem; }
  .foot-cols a { text-decoration: none; display: inline-flex; min-height: 36px; align-items: center; }
  .foot-cols a:hover { color: var(--copper); }
  .foot-cols p { margin-bottom: .6rem; }
  .foot-cols .muted { font-size: .9375rem; }
  .foot-base { margin-top: clamp(3rem, 7vw, 6rem); padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .875rem; color: var(--muted); }
  .foot-base a { color: var(--muted); }
  .foot-base a:hover { color: var(--cream); }
}

@layer utilities {
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .mt-1 { margin-top: 1rem; }
  .mt-2 { margin-top: 2rem; }
  .mt-3 { margin-top: 3rem; }

  /* Rises: simple entrance for heroes and headings */
  .js .rise, .js .rise-2, .js .rise-3 { opacity: 0; transform: translateY(1.2rem); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js .rise-2 { transition-delay: .12s; }
  .js .rise-3 { transition-delay: .24s; }
  .js .rise.in, .js .rise-2.in, .js .rise-3.in { opacity: 1; transform: none; }

  /* Page-hero entrances */
  .page-hero .rise { animation: rise 1s var(--ease) both; }
  .page-hero .rise-2 { animation: fade-up .9s .35s var(--ease) both; }

  /* Big 52 on About */
  .big-52 { font-size: clamp(8rem, 22vw, 20rem); font-weight: 700; letter-spacing: -.08em; line-height: .8; color: var(--fg); }
  .big-52 .two { color: var(--sage); }
  .big-52 .period { color: var(--copper); }

  /* Beliefs list */
  .beliefs { display: grid; border-top: 1px solid var(--line); }
  .beliefs li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); padding-block: clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); align-items: baseline; }
  .beliefs .n { font-size: var(--fs-h2); letter-spacing: -.06em; line-height: 1; font-weight: 560; font-variant-numeric: tabular-nums; }
  .beliefs h3 { font-size: var(--fs-h3); margin-bottom: .4rem; }
  .beliefs p { color: var(--muted); max-width: 44ch; }

  /* Origin note */
  .origin-note { font-size: 1rem; color: var(--muted); border-left: 2px solid var(--copper); padding-left: 1rem; margin-top: 2rem; font-style: italic; }

  /* Work page list */
  .works { display: grid; border-top: 1px solid var(--line); }
  .works li { padding-block: clamp(1.75rem, 3.5vw, 3rem); border-bottom: 1px solid var(--line); }
  .works .head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1rem 2rem; align-items: baseline; }
  .works .num { font-size: var(--fs-label); letter-spacing: .14em; color: var(--muted); font-weight: 600; }
  .works h3 { font-size: var(--fs-h2); letter-spacing: -.05em; line-height: 1; }
  .works .tagline { color: var(--muted); font-size: 1.125rem; margin-top: .75rem; max-width: 40ch; }
  .works .impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
  .works .impact div { border-top: 1px solid var(--line); padding-top: .75rem; }
  .works .impact strong { display: block; font-size: var(--fs-h3); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .works .impact span { color: var(--muted); font-size: .875rem; }

  /* Article pull quote */
  .pull { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.045em; font-weight: 560; max-width: 18ch; margin-block: clamp(2rem, 5vw, 4rem); }

  @media (max-width: 960px) {
    .works .head, .beliefs li { grid-template-columns: minmax(0, 1fr); }
    .works .impact { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 640px) {
    .works .impact { grid-template-columns: 1fr; }
    .big-52 { font-size: clamp(5rem, 30vw, 10rem); }
  }

  /* Reveal: content is visible by default; the JS class opts in to the entrance. */
  .js .reveal { opacity: 0; transform: translateY(1.1rem); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .stagger > .reveal:nth-child(2) { transition-delay: .08s; }
  .js .stagger > .reveal:nth-child(3) { transition-delay: .16s; }
  .js .stagger > .reveal:nth-child(4) { transition-delay: .24s; }
  .js .stagger > .reveal:nth-child(5) { transition-delay: .32s; }
  .js .stagger > .reveal:nth-child(6) { transition-delay: .4s; }
  .js .rule.reveal, .js .hero-line.reveal { opacity: 1; transform: scaleX(0); transition: transform 1.1s var(--ease); }
  .js .rule.reveal.in, .js .hero-line.reveal.in { transform: scaleX(1); }
}

/* Entrance sequence: one point, then a line, then words. Only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
  @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
  @keyframes fade-up { from { opacity: 0; transform: translateY(.9rem); } to { opacity: 1; transform: none; } }
  @keyframes stroke-in { to { stroke-dashoffset: 0; } }
  @keyframes dot-in { from { transform: scale(0); } 60% { transform: scale(1.6); } to { transform: scale(1); } }
  @keyframes curtain { 0%, 62% { transform: none; visibility: visible; } 100% { transform: translateY(-101%); visibility: hidden; } }

  .intro { --t0: 1.45s; }
  .loader { display: none; }
  .intro .loader { position: fixed; inset: 0; z-index: 400; background: var(--ink); display: grid; place-items: center; animation: curtain 2.2s var(--ease) forwards; }
  .loader svg { width: min(46vw, 15rem); height: auto; overflow: visible; }
  .loader .l-five, .loader .l-two { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
  .loader .l-five { stroke: var(--cream); stroke-width: 118; stroke-dashoffset: -1; animation: stroke-in .8s .25s var(--ease) forwards; }
  .loader .l-two { stroke: var(--sage); stroke-width: 112; stroke-dashoffset: 1; animation: stroke-in .6s .85s var(--ease) forwards; }
  .loader .l-dot { fill: var(--copper); transform-box: fill-box; transform-origin: center; animation: dot-in .5s .05s var(--ease) both; }

  .hero .origin { animation: pop .6s var(--t0, 0s) var(--ease) both; }
  .hero .hero-line { animation: draw 1.4s calc(var(--t0, 0s) + .25s) var(--ease) both; }
  .hero .display .line > span { animation: rise 1s var(--ease) both; }
  .hero .display .line:nth-child(1) > span { animation-delay: calc(var(--t0, 0s) + .5s); }
  .hero .display .line:nth-child(2) > span { animation-delay: calc(var(--t0, 0s) + .62s); }
  .hero .fade { animation: fade-up .9s calc(var(--t0, 0s) + 1.1s) var(--ease) both; }
  .hero .fade-2 { animation: fade-up .9s calc(var(--t0, 0s) + 1.3s) var(--ease) both; }
  .rise { animation: fade-up .9s .15s var(--ease) both; }
  .rise-2 { animation: fade-up .9s .3s var(--ease) both; }
}

@media (max-width: 960px) {
  .cap-row { grid-template-columns: 4rem minmax(0, 1fr); }
  .cap-row ul { grid-column: 1 / -1; }
  .split, .split-wide, .multiply .stage, .hero-foot, .foot-top { grid-template-columns: minmax(0, 1fr); }
  .multiply .stage { gap: 2.5rem; }
  .rows li, .steps li { grid-template-columns: minmax(0, 1fr); }
  .steps li { grid-template-columns: 4rem minmax(0, 1fr); }
  .steps li p { grid-column: 2; }
  .anatomy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anatomy li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .anatomy li:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--line); }
  .anatomy li:nth-child(n+3) { border-top: 0; }
}

@media (max-width: 860px) {
  .menu-btn { display: none; }
  .js .menu-btn { display: inline-flex; }
  .js .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--ink); border-bottom: 1px solid #2a2e31; padding: .5rem var(--pad) 1.5rem; }
  .js .nav.open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav li { border-bottom: 1px solid #2a2e31; }
  .nav a:not(.btn) { width: 100%; min-height: 56px; font-size: 1.25rem; color: var(--cream); }
  .nav a[aria-current="page"]:not(.btn)::before { left: auto; right: 0; }
  .nav .nav-cta { border: 0; padding-top: 1.25rem; }
  .nav .btn { width: 100%; min-height: 56px; }
  .bar { flex-wrap: wrap; }
  html:not(.js) .nav { flex-basis: 100%; padding-bottom: 1rem; }
  html:not(.js) .nav ul { gap: .1rem 1.2rem; flex-direction: row; flex-wrap: wrap; }
  html:not(.js) .nav li { border: 0; }
  html:not(.js) .nav a:not(.btn) { font-size: .9375rem; min-height: 44px; width: auto; }
}

@media (max-width: 640px) {
  .caps { grid-template-columns: minmax(0, 1fr); }
  .cap:nth-child(even) { padding-left: 0; border-left: 0; }
  .roll li { gap: .6rem; }
  .anatomy { grid-template-columns: minmax(0, 1fr); }
  .anatomy li, .anatomy li:nth-child(even), .anatomy li:nth-child(odd) { padding-left: 0; border-left: 0; padding-right: 0; border-top: 0; }
  .foot-cols { grid-template-columns: minmax(0, 1fr); }
  .note { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .note-n { padding-top: 0; }
  .labs { display: none; }
  .hero { min-height: calc(100svh - var(--header-h)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .rule.reveal, .js .hero-line.reveal { transform: none; }
  .field i, .btn, .btn::before { transition: none; }
  .marquee-track { animation: none; width: auto; }
  .m-half { flex-wrap: wrap; }
  .m-half[aria-hidden] { display: none; }
  .to-top { transition: none; }
  .is-fill .w { opacity: 1; }
  @view-transition { navigation: none; }
}

@media (forced-colors: active) {
  .outline { -webkit-text-stroke: 0; color: CanvasText; }
  .field i, .origin, .rule::before { forced-color-adjust: none; }
  .btn { border: 2px solid ButtonText; }
}

@media print {
  .site-header, .site-footer, .skip, .hero-actions { display: none !important; }
  body, .section, .hero, .page-hero { background: #fff !important; color: #000 !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}