/* ============================================================
   FUTUVARA DESIGN SYSTEM 1.0 LAYER (Freya Lindqvist's art direction, 2026-10-19)
   Loaded after site.css on every page. The idea is one move from the design
   system: layers that open as you read. Capsule stacks fan out step by step,
   the dark board rises into place as it comes into view, the clover field
   keeps one red mark. Values are the design system's tokens
   (004-Growth/001-Brand/Design-system/Design-tokens.md), declared once below.

   Photographs (the owner's rule 1, 2026-10-20, and Freya's site-wide art
   direction V3, 2026-10-21): a photograph is the whole background of its
   panel, edge to edge, with hard corners (0 radius). It takes its panel's
   shape, never a fixed square, and is never a small boxed picture. Text on a
   photograph sits on its quiet side over a fade drawn here, never baked into
   the photograph.
   ============================================================ */
.fv-site{
  --r-card:20px; --r-card-lg:22px; --r-card-2xl:26px; --r-band:28px; --r-media:0px;
  --shadow-card-hover:0 30px 60px -30px rgba(0,0,0,.25);
  --shadow-post-hover:0 34px 60px -34px rgba(0,0,0,.3);
  --shadow-card-dark:0 40px 80px -30px rgba(0,0,0,.6);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --dur-hover:.18s; --dur-reveal:.6s;
  --lift-hover:-2px; --lift-card:-4px; --lift-post:-5px;
  --gap-md:clamp(32px,4vw,56px); --gap-lg:clamp(32px,5vw,72px);
  --pad-card:clamp(28px,3.5vw,44px); --pad-card-lg:clamp(36px,5vw,64px); --pad-band:clamp(44px,6vw,80px);
  --type-h-xl:clamp(2.6rem,7vw,5.2rem); --type-h-md:clamp(1.7rem,3.4vw,2.6rem); --type-h-sm:clamp(1.3rem,2.4vw,1.8rem); --type-body:clamp(1rem,1.15vw,1.12rem);
  --measure-prose:720px;
  /* the "AI-generated image" label over a pale part of a photograph (brand §10 rule 5, owner-approved 2026-10-21) */
  --ai-label-dark:#222;
}

/* the design system's shape pulse (a global name, so prefixed) */
@keyframes fv-shape-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.9);opacity:.72}}

/* ---------- FeatureCard: three-up, hairline, 22px, lift -4px ---------- */
.fv-site .ds-features{ list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap-md); margin-top:var(--space-block); }
.fv-site .ds-feature{ position:relative; display:flex; flex-direction:column; gap:var(--space-4); background:var(--white); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-card-lg); padding:var(--pad-card);
  transition:transform var(--dur-hover) var(--ease-out-expo), box-shadow var(--dur-hover) ease; }
.fv-site .ds-feature:hover, .fv-site .ds-feature:focus-within{ transform:translateY(var(--lift-card)); box-shadow:var(--shadow-card-hover); }
.fv-site .ds-feature h3{ font-size:var(--type-h-sm); line-height:1.08; letter-spacing:-0.02em; }
.fv-site .ds-feature .body{ color:var(--muted); }
.fv-site .ds-feature .ds-more{ margin-top:auto; padding-top:var(--space-3); font-weight:700; }
.fv-site .ds-feature .ds-more a{ color:var(--ink); text-decoration:none; }
.fv-site .ds-feature .ds-more a::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.fv-site .ds-feature:hover .ds-more a, .fv-site .ds-feature .ds-more a:focus-visible{ color:var(--red-deep); }
.fv-site .ds-feature .ds-more a:focus-visible{ outline:none; }
.fv-site .ds-feature:focus-within{ outline:3px solid var(--red-deep); outline-offset:3px; }
@media (max-width:900px){ .fv-site .ds-features{ grid-template-columns:minmax(0,1fr); } }
.fv-site .ds-after{ margin-top:var(--space-block); }
.fv-site .ds-after a{ text-decoration:underline; text-underline-offset:4px; }

/* ---------- Platform features: the "What the platform does" grid, three-up ---------- */
.fv-site .ds-capabilities{ list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap-md); margin-top:var(--space-block); }
.fv-site .ds-capability{ position:relative; display:flex; flex-direction:column; gap:var(--space-3); background:var(--white); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-card-lg); padding:var(--pad-card);
  transition:transform var(--dur-hover) var(--ease-out-expo), box-shadow var(--dur-hover) ease; }
.fv-site .ds-capability:hover{ transform:translateY(var(--lift-card)); box-shadow:var(--shadow-card-hover); }
.fv-site .ds-capability .ds-num{ color:var(--red-deep); }
.fv-site .ds-capability h3{ font-size:var(--type-h-sm); line-height:1.08; letter-spacing:-0.02em; font-weight:400; }
.fv-site .ds-capability dl{ display:grid; gap:var(--space-3); margin:var(--space-2) 0 0; }
.fv-site .ds-capability dt{ font-weight:800; font-size:.82rem; letter-spacing:.02em; color:var(--ink); }
.fv-site .ds-capability dd{ margin:2px 0 0; color:var(--muted); }
@media (max-width:1100px){ .fv-site .ds-capabilities{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px){ .fv-site .ds-capabilities{ grid-template-columns:minmax(0,1fr); } }

/* ---------- black statement band with a figure beside the line ---------- */
.fv-site .ds-stage-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:var(--gap-lg); align-items:center; }
.fv-site .ds-stage-grid .stage-line{ font-size:var(--type-h-xl); }
.fv-site .ds-eight{ justify-self:end; width:100%; max-width:360px; }
.fv-site .ds-eight img{ display:block; width:100%; height:auto; animation:fv-shape-pulse 4.8s ease-in-out infinite; transform-origin:center; }
@media (max-width:767px){
  .fv-site .ds-stage-grid{ grid-template-columns:minmax(0,1fr); }
  .fv-site .ds-eight{ justify-self:start; max-width:200px; }
}

/* ---------- ValueBoard: the dark board that rises into place ----------
   The owner, 2026-10-21: it no longer squashes with the scroll, which made
   it unreadable. site.js lifts it in once as it comes into view, then its
   heading and rows in reading order; its text is never scaled. */
.fv-site .ds-board{ background:linear-gradient(180deg,#161616,#000); color:var(--white); border:0; border-radius:var(--r-band); padding:var(--pad-card-lg); box-shadow:var(--shadow-card-dark); }
.fv-site .ds-board > h2{ color:var(--white); max-width:20ch; }
.fv-site .ds-values{ list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:var(--gap-md); row-gap:var(--space-block); margin-top:var(--space-block); }
.fv-site .ds-values > li{ display:flex; flex-direction:column; gap:var(--space-3); }
.fv-site .ds-num{ color:var(--red); font-weight:800; font-size:.95rem; letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.fv-site .ds-values h3{ font-size:clamp(1.2rem,1.8vw,1.45rem); line-height:1.15; color:var(--white); }
.fv-site .ds-values .body{ color:#c9c9c9; }
.fv-site .ds-values .ds-value-note .body{ max-width:44ch; }
.fv-site .ds-values a{ color:var(--white); text-decoration:underline; text-underline-offset:4px; }
.fv-site .ds-values a:focus-visible{ outline:3px solid var(--white); outline-offset:3px; }
@media (max-width:900px){ .fv-site .ds-values{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .fv-site .ds-values{ grid-template-columns:minmax(0,1fr); } }

/* ---------- the fanning capsule stack in the sideways sections ----------
   Without script: the whole stack as one picture, fully open, above the steps.
   With ds.js: the picture is split into its own layers, which open a step
   further at each step. */
.fv-site .ds-fan{ position:relative; width:100%; max-width:320px; margin:0 0 var(--space-block); }
.fv-site .ds-fan > img{ display:block; width:100%; height:auto; }
.fv-site .ds-fan.is-split > img{ visibility:hidden; }
.fv-site .ds-fan .ds-layer{ position:absolute; inset:0; will-change:transform; }
.fv-site .ds-fan .ds-layer svg{ display:block; width:100%; height:100%; overflow:visible; }
.fv-site .hscroll .hs-art{ display:none; }
.fv-site .hscroll .hs-panel{ grid-template-columns:minmax(0,1fr); }
.fv-site .hs-on .hs-body{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:var(--gap-lg); align-items:center; }
.fv-site .hs-on .ds-fan{ margin:0; max-width:min(100%, calc(100svh - var(--nav-h) - 300px)); justify-self:start; }
.fv-site .hs-on .hs-panel{ grid-template-columns:minmax(0,1fr); }
.fv-site .hs-label{ color:var(--red-deep); font-weight:800; }

/* ---------- photographs: hard corners, the frame filled ----------
   No fixed shape: the photograph takes the shape of the panel it fills. */
.fv-site .ds-media{ display:block; position:relative; border-radius:0; overflow:hidden; background:var(--black); margin:0; }
.fv-site .ds-media img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; border-radius:0; }
/* where each photograph's subject sits, so a crop keeps it */
.fv-site .ds-media img[src*="city-newyork-founder"]{ object-position:68% 50%; }
.fv-site .ds-media img[src*="4c-london-five-year-plans"]{ object-position:34% 50%; }
.fv-site .ds-media img[src*="4c-munich-per-seat-spend"]{ object-position:40% 50%; }

/* ---------- "AI-generated image": the label on every realistic photograph ----------
   Brand §10 rule 5 and Freya's direction V5, 2026-10-21: a realistic
   generated image is labelled as AI-generated where it is published. The
   owner approved the label rule on 2026-10-21: plain Inter 400 at 11px in a
   corner of the photograph, clear of faces, with no box, no fill and no text
   shadow. It is white over a dark corner and #222 over a pale one, so it
   holds 4.5:1 either way; the photographs whose corner is pale are listed
   below. It sits above the page's fade and below any link that covers the
   panel, and it never takes a click. */
.fv-site .ai-label{ position:absolute; top:var(--space-4); right:var(--space-4); z-index:2; margin:0; pointer-events:none;
  padding:0; background:none; color:var(--white);
  font-size:.6875rem; font-weight:400; letter-spacing:.02em; line-height:1.3; white-space:nowrap; }
/* Photo heroes (About, Contact, What we build) and the Knowledge strips: the
   label sits in a corner of the photograph that the page's fade covers, so
   white holds 4.5:1 whatever the photograph shows (four-city set, measured
   2026-10-22). Photo heroes: bottom left, on the side fade on wide screens
   and on the text block's fade on phones. */
.fv-site .ds-photo-hero .ai-label{ top:auto; bottom:var(--space-4); right:auto; left:var(--space-4); }
/* Knowledge strips: on the fade's side, top corner; at the foot on a strip
   whose text sits at the foot, and on every strip under 900px */
.fv-site .kn-photo .ai-label{ right:auto; left:var(--space-4); }
.fv-site .kn-photo[data-side="right"] .ai-label{ left:auto; right:var(--space-4); }
.fv-site .kn-photo[data-side="bottom"] .ai-label{ top:auto; bottom:var(--space-4); }
@media (max-width:899px){
  .fv-site .kn-photo .ai-label, .fv-site .kn-photo[data-side="right"] .ai-label{ top:auto; bottom:var(--space-4); right:auto; left:var(--space-4); }
}
/* Home's cards: top right, #222 where that corner is pale in the card's crop */
.fv-site .pov-card:has(img[src*="4c-tokyo-stuck-in-the-pilot"]) .ai-label,
.fv-site .pov-card:has(img[src*="4c-munich-per-seat-spend"]) .ai-label{ color:var(--ai-label-dark); }
/* article heroes, "Keep reading" cards and the How we work photo: the label
   sits in the corner of the photograph's own frame where it reads at 4.5:1,
   white or #222, measured over the label's area on each four-city photograph
   (2026-10-22). Bottom left: */
.fv-site .ds-media:has(img[src*="4c-munich-outlive-its-model"]) .ai-label,
.fv-site .ds-media:has(img[src*="4c-munich-per-seat-spend"]) .ai-label,
.fv-site .ds-media:has(img[src*="4c-tokyo-page-how-we-work"]) .ai-label,
.fv-site .ds-media:has(img[src*="4c-tokyo-stuck-in-the-pilot"]) .ai-label,
.fv-site .ds-media:has(img[src*="city-london-partners"]) .ai-label{ top:auto; bottom:var(--space-4); right:auto; left:var(--space-4); }
/* bottom right */
.fv-site .ds-media:has(img[src*="4c-newyork-aligned-knowledge"]) .ai-label{ top:auto; bottom:var(--space-4); }
/* top left */
.fv-site .ds-media:has(img[src*="4c-london-dull-job-first"]) .ai-label,
.fv-site .ds-media:has(img[src*="4c-tokyo-human-creativity"]) .ai-label,
.fv-site .ds-media:has(img[src*="city-munich-owner"]) .ai-label,
.fv-site .ds-media:has(img[src*="city-newyork-founder"]) .ai-label{ right:auto; left:var(--space-4); }
/* #222 where the chosen corner is pale */
.fv-site .ds-media:has(img[src*="4c-london-dull-job-first"]) .ai-label,
.fv-site .ds-media:has(img[src*="4c-london-five-year-plans"]) .ai-label,
.fv-site .ds-media:has(img[src*="city-munich-owner"]) .ai-label,
.fv-site .ds-media:has(img[src*="city-newyork-founder"]) .ai-label,
.fv-site .ds-media:has(img[src*="city-tokyo-director"]) .ai-label{ color:var(--ai-label-dark); }

/* where each four-city photograph's subject sits in Home's cards and the
   Knowledge strips, so a crop keeps it (re-keyed from the earlier set's rules
   in home.css and knowledge.css, which no longer match any photograph) */
.fv-site .pov-bg img[src*="4c-munich-per-seat-spend"]{ object-position:40% 50%; }
.fv-site .kn-bg img[src*="4c-newyork-aligned-knowledge"]{ object-position:50% 45%; }
@media (min-width:1600px){
  .fv-site .kn-bg img[src*="city-newyork-founder"]{ object-position:50% 15%; }
  .fv-site .kn-bg img[src*="4c-newyork-aligned-knowledge"]{ object-position:50% 30%; }
  .fv-site .kn-bg img[src*="4c-tokyo-human-creativity"]{ object-position:50% 15%; }
}
@media (max-width:899px){
  .fv-site .kn-bg img[src*="city-london-partners"]{ object-position:62% 50%; }
  .fv-site .kn-bg img[src*="city-newyork-founder"]{ object-position:80% 50%; }
  .fv-site .kn-bg img[src*="4c-tokyo-human-creativity"]{ object-position:62% 50%; }
  /* only one of the two people fits: keep the man in frame */
  .fv-site .kn-bg img[src*="4c-newyork-aligned-knowledge"]{ object-position:36% 50%; }
}

/* ---------- the film strip: PostCards set edge to edge ----------
   Frames touch, side by side, with no gap and no corner. Each frame is the
   photograph with its title below on white; a frame lifts -5px on hover or
   focus. On a phone the strip runs sideways and snaps frame by frame. */
.fv-site .ds-posts{ list-style:none; display:grid; grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)); gap:0; margin-top:var(--space-head-body); counter-reset:frame; }
.fv-site .ds-posts > li{ position:relative; counter-increment:frame; }
.fv-site .ds-post{ position:relative; display:flex; flex-direction:column; height:100%; background:var(--white); color:var(--ink); border:0; border-radius:0; padding:0; text-decoration:none;
  transition:transform var(--dur-hover) var(--ease-out-expo), box-shadow var(--dur-hover) ease; }
.fv-site a.ds-post:hover, .fv-site a.ds-post:focus-visible{ transform:translateY(var(--lift-post)); box-shadow:var(--shadow-post-hover); color:var(--ink); z-index:1; }
.fv-site a.ds-post:focus-visible{ outline:3px solid var(--red-deep); outline-offset:-3px; }
.fv-site .ds-post .ds-post-body{ display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-4) var(--space-5) var(--space-5) 0; flex:1; }
.fv-site .ds-posts > li + li .ds-post .ds-post-body{ padding-left:var(--space-5); }
.fv-site .ds-post .ds-post-body::before{ content:counter(frame, decimal-leading-zero) / ""; color:var(--red-deep); font-weight:800; font-size:.82rem; letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.fv-site .ds-post h3{ font-size:clamp(1.15rem,1.6vw,1.35rem); line-height:1.2; font-weight:400; letter-spacing:-0.01em; }
.fv-site .ds-post .summary{ color:var(--muted-2); font-size:.95rem; line-height:1.5; }
.fv-site .ds-post .post-meta{ font-size:.82rem; color:#666; }
.fv-site .ds-read{ margin-top:auto; padding-top:var(--space-2); font-weight:800; font-size:.9rem; color:var(--ink); transition:color var(--dur-hover) ease; }
.fv-site a.ds-post:hover .ds-read, .fv-site a.ds-post:focus-visible .ds-read{ color:var(--red-deep); }
.fv-site .ds-posts > li[hidden]{ display:none; }
.fv-site .art-strip-band .ds-posts{ max-width:calc(var(--container) + 2 * var(--space-gutter)); padding-inline:var(--space-gutter); margin-inline:auto; }
/* a strip that runs the full width of the screen, edge to edge; the first and
   last titles line up with the page's headings */
.fv-site .art-strip-band .ds-posts.is-bleed{ max-width:none; padding-inline:0; }
.fv-site .ds-posts.is-bleed > li:first-child .ds-post .ds-post-body{ padding-left:max(var(--space-gutter), calc((100vw - var(--container)) / 2)); }
.fv-site .ds-posts.is-bleed > li:last-child .ds-post .ds-post-body{ padding-right:max(var(--space-gutter), calc((100vw - var(--container)) / 2)); }
@media (max-width:900px){
  .fv-site .ds-posts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fv-site .ds-posts > li:nth-child(odd) .ds-post .ds-post-body{ padding-left:0; }
  .fv-site .ds-posts.is-bleed > li:nth-child(odd) .ds-post .ds-post-body{ padding-left:var(--space-gutter); }
}
@media (max-width:620px){
  .fv-site .ds-posts, .fv-site .art-strip-band .ds-posts{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:78%; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; padding-inline:0; }
  .fv-site .ds-posts::-webkit-scrollbar{ display:none; }
  .fv-site .ds-posts > li{ scroll-snap-align:start; }
  .fv-site .ds-posts > li:only-child{ grid-column:auto; }
  .fv-site .ds-posts .ds-post .ds-post-body, .fv-site .ds-posts > li + li .ds-post .ds-post-body,
  .fv-site .ds-posts > li:nth-child(odd) .ds-post .ds-post-body{ padding:var(--space-4) var(--space-4) var(--space-5); }
  .fv-site .ds-posts > li:first-child .ds-post .ds-post-body, .fv-site .ds-posts.is-bleed > li:first-child .ds-post .ds-post-body{ padding-left:var(--space-gutter); }
  .fv-site a.ds-post:hover, .fv-site a.ds-post:focus-visible{ transform:none; box-shadow:none; }
}

/* ---------- FeaturedPost: black, the photograph flush on the left ---------- */
.fv-site .ds-featured{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; align-items:stretch; background:var(--black); color:var(--white); border:0; border-radius:0; padding:0; text-decoration:none;
  transition:transform var(--dur-hover) var(--ease-out-expo), box-shadow var(--dur-hover) ease; }
.fv-site a.ds-featured:hover, .fv-site a.ds-featured:focus-visible{ transform:translateY(var(--lift-post)); box-shadow:var(--shadow-post-hover); color:var(--white); }
.fv-site a.ds-featured:focus-visible{ outline:3px solid var(--red-deep); outline-offset:3px; }
.fv-site .ds-featured .ds-post-body{ display:flex; flex-direction:column; justify-content:center; gap:var(--space-4); padding:var(--pad-card-lg); }
.fv-site .ds-featured .tag{ color:var(--white); }
.fv-site .ds-featured h3{ font-size:var(--type-h-md); line-height:1.05; letter-spacing:-0.02em; font-weight:400; color:var(--white); }
.fv-site .ds-featured .summary{ color:#c9c9c9; font-size:1.05rem; max-width:44ch; }
.fv-site .ds-featured .ds-read{ color:var(--white); }
.fv-site a.ds-featured:hover .ds-read, .fv-site a.ds-featured:focus-visible .ds-read{ color:var(--red); }
.fv-site .ds-wide{ max-width:calc(var(--container) + 2 * var(--space-gutter)); padding-inline:var(--space-gutter); margin:var(--space-head-body) auto 0; }
.fv-site .ds-wide + .ds-posts{ margin-top:0; }
@media (max-width:767px){
  .fv-site .ds-featured{ grid-template-columns:minmax(0,1fr); }
  .fv-site .ds-featured .ds-post-body{ padding:var(--pad-card); }
}

/* ---------- PageHero with a photograph beside the line ----------
   Still used by How we work, until it has its own full-bleed photo hero
   (one photograph per page, workflow 013). */
.fv-site .ds-hero-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--gap-lg); align-items:end; }
.fv-site .ds-hero-grid .ds-media{ width:100%; max-width:480px; justify-self:end; }
@media (max-width:767px){
  .fv-site .ds-hero-grid{ grid-template-columns:minmax(0,1fr); }
  .fv-site .ds-hero-grid .ds-media{ justify-self:stretch; max-width:none; }
}

/* ---------- PageHero with a full-bleed photograph (About, Contact, What we build) ----------
   Freya's direction A-1 and C1, 2026-10-21, to Maya's shared hero: the
   photograph fills the hero edge to edge, up behind the bar, as tall as 88%
   of the screen so the top of the next band shows. The text sits on the
   photograph's quiet left side, in a column that starts at the screen gutter
   and ends before the fade's 0.8 point, so white text holds its contrast over
   any part of the photograph. No buttons: the red nav button does that job.
   The bar sits over the photograph with no background (see "nav with no
   background" below). There is no dark fade at the top of the photograph
   (the owner, 2026-10-21): the bar's white logo and links sit straight on it.
   Phones: the text sits at the foot on its own fade, the photograph above.
   What we build joined it on 2026-10-21 (Freya's REVISE on its boxed photo):
   its left third is pale wall and window, which the 0.8 fade covers. */
.fv-site section.page-hero.ds-photo-hero{ display:flex; align-items:center; padding:var(--nav-h) 0 0; background:var(--black); color:var(--white);
  min-height:calc(var(--nav-h) + clamp(520px, calc(88svh - var(--nav-h)), 980px)); }
.fv-site .ds-photo-hero .ph-bg{ position:absolute; inset:0; z-index:0; margin:0; }
.fv-site .ds-photo-hero .ph-bg img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; border-radius:0; }
.fv-site .ds-photo-hero::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.8) 40%, rgba(0,0,0,0) 62%); }
.fv-site .ds-photo-hero .ph-copy{ position:relative; z-index:2; width:min(34vw, 36rem); margin-inline:var(--space-gutter); padding-block:var(--pad-band); }
/* every page's hero heading at Home's size (Guy, 2026-10-27: "make the hero font sizes all the same as the home page"; moved here
   from home.css 13): h-xl on wide screens (83px at 1440px), the display size under 900px (48px on a 390px phone). Privacy and
   terms do not load this file: their heading keeps site.css's h-xl, the same on wide screens, 42px on a phone. */
.fv-site .page-hero h1{ font-size:var(--type-h-xl); }
@media (max-width:899px){ .fv-site .page-hero h1{ font-size:clamp(3rem,9vw,7rem); } }
.fv-site .ds-photo-hero .stage-line{ max-width:none; }
.fv-site .ds-photo-hero .stage-lead{ max-width:none; }
/* What we build, wide screens: in the New York photograph the man's shoulder
   sits at about 30% across and his face at 33%, so the column ends earlier
   and no line of the lead reaches him */
@media (min-width:900px){
  .fv-site .ds-photo-hero:has(img[src*="4c-newyork-page-what-we-build"]) .ph-copy{ width:min(26vw, 27rem); }
}
@media (max-width:899px){
  .fv-site section.page-hero.ds-photo-hero{ align-items:flex-end; min-height:calc(var(--nav-h) + max(125vw, 560px)); }
  .fv-site .ds-photo-hero::before{ display:none; }
  .fv-site .ds-photo-hero .ph-copy{ width:100%; margin:0; padding:calc(var(--pad-band) + 160px) var(--space-gutter) var(--pad-band);
    background:linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.8) calc(100% - 160px), rgba(0,0,0,0) 100%); }
  /* What we build: both people stay in the upright crop */
  .fv-site .ds-photo-hero .ph-bg img[src*="4c-newyork-page-what-we-build"]{ object-position:48% 35%; }
}

/* ---------- Prose at the 720px article measure ---------- */
.fv-site .article-layout .prose{ max-width:var(--measure-prose); }
.fv-site .article-layout.has-toc{ grid-template-columns:220px minmax(0,var(--measure-prose)); }
@media (max-width:900px){ .fv-site .article-layout.has-toc{ grid-template-columns:minmax(0,1fr); } }
.fv-site .prose blockquote{ border-left:4px solid var(--red); padding-left:var(--space-5); font-style:italic; font-weight:700; }
/* a link in running text is underlined, so it reads as a link without colour */
.fv-site .prose a{ text-decoration:underline; text-underline-offset:4px; }
.fv-site .prose a:hover{ color:var(--red-deep); }
.fv-site .prose a:focus-visible{ outline:3px solid var(--red-deep); outline-offset:3px; }

/* ---------- CtaBand: black, 28px, heading capped at 18ch ---------- */
.fv-site .cta-band{ border-radius:var(--r-band); padding:var(--pad-band); }
.fv-site .cta-band h2{ max-width:18ch; }

/* ---------- footer sign-off: "Go first." with only the last word bold ---------- */
.fv-site .site-footer .f-tag:has(strong){ font-weight:400; }
.fv-site .site-footer .f-tag strong{ font-weight:800; }

/* ---------- nav: the nav button stays in the bar on phones ----------
   Under 860px the menu folds behind the toggle, so the one action a visitor
   needs gets its own pill in the bar, beside the toggle. The copy in the
   drawer is hidden there, so the link is never listed twice. The mark and
   the toggle never shrink. The button reads "Start an agentic conversation"
   (the owner, 2026-10-22), too long for one line beside the logo on a phone,
   so under 480px it wraps to two short lines instead of squeezing them. */
.fv-site .nav-cta-bar{ display:none; }
@media (max-width:860px){
  .fv-site .site-nav .nav-link.nav-cta-bar{ display:inline-flex; align-self:center; margin:0 var(--space-2) 0 auto; padding:var(--space-2) var(--space-4); font-size:.86rem; white-space:nowrap; justify-content:center; z-index:2; }
  .fv-site .nav-menu .nav-item:has(> .nav-action){ display:none; }
  .fv-site .nav-logo svg, .fv-site .nav-toggle{ flex-shrink:0; }
}
@media (max-width:480px){
  .fv-site .site-nav .nav-link.nav-cta-bar{ min-width:0; white-space:normal; text-align:center; line-height:1.15; padding:var(--space-1) var(--space-3); font-size:.78rem; margin-right:var(--space-1); }
  .fv-site .nav-logo{ gap:var(--space-2); margin-right:var(--space-2); }
  .fv-site .nav-logo span{ font-size:1.1rem; }
}

/* ---------- nav with no background ----------
   The owner's rule 3, 2026-10-20 ("hide the nav background"), in Freya's
   reading A13, which still waits for the owner's yes; the owner asked for it
   over the photo heroes on 2026-10-21 and then on every page ("nav back
   ground on all pages"). While the page sits at its top, the bar has no
   background on every page: it shows the page's opening band through it,
   and the logo and links keep that band's colours (dark on a white band,
   through `nav-light`, white on a black one), so they read exactly as they
   did on the solid bar. The moment the page scrolls, site.js takes the class
   off and the solid bar returns, so no copy ever runs under bare links.
   Over a full-bleed photo hero the photograph runs up behind the bar for the
   bar's own height, with white logo and links straight on the photograph and
   no dark fade behind them (the owner, 2026-10-21: "do not put a dark
   gradient at the top of the image") (`nav-over-photo`). The Knowledge
   page's lead photograph does the same (the owner, 2026-10-22: "on the
   knowledge area top nav is on black background it needs to be
   transparent"). The open phone menu always keeps the solid bar. Without
   the script the bar stays solid. */
.fv-site .site-nav{ transition:background-color var(--dur-hover) ease; }
.fv-site .site-nav.nav-at-top:not(.open){ background:transparent; }
.fv-site .site-nav.nav-over-photo:not(.open) .nav-logo span,
.fv-site .site-nav.nav-over-photo:not(.open) .nav-link{ color:var(--white); }
.fv-site .site-nav.nav-over-photo:not(.open) .nav-toggle span{ background:var(--white); }

/* ---------- the glass bar ----------
   The owner, 2026-10-22: the nav top bar at 50% opacity and glassmorphic, like
   the cookie bar, and restored on 2026-10-22 when a darkening filter made it
   read as solid again. Once the page scrolls (and always without the
   script), the bar is its colour at exactly 50% over the page, blurred, with
   nothing else darkening or lightening what shows through: black over dark
   bands, white over white bands (`nav-light`). The owner kept 50% knowing
   that links can fall under 4.5:1 over some photographs.
   The glass is drawn on ::before, not on the bar, because a backdrop filter
   on the bar would trap the phone menu inside it (site.css, under 860px).
   At the top of the page the bar stays clear (above), and the open phone
   menu keeps the solid bar. Where the browser cannot blur, or the visitor
   asks for less transparency, the bar is solid again. */
.fv-site .site-nav:not(.open){ background:transparent; }
.fv-site .site-nav::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--black); -webkit-backdrop-filter:none; backdrop-filter:none;
  transition:opacity var(--dur-hover) ease; }
.fv-site .site-nav.nav-light::before{ background:var(--white); }
.fv-site .site-nav.nav-light:not(.open) .nav-link{ color:#111; }
.fv-site .site-nav.nav-at-top::before, .fv-site .site-nav.open::before{ opacity:0; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .fv-site .site-nav::before{ background:var(--black); }
  .fv-site .site-nav.nav-light::before{ background:var(--white); }
}
@media (prefers-reduced-transparency:reduce){
  .fv-site .site-nav::before{ background:var(--black); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .fv-site .site-nav.nav-light::before{ background:var(--white); }
}

/* ---------- contact form: which fields are needed ---------- */
.fv-site .field label .field-tag{ font-weight:400; letter-spacing:0; color:var(--muted-2); }

/* ---------- a link inside a hero lead ---------- */
.fv-site .stage-lead a{ color:inherit; text-decoration:underline; text-underline-offset:4px; }
.fv-site .stage-lead a:focus-visible{ outline:3px solid var(--white); outline-offset:3px; }

/* ---------- footer call to action, from the site settings (footer.cta) ---------- */
.fv-site .footer-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-5); padding-bottom:var(--space-block); margin-bottom:var(--space-block); border-bottom:0; }
.fv-site .footer-cta h2{ margin:0; font-weight:400; line-height:1.1; }
.fv-site .footer-cta h2 strong{ font-weight:800; }
.fv-site .footer-cta .btn.btn-red{ background:var(--red-deep); color:#fff; }
.fv-site .footer-cta .btn.btn-red:hover{ background:#a30000; color:#fff; }
.fv-site .footer-cta .btn:focus-visible{ outline-color:var(--white); }
/* one closing action per page (the owner, 2026-10-21: "do not overdo
   persuasion and too many calls to action"). A page that closes on its own
   band keeps that band and drops the footer's, so a visitor never meets two
   closing headings and two red buttons in a row. Contact drops it too: its
   form is the action, and the footer's button only led back to the same page.
   What we build, the articles and the 404 page close on the footer's. */
.fv-site:has(main .cta-band) .footer-cta,
.fv-site:has(main .contact-card) .footer-cta{ display:none; }
.fv-site:has(main .legal) .footer-cta{display:none}

/* ---------- less black: white sections ----------
   The owner, 2026-10-22: "The whole site must not use so much black and no
   big blocks or sections. The footer and hero is good, but the rest needs to
   be on a white background." Only the heroes and the footer stay dark. A
   statement band below a hero now carries the white theme in its markup
   (data-theme="paper"), so the nav reads it as white; these rules give it ink
   text. The closing call to action and Home's "Five kinds of system" panel
   lose their black box: their copy sits straight on the white page, with a
   hairline above the call to action. Photographs and the fades that carry
   their text (Home's cards, the Knowledge strips, the photo heroes) are
   unchanged.
   One black band joins them (the owner, 2026-10-22: "move the We are what we
   sell section above the footer on all pages and change that section back to
   black"): it lives in partials/footer.html, directly above the footer on
   every page, as a dark stage band (data-theme="dark") with white text. */
.fv-site section.stage.paper{ background:var(--paper); color:var(--ink); }
.fv-site .stage.paper .stage-lead{ color:var(--muted); }
.fv-site .stage.paper .stage-link a{ color:var(--ink); }
.fv-site .stage.paper .stage-link a:hover{ color:var(--red-deep); }

/* the closing call to action: no box, a hairline above it */
.fv-site .cta-band{ background:transparent; color:var(--ink); border-radius:0; border-top:0; padding:var(--pad-band) 0 0; }
.fv-site .cta-band h2{ color:var(--ink); }
.fv-site .cta-band .btn:not(.btn-red){ background:rgba(0,0,0,.07); color:var(--ink); }
.fv-site .cta-band .btn:not(.btn-red):hover{ background:rgba(0,0,0,.14); color:var(--ink); }
.fv-site .cta-band .btn:focus-visible{ outline:3px solid var(--red-deep); outline-offset:3px; }

/* Home's "Five kinds of system" panel: no box, ink on white */
.fv-site .card-dark.ds-board{ background:none; color:var(--ink); border-radius:0; padding:0; box-shadow:none; }
.fv-site .ds-board > h2{ color:var(--ink); }
.fv-site .ds-board .ds-values h3{ color:var(--ink); }
.fv-site .ds-board .ds-values .body{ color:var(--muted); }
.fv-site .ds-board .ds-num{ color:var(--red-deep); }
.fv-site .ds-board .ds-values a{ color:var(--ink); }
.fv-site .ds-board .ds-values a:hover{ color:var(--red-deep); }
.fv-site .ds-board .ds-values a:focus-visible{ outline-color:var(--red-deep); }

/* ---------- reduced motion: everything at rest, nothing travels ---------- */
@media (prefers-reduced-motion:reduce){
  .fv-site .ds-eight img{ animation:none; }
  .fv-site .ds-feature, .fv-site .ds-post, .fv-site .ds-featured, .fv-site .ds-capability, .fv-site .site-nav, .fv-site .site-nav::before{ transition:none; }
  .fv-site .ds-feature:hover, .fv-site .ds-feature:focus-within, .fv-site a.ds-post:hover, .fv-site a.ds-post:focus-visible,
  .fv-site a.ds-featured:hover, .fv-site a.ds-featured:focus-visible, .fv-site .ds-capability:hover{ transform:none; }
  .fv-site .ds-fan .ds-layer{ transform:none !important; }
  .fv-site .ds-posts{ scroll-snap-type:none; }
}

/* ---------- Type and alignment audit (Freya Lindqvist, 2026-10-29; Guy approved the hero changes the same day) ---------- */
/* BR-L10: every page hero's supporting line is set at the body size, line-height
   1.5, at most 46 characters wide. home.css held it for Home only; this rule gives it to every page. */
.fv-site .page-hero p.stage-lead{ font-size:var(--type-body); line-height:1.5; max-width:46ch; }
/* One left edge: a photo hero's words start where the sections under it start,
   the container's edge on a wide screen and the gutter on a narrower one. */
@media (min-width:900px){
  .fv-site .ds-photo-hero .ph-copy{ margin-inline-start:max(var(--space-gutter), calc((100% - var(--container)) / 2)); }
}
/* BR-T08, token sizes only: card headings at h-sm (Home's five kinds of system, the "Keep reading" cards) */
.fv-site .ds-values h3, .fv-site .ds-post h3{ font-size:var(--type-h-sm); line-height:1.08; letter-spacing:-0.02em; }