/* ============================================================
   HOME PAGE ONLY (loaded by index.html after ds.css)
   The hero (the owner, 2026-10-22: "keep the homepage in line with all other
   heros", "remove the red and black", "implement the hero pattern on
   homepage"). Home uses the shared full-bleed photo hero in ds.css, the same
   as About, Contact, What we build and How we work: a photograph edge to
   edge, the heading, the line under it and the button together on its quiet
   left side over the side fade ds.css draws (D-28, Guy, 2026-10-23). The red
   and black capsule stack, its wave (hero-stack.js) and the rules that
   fitted the words above the cookie bar are gone with it. Sections 1, 3, 6
   and 7 below were those rules. The hero button: see 11. The hero's type,
   its softer fade, its phone height and its opening move: see 13 (D-31 to
   D-34, Guy, 2026-10-23). They are set here, so no other page's hero changes,
   except the heading's size, which every hero shares from ds.css since
   2026-10-27 (Guy: "make the hero font sizes all the same as the home page").
   2. "How we start" (D-37, Guy, 2026-10-24: Maya's staircase; on white since
      Maya's white-body plan, 2026-10-27, see 14). The four steps stack down
      the page as a staircase, each starting an eighth of the width further
      right than the one above (no indent on a phone). Each step is an open
      row on the white page: no fill and no corner, a 1px hairline (--line,
      #e6e6e6) above it. The step word is large on the left and its sentence
      on the right. "Before the next step" sits in the gap under each row,
      lined up with the row's text, with no border: the red tick marks it.
      Step labels and the tick are #c60000 (--red-deep): #ff1717 reaches only
      3.9:1 on white, #c60000 6.2:1. Step words are ink, sentences #333. The
      beige capsule stack sits beside the heading and opens one step further
      as each step comes into view (home-motion.js, 7b); the heading keeps
      --pad-band (36px or more) clear of the stack (exception 4); the stack is
      120px to 200px wide, 120px on a phone.
   4. "Our point of view" (Freya's direction H2, 2026-10-21): one photo-led
      set. Each card is a photograph that fills the whole card, edge to edge,
      the three cards touching across the full width of the screen. The title
      sits in the card's lower third over a fade drawn here, white, never over
      a face. Every line of text sits on 0.8 black or more. Hover and focus
      underline "Read"; nothing scales (design system: hover is never a scale).
   5. White sections (the owner, 2026-10-22: "change sections to have white
      background"; Guy, 2026-10-27: the hero, nav and footer stay black, the
      body uses white, "the approval moment alone"). Every section below the
      hero sits on white except one black band, the approval moment (see 10).
      The clover field keeps its one red mark, with the other clovers in the
      hairline grey so the field stays quiet on white.
   8. "Ideas we build on" (the owner, 2026-10-22: "the outlined rounded cards
      clash with 'no big blocks'"). The three ideas are open text on the
      white page: no outline, no corner, no fill, no shadow and no lift. The
      wider gaps between them do the separating. The text links under them
      were removed (Guy, 2026-10-27), so no column is a link.
      Without the boxed card's transform transition, Motion's rise into
      view settles cleanly, with no jump at the end.
   9. Motion (Freya's Home motion spec, D-25, 2026-10-22; the moves are in
      home-motion.js). The hero photograph drifts inside its own frame (row
      1d), so the frame clips it; it is the hero's only scroll move (D-28).
      The hero heading's one entrance on load is in 13 (D-34 amends D-28).
      The red figure-8 keeps its inner box, where flower.js builds its loop;
      since 2026-10-29 it no longer drifts or settles (9b and 9c, see 10).
      Point of view cards lift -5px on hover and focus (P1, design system
      post cards). "Before the next step" gets a small red tick that
      home-motion.js draws and lands (7a); without script or with reduced
      motion there is no tick. The "How we start" rows rise into view once
      on the brand ease, never a spring (7c).
   10. The approval moment (Guy, 2026-10-22: the approval-moment section
      approved; the one-peak page of Maya and Freya, "ok build the preview",
      2026-10-23). One black band, the page's peak, and since 2026-10-27 the
      body's only dark run: cut hard top and bottom, no line, no fade. The
      figure is the design system's agent pipeline (intake, agent, human
      review, record) set as live HTML so it reads on a phone. Since
      2026-10-29 it follows Diagram rules 2.0.0 (Freya's Home motion brief,
      Guy: "approvaed", 2026-10-29): #0d0d0d capsules with a #2a2a2a
      hairline and Regular white words, no numerals, flow lines 1.5px warm
      grey #7B766F with square ends and no arrowheads, Inter (brand rule 8).
      Red #c60000 with white words sits only on the one step at work: each
      lit step is a layer (its "am-live", with its own copy of the label)
      that home-motion.js fades in as the line reaches it, so only opacity
      changes and only one is red at a time. "Human review" is the last red
      step and lifts -4px when it lights. Without script and with reduced
      motion the figure shows finished: every line drawn, "Human review"
      red and not lifted, every other step black. The escalation branch is
      left out until its labels are approved. Labelled "Illustration",
      never a product screen. No pinned hold: it waits for a
      design-system exception.
      In "The new playbook is live" the figure-8 no longer drifts with the
      scroll or settles on the bounce (the brief, 2026-10-29). Its flower
      loop (flower.css, flower.js) is unchanged until Guy decides on it.
   11. Buttons. The hero button reads "Start a conversation" (BR-CA01;
      Freya's brand audit, 2026-10-27) and is the page's one solid button (D-30, Guy, 2026-10-23): Signal
      green #0A7A3B with a white label in Inter 700, deepening to #086832 on
      hover and focus with the -2px lift (design system exception 8: at most
      one green button in a view; the focus ring is never green, so it is
      white on the photograph). Its 16px label and 56px height are in 13.
      --cta and --cta-hover are declared here for Home until the shared
      stylesheets carry them. The closing "Start a conversation" is a
      tinted wash (btn-wash, no longer btn-red: BR-CA06, 2026-10-27) at its hover shade at rest (14% black on white), with the
      arrow (Guy, 2026-10-22: options 1 and 2). Hover and focus slide the
      arrow 4px.
   12. "The new playbook is live" (D-26, Guy, 2026-10-23; on white since
      2026-10-27): the design system's statement band with the figure beside
      the line, ink on white (ds.css "stage.paper"). The red figure-8 is
      large on the right and the words on the left, with at least
      64px between them, so the artwork never reaches the words; on a phone
      it sits under them with 96px clear.
   13. The hero, made less flat (Maya's plan and Freya's check; Guy approved
      them on 2026-10-23 as D-31 to D-34). The headline is three stacked
      lines, "Agentic / Business / Platforms", the last word bold, at the
      largest scale size that fits its column: h-xl on wide screens (83px at
      1440px) and display under 900px, where the column takes the full width
      (48px on a 390px phone). The line under it drops to the body size (D-32)
      and stays italic. The button's label is 16px and the button 56px tall
      (Guy's yes, outside BR-T08's btn .86rem). The side fade is softer: 82%
      black at the left edge, 70% at 40% across, clear by 62%; the text column
      ends before 40%, so every line sits on 70% black or more. On a phone the
      hero is 150% of the screen's width and at least 600px tall below the
      bar, with the person of D-33 above the text. The photograph is the
      fictional person deciding (D-33; Guy, 2026-10-24: "make the picture no
      image tag needed"): on wide screens the crop shows more of its quiet
      left side, so the person stands right of where the fade clears; phones
      get their own 900px copy, cropped around the person, so they never load
      the wide file. The heading's lines rise into place on load
      (D-34): 44px up and in, in reading order, 80 ms apart, over .6s on the
      brand ease, never a spring. It is CSS, so the heading needs no script
      and never blinks out while scripts load; with reduced motion it is
      simply there.
   14. The white body's rhythm (Maya's spacing plan, 2026-10-27; Guy: "build
      a preview", draft only). One rule for every gap:
      - Every body section has the same padding top and bottom, G
        (--space-section-loose: 143px on an 844px-tall phone, 160px on a
        900px-tall screen, 184px at 1080px, 220px at most).
      - Where two white sections meet, the second drops its top padding, so
        the gap between them is G once, not twice. Where white meets the
        black run, each side keeps its G and the colour edge sits between.
      - The closing call to action has no hairline above it and no padding
        of its own on top (Guy, 2026-10-26: "remove the thin border").
      - Heading or lead to content (grid, diagram, steps, cards): 32px on a
        phone, 48px on a tablet, 64px from 1200px (--space-block, then
        --space-8). Heading to its lead stays --space-head-body.
      - Every body section heading takes one size, --type-h-section (h-lg,
        67px at 1440px); only the hero is larger. Columns in every three-up
        grid are --gap-lg.
      Not yet approved: BR-K02 (bands alternate) is still in force, and this
      draft puts white sections side by side; the design-system change and
      BR-Q01 to BR-Q03 wait for Guy.
   Tokens only: base.css, site.css and ds.css declare every value used here,
   except --cta and --cta-hover (section 11, design system exception 8),
   --type-h-section (14, site.css's h-lg size given a name), the design
   system's --type-body, --type-small, --type-meta and --leading-heading (14,
   Design-tokens.md, tokens/typography.css, which the site's stylesheets do
   not declare yet), and the hero's
   16px label and 56px button height (13, the owner's approval).
   ============================================================ */

/* ---------- 2. How we start: a staircase of open rows on white ---------- */
/* the heading, with the beige capsule stack beside it and the full clear space around the artwork (36px or more, exception 4) */
.fv-site .start-stair .st-head{ display:flex; align-items:flex-end; gap:var(--pad-band); }
.fv-site .start-stair .st-head h2{ margin:0; }
.fv-site .st-fan{ position:relative; flex:none; width:clamp(120px,14vw,200px); margin:0; }
.fv-site .st-fan > img{ display:block; width:100%; height:auto; }
.fv-site .st-fan.is-split > img{ visibility:hidden; }
.fv-site .st-fan .ds-layer{ position:absolute; inset:0; will-change:transform; transition:transform var(--dur-reveal) var(--ease-out-expo); }
.fv-site .st-fan .ds-layer svg{ display:block; width:100%; height:100%; overflow:visible; }
/* the staircase: each row an eighth of the width further right than the one above */
.fv-site .st-stair{ list-style:none; margin:var(--space-block) 0 0; padding:0; container-type:inline-size; }
.fv-site .st-row{ --i:0; margin-left:calc(var(--i) * 12.5%); }
.fv-site .st-row:nth-child(2){ --i:1; }
.fv-site .st-row:nth-child(3){ --i:2; }
.fv-site .st-row:nth-child(4){ --i:3; }
/* each step an open row: a hairline above, no fill, no corner; the step word on the left, its sentence on the right, the sentence's last line on the word's baseline (Maya's alignment plan, Freya's step B, 2026-10-27) */
.fv-site .st-card{ display:grid; grid-template-columns:auto minmax(0,40ch); justify-content:space-between; align-items:last baseline; gap:var(--space-5) var(--gap-lg);
  padding:var(--pad-card) 0 0; background:none; border:0; border-top:1px solid var(--line); border-radius:0; color:var(--ink); }
.fv-site .st-card .hs-label{ color:var(--red-deep); }
.fv-site .st-card h3{ margin-top:var(--space-3); font-size:var(--type-h-xl); line-height:var(--leading-heading); letter-spacing:-0.02em; color:var(--ink); }
.fv-site .st-card .body{ font-size:var(--type-body); line-height:1.5; color:var(--muted); }
.fv-site .st-card .hs-more{ display:inline-block; margin-top:var(--space-5); font-weight:800; color:var(--ink);
  text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:.14em;
  transition:color var(--dur-hover) ease, text-decoration-color var(--dur-hover) var(--ease-out-expo); }
.fv-site .st-card .hs-more:hover, .fv-site .st-card .hs-more:focus-visible{ color:var(--red-deep); text-decoration-color:currentColor; }
.fv-site .st-card .hs-more:focus-visible{ outline:3px solid var(--red-deep); outline-offset:3px; }
/* "How we work" sits under the steps, not inside step 4, so every row has the same parts: the same as the other two after-links, ink at rest, #c60000 on hover, the red focus outline (Freya's step A, 2026-10-27) */
.fv-site .start-stair .ds-after a{ color:var(--ink); }
.fv-site .start-stair .ds-after a:hover{ color:var(--red-deep); }
.fv-site .start-stair .ds-after a:focus-visible{ outline:3px solid var(--red-deep); outline-offset:3px; }
/* the gate sits in the gap under its row, where the next row steps in, lined up with the row's text; no border, the red tick marks it */
.fv-site .st-row .hs-gate{ margin:0; padding:var(--space-6) 0; max-width:44ch; }
@supports (width:1cqi){
  .fv-site .st-row:not(:last-child) .hs-gate{ padding-left:12.5cqi; max-width:calc(44ch + 12.5cqi); }
}
.fv-site .st-row .hs-gate dt{ font-weight:800; font-size:var(--type-meta); letter-spacing:.02em; color:var(--ink); }
.fv-site .st-row .hs-gate dd{ margin:var(--space-1) 0 0; color:var(--muted); line-height:1.5; }
/* narrower screens: the sentence goes under the step word inside the row */
@media (max-width:1180px){
  .fv-site .st-card{ grid-template-columns:minmax(0,1fr); justify-content:normal; align-items:start; }
  .fv-site .st-card .st-say{ max-width:44ch; }
}
/* phones: no indent, one column, a large gap between steps */
@media (max-width:760px){
  .fv-site .st-row, .fv-site .st-row:nth-child(n){ margin-left:0; }
  .fv-site .st-row .hs-gate, .fv-site .st-row:not(:last-child) .hs-gate{ padding-left:0; max-width:none; }
  .fv-site .st-fan{ width:120px; }
}

/* ---------- 4. Our point of view: one photo-led set ---------- */
.fv-site .pov-set{ list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:var(--space-block) 0 0; padding:0; }
.fv-site .pov-set > li{ position:relative; }
.fv-site .pov-card{ position:relative; display:flex; align-items:flex-end; aspect-ratio:4/5; max-height:min(80svh, 760px); width:100%; height:100%;
  overflow:hidden; background:var(--black); color:var(--white); text-decoration:none; }
.fv-site .pov-bg{ position:absolute; inset:0; z-index:0; margin:0; }
.fv-site .pov-bg img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 30%; border-radius:0; }
/* where each photograph's subject sits, so the upright crop keeps it */
.fv-site .pov-bg img[src*="city-article-per-seat-spend"]{ object-position:40% 50%; }
/* the fade belongs to the text block: every line sits on 0.8 black or more, and it clears above */
.fv-site .pov-copy{ position:relative; z-index:1; width:100%; display:flex; flex-direction:column; gap:var(--space-3);
  padding:calc(var(--pad-card) + 96px) var(--pad-card) var(--pad-card);
  background:linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.8) calc(100% - 96px), rgba(0,0,0,0) 100%); }
.fv-site .pov-copy h3{ font-size:var(--type-h-sm); font-weight:400; line-height:var(--leading-heading); letter-spacing:-0.02em; color:var(--white); max-width:18ch; }
.fv-site .pov-copy h3 strong{ font-weight:800; }
.fv-site .pov-read{ font-weight:800; font-size:var(--type-small); color:var(--white);
  text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:.14em;
  transition:text-decoration-color var(--dur-hover) var(--ease-out-expo); }
.fv-site a.pov-card:hover .pov-read, .fv-site a.pov-card:focus-visible .pov-read{ text-decoration-color:currentColor; }
.fv-site a.pov-card:focus-visible{ outline:3px solid var(--white); outline-offset:-6px; }
/* the first title lines up with the page's headings on a wide screen */
@media (min-width:901px){
  .fv-site .pov-set > li:first-child .pov-copy{ padding-left:max(var(--pad-card), calc((100vw - var(--container)) / 2)); }
}
/* the three titles start on one line: each takes two lines of space (Maya's alignment plan, Freya's check, 2026-10-27; a Home card title must fit two lines at 18ch, about 33 characters) */
@media (min-width:901px){ .fv-site .pov-copy h3{ min-height:calc(2em * var(--leading-heading)); } }
/* tablets and phones: the set runs sideways and snaps card by card */
@media (max-width:900px){
  .fv-site .pov-set{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:60%; overflow-x:auto; scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain; scrollbar-width:none; }
  .fv-site .pov-set::-webkit-scrollbar{ display:none; }
  .fv-site .pov-set > li{ scroll-snap-align:start; }
  .fv-site .pov-set > li:first-child .pov-copy{ padding-left:var(--space-gutter); }
}
@media (max-width:620px){
  .fv-site .pov-set{ grid-auto-columns:82%; }
}

/* ---------- 5. the clover field on white ---------- */
.fv-site .stage.paper .grid{ --clover-grey:var(--line); }

/* ---------- 8. Ideas we build on: open text, no boxes ---------- */
.fv-site .ledger .ds-features{ gap:var(--space-block) var(--gap-lg); }
.fv-site .ledger .ds-feature{ background:none; border:0; border-radius:0; padding:0; box-shadow:none; transition:none; }
.fv-site .ledger .ds-feature:hover, .fv-site .ledger .ds-feature:focus-within{ transform:none; box-shadow:none; outline:none; }
.fv-site .ledger .ds-feature .ds-more a{ text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:.14em;
  transition:color var(--dur-hover) ease, text-decoration-color var(--dur-hover) var(--ease-out-expo); }
.fv-site .ledger .ds-feature:hover .ds-more a, .fv-site .ledger .ds-feature .ds-more a:focus-visible{ color:var(--red-deep); text-decoration-color:currentColor; }
.fv-site .ledger .ds-feature .ds-more a:focus-visible{ outline:3px solid var(--red-deep); outline-offset:3px; }
/* like beside like (Maya's alignment plan, 2026-10-27): each card takes three shared rows, heading, text and agent, so a heading that wraps moves its neighbours' text with it; the text links were removed (Guy, 2026-10-27); one column under 901px, as before */
@supports (grid-template-rows:subgrid){ @media (min-width:901px){
  .fv-site .ledger .ds-feature{ display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:var(--space-4); align-content:start; }
  .fv-site .ledger .ds-feature .ds-more{ margin-top:0; align-self:end; }
} }
/* "What agentic means" under the ideas: the same as "See all five systems" (14): ink at rest, #c60000 on hover, the red focus outline (Freya's check, 2026-10-27) */
.fv-site .ledger .ds-after a{ color:var(--ink); }
.fv-site .ledger .ds-after a:hover{ color:var(--red-deep); }
.fv-site .ledger .ds-after a:focus-visible{ outline:3px solid var(--red-deep); outline-offset:3px; }

/* ---------- 9. Motion ---------- */
/* 1d: the hero photograph drifts inside its own frame */
.fv-site .ds-photo-hero .ph-bg{ overflow:hidden; }
/* the figure-8's inner box, where flower.js builds its loop */
.fv-site .ds-eight-in{ display:block; }
/* P1: Point of view cards lift like the design system's post cards, above their neighbours */
.fv-site a.pov-card{ transition:transform var(--dur-hover) var(--ease-out-expo), box-shadow var(--dur-hover) ease; }
.fv-site a.pov-card:hover, .fv-site a.pov-card:focus-visible{ transform:translateY(var(--lift-post)); box-shadow:var(--shadow-post-hover); z-index:1; }
/* the sideways set on tablets and phones would clip the lift */
@media (max-width:900px){
  .fv-site a.pov-card:hover, .fv-site a.pov-card:focus-visible{ transform:none; box-shadow:none; }
}
/* 7a: the tick before "Before the next step", #c60000 on white; home-motion.js draws it and lands it */
.fv-site .hs-tick{ position:relative; display:inline-block; width:1em; height:1em; margin-right:.4em; vertical-align:-.15em; opacity:0; }
.fv-site .hs-tick::after{ content:""; position:absolute; left:.18em; top:.12em; width:.62em; height:.34em;
  border-left:2px solid var(--red-deep); border-bottom:2px solid var(--red-deep); transform:rotate(-45deg); }

/* ---------- 10. The approval moment ---------- */
.fv-site .am .stage-lead{ max-width:46ch; }
.fv-site .am-fig{ margin:var(--space-block) 0 0; }
.fv-site .am-flow{ list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap-lg); margin:0; padding:0; }
.fv-site .am-step{ display:flex; flex-direction:column; align-items:center; gap:var(--space-4); }
.fv-site .am-pill{ position:relative; width:100%; }
/* the capsule: rx = height / 2, the node fill with its hairline drawn inside */
.fv-site .am-face{ position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:260 / 110; padding:0 var(--space-4);
  border-radius:999px; background:var(--surface-dark); box-shadow:inset 0 0 0 1px var(--clover-grey); color:var(--white); overflow:hidden; }
/* the capsule labels keep their own fluid size: diagram text sized to its capsule (Diagram-rules.md), not a type token (Freya's check, 2026-10-27) */
.fv-site .am-label{ position:relative; z-index:1; font-size:clamp(1rem,1.5vw,1.3rem); font-weight:400; letter-spacing:-0.02em; line-height:1.15; text-align:center; }
/* the step at work: a deep red layer over the dark capsule, with its own copy of the label in white
   (Diagram-rules.md 2.0.0, Fills: #c60000, the only red under words). Hidden until home-motion.js
   lights it, except "Human review", which shows lit without script and with reduced motion. */
.fv-site .am-live{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; padding:inherit;
  border-radius:inherit; background:var(--red-deep); color:var(--white); opacity:0; }
.fv-site .am-step.is-human .am-live{ opacity:1; }
/* flow lines: 1.5px warm grey #7B766F on black (Diagram-rules.md 2.0.0, Connectors), square ends, edge to edge between capsules */
.fv-site .am-line{ position:absolute; top:50%; left:100%; width:var(--gap-lg); height:1.5px; margin-top:-.75px; background:#7B766F; transform-origin:left center; }
.fv-site .am-cap{ margin-top:var(--space-6); font-size:var(--type-meta); color:var(--muted-dark); }
@media (max-width:760px){
  .fv-site .am-flow{ grid-template-columns:minmax(0,1fr); gap:var(--space-6); }
  .fv-site .am-face{ aspect-ratio:auto; min-height:64px; padding:var(--space-4) var(--space-5); }
  .fv-site .am-line{ top:100%; left:50%; width:1.5px; height:var(--space-6); margin:0 0 0 -.75px; transform-origin:center top; }
}

/* ---------- 11. Buttons ---------- */
/* design system exception 8: Signal green, only ever the call-to-action button */
.fv-site{ --cta:#0A7A3B; --cta-hover:#086832; }
.fv-site .ph-actions{ margin-top:var(--space-head-body); }
/* the hero's one solid button: white Inter 700 on green (5.4:1; 6.6:1 on hover) */
.fv-site .ds-photo-hero .btn.btn-cta{ background:var(--cta); color:var(--white); font-weight:700; border:0;
  transition:background-color var(--dur-hover) ease, transform var(--dur-hover) var(--ease-out-expo); }
.fv-site .ds-photo-hero .btn.btn-cta:hover, .fv-site .ds-photo-hero .btn.btn-cta:focus-visible{ background:var(--cta-hover); color:var(--white); transform:translateY(var(--lift-hover)); }
.fv-site .ds-photo-hero .btn.btn-cta:focus-visible{ outline:3px solid var(--white); outline-offset:3px; }
/* the closing band: a tinted wash at its hover shade */
.fv-site .cta-band .btn.btn-wash, .fv-site .cta-band .btn.btn-wash:hover{ background:rgba(0,0,0,.14); color:var(--ink); }
.fv-site .btn-arrow{ display:inline-block; transition:transform var(--dur-hover) var(--ease-out-expo); }
.fv-site .btn:hover .btn-arrow, .fv-site .btn:focus-visible .btn-arrow{ transform:translateX(4px); }

/* ---------- 12. The new playbook is live: the statement band, ink on white ---------- */
.fv-site .pb-band .ds-stage-grid{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); column-gap:max(var(--gap-lg), var(--space-8)); }
.fv-site .pb-band .ds-eight{ max-width:460px; }
@media (max-width:767px){
  .fv-site .pb-band .ds-stage-grid{ grid-template-columns:minmax(0,1fr); row-gap:var(--space-9); }
  .fv-site .pb-band .ds-eight{ max-width:240px; }
}

/* ---------- 13. The hero, made less flat (D-31 to D-34) ---------- */
/* the headline: three stacked lines; its size (h-xl, 83px at 1440px; 48px on a 390px phone) is now ds.css's one hero size, shared by every page (Guy, 2026-10-27) */
.fv-site .ds-photo-hero .hero-head .hh-line{ display:block; }
/* the line under it: the body size (D-32), italic like every lead */
.fv-site .ds-photo-hero .ph-copy .stage-lead{ font-size:var(--type-body); line-height:1.5; max-width:46ch; }
/* the button: a 16px label, 56px tall (the owner's approval, 2026-10-23) */
.fv-site .ds-photo-hero .btn.btn-cta{ font-size:1rem; min-height:56px; padding:0 var(--space-6); }
/* the softer side fade: 82% black at the left edge, 70% at 40% across, clear by 62% */
.fv-site .ds-photo-hero::before{ background:linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.7) 40%, rgba(0,0,0,0) 62%); }
/* the photograph and its phone copy: the picture element takes no box of its own */
.fv-site .ds-photo-hero .ph-bg picture{ display:contents; }
@media (min-width:900px){
  /* the person of D-33 stands right of centre in the wide photograph: show more of its quiet left side, so the person stands right of where the fade clears */
  .fv-site .ds-photo-hero .ph-bg img[src*="home-hero-deciding"]{ object-position:30% 50%; }
}
@media (max-width:899px){
  /* taller, so the photograph shows above the text: 150% of the width, never under 600px */
  .fv-site section.page-hero.ds-photo-hero{ min-height:calc(var(--nav-h) + max(150vw, 600px)); }
  /* the phone copy is already cropped around the person of D-33, so the person sits in the middle, above the text */
  .fv-site .ds-photo-hero .ph-bg img{ object-position:50% 50%; }
}
/* the opening move (D-34): each line rises 44px and fades in, in reading order, on the brand ease */
@keyframes fv-hero-line{ from{ opacity:0; transform:translateY(44px); } to{ opacity:1; transform:none; } }
.fv-site .ds-photo-hero .hero-head .hh-line{ animation:fv-hero-line var(--dur-reveal) var(--ease-out-expo) both; }
.fv-site .ds-photo-hero .hero-head .hh-line:nth-child(2){ animation-delay:.08s; }
.fv-site .ds-photo-hero .hero-head .hh-line:nth-child(3){ animation-delay:.16s; }

/* ---------- 14. The white body's rhythm (Maya's spacing plan, 2026-10-27) ---------- */
/* one section heading size: site.css's h-lg, given a name */
.fv-site{ --type-h-section:clamp(2.2rem,5.4vw,4.2rem); }
/* the design system's type tokens this page uses (Design-tokens.md, tokens/typography.css), declared here until the shared stylesheets carry them */
.fv-site{ --type-body:clamp(1rem,1.15vw,1.12rem); --type-small:.95rem; --type-meta:.85rem; --leading-heading:1.02; }
/* G: every body section, the same space top and bottom */
.fv-site main > section:not(.page-hero){ padding-top:var(--space-section-loose); padding-bottom:var(--space-section-loose); }
/* two white sections meeting: the gap is G once, not twice */
.fv-site main > section.paper:not(.page-hero) + section.paper{ padding-top:0; }
/* the closing call to action: no hairline and no padding of its own above it */
.fv-site main .cta-band{ border-top:0; padding-top:0; }
/* every body section heading at the one section size; the statements included */
.fv-site main > section:not(.page-hero) h2.stage-line,
.fv-site main .cta-band h2{ font-size:var(--type-h-section); }
.fv-site main .cta-band h2{ max-width:18ch; }
/* every body heading breaks into even lines, so no word sits alone (Freya's check, 2026-10-27) */
.fv-site main > section:not(.page-hero) h2{ text-wrap:balance; }
/* "Five kinds of system": its columns on the three-up gap */
.fv-site .ds-board .ds-values{ column-gap:var(--gap-lg); }
/* like beside like (Maya's alignment plan, 2026-10-27): each system takes three shared rows, number, heading and text, so the texts in a row start on one line */
@supports (grid-template-rows:subgrid){
  .fv-site .ds-board .ds-values > li{ display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:var(--space-3); align-content:start; }
}
/* "See all five systems" sits under the list, not as a sixth item: ink at rest, #c60000 on hover, the red focus outline, like every text link on the page */
.fv-site .ds-board .ds-after a{ color:var(--ink); }
.fv-site .ds-board .ds-after a:hover{ color:var(--red-deep); }
.fv-site .ds-board .ds-after a:focus-visible{ outline:3px solid var(--red-deep); outline-offset:3px; }
/* heading or lead to content: 32px, 48px, then 64px from 1200px */
@media (min-width:1200px){
  .fv-site .ledger .ds-features, .fv-site .ds-board .ds-values, .fv-site .st-stair, .fv-site .am-fig, .fv-site .pov-set{ margin-top:var(--space-8); }
}

@media (prefers-reduced-motion:reduce){
  .fv-site .ledger .ds-feature .ds-more a{ transition:none; }
  .fv-site .st-fan .ds-layer{ transition:none; transform:none !important; }
  .fv-site .st-card .hs-more{ transition:none; }
  .fv-site .pov-read{ transition:none; }
  .fv-site .pov-set{ scroll-snap-type:none; }
  .fv-site a.pov-card{ transition:none; }
  .fv-site a.pov-card:hover, .fv-site a.pov-card:focus-visible{ transform:none; }
  .fv-site .ds-photo-hero .btn.btn-cta{ transition:none; }
  .fv-site .ds-photo-hero .btn.btn-cta:hover, .fv-site .ds-photo-hero .btn.btn-cta:focus-visible{ transform:none; }
  .fv-site .btn-arrow{ transition:none; }
  .fv-site .btn:hover .btn-arrow, .fv-site .btn:focus-visible .btn-arrow{ transform:none; }
  .fv-site .ds-photo-hero .hero-head .hh-line{ animation:none; }
}