/* M.O. Solutions site styles, shared by every page. Tokens first; the
   design system artifact mirrors them, so change both together. */
  /* M.O. Solutions tokens. The design system artifact mirrors these; change
     both together. Warm palette from 2026-11-01; lime only on graphite. */
  :root {
    color-scheme: light;
    /* Warm palette (2026-11-01, from the user's Pinterest pick), with the
       logo's own lime kept. */
    --paper: #FAF8F3;  --paper-alt: #F3F6DE;   /* warm off-white page; pale lime tint (engine surface only) */
    --surface: #F1EEE5;                        /* quiet fills: image slots, form fields */
    --highlight: #E8F7AC;                      /* pale lime: the chosen answer, text selection */
    --ink: #1A1A17;    --ink-muted: #6B6B60;   /* graphite 16.4:1; warm grey 5.1:1 on paper, 4.9:1 on the bands */
    --line: #E4E0D5;   --line-strong: #1A1A17;
    --line-lime: #C9D78A;                      /* hairlines on the highlight ground */
    --line-surface: #D8D3C6;                   /* hairlines on the surface ground */
    --line-control: #85857B;                   /* resting control and slot borders, 3.2:1 or more */
    /* Graphite: the top strip, the workflow band and the footer. */
    --inverse: #1A1A17; --on-inverse: #FFFFFF; --on-inverse-muted: #A3A3A3; --line-inverse: #34342F;  /* 17.4:1, 6.9:1; lime 10.5:1 */
    /* Deep olive for small accents on white: the hero underline, workflow
       triggers, the form's underline (9.3:1 on paper, 8.9:1 on the bands). */
    --accent-ink: #3E4810; --wf-dot: #DDD8CC; --wf-lane: #CFC9BB;
    --lime: #BCD530;   /* logo files, and lime strokes on black only */
    --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px;
    --space-5: 48px; --space-6: 96px; --space-7: 160px;
    --radius-sm: 4px;
    --stroke-hair: 1px; --stroke-rule: 2px; --stroke-marker: 6px;
    --gutter: var(--space-5);
    /* Type ramp (brand book), as tokens. Phones step h2 and body-lg down. */
    --fs-display-xl: clamp(3rem, 6.2vw, 5.5rem);   /* 88px: the hero line */
    --fs-display: clamp(3rem, 5vw, 4rem);          /* 64px: the one figure */
    --fs-h1: clamp(2.25rem, 3.6vw, 3rem);          /* 48px: section heads */
    --fs-h2: 32px; --fs-h3: 22px;
    --fs-body-lg: 20px; --fs-body: 17px; --fs-small: 14px; --fs-eyebrow: 13px;
    /* Motion: four durations, one easing (the engine's --sc-ease-out). */
    --dur-quick: 150ms;    /* hover and press */
    --dur-step: 450ms;     /* one workflow step fading in */
    --dur-enter: 820ms;    /* a heading or block arriving, a marker drawing */
    --dur-build: 1000ms;   /* a rule drawing across, a screenshot opening */
    --dur-splash: 900ms;   /* the opening screen collapsing into the strip */

    /* The engine's six roles, mapped onto the brand. The accent role is ink:
       lime never leaks into selection, focus or progress. */
    --sc-canvas: var(--paper);  --sc-surface: var(--paper-alt);
    --sc-ink: var(--ink);       --sc-ink-soft: var(--ink-muted);
    --sc-accent: var(--ink);    --sc-accent-ink: var(--paper);
    --sc-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --sc-font-text: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --sc-gutter: var(--gutter);
  }
  @media (max-width: 760px) { :root { --gutter: var(--space-3); --fs-h2: 26px; --fs-body-lg: 18px; } }
  /* Section grounds, top to bottom: strip graphite, hero paper, how surface,
     workflow band graphite, services highlight, work paper, people surface,
     faq paper, close surface, footer graphite. Neighbours never share a ground. Lime
     itself never touches a light ground; olive does the small accents there. */

  body { font-size: var(--fs-body); line-height: 27px; letter-spacing: 0; }
  ::selection { background: var(--highlight); color: var(--ink); }
  :focus-visible { outline: var(--stroke-rule) solid var(--line-strong); outline-offset: 3px; border-radius: 0; }
  .on-inverse :focus-visible { outline-color: var(--on-inverse); }

  .skip { position: absolute; left: var(--gutter); top: -100px; z-index: 80; background: var(--inverse); color: var(--on-inverse); padding: var(--space-2) var(--space-3); font-weight: 700; font-size: var(--fs-small); }
  .skip:focus { top: var(--space-3); }

  .wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
  main > section, .foot { position: relative; z-index: 2; }

  /* ---------------------------------------------------------------- type */
  .section-h { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.02em; line-height: 1; margin: 0; text-wrap: balance; }
  .eyebrow { font-size: var(--fs-eyebrow); line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-2); }
  .lede { font-size: var(--fs-body-lg); line-height: 30px; max-width: 34em; margin: 0; text-wrap: pretty; }
  .body { max-width: 38em; margin: 0; text-wrap: pretty; }
  .small { font-size: var(--fs-small); line-height: 20px; font-weight: 500; }
  .muted { color: var(--ink-muted); }

  /* -------------------------------------------------------------- actions */
  .btn { display: inline-flex; align-items: center; font-size: var(--fs-small); line-height: 20px; font-weight: 700; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: var(--stroke-rule) solid var(--line-strong); text-decoration: none; cursor: pointer; transition: background-color var(--dur-quick) var(--sc-ease-out), color var(--dur-quick) var(--sc-ease-out), transform var(--dur-quick) var(--sc-ease-out); }
  /* Primary: ink fill, white type (19:1), inverting on hover. */
  .btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .btn:active { transform: translateY(1px); }
  @media (hover: hover) and (pointer: fine) { .btn--primary:hover { background: var(--paper); border-color: var(--ink); color: var(--ink); } }
  .link { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-thickness var(--dur-quick) var(--sc-ease-out); }
  @media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-thickness: var(--stroke-marker); } }

  /* The logo: kit files only, as <img>, never recoloured, filtered or
     stretched (width set, height auto). Tucked is never under 140px wide;
     the mark alone takes over below that. Clear space is half the m's height
     (the m is ~53% of the artwork's height), kept as margin around the link. */
  .mo-logo { display: inline-block; line-height: 0; --logo-w: 188px; margin: calc(var(--logo-w) * 0.115); margin-left: 0; }
  .mo-logo img { display: block; width: var(--logo-w); height: auto; }
  /* The Blueprint file has a little padding baked into its viewBox (476 vs
     458 units), so it is sized up to draw the logo at the same visible width. */
  .mo-logo--motion img { width: calc(var(--logo-w) * 1.04); max-width: none; margin: calc(var(--logo-w) * -0.02); }
  @media (max-width: 760px) { .mo-logo { --logo-w: 150px; } }
  /* Reduced motion: the page serves the static Tucked file instead (an SVG
     inside <img> does not always see the page's motion preference). */
  @media (prefers-reduced-motion: reduce) { .mo-logo--motion img { width: var(--logo-w); margin: 0; } }

  /* Image slots: placeholders, sized to the photo or screenshot that will
     replace them, and plainly labelled so nobody mistakes one for content.
     Swap each .slot for an <img> with the same aspect ratio. */
  .slot { position: relative; margin: 0; display: grid; place-items: center; padding: var(--space-4); text-align: center; background: var(--surface); border: var(--stroke-hair) dashed var(--line-control); }
  .slot span { max-width: 22em; font-size: var(--fs-small); line-height: 20px; font-weight: 500; color: var(--ink-muted); }
  .slot b { display: block; color: var(--ink); font-weight: 700; margin-bottom: var(--space-1); }
  .slot--screen { aspect-ratio: 16 / 10; }

  /* --------------------------------------------------------------- topbar */
  .topbar { background: var(--inverse); color: var(--on-inverse); }
  .topbar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .topbar .mo-logo { --logo-w: 140px; }  /* the kit's minimum for Tucked */
  .topbar__nav { display: flex; align-items: center; gap: var(--space-4); }
  .topbar__nav a { white-space: nowrap; }
  .topbar__short { display: none; }
  .topbar__nav a { font-size: var(--fs-small); line-height: 20px; font-weight: 700; color: var(--on-inverse); text-decoration: none; padding-block: var(--space-2); }
  @media (hover: hover) and (pointer: fine) { .topbar__nav a:not(.topbar__cta):hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } }
  /* The strip's call to action: a white outline on graphite (no lime fill),
     filling white on hover. */
  .topbar__nav .topbar__cta { padding: var(--space-2) var(--space-3); border: var(--stroke-rule) solid var(--on-inverse); border-radius: var(--radius-sm); transition: background-color var(--dur-quick) var(--sc-ease-out), color var(--dur-quick) var(--sc-ease-out); }
  @media (hover: hover) and (pointer: fine) { .topbar__nav .topbar__cta:hover { background: var(--on-inverse); color: var(--ink); } }

  /* ----------------------------------------------------------------- hero */
  .hero__body { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-5); align-items: end; padding-block: var(--space-7) var(--space-6); }
  /* display-xl (88px) at full width, per the type ramp. */
  .hero__line { font-size: var(--fs-display-xl); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; margin: 0; }
  .hero__line span { display: block; }
  .mark-word { position: relative; display: inline-block !important; }
  .mark-word svg { position: absolute; left: -2%; width: 104%; bottom: -0.16em; height: 0.2em; overflow: visible; }
  .mark-word path { fill: none; stroke: var(--accent-ink); stroke-linecap: round; }
  .mark-word path { stroke-width: 7; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw var(--dur-enter) var(--sc-ease-out) 350ms forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  .hero__desc { font-size: var(--fs-body-lg); line-height: 30px; max-width: 24em; margin: 0; text-wrap: pretty; }
  .hero__for { margin: var(--space-3) 0 0; max-width: 26em; color: var(--ink-muted); text-wrap: pretty; }
  .hero__act { margin-top: var(--space-4); }
  /* The three services, named under the call to action (exact names, brand
     order), so the first screen says what M.O. does. */
  .hero__svcs { list-style: none; margin: var(--space-5) 0 0; padding: var(--space-3) 0 0; border-top: var(--stroke-hair) solid var(--line); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
  .hero__svcs a { font-size: var(--fs-small); line-height: 20px; font-weight: 700; color: var(--ink); text-decoration: none; }
  @media (hover: hover) and (pointer: fine) { .hero__svcs a:hover { text-decoration: underline; text-decoration-color: var(--accent-ink); text-decoration-thickness: 2px; text-underline-offset: 5px; } }
  @media (max-width: 760px) {
    .topbar__nav a[href^="#"]:not(.topbar__cta), .topbar__nav a[href^="/#"]:not(.topbar__cta) { display: none; }  /* phones keep "Client login" and "Book a call" */
    .topbar__nav { gap: var(--space-3); }
    .topbar__long { display: none; } .topbar__short { display: inline; }
    .topbar__nav .topbar__cta { padding: 6px var(--space-3); }
    .hero__body { grid-template-columns: 1fr; gap: var(--space-4); padding-block: var(--space-6) var(--space-5); }
    /* h1 (48px) on phones, per the type ramp. */
    .hero__line { font-size: clamp(2.6rem, 12.4vw, 3rem); }
    .hero__desc { line-height: 27px; }
  }

  /* ------------------------------------------------------------------ how
     The problem in plain words, then the built version: four steps and a
     screenshot slot. No pinning, no scrubbing. */
  .how { background: var(--surface); padding-block: var(--space-6); }
  .how .steps li { border-color: var(--line-surface); }
  /* One 5/7 grid for both blocks, so the copy starts where the workflow does,
     and both sides top-aligned. */
  .how__intro { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-5); align-items: start; }
  .how__intro .lede { max-width: 32em; }
  /* The point of the section, given its weight: on its own above a hairline,
     with the olive marker under "a person" drawn as it arrives. */
  .how__point { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: var(--stroke-hair) solid var(--line-surface); font-size: var(--fs-h2); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; max-width: 20em; text-wrap: balance; }
  .how__point .mark-word path { stroke-width: 4; vector-effect: non-scaling-stroke; animation: none; transition: stroke-dashoffset var(--dur-enter) var(--sc-ease-out) 450ms; }
  .how__point.sc-in .mark-word path { stroke-dashoffset: 0; }
  .how__built { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-5); align-items: start; margin-top: var(--space-6); }
  .sub-h { font-size: var(--fs-h2); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
  .steps { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
  .steps li { padding-block: var(--space-3); border-top: var(--stroke-hair) solid var(--line); }
  .steps li:last-child { border-bottom: var(--stroke-hair) solid var(--line); }
  .steps h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 700; margin: 0; }
  .steps p { margin: 0; color: var(--ink-muted); }
  .signoff { margin: var(--space-4) 0 0; font-weight: 700; }
  .how__built > * { min-width: 0; }  /* lets the diagram scroll inside its frame instead of widening the page */
  /* The range: the intricate example, and
     the page's one black band, where lime can show. */
  .range { background: var(--inverse); color: var(--on-inverse); padding-block: var(--space-6); }
  .range .body { margin-top: var(--space-3); max-width: 40em; }
  .range .muted { color: var(--on-inverse-muted); }
  .range .wf { margin-top: var(--space-5); }
  .range .wf__canvas { border-color: var(--line-inverse); }
  .range .mark-word path { stroke: var(--lime); stroke-width: 4; vector-effect: non-scaling-stroke; }
  .range :focus-visible { outline-color: var(--on-inverse); }
  /* The build: the band is taller than the screen and its stage sticks, so
     scrolling assembles the diagram. JS fades nodes in and draws the links. */
  .range--build { height: 240vh; padding-block: 0; }
  .range--build .range__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
  .range--build .wf { width: min(100%, calc((100svh - 300px) * 1200 / 572)); }
  .wf-edge { stroke-dasharray: 1; }

  /* Workflow diagrams: drawn inline by tools/workflows.mjs, so they use
     Archivo and the page's tokens. Static: nothing animates. */
  .wf { margin: 0; }
  .wf__canvas { background: var(--paper); border: var(--stroke-hair) solid var(--line-surface); }  /* warm off-white, no lime (user, 2026-11-01) */
  .wf svg { display: block; width: 100%; height: auto; font-family: inherit; }
  .wf-dot { fill: var(--wf-dot); }
  .wf-lane { fill: none; stroke: var(--wf-lane); stroke-width: 1; stroke-dasharray: 4 4; }
  .wf-lane-l { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; fill: var(--ink-muted); }
  .wf-edge { fill: none; stroke: var(--line-control); stroke-width: 1.5; }
  .wf-tag { font-size: 10.5px; font-weight: 700; fill: var(--ink); }
  .wf-tag-bg { fill: #FFFFFF; stroke: var(--line-control); stroke-width: 1; }
  .wf-node > rect { fill: #FFFFFF; stroke: var(--ink); stroke-width: 1.25; }
  .wf-node > .wf-bar { fill: var(--accent-ink); stroke: none; }
  .wf-t { font-weight: 700; fill: var(--ink); }
  .wf-s { font-weight: 500; fill: var(--ink-muted); }
  .wf-port { fill: #FFFFFF; stroke: var(--ink); stroke-width: 1.25; }
  .wf figcaption { margin-top: var(--space-2); }
  .wf__canvas:focus-visible { outline-offset: 3px; }
  @media (max-width: 760px) {
    .how { padding-block: var(--space-5); }
    .how__intro, .how__built { grid-template-columns: 1fr; gap: var(--space-4); }
    .how__point { font-size: var(--fs-h3); }
    .how__built { margin-top: var(--space-5); }
    .range, .range--build { height: auto; padding-block: var(--space-5); }
    .range--build .range__stage { position: static; height: auto; }
    /* The intricate diagram is unreadable at phone width, so it keeps a
       readable size and scrolls sideways inside its own frame. The simple
       one scales to fit: its steps are listed right above it. */
    .wf--wide .wf__canvas { overflow-x: auto; }
    .wf--wide svg { min-width: 860px; }
  }

  /* ------------------------------------------------------------- services
     A calm, scannable list: names at h2 scale, the who-and-what beside. */
  .services { background: var(--highlight); padding-block: var(--space-6); }
  .services .svc { border-color: var(--line-lime); }
  .svc-list { margin-top: var(--space-5); }
  .svc { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-5); align-items: baseline; padding-block: var(--space-4); border-top: var(--stroke-hair) solid var(--line); }
  .svc:last-child { border-bottom: var(--stroke-hair) solid var(--line); }
  .svc h3 { font-size: var(--fs-h2); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
  .svc__desc { margin: 0; max-width: 34em; text-wrap: pretty; }
  .svc__desc strong { display: block; font-size: var(--fs-eyebrow); line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-2); }
  .svc.is-lead .svc__desc strong { color: var(--ink); }
  /* Fractional Ops & Tech, in plain words: the line an owner gets at once,
     then what it looks like in a week. */
  .svc__plain { display: block; margin-bottom: var(--space-2); font-size: var(--fs-body-lg); line-height: 1.4; font-weight: 700; }
  .svc__examples { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
  .svc__examples li { position: relative; padding-left: var(--space-4); }
  .svc__examples li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 12px; height: 2px; background: var(--accent-ink); }
  @media (max-width: 760px) {
    .services { padding-block: var(--space-5); }
    .svc { grid-template-columns: 1fr; gap: var(--space-2); }
  }

  /* ----------------------------------------------------------------- work */
  .work { background: var(--paper); padding-block: var(--space-6); }
  .work__intro { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-5); align-items: end; }
  .ledger { list-style: none; margin: var(--space-6) 0 0; padding: 0; }
  .case { padding-block: var(--space-6); border-top: var(--stroke-hair) solid var(--line-strong); }
  .case:first-child { padding-top: var(--space-5); }
  .case:last-child { padding-bottom: 0; }
  /* Who: the client, the industry and the services, on one line. */
  .case__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); }
  .case h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 700; margin: 0; }
  .case__head .small { margin: 0; }
  .case__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .case__tags li { font-size: var(--fs-small); line-height: 20px; font-weight: 700; padding: 2px var(--space-2); border: var(--stroke-hair) solid var(--line-control); border-radius: var(--radius-sm); }
  /* The result: the biggest thing in the case. */
  .case__label { margin: var(--space-5) 0 var(--space-2); }
  .case__result { margin: 0; max-width: 18em; font-size: var(--fs-h1); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
  /* Then the story beside the proof, on the page's 5/7 grid. */
  .case__body { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-5); align-items: start; margin-top: var(--space-5); }
  .case__story { margin: 0; display: grid; gap: var(--space-4); }
  .case__story > div { padding-top: var(--space-3); border-top: var(--stroke-hair) solid var(--line); }
  .case dt { font-size: var(--fs-eyebrow); line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-2); }
  .case dd { margin: 0; font-size: var(--fs-body-lg); line-height: 1.5; text-wrap: pretty; }
  /* The proof: a real screenshot of the site we built, linked to it. */
  .case__shot { margin: 0; }
  .case__shot a { display: block; line-height: 0; border: var(--stroke-hair) solid var(--line-control); }
  .case__shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
  .case__shot figcaption { margin-top: var(--space-2); }
  @media (hover: hover) and (pointer: fine) { .case__shot a:hover { border-color: var(--ink); } }
  .case__signoff { margin: var(--space-5) 0 0; padding-top: var(--space-3); border-top: var(--stroke-hair) solid var(--line); font-weight: 700; }
  .ph { color: var(--ink-muted); }
  .ph::before { content: "["; } .ph::after { content: "]"; }
  @media (max-width: 760px) {
    .work { padding-block: var(--space-5); }
    .work__intro { grid-template-columns: 1fr; gap: var(--space-4); }
    .case { padding-block: var(--space-5); }
    .case__body { grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-4); }
    .case__label { margin-top: var(--space-4); }
  }

  /* --------------------------------------------------------------- people */
  .people { background: var(--surface); padding-block: var(--space-6); }
  .people .people__how { border-top-color: var(--line-surface); }
  .people__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-5); align-items: start; }  /* the same 5/7 as the how section */
  .figure { display: flex; align-items: baseline; gap: var(--space-3); margin: var(--space-5) 0 0; flex-wrap: wrap; }
  .figure__n { font-size: var(--fs-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
  .figure__l { font-size: var(--fs-body); line-height: 1.4; font-weight: 700; max-width: 14em; }
  /* The founders as text: name and background, each under a hairline. */
  .founders { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .founders li { padding-top: var(--space-3); border-top: var(--stroke-hair) solid var(--line-surface); }
  .founders h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 700; margin: 0; }
  .founders p { margin: var(--space-1) 0 0; }
  .founders__in { display: inline-block; margin-top: var(--space-2); font-size: var(--fs-small); line-height: 20px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent-ink); text-decoration-thickness: 2px; text-underline-offset: 5px; }
  @media (hover: hover) and (pointer: fine) { .founders__in:hover { text-decoration-thickness: var(--stroke-marker); } }
  /* Daniel's line, as a pull quote: the brand's argument in a founder's words. */
  .people__quote { margin: var(--space-5) 0 0; }
  .people__quote::before { content: ""; display: block; width: 40px; height: 2px; margin-bottom: var(--space-3); background: var(--accent-ink); }
  .people__quote blockquote { margin: 0; }
  .people__quote p { margin: 0; font-size: var(--fs-body-lg); line-height: 1.5; font-weight: 500; text-wrap: pretty; }
  .people__quote figcaption { margin-top: var(--space-2); font-size: var(--fs-small); line-height: 20px; font-weight: 700; color: var(--ink-muted); }
  .people__how { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--stroke-hair) solid var(--line); }
  @media (max-width: 760px) {
    .people { padding-block: var(--space-5); }
    .people__grid { grid-template-columns: 1fr; }
    .founders { grid-template-columns: 1fr; }
  }

  /* ------------------------------------------------------------------ faq
     Native details/summary: open and close without script, and the answers
     are in the page for search engines and AI tools either way. */
  .faq { background: var(--paper); padding-block: var(--space-6); }
  .faq__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-5); align-items: start; }
  .faq__lead { margin-top: var(--space-3); }
  .faq__item { border-top: var(--stroke-hair) solid var(--line); }
  .faq__item:last-child { border-bottom: var(--stroke-hair) solid var(--line); }
  .faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding-block: var(--space-4); }
  .faq__item summary::-webkit-details-marker { display: none; }
  .faq__item summary::after { content: "+"; flex: none; font-size: var(--fs-h3); line-height: 1; font-weight: 500; color: var(--accent-ink); transition: transform var(--dur-quick) var(--sc-ease-out); }
  .faq__item[open] summary::after { transform: rotate(45deg); }
  .faq__item h3 { margin: 0; font-size: var(--fs-h3); line-height: 1.3; font-weight: 700; }
  .faq__item p { margin: 0 0 var(--space-4); max-width: 38em; text-wrap: pretty; }
  @media (hover: hover) and (pointer: fine) { .faq__item summary:hover h3 { text-decoration: underline; text-decoration-color: var(--accent-ink); text-decoration-thickness: 2px; text-underline-offset: 5px; } }

  /* ---------------------------------------------------------------- close
     The quietest screen on the page: small type, a two-way choice, three
     fields and one underlined action. */
  .close { background: var(--surface); padding-block: var(--space-6); }
  .close__start { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-4); max-width: 30em; }
  .close__start li { padding-top: var(--space-3); border-top: var(--stroke-hair) solid var(--line-surface); }
  .close__start strong { display: block; margin-bottom: var(--space-1); font-size: var(--fs-h3); line-height: 1.3; font-weight: 700; }
  .close__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-5); }
  .close__lead { margin: var(--space-4) 0 0; max-width: 24em; }
  .inquiry { display: grid; gap: var(--space-4); max-width: 36rem; }
  .pick { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
  .pick legend { padding: 0; margin-bottom: var(--space-2); }
  .pick label { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; padding: var(--space-3); border: var(--stroke-hair) solid var(--line-control); transition: border-color var(--dur-quick) var(--sc-ease-out); }
  .pick input { appearance: none; flex: none; width: 18px; height: 18px; margin: 4px 0 0; border: var(--stroke-rule) solid var(--line-strong); border-radius: 999px; display: grid; place-items: center; background: var(--paper); }
  .pick input:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
  .pick label:has(input:focus-visible) { border-color: var(--line-strong); }
  .pick input::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--ink); transform: scale(0.95); opacity: 0; transition: opacity var(--dur-quick) var(--sc-ease-out); }
  .pick input:checked::after { opacity: 1; }
  .pick label:has(input:checked) { border-color: var(--line-strong); }
  @media (hover: hover) and (pointer: fine) { .pick label:hover { border-color: var(--line-strong); } }
  .pick__answer { margin: 0; min-height: 0; }
  .pick__answer:empty { display: none; }
  .field { display: grid; gap: var(--space-2); }
  .field span { font-size: var(--fs-small); line-height: 20px; font-weight: 700; }
  .field input, .field textarea { border: var(--stroke-rule) solid var(--line-strong); border-radius: 0; background: transparent; color: var(--ink); caret-color: var(--ink);  /* no fill: the form sits on the page (user, 2026-11-01) */ padding: 12px var(--space-3); font: inherit; font-size: var(--fs-body); line-height: 27px; }
  .field input::placeholder, .field textarea::placeholder { color: var(--ink-muted); opacity: 1; }
  /* Keep Chrome's autofill from tinting the fields. */
  .field input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: inset 0 0 0 100px var(--paper); caret-color: var(--ink); }
  .field textarea { resize: vertical; min-height: 6.5rem; }
  .field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
  .text-cta { justify-self: start; background: none; border: 0; padding: var(--space-2) 0; font-weight: 700; font-size: var(--fs-body); line-height: 27px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent-ink); text-decoration-thickness: 2px; text-underline-offset: 6px; cursor: pointer; transition: text-decoration-thickness var(--dur-quick) var(--sc-ease-out); }
  .text-cta:active { transform: translateY(1px); }
  @media (hover: hover) and (pointer: fine) { .text-cta:hover { text-decoration-thickness: var(--stroke-marker); } }
  .form-note { margin: 0; }
  .form-error { margin: 0; font-weight: 700; }
  .form-error:empty { display: none; }
  @media (max-width: 760px) {
    .close { padding-block: var(--space-5); }
    .faq { padding-block: var(--space-5); }
    .faq__grid { grid-template-columns: 1fr; gap: var(--space-4); }
    .close__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  }

  /* --------------------------------------------------------------- footer */
  /* The footer is the page's one black moment, and the one place the lime
     mark appears (lime mark, white "solutions", on black). */
  .foot { background: var(--inverse); color: var(--on-inverse); padding-block: var(--space-6) var(--space-5); }
  .foot__grid { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4) var(--space-5); align-items: end; }
  .foot__line { margin: 0; font-size: var(--fs-h3); line-height: 1.3; font-weight: 700; }
  .foot nav { display: flex; gap: var(--space-4); flex-wrap: wrap; }
  .foot nav a { color: var(--on-inverse); font-size: var(--fs-small); line-height: 20px; font-weight: 700; text-decoration: none; padding-block: var(--space-2); }
  @media (hover: hover) and (pointer: fine) { .foot nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } }
  .foot__legal { grid-column: 1 / -1; margin: 0; color: var(--on-inverse-muted); padding-top: var(--space-4); border-top: var(--stroke-hair) solid var(--line-inverse); }
  .foot__legal a { color: inherit; text-underline-offset: 3px; }
  @media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr; } }

  /* ------------------------------------------------------- section motion
     Entrances, once each, on top of the engine's data-sc-in (fade and a 14px
     rise). Every one says something: the line lands, the steps build in
     order, a service row is ruled in, a screenshot opens. Nothing loops. */
  @keyframes rise { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
  .hero__line > span { animation: rise var(--dur-enter) var(--sc-ease-out) both; }
  .hero__line > span + span { animation-delay: 140ms; }
  .hero__aside { animation: rise var(--dur-enter) var(--sc-ease-out) 380ms both; }
  .hero__line .mark-word path { animation-delay: 900ms; }
  /* Services: each row's hairline draws across as the row arrives. */
  .svc { border-top: 0; position: relative; }
  .svc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-lime); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-build) var(--sc-ease-out); transition-delay: inherit; }
  .svc.sc-in::before { transform: none; }
  /* Work: the screenshot opens left to right as the case arrives. */
  .case .slot, .case__shot a { clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-build) var(--sc-ease-out) 160ms; }
  .case.sc-in .slot, .case.sc-in .case__shot a { clip-path: inset(0); }
  .case__result { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity var(--dur-enter) var(--sc-ease-out) 200ms, transform var(--dur-enter) var(--sc-ease-out) 200ms; }
  .case.sc-in .case__result { opacity: 1; transform: none; }
  /* The simple workflow builds its four steps in order when it comes into
     view: each step fades in, then the line to the next one draws. */
  .wf--simple .wf-node { opacity: 0; transition: opacity var(--dur-step) var(--sc-ease-out); }
  .wf--simple .wf-edge { stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-step) var(--sc-ease-out); }
  .wf--simple.is-built .wf-node { opacity: 1; }
  .wf--simple.is-built .wf-edge { stroke-dashoffset: 0; }

  /* ---------------------------------------------------------------- splash
     The opening: a graphite screen where the mo draws itself (the approved
     Blueprint file), then the graphite collapses up into the top strip while
     the logo glides into its place in the header. Built by the script at the
     top of <body>; never present without JavaScript, under reduced motion,
     on a deep link, or after the first view in a tab. */
  .splash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--inverse); clip-path: inset(0 0 0 0); transition: clip-path var(--dur-splash) var(--sc-ease-out), opacity 250ms var(--sc-ease-out); }
  .splash__logo { width: min(440px, 66vw); height: auto; transform-origin: 0 0; transition: transform var(--dur-splash) var(--sc-ease-out); }
  html.is-splashing { overflow: hidden; }
  /* The hero waits behind the splash and plays its entrance as it opens. */
  .is-splashing .hero__line > span, .is-splashing .hero__aside, .is-splashing .hero__line .mark-word path { animation-play-state: paused; }

  /* Without JavaScript nothing waits for an entrance: everything is simply
     there (the engine's data-sc-in would otherwise leave it at opacity 0). */
  html:not(.js) [data-sc-in], html:not(.js) [data-sc-stagger] > * { opacity: 1; transform: none; }
  html:not(.js) .wf--simple .wf-node { opacity: 1; }
  html:not(.js) .wf--simple .wf-edge, html:not(.js) .how__point .mark-word path { stroke-dashoffset: 0; }
  html:not(.js) .svc::before { transform: none; }
  html:not(.js) .case .slot, html:not(.js) .case__shot a { clip-path: none; }
  html:not(.js) .case__result { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .splash { display: none; }
    .mark-word path, .how__point .mark-word path { animation: none; transition: none; stroke-dashoffset: 0; }
    .hero__line > span, .hero__aside { animation: none; }
    .svc::before { transform: none; transition: none; }
    .case .slot, .case__shot a { clip-path: none; transition: none; }
    .case__result { transform: none; transition: opacity var(--dur-enter) var(--sc-ease-out); }
    .wf--simple .wf-node { opacity: 1; transition: none; }
    .wf--simple .wf-edge { stroke-dashoffset: 0; transition: none; }
    .range--build { height: auto; padding-block: var(--space-6); }
    .range--build .range__stage { position: static; height: auto; }
  }

/* pages:start: service and case-study pages (written by tools/pages.py) */
  .crumbs ol { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-small); line-height: 20px; color: var(--ink-muted); }
  .crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--line-control); }
  .crumbs a { color: var(--ink-muted); text-decoration: none; }
  @media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; } }
  .page-hero { background: var(--paper); padding-block: var(--space-6); }
  .page-hero__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-5); align-items: start; }
  .page-hero__h { margin: 0; font-size: var(--fs-display); line-height: 1; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
  .page-hero__plain { margin: 0 0 var(--space-3); font-size: var(--fs-h2); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
  .page-hero__who { margin-top: var(--space-3); }
  .page-hero__act { margin: var(--space-5) 0 0; }
  .page-block { background: var(--paper); padding-block: var(--space-6); }
  .page-block--surface { background: var(--surface); }
  .page-block__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-5); align-items: start; }
  .page-block__note { margin-top: var(--space-4); }
  .page-block__p + .page-block__p { margin-top: var(--space-4); }
  .page-block .svc__examples { margin: 0; gap: var(--space-3); font-size: var(--fs-body-lg); line-height: 1.5; }
  .signs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
  .signs li { padding-block: var(--space-3); border-top: var(--stroke-hair) solid var(--line); font-size: var(--fs-body-lg); line-height: 1.5; }
  .signs li:last-child { border-bottom: var(--stroke-hair) solid var(--line); }
  .proofs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
  .proof { display: grid; gap: var(--space-2); color: var(--ink); text-decoration: none; }
  .proof img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border: var(--stroke-hair) solid var(--line-control); }
  .proof__name { margin-top: var(--space-2); font-size: var(--fs-h3); line-height: 1.3; font-weight: 700; }
  .proof__line { color: var(--ink-muted); }
  .proof__more { font-size: var(--fs-small); line-height: 20px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent-ink); text-decoration-thickness: 2px; text-underline-offset: 5px; }
  @media (hover: hover) and (pointer: fine) { .proof:hover img { border-color: var(--ink); } .proof:hover .proof__more { text-decoration-thickness: var(--stroke-marker); } }
  .page-cta { background: var(--inverse); color: var(--on-inverse); padding-block: var(--space-6); }
  .page-cta__in { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-5); align-items: start; }
  .page-cta .lede { color: var(--on-inverse); }
  .page-cta__act { margin: var(--space-4) 0 0; }
  .page-cta :focus-visible { outline-color: var(--on-inverse); }
  .btn--light { background: var(--on-inverse); color: var(--ink); border-color: var(--on-inverse); }
  @media (hover: hover) and (pointer: fine) { .btn--light:hover { background: transparent; color: var(--on-inverse); } }
  .case-page__name { margin: 0; font-size: var(--fs-h2); line-height: 1.15; font-weight: 700; }
  .case-page__result { font-size: var(--fs-display); max-width: 16em; }
  /* On the case pages the result and screenshot aren't inside .case, so they
     run their own entrance: the result is simply there, the shot wipes open. */
  .case-page__result { opacity: 1; transform: none; }
  .case-page__shot.sc-in a, html:not(.js) .case-page__shot a { clip-path: inset(0); }
  .case-page__shot { max-width: 1104px; }
  .next-case { background: var(--surface); }
  .next-case a { display: grid; gap: var(--space-1); padding-block: var(--space-5); color: var(--ink); text-decoration: none; }
  .next-case__name { font-size: var(--fs-h2); line-height: 1.15; font-weight: 700; }
  @media (hover: hover) and (pointer: fine) { .next-case a:hover .next-case__name { text-decoration: underline; text-decoration-color: var(--accent-ink); text-decoration-thickness: 3px; text-underline-offset: 8px; } }
  .svc__more { display: block; width: fit-content; margin-top: var(--space-3); font-size: var(--fs-small); line-height: 20px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent-ink); text-decoration-thickness: 2px; text-underline-offset: 5px; }
  @media (hover: hover) and (pointer: fine) { .svc__more:hover { text-decoration-thickness: var(--stroke-marker); } }
  @media (max-width: 760px) {
    .page-hero, .page-block, .page-cta { padding-block: var(--space-5); }
    .page-hero__grid, .page-block__grid, .page-cta__in { grid-template-columns: 1fr; gap: var(--space-4); }
    .page-hero__h { font-size: var(--fs-h1); }
    .proofs { grid-template-columns: 1fr; }
    .case-page__result { font-size: var(--fs-h1); }
  }
/* pages:end */