/* ==========================================================================
   FEZEY · V3e — the shared stylesheet (the homepage, approved by the user on
   28 Oct 2026; ported from the ZAZA prototypes @665be49)

   One file for the pieces any page can adopt once its redesign is approved:
     0  the tokens (the prototypes' kit: the site's palette and type, plus the
        kit's spacing, motion and layer names)
     1  reset, ground, layout and type utilities (the kit's base.css §1–§3)
     2  buttons (the kit's .fz-btn)
     3  the site's chrome row as V3e's header (nav.js's .sitenav and the menu's
        top bar, on html.v3e only)
     4  the stage canvas (#fz-stage) and reduced motion (the kit's §6–§7)
     5  the text system: the explainer layer, the zones, the glass panels, the
        type, the leader lines, the motion grammar, phones, reduced motion
        (the prototype's home-v3e/css/base.css)
     6  the Closing, the colour shift, the credits and the Fezey F
        (the prototype's home-v3e/css/act4.css)
   Linked after site.css by a page whose <html> carries class "v3e". It
   defines the kit's .fz-btn, .fz-mono, .fz-sr, .fz-select and .fz-arrow: a
   page that also links film/kit/toolkit.css must reconcile the two first.
   Motion: transform, opacity and clip-path only; never ease-in, scale(0) or
   transition: all; nothing animates a blur. Dark only.
   ========================================================================== */
/* ==========================================================================
   0 · tokens (the kit's tokens.css)
   ========================================================================== */
/* FEZEY V12 prototypes: design tokens. The site's palette and type (SPEC; PLAN "Global Constraints"), dark only.
   Every prototype page links fonts.css, then this, then base.css. Read colours, sizes, spacing and motion from here;
   a page adds its own tokens under its own prefix, never a second value for one of these. */
:root {
  color-scheme: dark;

  /* ---- colour */
  --void: #07060a;            /* the ground */
  --graphite: #121017;        /* raised surfaces: cards, the menu, fields */
  --signal: #ece9f1;          /* text */
  --dim: #8c8698;             /* secondary text, resting chrome (5.7:1 on --void) */
  --faint: #4a4552;           /* hairlines and quiet marks; never text */
  --violet: #662d91;          /* the logo purple: surfaces and light only, never text */
  --filament: #c9b6ea;        /* focus rings, the current place, quiet highlights */
  --accent: #8b45d0;          /* one accented phrase per statement (display sizes only: 3.7:1 on --void) */
  --gold: #f2c27a;            /* approved results only */
  --porcelain: #f3f0f6;       /* 3D material */
  --line: rgba(236, 233, 241, 0.12);          /* hairline on --void */
  --line-strong: rgba(236, 233, 241, 0.3);    /* outlines of controls */
  --wash: rgba(236, 233, 241, 0.06);          /* a hover or pressed fill */
  --scrim: rgba(7, 6, 10, 0.72);              /* words over a picture */

  /* ---- type: Bricolage Grotesque titles (600, uppercase, -0.035em; 800 numerals), Mona Sans body,
     Martian Mono labels (uppercase, 0.16em) */
  --font-title: "Bricolage Grotesque", "Bricolage Fallback", "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Mona Sans", "Mona Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --t-hero: clamp(44px, 6.2vw, 108px);
  --t-statement: clamp(30px, 4.4vw, 76px);
  --t-h2: clamp(26px, 3vw, 48px);
  --t-h3: clamp(20px, 1.8vw, 28px);
  --t-lead: 18px;
  --t-body: 16px;
  --t-mono: 11px;
  --track-title: -0.035em;
  --track-num: -0.04em;
  --track-mono: 0.16em;
  --measure: 64ch;            /* the longest line of body copy */

  /* ---- space */
  --pad: clamp(20px, 3.2vw, 44px);
  /* the side gutter: never under 16 px, never inside a phone's safe area (the artifact contract) */
  --gutter-l: max(16px, var(--pad), env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, var(--pad), env(safe-area-inset-right, 0px));
  --section-y: clamp(88px, 14vh, 176px);
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --max: 1600px;              /* the widest a .fz-wrap's content runs */
  --nav-h: 72px;              /* the fixed nav row (60px on a phone, set in base.css) */

  /* ---- shape */
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --r-pill: 999px;

  /* ---- motion: one curve for things that arrive, one for things that travel */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --d-xs: 120ms;
  --d-s: 180ms;
  --d-m: 240ms;
  --d-l: 420ms;
  --d-xl: 560ms;
  --d-xxl: 900ms;

  /* ---- layers */
  --z-stage: 0;               /* #fz-stage, the one WebGL canvas */
  --z-content: 1;             /* the page */
  --z-nav: 50;
  --z-menu: 100;
  --z-skip: 110;
}
@media (max-width: 767px) { :root { --nav-h: 60px; } }

/* ==========================================================================
   1 · reset, ground, layout, type utilities (the kit's base.css §1–§3)
   ========================================================================== */
/* ------------------------------------------------------------------------------------------------ 1 reset, ground */
*, *::before, *::after { box-sizing: border-box; }
html {
  color-scheme: dark;
  background: var(--void);
  color: var(--signal);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--void);
  color: var(--signal);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }            /* with width/height attributes, the aspect ratio is kept */
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
::selection { background: var(--violet); color: var(--signal); }
:focus-visible { outline: 2px solid var(--filament); outline-offset: 4px; }
:focus:not(:focus-visible) { outline: none; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ------------------------------------------------------------------------------------------------ 2 layout */
/* the page sits above the stage canvas */
main, .fz-content { position: relative; z-index: var(--z-content); display: block; }
main:focus { outline: none; }
/* the side gutter of the artifact contract: max(16px, safe area), widened by --pad on larger screens */
.fz-wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}
.fz-section { position: relative; padding-block: var(--section-y); }
.fz-stack { display: grid; gap: var(--s-5); align-content: start; }
.fz-clip { overflow: clip; }
.fz-sr:where(:not(:focus-within, :active)) {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important;
  padding: 0 !important; border: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
/* a phone number or an address the visitor copies (tel: and mailto: are unreliable in the review viewer) */
.fz-select { -webkit-user-select: all; user-select: all; }

/* ------------------------------------------------------------------------------------------------ 3 typography */
.fz-display, .fz-statement, .fz-h2, .fz-h3 {
  font-family: var(--font-title);
  font-weight: 600;
  font-variation-settings: "wdth" 100, "opsz" 96;
  text-transform: uppercase;
  letter-spacing: var(--track-title);
  text-wrap: balance;
}
.fz-display { font-size: var(--t-hero); line-height: 0.88; }
.fz-statement { font-size: var(--t-statement); line-height: 0.92; }
.fz-h2 { font-size: var(--t-h2); line-height: 0.96; }
.fz-h3 { font-size: var(--t-h3); line-height: 1.04; letter-spacing: -0.02em; }
.fz-lead { font-size: var(--t-lead); line-height: 1.55; color: var(--signal); max-width: var(--measure); text-wrap: pretty; }
.fz-body { font-size: var(--t-body); line-height: 1.65; color: var(--dim); max-width: var(--measure); text-wrap: pretty; }
.fz-mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 400;
  font-variation-settings: "wdth" 87.5;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  line-height: 1.5;
}
.fz-num {
  font-family: var(--font-title);
  font-weight: 800;
  font-variation-settings: "wdth" 100, "opsz" 96;
  letter-spacing: var(--track-num);
  line-height: 0.86;
  font-variant-numeric: lining-nums tabular-nums;
}
.fz-num--gold { color: var(--gold); }          /* approved results only */
.fz-accent { color: var(--accent); }           /* one phrase per statement, display sizes only */
.fz-dim { color: var(--dim); }

/* the arrow, drawn: none of the three faces has U+2192, so a text "→" in a large figure or title falls back to Arial.
   Sized by the font (0.78em), coloured by the text, drawn on the baseline's middle. In a figure:
     0.5% <span class="fz-arrow" role="img" aria-label="to"></span> 1.5%
   Decorative (a link that already says where it goes): aria-hidden="true". --heavy for 700-800 weights;
   --ne points up-right (an outbound link). Small text (labels, body) can keep a text arrow. */
.fz-arrow {
  display: inline-block;
  flex: none;
  width: 0.78em;
  height: 0.78em;
  vertical-align: -0.06em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='M2.5 12h16M13.5 4.5 21 12l-7.5 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='M2.5 12h16M13.5 4.5 21 12l-7.5 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fz-arrow--heavy {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='square'%3E%3Cpath d='M2.5 12h14.5M12.8 5 20 12l-7.2 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='square'%3E%3Cpath d='M2.5 12h14.5M12.8 5 20 12l-7.2 7'/%3E%3C/svg%3E");
}
.fz-arrow--ne { transform: rotate(-45deg); }

/* ==========================================================================
   2 · buttons (the kit's base.css §4, the button only)
   ========================================================================== */
/* buttons: mono labels in a pill, 44 px tall (a thumb target) */
.fz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 400;
  font-variation-settings: "wdth" 87.5;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--d-m) var(--ease-out), border-color var(--d-m) var(--ease-out),
    color var(--d-m) var(--ease-out), transform var(--d-s) var(--ease-out);
}
.fz-btn:active { transform: scale(0.97); }
.fz-btn--primary { background: var(--signal); color: var(--void); }
.fz-btn--ghost { background: transparent; color: var(--signal); border-color: var(--line-strong); }
@media (hover: hover) and (pointer: fine) {
  .fz-btn--primary:hover { background: var(--filament); }
  .fz-btn--ghost:hover { border-color: var(--signal); background: var(--wash); }
}

/* ==========================================================================
   2b · the kit's components and chrome (the prototypes' kit/base.css §4 from chips, and §5: the skip link, the
   header .fz-nav, Menu / Close), in the prototypes' cascade order (PORT-SITE)
   ========================================================================== */
/* chips: a choice or a deliverable (aria-pressed / aria-current when chosen). A long one wraps inside its container
   rather than widening the page (a 390 px phone card is about 300 px wide). */
.fz-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 17px;
  background: transparent;
  color: var(--signal);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-variation-settings: "wdth" 87.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.35;
  text-align: start;
  text-decoration: none;
}
:is(button, a).fz-chip { cursor: pointer; transition: background-color var(--d-m) var(--ease-out), color var(--d-m) var(--ease-out), border-color var(--d-m) var(--ease-out); }
.fz-chip:is([aria-pressed="true"], [aria-current]) { background: var(--signal); border-color: var(--signal); color: var(--void); }
@media (hover: hover) and (pointer: fine) {
  :is(button, a).fz-chip:not([aria-pressed="true"], [aria-current]):hover { border-color: var(--signal); background: var(--wash); }
}

/* tags: a quiet scope or format label on a card */
.fz-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 24px;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--wash);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 10px;
  font-variation-settings: "wdth" 87.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* cards: media on top (its own ratio via --ar, cover, never distorted), words below */
.fz-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--r-l);
  background: var(--graphite);
  color: var(--signal);
  text-decoration: none;
  overflow: clip;
  isolation: isolate;
}
.fz-card__media { position: relative; aspect-ratio: var(--ar, 16 / 10); overflow: clip; background: #0d0b12; }
.fz-card__media > :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
.fz-card__body { display: grid; gap: 10px; align-content: start; padding: 18px 20px 22px; }
.fz-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
@media (hover: hover) and (pointer: fine) {
  a.fz-card .fz-card__media > :is(img, video) { transition: transform var(--d-xl) var(--ease-out); }
  a.fz-card:hover .fz-card__media > :is(img, video) { transform: scale(1.03); }
}

/* logos: a tool's mark (monochrome, kit/logos via a CSS mask), its name and one line on what it does.
   <li class="fz-logo"><span class="fz-logo__mark" style="--logo:url('<TOOLS[i].logo>')" aria-hidden="true"></span>
   <span class="fz-logo__name">Meta</span><span class="fz-logo__line">…</span></li>
   A tool with no logo file (TOOLS[i].logo === null) shows its name as a wordmark chip: add .fz-logo--text and leave
   the mark out. */
.fz-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--line);
  overflow: clip;
}
.fz-logo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "mark name" "line line";
  align-items: center;
  gap: 14px 12px;
  align-content: start;
  min-width: 0;
  padding: 22px 22px 24px;
  background: var(--void);
  color: var(--signal);
}
.fz-logo__mark {
  grid-area: mark;
  display: block;
  width: 26px;
  height: 26px;
  background-color: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
.fz-logo__name { grid-area: name; font-weight: 600; font-size: 15px; line-height: 1.25; letter-spacing: -0.005em; }
.fz-logo__line { grid-area: line; font-size: 14px; line-height: 1.5; color: var(--dim); }
.fz-logo--text { grid-template-areas: "name name" "line line"; }
.fz-logo--text .fz-logo__mark { display: none; }
.fz-logo--text .fz-logo__name {
  justify-self: start;
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
}

/* proof: one approved figure, its label, its client and "Fezey-reported" */
.fz-proof { display: grid; gap: 10px; align-content: start; }
.fz-proof__value { font-size: clamp(56px, 7.4vw, 128px); color: var(--gold); }
.fz-proof__label {
  font-family: var(--font-title);
  font-weight: 600;
  font-variation-settings: "wdth" 100, "opsz" 96;
  font-size: var(--t-h3);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.fz-proof__meta { color: var(--dim); }

/* placeholders: missing content, labelled where it stands (data-label is shown; give it role="img" and an
   aria-label too) */
.fz-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 160px;
  aspect-ratio: var(--ar, auto);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-m);
  background:
    repeating-linear-gradient(135deg, rgba(236, 233, 241, 0.045) 0 1px, transparent 1px 14px),
    var(--graphite);
  color: var(--dim);
  overflow: clip;
}
.fz-placeholder[data-label]::after {
  content: attr(data-label);
  max-width: calc(100% - 32px);
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--void);
  color: var(--signal);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-variation-settings: "wdth" 87.5;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  line-height: 1.4;
  text-align: center;
}

/* ------------------------------------------------------------------------------------------------ 5 chrome */
.fz-skip {
  position: fixed;
  top: 10px;
  left: var(--gutter-l);
  z-index: var(--z-skip);
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--signal);
  color: var(--void);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-160%);
}
.fz-skip:focus-visible { transform: none; }

/* the nav row: logo · Work Capabilities Studio Insights · Start something · Menu. Fixed. At the top of a page it
   stands on a quiet scrim (clear ground); once the page has scrolled past 8 px it takes a translucent --void ground
   with a hairline, so copy never reads through the logo and the pill (kit/chrome.js toggles .is-scrolled in the
   kit's frame loop; no scroll listener). A film page keeps it clear with <body data-nav="bare">. The harness leaves
   the nav and its scrim band (--nav-scrim below it) out of the first-input measure. */
@media (max-width: 767px) { :root { --nav-h: 60px; } }
.fz-nav {
  --nav-scrim: 28px;                  /* how far the scrim paints below the nav (tools/check.py reads it) */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 32px);
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--gutter-r) 0 var(--gutter-l);
  border-bottom: 1px solid transparent;
  background-color: rgba(7, 6, 10, 0);
  pointer-events: none;
  transition: background-color var(--d-m) var(--ease-out), border-color var(--d-m) var(--ease-out);
}
.fz-nav::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(-1 * var(--nav-scrim)) 0;
  z-index: -1;
  background: linear-gradient(rgba(7, 6, 10, 0.84), rgba(7, 6, 10, 0.52) 58%, rgba(7, 6, 10, 0));
  pointer-events: none;
  transition: opacity var(--d-m) var(--ease-out);
}
body:not([data-nav="bare"]) .fz-nav.is-scrolled {
  background-color: rgba(7, 6, 10, 0.86);
  border-bottom-color: var(--line);
}
body:not([data-nav="bare"]) .fz-nav.is-scrolled::before { opacity: 0; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body:not([data-nav="bare"]) .fz-nav.is-scrolled {
    background-color: rgba(7, 6, 10, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
  }
}
.fz-nav :is(a, button) { pointer-events: auto; }
.fz-nav__logo { display: block; margin-right: auto; line-height: 0; border-radius: 4px; }
.fz-nav__logo img { display: block; width: auto; height: 24px; }
.fz-nav__links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); margin: 0; padding: 0; list-style: none; }
.fz-nav__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--dim);
  text-decoration: none;
  transition: color var(--d-m) var(--ease-out);
}
.fz-nav__links a:is([aria-current], .is-section) { color: var(--signal); }
.fz-nav__links a:is([aria-current], .is-section)::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--filament);
}
.fz-nav__start { min-height: 44px; padding: 0 16px; }   /* a thumb target, like every control */
.fz-nav__start[aria-current] { background: var(--signal); border-color: var(--signal); color: var(--void); }
@media (hover: hover) and (pointer: fine) { .fz-nav__links a:hover { color: var(--signal); } }
@media (max-width: 959px) { .fz-nav__links { display: none; } }
@media (max-width: 767px) { .fz-nav__logo img { height: 21px; } }
@media (max-width: 359px) { .fz-nav__start { display: none; } }

/* Menu / Close: a mono label and two hairlines that cross into an x */
.fz-menu-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-right: -8px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--signal);
}
.fz-menu-btn__glyph { position: relative; display: block; width: 20px; height: 9px; }
.fz-menu-btn__glyph::before, .fz-menu-btn__glyph::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform-origin: 100% 50%;
  transition: transform var(--d-l) var(--ease-out);
}
.fz-menu-btn__glyph::before { top: 0; }
.fz-menu-btn__glyph::after { bottom: 0; }
@media (hover: hover) and (pointer: fine) { .fz-menu-btn:hover .fz-menu-btn__glyph::after { transform: scaleX(0.6); } }
.fz-menu-btn--close .fz-menu-btn__glyph::before,
.fz-menu-btn--close .fz-menu-btn__glyph::after { transform-origin: 50% 50%; }
.fz-menu-btn--close .fz-menu-btn__glyph::before { top: 4px; transform: rotate(45deg) scaleX(0.75); }
.fz-menu-btn--close .fz-menu-btn__glyph::after { bottom: 4px; transform: rotate(-45deg) scaleX(0.75); }
@media (hover: hover) and (pointer: fine) {
  .fz-menu-btn--close:hover .fz-menu-btn__glyph::after { transform: rotate(-45deg) scaleX(0.75); }
}

/* the full-screen menu: a modal <dialog> (the page behind is inert; Esc closes; scroll is contained) */
dialog.fz-menu {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--void);              /* solid: nothing of the page ghosts through the words */
  color: var(--signal);
  overflow: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity var(--d-m) linear;
}
dialog.fz-menu::backdrop { background: transparent; overflow: hidden; overscroll-behavior: contain; }
dialog.fz-menu.is-open { opacity: 1; }
.fz-menu__inner {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
  padding: 0 var(--gutter-r) max(24px, env(safe-area-inset-bottom, 0px)) var(--gutter-l);
}
.fz-menu__bar {
  display: flex;
  align-items: center;
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}
.fz-menu__bar .fz-nav__logo { margin-right: auto; }
.fz-menu__body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 120px);
  padding-block: clamp(24px, 6vh, 72px);
}
.fz-menu__pages { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.08em; }
.fz-menu__pages a {
  display: inline-block;
  font-family: var(--font-title);
  font-weight: 600;
  font-variation-settings: "wdth" 100, "opsz" 96;
  font-size: clamp(38px, min(8.6vh, 6.4vw), 100px);
  line-height: 0.94;
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  color: var(--signal);
  text-decoration: none;
  transition: color var(--d-s) var(--ease-out);
}
.fz-menu__pages a[aria-current] { color: var(--filament); }
.fz-menu__pages .fz-menu__go { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .fz-menu__pages:has(a:hover) a:not(:hover) { color: var(--dim); }
}
.fz-menu__label { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; color: var(--dim); }
.fz-menu__label::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.fz-menu__services { margin: 0; padding: 0; list-style: none; display: grid; }
.fz-menu__services a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--signal);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition: color var(--d-s) var(--ease-out);
}
.fz-menu__services a::after { content: "\2197"; color: var(--dim); transition: color var(--d-s) var(--ease-out), transform var(--d-l) var(--ease-out); }
.fz-menu__services a[aria-current] { color: var(--filament); }
@media (hover: hover) and (pointer: fine) {
  .fz-menu__services a:hover::after { color: var(--filament); transform: translate(2px, -2px); }
}
.fz-menu__contact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 32px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--dim); }
.fz-menu__contact b {
  margin-left: 6px;
  color: var(--signal);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  font-variation-settings: normal;
  letter-spacing: 0;
  text-transform: none;
}
/* the opening: words rise into place (none under reduced motion) */
.fz-menu__pages li, .fz-menu__side { opacity: 0; transform: translateY(14px); transition: opacity var(--d-l) var(--ease-out), transform var(--d-xl) var(--ease-out); transition-delay: calc(60ms + var(--i, 0) * 45ms); }
dialog.fz-menu.is-open :is(.fz-menu__pages li, .fz-menu__side) { opacity: 1; transform: none; }
@media (max-width: 767px) {
  .fz-menu__body { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 40px; padding-block: 20px 36px; }
  .fz-menu__pages a { font-size: clamp(36px, 11vw, 52px); }
}

/* the footer: the way on, then the company facts in rows */
.fz-foot {
  position: relative;
  z-index: var(--z-content);
  background: var(--void);
  border-top: 1px solid var(--line);
  padding-block: clamp(72px, 12vh, 144px) max(28px, env(safe-area-inset-bottom, 0px));
}
.fz-foot__lead { display: grid; justify-items: start; gap: 14px; margin-bottom: clamp(56px, 9vh, 112px); }
.fz-foot__go {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28em;
  font-family: var(--font-title);
  font-weight: 600;
  font-variation-settings: "wdth" 100, "opsz" 96;
  font-size: var(--t-statement);
  line-height: 0.92;
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  color: var(--signal);
  text-decoration: none;
}
.fz-foot__go .fz-arrow { color: var(--accent); align-self: center; transition: transform var(--d-l) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .fz-foot__go:hover .fz-arrow { transform: translateX(0.12em); } }
.fz-foot__reply { color: var(--dim); }
.fz-foot__rows { display: grid; margin: 0; }
.fz-foot__row {
  display: grid;
  grid-template-columns: minmax(120px, 240px) minmax(0, 1fr);
  align-items: baseline;
  gap: 8px 32px;
  padding-block: 18px;
  border-top: 1px solid var(--line);
}
.fz-foot__row dt { color: var(--dim); }
.fz-foot__row dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 26px; margin: 0; }
.fz-foot__row dd.fz-foot__col { flex-direction: column; gap: 6px; }
.fz-foot__row a { color: var(--signal); text-decoration: none; }
.fz-foot__row a[aria-current] { color: var(--filament); }
@media (hover: hover) and (pointer: fine) { .fz-foot__row a:hover { text-decoration: underline; } }
.fz-foot__note { color: var(--dim); }
.fz-foot__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  margin-top: clamp(48px, 7vh, 88px);
  color: var(--dim);
}
.fz-foot__mark { display: flex; align-items: center; gap: 14px; }
.fz-foot__mark img { width: 34px; height: auto; }
.fz-foot__end a { color: var(--signal); }
@media (max-width: 639px) { .fz-foot__row { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   3 · the site's chrome row as V3e's header (html.v3e). nav.js's real header
   (the lockup, Start something, Menu) and the menu dialog's top bar take the
   prototype's header box: 72 px tall (60 on a phone) under the safe area, the
   page's gutters, the lockup at 24 px (21 on a phone); at the top a quiet
   scrim, once the page has scrolled past 8 px a translucent void ground with
   a hairline (v3e/chrome.js toggles .is-scrolled in the frame loop; no
   scroll listener). Start something is the kit's ghost pill (44 px, a thumb
   target); Menu keeps its label and its two hairlines. The menu's top bar
   takes the same box, so Menu turns into Close on the same pixel.
   ========================================================================== */
html.v3e .sitenav, html.v3e .menu-top {
  --nav-scrim: 28px;
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); margin: 0;
  padding: env(safe-area-inset-top, 0px) var(--gutter-r) 0 var(--gutter-l);
  gap: clamp(12px, 2.4vw, 32px); border-bottom: 1px solid transparent;
}
html.v3e .sitenav { z-index: var(--z-nav); background-color: rgba(7, 6, 10, 0);
  transition: background-color var(--d-m) var(--ease-out), border-color var(--d-m) var(--ease-out); }
html.v3e .sitenav::before { top: 0; height: auto; inset: 0 0 calc(-1 * var(--nav-scrim)) 0;
  background: linear-gradient(rgba(7, 6, 10, 0.84), rgba(7, 6, 10, 0.52) 58%, rgba(7, 6, 10, 0));
  transition: opacity var(--d-m) var(--ease-out); }
html.v3e .sitenav.is-scrolled { background-color: rgba(7, 6, 10, 0.86); border-bottom-color: var(--line); }
html.v3e .sitenav.is-scrolled::before { opacity: 0; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.v3e .sitenav.is-scrolled { background-color: rgba(7, 6, 10, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); }
}
html.v3e .sitenav .lockup, html.v3e .menu-lockup { border-radius: 4px; }
html.v3e .sitenav .lockup img, html.v3e .menu-lockup img { height: 24px; }
@media (max-width: 767px) { html.v3e .sitenav .lockup img, html.v3e .menu-lockup img { height: 21px; } }
html.v3e .sitenav .pill { height: auto; min-height: 44px; padding: 0 16px; border-color: var(--line-strong);
  font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 400; font-variation-settings: "wdth" 87.5;
  letter-spacing: var(--track-mono); line-height: 1; text-transform: uppercase; }
@media (max-width: 559px) { html.v3e .sitenav .pill { display: inline-flex; } }
@media (max-width: 359px) { html.v3e .sitenav .pill { display: none; } }
html.v3e .menu-toggle, html.v3e .menu-close { height: auto; min-height: 44px; font-family: var(--font-mono);
  font-size: var(--t-mono); font-weight: 400; letter-spacing: var(--track-mono); }
/* the page links (mountNav({ links: true })): the kit's .fz-nav__links, as the approved V3e header shows them */
html.v3e .sitenav__links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); margin: 0; padding: 0; list-style: none; }
html.v3e .sitenav__links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--dim); text-decoration: none;
  font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 400; font-variation-settings: "wdth" 87.5;
  letter-spacing: var(--track-mono); text-transform: uppercase; line-height: 1.5; transition: color var(--d-m) var(--ease-out); }
html.v3e .sitenav__links a[aria-current] { color: var(--signal); }
html.v3e .sitenav__links a[aria-current]::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--filament); }
@media (hover: hover) and (pointer: fine) { html.v3e .sitenav__links a:hover { color: var(--signal); } }
@media (max-width: 959px) { html.v3e .sitenav__links { display: none; } }
/* the picture stays while the menu is open (the dimmed page is the menu's scrim): V3e's own picture layers, as the
   site keeps its #stage */
html.v3e.menu-hush body > :is(#fz-stage, .fz-grain, .shift, .shift-grade, .labs-screens, .fz-poster.is-in:not(.is-gone)) { opacity: 1 !important; }

/* ==========================================================================
   4 · the stage canvas and reduced motion (the kit's base.css §6–§7)
   ========================================================================== */
/* ------------------------------------------------------------------------------------------------ 6 the stage */
/* v3e/stage.js's one WebGL canvas, behind the page. As tall as the large viewport, so a phone's collapsing URL bar
   never resizes the renderer. */
#fz-stage { position: fixed; inset: 0; z-index: var(--z-stage); pointer-events: none; display: block; width: 100%; height: 100%; }
@supports (height: 100lvh) { #fz-stage { bottom: auto; height: 100lvh; } }
/* The film's first frame as a still (v3e/media.js posterHandoff): over the stage (after it in the page, the same layer)
   and under the page; it fades in as it arrives and out once the stage has drawn its own frame, then leaves. Cut to the
   stage's box like the canvas, and covering it like the lens does (the camera's field is vertical: a narrower screen
   keeps the height and loses the sides). Never shown without the film (html.v3-nogl). */
.fz-poster { position: fixed; inset: 0; z-index: var(--z-stage); pointer-events: none; opacity: 0; transition: opacity 0.3s var(--ease-out); }
@supports (height: 100lvh) { .fz-poster { bottom: auto; height: 100lvh; } }
.fz-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fz-poster.is-in { opacity: 1; }
.fz-poster.is-gone { opacity: 0; transition: opacity 0.6s var(--ease-out); }
html.v3-nogl .fz-poster { display: none; }
/* Pictures far down a film page wait for its first frame (v3e/media.js deferMedia): until then an <img data-src> keeps
   its box, unseen; without scripts (html.v3-nogl stays) its <noscript> twin stands in its place. */
img[data-src]:not([src]) { visibility: hidden; }
html.v3-nogl img[data-src]:not([src]), html.v3-nogl video[data-poster]:not([poster]) { display: none; }

/* ------------------------------------------------------------------------------------------------ 7 reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   5 · the text system (the prototype's home-v3e/css/base.css)
   ========================================================================== */
/* Homepage V3e · the shared text system (PLAN-V3E C2, C3, C5). Every act's CSS (css/actN.css) builds on this file.
   1 tokens  2 the explainer layer's pieces over the film  3 the zones (numbers from explain/zones.js)  4 the glass
   panels  5 type  6 leader lines  7 the motion grammar (motion.js decides when)  8 phones  9 reduced motion and no
   WebGL: one still per section, every word, the same panels.
   Motion: transform, opacity and clip-path only; the kit's --ease-out; never ease-in, scale(0) or transition: all; the
   panels' blur is never animated. Dark only. */

/* ============================================================ 1 · tokens */
:root {
  color-scheme: dark;
  --v3-gut: var(--gutter-l, max(16px, var(--pad, 20px), env(safe-area-inset-left, 0px)));
  --v3-gut-r: var(--gutter-r, max(16px, var(--pad, 20px), env(safe-area-inset-right, 0px)));
  --v3-line: var(--line, rgba(236, 233, 241, 0.12));
  --v3-line-2: rgba(236, 233, 241, 0.18);
  --v3-ease: var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  --v3-title: var(--font-title, 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif);
  --v3-body: var(--font-body, 'Mona Sans', 'Mona Fallback', system-ui, sans-serif);
  --v3-mono: var(--font-mono, 'Martian Mono', ui-monospace, monospace);
  --e-line: #c9b6ea;            /* the leader lines and nodes: lavender, 1.25 px */
  --e-warn: #f2c27a;            /* warnings: solar gold, never red */
  /* the grid and the zones: written by explain/zones.js once per layout; these are the desktop fallbacks */
  --g-m: max(48px, 5vw);
  --z-title-top: 16vh;
  --z-title-w: calc((100vw - 2 * var(--g-m)) * 0.48);
  --z-cap-bottom: 14vh;
  --z-cap-w: calc((100vw - 2 * var(--g-m)) * 0.4);
  --z-label-gap: 32px;
  /* the measure (C2): body and captions <= 52 characters a line (phone 34), headings <= 18 */
  --m-body: 39ch;
  --m-head: 14ch;
  /* the glass (C3): felt more than seen */
  --gl-fill: rgba(14, 10, 22, 0.30);
  --gl-tint: rgba(14, 10, 22, 0.46);
  --gl-edge: rgba(255, 255, 255, 0.07);
  --gl-hi: rgba(255, 255, 255, 0.06);
  --gl-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  --gl-r: 16px;
  --gl-r-s: 12px;
  --gl-pad: 22px 26px;
  --gl-pad-s: 10px 14px;
}
html { background: var(--void, #07060a); }
body.v3-body { background: var(--void, #07060a); color: var(--signal, #ece9f1); overflow-x: hidden; }
.v3 { position: relative; z-index: 1; }
.v3 p, .v3 h1, .v3 h2, .v3 h3, .v3 ol, .v3 ul, .v3 dl, .v3 dd { margin: 0; }
.v3 ol, .v3 ul { padding: 0; list-style: none; }
html:not(.v3-reduced) #fz-stage { opacity: 0; transition: opacity 1200ms var(--v3-ease); }
html.v3-lit #fz-stage { opacity: 1; }
.v3-gold { color: var(--gold, #f2c27a); }
.v3-reported { font: 500 10px/1 var(--v3-mono); text-transform: uppercase; letter-spacing: 0.16em; color: rgba(236, 233, 241, 0.84); white-space: nowrap; }
.v3-btn { min-height: 48px; padding: 0 26px; }
.v3-to { margin: 0 0.02em; }
.v3-nowrap { white-space: nowrap; }
.v3-note { font: 400 14px/1.5 var(--v3-body); color: rgba(236, 233, 241, 0.94); }
.v3-arrow { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1.2 var(--v3-body); color: var(--signal, #ece9f1); text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--v3-line-2); transition: border-color 180ms var(--v3-ease), color 180ms var(--v3-ease); }
.v3-arrow::after { content: ''; width: 18px; height: 1px; background: currentColor; transition: transform 240ms var(--v3-ease); transform-origin: left; }
@media (hover: hover) and (pointer: fine) {
  .v3-arrow:hover { border-color: var(--filament, #c9b6ea); color: var(--filament, #c9b6ea); }
  .v3-arrow:hover::after { transform: scaleX(1.6); }
}
.e-sec { position: relative; }
/* (the site, CLS) until the page has measured its tracks, the film's document stands long, so the credits wait far
   below the fold and never jump through the first view as the sections take their heights */
html:not(.v3-reduced):not(.v3-nogl):not(.v3-measured) main.v3 { min-height: 2000vh; }
/* (the site, CLS) and on a kit page the sections stay unpainted until page.js has stood their tracks: the veil covers
   the page then anyway, so nothing painted can move as the film's sections take their heights (a 3 s safety shows
   them whatever happens, as the veil's own does) */
html:not(.v3-reduced):not(.v3-nogl):not(.v3-measured) main#main.v3 .e-sec { visibility: hidden; animation: v3-unhide 0s linear 3s forwards; }
@keyframes v3-unhide { to { visibility: visible; } }

/* ============================================================ 2 · the explainer layer: every cluster over the film */
html:not(.v3-reduced):not(.v3-nogl) .xp { position: fixed; left: 0; top: 0; z-index: 3; visibility: hidden; transition: visibility 0s linear calc(760ms * var(--rv-slow, 1)); }
html:not(.v3-reduced):not(.v3-nogl) .xp.is-on { visibility: visible; transition-delay: 0s; }
html:not(.v3-reduced):not(.v3-nogl) .xp.is-lost { opacity: 0; transition: opacity 200ms var(--v3-ease); }
.xp { display: grid; gap: 8px; align-content: start; color: var(--signal, #ece9f1); text-decoration: none; isolation: isolate; box-sizing: border-box; }
.xp-svc, .xp-steps { margin: 0; padding: 0; list-style: none; }
.xp-tools { display: contents; }
html:not(.v3-reduced):not(.v3-nogl) .xp-steps { display: contents; }

/* ============================================================ 3 · the zones (C2) */
/* the title zone: column 1, the zone's top; the caption band: column 1, its bottom at the band's foot; labels are
   placed beside their anchors by the layer (translate3d), never closer than 32 px to the anchor or an edge */
html[data-layout="land"] .xp[data-land="title"], html[data-layout="port"] .xp[data-port="title"] { left: var(--g-m); top: var(--z-title-top); width: max-content; max-width: var(--z-title-w); }
html[data-layout="land"] .xp[data-land="caption"], html[data-layout="port"] .xp[data-port="caption"] { left: var(--g-m); top: auto; bottom: var(--z-cap-bottom); width: max-content; max-width: var(--z-cap-w); }
html[data-layout="land"] .xp[data-land="label"], html[data-layout="port"] .xp[data-port="label"] { width: max-content; max-width: min(300px, calc(100vw - 2 * var(--z-label-gap))); }

/* ============================================================ 4 · the glass panels (C3): one behind every cluster */
.xp::before, .gl::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: var(--gl-r); background: var(--gl-tint); border: 1px solid var(--gl-edge);
  box-shadow: inset 0 1px 0 var(--gl-hi), var(--gl-shadow);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.gl-blur .xp::before, html.gl-blur .gl::before { background: var(--gl-fill); -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); }
}
.xp { padding: var(--gl-pad); }
.xp--label, .xp--callout { --gl-r: var(--gl-r-s); }
.xp--label { padding: var(--gl-pad-s); }
.xp--callout { padding: 14px 18px; gap: 6px; }
.xp--bare { padding: 0; }
.xp--bare::before, .xp--block.xp--bare::before { display: none; }
.gl { position: relative; isolation: isolate; }
/* the panel leads its words in (opacity, scale 0.985 -> 1, 420 ms) and follows them out (after them, 260 ms) */
html:not(.v3-reduced):not(.v3-nogl) .xp::before { opacity: 0; transform: scale(0.985); transition: opacity calc(260ms * var(--rv-slow, 1)) var(--v3-ease) calc(var(--pd, 0) * 1ms), transform calc(260ms * var(--rv-slow, 1)) var(--v3-ease) calc(var(--pd, 0) * 1ms); }
html:not(.v3-reduced):not(.v3-nogl) .xp.is-on::before { opacity: 1; transform: none; transition-duration: calc(420ms * var(--rv-slow, 1)); transition-delay: 0s; }

/* ============================================================ 5 · type (Bricolage titles, Mona Sans body, Martian Mono labels) */
.e3 :is(h1, h2, h3, p, li, a, dt, dd, address) { text-shadow: 0 1px 2px rgba(7, 6, 10, 0.5); }
.e3 .fz-btn { text-shadow: none; }
.xp__eb { font: 500 10.5px/1.4 var(--v3-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--filament, #c9b6ea); }
.xp__h1 { display: grid; gap: 14px; font: 600 clamp(40px, 5vw, 92px)/0.9 var(--v3-title); font-stretch: 84%; letter-spacing: -0.035em; text-transform: uppercase; }
.xp__h1 .xp__eb { font-stretch: normal; }
.xp__t { display: block; max-width: var(--m-head); text-wrap: balance; }
.xp__h2 { font: 600 clamp(28px, 3vw, 50px)/0.95 var(--v3-title); font-stretch: 88%; letter-spacing: -0.035em; text-transform: uppercase; text-wrap: balance; max-width: var(--m-head); }
.xp__h2 em { font-style: normal; color: var(--filament, #c9b6ea); }
.xp__h3 { font: 600 clamp(19px, 1.6vw, 26px)/0.98 var(--v3-title); font-stretch: 88%; letter-spacing: -0.03em; text-transform: uppercase; text-wrap: balance; max-width: 14ch; }
.xp__head { font: 600 clamp(22px, 2.15vw, 34px)/1 var(--v3-title); font-stretch: 88%; letter-spacing: -0.03em; text-transform: uppercase; text-wrap: balance; max-width: 24ch; }
.xp__body { font: 400 clamp(15.5px, 1.18vw, 18px)/1.45 var(--v3-body); color: rgba(236, 233, 241, 0.92); max-width: var(--m-body); text-wrap: pretty; }
.xp__mono, .xp__note { font: 500 10.5px/1.5 var(--v3-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal, #ece9f1); }
.xp__note { color: rgba(236, 233, 241, 0.94); letter-spacing: 0.08em; max-width: 40ch; font-size: 11px; }
.xp__credit { font: 500 10px/1.5 var(--v3-mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(236, 233, 241, 0.9); max-width: none; }
.xp__act { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; margin-top: 6px; }
.xp__reply { font: 400 14px/1.4 var(--v3-body); color: rgba(236, 233, 241, 0.78); max-width: 23ch; }
.xp--warn .xp__mono { color: var(--e-warn); }

/* ============================================================ 6 · the leader lines and dots (one SVG over the film) */
.xp-lines { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2; pointer-events: none; overflow: visible; }
.xp-co line { stroke: var(--e-line); stroke-width: 1.25; stroke-dasharray: 1; stroke-dashoffset: 1; fill: none; transition: stroke-dashoffset calc(300ms * var(--rv-slow, 1)) var(--v3-ease) calc(220ms * var(--rv-slow, 1)); }
.xp-co circle { fill: rgba(7, 6, 10, 0.5); stroke: var(--e-line); stroke-width: 1.25; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.6); transition: opacity calc(200ms * var(--rv-slow, 1)) var(--v3-ease) calc(380ms * var(--rv-slow, 1)), transform calc(200ms * var(--rv-slow, 1)) var(--v3-ease) calc(380ms * var(--rv-slow, 1)); }
.xp-co.is-in line { stroke-dashoffset: 0; transition-duration: calc(520ms * var(--rv-slow, 1)); transition-delay: 0s; }
.xp-co.is-in circle { opacity: 1; transform: none; transition-duration: calc(300ms * var(--rv-slow, 1)); transition-delay: 0s; }
.xp-co--warn line, .xp-co--warn circle { stroke: var(--e-warn); }

/* ============================================================ 7 · the motion grammar (C5; motion.js sets --d) */
.e3 { --rv-e: var(--ease-out, cubic-bezier(.23, 1, .32, 1)); --rv-k: var(--rv-slow, 1); }
/* eyebrow: a wipe left to right in 360 ms; out, a 200 ms fade (the wipe resets once it is invisible) */
.rv-eb { clip-path: inset(0 100% 0 0); opacity: 0; transition: opacity calc(200ms * var(--rv-k)) var(--rv-e) calc(var(--d, 0) * 1ms), clip-path 0s linear calc((var(--d, 0) + 200 * var(--rv-k)) * 1ms); }
.rv-eb.is-in { clip-path: inset(0 0 0 0); opacity: 1; transition: clip-path calc(360ms * var(--rv-k)) var(--rv-e) calc(var(--d, 0) * 1ms), opacity 0s linear calc(var(--d, 0) * 1ms); }
/* heading: line by line from its mask, 640 ms; out, the lines lift (-60%) and fade, 360 ms; back, they drop into it */
.rv-l { display: block; overflow: clip; margin: -0.12em -0.14em -0.16em; }
.rv-l.is-open { overflow: visible; }
.rv-l__in { display: block; padding: 0.12em 0.14em 0.16em; transform: translate3d(0, 102%, 0); transition: transform calc(360ms * var(--rv-k)) var(--rv-e) calc(var(--d, 0) * 1ms), opacity calc(360ms * var(--rv-k)) var(--rv-e) calc(var(--d, 0) * 1ms); }
.rv-l__in.is-in { transform: none; opacity: 1; transition-duration: calc(640ms * var(--rv-k)), calc(200ms * var(--rv-k)); }
.rv-l__in.is-post { transform: translate3d(0, -60%, 0); opacity: 0; }
.rv-w { display: inline; }
/* body and captions: up 8 px and in, 480 ms; out, up 6 px and away, 280 ms (back: down again) */
.rv-bd { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity calc(280ms * var(--rv-k)) var(--rv-e) calc(var(--d, 0) * 1ms), transform calc(280ms * var(--rv-k)) var(--rv-e) calc(var(--d, 0) * 1ms); }
.rv-bd.is-in { opacity: 1; transform: none; transition-duration: calc(480ms * var(--rv-k)); }
.rv-bd.is-post { transform: translate3d(0, -6px, 0); }
/* (PORT-SITE, a11y) a control the keyboard reaches mid-reveal shows at once (focus never lands on a fading button) */
.rv-bd:focus-visible { opacity: 1; transform: none; transition: none; }
/* figures: the odometer; units fade in last; out, a 280 ms fade */
.rv-odo { display: inline; white-space: nowrap; }
.rv-odo__d { position: relative; display: inline-block; line-height: 1; vertical-align: baseline; -webkit-text-fill-color: transparent; text-shadow: none; clip-path: inset(0 -0.12em); }
.rv-odo__d::before { content: '0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9'; position: absolute; left: 0; right: 0; top: 0; white-space: pre; line-height: 1; text-align: center; -webkit-text-fill-color: currentColor; transform: translate3d(0, 0, 0); transition: transform calc(540ms * var(--rv-k)) var(--rv-e) calc(var(--d, 0) * 1ms); }
.rv-fig.is-in .rv-odo__d::before { transform: translate3d(0, calc(-50% - var(--n) * 5%), 0); transition-duration: calc(900ms * var(--rv-k)); transition-delay: calc((var(--d, 0) + var(--i, 0) * 45 * var(--rv-k)) * 1ms); }
.rv-fig { opacity: 0; transition: opacity calc(280ms * var(--rv-k)) var(--rv-e) calc(var(--d, 0) * 1ms); }
.rv-fig.is-in { opacity: 1; transition-duration: calc(120ms * var(--rv-k)); }
.rv-odo__u, .rv-odo__p { display: inline-block; opacity: 0; transition: opacity calc(180ms * var(--rv-k)) var(--rv-e) calc(var(--d, 0) * 1ms); }
.rv-odo__p { opacity: 1; }
.rv-fig.is-in .rv-odo__u { opacity: 1; transition-duration: calc(300ms * var(--rv-k)); transition-delay: calc((var(--d, 0) + 640 * var(--rv-k)) * 1ms); }
/* media: the frame opens from the direction of travel and the picture settles from 1.06, 720 ms; out, it closes
   the other way, 420 ms */
.rv-md { clip-path: inset(100% 0 0 0); transition: clip-path calc(420ms * var(--rv-k)) var(--rv-e) calc(var(--d, 0) * 1ms); }
.rv-md[data-rv-from="down"] { clip-path: inset(0 0 100% 0); }
.rv-md[data-rv-from="left"] { clip-path: inset(0 0 0 100%); }
.rv-md[data-rv-from="right"] { clip-path: inset(0 100% 0 0); }
.rv-md.is-in { clip-path: inset(0 0 0 0); transition-duration: calc(720ms * var(--rv-k)); }
.rv-md.is-post { clip-path: inset(0 0 100% 0); }
.rv-md[data-rv-from="down"].is-post { clip-path: inset(100% 0 0 0); }
.rv-md[data-rv-from="left"].is-post { clip-path: inset(0 100% 0 0); }
.rv-md[data-rv-from="right"].is-post { clip-path: inset(0 0 0 100%); }
.rv-md > img, .rv-md > video { transform: scale(1.06); transition: transform calc(420ms * var(--rv-k)) var(--rv-e) calc(var(--d, 0) * 1ms); }
.rv-md.is-in > img, .rv-md.is-in > video { transform: none; transition-duration: calc(720ms * var(--rv-k)); }
/* the headlines stay hidden until they are split into their lines (no flash of the whole line first) */
html:not(.v3-reduced):not(.v3-nogl) .xp :is(.xp__t, .xp__h2, .xp__h3, .xp__head):not(.rv-split) { opacity: 0; }

/* ============================================================ 8 · phones: their own composition */
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  :root { --gl-r: 14px; --gl-r-s: 10px; --gl-pad: 18px 20px; --gl-pad-s: 9px 12px; }
  .xp__h1 { font-size: clamp(36px, 10.2vw, 56px); gap: 12px; }
  .xp__h2 { font-size: clamp(26px, 7.6vw, 36px); }
  .xp__head { font-size: clamp(21px, 6vw, 28px); max-width: 18ch; }
  .xp__h3 { font-size: clamp(19px, 5.2vw, 24px); }
  :root { --m-body: 24ch; }
  .xp__body { font-size: 15.5px; }
  .xp--callout { padding: 12px 16px; }
  .xp__act { margin-top: 8px; }
}

/* ============================================================ 8b · the phone motion tier (X13; the user, 28 Oct 2026:
   "Yes for phone smoothness"). On a phone (html.rv-one: main.js's PHONE, never with reduced motion) every text cluster
   arrives and leaves as one piece: one translate and opacity on the cluster, carrying its panel, lines, labels and
   counter, its leader line on the same clock, on the panel's own timing (out 260 ms; in 420 ms, the kit's --d-l) after
   a 120 ms lead (--d-xs), so a cluster leaving the same band is all but gone before the next arrives; --ease-out. The
   directions are the grammar's: in rising 12 px, out forward rising 8 px, back down the way it came. Nothing inside a
   cluster moves on its own (motion.js's beats move no part: no stagger, no clip-path wipe, no line from its mask, no
   rolling figure).
   The glass's blur moves from the panel (::before) to the cluster itself: a parent's opacity below 1 is a backdrop
   root, so the panel's own blur would see nothing of the film while its cluster fades. A cluster carries will-change
   only while it moves (is-mv, explain/layer.js), and is hidden by the layer when its exit has run. Every rule is
   under html.rv-one, so desktops are untouched; `body` in each selector outranks the acts' own .xp rules, and :where()
   keeps the exclusions out of the reckoning. */
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .xp:not(:where(.xp--block.xp--bare)) {
  opacity: 0; translate: 0 12px;
  transition: opacity calc(420ms * var(--rv-slow, 1)) var(--v3-ease), translate calc(420ms * var(--rv-slow, 1)) var(--v3-ease);
}
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .xp.is-on:not(:where(.xp--block.xp--bare)) { opacity: 1; translate: none; transition-duration: calc(420ms * var(--rv-slow, 1)); transition-delay: calc(120ms * var(--rv-slow, 1)); }
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .xp.is-post:not(:where(.xp--block.xp--bare)) { translate: 0 -8px; }
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .xp.is-on.is-lost { opacity: 0; transition: opacity calc(200ms * var(--rv-slow, 1)) var(--v3-ease); }
/* while it moves (is-mv: explain/layer.js, the move's length) a cluster is shown and a compositor layer; the layer
   hides it once its exit has run, so no visibility transition is ticked on the main thread */
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .xp.is-mv:not(:where(.xp--block.xp--bare)) { visibility: visible; will-change: opacity, transform; }
/* "Hold to see the whole system": the words step back while it is held (act2.css), the button stays */
html.rv-one.is-xray:not(.v3-reduced):not(.v3-nogl) body .e-sec--system .xp.is-on:not([data-story="sys-hint"]) { opacity: 0; transition: opacity calc(300ms * var(--rv-slow, 1)) var(--v3-ease); }
/* the panel stands still in its cluster; its blur is the cluster's */
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .xp::before { opacity: 1; transform: none; transition: none; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.rv-one.gl-blur:not(.v3-reduced):not(.v3-nogl) body .xp:not(:where(.xp--bare)) { border-radius: var(--gl-r); -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); }
  html.rv-one.gl-blur:not(.v3-reduced):not(.v3-nogl) body .xp::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* the leader line and its dot come and go with their label (no draw, no grow); each callout's is a small drawing of
   its own (explain/callouts.js), so it fades as one composited layer */
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .xp-co { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; transition: opacity calc(260ms * var(--rv-slow, 1)) var(--v3-ease); }
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .xp-co.is-in { opacity: 1; transition-duration: calc(420ms * var(--rv-slow, 1)); transition-delay: calc(120ms * var(--rv-slow, 1)); }
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .xp-co :is(line, circle) { stroke-dashoffset: 0; transform: none; opacity: 1; transition: none; }
/* the words stand in their cluster exactly as they rest on a desktop: a headline's lines (split, never moved one by
   one), the figures at their values (the odometer's strips at rest, never rolling), the units shown */
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .rv-l { overflow: visible; }
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .rv-l__in { transform: none; opacity: 1; transition: none; }
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .rv-odo__d::before { transform: translate3d(0, calc(-50% - var(--n) * 5%), 0); transition: none; }
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .rv-odo__u { opacity: 1; transition: none; }

/* ============================================================ 9 · reduced motion (and no WebGL): one still per section,
   every word on its panel, in the section's flow */
.v3-reduced .e-sec, .v3-nogl .e-sec { min-height: 100vh; min-height: 100svh; padding: calc(var(--nav-h, 72px) + 5vh) var(--v3-gut-r) 6vh var(--v3-gut); display: grid; align-content: start; justify-items: start; gap: 18px; }
.v3-reduced .xp, .v3-nogl .xp { position: relative; visibility: visible; opacity: 1; transform: none !important; inset: auto !important; margin: 0 !important; width: auto !important; max-width: min(100%, 720px) !important; }
.v3-reduced .xp-lines, .v3-nogl .xp-lines, .v3-reduced .labs-f, .v3-nogl .labs-f { display: none; }
.v3-reduced :is(.rv-fig, .rv-eb, .rv-l__in, .rv-bd, .rv-md, .rv-md > img, .rv-md > video, .d-row__in, .rv-ch, .d-flag, .d-chip, .wall__media, .wall__media img, .wall__cap),
.v3-nogl :is(.rv-fig, .rv-eb, .rv-l__in, .rv-bd, .rv-md, .rv-md > img, .rv-md > video, .d-row__in, .rv-ch, .d-flag, .d-chip, .wall__media, .wall__media img, .wall__cap) { clip-path: none; transform: none; opacity: 1; transition: none; }
.v3-reduced .rv-l, .v3-nogl .rv-l { overflow: visible; }
.v3-reduced .rv-odo__d, .v3-nogl .rv-odo__d { -webkit-text-fill-color: currentColor; clip-path: none; }
.v3-reduced .rv-odo__d::before, .v3-nogl .rv-odo__d::before { content: none; }
.v3-reduced .rv-odo__u, .v3-nogl .rv-odo__u { opacity: 1; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .rv-eb, .rv-l__in, .rv-bd, .rv-md, .rv-ch, .d-row__in, .d-flag, .d-chip, .rv-odo__d::before, .rv-odo__u, .xp-co line, .xp-co circle, .wall__media, .wall__media img, .xp::before { transition: none !important; }
}

/* ==========================================================================
   6 · the Closing, the colour shift, the credits and the F (the prototype's home-v3e/css/act4.css)
   ========================================================================== */
/* Homepage V3e · Act IV · The invitation: the Closing, the colour shift and the credits (acts/act4.js, closing.js).
   Builds on css/base.css. 1 the Closing's statement  2 the colour shift (two fixed layers between the film and the page)
   3 the credits: a full-height composition over the shifted colour  4 the Fezey F, assembled from three lines of light
   5 the credits' glass rising  6 hover (fine pointers)  7 phones  8 reduced motion and no WebGL.
   Motion: transform and opacity only; the kit's --ease-out; nothing animates a blur.
   --hz (written by acts/act4.js per layout): where the line of light rests, as a share of the frame's height; the
   credits' ground (the legal line) lies below it, so at the bottom of the page the two meet. */

/* ============================================================ 1 · the Closing's statement: the one centred cluster */
html[data-layout="land"] .xp[data-land="cta"] { top: var(--z-title-top); left: 50%; width: min(64vw, 820px); transform: none; margin-left: calc(-1 * min(32vw, 410px)); justify-items: center; text-align: center; }
html[data-layout="port"] .xp[data-port="cta"] { top: var(--z-title-top); left: var(--g-m); right: var(--g-m); }
.xp[data-story="cta"] .xp__h2 { max-width: var(--m-head); }
.xp[data-story="cta"] .xp__body { max-width: min(var(--m-body), 37ch); }
html[data-layout="land"] .xp[data-story="cta"] .xp__act { justify-content: center; }
.xp__contact { display: flex; flex-wrap: wrap; gap: 6px 22px; font: 500 15px/1.4 var(--v3-body); user-select: text; }
/* (X12, M1) the contact line steps back as the credits rise with the same details (acts/act4.js) */
.xp__contact.is-quiet { opacity: 0; transform: translate3d(0, -6px, 0); transition: opacity 280ms var(--v3-ease), transform 280ms var(--v3-ease); pointer-events: none; }
/* the button drifts toward a fine pointer (closing.js magnet(): the `translate` property, at most 6 px), quickly while
   it follows and slowly as it settles back; the kit's press scale stays on `transform` */
.xp__mag { display: inline-flex; }
.xp__mag .fz-btn {
  transition-property: background-color, border-color, color, transform, translate;
  transition-duration: var(--d-m, 240ms), var(--d-m, 240ms), var(--d-m, 240ms), var(--d-s, 180ms), 560ms;
  transition-timing-function: var(--v3-ease);
}
.xp__mag .fz-btn.is-drawn { transition-duration: var(--d-m, 240ms), var(--d-m, 240ms), var(--d-m, 240ms), var(--d-s, 180ms), 160ms; }

/* ============================================================ 2 · the colour shift (C7)
   grade   the film's own light recoloured: luminance kept, hue and saturation Fezey's (mix-blend-mode: color)
   ground  the night under it gone to a near-black aubergine, deepening to purple toward the horizon
   hz      moves with the horizon: the violet glow rising from it, the ground below it, and the line of light */
.shift, .shift-grade { position: fixed; inset: 0; z-index: 0; pointer-events: none; visibility: hidden; }
.shift { contain: strict; }
.shift i { position: absolute; display: block; }
.shift-grade { opacity: 0; mix-blend-mode: color; background: linear-gradient(180deg, #4a2470 0%, #662d91 50%, #7d3dbd 100%); }
.shift__ground { inset: 0; opacity: 0; background: linear-gradient(180deg, #0b0612 0%, #120a1e 26%, #1d0e30 52%, #2e1450 78%, #3a1965 100%); }
.shift__hz { left: 0; right: 0; top: 0; height: 0; will-change: transform; }
.shift__glow { left: -20%; width: 140%; top: -44vh; height: 88vh; opacity: 0; background: radial-gradient(closest-side, rgba(139, 69, 208, 0.56), rgba(102, 45, 145, 0.34) 42%, rgba(102, 45, 145, 0.12) 70%, rgba(102, 45, 145, 0) 100%); }
.shift__below { left: 0; right: 0; top: 0; height: 100vh; opacity: 0; background: linear-gradient(180deg, rgba(58, 24, 90, 0.86) 0, rgba(16, 8, 25, 0.97) 14%, #0b0612 46%, #0a0510 100%); }
.shift__halo { left: 0; right: 0; top: -22px; height: 44px; opacity: 0; background: linear-gradient(180deg, rgba(139, 69, 208, 0) 0, rgba(139, 69, 208, 0.28) 38%, rgba(214, 192, 255, 0.5) 50%, rgba(139, 69, 208, 0.28) 62%, rgba(139, 69, 208, 0) 100%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.shift__line { left: 0; right: 0; top: -0.75px; height: 1.5px; opacity: 0; background: linear-gradient(90deg, rgba(214, 192, 255, 0) 0, #e6d8ff 16%, #fbf8ff 50%, #e6d8ff 84%, rgba(214, 192, 255, 0) 100%); }

/* ============================================================ 3 · the credits: a full-height composition
   desktop, on the page's 12 columns: the masthead (the F, the name, the statement; columns 1-9) with the studio beside it
   (10-12); contact by intent, four cards of three columns; the disciplines (1-9) and the pages (10-12); then, below the
   horizon, the ground (the legal line, Back to top, the prototype note). Every vertical edge lands on a card's edge.
   The content sits centred in the sky above the horizon; at 1280 x 720 it all fits one frame. The reading order is
   C7's (the studio follows the cards in the page; it holds no control, so the keyboard's order is the frame's). */
.cr { position: relative; z-index: 1; color: var(--signal, #ece9f1); }
.cr__in {
  --cr-gap: 24px;
  --cr-row: clamp(14px, 2.2vh, 28px);
  --cr-pad: clamp(16px, 2.4vh, 24px) 22px;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) auto auto auto minmax(var(--cr-row), 1fr) minmax(calc((1 - var(--hz, 0.86)) * 100svh), auto);
  grid-template-areas:
    ".  .  .  .  .  .  .  .  .  .  .  ."
    "id id id id id id id id id st st st"
    "c  c  c  c  c  c  c  c  c  c  c  c"
    "sv sv sv sv sv sv sv sv sv pg pg pg"
    ".  .  .  .  .  .  .  .  .  .  .  ."
    "gr gr gr gr gr gr gr gr gr gr gr gr";
  column-gap: var(--cr-gap);
  padding: calc(var(--nav-h, 72px) + clamp(12px, 2.6vh, 32px)) var(--g-m, 64px) 0;
}
:where(.cr) :where(p, ul, dl, dd, dt, h2, address) { margin: 0; }
:where(.cr) ul { padding: 0; list-style: none; }
.cr :is(p, a, dt, dd, address, h2, li, span) { text-shadow: 0 1px 2px rgba(7, 6, 10, 0.45); }
.cr .fz-btn { text-shadow: none; }

/* every group on one panel (C3): the page's glass, felt more than seen */
.cr__g { position: relative; isolation: isolate; box-sizing: border-box; min-width: 0; padding: var(--cr-pad); }
.cr__g::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: var(--gl-r, 16px); background: var(--gl-tint); border: 1px solid var(--gl-edge);
  box-shadow: inset 0 1px 0 var(--gl-hi), var(--gl-shadow);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.gl-blur .cr__g::before { background: var(--gl-fill); -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); }
}

/* the masthead: the F large on the left; the name and the statement from the second card's edge */
.cr__id { grid-area: id; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-columns: subgrid; column-gap: var(--cr-gap); align-items: center; }
.cr__mark { grid-column: 1 / span 3; height: clamp(96px, 19vh, 188px); }
.cr__idt { grid-column: 4 / -1; display: grid; gap: 12px; align-content: center; padding-left: 22px; }
.cr__name { font: 600 clamp(22px, 2.1vw, 34px)/1 var(--v3-title); font-stretch: 88%; letter-spacing: -0.03em; text-transform: uppercase; }
.cr__statement { font: 400 clamp(15px, 1.12vw, 17.5px)/1.55 var(--v3-body); color: rgba(236, 233, 241, 0.9); max-width: 62ch; text-wrap: balance; }

/* contact by intent: four cards, each a label above and its one way to act at the foot */
.cr__intent { grid-area: c; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cr-gap); margin-top: var(--cr-row); }
.cr__card { display: grid; grid-template-rows: auto 1fr; gap: 12px; min-height: clamp(108px, 15vh, 156px); }
.cr__v { display: grid; gap: 4px; align-content: end; justify-items: start; }
.cr__k { font: 500 10.5px/1.4 var(--v3-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--filament, #c9b6ea); }
.cr__line { font: 500 clamp(16px, 1.3vw, 19px)/1.3 var(--v3-body); letter-spacing: -0.005em; font-variant-numeric: tabular-nums; color: var(--signal, #ece9f1); }
.cr__note { margin-top: 4px; font: 400 13px/1.4 var(--v3-body); color: rgba(236, 233, 241, 0.76); }
.cr__go { min-height: 46px; padding: 0 24px; }
/* contacts behind buttons (W1, BUILD-PLAN-1104 change 21; kit/v3e/contact.js): intent buttons in the kit's mono pill,
   the number or the address put together only at the click; a second line's two quiet links under them. Every one is
   a link to Start without a script. The same pill in the credits, the menu, the Closings, Start, Careers, Privacy and
   Terms */
.fz-cts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fz-ct {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--line-strong, rgba(236, 233, 241, 0.3)); border-radius: 999px; background: rgba(236, 233, 241, 0.03);
  color: var(--signal, #ece9f1); font: 500 10.5px/1 var(--v3-mono, var(--font-mono)); letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 180ms var(--v3-ease, ease), border-color 180ms var(--v3-ease, ease), color 180ms var(--v3-ease, ease), transform 120ms var(--v3-ease, ease);
}
.fz-ct:active { transform: scale(0.97); }
.fz-ct.is-done { border-color: rgba(242, 194, 122, 0.7); color: var(--gold, #f2c27a); }
@media (hover: hover) and (pointer: fine) { .fz-ct:hover { border-color: var(--signal, #ece9f1); background: rgba(236, 233, 241, 0.08); } }
@media (pointer: coarse) { .fz-ct { min-height: 44px; } }
.fz-ct-line2 { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-top: 2px; font: 400 13px/1.4 var(--v3-body, var(--font-body)); letter-spacing: 0; color: rgba(236, 233, 241, 0.76); }
.fz-ct-line2 a { display: inline-flex; align-items: center; min-height: 32px; color: rgba(236, 233, 241, 0.92); text-decoration-line: underline; text-decoration-color: rgba(236, 233, 241, 0.32); text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .fz-ct-line2 a:hover { color: var(--signal, #ece9f1); text-decoration-color: currentColor; } }
/* the address, shown in place (Privacy's Show email; or Copy email when the clipboard refuses) */
.fz-ct-addr { font: 500 clamp(15px, 1.2vw, 18px)/1.3 var(--v3-body, var(--font-body)); color: var(--signal, #ece9f1); text-decoration-line: underline; text-decoration-color: rgba(201, 182, 234, 0.6); text-underline-offset: 4px; overflow-wrap: anywhere; }
/* Talk now: the note, the second line and LinkedIn above, the two pills last, so every card's control sits on the
   cards' one bottom line (W1 review D7) */
.cr__card .fz-cts { margin-top: 6px; }
/* a contact pill beside a primary button (Careers, Terms): the button takes the pill's height and type, the fill keeps
   the order (W1 review D10) */
.xp__act:has(> .fz-ct) > .fz-btn { min-height: 40px; padding: 0 20px; font-size: 10.5px; }
@media (pointer: coarse) { .xp__act:has(> .fz-ct) > .fz-btn { min-height: 44px; } }
.cr__more { display: inline-flex; align-items: center; gap: 10px; padding: 4px 0; font: 500 clamp(16px, 1.3vw, 19px)/1.3 var(--v3-body); color: var(--signal, #ece9f1); text-decoration: none; }
.cr__more::after { content: ''; width: 18px; height: 1px; background: currentColor; transform-origin: left; transition: transform 240ms var(--v3-ease); }

/* the studio, the disciplines, the pages */
.cr__studio { grid-area: st; display: grid; gap: 8px; align-content: start; }
.cr__svc { grid-area: sv; display: grid; gap: 10px; align-content: start; margin-top: var(--cr-row); }
.cr__pages { grid-area: pg; display: grid; gap: 10px; align-content: start; margin-top: var(--cr-row); }
.cr__studio address { font: 400 14px/1.45 var(--v3-body); font-style: normal; color: rgba(236, 233, 241, 0.92); max-width: 34ch; }
.cr__time { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; font: 500 10.5px/1.4 var(--v3-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--filament, #c9b6ea); }
.cr__clock { font: 600 22px/1 var(--v3-title); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--signal, #ece9f1); }
.cr__reply { font: 400 13px/1.45 var(--v3-body); color: rgba(236, 233, 241, 0.8); text-wrap: balance; }
.cr__svc ul { display: grid; grid-template-columns: repeat(4, max-content); justify-content: space-between; gap: 2px 28px; max-width: 920px; }
.cr__pages ul { display: grid; grid-template-columns: repeat(2, max-content); gap: 2px 32px; }
.cr__svc a, .cr__pages a { display: inline-block; padding: 3px 0; font: 400 14.5px/1.45 var(--v3-body); }
.cr__g a:not(.fz-btn) { color: rgba(236, 233, 241, 0.92); text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color 180ms var(--v3-ease), text-decoration-color 180ms var(--v3-ease); }
.cr__more { text-decoration-line: none !important; }

/* the ground: below the horizon, no panel (it is the ground) */
.cr__ground { grid-area: gr; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "legal top"; align-content: center; align-items: center; gap: 4px 32px; padding: 12px 2px 16px; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
.cr__legal { grid-area: legal; }
/* (the site: the prototype note is gone from the ground; the legal line stands alone beside Back to top) */
/* (the site: the contact details are links, tap to call, WhatsApp and mail; the user, 28 Oct 2026) styled as the words
   they were; each number's WhatsApp link in the card's note style beside it (nav.js footer's pattern) */
.xp__contact a, .cr__line > a, .cr__wa, .cr__social { color: inherit; text-decoration: none; }
.cr__wa { margin-left: 10px; font: 400 13px/1.4 var(--v3-body); letter-spacing: 0; color: rgba(236, 233, 241, 0.76); }
/* Talk now's LinkedIn (the user, 28 Oct 2026): one quiet text link in the WhatsApp links' style, on its own line */
.cr__social { font: 400 13px/1.4 var(--v3-body); letter-spacing: 0; color: rgba(236, 233, 241, 0.76); }
.cr__top { grid-area: top; justify-self: end; }
.cr__ground::before { display: none; }
.cr__ground p, .cr__top { font: 500 10px/1.6 var(--v3-mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(236, 233, 241, 0.74); }
.cr__ground a { color: rgba(236, 233, 241, 0.86); }
.cr__top { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; text-decoration-line: none !important; }
.cr__top::before { content: ''; width: 7px; height: 7px; border-left: 1px solid currentColor; border-top: 1px solid currentColor; transform: translateY(2px) rotate(45deg); }
.cr__hz { display: none; }

/* ============================================================ 4 · the Fezey F: three lines of light, then the bars
   the official icon mark's proportions (Fezey Logo Files, measured from its PNG): three left-aligned bars 1 : 0.7335 :
   0.3563 long; each square at the top left, a quarter round at the bottom left and a half round at the right */
.fm { position: relative; aspect-ratio: 1681 / 1736; width: auto; justify-self: start; }
.fm i { position: absolute; left: 0; display: block; }
.fm__bar { background: #fff; }
.fm__bar--1 { --i: 0; top: 0.12%; height: 24.42%; width: 100%; border-radius: 0 12.61% 12.61% 12.61% / 0 50% 50% 50%; }
.fm__bar--2 { --i: 1; top: 38.83%; height: 23.5%; width: 73.35%; border-radius: 0 16.55% 16.55% 16.55% / 0 50% 50% 50%; }
.fm__bar--3 { --i: 2; top: 75.23%; height: 24.71%; width: 35.63%; border-radius: 0 35.81% 35.81% 35.81% / 0 50% 50% 50%; }
.fm__ln { height: 2px; margin-top: -1px; border-radius: 2px; background: linear-gradient(90deg, #d8c4ff, #fff 24%, #fff); box-shadow: 0 0 6px 1px rgba(214, 192, 255, 0.85), 0 0 22px 4px rgba(139, 69, 208, 0.7); }
.fm__ln--1 { --i: 0; top: 12.33%; width: 100%; }
.fm__ln--2 { --i: 1; top: 50.58%; width: 73.35%; }
.fm__ln--3 { --i: 2; top: 87.59%; width: 35.63%; }
.fm__glow { left: -60% !important; top: -50%; width: 220%; height: 200%; background: radial-gradient(closest-side, rgba(139, 69, 208, 0.4), rgba(102, 45, 145, 0.16) 55%, rgba(102, 45, 145, 0) 100%); }
/* the assembly (closing.js sets .is-on once the masthead has risen into the frame): each line of light stretches from
   a point at the left (600 ms, 110 ms apart); each bar opens out of its line (760 ms, from 420 ms); the lines fade into
   the bars; a violet glow settles behind. Transform and opacity only, so it runs on the compositor while the page
   scrolls (a clip-path here repainted the lines' glow on every frame). Out: the mark fades (260 ms) and resets unseen */
html:not(.v3-reduced):not(.v3-nogl) .fm { opacity: 0; transition: opacity 260ms var(--v3-ease); }
html:not(.v3-reduced):not(.v3-nogl) .fm.is-on { opacity: 1; transition-duration: 0s; }
html:not(.v3-reduced):not(.v3-nogl) .fm__ln { transform: scaleX(0.02); transform-origin: 0 50%; opacity: 0; transition: transform 0s linear 280ms, opacity 0s linear 280ms; }
html:not(.v3-reduced):not(.v3-nogl) .fm.is-on .fm__ln { transform: none; opacity: 0; animation: fm-ln 1500ms var(--v3-ease) calc(var(--i) * 110ms) both; transition: none; }
@keyframes fm-ln { 0% { opacity: 0; transform: scaleX(0.02); } 6% { opacity: 1; } 40% { transform: none; opacity: 1; } 62% { opacity: 1; } 100% { transform: none; opacity: 0; } }
html:not(.v3-reduced):not(.v3-nogl) .fm__bar { transform: scaleY(0.05); opacity: 0; transition: transform 0s linear 280ms, opacity 0s linear 280ms; }
html:not(.v3-reduced):not(.v3-nogl) .fm.is-on .fm__bar { transform: none; opacity: 1; transition: transform 760ms var(--v3-ease) calc(420ms + var(--i) * 110ms), opacity 160ms var(--v3-ease) calc(420ms + var(--i) * 110ms); }
html:not(.v3-reduced):not(.v3-nogl) .fm__glow { opacity: 0; transition: opacity 0s linear 280ms; }
html:not(.v3-reduced):not(.v3-nogl) .fm.is-on .fm__glow { opacity: 1; transition: opacity 1100ms var(--v3-ease) 420ms; }
/* assembled (1.9 s on): the lines go, so the mark is one still layer while the credits scroll */
html:not(.v3-reduced):not(.v3-nogl) .fm.is-done .fm__ln { visibility: hidden; animation: none; }

/* ============================================================ 5 · the credits' glass rises out of the colour (C5)
   a group in: its panel 520 ms (opacity, 18 px and 0.985 -> 1), its words 80 ms after it (opacity, 12 px, 560 ms, 60 ms
   apart); the cards 70 ms apart along their row. Out (below the frame again): words 280 ms, then the panel 260 ms */
html:not(.v3-reduced):not(.v3-nogl) .cr__g::before { opacity: 0; transform: translateY(18px) scale(0.985); transition: opacity 260ms var(--v3-ease) 120ms, transform 260ms var(--v3-ease) 120ms, border-color 200ms var(--v3-ease); }
html:not(.v3-reduced):not(.v3-nogl) .cr__g.is-in::before { opacity: 1; transform: none; transition: opacity 520ms var(--v3-ease) calc(var(--cd, 0) * 1ms), transform 520ms var(--v3-ease) calc(var(--cd, 0) * 1ms), border-color 200ms var(--v3-ease); }
html:not(.v3-reduced):not(.v3-nogl) :is(.cr__g > :not(.fm, .cr__idt), .cr__idt > *) { opacity: 0; transform: translateY(12px); transition: opacity 280ms var(--v3-ease), transform 280ms var(--v3-ease); }
html:not(.v3-reduced):not(.v3-nogl) .cr__g.is-in :is(.cr__g > :not(.fm, .cr__idt), .cr__idt > *) { opacity: 1; transform: none; transition-duration: 560ms; transition-delay: calc((var(--cd, 0) + 80 + var(--ci, 0) * 60) * 1ms); }
.cr__g > :nth-child(2), .cr__statement { --ci: 1; }
.cr__g > :nth-child(3) { --ci: 2; }
.cr__g > :nth-child(4) { --ci: 3; }
.cr__card:nth-child(2) { --cd: 70; }
.cr__card:nth-child(3) { --cd: 140; }
.cr__card:nth-child(4) { --cd: 210; }
.cr__svc { --cd: 70; }
.cr__pages { --cd: 140; }

/* ============================================================ 6 · hover (fine pointers only): quiet */
@media (hover: hover) and (pointer: fine) {
  .cr__card:hover::before { border-color: rgba(255, 255, 255, 0.16); }
  .cr__g a:not(.fz-btn):hover { color: var(--filament, #c9b6ea); text-decoration-color: rgba(201, 182, 234, 0.6); }
  .cr__more:hover::after { transform: scaleX(1.6); }
  .cr__top:hover { color: var(--signal, #ece9f1); }
}

/* ============================================================ 7 · phones: their own composition (one column) */
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .cr__in {
    --cr-gap: 12px;
    --cr-row: 12px;
    --cr-pad: 18px 20px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto auto auto minmax(24px, 1fr) minmax(calc((1 - var(--hz, 0.84)) * 100svh), auto);
    grid-template-areas: "." "id" "c" "st" "sv" "pg" "." "gr";
    padding: calc(var(--nav-h, 60px) + 16px) var(--g-m, 20px) 0;
  }
  .cr__id { grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 16px; align-items: end; padding: 20px; }
  .cr__mark { grid-column: 1; grid-row: 1; height: 60px; }
  .cr__idt { display: contents; }
  .cr__name { grid-column: 2; grid-row: 1; align-self: end; font-size: 26px; }
  .cr__statement { grid-column: 1 / -1; font-size: 15.5px; }
  .cr__intent { grid-template-columns: minmax(0, 1fr); gap: var(--cr-gap); }
  .cr__card { min-height: 0; grid-template-rows: auto auto; gap: 12px; }
  .cr__studio, .cr__svc, .cr__pages { margin-top: var(--cr-gap); }
  .cr__svc ul { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .cr__pages ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr__ground { grid-template-columns: minmax(0, 1fr); grid-template-areas: "legal" "top"; gap: 6px; padding: 16px 0 20px; padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)); }
  .cr__top { justify-self: start; }
  /* (phones: the credits' panels are tint-only; eight blurred backdrops scrolling at once cost a 4x-throttled phone
     about 12 ms a frame at p95 in tools/perf.py's scroll, over a ground smooth enough that the blur shows nothing) */
  html.gl-blur .cr__g::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--gl-tint); }
  .cr__card:nth-child(n) { --cd: 0; }
  .cr__svc, .cr__pages { --cd: 0; }
}

/* ============================================================ 7b · the phone motion tier (X13, css/base.css §8b): each
   group rises out of the colour as one piece (one translate and opacity on the group, 18 px; its panel and words stand
   in it; the F still assembles from its lines of light); where its panel is blurred (a desktop-shaped phone), the blur
   is the group's own */
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .cr__g { opacity: 0; translate: 0 18px; transition: opacity calc(260ms * var(--rv-slow, 1)) var(--v3-ease), translate calc(260ms * var(--rv-slow, 1)) var(--v3-ease); }
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .cr__g.is-in { opacity: 1; translate: none; transition-duration: calc(420ms * var(--rv-slow, 1)); }
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .cr__g::before { opacity: 1; transform: none; transition: border-color 200ms var(--v3-ease); }
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .cr__g :is(.cr__g > :not(.fm, .cr__idt), .cr__idt > *) { opacity: 1; transform: none; transition: none; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.rv-one.gl-blur:not(.v3-reduced):not(.v3-nogl) body .cr__g:not(.cr__ground) { border-radius: var(--gl-r, 16px); -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); }
  html.rv-one.gl-blur:not(.v3-reduced):not(.v3-nogl) body .cr__g::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  html.rv-one.gl-blur:not(.v3-reduced):not(.v3-nogl) body .cr__g:not(.cr__ground) { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ============================================================ 8 · reduced motion and no WebGL: the composed end state,
   still. The credits carry the shifted colour themselves (from clear at their top, so there is no edge), with the line
   of light on their horizon; the F is whole */
.v3-reduced .e-sec--cta, .v3-nogl .e-sec--cta { justify-items: center; text-align: center; align-content: center; }
.v3-reduced .e-sec--cta .xp, .v3-nogl .e-sec--cta .xp { justify-items: center; max-width: 820px !important; }
.v3-reduced .e-sec--cta :is(.xp__act, .xp__contact), .v3-nogl .e-sec--cta :is(.xp__act, .xp__contact) { justify-content: center; }
.v3-reduced .e-sec--cta .xp__reply, .v3-nogl .e-sec--cta .xp__reply { flex-basis: 100%; max-width: none; }
.v3-reduced :is(.shift, .shift-grade), .v3-nogl :is(.shift, .shift-grade) { display: none; }
.v3-reduced .cr, .v3-nogl .cr {
  background:
    radial-gradient(70% 34svh at 50% calc(100% - (1 - var(--hz, 0.86)) * 100svh), rgba(139, 69, 208, 0.42), rgba(102, 45, 145, 0.16) 55%, rgba(102, 45, 145, 0) 100%),
    linear-gradient(180deg, rgba(11, 6, 18, 0) 0, rgba(11, 6, 18, 0.9) min(34svh, 300px), #110819 45%, #2a1241 calc(100% - (1 - var(--hz, 0.86)) * 100svh), #0b0612 calc(100% - (1 - var(--hz, 0.86)) * 100svh + 2px), #0a0510 100%);
}
.v3-reduced .cr__in, .v3-nogl .cr__in { padding-top: max(28svh, calc(var(--nav-h, 72px) + 16px)); }
.v3-reduced .cr__hz, .v3-nogl .cr__hz { display: block; position: absolute; left: calc(-1 * var(--g-m, 64px)); right: calc(-1 * var(--g-m, 64px)); top: -0.75px; height: 1.5px; background: linear-gradient(90deg, rgba(214, 192, 255, 0) 0, #e6d8ff 16%, #fbf8ff 50%, #e6d8ff 84%, rgba(214, 192, 255, 0) 100%); box-shadow: 0 0 14px 2px rgba(139, 69, 208, 0.55); }
.v3-reduced .fm__ln, .v3-nogl .fm__ln { display: none; }
.v3-reduced .fm__glow, .v3-nogl .fm__glow { opacity: 0.85; }

/* ==========================================================================
   7 · the site shell (the prototypes' kit/v3e/site.css, PORT-SITE): view transitions, the veil, the header's
   current dot and chapter index, the menu drawer, flow sections and reading panels, quiet pages, forms, chips,
   filters, tabs, the credits generalised
   ========================================================================== */
/* FEZEY V12 prototypes · kit/v3e/site.css: the site in V3e's language (PLAN-SITE A1, A2, B1). Every page links, in this
   order: kit/fonts.css, kit/tokens.css, kit/base.css, home-v3e/css/base.css (V3e's text system, unchanged), this file,
   then its own CSS. V3e's Closing, colour shift and credits come in by @import from home-v3e/css/act4.css, unchanged, so
   they are the approved homepage's by construction; this file only generalises them.

   0 tokens  1 view transitions  2 the veil  3 ?bare / ?still  4 the header (the current dot, Work's chapter index)
   5 the menu drawer  6 flow sections and reading panels  7 quiet pages (stills, reading, 404)  8 forms, chips,
   filters, tabs  9 the credits, generalised  10 reduced motion
   Motion: transform, opacity and clip-path only; the kit's --ease-out / --ease-in-out / --ease-drawer; never ease-in,
   scale(0), transition: all or an animated blur. Dark only. */
/* (act4.css is §6 above) */

/* ============================================================ 0 · tokens */
:root {
  --dr-w: min(64vw, 980px);                   /* the drawer's width (desktop) */
  --gl-read: rgba(14, 10, 22, 0.72);           /* the reading glass: flow sections, the drawer */
  --gl-read-tint: rgba(14, 10, 22, 0.86);      /* the same without a backdrop blur */
  --fl-gap: clamp(20px, 3.2vh, 36px);
  --rd-measure: 68ch;                          /* reading, not captions (A8, A11) */
}

/* ============================================================ 1 · page-to-page: cross-document view transitions (A1.4)
   both pages opt in; the header never moves (its three named parts land on themselves); one carried element per
   navigation (fz-share) flies to its place on the next page, whose [data-accept] names it before the first paint
   (kit/v3e/transition.js, the stamped head script) */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.fz-nav--v3e .fz-nav__logo { view-transition-name: fz-lockup; }
.fz-nav--v3e .fz-nav__start { view-transition-name: fz-pill; }
.fz-nav--v3e .fz-menu-btn { view-transition-name: fz-menu; }
html[data-carry="tile"] [data-accept~="tile"], html[data-carry="object"] [data-accept~="object"],
html[data-carry="card"] [data-accept~="card"], html[data-carry="pill"] [data-accept~="pill"],
html[data-carry="cover"] [data-accept~="cover"] { view-transition-name: fz-share; }
/* the night under both pages is the same dark: the root's cross-fade is quick and quiet; the carry travels */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 280ms; animation-timing-function: var(--ease-out); }
::view-transition-group(fz-share) { animation-duration: 520ms; animation-timing-function: var(--ease-in-out); }
::view-transition-old(fz-share), ::view-transition-new(fz-share) { animation-duration: 520ms; animation-timing-function: var(--ease-in-out); }
::view-transition-group(fz-lockup), ::view-transition-group(fz-pill), ::view-transition-group(fz-menu) { animation-duration: 280ms; }

/* ============================================================ 2 · the veil: --void between the world and the words.
   Arriving it starts closed (html.fz-arrive, before the first paint) and opens in 520 ms on the world's first frame;
   leaving, it rises in 280 ms while the words leave by the grammar's exits (up and away); a chapter jump dips it
   (240 ms down, 320 ms up). z-index 1, before <main> (also 1): above the canvas, the shift and a quiet page's still,
   under the words, the credits and the header */
.fz-veil { position: fixed; inset: 0; z-index: 1; background: var(--void); opacity: 0; pointer-events: none; transition: opacity 520ms var(--ease-out); }
@supports (height: 100lvh) { .fz-veil { bottom: auto; height: 100lvh; } }
html.fz-arrive .fz-veil { opacity: 1; transition: none; }
/* the veil is the one reveal: the world appears at once under it (V3e's own 1200 ms canvas fade would stack on it) */
html:not(.v3-reduced) #fz-stage { transition: none; }
html.fz-leaving .fz-veil { opacity: 1; transition: opacity 280ms var(--ease-out); }
html.fz-dip .fz-veil { opacity: 1; transition: opacity 240ms var(--ease-out); }
html:not(.fz-dip):not(.fz-leaving):not(.fz-arrive) .fz-veil { transition-duration: 320ms; }
/* a safety net: if no script ever opens it, the veil opens on its own after 3 s */
html.fz-arrive .fz-veil { animation: fz-veil-open 520ms var(--ease-out) 3s forwards; }
@keyframes fz-veil-open { to { opacity: 0; } }
/* leaving: every word on screen goes up and away (280 ms); the carried element and its cluster stay for the flight */
html.fz-leaving :is(.xp, .fl, .cr__g, .fz-ch):not(:has(.fz-carrying)):not(.fz-carrying) {
  opacity: 0 !important; translate: 0 -6px;
  transition: opacity 280ms var(--ease-out), translate 280ms var(--ease-out) !important;
}
html.fz-leaving .xp-lines { opacity: 0; transition: opacity 200ms var(--ease-out); }
/* the cluster that holds the carried element: its glass and every other part leave; the carried element (and the
   wrappers that hold it) stays for its flight */
html.fz-leaving :is(.xp, .fl, .cr__g):has(.fz-carrying)::before { opacity: 0 !important; transition: opacity 280ms var(--ease-out) !important; }
html.fz-leaving :is(.xp, .fl, .cr__g):has(.fz-carrying) :not(:has(.fz-carrying)):not(.fz-carrying):not(.fz-carrying *) { opacity: 0 !important; transition: opacity 280ms var(--ease-out) !important; }

/* ============================================================ 3 · ?bare and ?still (tools/stills.py): the world only */
html.fz-bare :is(main, .fz-nav, .fz-skip, .cr, .xp-lines, .fz-veil, .fz-ch, .shift, .shift-grade, .fz-still, .xp, [data-story], .fz-grain) { visibility: hidden !important; }
html.fz-bare #fz-stage { opacity: 1 !important; transition: none !important; }

/* ============================================================ 4 · the header (A1.1): V3e's (the kit's .fz-nav); the
   current page is a filament dot under its link (a page below one: the same dot on its section's link) */
.fz-nav--v3e .fz-nav__links a { position: relative; }
.fz-nav--v3e .fz-nav__links a:is([aria-current], .is-section)::before { position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; }
.fz-nav--v3e .fz-nav__links { transition: opacity 240ms var(--ease-out), visibility 0s linear 0s; }
html.fz-menu-open .fz-nav--v3e .fz-menu-btn { opacity: 0; transition: opacity 160ms var(--ease-out); }
.fz-nav--v3e .fz-menu-btn { transition: opacity 240ms var(--ease-out); }

/* the chapter index, any page (chrome.js, bootPage({ chapters })): after the hero it takes the header's centre (the
   main links step aside), the current chapter lit; on phones a pill at the bottom; it steps aside in the Closing.
   Markup: <nav class="fz-ch fz-mono" aria-label="Chapters"><ol><li><a href="#services"><span class="fz-ch__n">01</span>
   <span class="fz-ch__t">What we do</span></a></li>…</ol></nav> (Work's plain "01 · Why" links still work). With five
   or more chapters a desktop under 1500 px shows each chapter's number and the current one's name (the other names
   stay in the accessibility tree); a phone's pill scrolls sideways, the current chapter kept in view */
.fz-ch { position: fixed; z-index: calc(var(--z-nav, 50) + 1); visibility: hidden; opacity: 0; transition: opacity 240ms var(--ease-out), visibility 0s linear 240ms; }
.fz-ch ol { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); margin: 0; padding: 0; list-style: none; }
.fz-ch a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--dim); text-decoration: none; white-space: nowrap; transition: color 180ms var(--ease-out); }
.fz-ch a[aria-current] { color: var(--signal); }
.fz-ch a[aria-current]::before { content: ''; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--filament); }
html.fz-ch-on .fz-ch { visibility: visible; opacity: 1; transition: opacity 320ms var(--ease-out), visibility 0s; }
@media (min-width: 900px) {
  .fz-ch { top: 0; left: 50%; height: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); display: flex; align-items: center; transform: translateX(-50%); }
  html.fz-ch-on .fz-nav--v3e .fz-nav__links { opacity: 0; visibility: hidden; transition: opacity 240ms var(--ease-out), visibility 0s linear 240ms; }
}
@media (max-width: 899px) {
  .fz-ch { left: 50%; bottom: max(14px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); padding: 0 18px; border-radius: var(--r-pill); background: var(--gl-read-tint); border: 1px solid var(--gl-edge); box-shadow: inset 0 1px 0 var(--gl-hi), 0 12px 40px rgba(0, 0, 0, 0.35); }
}
@media (hover: hover) and (pointer: fine) { .fz-ch a:hover { color: var(--signal); } }
.fz-ch__n { color: var(--faint); }
.fz-ch__n + .fz-ch__t { margin-left: 0.6em; }
.fz-ch a[aria-current] .fz-ch__n { color: var(--filament); }
/* W1 (change 6): chrome.js fits the desktop index between the logo and "Start something" at every width (and slides
   it off the centre only as far as it must): every name; the numbers with the current chapter's name (.fz-ch--cur);
   or the numbers alone (.fz-ch--num). The hidden names stay in the accessibility tree */
@media (min-width: 900px) {
  .fz-ch { width: max-content; }
  .fz-ch:is(.fz-ch--cur, .fz-ch--num) a:not([aria-current]) .fz-ch__t,
  .fz-ch.fz-ch--num .fz-ch__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fz-ch:is(.fz-ch--cur, .fz-ch--num) a:not([aria-current]) .fz-ch__n { color: var(--dim); }
  .fz-ch.fz-ch--num .fz-ch__n + .fz-ch__t { margin-left: 0; }
}
@media (max-width: 899px) {
  .fz-ch { max-width: calc(100vw - 2 * var(--g-m, 20px)); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .fz-ch::-webkit-scrollbar { display: none; }
  .fz-ch ol { width: max-content; }
}

/* the service button (Part D, D1.8): a filled pill for "Explore {name}" (the hub's stages, Studio's rows, Work's proof
   cards, the menu's "All capabilities"): 48 px tall, the filament ground under void text (≈ 11:1), mono 12 px, the
   arrow drawn here; distinct from the white "Start something". <a class="fz-btn fz-btn--svc" href="…">Explore
   Websites</a> (with .fz-btn: kit/base.css) */
.fz-btn--svc { min-height: 48px; padding: 0 22px; gap: 12px; background: var(--filament); color: var(--void); border-color: transparent; font-size: 12px; letter-spacing: 0.12em; }
.fz-btn--svc::after { content: ''; flex: none; width: 15px; height: 11px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 11' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M0 5.5h13.2M8.6 1l4.6 4.5-4.6 4.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 11' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M0 5.5h13.2M8.6 1l4.6 4.5-4.6 4.5'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 160ms var(--ease-out); }
.fz-btn--svc:active { transform: scale(0.97); transition-duration: 120ms; }
.fz-btn--svc:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .fz-btn--svc:hover { background: #dacef1; }
  .fz-btn--svc:hover::after { transform: translateX(3px); }
}

/* ============================================================ 5 · the menu drawer (A1.2): a modal <dialog> over the
   living page. The dialog fills the frame and is clear; the page behind is veiled at 0.6 (::backdrop) and its world
   holds; the bar repeats the header's row (the lockup where it was, Close on Menu's exact box); the panel is the
   reading glass (0.72). Scroll stays in the drawer (overscroll-behavior on the dialog, its backdrop and its list). */
dialog.fz-dr {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--signal); overflow: hidden; overscroll-behavior: contain;
}
dialog.fz-dr:modal { overscroll-behavior: contain; }
dialog.fz-dr::backdrop { background: rgba(7, 6, 10, 0.6); opacity: 0; overflow: hidden; overscroll-behavior: contain; transition: opacity 240ms var(--ease-out); }
dialog.fz-dr.is-open::backdrop { opacity: 1; transition-duration: 420ms; }
.fz-dr__bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center;
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--gutter-r) 0 var(--gutter-l);
  gap: clamp(12px, 2.4vw, 32px); pointer-events: none;
}
.fz-dr__bar > * { pointer-events: auto; }
.fz-dr__bar .fz-nav__logo { margin-right: auto; view-transition-name: none; }
.fz-dr__close { opacity: 0; transition: opacity 160ms var(--ease-out); }
dialog.fz-dr.is-open .fz-dr__close { opacity: 1; transition-duration: 240ms; }

/* the panel: desktop, fixed right, in from translateX(6%) (420 ms, the drawer curve); out 240 ms. The blur is the
   panel's own (its opacity animates; a blur on a child would see nothing of the page while it fades) */
.fz-dr__panel {
  position: absolute; top: 10px; right: 10px; bottom: 10px; z-index: 1; width: var(--dr-w); display: flex; flex-direction: column;
  border-radius: var(--r-l); background: var(--gl-read-tint); border: 1px solid var(--gl-edge);
  box-shadow: inset 0 1px 0 var(--gl-hi), 0 30px 90px rgba(0, 0, 0, 0.5);
  opacity: 0; transform: translate3d(6%, 0, 0);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.gl-blur .fz-dr__panel { background: var(--gl-read); -webkit-backdrop-filter: blur(22px) saturate(120%); backdrop-filter: blur(22px) saturate(120%); }
}
dialog.fz-dr.is-open .fz-dr__panel { opacity: 1; transform: none; transition: opacity 420ms var(--ease-drawer), transform 420ms var(--ease-drawer); }
.fz-dr__grab { display: none; }
.fz-dr__scroll {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-color: rgba(236, 233, 241, 0.2) transparent;
  margin-top: calc(var(--nav-h) - 10px); padding: 14px clamp(28px, 3.4vw, 48px) 40px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 20px), transparent 100%);
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "go" "do" "talk"; row-gap: clamp(30px, 5vh, 48px); align-content: start;
}
.fz-dr__go { grid-area: go; }
.fz-dr__do { grid-area: do; }
.fz-dr__talk { grid-area: talk; }
/* the items arrive 40 ms apart; they leave together */
:is(.fz-dr__page, .fz-dr__talk, .fz-dr__do) { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
dialog.fz-dr.is-open :is(.fz-dr__page, .fz-dr__talk, .fz-dr__do) { opacity: 1; transform: none; transition-duration: 420ms; transition-delay: calc(90ms + var(--i, 0) * 40ms); }

/* destinations: Bricolage 600, uppercase, min(7.2vh, 5.2vw, 76px); each with its note beside it */
.fz-dr__pages { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(6px, 1.3vh, 14px); }
.fz-dr__page { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 18px; row-gap: 4px; }
.fz-dr__big {
  font: 600 min(7.2vh, 5.2vw, 76px)/0.92 var(--font-title); font-stretch: 88%; letter-spacing: -0.035em; text-transform: uppercase;
  color: var(--signal); text-decoration: none; white-space: nowrap; transition: color 180ms var(--ease-out);
}
.fz-dr__big[aria-current] { color: var(--filament); }
.fz-dr__page--go .fz-dr__big { color: var(--accent); }
.fz-dr__note { font: 400 13.5px/1.4 var(--font-body); color: rgba(236, 233, 241, 0.72); max-width: 34ch; }
.fz-dr__sub { display: flex; gap: 4px 16px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; flex-basis: 100%; }
.fz-dr__sub a { display: inline-flex; align-items: center; min-height: 32px; color: var(--dim); text-decoration: none; transition: color 180ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .fz-dr__pages:has(.fz-dr__big:hover) .fz-dr__big:not(:hover) { color: var(--dim); }
  .fz-dr__sub a:hover { color: var(--signal); }
}

/* the labels of the two lower columns */
.fz-dr__k { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; font: 500 10.5px/1.4 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--filament); }
.fz-dr__k::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); }

/* what we do (PLAN-SITE-D D1.12): the eight in walk order as full-row links (the name, its note, an arrow that moves
   4 px on hover) beside one preview, the hovered or focused discipline's object (crossfade 180 ms; at rest the current
   page's discipline, or the first); "All capabilities" a service button. Phones: one column of rows, each with its
   object as a 48 px thumbnail, no preview. Reduced motion: no crossfade, no arrow movement */
.fz-dr__svc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr); column-gap: clamp(20px, 2.6vw, 36px); align-items: start; }
.fz-dr__rows { margin: 0; padding: 0; list-style: none; display: grid; border-top: 1px solid var(--line); }
.fz-dr__row {
  display: grid; grid-template-columns: minmax(0, 1fr) 22px; align-items: center; column-gap: 16px; min-height: 60px;
  padding: 9px 4px 9px 0; border-bottom: 1px solid var(--line); color: var(--signal); text-decoration: none;
  transition: color 160ms var(--ease-out);
}
.fz-dr__thumb { display: none; }
.fz-dr__rt { display: grid; gap: 3px; min-width: 0; }
.fz-dr__rn { font: 600 clamp(21px, 1.9vw, 28px)/1 var(--font-title); font-stretch: 88%; letter-spacing: -0.015em; text-transform: uppercase; text-wrap: balance; }
.fz-dr__rl { font: 400 14px/1.35 var(--font-body); color: rgba(236, 233, 241, 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fz-dr__ra { justify-self: end; width: 18px; height: 13px; background: var(--filament); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M0 6.5h16M10.6 1.2l5.4 5.3-5.4 5.3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M0 6.5h16M10.6 1.2l5.4 5.3-5.4 5.3'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 160ms var(--ease-out); }
.fz-dr__row[aria-current] .fz-dr__rn { color: var(--filament); }
.fz-dr__row:focus-visible { outline: 2px solid var(--filament); outline-offset: -2px; border-radius: 8px; }
@media (hover: hover) and (pointer: fine) {
  .fz-dr__rows:has(.fz-dr__row:hover) .fz-dr__row:not(:hover) { color: var(--dim); }
  .fz-dr__row:hover .fz-dr__ra { transform: translateX(4px); }
}
.fz-dr__row:focus-visible .fz-dr__ra { transform: translateX(4px); }
.fz-dr__preview { position: sticky; top: 0; margin: 0; display: grid; gap: 10px; }
.fz-dr__preview::before { content: ''; grid-area: 1 / 1; aspect-ratio: 4 / 3; border-radius: 14px; background: #0b0a10; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.fz-dr__pimg { grid-area: 1 / 1; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 14px; object-fit: cover; opacity: 0; transition: opacity 180ms var(--ease-out); }
.fz-dr__pimg.is-on { opacity: 1; }
.fz-dr__pname { font: 500 10.5px/1.4 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.fz-dr__all { margin-top: 18px; }

/* talk to us */
/* desktop: three columns (write and call · the studio · careers), the label over them */
.fz-dr__talk { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.8fr); column-gap: 28px; row-gap: 10px; align-content: start; align-items: start; }
.fz-dr__talk > .fz-dr__k { grid-column: 1 / -1; }
.fz-dr__talk > .fz-dr__pills { grid-column: 1; grid-row: 2; }
.fz-dr__talk > .fz-ct-line2 { grid-column: 1; grid-row: 3; }
/* "WhatsApp and calls" (the approved note, KEPT) under the second line, then the reply time */
.fz-dr__talk > .fz-dr__calls { grid-column: 1; grid-row: 4; }
.fz-dr__talk > .fz-dr__reply { grid-column: 1; grid-row: 5; }
.fz-dr__talk > .fz-dr__office { grid-column: 2; grid-row: 2 / span 2; }
.fz-dr__talk > .fz-dr__time { grid-column: 2; grid-row: 4; }
.fz-dr__talk > .fz-dr__more:not(.fz-dr__more--quiet) { grid-column: 3; grid-row: 2; }
.fz-dr__talk > .fz-dr__more--quiet { grid-column: 3; grid-row: 3; }
/* the drawer's contacts two by two: the talk pair, then the write pair (W1, change 21) */
.fz-dr__pills { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; margin: 0 0 4px; padding: 0; list-style: none; }
.fz-dr__pills .fz-ct { width: 100%; }
.fz-dr__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font: 500 16px/1.35 var(--font-body); font-variant-numeric: tabular-nums; }
.fz-dr__reply { font: 400 13.5px/1.45 var(--font-body); color: rgba(236, 233, 241, 0.78); }
.fz-dr__office { font: 400 13.5px/1.45 var(--font-body); font-style: normal; color: rgba(236, 233, 241, 0.86); max-width: 36ch; }
.fz-dr__time { display: flex; align-items: baseline; gap: 10px; color: var(--filament); }
.fz-dr__clock { font: 600 20px/1 var(--font-title); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--signal); text-transform: none; }
.fz-dr__more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.fz-dr__more a { display: inline-flex; align-items: center; min-height: 32px; font: 500 16px/1.3 var(--font-body); color: var(--signal); text-decoration-line: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color 180ms var(--ease-out), text-decoration-color 180ms var(--ease-out); }
.fz-dr__more a[aria-current] { color: var(--filament); }
.fz-dr__more--quiet a { font-size: 13.5px; color: rgba(236, 233, 241, 0.72); }
@media (hover: hover) and (pointer: fine) {
  .fz-dr__more a:hover { color: var(--filament); text-decoration-color: rgba(201, 182, 234, 0.6); }
}
.fz-dr__start { display: none; }

/* phones: a sheet from the bottom, under the header's row (where Close stands on Menu's box), its own scroll, rows of
   56 px or more, the tiles in two columns, Email / WhatsApp / Call, Start something sticky in the thumb's zone */
@media (max-width: 767px) {
  .fz-dr__panel {
    top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); right: 0; bottom: 0; left: 0; width: auto;
    border-radius: 22px 22px 0 0; border-bottom: 0;
    opacity: 1; transform: translate3d(0, 100%, 0);
    transition: transform 240ms var(--ease-out);
  }
  dialog.fz-dr.is-open .fz-dr__panel { transform: none; transition: transform 420ms var(--ease-drawer); }
  /* dragged by its grab bar: chrome.js moves the panel itself (no transition while the finger leads) */
  dialog.fz-dr.is-drag .fz-dr__panel { transition: none; }
  .fz-dr__grab { display: block; position: absolute; top: 0; left: 50%; z-index: 2; width: 96px; height: 28px; margin-left: -48px; touch-action: none; cursor: grab; }
  .fz-dr__grab::before { content: ''; position: absolute; left: 50%; top: 10px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(236, 233, 241, 0.32); }
  .fz-dr__scroll {
    margin-top: 0; padding: 30px 20px calc(96px + env(safe-area-inset-bottom, 0px));
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "go" "do" "talk"; row-gap: 32px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24px, #000 100%); mask-image: linear-gradient(180deg, transparent 0, #000 24px, #000 100%);
  }
  .fz-dr__pages { gap: 0; }
  .fz-dr__page { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .fz-dr__sub { flex-basis: auto; margin-top: 2px; }
  .fz-dr__big { font-size: clamp(28px, 8.4vw, 38px); }
  .fz-dr__note { font-size: 13px; }
  .fz-dr__sub a { min-height: 36px; }
  .fz-dr__pills { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
  .fz-dr__pill { min-height: 44px; padding: 0 18px; }
  .fz-dr__svc { grid-template-columns: minmax(0, 1fr); }
  .fz-dr__preview { display: none; }
  .fz-dr__row { grid-template-columns: 48px minmax(0, 1fr) 18px; column-gap: 14px; min-height: 60px; padding: 8px 2px 8px 0; }
  .fz-dr__thumb { display: block; width: 48px; height: 36px; border-radius: 6px; object-fit: cover; background: #0b0a10; }
  .fz-dr__rn { font-size: 19px; }
  .fz-dr__rl { font-size: 13px; }
  /* one column on a phone, in the page's order */
  .fz-dr__talk { grid-template-columns: minmax(0, 1fr); }
  .fz-dr__talk > * { grid-column: 1 !important; grid-row: auto !important; }
  .fz-dr__office { padding-top: 10px; border-top: 1px solid var(--line); }
  .fz-dr__start {
    display: flex; position: absolute; left: 20px; right: 20px; bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 2; min-height: 52px;
    box-shadow: 0 -18px 30px 10px rgba(14, 10, 22, 0.85);
  }
}

/* ============================================================ 5b · clusters shared with the homepage's acts
   (home-v3e/css/act1.css, generalised): a hero cluster's rhythm; an object's callout with its counter (01 / 08) beside
   its name, one row less in the band (V3e's walk): <div class="xp xp--counted" data-story="…"><p class="xp__eb">06 /
   08</p><p class="xp__h3">Websites</p>…</div> */
.xp[data-story="hero"] { gap: 18px; }
.xp.xp--counted { grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; }
.xp.xp--counted > * { grid-column: 1 / -1; }
.xp.xp--counted > .xp__eb { grid-column: 2; grid-row: 1; align-self: start; margin-top: 3px; color: rgba(236, 233, 241, 0.94); }
.xp.xp--counted > .xp__h3 { grid-column: 1; grid-row: 1; max-width: 16ch; }
.xp.xp--counted .xp__body { max-width: var(--m-body); }
html[data-layout="port"] .xp.xp--counted > .xp__h3 { font-size: 24px; line-height: 0.98; }

/* ============================================================ 6 · flow sections (A2): ordinary document flow for long
   text (FAQs, forms, articles, legal, tool lists). <section class="e-sec fl-sec" data-v3x="faq" data-flow>; each
   panel (.fl, on the reading glass .gl--read) rises as it comes up the frame (page.js: an IntersectionObserver, V3e's
   credits pattern) and sinks back when it leaves below; the world rests at the section's still, exposure lowered */
.fl-sec { position: relative; z-index: 1; display: grid; justify-items: start; gap: var(--fl-gap); padding: clamp(96px, 16vh, 168px) var(--g-m, max(48px, 5vw)); }
/* a flow section after a film section (Part D, R6): its first panel comes up the frame one lead-in after the film's
   track ends (--fz-flow-lead, screens: page.js, from PACE.flowLead 0.25 / 0.30), never under the film's words; the
   film's last cluster carries the lead-in (its story entry's holdThrough), so the frame is never empty. The lens keys
   the flow's still from the lead-in's end (K.flow keys it from the section's start: key the film's last shot to
   hold through the lead-in) */
html:not(.v3-nogl):not(.v3-reduced) .e-sec:not([data-flow]) + .e-sec[data-flow] { padding-top: calc((1 + var(--fz-flow-lead, 0.25)) * 100vh); }
html[data-layout="port"]:not(.v3-nogl):not(.v3-reduced) .e-sec:not([data-flow]) + .e-sec[data-flow] { padding-top: calc((1 + var(--fz-flow-lead, 0.3)) * 100svh); }
.fl { position: relative; isolation: isolate; box-sizing: border-box; display: grid; gap: 10px; align-content: start; width: min(100%, 760px); padding: clamp(22px, 3.4vh, 34px) clamp(22px, 2.4vw, 34px); color: var(--signal); }
.fl::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: var(--gl-r, 16px); background: var(--gl-tint); border: 1px solid var(--gl-edge); box-shadow: inset 0 1px 0 var(--gl-hi), var(--gl-shadow); }
.fl.gl--read::before { background: var(--gl-read-tint); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.gl-blur .fl::before { background: var(--gl-fill); -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); }
  html.gl-blur .fl.gl--read::before { background: var(--gl-read); }
}
.fl--wide { width: min(100%, 1180px); }
.fl--bare { padding: 0; }
.fl--bare::before { display: none; }
/* the rise: the panel 520 ms (opacity, 18 px, 0.985 -> 1), its words 80 ms after it (opacity, 12 px, 560 ms, 60 ms
   apart); out (below the frame again): words 280 ms, then the panel 260 ms */
html:not(.v3-reduced) .fl::before { opacity: 0; transform: translateY(18px) scale(0.985); transition: opacity 260ms var(--ease-out) 120ms, transform 260ms var(--ease-out) 120ms; }
html:not(.v3-reduced) .fl.is-in::before { opacity: 1; transform: none; transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
html:not(.v3-reduced) .fl > * { opacity: 0; transform: translateY(12px); transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out); }
html:not(.v3-reduced) .fl.is-in > * { opacity: 1; transform: none; transition-duration: 560ms; transition-delay: calc(80ms + var(--ci, 0) * 60ms); }
.fl > :nth-child(2) { --ci: 1; } .fl > :nth-child(3) { --ci: 2; } .fl > :nth-child(4) { --ci: 3; } .fl > :nth-child(5) { --ci: 4; } .fl > :nth-child(n + 6) { --ci: 5; }
/* (PORT-SITE, a11y) a panel the keyboard enters before it has risen stands at once: focus never lands on a fading control */
html:not(.v3-reduced) .fl:focus-within::before, html:not(.v3-reduced) .fl:focus-within > * { opacity: 1; transform: none; transition: none; }
/* the phone tier (X13): a panel rises as one piece */
html.rv-one:not(.v3-reduced) body .fl { opacity: 0; translate: 0 18px; transition: opacity calc(420ms * var(--rv-slow, 1)) var(--ease-out), translate calc(420ms * var(--rv-slow, 1)) var(--ease-out); }
html.rv-one:not(.v3-reduced) body .fl.is-in { opacity: 1; translate: none; transition-duration: calc(560ms * var(--rv-slow, 1)); }
html.rv-one:not(.v3-reduced) body .fl::before { opacity: 1; transform: none; transition: none; }
html.rv-one:not(.v3-reduced) body .fl > * { opacity: 1; transform: none; transition: none; }
html.rv-one:not(.v3-reduced) body .fl:focus-within { opacity: 1; translate: none; transition: none; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.rv-one.gl-blur:not(.v3-reduced) body .fl:not(.fl--bare) { border-radius: var(--gl-r, 16px); -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); }
  html.rv-one.gl-blur:not(.v3-reduced) body .fl::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* type inside a flow panel: V3e's roles (css/base.css), the measure of reading */
.fl :is(.xp__h2, .xp__h3, .xp__head) { opacity: 1; }
.fl .xp__body { max-width: var(--rd-measure); }

/* ============================================================ 7 · quiet pages (world: null; html.v3-nogl.fz-quiet): a
   still instead of the world, every word in flow. The still (.fz-still, outside <main>, before it) sits under the veil */
.fz-still { position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100svh; z-index: 0; overflow: hidden; pointer-events: none; }
.fz-still--fixed { position: fixed; height: 100vh; }
@supports (height: 100lvh) { .fz-still--fixed { height: 100lvh; } }
.fz-still img, .fz-still picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.fz-still::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 6, 10, 0) 55%, var(--void) 100%); }
.fz-still--fixed::after { background: linear-gradient(90deg, rgba(7, 6, 10, 0.72) 0, rgba(7, 6, 10, 0.18) 58%, rgba(7, 6, 10, 0) 100%); }
/* the horizon (Privacy, Terms): the page begins where the credits end; the line of light stays whole, the ground below it
   falls into the reading ground */
.fz-still--horizon::after { background: linear-gradient(180deg, rgba(7, 6, 10, 0) 0, rgba(7, 6, 10, 0) 89%, var(--void) 100%); }
/* a quiet page's sections are flow: no full-screen minimum except its hero and its Closing */
html.fz-quiet .e-sec.fl-sec { min-height: 0; display: grid; padding: clamp(40px, 8vh, 96px) var(--g-m, max(48px, 5vw)); }
html.fz-quiet .e-sec--hero { min-height: 100vh; min-height: 100svh; padding: var(--z-title-top, 16vh) var(--g-m, max(48px, 5vw)) 10vh; align-content: start; }
html.fz-quiet .e-sec--hero .xp { max-width: min(100%, var(--z-title-w, 620px)) !important; }
/* the quiet page's clusters rise like flow panels (V3e's credits pattern), the hero on arrival */
html.fz-quiet:not(.v3-reduced) .xp::before { opacity: 0; transform: translateY(18px) scale(0.985); transition: opacity 260ms var(--ease-out) 120ms, transform 260ms var(--ease-out) 120ms; }
html.fz-quiet:not(.v3-reduced) .xp.is-in::before { opacity: 1; transform: none; transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
html.fz-quiet:not(.v3-reduced) .xp > * { opacity: 0; transform: translateY(12px); transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out); }
html.fz-quiet:not(.v3-reduced) .xp.is-in > * { opacity: 1; transform: none; transition-duration: 560ms; transition-delay: calc(140ms + var(--ci, 0) * 60ms); }
html.fz-quiet .xp > :nth-child(2) { --ci: 1; } html.fz-quiet .xp > :nth-child(3) { --ci: 2; } html.fz-quiet .xp > :nth-child(n + 4) { --ci: 3; }
html.rv-one.fz-quiet:not(.v3-reduced) body .xp { opacity: 0; translate: 0 12px; transition: opacity calc(420ms * var(--rv-slow, 1)) var(--ease-out), translate calc(420ms * var(--rv-slow, 1)) var(--ease-out); }
html.rv-one.fz-quiet:not(.v3-reduced) body .xp.is-in { opacity: 1; translate: none; transition-duration: calc(560ms * var(--rv-slow, 1)); transition-delay: calc(120ms * var(--rv-slow, 1)); }
html.rv-one.fz-quiet:not(.v3-reduced) body .xp > *, html.rv-one.fz-quiet:not(.v3-reduced) body .xp::before { opacity: 1; transform: none; transition: none; }

/* the reading layout (Privacy, Terms; Insights' articles): a contents list beside the text (sticky from 1100 px; a
   disclosure below), the body at most 68 characters a line, H2 per section */
.rd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; width: 100%; max-width: 1180px; }
.rd__toc { font: 500 10.5px/1.5 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.rd__toc summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; color: var(--filament); list-style: none; }
.rd__toc summary::-webkit-details-marker { display: none; }
.rd__toc summary::after { content: ''; width: 8px; height: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 240ms var(--ease-out); }
.rd__toc[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.rd__toc ol { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; counter-reset: rd; }
.rd__toc li { counter-increment: rd; }
.rd__toc a { display: flex; gap: 12px; padding: 7px 0; color: rgba(236, 233, 241, 0.78); text-decoration: none; transition: color 180ms var(--ease-out); }
.rd__toc a::before { content: counter(rd, decimal-leading-zero); color: var(--faint); }
.rd__toc a[aria-current] { color: var(--signal); }
.rd__toc a[aria-current]::before { color: var(--filament); }
@media (hover: hover) and (pointer: fine) { .rd__toc a:hover { color: var(--signal); } }
@media (min-width: 1100px) {
  .rd { grid-template-columns: 250px minmax(0, var(--rd-measure)); column-gap: clamp(48px, 6vw, 104px); align-items: start; }
  .rd__toc { position: sticky; top: calc(var(--nav-h) + 40px); }
  .rd__toc summary { pointer-events: none; }
  .rd__toc summary::after { display: none; }
}
.rd__body { min-width: 0; max-width: var(--rd-measure); }
.rd__body > :first-child, .rd__body > .rd__sec:first-child > h2 { margin-top: 0; }
/* each section of the text is a bare flow block: it rises as it comes up the frame */
.rd__body .rd__sec { display: block; width: 100%; padding: 0; }
html.fz-quiet .fl-sec--read { padding-top: clamp(24px, 6vh, 64px); }
.rd__body h2 { margin: 64px 0 14px; scroll-margin-top: calc(var(--nav-h) + 24px); font: 600 clamp(22px, 2.15vw, 32px)/1.02 var(--font-title); font-stretch: 88%; letter-spacing: -0.03em; text-transform: uppercase; text-wrap: balance; }
.rd__body h3 { margin: 30px 0 8px; font: 600 17px/1.3 var(--font-body); color: var(--signal); }
.rd__body p, .rd__body li { font: 400 17px/1.68 var(--font-body); color: rgba(236, 233, 241, 0.86); text-wrap: pretty; }
.rd__body p + p { margin-top: 14px; }
.rd__body ul, .rd__body ol { margin: 12px 0; padding-left: 1.2em; }
.rd__body li + li { margin-top: 6px; }
.rd__body a { color: var(--signal); text-decoration-color: rgba(201, 182, 234, 0.55); text-underline-offset: 4px; }
.rd__body strong { font-weight: 600; color: var(--signal); }

/* the 404: the night road's gantry sign reads 404 (a still, art-directed by orientation); the ways on as links */
/* (on a phone the sign rides the top quarter of the frame: the words stand low, over the road) */
html[data-layout="port"].fz-quiet .nf-hero { align-content: end; padding-top: 0; padding-bottom: max(9svh, calc(env(safe-area-inset-bottom, 0px) + 28px)); }
.nf__ways { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 8px; padding: 0; list-style: none; }
.nf__ways a:not(.fz-btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); text-decoration: none; transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nf__ways a:not(.fz-btn):hover { border-color: var(--signal); background: var(--wash); } }

/* ============================================================ 8 · forms (Start, Careers), chips, filters, tabs.
   (the block is .fz-form: home-v3e's credits already use .fm for the F mark, which this file imports)
   Honest and accessible: a visible label on every control, required marked in sight and in aria-required, errors
   written as what to do (in solar gold, never red), an error summary that takes focus and links to each field */
.fz-form { display: grid; gap: 22px; }
.fz-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 14px; }
.fz-form legend { padding: 0; margin-bottom: 4px; font: 600 clamp(19px, 1.6vw, 24px)/1.05 var(--font-title); font-stretch: 88%; letter-spacing: -0.02em; text-transform: uppercase; }
.fz-form__field { display: grid; gap: 7px; }
.fz-form__label { font: 500 15px/1.35 var(--font-body); color: var(--signal); }
.fz-form__req { margin-left: 4px; color: var(--filament); }
.fz-form__opt { margin-left: 6px; font: 400 13px/1 var(--font-body); color: var(--dim); }
.fz-form__hint { font: 400 13.5px/1.45 var(--font-body); color: rgba(236, 233, 241, 0.7); }
.fz-form__input {
  width: 100%; min-height: 50px; padding: 13px 16px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: rgba(236, 233, 241, 0.04); color: var(--signal); font: 400 16px/1.4 var(--font-body);
  transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}
textarea.fz-form__input { min-height: 120px; resize: vertical; }
select.fz-form__input { appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.fz-form__input::placeholder { color: rgba(236, 233, 241, 0.42); }
.fz-form__input:focus-visible { outline: 2px solid var(--filament); outline-offset: 2px; border-color: var(--filament); background: rgba(236, 233, 241, 0.06); }
.fz-form__input[aria-invalid="true"] { border-color: rgba(242, 194, 122, 0.75); }
.fz-form__error { display: flex; gap: 8px; align-items: baseline; font: 500 14px/1.4 var(--font-body); color: var(--gold); }
.fz-form__error:empty { display: none; }
.fz-form__summary { display: grid; gap: 8px; padding: 18px 20px; border: 1px solid rgba(242, 194, 122, 0.5); border-radius: 14px; background: rgba(242, 194, 122, 0.06); }
.fz-form__summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.fz-form__summary h2, .fz-form__summary p { font: 600 15px/1.4 var(--font-body); color: var(--gold); }
.fz-form__summary ul { margin: 0; padding-left: 1.1em; }
.fz-form__summary a { color: var(--signal); text-underline-offset: 3px; }
.fz-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.fz-form__honey { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
/* chips: a checkbox or radio as a pill (the input stays, visually hidden, so the label and keys work as native) */
.fz-form__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fz-form__chip { position: relative; display: inline-flex; }
.fz-form__chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.fz-form__chip span {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font: 500 14.5px/1.2 var(--font-body); color: var(--signal); transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 120ms var(--ease-out);
}
.fz-form__chip input:checked + span { background: var(--signal); border-color: var(--signal); color: var(--void); }
/* (PORT-SITE, a11y) the focus ring stands on the chip itself, the label the visually hidden input belongs to */
.fz-form__chip { border-radius: var(--r-pill); }
.fz-form__chip:has(> input:focus-visible) { outline: 2px solid var(--filament); outline-offset: 3px; }
@supports not selector(:has(*)) { .fz-form__chip input:focus-visible + span { outline: 2px solid var(--filament); outline-offset: 3px; } }
.fz-form__chip input:active + span { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .fz-form__chip input:not(:checked):hover + span { border-color: var(--signal); background: var(--wash); } }
/* filters (aria-pressed buttons) and tabs (role=tablist): quiet mono labels; the chosen one lit */
.fz-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fz-filter {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: transparent;
  font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); cursor: pointer;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out), background-color 180ms var(--ease-out), transform 120ms var(--ease-out);
}
.fz-filter[aria-pressed="true"] { color: var(--void); background: var(--signal); border-color: var(--signal); }
.fz-filter:active { transform: scale(0.97); }
.fz-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-pill); }
.fz-tab { min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: transparent; font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); cursor: pointer; transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out); }
.fz-tab[aria-selected="true"] { color: var(--signal); background: rgba(236, 233, 241, 0.1); }
@media (hover: hover) and (pointer: fine) { .fz-filter:not([aria-pressed="true"]):hover, .fz-tab:not([aria-selected="true"]):hover { color: var(--signal); border-color: var(--signal); } }

/* ============================================================ 9 · the credits, generalised (home-v3e/css/act4.css is
   the source, and holds S17's quiet LinkedIn link in Talk now, .cr__social, for home and site alike; the current page
   lit; a page with a world but no colour shift (html.fz-carry) gets the credits that carry the colour themselves, with
   their motion) */
.cr__g a[aria-current]:not(.fz-btn) { color: var(--filament); }
html.fz-carry:not(.v3-reduced):not(.v3-nogl) :is(.shift, .shift-grade) { display: none; }
html.fz-carry:not(.v3-reduced):not(.v3-nogl) .cr {
  background:
    radial-gradient(70% 34svh at 50% calc(100% - (1 - var(--hz, 0.86)) * 100svh), rgba(139, 69, 208, 0.42), rgba(102, 45, 145, 0.16) 55%, rgba(102, 45, 145, 0) 100%),
    linear-gradient(180deg, rgba(11, 6, 18, 0) 0, rgba(11, 6, 18, 0.9) min(34svh, 300px), #110819 45%, #2a1241 calc(100% - (1 - var(--hz, 0.86)) * 100svh), #0b0612 calc(100% - (1 - var(--hz, 0.86)) * 100svh + 2px), #0a0510 100%);
}
html.fz-carry:not(.v3-reduced):not(.v3-nogl) .cr__in { padding-top: max(28svh, calc(var(--nav-h, 72px) + 16px)); }
html.fz-carry:not(.v3-reduced):not(.v3-nogl) .cr__hz { display: block; position: absolute; left: calc(-1 * var(--g-m, 64px)); right: calc(-1 * var(--g-m, 64px)); top: -0.75px; height: 1.5px; background: linear-gradient(90deg, rgba(214, 192, 255, 0) 0, #e6d8ff 16%, #fbf8ff 50%, #e6d8ff 84%, rgba(214, 192, 255, 0) 100%); box-shadow: 0 0 14px 2px rgba(139, 69, 208, 0.55); }
/* a quiet page's Closing statement: V3e's reduced-motion Closing (centred over the night ground) */
html.fz-quiet .e-sec--cta { min-height: 100vh; min-height: 100svh; }

/* ============================================================ 10 · reduced motion: opacity only (the drawer in 160 ms,
   the veil in 120 ms); the kit's global rule zeroes every other transition */
@media (prefers-reduced-motion: reduce) {
  dialog.fz-dr .fz-dr__panel, dialog.fz-dr.is-open .fz-dr__panel { transform: none !important; transition: opacity 160ms var(--ease-out) !important; }
  dialog.fz-dr::backdrop, dialog.fz-dr.is-open::backdrop { transition: opacity 160ms var(--ease-out) !important; }
  dialog.fz-dr :is(.fz-dr__page, .fz-dr__talk, .fz-dr__do) { transform: none !important; opacity: 1 !important; }
  dialog.fz-dr .fz-dr__close { transition: opacity 160ms var(--ease-out) !important; }
  .fz-veil { transition: opacity 120ms linear !important; }
  html.fz-leaving :is(.xp, .fl, .cr__g, .fz-ch) { translate: none !important; transition: opacity 120ms linear !important; }
  .fz-dr__grab { display: none !important; }
  .fz-btn--svc:active, .fz-btn--svc:hover::after { transform: none !important; }
  .fz-dr__pimg, .fz-dr__ra { transition: none !important; }
  .fz-dr__row:hover .fz-dr__ra, .fz-dr__row:focus-visible .fz-dr__ra { transform: none !important; }
}

/* ============================================================ the cookie bar (L3, 5 Nov 2026; v3e/consent.js)
   The user's easy pass: a small glass bar that never covers the page or takes focus, one tap Accept, Choices for two
   switches. It asks only on the production site (and with ?consent, for review). Desktop: bottom left, on the grid's
   margin; a phone: the foot of the frame, above the chapter pill while the pill shows (--cb-lift). In: opacity and a
   12 px rise, 420 ms --ease-out; out: 240 ms. Reduced motion: opacity only, 160 ms. */
.fz-cb { position: fixed; z-index: calc(var(--z-nav, 50) + 2); left: var(--g-m, max(48px, 5vw)); bottom: max(24px, env(safe-area-inset-bottom, 0px)); width: min(452px, calc(100vw - 2 * var(--g-m, 48px))); color: var(--signal); opacity: 0; transform: translate3d(0, calc(12px - var(--cb-lift, 0px)), 0); pointer-events: none; transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.fz-cb.is-in { opacity: 1; transform: translate3d(0, calc(0px - var(--cb-lift, 0px)), 0); pointer-events: auto; transition-duration: 420ms; }
.fz-cb__in { display: grid; gap: 14px; padding: 18px 25px 14px; border-radius: var(--gl-r, 16px); background: var(--gl-read-tint, rgba(14, 10, 22, 0.86)); border: 1px solid var(--gl-edge); box-shadow: inset 0 1px 0 var(--gl-hi), 0 12px 40px rgba(0, 0, 0, 0.35); }
html.gl-blur .fz-cb__in { background: var(--gl-read, rgba(14, 10, 22, 0.72)); -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); }
.fz-cb__text { margin: 0; max-width: 52ch; font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--signal); text-wrap: pretty; }
.fz-cb__more { display: grid; }
.fz-cb__more[hidden], .fz-cb__save[hidden] { display: none; }
.fz-cb__opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k sw" "d sw"; align-items: center; gap: 4px 18px; padding: 12px 0; border-top: 1px solid var(--gl-edge); cursor: pointer; }
.fz-cb__k { grid-area: k; font-family: var(--font-mono); font-size: var(--t-mono); font-variation-settings: "wdth" 87.5; letter-spacing: var(--track-mono); text-transform: uppercase; line-height: 1.5; color: var(--signal); }
.fz-cb__d { grid-area: d; font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--dim); text-wrap: pretty; }
.fz-cb__sw { grid-area: sw; position: relative; flex: none; width: 40px; height: 24px; margin: 0; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: rgba(236, 233, 241, 0.1); -webkit-appearance: none; appearance: none; cursor: pointer; transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out); }
.fz-cb__sw::before { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--signal); transition: transform 180ms var(--ease-out), background-color 180ms var(--ease-out); }
.fz-cb__sw:checked { background: var(--filament); border-color: var(--filament); }
.fz-cb__sw:checked::before { transform: translateX(16px); background: var(--void); }
.fz-cb__sw:focus-visible, .fz-cb__choices:focus-visible, .fz-cb__link:focus-visible { outline: 2px solid var(--filament); outline-offset: 3px; }
.fz-cb__link { justify-self: start; display: inline-flex; align-items: center; min-height: 32px; margin-top: 2px; font-family: var(--font-body); font-size: 13px; color: var(--dim); text-underline-offset: 4px; }
.fz-cb__act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.fz-cb__choices { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--dim); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(236, 233, 241, 0.32); text-underline-offset: 5px; transition: color 180ms var(--ease-out); }
/* the switches open: Accept and Save choices stand alone (Esc, Accept or Save closes them) */
.fz-cb.is-more .fz-cb__choices { display: none; }
@media (hover: hover) and (pointer: fine) { .fz-cb__choices:hover, .fz-cb__link:hover { color: var(--signal); } }
@media (max-width: 899px) {
  .fz-cb { left: var(--g-m, 20px); bottom: max(14px, env(safe-area-inset-bottom, 0px)); width: calc(100vw - 2 * var(--g-m, 20px)); }
  .fz-cb__in { padding: 16px 19px 12px; }
  html.fz-ch-on .fz-cb { --cb-lift: 58px; }
}
/* "Cookie choices" in the credits' ground, under the legal line (shown where the bar asks) */
.cr__cookies { grid-area: cookies; justify-self: start; display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; font: 500 10px/1.6 var(--v3-mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(236, 233, 241, 0.86); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cr__ground:has(> .cr__cookies:not([hidden])) { grid-template-areas: "legal top" "cookies top"; }
@media (max-width: 760px), (max-aspect-ratio: 9/10) { .cr__ground:has(> .cr__cookies:not([hidden])) { grid-template-areas: "legal" "cookies" "top"; } }
@media (hover: hover) and (pointer: fine) { .cr__cookies:hover { color: var(--signal, #ece9f1); } }
@media (prefers-reduced-motion: reduce) {
  .fz-cb, .fz-cb.is-in { transform: translate3d(0, calc(0px - var(--cb-lift, 0px)), 0); transition: opacity 160ms linear; }
  .fz-cb__sw, .fz-cb__sw::before, .fz-cb__choices { transition: none; }
}