/* fog.tools homepage — the FOG design study ported to production.
   Source of truth for the look: ~/Desktop/FOG LLC/fog.tools.html (1180px canvas,
   inline-styled). Everything below is that page as a real stylesheet: the study's
   numbers at >=1180px, fluid beneath it. Brand values come from fog-brand-kit
   (BRAND.md + contrast-matrix.md) — deviation needs owner approval.
   The three parallax scenes (.px-*) are the study
   ~/Desktop/FOG LLC/FOG Parallax Backgrounds.dc.html, ported layer for layer. */

@font-face { font-family: "Archivo"; src: url("../fonts/fog-archivo.woff2") format("woff2"); font-weight: 500 900; font-stretch: 100% 125%; font-display: swap; unicode-range: U+0000-00FF, U+2013-2026, U+20AC; }
@font-face { font-family: "Public Sans"; src: url("../fonts/fog-publicsans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+2013-2026, U+20AC; }
@font-face { font-family: "Chivo Mono"; src: url("../fonts/fog-chivomono.woff2") format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: U+0000-00FF, U+2013-2026, U+20AC; }
/* CLS-free fallback stacks (fog-brand-kit/03-typography/fallback-metrics.css) */
@font-face { font-family: "Archivo Fallback"; src: local("Arial Bold"), local("Arial");
  size-adjust: 130.8%; ascent-override: 89%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "Public Sans Fallback"; src: local("Arial");
  size-adjust: 103.1%; ascent-override: 91%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Chivo Mono Fallback"; src: local("Courier New");
  size-adjust: 100%; ascent-override: 84%; descent-override: 21%; line-gap-override: 0%; }

:root {
  --dark: #111419;      /* basalt */
  --dark-2: #1a1e24;
  --dark-3: #23272e;
  --dark-line: #363b42;
  --line-2: #646a72;
  --on-dark: #e7eaec;   /* vapor ink */
  --on-dark-2: #818890; /* slate — AA on basalt-1 */
  --acc: #ed842c;       /* flare: fills and dark text only */
  --acc-ink: #14171d;
  --ridge: #4a637d;
  --f-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --f-text: "Public Sans", "Public Sans Fallback", system-ui, sans-serif;
  --f-mono: "Chivo Mono", "Chivo Mono Fallback", ui-monospace, monospace;
  --ez-ui: cubic-bezier(.2, .8, .2, 1);
  --ez-burn: cubic-bezier(.16, 1, .3, 1);
  --ez-clip: cubic-bezier(.7, 0, .16, 1);
  /* the study's 49px gutter, held at >=1180px and shrunk on the way down */
  --gutter: clamp(20px, 4.15vw, 49px);
  --sec-pad: clamp(56px, 7.4vw, 88px);
  /* Full-bleed layout. The study was a 1180px canvas, which reads as a narrow
     column with dead gutters on a wide screen. Every band now spans the viewport
     and only the *content* is held to a measure: --pad-x is the gutter until the
     screen passes --content, and centres the column after that. Backgrounds and
     the parallax scenes therefore run edge to edge at every width. */
  --content: 1440px;
  --pad-x: max(var(--gutter), (100% - var(--content)) / 2);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
fieldset { border: 0; }
ul { list-style: none; }
button { font: inherit; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--dark);
  color: var(--on-dark);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--acc); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 2px; }

/* ---- type roles (fog-brand-kit) ---- */
.fog-display { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 125; letter-spacing: -.01em; }
.fog-t1 { font-family: var(--f-display); font-weight: 750; font-variation-settings: "wdth" 118; letter-spacing: -.01em; }
.fog-t2 { font-family: var(--f-display); font-weight: 650; font-variation-settings: "wdth" 110; letter-spacing: -.005em; }
.fog-mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums lining-nums; }
.fog-label { font-family: var(--f-text); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.acc { color: var(--acc); }
.muted { color: var(--on-dark-2); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--acc); color: var(--acc-ink);
  padding: 10px 16px; font-weight: 700; }
.skip:focus { left: 8px; top: 8px; }

/* ---- shell: full-bleed basalt; the measure lives in --pad-x, not here ---- */
/* overflow-x: clip, not hidden: clip does not create a scroll container, so the
   sticky column in "why sites fail" keeps working while the 3D drum's outer cards
   stop widening the document on a phone. */
.shell { position: relative; width: 100%; background: var(--dark); overflow-x: clip; }
.sec { padding: var(--sec-pad) var(--pad-x); border-top: 1px solid var(--dark-line); }

/* reading progress — the hairline the study runs across the top of the canvas */
.prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9; background: var(--dark-3); }
.prog > span { display: block; height: 100%; background: var(--acc); transform: scaleX(0); transform-origin: left; }

/* ---- surfaces ---- */
.fog-grain { position: relative; }
.fog-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px; }
.fog-bank { background: radial-gradient(120% 90% at 82% -10%, rgba(237, 132, 44, .16), transparent 55%), linear-gradient(178deg, #111419, #1a1e24 90%); }

/* ---- buttons ---- */
.fog-btn { font-family: var(--f-text); font-weight: 700; font-size: 16px; border-radius: 6px; border: 1.5px solid transparent;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none;
  padding: 14px 26px; min-height: 44px;
  transition: background-color 120ms var(--ez-ui), color 120ms var(--ez-ui), border-color 120ms var(--ez-ui), translate 120ms var(--ez-ui); }
.fog-btn-beacon { background: var(--acc); color: var(--acc-ink); }
.fog-btn-beacon:hover { translate: 0 -2px; background: #f0923f; }
.fog-btn-quiet { background: transparent; color: var(--on-dark); border-color: var(--line-2); padding: 14px 22px; }
.fog-btn-quiet:hover { border-color: var(--on-dark); translate: 0 -2px; }

/* ---- header ---- */
/* The bar is fixed on the home page and only there (owner, 2026-08-12: sticky,
   a little larger at rest, smaller once you scroll). The other pages wrap the
   same markup in `.pg-bar`, which is an ordinary block at the top of a document
   — leaving those alone keeps this change to the page that asked for it.
   It starts at 30px of padding and settles to 12px with a blurred plate under
   it; the mark shrinks with it. Nothing below moves, because the hero is a
   full-height backdrop the bar was already floating over. */
.nav { position: relative; z-index: 3; display: flex; align-items: center; gap: 22px; padding: 26px var(--pad-x); }
.hero > .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding: 30px var(--pad-x);
  border-bottom: 1px solid transparent;
  transition: padding .3s var(--ez-ui), background-color .3s var(--ez-ui),
              border-color .3s var(--ez-ui), backdrop-filter .3s var(--ez-ui); }
.hero > .nav.is-stuck { padding: 12px var(--pad-x); background: rgba(16, 18, 22, .82);
  -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%);
  border-bottom-color: var(--dark-line); }
.nav-brand { display: block; color: var(--on-dark); }
.nav-brand svg { width: 132px; height: 42px; transition: width .3s var(--ez-ui), height .3s var(--ez-ui); }
.hero > .nav.is-stuck .nav-brand svg { width: 104px; height: 33px; }
.nav-links { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav a.nav-link { color: var(--on-dark); text-decoration: none; font-size: 15px; font-weight: 600; }
.nav a.nav-link:hover { color: var(--acc); }
/* The page you are on: same ink, a flare underline. Colour alone would vanish
   for a colour-blind reader; an underline survives every vision. */
.nav a.nav-link[aria-current="page"] { text-decoration: underline 2px var(--acc); text-underline-offset: 6px; }
.nav a.nav-tel { font-family: var(--f-mono); color: var(--on-dark); text-decoration: none; font-size: 15px; font-weight: 600; }
.nav a.nav-tel:hover { color: var(--acc); }
/* the community link. Icon-only, so the box — not the 22px glyph — is the target:
   34px clears WCAG 2.2 2.5.8 with room, and the negative margin keeps the taller
   box from growing the nav bar. Colour comes from the same two tokens the text
   links use, so it reads as one row rather than a pasted-on badge. */
.nav a.nav-social { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin: -6px 0; border-radius: 8px; color: var(--on-dark);
  transition: color 120ms var(--ez-ui); }
.nav a.nav-social:hover { color: var(--acc); }
.nav a.nav-social svg { display: block; width: 22px; height: 22px; fill: currentColor; }

/* ---- what we do ---------------------------------------------------------
   Opens on hover, on keyboard focus and on tap. :focus-within is what makes the
   keyboard path work with the stylesheet alone; home.js adds the tap toggle and
   Escape. The panel is painted, not transformed, so it cannot be half-visible
   mid-transition over the film. */
/* the fixed bar would otherwise land on top of whatever an in-page link jumps
   to — the math heading sat behind it the first time this was tried */
section[id], main[id] { scroll-margin-top: 92px; }

.nav-drop { position: relative; display: inline-flex; align-items: center; }
.nav-drop-t { display: inline-flex; align-items: center; gap: 6px; }
.nav-drop-c { width: 11px; height: 11px; transition: transform .22s var(--ez-ui); }
.nav-drop:hover .nav-drop-c, .nav-drop:focus-within .nav-drop-c,
.nav-drop.is-open .nav-drop-c { transform: rotate(180deg); }
.nav-menu { position: absolute; top: calc(100% + 14px); left: -18px; z-index: 41;
  display: grid; gap: 2px; width: min(340px, calc(100vw - 32px)); padding: 10px;
  background: rgba(16, 18, 22, .96); border: 1px solid var(--dark-line); border-radius: 12px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transition: opacity .2s var(--ez-ui), visibility .2s var(--ez-ui); }
/* the gap between the trigger and the panel would drop the hover on the way
   down; this bridges it without moving anything on screen */
.nav-drop::after { content: ""; position: absolute; top: 100%; left: -18px; width: 340px; height: 16px; }
.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu, .nav-drop.is-open .nav-menu {
  opacity: 1; visibility: visible; }
.nav a.nav-menu-i { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--on-dark); }
.nav a.nav-menu-i:hover, .nav a.nav-menu-i:focus-visible { background: rgba(231, 234, 236, .07); }
.nav-menu-i b { display: block; font-size: 14.5px; font-weight: 700; }
.nav-menu-i i { display: block; margin-top: 3px; font-style: normal; font-size: 12.5px; line-height: 1.45; color: var(--on-dark-2); }

/* ---- hero ---- the film (2026-08-11). One React composition, scaled to fit
   the hero with nothing over it but the nav. Layer order is 0 film · 1 nav ·
   2 grain. `.fog-bank` sits under the film and is what a blocked bundle
   leaves you with — a finished picture, not a hole.
   Neither cut matches the hero's aspect, so both letterbox; the bars are the
   same basalt the film's own frame is painted in, which is why there is no
   seam to see.
   Two cuts share this one box (2026-08-16): 1920x1080 at 1024 and up,
   1080x1920 below it. A landscape frame on a 375px phone is a 0.195 scale —
   its 27px captions land at five pixels — so the phone gets a cut authored
   in portrait rather than a shrunken one. home.js fetches only the cut this
   width displays; the width gate there and the one here must stay equal. */
.hero { position: relative; overflow: hidden; min-height: max(720px, 100svh); display: flex; flex-direction: column; }
.hero-film { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .6s ease; }
/* the film's frame is an <svg> that the engine scales with a
   transform. The page's `svg { max-width: 100% }` clamps its layout width to
   the container first, so the transform then shrank an already-shrunk box and
   the film rendered at three quarters of its size inside its own letterbox. */
.hero-film svg { max-width: none; }
.hero-film[data-lit] { opacity: 1; }
.hero .nav { z-index: 1; }
.hero.fog-grain::after { z-index: 2; }

/* the nav's Call button — the hero's only CTA now, and the reason the brand's
   own auto margin has to go: two adjacent auto margins share the free space and
   land the links flush right, but a button between them would split it and sit
   in the middle of the bar. */
/* the handset, square and thumb-sized. 44px clears the WCAG 2.5.5 target floor
   with nothing to spare, which is why it does not shrink with the bar. */
.nav-call { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 44px; padding: 0; margin-right: auto; border-radius: 10px; }
.nav-call-i { width: 21px; height: 21px; display: block; }
/* a phone number that breaks across two lines stops reading as a phone number */
.nav-call, .nav-link, .nav-tel { white-space: nowrap; }

/* ---- 01 why sites fail ---- */
.slip-g { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: center; }
.slip-side { position: sticky; top: 24px; }
.slip-side h2 { font-size: clamp(30px, 3.75vw, 52px); line-height: 1.04; margin: 14px 0 0; }
.slip-side p { font-size: 16px; line-height: 1.55; margin: 14px 0 0; color: var(--on-dark-2); }
.slip-list { display: flex; flex-direction: column; gap: 20px; list-style: none; }
.slip-card { border: 1.5px solid var(--dark-line); border-radius: 10px; padding: 28px; display: flex; gap: 28px; align-items: center; }
.slip-card > .n { font-size: clamp(46px, 5.4vw, 76px); line-height: 1; letter-spacing: -.02em; color: var(--acc); flex: none; }
.slip-card h3 { font-size: clamp(20px, 2vw, 27px); line-height: 1.15; margin: 0; }
.slip-card p { font-size: 15.5px; line-height: 1.5; margin: 8px 0 0; max-width: 46ch; color: var(--on-dark-2); }
.src { color: var(--acc); }

/* ---- 02 the statement ---- the FINAL first-response scope (owner export
   2026-08-06). The band is a full viewport because the instrument has to read as
   an instrument: at the old 78svh the outer rings fell off the top and bottom and
   the scope became a few arcs behind a line of type. Everything inside the scope
   is sized in vmin off one 212vmin box, so the whole thing scales as one object.

   The accent is the site token, not the export's #E8833A, and the mono is the
   site's Chivo — a fourth webfont for one decorative HUD is not worth the hop. */
.stmt { position: relative; overflow: hidden; height: 100svh; min-height: 640px;
  display: flex; align-items: center; justify-content: center;
  border-top: 1px solid var(--dark-line); background: var(--dark); }
.stmt-head { position: relative; z-index: 2; margin: 0; padding: 0 5vw; text-align: center;
  color: #edf1f6; font-weight: 900; font-size: clamp(2.55rem, 6.6vw, 10rem); line-height: 1.05; letter-spacing: -.015em; }
/* No mask. The words used to rise out of one and it had to be taken away on a
   timer before the accent bar could sit below "first"; the 2026-08-10 entrance
   resolves them out of blur in place, so the bar is never clipped and the
   no-JS path shows the sentence the same way the animated one ends. */
.stmt-ww { display: inline-block; overflow: visible; padding-bottom: .25em; margin-bottom: -.25em; }
.stmt-w { display: inline-block; }
.stmt-w-first { position: relative; }
.stmt-bar { position: absolute; left: 0; right: 0; bottom: -.06em; height: .055em; border-radius: 2px;
  background: linear-gradient(90deg, var(--acc), rgba(237, 132, 44, .55)); transform-origin: 0 50%; }

/* the scene */
.stmt-scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.stmt-glow-par, .stmt-par { position: absolute; inset: 0; }
.stmt-glow { position: absolute; right: -28vmin; bottom: -32vmin; width: 115vmin; height: 115vmin; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(214, 110, 42, .32), rgba(214, 110, 42, .10) 44%, transparent 70%);
  filter: blur(28px); opacity: .6; }
.stmt-grid { position: absolute; inset: -80px; opacity: .32;
  background-image: radial-gradient(rgba(205, 220, 235, .11) 1px, transparent 1.5px); background-size: 30px 30px; }
.stmt-scope { position: absolute; left: 50%; top: 50%; width: 212vmin; height: 212vmin; transform: translate(-50%, -50%); }
.stmt-ring { position: absolute; left: 50%; top: 50%; width: var(--r); height: var(--r); transform: translate(-50%, -50%);
  border: 1px solid rgba(216, 228, 240, var(--o)); border-radius: 50%; }
.stmt-ring-dash { border-style: dashed; }
.stmt-cross { position: absolute; background: rgba(216, 228, 240, .06); }
.stmt-cross-x { left: 0; right: 0; top: 50%; height: 1px; }
.stmt-cross-y { top: 0; bottom: 0; left: 50%; width: 1px; }
.stmt-ticks { position: absolute; left: 50%; top: 50%; width: 124vmin; height: 124vmin; transform: translate(-50%, -50%); opacity: .9; }
.stmt-ticks > i { position: absolute; left: calc(50% - .5px); top: 0; width: 1px; display: block; transform-origin: .5px 62vmin; }
.stmt-rlabel { position: absolute; left: calc(50% + 12px); top: calc(50% - var(--d) - 16px);
  font-size: 9px; letter-spacing: .22em; color: rgba(216, 228, 240, var(--o)); }
.stmt-star { position: absolute; left: calc(50% + var(--x)); top: calc(50% + var(--y)); width: 4px; height: 4px;
  border-radius: 50%; background: rgba(210, 220, 232, var(--a)); transform: translate(-50%, -50%); }
.stmt-core { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(237, 132, 44, .65); box-shadow: 0 0 10px rgba(237, 132, 44, .45); }
.stmt-fx, .stmt-embers, .stmt-blips { position: absolute; inset: 0; }

/* the sweep: a cone that fades in behind the needle, and the needle itself */
.stmt-sweep { position: absolute; inset: 0; will-change: transform; }
.stmt-cone { position: absolute; inset: 0; border-radius: 50%; opacity: .85;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, transparent 275deg,
    rgba(237, 132, 44, .03) 300deg, rgba(237, 132, 44, .10) 344deg, rgba(237, 132, 44, .22) 359deg, transparent 360deg); }
.stmt-needle { position: absolute; left: calc(50% - 1px); bottom: 50%; width: 2px; height: 50%; transform-origin: 50% 100%;
  background: linear-gradient(to top, transparent, rgba(237, 132, 44, .45) 55%, rgba(237, 132, 44, .85));
  box-shadow: 0 0 14px rgba(237, 132, 44, .3); }

/* atmosphere: one scan band, the vignette that drops the middle out so the
   headline sits on basalt rather than on hardware, and the grain */
.stmt-scan-clip { position: absolute; inset: 0; overflow: hidden; }
.stmt-scan { position: absolute; left: 0; right: 0; top: 0; height: 22%;
  background: linear-gradient(180deg, transparent, rgba(216, 228, 240, .03), transparent);
  animation: stmt-scan 9s linear infinite; }
@keyframes stmt-scan { from { transform: translateY(-110%); } to { transform: translateY(520%); } }
.stmt-vig { position: absolute; inset: 0; background: radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(8, 10, 13, .55) 100%); }
.stmt-grain { position: absolute; inset: -120px; opacity: .05; mix-blend-mode: overlay; animation: stmt-grain 1.1s steps(4) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
@keyframes stmt-grain {
  0% { background-position: 0 0; } 25% { background-position: -90px 40px; } 50% { background-position: 60px -70px; }
  75% { background-position: -40px -90px; } 100% { background-position: 80px 60px; } }

/* a contact's readout. Positioned by the engine (which side of the scope it is
   on); everything else is here so a media query can take it away. */
.stmt-blip-label { position: absolute; top: 50%; transform: translateY(-50%); display: grid; gap: 6px;
  white-space: nowrap; font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; }

/* In the split sections the scope is 554px, not a viewport, and a contact that
   lands near the right edge pushes its readout through the frame — the label is
   24px to the side of the dot and the figure clips. Which spot comes up is
   random, so it clips on roughly half the cycles. The copy beside each figure
   already says what the scope is showing, so the labels go, exactly as they do
   on a phone. The dot, the ripple and the sweep still tell the story. */
.stmt-fig .stmt-blip-label { display: none; }

/* the HUD. Invented, aria-hidden, and deliberately never a round number that
   could be mistaken for a FOG statistic. */
.stmt-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(226, 233, 241, .55); }
.stmt-hud-tl { position: absolute; left: clamp(18px, 3vw, 36px); top: clamp(16px, 2.6vw, 32px); display: grid; gap: 7px; }
.stmt-hud-tr { position: absolute; right: clamp(18px, 3vw, 36px); top: clamp(16px, 2.6vw, 32px); }
.stmt-hud-bl { position: absolute; left: clamp(18px, 3vw, 36px); bottom: clamp(16px, 2.6vw, 32px); }
.stmt-hud-tr span, .stmt-hud-bl span { color: #edf1f6; }
.stmt-hud-tr span { display: inline-block; }
.stmt-hud-live { display: flex; align-items: center; gap: 9px; }
.stmt-hud-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc);
  box-shadow: 0 0 10px rgba(237, 132, 44, .6); animation: stmt-pulse 2.2s ease-in-out infinite; }
@keyframes stmt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.stmt-hud-clock { font-size: 10px; color: rgba(226, 233, 241, .35); }
/* the chat launcher is position:fixed in that corner (chat.js, bottom/right 16px,
   ~56px tall) and sat on the last two feed lines in production — the feed clears
   it rather than the launcher moving, because the launcher is the conversion */
.stmt-feed { position: absolute; right: clamp(18px, 3vw, 36px); bottom: clamp(88px, 8vh, 104px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
  font-size: 10px; letter-spacing: .14em; text-align: right; }
/* A phone has four corners and no room. The feed goes, the booked counter takes
   the corner it vacated so it stops crowding "FOG VOICE // LIVE", and the blip
   labels go with them — at 390 a three-line readout lands on the headline, and
   the headline is the thing this section exists to say. The scope still runs. */
@media (max-width: 699px) {
  .stmt-feed, .stmt-blip-label { display: none; }
  .stmt-hud { font-size: 10px; letter-spacing: .12em; }
  .stmt-hud-tr { top: auto; bottom: clamp(16px, 2.6vw, 32px); }
}

/* ---- 02b the split scopes ---- the same radar as #stmt, twice more, boxed
   beside copy instead of running full-bleed behind it.
   The scope is sized in vmin (212vmin, .stmt-scope) because full-bleed is what
   it was built for; inside a panel that is far wider than the panel, so the
   figure clips it to a square and scales the whole scope down as one piece.
   Scaling rather than re-declaring the radii keeps every ring, tick, label and
   sweep in the proportion the engine animates them at — the engine writes
   transforms on these nodes, so anything re-sized in CSS would fight it. */
.stmt-split { border-top: 1px solid var(--dark-line); background: var(--dark);
  padding: clamp(64px, 9vw, 116px) 0; }
.stmt-split-in { width: min(1180px, 92vw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
/* Copy carries two beats now, so it is the taller column and the media aligns
   to its top rather than floating in the middle of it. */
.wa .stmt-split-in { align-items: start; }

/* The media panel. Square, framed and clipped — the video is a 760² export and
   a band crop would cut the phone out of its own scene. */
.wa-fig { position: relative; margin: 0; }
.wa-video { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border: 1px solid var(--dark-line); border-radius: 14px; background: #0d1014; }
/* The hook is the video's only description — the video itself is aria-hidden,
   so this line carries what it shows to anyone who cannot see it play. */
.wa-hook { margin: 14px 2px 0; color: #8b98a6; font-size: 12px; letter-spacing: .06em; line-height: 1.5; }
/* The beat between the two halves of the argument: the window, then the answer. */
.wa-rule { width: 64px; height: 1px; margin: 2.1em 0 1.9em; border: 0; background: var(--dark-line); }
.wa-h { font-size: clamp(1.65rem, 2.9vw, 2.6rem); }
/* Re-based off the panel, not the viewport. #stmt sizes its scope in vmin
   because it fills the screen; in a ~550px box those same numbers put the rings
   at 70px inside a 572px scope while the sweep cone stayed panel-sized — rings
   invisible, cone enormous. Scaling could not fix that: it shrinks both by the
   same factor and the ratio is what was wrong. Percentages resolve against the
   scope, so the geometry is now proportional to the panel at every width, and
   the ring radii in the markup are percentages to match. */

.stmt-split-copy { color: #dfe6ee; }
.stmt-split-eyebrow { display: block; margin: 0 0 .9em; color: var(--acc);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.stmt-split-h { margin: 0 0 .55em; color: #edf1f6; font-weight: 900;
  font-size: clamp(1.9rem, 3.5vw, 3.25rem); line-height: 1.06; letter-spacing: -.015em; }
.stmt-split-p { margin: 0; max-width: 46ch; color: #b3bfcc;
  font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.65; }

/* Section B: copy first, scope second. Only the columns swap — the markup order
   stays figure-then-copy so the reading order is identical in both, which is
   what a screen reader and a keyboard follow. */

@media (max-width: 860px) {
  /* One column. The scope goes above the copy in both sections — a radar that
     lands after the sentence it illustrates is just a gap on a phone. */
  .stmt-split-in { grid-template-columns: 1fr; gap: clamp(22px, 6vw, 34px); }
}

/* ---- 03 the FOG Voice service index ---- ported from the owner's 2026-08-05
   export, vendored at docs/specs/carousel-v2/source/ with its sha256 in SPEC.md. A full-viewport panel:
   ten cards on a gapped ring you drag, a switchboard dial that turns with them,
   an index strip, and a readout that scrambles into each name as it arrives.
   Everything here is scoped to .fogv2 so page CSS cannot bleed in and this
   cannot leak out.

   One number is NOT the design's: WEBSITE_BUILDER_RULES §2b locks the
   customer-facing phone to 385-9000-FOG / tel:+13859000364, and an owner lock
   outranks a design file. */

.fogv2-sec { padding: 0; }
.fogv2-tail { padding: var(--sec-pad) var(--pad-x); text-align: center; }

/* The design is drawn at a 350px card and every other measurement follows from
   it, so the whole composition scales as one object instead of reflowing. 575 is
   a deliberately *gapped* ring — a closed cylinder would seat the faces at 539
   and the neighbours would touch (see carousel-math.js). */
.fogv2 {
  /* 350px is the design's card and it holds from ~930px up. Below that the card
     has to come down with the screen or the two neighbours get sliced off at the
     edges and the ring stops reading as a ring — the geometry says a neighbour's
     outer edge lands at 1.23x the card width from centre, so 768px of viewport
     wants a ~310px card. Everything else is derived from this one number, so the
     whole composition scales as one object. */
  --fogv2-w: clamp(260px, 24vw + 126px, 350px);
  --fogv2-h: calc(var(--fogv2-w) * 1.3714286);
  --fogv2-r: calc(var(--fogv2-w) * 1.6428571);
  --fogv2-dial: calc(var(--fogv2-w) * 2.5142857);
  --fogv2-art: calc(var(--fogv2-w) * 0.4171429);
  --fogv2-ghost: calc(var(--fogv2-w) * 0.1828571);
  position: relative; height: 100vh; height: 100svh; min-height: 800px;
  overflow: hidden; user-select: none; -webkit-user-select: none;
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(237, 132, 44, .13), transparent 55%),
    radial-gradient(58% 44% at 50% 60%, rgba(237, 132, 44, .06), transparent 70%),
    linear-gradient(178deg, #111419, #15181c 90%);
}
@keyframes fogv2In { from { opacity: 0; } to { opacity: 1; } }

/* floor mist — home.js raises the opacity with the spin speed */
.fogv2-mist { position: absolute; left: 50%; bottom: 4%; width: min(1300px, 130%); height: 280px;
  transform: translateX(-50%); pointer-events: none; opacity: .55; filter: blur(2px);
  background:
    radial-gradient(50% 55% at 50% 60%, rgba(231, 234, 236, .05), transparent 70%),
    radial-gradient(30% 40% at 50% 70%, rgba(237, 132, 44, .05), transparent 70%); }

/* the switchboard dial, on the ring's own centre so the two stay in lockstep */
.fogv2-dial { position: absolute; left: 50%; top: 57%; width: var(--fogv2-dial); height: var(--fogv2-dial);
  margin: calc(var(--fogv2-dial) / -2) 0 0 calc(var(--fogv2-dial) / -2);
  pointer-events: none; opacity: .55; }
.fogv2-dial svg { display: block; width: 100%; height: 100%; }
/* the pointer is the one thing that does NOT turn: it is 12 o'clock */
.fogv2-point { position: absolute; left: 50%; top: 57%; width: 0; height: 0;
  margin: calc(var(--fogv2-dial) / -2 - 12px) 0 0 -6px;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 9px solid var(--acc); opacity: .7; pointer-events: none; }

/* pan-y, not none: a finger must still be able to scroll the page past the ring */
.fogv2-stage { position: absolute; inset: 0; z-index: 1; cursor: grab; touch-action: pan-y; }
.fogv2-stage:active { cursor: grabbing; }
.fogv2-stage:focus-visible { outline: 2px solid var(--acc); outline-offset: -6px; }
.fogv2-persp { position: absolute; inset: 0; perspective: 1600px; perspective-origin: 50% 46%; }
.fogv2-tilt { position: absolute; inset: 0; transform-style: preserve-3d; }
/* pushed back by the radius so the front card lands near the screen plane */
.fogv2-anchor { position: absolute; left: 50%; top: 57%; width: 0; height: 0;
  transform: translateZ(calc(var(--fogv2-r) * -1)); transform-style: preserve-3d; }
.fogv2-ring { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }

.fogv2-card { position: absolute; width: var(--fogv2-w); height: var(--fogv2-h);
  left: calc(var(--fogv2-w) / -2); top: calc(var(--fogv2-h) / -2);
  transform: rotateY(calc(var(--i) * 36deg)) translateZ(var(--fogv2-r));
  transform-style: preserve-3d;
  animation: fogv2In 720ms var(--ez-burn) calc(var(--i) * 70ms) backwards; }

.fogv2-face { position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden;
  background: var(--fogv2-wash), var(--dark-2); box-shadow: 0 0 48px var(--fogv2-glow);
  border: 1px solid var(--dark-line); border-radius: 10px;
  padding: 22px 24px 18px; display: flex; flex-direction: column; text-align: left;
  transition: transform 240ms var(--ez-ui), border-color 240ms var(--ez-ui); }
@media (hover: hover) { .fogv2-face:hover { transform: translateY(-3px); border-color: var(--fogv2-hover); } }
/* the far side of the ring: a construction grid and the mark, nothing to read */
.fogv2-back { position: absolute; inset: 0; backface-visibility: hidden; transform: rotateY(180deg);
  background: #15181e; border: 1px solid #2b3038; border-radius: 10px; display: grid; place-items: center;
  background-image:
    repeating-linear-gradient(0deg, rgba(231, 234, 236, .02) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(231, 234, 236, .02) 0 1px, transparent 1px 24px); }
.fogv2-backw { display: grid; justify-items: center; gap: 12px; }
.fogv2-backw > span { font-size: 9.5px; letter-spacing: .14em; color: #3a4048; }
.fogv2-glyph { opacity: .22; }

/* the hairline that lights on whichever card is square to the viewer */
.fogv2-live { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--acc);
  opacity: 0; transition: opacity 240ms var(--ez-ui); }

.fogv2-head { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; letter-spacing: .09em; color: var(--on-dark-2); }
.fogv2-head b { font-weight: 400; color: var(--on-dark); }
.fogv2-head i { font-style: normal; font-size: 9.5px; letter-spacing: .12em; color: #5e6b7a; }

/* the mark tile, corner clipped like a punched card */
.fogv2-art { position: relative; display: grid; place-items: center; height: var(--fogv2-art);
  margin-top: 13px; background-color: #14171d; border-radius: 8px;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  background-image:
    repeating-linear-gradient(0deg, rgba(231, 234, 236, .035) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(231, 234, 236, .035) 0 1px, transparent 1px 24px); }
/* letter-spacing back to normal: .fog-display carries -.01em, which the design's
   ghost numeral does not, and at 64px that tightened "01" by 1.3px */
.fogv2-ghost { position: absolute; right: 10px; bottom: -6px; font-size: var(--fogv2-ghost);
  line-height: 1; letter-spacing: normal; color: rgba(231, 234, 236, .06); pointer-events: none; }
.fogv2-mark { display: block; }

.fogv2-title { font-weight: 750; font-variation-settings: "wdth" 118; font-size: 24px;
  line-height: 1.07; letter-spacing: -.01em; color: var(--on-dark); text-align: center; margin-top: 16px; }
.fogv2-desc { font-size: 13.5px; line-height: 1.55; color: var(--on-dark-2); margin-top: 9px; text-wrap: pretty; }
.fogv2-desc em { font-style: normal; color: var(--acc); }
.fogv2-gap { flex: 1; }
.fogv2-rule { height: 1px; background: linear-gradient(90deg, #2b3038 0 42%, transparent 42% 58%, #2b3038 58% 100%); }
.fogv2-footw { padding-top: 12px; display: grid; gap: 6px; }
[data-card-idx="3"] .fogv2-footw,
[data-card-idx="4"] .fogv2-footw,
[data-card-idx="5"] .fogv2-footw { gap: 8px; }

/* ---- the footer widgets, one shape per card ---- */
.fogv2-num { font-size: 17px; letter-spacing: .04em; color: var(--on-dark);
  transition: color 240ms var(--ez-ui), letter-spacing 240ms var(--ez-ui); }
.fogv2-num:hover { color: var(--acc); letter-spacing: .1em; }
.fogv2-cap { font-size: 10.5px; letter-spacing: .06em; color: var(--on-dark-2); }
.fogv2-cap.is-hi { color: var(--on-dark); }
.fogv2-cap b { font-weight: 400; color: var(--on-dark); }
.fogv2-cap b.is-block { color: #d96357; }
.fogv2-cap.is-fade { transition: opacity 240ms var(--ez-ui); }
.fogv2-cap.is-fade:hover { opacity: .4; }
.fogv2-cap.is-slide { transition: transform 240ms var(--ez-ui); }
.fogv2-cap.is-slide:hover { transform: translateX(8px); }
.fogv2-flow { font-size: 11px; letter-spacing: .07em; color: #5e6b7a; }
.fogv2-flow b { font-weight: 400; color: var(--on-dark); transition: color 120ms var(--ez-ui); }
.fogv2-flow b:hover { color: var(--acc); }
.fogv2-bubble { font-family: var(--f-text); background: var(--dark-3); border-radius: 6px; padding: 9px 12px;
  font-size: 12.5px; line-height: 1.45; color: var(--on-dark);
  transition: transform 240ms var(--ez-ui), background 240ms var(--ez-ui); }
.fogv2-bubble:hover { transform: translateX(6px); background: #2a2f38; }
.fogv2-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fogv2-chip { border: 1px solid #3a4048; border-radius: 6px; padding: 5px 10px;
  font-size: 10.5px; letter-spacing: .06em; color: var(--on-dark-2); }
.fogv2-chip.is-hi { color: var(--on-dark); }
.fogv2-chip.is-ok { color: #46966f; }
[data-card-idx="4"] .fogv2-chip { transition: border-color 240ms var(--ez-ui), background 240ms var(--ez-ui); }
[data-card-idx="4"] .fogv2-chip:hover { border-color: var(--acc); }
[data-card-idx="4"] .fogv2-chip.is-ok:hover { border-color: #3a4048; background: rgba(48, 130, 92, .16); }
.fogv2-route { font-size: 10.5px; letter-spacing: .06em; color: var(--on-dark-2);
  transition: padding-left 240ms var(--ez-ui); }
.fogv2-route b { font-weight: 400; color: var(--on-dark); }
.fogv2-route:hover { padding-left: 8px; }
.fogv2-row { font-size: 10.5px; letter-spacing: .06em; color: var(--on-dark-2);
  padding: 3px 6px; margin: -3px -6px; border-radius: 4px; transition: background 120ms var(--ez-ui); }
.fogv2-row.is-hi { color: var(--on-dark); }
.fogv2-row:hover { background: var(--dark-3); }
/* the receptionist's mark warms under the pointer; the bar chart stretches */
[data-card-idx="2"] .fogv2-mark { transition: filter 240ms var(--ez-ui); }
[data-card-idx="2"] .fogv2-mark:hover { filter: drop-shadow(0 0 12px rgba(237, 132, 44, .3)); }
[data-card-idx="5"] .fogv2-mark { transform-origin: 50% 100%; transition: transform 240ms var(--ez-ui); }
[data-card-idx="5"] .fogv2-mark:hover { transform: scaleY(1.06); }

/* ---- per-card wash, outer glow and hover border ---- */
.fogv2-card[data-card-idx="0"] { --fogv2-wash: radial-gradient(110% 80% at 80% 0%, rgba(237, 132, 44, .09), transparent 60%); --fogv2-glow: rgba(237, 132, 44, .13); --fogv2-hover: rgba(237, 132, 44, .55); }
.fogv2-card[data-card-idx="1"] { --fogv2-wash: radial-gradient(110% 80% at 50% 0%, rgba(171, 153, 116, .10), transparent 60%); --fogv2-glow: rgba(171, 153, 116, .12); --fogv2-hover: rgba(171, 153, 116, .55); }
.fogv2-card[data-card-idx="2"] { --fogv2-wash: radial-gradient(110% 80% at 78% 4%, rgba(74, 99, 125, .20), transparent 60%); --fogv2-glow: rgba(74, 99, 125, .25); --fogv2-hover: rgba(116, 150, 183, .6); }
.fogv2-card[data-card-idx="3"] { --fogv2-wash: radial-gradient(110% 80% at 85% 100%, rgba(175, 75, 17, .14), transparent 60%); --fogv2-glow: rgba(175, 75, 17, .16); --fogv2-hover: rgba(237, 132, 44, .5); }
.fogv2-card[data-card-idx="4"] { --fogv2-wash: radial-gradient(110% 80% at 50% 100%, rgba(48, 130, 92, .11), transparent 60%); --fogv2-glow: rgba(48, 130, 92, .14); --fogv2-hover: rgba(70, 150, 111, .55); }
.fogv2-card[data-card-idx="5"] { --fogv2-wash: radial-gradient(110% 80% at 50% 40%, rgba(132, 148, 166, .11), transparent 60%); --fogv2-glow: rgba(132, 148, 166, .14); --fogv2-hover: rgba(132, 148, 166, .6); }
.fogv2-card[data-card-idx="6"] { --fogv2-wash: radial-gradient(110% 80% at 82% 0%, rgba(228, 179, 63, .08), transparent 60%); --fogv2-glow: rgba(228, 179, 63, .10); --fogv2-hover: rgba(228, 179, 63, .55); }
.fogv2-card[data-card-idx="7"] { --fogv2-wash: radial-gradient(110% 80% at 50% 10%, rgba(201, 48, 41, .09), transparent 60%); --fogv2-glow: rgba(201, 48, 41, .12); --fogv2-hover: rgba(217, 99, 87, .55); }
.fogv2-card[data-card-idx="8"] { --fogv2-wash: radial-gradient(110% 80% at 50% 96%, rgba(237, 132, 44, .08), transparent 60%); --fogv2-glow: rgba(237, 132, 44, .11); --fogv2-hover: rgba(237, 132, 44, .55); }
.fogv2-card[data-card-idx="9"] { --fogv2-wash: radial-gradient(110% 80% at 50% 0%, rgba(94, 107, 122, .14), transparent 60%); --fogv2-glow: rgba(94, 107, 122, .18); --fogv2-hover: rgba(132, 148, 166, .5); }

/* ---- the panel's own chrome ---- */
.fogv2-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; padding: 36px 56px;
  animation: fogv2In 720ms var(--ez-burn) 60ms backwards; }
.fogv2-bar > svg { flex: none; width: 118px; height: 37px; }
.fogv2-barr { display: flex; align-items: center; gap: 20px; }
.fogv2-idx { font-size: 11px; letter-spacing: .08em; color: var(--on-dark-2); }
.fogv2-call { background: var(--acc); color: var(--acc-ink); font-weight: 700; font-size: 14px;
  padding: 10px 18px; border-radius: 6px; text-decoration: none; white-space: nowrap;
  transition: background 120ms var(--ez-ui); }
.fogv2-call:hover { background: #e07a20; color: var(--acc-ink); }

.fogv2-hero { position: absolute; top: 92px; left: 0; right: 0; z-index: 4;
  text-align: center; pointer-events: none; padding: 0 24px;
  animation: fogv2In 720ms var(--ez-burn) 160ms backwards; }
.fogv2-kick { display: block; font-size: 11px; letter-spacing: .12em; color: #5e6b7a; }
.fogv2-h { font-size: clamp(32px, 2.6vw + 15px, 42px); line-height: 1.02; letter-spacing: -.014em;
  margin: 10px 0 0; color: var(--on-dark); }
.fogv2-lede { max-width: 560px; margin: 12px auto 0; font-size: 14px; line-height: 1.5;
  color: var(--on-dark-2); text-wrap: pretty; }

.fogv2-ctrl { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 5;
  display: grid; justify-items: center; gap: 8px;
  animation: fogv2In 720ms var(--ez-burn) 260ms backwards; }
.fogv2-ctrlrow { display: flex; align-items: flex-end; gap: 14px; }
.fogv2-hint { color: var(--on-dark-2); margin: 0; }
.fogv2-arrow { width: 38px; height: 38px; border: 1.5px solid #3a4048; border-radius: 6px;
  background: transparent; color: var(--on-dark); font-size: 17px; line-height: 1; cursor: pointer;
  transition: border-color 120ms var(--ez-ui); }
.fogv2-arrow:hover { border-color: #878e96; }
.fogv2-ticks { display: flex; align-items: flex-end; gap: 6px; }
.fogv2-tick { width: 30px; background: transparent; border: none; padding: 4px 0; cursor: pointer;
  display: grid; gap: 4px; justify-items: stretch;
  font-size: 10px; letter-spacing: .06em; color: #5e6b7a; transition: color 120ms var(--ez-ui); }
.fogv2-tick > span { display: block; height: 2px; background: #2b3038; transition: background 240ms var(--ez-ui); }
.fogv2-tick:hover { color: var(--on-dark); }
.fogv2-tick[aria-current="true"] { color: var(--acc); }
.fogv2-tick[aria-current="true"] > span { background: var(--acc); }
.fogv2-name { font-size: 10.5px; letter-spacing: .1em; color: var(--on-dark-2); min-height: 1.2em; }

/* the design puts these at bottom: 32px, which it could: it was a standalone
   screen. This page carries a fixed chat launcher in the bottom-right that
   reserves the last 64px, and at 32px it sat straight through "SET UP END TO
   END". Both labels lift together so the pair stays level. */
.fogv2-corner { position: absolute; bottom: 84px; z-index: 5; font-size: 10px;
  letter-spacing: .1em; color: #5e6b7a; }
.fogv2-corner.is-l { left: 56px; }
.fogv2-corner.is-r { right: 56px; }

.fogv2-grain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6;
  opacity: .05; mix-blend-mode: screen; pointer-events: none; }

/* ---- the tail: reduced-motion list, then the section's own CTA ---- */
.fogv2-list { display: none; }
.fogv2-foot { font-size: 17px; line-height: 1.5; margin: 0 auto; max-width: 44ch; color: var(--on-dark); }
.fogv2-cta { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .fogv2-bar { padding: 20px 24px; }
  .fogv2-bar > svg { width: 96px; height: 30px; }
  .fogv2-idx { display: none; }
  .fogv2-hero { top: 80px; }
  .fogv2-persp { perspective: 1200px; }
  .fogv2-corner.is-l { left: 24px; }
  .fogv2-corner.is-r { right: 24px; }
  .fogv2-grain { opacity: .04; }
}
@media (max-width: 700px) {
  /* ten ticks plus two arrows is 391px of control on a 390px screen, which wraps
     and strands the forward arrow on its own line. Tighten the row instead. */
  .fogv2-ctrlrow { gap: 8px; }
  .fogv2-ticks { gap: 3px; }
  .fogv2-tick { width: 26px; }
  /* the corner labels sit on the index strip at this width; the strip wins */
  .fogv2-corner { display: none; }
  /* and with the panel this narrow the chat launcher reaches the middle of the
     strip — at bottom: 24px it covered the forward arrow and ticks 08 to 10,
     which is a control you cannot press, not a cosmetic overlap */
  .fogv2-ctrl { bottom: 84px; }
}
/* motion off: the ring is a 3D object you have to drag, which is worse than
   plain text for anyone who asked for less of it, so the stage and its chrome
   go and the same ten services render as a readable grid.
   What does NOT go is the heading. The hero block lives inside the panel
   because the design positions it there; hiding the whole panel took the
   section's h2 with it, which left the list unheaded and pointed
   aria-labelledby at a display:none element. The panel collapses to normal flow
   instead, and the hero comes back into it. */
@media (prefers-reduced-motion: reduce) {
  .fogv2 { height: auto; min-height: 0; overflow: visible; background: none;
    padding: var(--sec-pad) var(--pad-x) 0; text-align: center; }
  .fogv2-mist, .fogv2-dial, .fogv2-point, .fogv2-stage,
  .fogv2-ctrl, .fogv2-corner, .fogv2-grain, .fogv2-bar { display: none; }
  .fogv2-hero { position: static; padding: 0; animation: none; }
  .fogv2-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px;
    text-align: left; list-style: none; }
  .fogv2-list li { border: 1.5px solid var(--dark-line); border-radius: 10px; background: var(--dark-2); padding: 20px; }
  .fogv2-list i { font-family: var(--f-mono); font-style: normal; font-size: 11.5px; letter-spacing: .06em; color: var(--acc); }
  .fogv2-list h3 { font-family: var(--f-display); font-weight: 650; font-variation-settings: "wdth" 110; font-size: 19px;
    margin: 8px 0 0; color: var(--on-dark); }
  .fogv2-list p { font-size: 14px; line-height: 1.5; margin: 8px 0 0; color: var(--on-dark-2); }
  .fogv2-list em { font-style: normal; color: var(--acc); }
  .fogv2-foot { margin-top: 40px; }
}

/* ---- 04 the math loop ---- */
/* THE MATH — eight numbers on a rail that never stops and never ends.
   Third cut (owner, 2026-08-17): the arrows and the dots are gone and the strip
   loops. It drifts left on its own, the page's own scrolling pushes it along,
   a hover holds it still, and a drag steers it either way with a little
   momentum behind the release.

   The loop is two copies of the eight cards in one scroller. The engine adds a
   few pixels to scrollLeft each frame and subtracts one set's width whenever it
   passes it, which lands on identical pixels — so the seam cannot be seen and
   there is no end to reach. The second set is aria-hidden and out of the tab
   order: it is the same eight statistics, and a screen reader should meet each
   one once.

   No scroll-snap here. Snapping fights a rail that is always moving, and with
   no card ever being "the current one" there is nothing for it to snap to. */
.math-h { font-size: clamp(26px, 3.4vw, 46px); line-height: 1.04; letter-spacing: -.025em;
  text-align: center; text-wrap: balance; max-width: 1000px; margin: 0 auto; }

/* the rail runs to both screen edges while the headline stays on the measure,
   so the section reads full-bleed like the rest of the page */
.stat-vp { margin: 30px calc(var(--pad-x) * -1) 0; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.stat-vp::-webkit-scrollbar { display: none; }
.stat-track { display: flex; gap: 20px; width: max-content; padding: 0 var(--pad-x); }
.stat-card { position: relative; flex: none; width: min(420px, 78vw); aspect-ratio: 16 / 10; border-radius: 8px;
  overflow: hidden; background: var(--dark-2); }
.stat-card::after { content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
  border: 1px solid rgba(231, 234, 236, .09); box-shadow: inset 0 1px 0 rgba(231, 234, 236, .06); }
.stat-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* while a mouse is dragging the rail, the cursor says so and the cards stop
   swallowing the drag as a text selection */
.stat-vp.is-live { cursor: grab; }
.stat-vp.is-dragging, .stat-vp.is-dragging .stat-card { cursor: grabbing; user-select: none; }
/* two scrims, not one: the figure sits right of centre in every render, so the
   copy needs the left third dark for the type and the bottom edge dark for the
   source line, and a single flat overlay would grey out the render to get both */
.stat-veil { position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(9, 12, 15, .88) 0%, rgba(9, 12, 15, .34) 14%, rgba(9, 12, 15, 0) 30%),
    linear-gradient(100deg, rgba(9, 12, 15, .93) 0%, rgba(9, 12, 15, .74) 24%, rgba(9, 12, 15, .24) 45%, rgba(9, 12, 15, 0) 64%); }
.stat-copy { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  gap: 10px; padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 30px); }
.stat-kicker { display: block; font-size: 11px; letter-spacing: .15em; color: var(--on-dark-2); }
.stat-n { margin-top: 8px; font-weight: 800; font-size: clamp(40px, 4.6vw, 62px); line-height: .86;
  letter-spacing: -.035em; color: var(--acc); }
.stat-u-x { font-size: .5em; letter-spacing: -.02em; }
.stat-u-p { font-size: .68em; letter-spacing: -.02em; }
.stat-line { margin-top: 12px; font-family: var(--f-display); font-weight: 650; font-variation-settings: "wdth" 105;
  font-size: clamp(15.5px, 1.4vw, 20px); line-height: 1.24; letter-spacing: -.015em; color: var(--on-dark);
  max-width: 17ch; text-wrap: pretty; }
.stat-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.stat-src-k { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-2); }
.stat-src { font-family: var(--f-display); font-weight: 600; font-size: 13px; line-height: 1.4; text-transform: none;
  letter-spacing: 0; max-width: 26ch; text-decoration: underline; text-decoration-color: rgba(237, 132, 44, .45);
  text-underline-offset: 4px; }
.stat-src:hover { text-decoration-color: currentColor; }
.stat-src.is-plain { font-size: 12.5px; line-height: 1.4; color: #c3cad2; text-decoration: none; }
.stat-src .src-out { display: inline; margin-left: 5px; vertical-align: -1px; }

/* ---- 05 getting found ----
   Same frame and same type as the window-and-answer band above: one boxed media
   panel beside one hook, so the page's two "here is the thing working" sections
   read as a pair rather than as two studios. The cut-corner .fog-win window went
   with the old screenshot — it was the last thing using it. */
.found { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px);
  align-items: center; overflow: hidden; }
/* The piece is a 1080-square, inset rather than run to the column edge: at full
   width it swallows the section and the headline stops being the subject. */
.found-win { position: relative; aspect-ratio: 1; width: min(100%, 460px); margin-inline: auto;
  border: 1px solid var(--dark-line); border-radius: 14px; overflow: hidden; background: #f7f4ee; }
.found-canvas { display: block; width: 100%; height: 100%; }
.found-win img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* ---- 06 book a demo ---- *
   The section is a stack: WebGL fog (1), a scrim that keeps the copy column off the
   flare (2), the 2D switchboard (3), the content (4), the grain (6). The two canvases
   start transparent and are faded in by their own engines, so a blocked module leaves
   the gradient below and nothing half-painted. */
.demo { position: relative; overflow: clip; display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: center;
  background: radial-gradient(120% 90% at 82% -10%, rgba(237, 132, 44, .14), transparent 55%),
              linear-gradient(178deg, var(--dark), var(--dark-2) 90%); }
.demo-l { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.demo-atmo { z-index: 1; opacity: 0; transition: opacity 1.2s ease .1s; }
.demo-scrim { z-index: 2; background: linear-gradient(92deg, rgba(17, 20, 25, .36), rgba(17, 20, 25, 0) 55%); }
.demo-live { z-index: 3; opacity: 0; transition: opacity .9s ease .1s; }
.demo::after { z-index: 6; }
/* balanced, because "stop losing" is one idea and a ragged break puts "stop" alone
   at the end of a line — the export balances this heading for the same reason */
.demo h2 { font-size: clamp(28px, 3.9vw, 54px); line-height: 1.04; margin: 18px 0 0; max-width: 18ch;
  text-wrap: balance; }
.demo .lede { font-size: 17px; line-height: 1.55; margin: 20px 0 0; max-width: 46ch; color: var(--on-dark-2); }
.demo-beacon { display: block; margin-bottom: 26px; }
/* the two owner-locked guarantees, which used to ride the hero's rotating line.
   A promise reads as a promise next to the button it removes the risk from. */
.demo-guar { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.demo-guar li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.5; color: var(--on-dark); }
.demo-guar li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--acc); }
.demo-cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
/* booking lives on its own page — the calendar was too heavy to sit in the section */
.demo-note { font-size: 14px; line-height: 1.5; margin-top: 16px; color: var(--on-dark-2); }
.demo-note a { color: var(--acc); text-underline-offset: 3px; }
/* "the line is open" — the section's one live claim, so the dot is steady, not blinking */
.demo-open { display: flex; align-items: center; gap: 10px; margin: 40px 0 0;
  font-family: var(--f-text); font-weight: 600; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--on-dark-2); }
.demo-dot { width: 8px; height: 8px; border-radius: 50%; background: #46966f; flex: none; }
/* the cable arcs over the whitespace above the copy, so the section needs height to
   arc through. Two columns only — stacked, the same rule is just dead space.
   Owner, 2026-08-15: the contact band fills the screen. It was capped at
   min(88vh, 820px), which left a strip of the section above it showing on a laptop
   and stopped growing entirely past ~930px tall. svh, not vh, so a mobile browser's
   retracting toolbar cannot make it taller than the visible viewport. */
@media (min-width: 1024px) {
  .demo { min-height: 100vh; min-height: 100svh; align-content: center; }
}
/* the card is near-opaque: the cable and the rays run behind this copy otherwise.
   The top edge is brighter than the rest — it is the end the cable arrives at. */
.card { border: 1.5px solid var(--dark-line); border-top: 2px solid var(--line-2); border-radius: 10px;
  background: rgba(26, 30, 36, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 28px; box-shadow: 0 24px 70px rgba(0, 0, 0, .45); transition: box-shadow 500ms ease; }
/* the board answered: the card takes the call for as long as the ring lasts */
.card[data-demo-glow] { box-shadow: 0 0 0 1px rgba(237, 132, 44, .45), 0 24px 70px rgba(0, 0, 0, .45); }
.card h3 { font-size: clamp(22px, 2.2vw, 26px); line-height: 1.1; margin: 0; }
.card-sub { font-size: 14.5px; line-height: 1.5; margin: 8px 0 22px; color: var(--on-dark-2); }
.fields { display: flex; flex-direction: column; gap: 14px; }
.fields label { display: block; }
.fl { display: block; margin-bottom: 6px; color: var(--on-dark-2); }
.fog-in { font-family: var(--f-text); font-size: 16px; width: 100%; padding: 11px 13px; border-radius: 6px;
  border: 1.5px solid var(--dark-line); background: var(--dark); color: var(--on-dark); min-height: 44px;
  transition: border-color 120ms var(--ez-ui); }
.fog-in:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-color: var(--line-2); }
.fog-in::placeholder { color: var(--on-dark-2); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips input { position: absolute; opacity: 0; width: 0; height: 0; }
.chips label { font-size: 14px; font-weight: 600; padding: 9px 15px; border-radius: 6px; border: 1.5px solid var(--dark-line);
  color: var(--on-dark-2); cursor: pointer; min-height: 44px; display: inline-flex; align-items: center;
  transition: border-color 120ms var(--ez-ui), color 120ms var(--ez-ui), background-color 120ms var(--ez-ui); }
.chips label:hover { border-color: var(--line-2); color: var(--on-dark); }
.chips input:checked + label { border-color: var(--acc); color: var(--acc-ink); background: var(--acc); }
.chips input:focus-visible + label { outline: 2px solid var(--acc); outline-offset: 3px; }
.fnote { font-size: 12.5px; line-height: 1.45; margin: 0; color: var(--on-dark-2); }
.ferr { font-size: 14px; color: #f6a06a; margin: 0; }
.lead-send { justify-content: center; padding: 14px; }
.sent { min-height: 340px; display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 12px; }
.sent h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.1; margin: 0; }
.sent p { font-size: 15.5px; line-height: 1.5; margin: 0; max-width: 34ch; color: var(--on-dark-2); }
.sent p a { color: var(--acc); text-underline-offset: 3px; }
/* the tick draws itself once the card has swapped — the receipt for the send */
.sent-tick { display: block; margin-bottom: 10px; }
.sent-tick path { animation: fog-draw 500ms var(--ez-burn) 150ms both; }
@keyframes fog-draw { to { stroke-dashoffset: 0; } }
.hpx { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- footer ---- */
/* Owner, 2026-08-15: shorter, and every link on one line. 26px of padding and a
   28px social button made a 78px bar under a full-height contact section; 14px and
   a 24px button make it 52px. nowrap holds the single row — but only from 768px up.
   Below that the row cannot fit without a sideways scroll, and WCAG 2.2 reflow
   (1.4.10) forbids buying one line at that price, so narrow screens still wrap. */
.ft { border-top: 1px solid var(--dark-line); padding: 14px var(--pad-x); display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap; font-size: 13px; color: var(--on-dark-2); }
@media (min-width: 768px) { .ft { flex-wrap: nowrap; white-space: nowrap; } }
.ft a { color: var(--acc); text-decoration: none; }
.ft a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ft > svg { flex: none; }
.ft-end { margin-left: auto; display: flex; align-items: center; gap: 16px; }
/* footer twin of .nav-social: slate at rest like the rest of the footer type,
   flare on hover. No underline — there is no text under it to underline. */
/* 28px box, not smaller: a3e1799 sized it so the target clears WCAG 2.2 2.5.8 even
   though the 20px glyph does not, and the shorter bar is bought from padding, not
   from the hit area. The negative block margin keeps it from setting the height. */
.ft a.ft-social { display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin: -6px 0; color: var(--on-dark-2);
  transition: color 120ms var(--ez-ui); }
.ft a.ft-social:hover { color: var(--acc); text-decoration: none; }
.ft a.ft-social svg { display: block; width: 20px; height: 20px; fill: currentColor; }

/* ============ the other public pages ============
   /products, /privacy.html and /thanks.html wear the same system: the study's nav
   on a flat basalt bar (no hero bank behind it), one page head, then content. */
.pg-bar { border-bottom: 1px solid var(--dark-line); background: var(--dark); }
.pg-head { padding: clamp(48px, 6vw, 76px) var(--pad-x) 0; }
.pg-head h1 { font-size: clamp(30px, 4.3vw, 62px); line-height: 1.03; letter-spacing: -.015em; margin: 14px 0 0; max-width: 20ch; }
.pg-head .lede { font-size: 17px; line-height: 1.55; margin: 16px 0 0; max-width: 54ch; color: var(--on-dark-2); }
.pg-cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* long-form copy (privacy) */
.prose { padding: clamp(28px, 4vw, 40px) var(--pad-x) clamp(56px, 7vw, 88px); }
.prose > * { max-width: 78ch; }
.prose p { font-size: 16.5px; line-height: 1.8; margin: 0 0 18px; color: var(--on-dark-2); }
.prose p strong { color: var(--on-dark); font-weight: 700; }
/* Section breaks in a long document. Without these an h2 computes to margin:0
   under the global reset, so a new section is separated from the paragraph
   above it by the same 18px that separates two paragraphs — the terms page
   read as one undifferentiated wall. scroll-margin keeps a #refunds jump from
   landing with the heading against the top edge. */
.prose h2 { font-size: clamp(21px, 2.2vw, 26px); line-height: 1.2; margin: 40px 0 12px;
  color: var(--on-dark); scroll-margin-top: 24px; }
.prose h2:first-of-type { margin-top: 28px; }
.prose a { color: var(--acc); text-underline-offset: 3px; }
.prose .stamp { font-family: var(--f-mono); font-size: 12.5px; line-height: 1.7; color: var(--on-dark-2); }
.back { display: inline-block; margin-top: 8px; color: var(--acc); text-decoration: none; font-weight: 600; }
.back:hover { text-decoration: underline; text-underline-offset: 3px; }

/* the confirmation page — one column, centred, nothing to do but the next step */
.tk { min-height: 72svh; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: clamp(56px, 8vw, 96px) var(--pad-x); }
.tk h1 { font-size: clamp(32px, 4.8vw, 68px); line-height: 1.03; letter-spacing: -.015em; margin: 14px 0 0; }
.tk p { font-size: 17px; line-height: 1.55; margin: 16px auto 0; max-width: 46ch; color: var(--on-dark-2); }
.tk .pg-cta { justify-content: center; }

/* ---- the add-on catalogue ---- */
.pr-tools { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: space-between;
  padding: clamp(28px, 3.6vw, 44px) var(--pad-x) 0; }
.pr-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pr-pill { font-family: var(--f-text); font-size: 14px; font-weight: 600; padding: 9px 15px; border-radius: 6px;
  border: 1.5px solid var(--dark-line); background: transparent; color: var(--on-dark-2); cursor: pointer;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: border-color 120ms var(--ez-ui), color 120ms var(--ez-ui), background-color 120ms var(--ez-ui); }
.pr-pill:hover { border-color: var(--line-2); color: var(--on-dark); }
.pr-pill-active, .pr-pill[aria-pressed="true"] { border-color: var(--acc); background: var(--acc); color: var(--acc-ink); }
.pr-search { position: relative; flex: 1 1 260px; max-width: 340px; }
.pr-search input { font-family: var(--f-text); font-size: 16px; width: 100%; min-height: 44px; padding: 11px 40px 11px 13px;
  border-radius: 6px; border: 1.5px solid var(--dark-line); background: var(--dark-2); color: var(--on-dark); }
.pr-search input::placeholder { color: var(--on-dark-2); }
.pr-search input:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-color: var(--line-2); }
.pr-search svg { position: absolute; right: 13px; top: 50%; width: 18px; height: 18px; translate: 0 -50%;
  color: var(--on-dark-2); pointer-events: none; }
.pr-count { padding: 14px var(--pad-x) 0; color: var(--on-dark-2); font-size: 13.5px; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;
  padding: clamp(20px, 2.6vw, 28px) var(--pad-x) clamp(56px, 7vw, 88px); }
.pr-card { border: 1.5px solid var(--dark-line); border-radius: 10px; background: var(--dark-2); padding: 26px;
  display: flex; flex-direction: column;
  transition: translate 240ms var(--ez-ui), border-color 240ms var(--ez-ui); }
.pr-card:hover { translate: 0 -4px; border-color: var(--line-2); }
.pr-icon { width: 44px; height: 44px; color: var(--acc); }
.pr-icon svg { width: 100%; height: 100%; }
.pr-card h3 { font-family: var(--f-display); font-weight: 650; font-variation-settings: "wdth" 110; font-size: 21px;
  line-height: 1.12; letter-spacing: -.005em; margin: 16px 0 0; }
.pr-tagline { font-size: 15px; line-height: 1.5; margin: 8px 0 0; color: var(--on-dark-2); }
.pr-bullets { margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.pr-bullets li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.5; color: var(--on-dark-2); }
.pr-bullets li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--acc); }
.pr-foot { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pr-cta { font-size: 15px; padding: 12px 20px; }
/* the chip that says which add-on the form is about */
.pr-chip { display: none; align-items: center; gap: 10px; margin-bottom: 14px; padding: 9px 13px; border-radius: 6px;
  border: 1.5px solid var(--acc); background: rgba(237, 132, 44, .12); font-size: 14px; }
.pr-chip button { background: none; border: 0; color: var(--acc); cursor: pointer; font-size: 18px; line-height: 1;
  padding: 4px 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

/* ---- motion primitives ---- */
@keyframes fog-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.lift { transition: translate 240ms var(--ez-ui), border-color 240ms var(--ez-ui); }
.lift:hover { translate: 0 -4px; border-color: var(--line-2); }

/* ============ scene layers ============
   The three parallax scenes the study shipped with are all gone now, each
   replaced by the thing it was standing in for: 01 by the hero's atmosphere
   canvas (2026-08-11), 03 by the demo switchboard's two (2026-08-06), and 02 by the
   FINAL first-response scope above, which owns its own layers under `.stmt-`.
   The shared `.px-scene / .px-l / .px-vig / .px-grain` primitives went with the
   last of them — nothing referenced them any more. */

/* Scenes sit behind their section's content, never over it. Named children only:
   a blanket `> *:not(canvas)` also catches the absolutely-positioned scrim and
   drops it back into flow, which pushes the section down by its own height. */
.demo > .demo-copy, .demo > .card { position: relative; z-index: 4; }

/* ---- motion off ----------------------------------------------------------
   The scenes are compositions first and animations second: with motion off every
   layer keeps its painted state, so the page loses the drift and nothing else. */
@media (prefers-reduced-motion: reduce) {
  /* the video holds its poster: it carries no autoplay attribute and home.js
     never calls play() with motion off, so there is nothing to switch off here */
  /* the scope holds its painted state: the engine bails to buildStatic() and the
     three ambient loops (sweep band, grain, live dot) stop where they are. */
  .stmt-scan, .stmt-grain, .stmt-hud-dot { animation: none !important; }
  /* the two demo engines hold a still frame of their own (both bail out of
     schedule() when the query matches), so the section keeps its composition. The
     card must not keep answering, though: that glow is a timer, not a transition. */
  .card, .card[data-demo-glow] { transition: none; box-shadow: 0 24px 70px rgba(0, 0, 0, .45); }
  .sent-tick path { animation-duration: 120ms; }
  .lift:hover, .fog-btn:hover { translate: none; }
  /* the math rail does not drift with motion off — home.js never starts the
     engine — so all that is left to say here is that it must not tween either */
  .stat-vp { scroll-behavior: auto; }
  /* the bar still shrinks — it is a size, not a movement — but it arrives there
     without an animation, and the menu appears rather than fades */
  .hero > .nav, .nav-brand svg, .nav-menu, .nav-drop-c { transition: none; }
}
.static .stmt-scan, .static .stmt-grain, .static .stmt-hud-dot { animation: none !important; }

/* ---- widths ----------------------------------------------------------------
   The study is a 1180px canvas. Below it the three two-column grids collapse in
   the order the page reads, and the phone drops the blur-heavy scene layers —
   blur compositing is the phone's cost centre and mobile is the binding budget. */
@media (max-width: 1023px) {
  .slip-g { grid-template-columns: 1fr; gap: 32px; }
  .slip-side { position: static; }
  .found, .demo { grid-template-columns: 1fr; gap: 36px; }
  /* One column, so the card is below the beacon rather than beside it. The
     atmosphere's text-safe ellipse is centred for a left-hand copy column and
     would leave the headline sitting in the flare, and the scrim is a left-to-
     right falloff for a split that no longer exists. home.js gates the engines on
     the same breakpoint — the two must not drift apart. */
  .demo-atmo, .demo-scrim { display: none; }
  /* the hero's Call button is ~180px the bar did not carry before, so below
     1024 the links no longer fit beside it: they take their own row, and the
     plain number goes because the button already is the number. */
  .hero .nav { flex-wrap: wrap; gap: 14px 18px; padding-bottom: 18px; }
  .hero .nav-links { order: 3; width: 100%; margin-left: 0; }
  .hero .nav-call { margin-right: 0; }
  .hero .nav-tel { display: none; }
  /* the film plays here too since 2026-08-16 — the portrait cut, which
     home.js picks on this same breakpoint. */
}
@media (max-width: 767px) {
  .nav { flex-wrap: wrap; gap: 14px 18px; padding-bottom: 18px; }
  .nav-brand { margin-right: auto; }
  .nav-brand svg { width: 108px; height: 34px; }
  .nav-links { order: 3; width: 100%; display: flex; gap: 18px; flex-wrap: wrap; }
  .slip-card { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px; }
  /* one card at a time on a phone, with the next one's edge showing so the rail
     reads as a rail; the gap closes because 20px of it is dead space at 78vw.
     The controls grow instead: 38px is under the 44px touch target on a phone. */
  .stat-track { gap: 12px; }
  .stat-card { aspect-ratio: 4 / 3; }
  .fog-grain::after { opacity: .04; }
  /* backdrop blur behind a full-width card is the phone's cost centre, and with
     the atmosphere already off there is nothing behind it left to blur */
  .card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--dark-2); }
}