/* ============================================================
   FUTUVARA — the public marketing site's stylesheet
   Spacing: every padding, margin and gap uses the --space-* tokens in base.css,
   which are brand 10.1 exactly (fixed steps per screen size, no fluid values).
   Do not add a raw pixel value for spacing.
   ============================================================

   A port of `public/styles.css`, with EVERY selector scoped under `.fv-site`.

   The scope is the whole point. The root layout owns `<html>`, mounts
   Tailwind's `globals.css` and lets next-themes write a `dark` class on the
   document; this sheet was written for a bare page with its own reset and
   claims names as generic as `.grid`, `.dark`, `.body` and `.tag`. Scoped, the
   two design systems provably cannot reach each other: nothing here matches
   outside the marketing tree, and `.fv-site .grid` outranks Tailwind's `.grid`
   inside it.

   The two exceptions are marked where they appear (the Lenis document classes,
   and the two `@keyframes` names, which are global in CSS and so carry an
   `fv-` prefix instead).

   Changes from the original:
     - `--muted` was USED at the legal rules and never defined, so legal body
       text rendered near-black instead of grey. The port first "fixed" that to
       grey; on 2026-09-18 the owner asked for the new site to be visually
       identical to the live one, so the legal rules now say `inherit` — what
       the live page actually showed — and `--muted` serves `.paper .muted`.
     - The colour literals are hoisted into tokens here, and the four layer
       ramps are named. `src/components/site/shape-data.ts` carries the same
       ramp values for the components that paint SVG fills in JS, and
       `shape-data.test.ts` fails if the two ever disagree.
*/
.fv-site{
  --black:#000000;
  --ink:#0a0a0a;
  --white:#ffffff;
  --paper:#ffffff;
  --red:#ff1717;
  --red-deep:#c60000;
  --grey:#6b6b6b;
  --grey-2:#9a9a9a;
  --line:#e6e6e6;
  --line-dark:#1e1e1e;
  /* Bauhaus palette */
  --bau-red:#ff1717;
  --bau-blue:#1f3fd1;
  --bau-yellow:#f5b400;

  /* --- semantic text and surface tokens ------------------------------------
     Named for the job they do, so a literal in a rule below is a token that is
     missing rather than a decision. */
  --muted:#333;             /* body copy on paper — the missing definition */
  --muted-dark:#c9c9c9;     /* body copy on a dark band */
  --muted-2:#555;           /* secondary copy on paper */
  --muted-3:#888;           /* form notes, post meta */
  --surface-dark:#0d0d0d;   /* cards and dropdowns on black */
  --surface-footer:#050505;
  --clover-grey:#2a2a2a;    /* the resting clover fill */
  --clover-red:#ff2a2a;     /* the one clover that stands out */

  /* --- layer ramps ---------------------------------------------------------
     Ordered ramps, light to dark. The components read the JS copies in
     `shape-data.ts`; these exist so a fill can be set from CSS without a second
     set of hex values appearing in a rule. The two beige ramps were removed on
     2026-10-17 (no cream anywhere): no rule or script on the site read them. */
  --ramp-pill-red-0:#ff6161; --ramp-pill-red-1:#fb4444;
  --ramp-pill-red-2:#ea2b2b; --ramp-pill-red-3:#d31a1a;
  --ramp-pill-red-4:#b81010; --ramp-pill-red-5:#9b0808;
  --ramp-pill-red-6:#7c0303; --ramp-pill-red-7:#590101;
  --ramp-pill-red-8:#310000; --ramp-pill-red-9:#000000;

  /* The "8" rig repeats its six colours across two lobes, so the ramp is six. */
  --ramp-eight-0:#270000; --ramp-eight-1:#560001; --ramp-eight-2:#930909;
  --ramp-eight-3:#BB0000; --ramp-eight-4:#E70407; --ramp-eight-5:#FF0000;


  /* The brand typeface is Inter — the one typeface on every surface (R5).
     `--font-sans` is set by next/font in the root layout this route group
     nests inside, self-hosted at build and carrying a size-adjusted Arial
     fallback. The stack never reaches a font a Mac has and Windows lacks:
     it used to begin "Helvetica Neue", Helvetica, Arial with no webfont behind
     it, so macOS drew Helvetica Neue, Windows fell through to Arial, and the
     wordmark changed shape per platform. Arial is the only named fallback
     because it ships on BOTH. */
  --font:"Inter",sans-serif;
  /* layout widths and the page gutter come from the spacing tokens in base.css */
  --maxw:var(--container);
  --gutter:var(--space-gutter);
  --nav-h:var(--nav-height);   /* brand 10.1: 64px */
}

/* The original's `*` reset, and the `html`/`body` rules, all land on the scope
   root: it is the document as far as this sheet is concerned. Re-declaring
   font, colour and line-height matters — Tailwind's preflight has already set
   them on `body`, and they would otherwise inherit in. */
.fv-site, .fv-site *{ box-sizing:border-box; margin:0; padding:0; }
/* The original's `html{ scroll-behavior:smooth }` is deliberately NOT carried
   across. `scroll-behavior` applies to the element that actually scrolls, and
   `.fv-site` is a div inside the document, so it would do nothing here — and
   putting it back on `html` would change how the operator application scrolls.
   Smooth scrolling comes from Lenis, which overrides the native property
   anyway (see `html.lenis.lenis-smooth` above). */
.fv-site{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* No faked bold or oblique: every face used is a real file, and a synthesised
     style is drawn differently by macOS and Windows text engines. */
  font-synthesis:none; }
.fv-site{ font-family:var(--font); background:var(--black); color:var(--white); line-height:1.5; overflow-x:hidden; }
.fv-site a{ color:inherit; text-decoration:none; }
.fv-site img, .fv-site svg{ display:block; max-width:100%; }

/* ---------- the browser defaults the original stood on ----------
   The original page had no reset beyond `*{margin:0;padding:0}`, so every rule
   below it was written against the BROWSER's stylesheet. Tailwind's preflight
   (loaded by the root layout, in `@layer base`) removes much of that: heading
   sizes and weights, list bullets, and the form controls' own font. Each one
   showed on the page — the footer's column heads lost their bold, the Resources
   button grew to 1.5 line-height, the newsletter field changed width. These
   put the browser defaults back inside the scope, and only there. `:where()`
   keeps them at the specificity of a bare element, so every ported rule still
   wins exactly as it did against the browser. */
.fv-site :where(h1){ font-size:2em; font-weight:700; }
.fv-site :where(h2){ font-size:1.5em; font-weight:700; }
.fv-site :where(h3){ font-size:1.17em; font-weight:700; }
.fv-site :where(h4){ font-size:1em; font-weight:700; }
.fv-site :where(h5){ font-size:.83em; font-weight:700; }
.fv-site :where(h6){ font-size:.67em; font-weight:700; }
.fv-site :where(ul){ list-style:disc; }
.fv-site :where(ol){ list-style:decimal; }
.fv-site :where(*){ border-color:currentcolor; }
/* Form controls do NOT inherit the page font, size or line-height: the browser
   gives them its own small-control font (Arial 13.33px in Chrome). The keyword
   form is what the original actually got; the line above it is the fallback
   for an engine that does not know the keyword. */
.fv-site :where(button), .fv-site :where(input), .fv-site :where(select), .fv-site :where(textarea){
  font:inherit; letter-spacing:normal; }
.fv-site :where(button){ color:buttontext; }
.fv-site :where(input), .fv-site :where(select), .fv-site :where(textarea){ color:fieldtext; }
.fv-site ::placeholder{ color:#757575; opacity:1; }
.fv-site button{ font-family:inherit; cursor:pointer; }
/* …but the FAMILY is Inter on every control (R5), as on the static copy. */
.fv-site input, .fv-site select, .fv-site textarea{ font-family:inherit; }
/* `.invert` is ALSO a Tailwind utility (`filter:invert(100%)`), generated because
   the word appears in source. On the site it only ever means the white feature
   card, so the filter is cancelled inside the scope — it turned that card black
   with a cyan label. */
.fv-site .invert{ filter:none; }

/* ---------- animation baseline ----------
   Hidden only until the reveal takes the element over (it drops `.anim` and holds
   the hidden state inline). If it never does — script blocked, failed, slow, or
   switched off — this delayed, fill-forwards animation shows the copy anyway
   (REQ-FUTUVARA-112: copy is never invisible because a script did not run). */
.fv-site .anim{ opacity:0; will-change:transform,opacity; animation:fv-anim-fallback 0s linear 2.5s forwards; }
@keyframes fv-anim-fallback{ to{ opacity:1; } }
/* `reveal-all` was set on `<html>`; the reveal leaf now sets it on the scope root. */
.fv-site.reveal-all .anim{ opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion: reduce){
  .fv-site{ scroll-behavior:auto; }
  .fv-site .anim{ opacity:1 !important; transform:none !important; }
}

/* ---------- Lenis smooth scroll ----------
   THE ONE UNSCOPED BLOCK, deliberately. Lenis writes `lenis`, `lenis-smooth`
   and `lenis-stopped` onto `<html>`, so scoping these under `.fv-site` — a div
   — would match nothing and the library would stop working. They are already
   scoped by a class that exists only while our own Lenis instance is running,
   and that instance is mounted only inside this route group. */
html.lenis, html.lenis body{ height:auto; }
html.lenis.lenis-smooth{ scroll-behavior:auto !important; }
html.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
html.lenis.lenis-stopped{ overflow:hidden; }
html.lenis.lenis-scrolling iframe{ pointer-events:none; }

/* ---------- layout ---------- */
.fv-site section{ position:relative; padding:var(--space-section) var(--gutter); overflow:hidden; }
.fv-site .wrap{ max-width:var(--maxw); margin:0 auto; width:100%; }
.fv-site .dark{ background:var(--black); color:var(--white); }
.fv-site .paper{ background:var(--paper); color:var(--ink); }
.fv-site .page{ padding-top:var(--nav-h); }           /* interior pages clear the fixed nav */

.fv-site .cols2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-block); }
.fv-site .cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-block); }
.fv-site .cols4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-grid-gap); }
/* Balanced text columns: the browser fills them to equal height at any screen size,
   so the copy stays level instead of one column running long. */
.fv-site .text-cols{ columns:3; column-gap:var(--space-block); column-fill:balance; }
.fv-site .text-cols > p{ break-inside:avoid; margin:0 0 var(--space-4); }
.fv-site .text-cols > p:last-child{ margin-bottom:0; }
@media (max-width:900px){ .fv-site .text-cols{ columns:2; } }
@media (max-width:620px){ .fv-site .text-cols{ columns:1; } }
@media (max-width:900px){ .fv-site .cols4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){ .fv-site .cols2, .fv-site .cols3{ grid-template-columns:1fr; } }

/* ---------- type ---------- */
/* Headings run regular; only the final word is bold. The original wrapped it in
   `<strong>` with a DOM walk in `site.js`; the renderer now does the same at
   render time (`withBoldLastWord` in `rich-text.tsx`), for every heading. */
.fv-site h1, .fv-site h2, .fv-site h3{ font-weight:400; letter-spacing:-0.02em; line-height:1.02; }
.fv-site .display{ font-size:clamp(3rem,9vw,7rem); }
.fv-site .h-xl{ font-size:clamp(2.6rem,7vw,5.2rem); }
.fv-site .h-lg{ font-size:clamp(2.2rem,5.4vw,4.2rem); }
.fv-site .h-md{ font-size:clamp(1.7rem,3.4vw,2.6rem); }
.fv-site .h-sm{ font-size:clamp(1.3rem,2.4vw,1.8rem); }
.fv-site .lead{ font-weight:400; font-style:italic; font-size:clamp(1.15rem,2.1vw,1.7rem); line-height:1.28; letter-spacing:-0.01em; }
.fv-site .body{ font-size:clamp(1rem,1.15vw,1.12rem); }
.fv-site .paper .muted{ color:var(--muted); }
.fv-site .dark .muted{ color:var(--muted-dark); }
.fv-site .italic{ font-style:italic; }
.fv-site .sup{ color:var(--red); font-weight:800; vertical-align:super; font-size:.55em; }
.fv-site strong{ font-weight:800; }
.fv-site .eyebrow{ display:inline-block; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:var(--red); margin-bottom:22px; }
/* no divider lines between sections: the rule keeps its spacing but draws nothing */
.fv-site .rule{ height:0; background:transparent; margin:var(--space-section-tight) 0; }
/* Bauhaus typography: body copy is flush-left / ragged-right, never centred or indented.
   The hero is the one deliberate exception. */
.fv-site p, .fv-site li, .fv-site blockquote{ text-indent:0; }
.fv-site .mx-auto{ margin-inline:auto; }

/* ---------- buttons ---------- */
.fv-site .btn{
  display:inline-flex; align-items:center; gap:var(--space-3);
  font-weight:400; letter-spacing:.01em; font-size:.86rem;
  padding:var(--space-3) var(--space-5); border-radius:999px; border:0;
  /* no outlines: every button is a subtle fill that contrasts with the surface it sits on,
     grey on white, and a light wash on black */
  background:rgba(0,0,0,.07); color:inherit;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.fv-site .btn:hover{ transform:translateY(-2px); background:rgba(0,0,0,.14); }
.fv-site .btn-red, .fv-site .btn-ghost{ background:rgba(0,0,0,.07); color:inherit; border:0; }
.fv-site .btn-red:hover, .fv-site .btn-ghost:hover{ background:rgba(0,0,0,.14); color:inherit; }
/* dark surfaces: flip the wash so the button still reads against black */
.fv-site .dark .btn, .fv-site .hero-dark .btn, .fv-site .footer-cta .btn, .fv-site .auth-card .btn, .fv-site .card-dark .btn, .fv-site .cta-band .btn, .fv-site .dark .btn-red, .fv-site .hero-dark .btn-red, .fv-site .footer-cta .btn-red, .fv-site .auth-card .btn-red, .fv-site .dark .btn-ghost, .fv-site .hero-dark .btn-ghost{ background:rgba(255,255,255,.14); color:#fff; }
.fv-site .dark .btn:hover, .fv-site .hero-dark .btn:hover, .fv-site .footer-cta .btn:hover, .fv-site .auth-card .btn:hover, .fv-site .card-dark .btn:hover, .fv-site .cta-band .btn:hover, .fv-site .dark .btn-red:hover, .fv-site .hero-dark .btn-red:hover, .fv-site .footer-cta .btn-red:hover, .fv-site .auth-card .btn-red:hover, .fv-site .dark .btn-ghost:hover, .fv-site .hero-dark .btn-ghost:hover{ background:rgba(255,255,255,.24); color:#fff; }
.fv-site .btn-sm{ padding:var(--space-3) var(--space-4); font-size:.9rem; }

/* ============================================================
   NAV
   ============================================================ */
.fv-site .site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter);
  background:#000;
  color:#fff;
}
.fv-site .nav-logo{ display:flex; align-items:center; gap:var(--space-3); z-index:2; }
.fv-site .nav-logo svg{ width:30px; height:30px; }
/* 800, as designed. Inter is a variable font, so 800 is a real face; under
   Roboto and Heros it had to be named 700 because only 700 was bundled. */
.fv-site .nav-logo span{ font-weight:800; font-size:1.28rem; letter-spacing:-0.01em; }

/* inverted (light) nav when the section behind it is white */
.fv-site .site-nav.nav-light{ background:#fff; color:#0a0a0a; }
.fv-site .site-nav.nav-light .nav-logo span{ color:#0a0a0a; }
.fv-site .site-nav.nav-light .nav-link{ color:#333; }
.fv-site .site-nav.nav-light .nav-link:hover{ color:#000; background:rgba(0,0,0,.06); }
.fv-site .site-nav.nav-light .nav-link.active{ color:#000; }
.fv-site .site-nav.nav-light .nav-login{ color:#0a0a0a !important; background:rgba(0,0,0,.08); border:0; }
.fv-site .site-nav.nav-light .nav-login:hover{ background:rgba(0,0,0,.16); }
.fv-site .site-nav.nav-light .nav-toggle span{ background:#0a0a0a; }

.fv-site .nav-menu{ display:flex; align-items:center; gap:var(--space-2); }
.fv-site .nav-link{
  position:relative; display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-4); border-radius:0;   /* the top bar stays square, except .nav-action below */
  font-weight:400; font-size:.86rem; color:#eaeaea; background:transparent; border:0;
  transition:color .15s ease, background .15s ease;
}
.fv-site .nav-link:hover{ color:#fff; background:rgba(255,255,255,.08); }
.fv-site .nav-link.active{ color:#fff; }
.fv-site .nav-link.active::after{
  content:""; position:absolute; left:16px; right:16px; bottom:2px; height:2px;
  background:var(--red); border-radius:2px;
}
/* The one exception to the square bar: the action item (Login, or Platform once
   signed in) is a pill outlined 1px at 30% (BP-041). Black on the light bar, where
   a white outline would vanish. Same rules as public/styles.css. */
.fv-site .nav-action{ border:1px solid rgba(255,255,255,.3); border-radius:999px; }
/* A link pill sits exactly as the button pill does: a <button> has line-height
   normal, a link inherits 1.5, which made the pill 41px against the button's 36. */
.fv-site a.nav-action{ line-height:normal; }
.fv-site .site-nav.nav-light .nav-action{ border-color:rgba(0,0,0,.3); }

.fv-site .nav-item{ position:relative; }
.fv-site .dropdown{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(8px);
  min-width:220px; padding:var(--space-2);
  background:#0d0d0d; border:1px solid var(--line-dark); border-radius:16px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8);
  opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease;
}
/* invisible bridge so moving the cursor from the button into the menu doesn't close it */
.fv-site .dropdown::before{ content:""; position:absolute; left:0; right:0; top:-16px; height:18px; }
.fv-site .dropdown a{
  display:flex; flex-direction:column; gap:var(--space-1);
  padding:var(--space-3) var(--space-4); border-radius:10px; color:#eaeaea;
  font-weight:400; font-size:.86rem;   /* matches .nav-link, the top level */
  transition:background .14s ease, color .14s ease;
}
.fv-site .dropdown a small{ font-weight:400; font-size:.72rem; color:#8a8a8a; }
.fv-site .dropdown a:hover{ background:rgba(255,23,23,.12); color:#fff; }
.fv-site .dropdown a:hover small{ color:#d99; }
.fv-site .nav-item:hover .dropdown, .fv-site .nav-item:focus-within .dropdown, .fv-site .nav-item.open .dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }


/* The sign-in form, inline in the bar. Its own class and NOT `.dropdown`,
   because a form must not spring open on hover — only a click opens it.
   Anchored right: Login is the last item, and a 380px panel centred on it
   would hang off the edge of the window. */
.fv-site .has-login .login-panel{
  position:absolute; top:calc(100% + 10px); right:0; left:auto;
  width:min(380px, calc(100vw - 2 * var(--gutter)));
  transform:translateY(8px);
  border-radius:16px; overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8);
  opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease;
}
.fv-site .has-login.open .login-panel{ opacity:1; visibility:visible; transform:translateY(0); }
.fv-site .login-panel iframe{ display:block; width:100%; height:510px; border:0; }

/* An older fill-style pill for Login. No markup uses it: Login is .nav-action
   (BP-041). */
.fv-site .nav-login{ margin-left:var(--space-2); background:rgba(255,255,255,.14); color:#fff !important; font-weight:400; padding:var(--space-2) var(--space-4); border:0; border-radius:999px; }
.fv-site .nav-login:hover{ background:rgba(255,255,255,.24); }
.fv-site .nav-login:hover{ background:rgba(255,255,255,.12); }
.fv-site .nav-login.active::after{ display:none; }

.fv-site .nav-toggle{ display:none; width:44px; height:44px; background:transparent; border:0; position:relative; z-index:2; }
.fv-site .nav-toggle span{ position:absolute; left:11px; right:11px; height:2px; background:#fff; border-radius:2px; transition:transform .22s ease, opacity .2s ease; }
.fv-site .nav-toggle span:nth-child(1){ top:15px; } .fv-site .nav-toggle span:nth-child(2){ top:21px; } .fv-site .nav-toggle span:nth-child(3){ top:27px; }
.fv-site .site-nav.open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.fv-site .site-nav.open .nav-toggle span:nth-child(2){ opacity:0; }
.fv-site .site-nav.open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:860px){
  .fv-site .nav-toggle{ display:block; }
  /* backdrop-filter would make .site-nav the containing block for the fixed overlay — drop it on mobile */
  .fv-site .site-nav{ backdrop-filter:none; -webkit-backdrop-filter:none; }
  .fv-site .nav-menu{
    position:fixed; inset:var(--nav-h) 0 0 0; flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:var(--space-1); padding:var(--space-5) var(--gutter) var(--space-7);
    background:inherit;   /* follows the bar, which JS keeps matched to the section behind it */
    transform:translateX(100%); transition:transform .3s cubic-bezier(.16,1,.3,1);
    overflow-y:auto;
  }
  /* On a light page the whole overlay is white, so the submenu links must invert too,
     otherwise they stay near-white on white. */
  .fv-site .site-nav.nav-light .dropdown a{ color:#333; }
  .fv-site .site-nav.nav-light .dropdown a small{ color:#777; }
  .fv-site .site-nav.nav-light .dropdown a:hover{ background:rgba(0,0,0,.06); color:#000; }
  .fv-site .site-nav.open .nav-menu{ transform:translateX(0); }
  .fv-site .nav-link:not(.nav-login){ font-size:1.3rem; padding:var(--space-4) var(--space-2); border-radius:0; justify-content:space-between; }
  .fv-site .nav-link.active::after{ display:none; }
  .fv-site .nav-link.nav-action{ border-radius:999px; align-self:flex-start; padding:var(--space-3) var(--space-5); margin-top:var(--space-2); }   /* a pill around the word, not a full-width bar */
  .fv-site .nav-item{ display:flex; flex-direction:column; }
  .fv-site .dropdown, .fv-site .nav-item.open .dropdown{
    position:static; left:auto; right:auto; transform:none; opacity:1; visibility:visible; min-width:0;
    background:transparent; border:0; box-shadow:none; padding:0 0 var(--space-2) var(--space-4);
    overflow:hidden; transition:max-height .28s ease;
  }
  .fv-site .dropdown{ max-height:0; }
  .fv-site .nav-item.open .dropdown{ max-height:400px; }
  .fv-site .dropdown a{ font-size:1.3rem; }   /* matches the mobile .nav-link size */
  /* In the drawer the panel behaves like the Resources submenu: it unrolls in
     place rather than floating over the page. */
  .fv-site .has-login .login-panel{
    position:static; right:auto; width:100%; transform:none;
    opacity:1; visibility:visible; border-radius:0; box-shadow:none;
    max-height:0; transition:max-height .28s ease;
  }
  .fv-site .has-login.open .login-panel{ max-height:520px; }
  .fv-site .nav-login{ margin:var(--space-4) 0 0; justify-content:center; }
}

/* ============================================================
   FAT FOOTER
   ============================================================ */
.fv-site .site-footer{ background:var(--surface-footer); color:#9a9a9a; border-top:0; }
/* Full width (Guy, Website call, 2026-10-28: "made completely responsive and across the entire area"):
   the footer's columns and its bottom line run edge to edge inside the page gutter, not in the --maxw column. */
.fv-site .footer-inner{ padding:var(--space-hero-top) var(--gutter) var(--space-6); max-width:none; }
.fv-site .footer-cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-5);
  padding-bottom:var(--space-section-tight); margin-bottom:var(--space-section-tight);
  border-bottom:0;
}
.fv-site .footer-cta h3{ color:#fff; font-size:clamp(1.6rem,3.4vw,2.6rem); max-width:16ch; }
.fv-site .footer-cta .btn-red{ flex:none; }

.fv-site .footer-top{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr); gap:var(--space-block); }
@media (max-width:900px){ .fv-site .footer-top{ grid-template-columns:1fr 1fr; row-gap:var(--space-7); } }
/* Phones: Company and Resources side by side, brand and contact across the full width. */
@media (max-width:520px){ .fv-site .footer-top{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .fv-site .footer-top .f-brand, .fv-site .footer-top .f-contact{ grid-column:1 / -1; } }

.fv-site .f-brand .f-logo{ display:flex; align-items:center; gap:var(--space-3); color:#fff; margin-bottom:var(--space-4); }
.fv-site .f-brand .f-logo svg{ width:32px; height:32px; }
.fv-site .f-brand .f-logo span{ font-weight:800; font-size:1.35rem; }
.fv-site .f-tag{ color:#fff; font-weight:700; font-size:1.05rem; margin-bottom:var(--space-3); }
.fv-site .f-blurb{ font-size:.8rem; line-height:1.6; max-width:38ch; }
.fv-site .f-social{ display:flex; gap:var(--space-3); margin-top:var(--space-4); }
.fv-site .f-social a{ width:38px; height:38px; border:1px solid var(--line-dark); border-radius:50%; display:grid; place-items:center; transition:border-color .15s ease, background .15s ease; }
.fv-site .f-social a:hover{ border-color:var(--red); background:rgba(255,23,23,.12); }
.fv-site .f-social .ph-light{ color:#cfcfcf; }

.fv-site .f-col h4{ color:#fff; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:var(--space-4); }
.fv-site .f-col a{ display:block; padding:var(--space-2) 0; font-size:.95rem; color:#9a9a9a; transition:color .14s ease, padding .14s ease; }
.fv-site .f-col a:hover{ color:#fff; padding-left:var(--space-1); }
.fv-site .f-contact p{ font-size:.95rem; margin:var(--space-2) 0 var(--space-4); }
.fv-site .f-news{ margin-top:var(--space-2); }
.fv-site .f-news form{ display:flex; gap:var(--space-2); margin-top:var(--space-3); }
.fv-site .f-news input{ flex:1; min-width:0; background:#101010; border:1px solid var(--line-dark); color:#fff; border-radius:999px; padding:var(--space-3) var(--space-4); font-size:.9rem; }
.fv-site .f-news input:focus{ outline:none; border-color:var(--red); }
.fv-site .f-news button{ background:var(--red); color:#fff; border:0; border-radius:999px; padding:0 var(--space-4); font-weight:800; }

.fv-site .footer-bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4);
  max-width:none; margin:0; padding:var(--space-5) var(--gutter);
  border-top:0; font-size:.82rem; letter-spacing:.02em;
}
.fv-site .footer-bottom a{ color:#9a9a9a; } .fv-site .footer-bottom a:hover{ color:#fff; }
.fv-site .footer-bottom .red{ color:var(--red); font-weight:700; }

/* ============================================================
   HOME — hero + shapes
   ============================================================ */
/* The pill is rotated 90deg, so its rendered HEIGHT is this CSS width. Capping it against
   the viewport height keeps the whole layer fan inside the hero (clear of the fixed nav)
   on large screens, instead of the top and bottom layers running off. */
.fv-site .hero{ --shape-w:min(clamp(540px,68vw,1000px), calc(100svh - 160px)); min-height:100svh; position:relative; display:block; }
/* Heading is locked to the centre of the black (bottom) layer of the rotated pill.
   That layer's centre sits 1482.145 viewBox units right of the shape's centre; the 90deg
   rotation maps that to a straight drop of 1482.145/5056 = 0.2931 x the shape's width. */
.fv-site .hero .wrap{ position:absolute; left:50%; top:calc(50% + 0.2931 * var(--shape-w)); transform:translate(-50%,-50%); z-index:2; width:min(92vw,980px); }
/* headline fills the hero area */
.fv-site .hero .word{ font-size:clamp(2.1rem, 6.6vw, 5.2rem); letter-spacing:-0.03em; line-height:1.0; max-width:20ch; color:#fff; text-align:center; margin:0 auto; }
.fv-site .hero-sub{ color:#e7dcd6; text-align:center; max-width:42ch; margin:var(--space-density-normal) auto 0; font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.45; }

/* Hero headings: white where the hero is dark, regular weight, only the last word bold */
.fv-site .hero-head{ font-weight:400; }
.fv-site .hero-head strong, .fv-site .hero-head b{ font-weight:800; }
.fv-site .hero .tagline{ position:absolute; left:var(--gutter); bottom:clamp(28px,6vh,64px); font-size:clamp(1.05rem,2.4vw,1.6rem); font-weight:400; z-index:3; }
.fv-site .hero .tagline strong{ font-weight:800; }
/* hero layered shape: rotated 90° into a horizontal band at the bottom of the hero.
   The rotation turns the layers' local x-slide into a bottom-up slide in screen space. */
.fv-site .hero .hero-shape{ position:absolute; left:50%; top:50%; right:auto; bottom:auto; margin:0;
  width:var(--shape-w); max-width:none; aspect-ratio:5056/7716; z-index:1; pointer-events:none;
  transform:translate(-50%,-50%) rotate(90deg); transform-origin:center center; }
@media (max-width:760px){ .fv-site .hero{ --shape-w:clamp(360px,96vw,560px); } }

.fv-site .shape-figure{ display:flex; align-items:center; justify-content:center; }

/* shape centred in its column (fully on the page, not bleeding off), no pulse */
.fv-site .shape-figure.oncenter > [data-stack]{ margin-inline:auto; }
.fv-site .shape-figure.oncenter .bl svg{ animation:none !important; opacity:1 !important; transform:none !important; }

/* pill shape enlarged and bled 30% off the right edge of the page */
.fv-site .shape-figure.bleed{ position:static; }
/* width-driven so the shape reaches ~50% of the page width; section min-height keeps its full height (top & bottom curves) visible */
.fv-site .shape-figure.bleed > [data-stack]{ position:absolute; top:50%; right:calc(-1 * var(--gutter));
  transform:translate(9%,-50%); width:clamp(322px,41vw,574px); height:auto; max-width:none; margin:0; z-index:0; }
.fv-site .cols2:has(> .shape-figure.bleed) > div:first-child{ position:relative; z-index:1; }
.fv-site section:has(.shape-figure.bleed){ min-height:clamp(620px,86vh,940px); }
@media (max-width:760px){
  /* shapes drop in-flow, under the text, never overlapping it */
  .fv-site .shape-figure.bleed{ position:static !important; }
  .fv-site .shape-figure.bleed > [data-stack]{ position:static !important; transform:none !important;
    margin:var(--space-block) auto 0 !important; width:clamp(280px,80vw,440px) !important; }
  .fv-site section:has(.shape-figure.bleed){ min-height:auto; }
  /* headings and copy fill the full width of the column */
  .fv-site .lead, .fv-site .body, .fv-site .h-xl, .fv-site .h-lg, .fv-site .h-md, .fv-site .h-sm, .fv-site .display, .fv-site .hero .word, .fv-site .hero-sub, .fv-site .page-hero h1{ max-width:100% !important; }
}
/* Services page: shapes at ~35% of the (home) size */

/* Bauhaus layered pill shape (10 supplied layers, cream → black) */
.fv-site .stack, .fv-site .bau-stack{ position:relative; width:100%; max-width:340px; aspect-ratio:5056/7716; margin-inline:auto; }
.fv-site .red-stack{ position:relative; width:100%; max-width:300px; aspect-ratio:2401/3635; margin-inline:auto; }
/* red "8" shape floated to the top-right, beside the heading */
/* kept small enough to sit in the top-right heading zone, clear of the body text below */
.fv-site .reset-shape{ position:absolute; top:0; right:0; margin:0; z-index:0; width:clamp(130px,15vw,185px); }
@media (max-width:820px){ .fv-site .reset-shape{ position:static; width:clamp(200px,46vw,270px); margin:var(--space-block) auto 0; } }
.fv-site .bl{ position:absolute; inset:0; will-change:transform,opacity; }
.fv-site .bl svg{ width:100%; height:100%; display:block; overflow:visible; }

/* Bauhaus geometric primitives */
.fv-site .bau{ position:absolute; z-index:0; pointer-events:none; }
.fv-site .bau-circle{ border-radius:50%; }
.fv-site .bau-ring{ border-radius:50%; background:transparent; }
.fv-site .bau-tri{ clip-path:polygon(50% 0,100% 100%,0 100%); }
.fv-site .bau-quarter-tl{ border-radius:100% 0 0 0; }
.fv-site .bau-quarter-tr{ border-radius:0 100% 0 0; }
.fv-site .bau-quarter-bl{ border-radius:0 0 0 100%; }
.fv-site .bau-quarter-br{ border-radius:0 0 100% 0; }
.fv-site .bau-half-t{ border-radius:999px 999px 0 0; }
.fv-site .c-red{ background:var(--bau-red); } .fv-site .c-blue{ background:var(--bau-blue); }
.fv-site .c-yellow{ background:var(--bau-yellow); } .fv-site .c-black{ background:#000; }
.fv-site .c-white{ background:#fff; }

/* Bauhaus structural colour bar */
.fv-site .bau-bar{ display:flex; width:100%; height:clamp(10px,1.4vw,18px); }
.fv-site .bau-bar span{ flex:1; }

/* subtle Bauhaus grid overlay (structure) */
.fv-site .bau-grid{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:calc(100%/6) 100%; }
.fv-site .venn{ width:100%; max-width:960px; margin:var(--space-7) auto 0; overflow:visible; }
.fv-site .pie-wrap{ width:100%; max-width:420px; margin-inline:auto; }

.fv-site .foot{ position:absolute; right:var(--gutter); bottom:22px; text-align:right; font-size:.72rem; line-height:1.4; opacity:.7; }
.fv-site .paper .foot{ color:#111; } .fv-site .dark .foot{ color:#eee; }

.fv-site .value-card h3{ font-size:1.15rem; margin-bottom:var(--space-3); }
.fv-site .value-card .body{ font-size:.98rem; }
.fv-site .card-dark{ background:linear-gradient(180deg,#161616,#000); color:#fff; border-radius:28px; padding:var(--space-block); box-shadow:0 40px 80px -30px rgba(0,0,0,.6); }

.fv-site .principle{ padding-top:var(--space-4); border-top:0; }
.fv-site .principle h3{ font-size:1.1rem; margin-bottom:var(--space-2); }
.fv-site .principle .body{ font-size:.96rem; color:#333; }
.fv-site .dark .principle{ border-top-color:#2a2a2a; } .fv-site .dark .principle .body{ color:#bdbdbd; }

.fv-site .partners{ display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-6); align-items:center; justify-content:center; margin-top:var(--space-3); }
.fv-site .partners span{ font-weight:800; font-size:clamp(1rem,1.8vw,1.4rem); color:#111; opacity:.55; }
.fv-site .dark .partners span{ color:#fff; opacity:.6; }
/* Official partner marks, flattened to one grey. Heights are tuned per brand rather than
   shared: the lockups run from 1.67:1 (AWS, stacked) to 7.7:1 (Oracle), so a single height
   would leave AWS tiny and Oracle enormous. */
.fv-site .logo-brand{ width:auto; display:block; opacity:.85; color:#6f6f6f; }   /* the marks paint currentColor */
.fv-site .logo-ms{ height:20px; }
.fv-site .logo-aws{ height:32px; }
.fv-site .logo-oracle{ height:15px; }
.fv-site .logo-google{ height:20px; }
.fv-site .dark .logo-brand [fill]{ fill:#c9c9c9; } .fv-site .dark .logo-brand [stroke]{ stroke:#c9c9c9; }

.fv-site .pattern{ min-height:100svh; display:flex; align-items:center; }
/* full-bleed grid: spans the whole page width (columns set in JS) */
/* Clover pattern: cells keep a fixed size and wrap to as many columns as fit,
   so narrower screens get fewer shapes per row rather than smaller shapes. */
.fv-site .grid{ --cell:68px; display:grid; grid-template-columns:repeat(auto-fill,var(--cell)); justify-content:center;
  gap:var(--space-1); width:100vw; max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:0 var(--space-2); }
@media (max-width:760px){ .fv-site .grid{ --cell:52px; } }
.fv-site .grid .cell{ aspect-ratio:1/1; display:grid; place-items:center; position:relative; } .fv-site .grid .cell svg{ width:62%; height:62%; animation:fv-shapePulse 4.5s ease-in-out infinite; }
/* hover echo: shaded copies ripple outward from the clover, then vanish.
   It starts transparent so it never masks the clover underneath: at full opacity on top of
   the shape it hid the fill transition and read as an instant flip to red. */
.fv-site .grid .cell .echo{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; z-index:2;
  animation:fv-cloverEcho 1s cubic-bezier(.22,.61,.36,1) forwards; }
.fv-site .grid .cell .echo svg{ width:62%; height:62%; animation:none; }
@keyframes fv-cloverEcho{ 0%{ transform:scale(1); opacity:0; } 30%{ opacity:.4; } 100%{ transform:scale(3); opacity:0; } }
/* scoped to the cell's own clover (> svg) so the echo copies keep the colour they were built
   with, instead of the cell's red/grey state repainting them */
.fv-site .grid .cell > svg path{ fill:var(--clover-grey); transition:fill .7s ease-in-out; }
.fv-site .grid .cell.red > svg path{ fill:var(--clover-red); }
/* every shape gently pulses in size and intensity (staggered timing set per element in JS) */
@keyframes fv-shapePulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(0.9); opacity:0.72; } }
.fv-site .bl svg{ animation:fv-shapePulse 5s ease-in-out infinite; }
/* the hero background shape and the large bleed pill shapes stay solid (no pulse) */
.fv-site .hero-shape .bl svg, .fv-site .shape-figure.bleed .bl svg{ animation:none !important; opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion:reduce){ .fv-site .grid .cell svg, .fv-site .bl svg{ animation:none; } .fv-site .grid .cell .echo{ display:none; } }
/* Legal pages: single measured column of flush-left prose */
.fv-site .legal{ max-width:var(--measure); }
.fv-site .legal h2{ font-size:clamp(1.15rem,1.9vw,1.5rem); margin:var(--space-block) 0 var(--space-3); }
.fv-site .legal h2:first-child{ margin-top:0; }
.fv-site .legal h3{ font-size:1rem; margin:var(--space-5) 0 var(--space-2); }
.fv-site .legal p{ color:inherit; font-size:1rem; line-height:1.75; margin:0 0 var(--space-4); }
.fv-site .legal ul{ margin:0 0 var(--space-4); padding-left:var(--space-4); }
.fv-site .legal li{ color:inherit; font-size:1rem; line-height:1.75; margin-bottom:var(--space-2); }
.fv-site .legal a{ color:var(--red); }
.fv-site .legal .placeholder{ color:var(--red); font-weight:800; }
.fv-site .legal-meta{ font-size:.86rem; color:#8a8a8a; margin-top:var(--space-4); }
.fv-site .legal-note{ border-left:3px solid var(--red); padding:var(--space-4) 0 var(--space-4) var(--space-4); margin:0 0 var(--space-block); }
.fv-site .legal-note p{ margin:0; font-size:.92rem; color:var(--muted-2); }

.fv-site .closer-caption{ text-align:left; margin-top:var(--space-section-tight); }
.fv-site .closer-caption .big{ font-size:clamp(1.4rem,3.4vw,2.4rem); font-weight:400; letter-spacing:-0.02em; }
.fv-site .closer-caption .small{ color:#9a9a9a; margin-top:var(--space-3); font-size:.95rem; }

/* ============================================================
   PAGE HEROES (interior)
   ============================================================ */
.fv-site .page-hero{ padding-top:calc(var(--nav-h) + var(--space-hero-top)); }
.fv-site .page-hero .kicker{ color:var(--red); }
.fv-site .page-hero p.lead{ max-width:40ch; }
.fv-site .hero-dark{ background:#000; color:#fff; }   /* dark hero areas are solid black, never gradients */

/* feature cards */
.fv-site .feature{ border:1px solid var(--line); border-radius:22px; padding:var(--space-density-roomy); background:#fff; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.fv-site .feature:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -30px rgba(0,0,0,.25); border-color:#ddd; }
.fv-site .feature .num{ font-weight:800; color:var(--red); font-size:.9rem; letter-spacing:.1em; }
.fv-site .feature h3{ font-size:1.25rem; margin:var(--space-4) 0 var(--space-3); }
.fv-site .feature .body{ font-size:.98rem; color:#444; }

.fv-site .dark .feature{ background:var(--surface-dark); border-color:var(--line-dark); }
.fv-site .dark .feature:hover{ border-color:#333; }
.fv-site .dark .feature .body{ color:#bdbdbd; }
/* inverted (white) feature card */
.fv-site .feature.invert, .fv-site .dark .feature.invert{ background:#fff; border-color:#fff; }
.fv-site .feature.invert h3, .fv-site .dark .feature.invert h3{ color:#0a0a0a; }
.fv-site .feature.invert .body, .fv-site .dark .feature.invert .body{ color:#444; }
.fv-site .feature.invert .num, .fv-site .dark .feature.invert .num{ color:var(--red); }

/* step list */
.fv-site .steps{ counter-reset:s; display:grid; gap:0; }
.fv-site .step{ counter-increment:s; display:grid; grid-template-columns:auto 1fr; gap:var(--space-5); padding:var(--space-6) 0; border-top:0; align-items:start; }
.fv-site .step::before{ content:counter(s,decimal-leading-zero); font-weight:800; font-size:1.4rem; color:var(--red); }
.fv-site .step h3{ font-size:1.3rem; margin-bottom:var(--space-2); }
.fv-site .step .body{ color:#444; max-width:60ch; }

/* ============================================================
   BLOG / KNOWLEDGE
   ============================================================ */
.fv-site .article-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-grid-gap); }
@media (max-width:900px){ .fv-site .article-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .fv-site .article-grid{ grid-template-columns:1fr; } }

.fv-site .post-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff; transition:transform .2s ease, box-shadow .2s ease; }
.fv-site .post-card:hover{ transform:translateY(-5px); box-shadow:0 34px 60px -34px rgba(0,0,0,.3); }
.fv-site .post-thumb{ aspect-ratio:16/10; display:grid; place-items:center; position:relative; overflow:hidden; }
.fv-site .post-thumb svg{ width:60%; height:60%; }
.fv-site .post-body{ padding:var(--space-5) var(--space-5) var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); flex:1; }
.fv-site .post-meta{ display:flex; gap:var(--space-3); align-items:center; font-size:.78rem; color:var(--muted-3); letter-spacing:.02em; }
/* always hugs its text: align-self/width stop a flex parent stretching it to full width */
.fv-site .tag{ display:inline-block; align-self:flex-start; width:fit-content; max-width:100%;
  font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#6f6f6f; background:rgba(0,0,0,.06); padding:var(--space-1) var(--space-2); border-radius:999px; }
.fv-site .dark .tag, .fv-site .card-dark .tag{ color:#b2b2b2; background:rgba(255,255,255,.1); }
.fv-site .post-card h3{ font-size:1.2rem; line-height:1.15; }
.fv-site .post-card p{ color:var(--muted-2); font-size:.95rem; flex:1; }
.fv-site .post-card .readmore{ font-weight:800; color:#111; font-size:.9rem; }
.fv-site .post-card:hover .readmore{ color:var(--red); }

.fv-site .featured{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--space-block); align-items:center; border:1px solid var(--line); border-radius:26px; overflow:hidden; background:#fff; }
.fv-site .featured .featured-media{ min-height:340px; display:grid; place-items:center; align-self:stretch; }
.fv-site .featured .featured-copy{ padding:var(--space-block); }
@media (max-width:820px){ .fv-site .featured{ grid-template-columns:1fr; } .fv-site .featured .featured-media{ min-height:240px; } }

/* article page */
.fv-site .prose{ max-width:var(--measure); margin:0 auto; }
.fv-site .prose > *{ margin-bottom:1.15em; }
.fv-site .prose p{ font-size:1.12rem; line-height:1.72; color:#222; }
.fv-site .prose h2{ font-size:clamp(1.6rem,3vw,2.1rem); margin-top:1.6em; }
.fv-site .prose h3{ font-size:1.3rem; margin-top:1.4em; }
.fv-site .prose blockquote{ border-left:4px solid var(--red); padding:var(--space-2) 0 var(--space-2) var(--space-5); margin:1.6em 0; font-style:italic; font-weight:700; font-size:1.3rem; line-height:1.35; color:#111; }
.fv-site .prose ul{ padding-left:1.2em; } .fv-site .prose li{ font-size:1.08rem; line-height:1.7; margin-bottom:.5em; color:#222; }
.fv-site .article-head{ max-width:var(--measure); margin:0 auto; }
.fv-site .article-head h1{ font-size:clamp(2.2rem,5vw,3.6rem); margin:var(--space-4) 0 var(--space-4); }
.fv-site .article-meta{ display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center; color:#666; font-size:.95rem; }
.fv-site .avatar{ width:40px; height:40px; border-radius:50%; background:#111; display:grid; place-items:center; color:#fff; font-weight:800; font-size:.9rem; }
.fv-site .article-hero-media{ max-width:960px; margin:var(--space-block) auto; border-radius:24px; overflow:hidden; aspect-ratio:16/7; display:grid; place-items:center; }

/* ============================================================
   CONTACT / LOGIN forms
   ============================================================ */
.fv-site .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
@media (max-width:640px){ .fv-site .form-grid{ grid-template-columns:1fr; } }
.fv-site .field{ display:flex; flex-direction:column; gap:var(--space-2); }
.fv-site .field.full{ grid-column:1/-1; }
.fv-site .field label{ font-size:.85rem; font-weight:700; letter-spacing:.02em; line-height:1.5; }
.fv-site .field input, .fv-site .field textarea, .fv-site .field select{
  font-family:inherit; font-size:1rem; padding:var(--space-4) var(--space-4); border-radius:12px;
  border:1px solid var(--line); background:#fff; color:#111; transition:border-color .15s ease, box-shadow .15s ease;
}
.fv-site .field textarea{ min-height:150px; resize:vertical; }
.fv-site .field input:focus, .fv-site .field textarea:focus, .fv-site .field select:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(255,23,23,.12); }
.fv-site .form-note{ font-size:.85rem; color:var(--muted-3); margin-top:var(--space-2); }
.fv-site .form-success{ display:none; padding:var(--space-4) var(--space-4); border-radius:12px; background:rgba(255,23,23,.08); border:1px solid rgba(255,23,23,.3); color:#111; font-weight:400; }
.fv-site .form-success.show{ display:block; }

.fv-site .auth-wrap{ min-height:100svh; display:grid; place-items:center; padding:calc(var(--nav-h) + var(--space-7)) var(--gutter) var(--space-8); background:#000; }
.fv-site .auth-card{ width:100%; max-width:440px; background:var(--surface-dark); border:1px solid var(--line-dark); border-radius:24px; padding:var(--space-block); box-shadow:0 50px 90px -40px rgba(0,0,0,.9); }
.fv-site .auth-brand{ display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-5); }
.fv-site .auth-mark{ display:inline-flex; width:34px; height:34px; flex:0 0 auto; }
.fv-site .auth-mark svg{ width:100%; height:100%; display:block; }
.fv-site .auth-name{ font-weight:800; font-size:1.2rem; color:#fff; }
.fv-site .auth-card h1{ font-size:1.9rem; margin-bottom:var(--space-2); }
.fv-site .auth-card .sub{ color:#9a9a9a; margin-bottom:var(--space-5); font-size:.98rem; }
.fv-site .auth-card .field label{ color:#ddd; }
.fv-site .auth-card .field input{ background:#141414; border-color:var(--line-dark); color:#fff; }
.fv-site .auth-card .field input:focus{ border-color:var(--red); }
.fv-site .auth-card .btn{ width:100%; justify-content:center; margin-top:var(--space-2); }
.fv-site .auth-row{ display:flex; justify-content:space-between; align-items:center; margin:var(--space-4) 0 var(--space-1); font-size:.88rem; }
.fv-site .auth-row a{ color:var(--red); font-weight:700; }
.fv-site .auth-foot{ text-align:left; margin-top:var(--space-5); color:#9a9a9a; font-size:.92rem; }
.fv-site .auth-foot a{ color:#fff; font-weight:700; }

/* pre-footer CTA band inside pages */
.fv-site .cta-band{ background:#000; color:#fff; border-radius:28px; padding:var(--space-section-tight); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-5); }
.fv-site .cta-band h2{ font-size:clamp(1.8rem,4vw,3rem); max-width:20ch; }
.fv-site .cta-band .btn{ background:rgba(255,255,255,.14); color:#fff; }
.fv-site .cta-band .btn:hover{ background:rgba(255,255,255,.24); color:#fff; }

/* ============================================================
   RENDERER ADDITIONS
   ============================================================
   Everything above is the ported sheet. Everything below exists because the
   page is now a list of records rather than hand-written markup, and the
   presentation vocabulary in `@/lib/site/blocks` has to land somewhere.
*/

/* ---------- flow: the rules that replace ~45 hand-written margins ----------
   The original set `margin-top` inline on nearly every paragraph, heading and
   button row. A block declares its `density`; the gap between two stacked
   children then depends on WHAT they are, because that is what the original's
   values actually tracked: a heading stands further off its copy than one
   paragraph does from the next, and a grid of columns further still. The
   values are the ones the live pages use most at each density. */
.fv-site [data-flow="tight"]{ --flow:var(--space-density-compact); --flow-lead:var(--space-density-normal); --flow-head:var(--space-head-body);
  --flow-action:var(--space-density-normal); --flow-grid:var(--space-head-body); }
.fv-site [data-flow="normal"]{ --flow:var(--space-density-normal); --flow-lead:var(--space-density-normal); --flow-head:var(--space-head-body);
  --flow-action:var(--space-density-roomy); --flow-grid:var(--space-block); }
.fv-site [data-flow="roomy"]{ --flow:var(--space-density-roomy); --flow-lead:var(--space-density-roomy); --flow-head:var(--space-head-body);
  --flow-action:var(--space-block); --flow-grid:var(--space-block); }

.fv-site [data-flow] > * + *{ margin-top:var(--flow); }
/* copy after the lead paragraph */
.fv-site [data-flow] > .lead + *{ margin-top:var(--flow-lead); }
/* a heading's first line of copy */
.fv-site [data-flow] > h1 + *, .fv-site [data-flow] > h2 + *, .fv-site [data-flow] > h3 + *{ margin-top:var(--flow-head); }
/* buttons and the contact list sit off the copy above them */
.fv-site [data-flow] > * + .flow-action{ margin-top:var(--flow-action); }
/* columns, cards and steps under a heading */
.fv-site [data-flow] > * + .cols2, .fv-site [data-flow] > * + .cols3, .fv-site [data-flow] > * + .cols4,
.fv-site [data-flow] > * + .steps, .fv-site [data-flow] > * + .text-cols{ margin-top:var(--flow-grid); }
/* Calibrations the step values cannot carry: an interior hero's lead and
   buttons sit further off what is above them than a section's copy does, and a
   roomy grid of feature cards further off its heading than principles do. */
.fv-site .page-hero [data-flow="normal"]{ --flow-head:var(--space-head-body); }
/* Partner marks inside a column sit a little further off the sentence that
   introduces them; a column's closing line is a lead set one size down. */
.fv-site [data-flow] > * + .partners{ margin-top:var(--space-4); }
.fv-site .lead.closer{ font-size:1.2rem; }
.fv-site .page-hero [data-flow="roomy"]{ --flow-head:var(--space-head-body); }
.fv-site .page-hero.dark [data-flow="normal"]{ --flow-head:var(--space-head-body); }   /* the black hero, what-we-do */
.fv-site .page-hero [data-flow="normal"] > * + .flow-action{ margin-top:var(--space-6); }
.fv-site [data-flow="roomy"] > * + .feature-row{ margin-top:var(--space-section-tight); }

/* ---------- spacing: the band a block sits in ----------
   `flush` is the ported `padding-top:0` that made two sections read as one. */
.fv-site section[data-spacing="flush"]{ padding-top:0; }
/* `attached` puts the block INSIDE the band above: neither band pads the seam,
   so the block's own margin is the whole gap — the home page's diagram, 40px
   under the columns it illustrates. */
.fv-site section[data-spacing="attached"]{ padding-top:0; }
.fv-site section:has(+ section[data-spacing="attached"]){ padding-bottom:0; }
/* `tight` pulls a band up under the one before it (the article grid, the
   related list); on a hero, whose top must clear the nav, it tightens the
   bottom instead (see the page-hero rule further down). */
.fv-site section[data-spacing="tight"]{ padding-top:var(--space-section-tight); }
.fv-site section[data-spacing="loose"]{ padding:var(--space-section-loose) var(--gutter); }
/* two white sections meeting: the gap is one --section-y, not two (as on Home; Freya, 2026-10-27).
   Not after a pinned sideways scroll (.hs-on): it has no bottom padding, so the next band keeps its top. */
.fv-site main > section.paper:not(.page-hero):not(.hs-on) + section.paper{ padding-top:0; }

/* ---------- measure: brand guidelines 10.1, item 5 (exactly) ----------
   Measure sets text width and always grows with its size. Applied to the text
   a visitor reads, never to the section, so a figure or a grid beside the copy
   still uses the full column.

     step   heading     lead
     xs     12ch        24ch
     sm     16ch        32ch
     md     20ch        40ch
     lg     24ch        48ch
     xl     no limit    60ch

   `none` sets no measure. 10.1 gives no values for body copy, so body caps
   keep their earlier widths. `.measured` doubles the class weight so a cap here
   outranks the plain `.page-hero p.lead` default. */
.fv-site [data-measure="xs"] .measured.m-heading{ max-width:12ch; }
.fv-site [data-measure="sm"] .measured.m-heading{ max-width:16ch; }
.fv-site [data-measure="md"] .measured.m-heading{ max-width:20ch; }
.fv-site [data-measure="lg"] .measured.m-heading{ max-width:24ch; }
.fv-site [data-measure="xl"] .measured.m-heading{ max-width:none; }

.fv-site [data-measure="xs"] .measured.m-lead{ max-width:24ch; }
.fv-site [data-measure="sm"] .measured.m-lead{ max-width:32ch; }
.fv-site [data-measure="md"] .measured.m-lead{ max-width:40ch; }
.fv-site [data-measure="lg"] .measured.m-lead{ max-width:48ch; }
.fv-site [data-measure="xl"] .measured.m-lead{ max-width:60ch; }

.fv-site [data-measure="md"] .measured.m-body, .fv-site [data-measure="lg"] .measured.m-body{ max-width:44ch; }
.fv-site [data-measure="xl"] .measured.m-body{ max-width:60ch; }
@media (max-width:760px){ .fv-site .measured{ max-width:100% !important; } }

/* A row of buttons, which the original wrote inline on every occurrence. */
.fv-site .btn-row{ display:flex; gap:var(--space-4); flex-wrap:wrap; }

/* The legal pages' "Last updated" line keeps its own ported gap. */
.fv-site [data-flow] > .legal-meta{ margin-top:var(--space-4); }

/* ---------- a figure beside the copy ----------
   The heading belongs to the copy's column, not above the pair, and the two
   halves centre on each other — `.wrap.cols2` with `align-items:center` in the
   original. */
.fv-site .cols-figure{ align-items:center; }

/* ---------- a figure behind the heading ----------
   The red "8" floats at the top right of the band's content box, under the
   heading and the columns. `position:relative` on the wrap is what anchors it
   there rather than to the section's padding edge. */
.fv-site .wrap:has(> .reset-shape){ position:relative; }
.fv-site .wrap:has(> .reset-shape) > :not(.reset-shape){ position:relative; z-index:1; }
.fv-site [data-flow] > .reset-shape{ margin:0; }
@media (max-width:820px){ .fv-site [data-flow] > .reset-shape{ margin:var(--space-block) auto 0; } }

/* ---------- an interior hero lead on black ----------
   Softened a step off pure white, as `what-we-do.html` set it inline. */
.fv-site .page-hero.dark .lead{ color:#e9e9e9; }

/* ---------- the value panel continues the band above it ----------
   In the original the dark panel sat INSIDE the prose band before it, 88px
   under the columns — not a band of its own. A `flush` panel therefore takes
   that gap from the band above, instead of stacking a full band padding on top
   of it. */
.fv-site section:has(+ section[data-spacing="flush"] > .wrap > .card-dark){ padding-bottom:0; }
.fv-site section[data-spacing="flush"] > .wrap > .card-dark,
.fv-site section[data-spacing="attached"] > .wrap > .card-dark{ margin-top:var(--space-hero-top); }

/* The dark value panel's row divider — `.rule` with the opacity it always
   carried inline. It draws nothing; it only keeps the gap. */
.fv-site .card-dark .rule{ opacity:.14; margin:var(--space-block) 0; }
/* The panel is dark whatever band it sits on, so its copy takes the dark-band
   grey from the card rather than from the section. */
.fv-site .card-dark .muted{ color:var(--muted-dark); }

/* ---------- artwork presets ----------
   `ArtRef` of kind `preset` names one of eight compositions. The gradient field
   behind each is here; the geometry is in the components, where an author
   cannot reach it. */
.fv-site .art{ display:grid; place-items:center; position:relative; overflow:hidden; }
.fv-site .art svg{ width:60%; height:60%; }
.fv-site .art-playbook-rings{ background:linear-gradient(150deg,#111,#000); }
.fv-site .art-quadrant-split{ background:linear-gradient(150deg,#7a0000,#050505); }
.fv-site .art-orbit-dark{ background:linear-gradient(150deg,#1a1a1a,#000); }
.fv-site .art-pill-pair-red{ background:radial-gradient(120% 130% at 78% 12%, #ff2a2a 0%, #7a0000 42%, #050505 100%); }
.fv-site .art-pill-pair-dark{ background:linear-gradient(150deg,#000,#2a2a2a); }
.fv-site .art-ring-nodes{ background:linear-gradient(150deg,#1a1a1a,#000); }
.fv-site .art-stacked-squares{ background:linear-gradient(150deg,#e30000,#7a0000); }
.fv-site .art-half-disc{ background:linear-gradient(150deg,#e30000,#3a0000); }

/* ---------- the contact form, as a card ----------
   Ported from the inline style on `contact.html`'s `<form>`. */
.fv-site .contact-card{ background:#fff; border:1px solid var(--line); border-radius:24px;
  padding:var(--space-density-roomy); box-shadow:0 40px 80px -40px rgba(0,0,0,.2); }
.fv-site .contact-card .btn{ margin-top:var(--space-4); width:100%; justify-content:center; }
.fv-site .form-error{ margin-top:var(--space-4); color:#b00020; font-size:.85rem; }
.fv-site .form-error a{ color:#b00020; text-decoration:underline; }
.fv-site .contact-details{ display:grid; gap:var(--space-5); }
.fv-site .contact-details a, .fv-site .contact-details div{ color:#111; }
/* the question and the form: tops aligned, a wider gutter than a prose pair */
.fv-site .contact-grid{ align-items:start; gap:var(--space-section-tight); }
.fv-site [data-flow] > .contact-details{ margin-top:var(--space-block); }

/* ---------- newsletter, once it has been submitted ---------- */
.fv-site .f-news .news-done{ color:#fff; font-size:.9rem; font-weight:400; }
.fv-site .f-news .news-label{ font-size:.9rem; color:#cfcfcf; font-weight:700; }
/* The field wrapper is the flex item the bare input used to be: it takes the
   free width, and the input keeps its own intrinsic width as the minimum — which
   is what sized the original's last footer column. */
.fv-site .f-news [data-slot="field"]{ flex:1; min-width:0; gap:0; }
.fv-site .f-news [data-slot="field"] > input{ width:auto; }

/* ---------- venn shade layers ----------
   Nine clones behind each solid rect, fanned outward. The transform is set per
   frame from the scrub, so only the paint rule lives here. */
.fv-site .venn-shade{ will-change:transform; }

/* ---------- article chrome ---------- */
.fv-site .article-back{ text-decoration:none; }
.fv-site .article-head .article-author{ font-weight:800; color:#111; }
.fv-site .article-head .article-role{ font-size:.85rem; }
.fv-site .article-byline{ display:flex; align-items:center; gap:var(--space-3); }
/* The masthead band runs straight into the body: no padding under it. */
.fv-site .page-hero.article-hero{ padding-bottom:0; }
/* An article's opening paragraph is its standfirst, set as the original set it
   inline on `article.html`. */
.fv-site .prose > p:first-child{ font-size:1.3rem; font-weight:700; color:#111; }
/* Markdown wraps a quote's text in its own <p>; the quote's type must reach it
   rather than the body-paragraph rule above. */
.fv-site .prose blockquote p{ font-size:inherit; line-height:inherit; color:inherit; }
/* The body band under an article masthead, and a hero that keeps its nav
   clearance whatever spacing step it declares. */
.fv-site section[data-spacing="tight"]:has(> .prose){ padding-top:var(--space-section-tight); }
.fv-site .page-hero[data-spacing="tight"]{ padding-top:calc(var(--nav-h) + var(--space-hero-top)); padding-bottom:var(--space-block); }

/* ---------- post cards ---------- */
.fv-site .post-card .post-thumb, .fv-site .featured .featured-media{ background:linear-gradient(150deg,#111,#000); }
.fv-site .featured .featured-media .art{ width:100%; height:100%; }
/* The article masthead's field fills the whole media panel, with the mark at
   the fixed 200px the original drew it at (150px on the featured card). */
.fv-site .article-hero-media .art{ width:100%; height:100%; }
.fv-site .article-hero-media .art svg{ width:200px; height:auto; }
.fv-site .featured .featured-media .art svg{ width:150px; height:auto; }
.fv-site .featured .readmore{ display:inline-block; margin-top:var(--space-4); color:var(--red); }

/* ---------- the shape rigs, as the components size them ----------
   The original set `max-width` inline on every `[data-stack]`. Three sizes. */
.fv-site .stack[data-size="sm"]{ max-width:260px; }
.fv-site .stack[data-size="md"]{ max-width:290px; }
.fv-site .stack[data-size="lg"]{ max-width:460px; }
.fv-site .red-stack[data-size="sm"]{ max-width:260px; }
.fv-site .red-stack[data-size="md"]{ max-width:300px; }
.fv-site .red-stack[data-size="lg"]{ max-width:340px; }
/* The home hero's rig is sized by `--shape-w`, never by the size step: the
   step's cap would otherwise halve it on any viewport taller than ~620px. */
.fv-site .hero .hero-shape[data-size]{ max-width:none; }

/* ============================================================
   LANDING PAGE AGENT — the conversation block (BP-070)
   Reuses the site's own tokens, the .feature card and the .field form; adds
   only what a conversation needs. Every interactive part has a visible focus
   ring (WCAG 2.2 AA 2.4.7 / 2.4.11) and a target of at least 44px.
   ============================================================ */
.fv-site .agent-convo{ max-width:880px; }
.fv-site .agent-convo > * + *{ margin-top:var(--space-density-roomy); }
.fv-site .ac-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.fv-site .ac-trap{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.fv-site .agent-convo button:focus-visible, .fv-site .agent-convo a:focus-visible, .fv-site .agent-convo input:focus-visible, .fv-site .agent-convo textarea:focus-visible, .fv-site .agent-convo summary:focus-visible{ outline:3px solid var(--red); outline-offset:3px; }
.fv-site .ac-log{ display:flex; flex-direction:column; gap:var(--space-4); list-style:none; padding:0; margin:0; }
.fv-site .ac-msg{ max-width:min(640px,92%); padding:var(--space-4) var(--space-4); border-radius:18px; font-size:1.02rem; line-height:1.5; }
.fv-site .ac-msg.agent{ align-self:flex-start; background:rgba(0,0,0,.05); color:var(--ink); }
.fv-site .ac-msg.visitor{ align-self:flex-end; background:var(--ink); color:var(--white); }
.fv-site .dark .ac-msg.agent{ background:var(--surface-dark); color:var(--white); border:1px solid var(--line-dark); }
.fv-site .dark .ac-msg.visitor{ background:var(--white); color:var(--ink); }
.fv-site .ac-chips{ display:flex; flex-wrap:wrap; gap:var(--space-3); list-style:none; padding:0; margin:0; }
.fv-site .ac-chips .btn{ min-height:44px; }
.fv-site .ac-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-4); list-style:none; padding:0; margin:0; }
.fv-site .ac-cards .feature{ display:flex; flex-direction:column; gap:var(--space-3); height:100%; }
.fv-site .ac-cards .feature h3{ margin:0; }
.fv-site .ac-cards dl{ display:grid; gap:var(--space-2); margin:0; }
.fv-site .ac-cards dt{ font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.fv-site .dark .ac-cards dt{ color:var(--muted-dark); }
.fv-site .ac-cards dd{ margin:0; }
.fv-site .ac-bvr{ font-weight:800; font-size:1.15rem; }
.fv-site .ac-label{ font-size:.85rem; font-style:italic; color:var(--muted-2); }
.fv-site .dark .ac-label{ color:var(--muted-dark); }
.fv-site .ac-cards .feature[data-chosen="true"]{ border-color:var(--red); box-shadow:0 0 0 2px var(--red); }
.fv-site .ac-cards .btn{ margin-top:auto; align-self:flex-start; min-height:44px; }
.fv-site .ac-panel{ border:1px solid var(--line); border-radius:22px; padding:var(--space-density-roomy); background:var(--paper); color:var(--ink); }
.fv-site .dark .ac-panel{ background:var(--surface-dark); border-color:var(--line-dark); color:var(--white); }
.fv-site .ac-panel h3{ font-size:1.25rem; margin:0 0 var(--space-4); }
.fv-site .ac-check{ display:flex; gap:var(--space-3); align-items:flex-start; font-size:.92rem; line-height:1.5; margin-top:var(--space-4); }
.fv-site .ac-check input{ width:22px; height:22px; flex:0 0 auto; margin-top:0; accent-color:var(--red); }
.fv-site .ac-note{ font-size:.85rem; color:var(--muted-2); margin-top:var(--space-3); }
.fv-site .dark .ac-note{ color:var(--muted-dark); }
.fv-site .ac-note a, .fv-site .ac-check a{ color:inherit; text-decoration:underline; }
.fv-site .ac-error{ color:var(--red-deep); font-weight:800; font-size:.92rem; margin-top:var(--space-3); }
.fv-site .dark .ac-error{ color:var(--red); }
.fv-site .ac-results{ list-style:none; padding:0; margin:0; display:grid; gap:var(--space-4); }
.fv-site .ac-results h4{ font-size:1.05rem; margin:0 0 var(--space-2); }
.fv-site .ac-results ul{ padding-left:1.2em; margin:0; }
.fv-site .ac-actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.fv-site .ac-actions .btn{ min-height:44px; }
.fv-site .ac-slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--space-3); list-style:none; padding:0; margin:0; }
.fv-site .ac-slots .btn{ width:100%; justify-content:center; min-height:44px; }
.fv-site .ac-composer{ display:flex; gap:var(--space-3); align-items:stretch; }
.fv-site .ac-composer textarea{ flex:1; min-height:56px; max-height:200px; resize:vertical; font-family:inherit; font-size:1rem; padding:var(--space-4) var(--space-4); border-radius:16px; border:1px solid var(--line); background:var(--white); color:var(--ink); }
.fv-site .ac-composer textarea:focus-visible{ outline:3px solid var(--red); outline-offset:2px; }
.fv-site .ac-composer .btn{ min-height:56px; }
.fv-site .ac-optin{ display:flex; gap:var(--space-3); align-items:center; font-size:.85rem; color:var(--muted-2); }
.fv-site .dark .ac-optin{ color:var(--muted-dark); }
.fv-site .ac-optin input{ width:20px; height:20px; accent-color:var(--red); }
@media (max-width:520px){
  .fv-site .ac-composer{ flex-direction:column; }
  .fv-site .ac-composer .btn{ min-height:48px; justify-content:center; }
}


/* ============================================================
   AGENTIC SITE REVIEW FIXES (2026-10-17, Maya's journey review)
   Appended so every rule above is untouched. Remove this block to revert.
   ============================================================ */
/* 1. The main action is red again on every surface. --red-deep, not --red:
   white on #ff1717 is 3.9:1 and fails WCAG AA for button text; on #c60000 it is 5.9:1. */
.fv-site .btn.btn-red,
.fv-site .dark .btn.btn-red, .fv-site .hero-dark .btn.btn-red, .fv-site .footer-cta .btn.btn-red,
.fv-site .auth-card .btn.btn-red, .fv-site .card-dark .btn.btn-red, .fv-site .cta-band .btn.btn-red{ background:var(--red-deep); color:#fff; }
.fv-site .btn.btn-red:hover,
.fv-site .dark .btn.btn-red:hover, .fv-site .hero-dark .btn.btn-red:hover, .fv-site .footer-cta .btn.btn-red:hover,
.fv-site .auth-card .btn.btn-red:hover, .fv-site .card-dark .btn.btn-red:hover, .fv-site .cta-band .btn.btn-red:hover{ background:#a30000; color:#fff; }
.fv-site .btn.btn-red[disabled]{ opacity:.55; }

/* 2. Footer headings moved up one level (h3 -> h2, h4 -> h3) so pages without section
   headings, like Contact, keep a sequential outline. Same look as before. */
.fv-site .footer-cta h2{ color:#fff; font-size:clamp(1.6rem,3.4vw,2.6rem); max-width:16ch; }
.fv-site .f-col h3{ color:#fff; font-size:.82rem; font-weight:700; line-height:1.5; letter-spacing:.16em; text-transform:uppercase; margin-bottom:var(--space-4); }

/* 3. Home hero: shape one size smaller, so the copy sits on black and rises;
   small top line in white at reduced strength; lead one width step wider. */
.fv-site .hero{ --shape-w:min(clamp(460px,58vw,850px), calc(100svh - 220px)); }
@media (max-width:760px){ .fv-site .hero{ --shape-w:clamp(320px,84vw,480px); } }
.fv-site .hero .eyebrow{ color:rgba(255,255,255,.72); }
.fv-site .hero .hero-sub{ max-width:48ch; }


/* ============================================================
   KNOWLEDGE PORTAL, ARTICLE PAGES AND EDITORIAL LOOK (2026-10-17)
   Approved by Guy: Inter only; red behind text only as #c60000; Freya's
   "now" items. Appended so every rule above is untouched.
   ============================================================ */
.fv-site [hidden]{ display:none !important; }
.fv-site .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; }

/* Bands that used to be tinted are white (brand v2.5.0: light sections are white).
   A hairline under the last one keeps the hand-over to the next section visible. */
.fv-site .tint{ background:var(--paper); color:var(--ink); }
.fv-site .tint:has(+ section:not(.tint)){ border-bottom:1px solid var(--line); }
.fv-site .tint .muted{ color:var(--muted); }

/* Red kept for the main button only (and the brand shapes). Accents that
   used red now take the ink of the surface they sit on. Focus rings stay
   red: they are an accessibility signal, not decoration. */
.fv-site .eyebrow{ color:inherit; opacity:.72; }
.fv-site .feature .num, .fv-site .dark .feature .num, .fv-site .feature.invert .num, .fv-site .dark .feature.invert .num{ color:inherit; opacity:.55; }
.fv-site .step::before{ color:inherit; opacity:.45; }
.fv-site .nav-link.active::after{ background:currentColor; }
.fv-site .sup, .fv-site .page-hero .kicker, .fv-site .footer-bottom .red{ color:inherit; }
.fv-site .featured .readmore, .fv-site .post-card:hover .readmore{ color:inherit; }
.fv-site .f-news button{ background:rgba(255,255,255,.14); }
.fv-site .f-news button:hover{ background:rgba(255,255,255,.24); }
.fv-site .f-social a:hover{ border-color:#666; background:rgba(255,255,255,.06); }
.fv-site .dropdown a:hover{ background:rgba(255,255,255,.08); }
.fv-site .dropdown a:hover small{ color:#bbb; }

/* Clearly marked placeholders: copy still waiting on a decision */
.fv-site .placeholder{ display:inline-block; font-style:italic; font-weight:800; color:#6b4a00; background:#fff3cd; border:1px dashed #b58a00; border-radius:6px; padding:0 var(--space-2); }
.fv-site .status{ display:inline-block; margin-left:var(--space-2); font-size:.68rem; font-weight:700; letter-spacing:0; text-transform:none; color:#6b4a00; background:#fff3cd; border-radius:999px; padding:var(--space-1) var(--space-2); vertical-align:middle; }

/* ---------- portal (/articles) ---------- */
.fv-site .portal-head .lead{ max-width:40ch; }
.fv-site .portal-search{ margin-top:var(--space-density-roomy); max-width:560px; }
.fv-site .portal-search input{ width:100%; font-family:inherit; font-size:1.05rem; padding:var(--space-4) var(--space-5); border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink); }
.fv-site .portal-search input:focus{ outline:3px solid var(--red-deep); outline-offset:2px; }
.fv-site .start-here{ padding-bottom:var(--space-section-tight); }
.fv-site .start-strip{ display:inline-flex; gap:var(--space-2); align-items:center; padding:var(--space-4) var(--space-5); border-radius:999px; background:#fff; border:1px solid var(--line); font-size:.98rem; }
.fv-site .start-strip:hover{ border-color:var(--ink); }
.fv-site .flagship-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:var(--space-grid-gap); margin-top:var(--space-density-roomy); }
.fv-site .flagship-stack{ display:grid; gap:var(--space-grid-gap); }
.fv-site .flagship-big .post-thumb{ aspect-ratio:16/9; }
.fv-site .flagship-big h3{ font-size:clamp(1.5rem,2.6vw,2.1rem); }
.fv-site .flagship-small{ display:grid; grid-template-columns:150px 1fr; }
.fv-site .flagship-small .post-thumb{ aspect-ratio:auto; height:100%; }
@media (max-width:820px){ .fv-site .flagship-grid{ grid-template-columns:1fr; } .fv-site .flagship-small{ grid-template-columns:1fr; } .fv-site .flagship-small .post-thumb{ aspect-ratio:16/10; } }
.fv-site .chips-band{ padding-bottom:var(--space-density-normal); }
.fv-site .topic-chips{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.fv-site .topic-chips a{ padding:var(--space-3) var(--space-4); border-radius:999px; border:1px solid var(--line); font-size:.9rem; color:#333; }
.fv-site .topic-chips a:hover{ border-color:#999; }
.fv-site .topic-chips a[aria-current="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.fv-site .portal-empty{ margin-top:var(--space-4); color:var(--muted-2); }
.fv-site .topic-block{ padding-top:var(--space-section-tight); padding-bottom:var(--space-section-tight); }
.fv-site .topic-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:var(--space-block); align-items:end; }
.fv-site .topic-arg{ color:var(--muted-2); font-size:1.02rem; max-width:52ch; }
@media (max-width:760px){ .fv-site .topic-head{ grid-template-columns:1fr; } }

/* ---------- article cards ---------- */
.fv-site .post-card .tag{ margin-bottom:0; }
.fv-site .post-card .summary{ color:var(--muted-2); font-size:.95rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:none; }
.fv-site .post-card .post-meta{ font-size:.8rem; color:var(--muted-3); flex:1; }
.fv-site .art-topic svg{ width:46%; height:auto; max-height:70%; }
.fv-site .art-design svg, .fv-site .art-seat svg{ width:70%; }
.fv-site .placeholder-card{ border-style:dashed; background:#fff; }
.fv-site .placeholder-card .post-thumb{ opacity:.45; }

/* ---------- article page ---------- */
.fv-site .article-hero{ padding-bottom:var(--space-block); }
.fv-site .article-head{ max-width:var(--measure); margin:0; }
.fv-site .article-hero .article-head{ max-width:min(var(--maxw),100%); margin:0 auto; }
.fv-site .article-head > *{ max-width:var(--measure); }
.fv-site .article-back{ display:inline-block; font-size:.88rem; color:#555; margin-bottom:var(--space-5); }
.fv-site .article-head .tag{ display:inline-block; }
.fv-site .article-head h1{ font-size:clamp(2.4rem,5.4vw,4.2rem); margin:var(--space-4) 0 var(--space-4); }
.fv-site .article-lead{ max-width:40ch; }
.fv-site .article-meta{ margin-top:var(--space-5); font-size:.92rem; color:#555; }
.fv-site .article-body{ padding-top:0; }
.fv-site .article-layout{ max-width:var(--maxw); margin:0 auto; }
.fv-site .article-layout.has-toc{ display:grid; grid-template-columns:220px minmax(0,var(--measure)); gap:var(--space-section-tight); align-items:start; }
.fv-site .article-layout .prose{ max-width:var(--measure); margin:0; }
.fv-site .article-layout .prose h2{ font-size:clamp(1.5rem,2.6vw,1.95rem); margin-top:1.8em; scroll-margin-top:calc(var(--nav-h) + var(--space-5)); }
.fv-site .article-layout .prose h2:first-child{ margin-top:0; }
.fv-site .article-toc{ position:sticky; top:calc(var(--nav-h) + var(--space-5)); }
.fv-site .toc summary{ font-size:.78rem; font-weight:700; letter-spacing:0; text-transform:none; cursor:pointer; margin-bottom:var(--space-3); }
.fv-site .toc ol{ list-style:none; display:grid; gap:var(--space-3); border-left:1px solid var(--line); padding-left:var(--space-4); }
.fv-site .toc a{ font-size:.88rem; color:#555; line-height:1.35; display:block; }
.fv-site .toc a:hover{ color:var(--ink); }
@media (max-width:900px){
  .fv-site .article-layout.has-toc{ grid-template-columns:1fr; }
  .fv-site .article-toc{ position:static; background:#fff; border:1px solid var(--line); border-radius:14px; padding:var(--space-4) var(--space-4); }
}
.fv-site .related .article-grid{ margin-top:var(--space-density-roomy); }
.fv-site .plain-list{ list-style:none; display:grid; gap:var(--space-4); max-width:60ch; }
.fv-site .plain-list li{ padding-left:var(--space-4); position:relative; font-size:1.05rem; }
.fv-site .plain-list li::before{ content:""; position:absolute; left:0; top:.65em; width:8px; height:2px; background:currentColor; }

/* Footer column titles are h2 now that the footer call to action is gone (Contact has no h2 of its own). Same look as before. */
.fv-site .f-col h2{ color:#fff; font-size:.82rem; font-weight:700; line-height:1.5; letter-spacing:0; text-transform:none; margin-bottom:var(--space-4); }
.fv-site .portal-head{ padding-bottom:var(--space-density-roomy); }
.fv-site .flagship-big .art-topic svg{ width:52%; max-height:none; }
/* Contrast (preview check, 2026-10-17): card tags and meta lines to at least 4.5:1 on white and light grey. */
.fv-site .tag{ color:#555; }
.fv-site .post-card .post-meta{ color:#666; }

/* ============================================================
   KNOWLEDGE AREA, SECOND PASS (2026-10-17, Maya's portal rulings)
   ============================================================ */
/* Contents list: plain weight; the section being read is marked by a dark
   left rule and black text, never by bold. */
.fv-site .toc a strong{ font-weight:inherit; }
.fv-site .toc li{ margin-left:calc(-1 * var(--space-4)); }
.fv-site .toc a{ border-left:2px solid transparent; padding-left:var(--space-3); }
.fv-site .toc a[aria-current="true"]{ color:var(--ink); border-left-color:var(--ink); }

/* Byline: one line on desktop; on a phone the author on one line and
   date with read time on the next. The read time is never alone. */
.fv-site .article-head > .article-meta{ max-width:none; }
.fv-site .article-meta{ display:block; }
.fv-site .article-meta .meta-by, .fv-site .article-meta .meta-when{ white-space:nowrap; }
@media (max-width:620px){
  .fv-site .article-meta .meta-sep{ display:none; }
  .fv-site .article-meta .meta-when{ display:block; margin-top:var(--space-1); }
}

/* "Where to start": the large card is a white card on the light grey band.
   Its picture is a light grey panel capped at 40% of the card's height (2fr of
   2fr+3fr); the art is positioned so it never adds height of its own. */
.fv-site .flagship-big{ display:grid; grid-template-rows:minmax(0,2fr) minmax(0,3fr); grid-template-areas:"pic" "text"; background:#fff; border-color:var(--line); }
.fv-site .flagship-big .post-thumb{ grid-area:pic; aspect-ratio:auto; min-height:0; background:var(--paper); position:relative; }
.fv-site .flagship-big .post-thumb .art{ position:absolute; inset:0; }
.fv-site .flagship-big .art-topic svg{ width:auto; height:72%; max-width:80%; }
.fv-site .flagship-big .post-body{ grid-area:text; }
.fv-site .flagship-small{ border-color:var(--line); }
.fv-site .flagship-small .post-thumb{ background:var(--paper); }
/* On a phone the argument comes first: tag, title and summary above the picture. */
@media (max-width:820px){
  .fv-site .flagship-big{ grid-template-rows:auto auto; grid-template-areas:"text" "pic"; }
  .fv-site .flagship-big .post-thumb{ height:140px; }
  .fv-site .flagship-small .post-thumb{ display:none; }
}
/* The two grey bands read as one: no empty band between the header and "Where to start". */
.fv-site .tint.flagships{ padding-top:var(--space-density-roomy); }
/* Card badges hug their text; a card's date line flows as one line of text. */
.fv-site .post-card .status{ align-self:flex-start; margin-left:0; }
.fv-site .post-card .post-meta{ display:block; }
.fv-site .tint.flagships{ padding-bottom:var(--space-section-tight); }
.fv-site section.chips-band{ padding-top:var(--space-block); }

/* Topic-section and "Keep reading" cards match "Where to start": a light
   grey picture panel instead of black, and on a phone the tag, title and
   summary come before a shorter picture. */
.fv-site .topic-block .post-card .post-thumb, .fv-site .related .post-card .post-thumb{ background:var(--paper); }
@media (max-width:620px){
  .fv-site .topic-block .post-card .post-thumb, .fv-site .related .post-card .post-thumb{ order:2; aspect-ratio:auto; height:120px; }
  .fv-site .topic-block .post-card .post-body, .fv-site .related .post-card .post-body{ order:1; }
}

/* The article masthead is now a grey band over a white body, so the seam
   needs room on both sides (both were cream, so it never showed before). */
.fv-site .page-hero.article-hero{ padding-bottom:var(--space-block); }
.fv-site section.article-body{ padding-top:var(--space-section-tight); }

/* Legal pages (terms): colour only, wording untouched. Their placeholders keep
   the original red-text look rather than the yellow review box, and every red
   text uses the deep red, which passes 4.5:1 on white; the date line is darkened. */
.fv-site .legal .placeholder{ display:inline; background:none; border:0; padding:0; font-style:normal; color:var(--red-deep); }
.fv-site .legal a{ color:var(--red-deep); }
.fv-site .legal-meta{ color:#666; }

/* Card pictures (brand v2.5.0): white panel framed by a 1px #9a9a9a line,
   inset from the card edge so the frame reads as its own panel. */
.fv-site .flagship-big .post-thumb, .fv-site .flagship-small .post-thumb,
.fv-site .topic-block .post-card .post-thumb, .fv-site .related .post-card .post-thumb{
  border:1px solid var(--grey-2); border-radius:12px; margin:var(--space-3) var(--space-3) 0; }
.fv-site .flagship-small .post-thumb{ margin:var(--space-3) 0 var(--space-3) var(--space-3); }
@media (max-width:820px){ .fv-site .flagship-big .post-thumb{ margin:0 var(--space-3) var(--space-3); } }
@media (max-width:620px){ .fv-site .topic-block .post-card .post-thumb, .fv-site .related .post-card .post-thumb{ margin:0 var(--space-3) var(--space-3); } }

/* Home hero: the only centred hero, so its buttons sit centred under the heading (Maya). */
.fv-site .hero .btn-row{ justify-content:center; }
.fv-site .flagship-small .post-thumb{ height:auto; align-self:stretch; }

/* ============================================================
   ARTICLE STRIPS (Guy, 2026-10-17)
   Square images edge to edge, side by side, no gaps, no frames or
   containers; each headline set simply beneath. On a phone the strip
   scrolls sideways so each square stays readable.
   ============================================================ */
.fv-site section.art-strip-band{ padding-left:0; padding-right:0; }
.fv-site .art-strip-band .strip-head{ max-width:calc(var(--container) + 2 * var(--space-gutter)); padding-inline:var(--space-gutter);
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--space-4); }
.fv-site .strip-more{ font-size:.95rem; color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.fv-site .art-strip{ list-style:none; display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:0; margin-top:var(--space-head-body); }
.fv-site .art-strip a{ display:block; color:var(--ink); }
.fv-site .art-strip img{ display:block; width:100%; height:auto; aspect-ratio:1/1; border-radius:0; }
.fv-site .art-strip .strip-title{ display:block; padding:var(--space-4) var(--space-gutter) 0; font-size:1.05rem; line-height:1.35; }
.fv-site .art-strip a:hover .strip-title{ text-decoration:underline; text-underline-offset:4px; }
.fv-site .art-strip a:focus-visible{ outline:3px solid var(--red-deep); outline-offset:-3px; }
@media (max-width:767px){
  .fv-site .art-strip{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:80%; overflow-x:auto; scroll-snap-type:x mandatory; }
  .fv-site .art-strip li{ scroll-snap-align:start; }
}

/* Strips inside a band: any .wrap in a strip band keeps the page gutter, and
   a topic still waiting on cleared articles says so in a line under its strip. */
.fv-site .art-strip-band > .wrap{ max-width:calc(var(--container) + 2 * var(--space-gutter)); padding-inline:var(--space-gutter); }
.fv-site .art-strip-band > .strip-note{ margin-top:var(--space-density-normal); }
.fv-site .topic-block.art-strip-band .art-strip{ margin-top:var(--space-head-body); }

/* ============================================================
   SIDEWAYS SECTIONS (Maya, 2026-10-17)
   Built as an ordinary vertical list. When hscroll.js finds a screen at
   least 768px wide, motion allowed and overflow:clip supported, it adds
   .hs-on: the section then pins under the nav while the visitor scrolls
   down normally, and the scroll position slides the panels left. The wheel
   is never intercepted; keys, trackpads and the scrollbar all keep working.
   Only position moves: text never fades, so nothing can stay hidden.
   Each panel carries its own square image (Freya's panel specs).
   ============================================================ */
/* sticky needs no scrolling ancestor: clip, not hidden, where supported */
.fv-site{ overflow-x:clip; }
.fv-site section.hscroll{ overflow:clip; }
.fv-site .hs-body{ margin-top:var(--space-head-body); }
.fv-site .hs-art{ display:block; width:100%; max-width:480px; height:auto; aspect-ratio:1/1; border-radius:0; }
.fv-site .hs-track{ list-style:none; display:grid; gap:var(--space-section-tight); }
.fv-site .hs-panel{ display:grid; gap:var(--space-5); align-content:start; }
.fv-site .hs-label{ font-size:.78rem; font-weight:700; letter-spacing:0; text-transform:none; color:var(--muted-2); }
.fv-site .hs-panel h3{ font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1.08; }
.fv-site .hs-label + h3{ margin-top:var(--space-3); }
.fv-site .hs-panel .body{ margin-top:var(--space-4); max-width:44ch; color:var(--muted); }
.fv-site .hs-panel .hs-more{ display:inline-block; margin-top:var(--space-5); text-decoration:underline; text-underline-offset:4px; }
.fv-site .hs-count, .fv-site .hs-bar{ display:none; }

.fv-site section.hscroll.hs-on{ padding:0; height:calc(100svh + (var(--hs-n) - 1) * 70svh); }
.fv-site .hs-on .hs-pin{ position:sticky; top:var(--nav-h); height:calc(100svh - var(--nav-h));
  display:flex; flex-direction:column; justify-content:center; padding:var(--space-section-tight) var(--gutter); }
.fv-site .hs-on .hs-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); }
.fv-site .hs-on .hs-count{ display:block; font-size:.95rem; color:var(--muted-2); font-variant-numeric:tabular-nums; }
.fv-site .hs-on .hs-panel{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:center; gap:var(--space-block); }
.fv-site .hs-on .hs-art{ max-width:min(100%, calc(100svh - var(--nav-h) - 280px)); }
.fv-site .hs-on .hs-viewport{ overflow:clip; }
.fv-site .hs-on .hs-track{ display:flex; gap:0; width:calc(var(--hs-n) * 100%); will-change:transform; }
.fv-site .hs-on .hs-panel{ flex:0 0 calc(100% / var(--hs-n)); padding-right:var(--space-block); }
.fv-site .hs-on .hs-bar{ display:block; height:2px; background:var(--line); margin-top:var(--space-block); }
.fv-site .hs-on .hs-bar span{ display:block; height:100%; width:100%; background:var(--ink); transform-origin:left center; transform:scaleX(0); }

/* ============================================================
   STAGE AND LEDGER (Maya's plan, approved by Guy Duncan 2026-10-18)
   A stage is a black band with one big line and at most one italic lead:
   no cards and no buttons (the Home hero is the one stage with buttons).
   A ledger is a white band of dense detail. Its rows are separated by space,
   never by lines: the design system draws no lines between blocks (brand 4.0.0).
   Never two stages in a row; at most three ledgers before the next stage.
   ============================================================ */
.fv-site section.stage{ background:var(--black); color:var(--white); }
.fv-site section.stage:not(.page-hero){ padding:var(--space-section-loose) var(--gutter); }
.fv-site section.stage.page-hero{ padding-bottom:var(--space-section-loose); }
.fv-site .stage-line{ font-size:clamp(2.6rem,7vw,5.2rem); font-weight:400; line-height:1.02; letter-spacing:-0.03em; max-width:24ch; }
.fv-site .stage .stage-lead{ margin-top:var(--space-head-body); max-width:48ch; color:#e9e9e9; }
.fv-site .stage .grid{ margin-top:var(--space-section-tight); }

.fv-site .ledger-intro{ max-width:48ch; }
.fv-site .ledger-list{ list-style:none; margin-top:var(--space-block); }
.fv-site .ledger-list > li{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-2); padding:var(--space-5) 0; }
.fv-site .ledger-num{ font-size:.86rem; font-weight:700; letter-spacing:.08em; color:var(--muted-2); font-variant-numeric:tabular-nums; }
.fv-site .ledger-list h3{ font-size:1.3rem; line-height:1.2; }
.fv-site .ledger-list .body{ color:var(--muted); max-width:60ch; }
.fv-site .ledger-list a{ text-decoration:underline; text-underline-offset:4px; }
.fv-site .ledger-note{ margin-top:var(--space-block); max-width:60ch; }
.fv-site .ledger-note h3{ font-size:1.1rem; }
.fv-site .ledger-note p{ margin-top:var(--space-2); color:var(--muted); }
.fv-site .ledger-links{ margin-top:var(--space-block); display:flex; flex-wrap:wrap; gap:var(--space-5); }
.fv-site .ledger-links a{ text-decoration:underline; text-underline-offset:4px; }
.fv-site .ledger-table-wrap{ margin-top:var(--space-block); overflow-x:auto; }
.fv-site .ledger-table{ width:100%; border-collapse:collapse; font-size:1rem; line-height:1.5; }
.fv-site .ledger-table caption{ text-align:left; font-weight:700; padding-bottom:var(--space-3); }
.fv-site .ledger-table th{ text-align:left; font-weight:700; padding:var(--space-3) var(--space-4) var(--space-3) 0; border-bottom:1px solid var(--ink); vertical-align:bottom; }
.fv-site .ledger-table td{ padding:var(--space-4) var(--space-4) var(--space-4) 0; border-bottom:1px solid var(--line); vertical-align:top; color:var(--muted); }
.fv-site .ledger-cols{ display:grid; gap:var(--space-block); margin-top:var(--space-block); }
.fv-site .ledger-cols ul{ padding-left:1.2em; margin-top:var(--space-2); color:var(--muted); }
.fv-site .ledger-cols li{ margin-top:var(--space-1); }
@media (min-width:768px){
  .fv-site .ledger-list > li{ grid-template-columns:64px minmax(0,4fr) minmax(0,7fr); gap:var(--space-grid-gap); align-items:baseline; }
  .fv-site .ledger-list > li.no-num{ grid-template-columns:minmax(0,4fr) minmax(0,7fr); }
  .fv-site .ledger-cols{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* STAGE AND LEDGER, second pass (Maya's plan parts 1-4, 2026-10-18) */
.fv-site .stage .stage-link{ margin-top:var(--space-head-body); }
.fv-site .stage .stage-link a{ color:var(--white); text-decoration:underline; text-underline-offset:4px; }
.fv-site .stage .cols-figure{ gap:var(--space-block); }
.fv-site .ledger-subhead{ margin-top:var(--space-section-tight); font-size:1.3rem; }
.fv-site .ledger-pair{ margin-top:var(--space-block); }
.fv-site .portal-find-row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-5); }
.fv-site .portal-find-row .portal-search{ margin-top:0; flex:1 1 320px; }
.fv-site .topics-band{ padding-top:var(--space-section-tight); }
.fv-site .topics-band .topic-block{ padding-left:0; padding-right:0; }
.fv-site .contact-grid > .contact-details{ align-self:start; }
.fv-site .cta-band.cta-buttons{ justify-content:flex-start; }
@media (min-width:768px){
  .fv-site .ledger-list > li.solo{ grid-template-columns:minmax(0,1fr); }
}

/* ============================================================
   MOTION AND FEEDBACK (Futuvara Design System, brand 4.0.0, 2026-10-19)
   Hover is a lift, never a scale: buttons -2px, feature cards -4px, post cards
   and the article strips that stand in for them -5px, eased expo-out over .18s.
   Keyboard focus gets the same feedback as hover. No press state. Reduced
   motion keeps the feedback and drops the travel.
   ============================================================ */
.fv-site .btn{ transition:transform .18s cubic-bezier(.16,1,.3,1), background .18s ease, color .18s ease; }
.fv-site .btn:focus-visible{ transform:translateY(-2px); outline:3px solid var(--red-deep); outline-offset:3px; }
.fv-site .dark .btn:focus-visible, .fv-site .cta-band .btn:focus-visible, .fv-site .hero .btn:focus-visible{ outline-color:var(--white); }
.fv-site .feature{ transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease, border-color .18s ease; }
.fv-site .feature:focus-within{ transform:translateY(-4px); box-shadow:0 30px 60px -30px rgba(0,0,0,.25); }
.fv-site .post-card{ transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease; }
.fv-site .post-card:focus-within{ transform:translateY(-5px); box-shadow:0 34px 60px -34px rgba(0,0,0,.3); }
.fv-site .art-strip a{ transition:transform .18s cubic-bezier(.16,1,.3,1); }
.fv-site .art-strip a:hover, .fv-site .art-strip a:focus-visible{ transform:translateY(-5px); }
.fv-site .ledger-links a:focus-visible, .fv-site .ledger-list a:focus-visible, .fv-site .ledger-note a:focus-visible,
.fv-site .stage-link a:focus-visible, .fv-site .strip-more:focus-visible, .fv-site .hs-more:focus-visible{ outline:3px solid currentColor; outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  .fv-site .btn, .fv-site .feature, .fv-site .post-card, .fv-site .art-strip a{ transition:none; }
  .fv-site .btn:hover, .fv-site .btn:focus-visible, .fv-site .feature:hover, .fv-site .feature:focus-within,
  .fv-site .post-card:hover, .fv-site .post-card:focus-within, .fv-site .art-strip a:hover, .fv-site .art-strip a:focus-visible{ transform:none; }
}

/* ---------- Type and alignment audit (Freya Lindqvist, 2026-10-29) ----------
   Type check 5: even lines in headings and leads, and no word left alone on a
   paragraph's last line. BR-T08, token sizes only: the values are ds.css's
   tokens (h-sm, h-md, body). Privacy and Terms do not load ds.css, so each
   size names its token's own value as the fallback. */
.fv-site p{ text-wrap:pretty; }
.fv-site h1, .fv-site h2, .fv-site h3, .fv-site p.lead{ text-wrap:balance; }
.fv-site .feature-row .feature h3, .fv-site .ledger-list h3, .fv-site .ledger-subhead, .fv-site .ledger-note h3, .fv-site .ledger-cols h3,
.fv-site .article-layout .prose h2, .fv-site .legal h2{ font-size:var(--type-h-sm, clamp(1.3rem,2.4vw,1.8rem)); line-height:1.08; letter-spacing:-0.02em; }
.fv-site .feature-row .feature .body{ font-size:var(--type-body, clamp(1rem,1.15vw,1.12rem)); }
.fv-site .cta-band h2{ font-size:var(--type-h-md, clamp(1.7rem,3.4vw,2.6rem)); line-height:1.05; letter-spacing:-0.02em; }
/* an article's list items at the size of its paragraphs */
.fv-site .prose li{ font-size:1.12rem; }
/* the footer's mailing-list line links to Privacy, inline (Lucas Brennan's wording, Guy approved 2026-10-29) */
.fv-site .f-news .news-label a{ display:inline; padding:0; font-size:inherit; font-weight:400; color:inherit; text-decoration:underline; text-underline-offset:3px; }
.fv-site .f-news .news-label a:hover{ padding:0; color:#fff; }