/* ============================================================
   JENSON DIGITAL — "BUILT BEFORE YOU BUY."
   Concept: the proof engine. A modern one-man web studio whose
   pitch is literal: the site assembles itself in front of you —
   a yellow print-head carriage races the page, snapping
   wireframe into finished work.
   Skin: cool graphite + concrete (no warm voids), ONE accent:
   work-zone yellow — the color of the trades it serves.
   Type: Bricolage Grotesque (display, variable) · Instrument
   Sans (body) · IBM Plex Mono (spec labels).
   ============================================================ */

/* ============ TOKENS (retuned from _brain/tokens.md) ============ */
:root{
  /* color — cool machine neutrals, never #FFF/#000 */
  --surface:#F1F1ED;
  --surface-2:#E7E7E1;
  --card:#FAFAF7;
  --ink:#111214;
  --muted:color-mix(in srgb,var(--ink) 62%,transparent);
  --faint:color-mix(in srgb,var(--ink) 40%,transparent);
  --hairline:color-mix(in srgb,var(--ink) 13%,transparent);
  --line-strong:color-mix(in srgb,var(--ink) 24%,transparent);
  --accent:#FFE100;                    /* work-zone yellow */
  --on-accent:#111214;
  --err:#C0392B;

  /* spacing (--sN = N×4px) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px;
  --s8:32px; --s12:48px; --s16:64px; --s24:96px; --s32:128px;
  --section:clamp(80px,12vw,190px);

  /* layout */
  --maxw:1280px; --maxw-wide:1460px; --pad-x:clamp(20px,5vw,80px);

  /* type */
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --fz-xs:.75rem; --fz-sm:.875rem; --fz-base:1rem; --fz-md:1.125rem;
  --fz-lg:1.25rem; --fz-xl:1.5rem; --fz-2xl:1.875rem; --fz-3xl:2.25rem;
  --h1:clamp(2.75rem,7vw,6rem); --h2:clamp(2.1rem,4.6vw,3.9rem); --h3:clamp(1.4rem,2.6vw,2.1rem);
  --lh-tight:.96; --lh-snug:1.18; --lh-body:1.6; --measure:64ch;
  --ls-tight:-0.035em; --ls-label:.08em;

  /* radius — machined: near-sharp, pills for tags only */
  --r-sm:2px; --r-md:4px; --r-card:6px; --r-pill:999px;

  /* shadow — cool-tinted, sparse (surfaces are flat) */
  --sh-sm:0 1px 2px rgba(17,18,20,.07),0 1px 1px rgba(17,18,20,.05);
  --sh-md:0 6px 18px rgba(17,18,20,.10),0 2px 5px rgba(17,18,20,.06);
  --sh-sheet:0 24px 60px -18px rgba(17,18,20,.4);

  /* motion — two house curves: the rail move & the settle */
  --t-fast:140ms; --t-base:220ms; --t-ui:280ms; --t-slow:420ms;
  --ease-rail:cubic-bezier(.83,0,.17,1);   /* carriage: hard in-out */
  --ease-out:cubic-bezier(.16,1,.3,1);     /* settle: expo glide */
  --press:.96;

  /* spectacle layers */
  --z-sticky:100; --z-menu:900; --z-grain:9996; --z-cursor:9998; --z-preloader:9999;
  --grain-opacity:.045;

  --ring:0 0 0 2px var(--surface),0 0 0 4px var(--ink);
}

/* graphite flip — dark sections invert the roles */
[data-theme="ink"]{
  --surface:#111214;
  --surface-2:#17181B;
  --card:#1C1D21;
  --ink:#F1F1ED;
  --hairline:color-mix(in srgb,var(--ink) 15%,transparent);
  --line-strong:color-mix(in srgb,var(--ink) 27%,transparent);
}

/* ============ RESET / BASE ============ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{
  background:var(--surface); color:var(--ink);
  font-family:var(--font-body); font-size:var(--fz-base); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,video{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }
input,textarea,select{ font-size:16px; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }
:where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:none; box-shadow:var(--ring); border-radius:var(--r-sm); }
::selection{ background:var(--accent); color:var(--on-accent); }
.num{ font-variant-numeric:tabular-nums; }

.container{ max-width:var(--maxw-wide); margin-inline:auto; padding-inline:var(--pad-x); }
.section{ padding-block:var(--section); position:relative; }

/* skip link */
.skip{ position:fixed; top:-200px; left:var(--s4); z-index:10000; background:var(--ink); color:var(--surface);
  padding:var(--s3) var(--s4); font-family:var(--font-mono); font-size:var(--fz-sm); transition:top var(--t-base) var(--ease-out); }
.skip:focus{ top:var(--s4); }

/* ============ GRAIN (digital noise, subtle) ============ */
.grain::after{
  content:""; position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none;
  opacity:var(--grain-opacity); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* ============ TYPE HELPERS ============ */
.mono{ font-family:var(--font-mono); font-size:var(--fz-xs); letter-spacing:var(--ls-label); text-transform:uppercase; }
.display{ font-family:var(--font-display); letter-spacing:var(--ls-tight); line-height:var(--lh-tight); }

/* run header — machined section head: rule + tick + labels + the head block */
.runhead{ position:relative; border-top:2px solid var(--ink); margin-bottom:clamp(28px,5vw,56px); }
.runhead__row{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s4); padding-top:var(--s3); flex-wrap:wrap; }
.runhead__no{ font-family:var(--font-mono); font-size:var(--fz-xs); letter-spacing:var(--ls-label); text-transform:uppercase; }
.runhead__title{ font-family:var(--font-mono); font-size:var(--fz-xs); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--muted); }
.runhead__head{ /* the yellow print-head block that runs the rule when the section assembles */
  position:absolute; top:-7px; left:0; width:34px; height:12px; background:var(--accent);
  transform:translateX(0); opacity:0; pointer-events:none;
}

/* wireframe→snap assembly states (JS adds .asm-in)
   — every hidden initial state is gated behind html.js so a
   no-JS visit renders the complete page */
.js [data-asm]{ opacity:0; }
[data-asm].asm-wire{ opacity:1; outline:1px dashed var(--line-strong); outline-offset:6px; }
[data-asm].asm-in{ opacity:1; outline-color:transparent; transition:outline-color .4s var(--ease-out); }
.rm [data-asm]{ opacity:1; }

/* masked line reveals (house plumbing) */
.line-mask{ overflow:hidden; display:block; }
.line-mask > .line-inner{ display:block; }
.js .line-mask > .line-inner{ transform:translateY(115%); }
.js [data-reveal]{ opacity:0; transform:translateY(26px); }
[data-reveal].in{ opacity:1; transform:none; transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.rm [data-reveal]{ opacity:1; transform:none; }
.rm .line-mask > .line-inner{ transform:none; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:var(--s2);
  background:var(--ink); color:var(--surface);
  font-family:var(--font-mono); font-size:var(--fz-sm); letter-spacing:var(--ls-label); text-transform:uppercase;
  padding:1.05em 1.9em; border:1px solid var(--ink); border-radius:var(--r-sm);
  cursor:pointer; position:relative; overflow:hidden; white-space:nowrap;
  transition:transform var(--t-fast) var(--ease-out), color var(--t-base) var(--ease-out);
}
.btn:active{ transform:scale(var(--press)); }
.btn::before{ /* yellow rail-fill on hover */
  content:""; position:absolute; inset:0; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform var(--t-slow) var(--ease-rail); z-index:0;
}
.btn:hover::before{ transform:scaleX(1); }
.btn > *{ position:relative; z-index:1; }
.btn:hover{ color:var(--on-accent); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ color:var(--on-accent); }
.link-mono{
  font-family:var(--font-mono); font-size:var(--fz-sm); letter-spacing:var(--ls-label); text-transform:uppercase;
  border-bottom:1px solid var(--line-strong); padding-bottom:3px;
  background:linear-gradient(var(--ink) 0 0) bottom left / 0% 1px no-repeat;
  transition:background-size var(--t-slow) var(--ease-out);
}
.link-mono:hover{ background-size:100% 1px; }

/* ============ PRELOADER — calibration pass ============ */
.preloader{
  position:fixed; inset:0; z-index:var(--z-preloader); background:var(--ink); color:var(--surface);
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:var(--s8);
}
.js .preloader{ display:flex; } /* never traps a no-JS visitor */
.pl-word{ font-family:var(--font-mono); font-size:var(--fz-xs); letter-spacing:.3em; text-transform:uppercase; color:color-mix(in srgb,var(--surface) 55%,transparent); }
.pl-count{ font-family:var(--font-display); font-weight:700; font-size:clamp(3.4rem,9vw,6.5rem); line-height:1; letter-spacing:var(--ls-tight); font-variant-numeric:tabular-nums; }
.pl-rail{ width:min(360px,64vw); height:2px; background:color-mix(in srgb,var(--surface) 22%,transparent); position:relative; }
.pl-rail i{ position:absolute; inset:0; background:var(--surface); transform:scaleX(0); transform-origin:left; }
.pl-rail b{ position:absolute; top:-6px; left:0; width:26px; height:14px; background:var(--accent); transform:translateX(-13px); }
.preloader.is-done{ pointer-events:none; }

/* ============ CURSOR — the head ============ */
.cursor{ position:fixed; inset:0; pointer-events:none; z-index:var(--z-cursor); }
@media (hover:none){ .cursor{ display:none; } }
.cursor-dot,.cursor-frame{ position:absolute; top:0; left:0; will-change:transform; }
.cursor-dot{ width:10px; height:10px; background:var(--accent); transform:translate(-50%,-50%);
  box-shadow:0 0 0 1px rgba(17,18,20,.35); }
.cursor-frame{
  width:38px; height:38px; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  transition:width .3s var(--ease-out), height .3s var(--ease-out), background-color .3s var(--ease-out);
}
.cursor-frame::before,.cursor-frame::after{
  content:""; position:absolute; inset:0; border:1px solid transparent; transition:border-color .25s;
}
.cursor-frame::before{ border-left-color:currentColor; border-top-color:currentColor; clip-path:polygon(0 0,38% 0,38% 2px,2px 2px,2px 38%,0 38%); }
.cursor-frame::after{ border-right-color:currentColor; border-bottom-color:currentColor; clip-path:polygon(100% 62%,100% 100%,62% 100%,62% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 62%); }
.cursor-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  background:var(--accent); color:var(--on-accent); padding:.3em .7em; opacity:0; transition:opacity .2s; white-space:nowrap; }
.cursor[data-state="link"] .cursor-frame{ width:52px; height:52px; color:var(--ink); }
.cursor[data-state="media"] .cursor-frame,
.cursor[data-state="press"] .cursor-frame{ width:72px; height:72px; color:transparent; }
.cursor[data-state="media"] .cursor-label,
.cursor[data-state="press"] .cursor-label{ opacity:1; }
.cursor[data-state="hidden"]{ opacity:0; }
html.has-custom-cursor, html.has-custom-cursor *{ cursor:none !important; }

/* ============ MASTHEAD ============ */
.masthead{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-sticky);
  transition:background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out);
}
.masthead__inner{
  max-width:var(--maxw-wide); margin-inline:auto; padding:var(--s4) var(--pad-x);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s6);
  border-bottom:1px solid transparent; transition:border-color var(--t-ui) var(--ease-out);
}
.masthead.is-scrolled{ background:color-mix(in srgb,var(--surface) 95%,transparent); } /* no backdrop blur — it repaints the whole bar every scroll frame */
.masthead.is-scrolled .masthead__inner{ border-color:var(--hairline); }
.masthead.is-hidden{ transform:translateY(-100%); }
.masthead[data-on="ink"]{ --surface:#111214; --ink:#F1F1ED; --hairline:rgba(241,241,237,.16); --line-strong:rgba(241,241,237,.28); color:var(--ink); }

.brand{ display:flex; align-items:center; gap:var(--s3); }
.brand .crest{ width:32px; height:32px; flex:none; }
.brand__word{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:-.02em; white-space:nowrap; }
.brand__loc{ display:none; }

.masthead__links{ display:flex; gap:clamp(16px,3vw,40px); list-style:none; }
.masthead__links a{
  font-family:var(--font-mono); font-size:var(--fz-xs); letter-spacing:var(--ls-label); text-transform:uppercase;
  background:linear-gradient(currentColor 0 0) bottom left / 0% 1px no-repeat;
  padding-bottom:4px; transition:background-size var(--t-slow) var(--ease-out);
}
.masthead__links a:hover,
.masthead__links a[aria-current="page"]{ background-size:100% 1px; }
.masthead__right{ display:flex; align-items:center; gap:var(--s6); }
.masthead__right .mono{ color:var(--muted); }
.masthead .btn{ padding:.8em 1.4em; }

/* burger */
.burger{ display:none; background:none; border:0; width:44px; height:44px; position:relative; z-index:calc(var(--z-menu) + 1); cursor:pointer; }
.burger i{ position:absolute; left:10px; right:10px; height:2px; background:currentColor; transition:transform var(--t-slow) var(--ease-rail), top var(--t-slow) var(--ease-rail), opacity var(--t-base); }
.burger i:nth-child(1){ top:15px; } .burger i:nth-child(2){ top:21px; } .burger i:nth-child(3){ top:27px; }
.menu-open .burger{ color:#F1F1ED; }
.menu-open .burger i:nth-child(1){ top:21px; transform:rotate(45deg); }
.menu-open .burger i:nth-child(2){ opacity:0; }
.menu-open .burger i:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* menu open: lift the whole masthead above the overlay so the brand
   and the ✕ stay reachable (the masthead's own stacking context would
   otherwise bury the burger under the panel) */
.menu-open .masthead{ z-index:calc(var(--z-menu) + 1); color:#F1F1ED; }
.menu-open .masthead.is-scrolled{ background:transparent; backdrop-filter:none; }
.menu-open .masthead .masthead__inner{ border-color:transparent; }
.menu-open .masthead .btn,
.menu-open .masthead .brand__loc{ visibility:hidden; }

/* overlay menu — the panel */
.ovmenu{
  position:fixed; inset:0; z-index:var(--z-menu); background:#111214; color:#F1F1ED;
  display:flex; flex-direction:column; justify-content:center; padding:var(--pad-x);
  clip-path:inset(0 100% 0 0); visibility:hidden;
  transition:clip-path .58s var(--ease-rail), visibility 0s .58s;
}
.menu-open .ovmenu{ clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .58s var(--ease-rail), visibility 0s; }
.ovmenu ul{ list-style:none; display:grid; gap:var(--s3); }
.ovmenu a{
  font-family:var(--font-display); font-weight:700; font-size:clamp(2.6rem,11vw,4.8rem); line-height:1.06; letter-spacing:var(--ls-tight);
  display:inline-flex; align-items:baseline; gap:var(--s4); text-transform:uppercase;
  opacity:0; transform:translateX(-22px); transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.menu-open .ovmenu a{ opacity:1; transform:none; }
.ovmenu a .mono{ font-size:var(--fz-xs); color:rgba(241,241,237,.45); }
.ovmenu__foot{ margin-top:var(--s12); display:grid; gap:var(--s2); color:rgba(241,241,237,.6); }

/* ============ HERO — THE ASSEMBLER ============ */
.hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; position:relative; padding-top:var(--s24); padding-bottom:clamp(16px,2.6vh,30px); overflow:clip; }
.hero .container{ width:100%; position:relative; z-index:1; }
.hero__gl{ position:absolute; top:0; right:0; bottom:0; width:min(54vw,940px); z-index:0; opacity:0; transition:opacity 1.1s var(--ease-out); }
.hero__gl.gl-ready{ opacity:1; }
.hero__gl canvas{ width:100% !important; height:100% !important; display:block; }
.hero__gl::after{ content:""; position:absolute; inset:auto 0 0 0; height:38%; background:linear-gradient(180deg,transparent,var(--surface) 90%); pointer-events:none; }
@media (max-width:767px){ .hero__gl{ width:100%; opacity:0; } .hero__gl.gl-ready{ opacity:.35; } }
.hero__eyebrow{ display:flex; gap:var(--s4); align-items:center; color:var(--muted); margin-bottom:clamp(16px,3vh,32px); flex-wrap:wrap; }
.hero__eyebrow .tick{ width:34px; height:12px; background:var(--accent); flex:none; }

.hero__statement{ position:relative; user-select:none; }
.asm-line{ display:block; font-family:var(--font-display); font-weight:750; text-transform:uppercase;
  letter-spacing:-.03em; line-height:.92; white-space:nowrap;
  font-size:clamp(3rem,10.8vw,10.2rem);
  font-variation-settings:"wdth" 90, "opsz" 96; }
.asm-word{ display:inline-block; position:relative; will-change:transform; }
.asm-line .sp{ display:inline-block; width:.24em; }
/* pre-assembly: ghost wireframe (JS sets; this block is inert for no-JS) */
.js .hero:not(.hero-done) .asm-word{ color:transparent; outline:1px dashed var(--line-strong); outline-offset:4px; }
/* the carriage that lays the statement down */
.carriage{
  position:absolute; top:0; left:0; width:clamp(20px,3vw,44px); height:clamp(44px,7vw,110px);
  background:var(--accent); box-shadow:0 0 0 1px rgba(17,18,20,.25);
  opacity:0; pointer-events:none; z-index:2;
}
.hero__deck{ max-width:58ch; margin-top:clamp(20px,3.5vh,42px); display:grid; gap:var(--s3); }
.hero__deck .lede{ font-size:clamp(1.15rem,1.85vw,1.5rem); line-height:1.42; font-weight:500; }
.hero__deck .sub{ color:var(--muted); max-width:54ch; }
.hero__cta{ display:flex; align-items:center; gap:var(--s6); margin-top:clamp(20px,3.5vh,36px); flex-wrap:wrap; }
.hero__specs{ margin-top:clamp(28px,5.5vh,56px); border-top:2px solid var(--ink); }
.hero__specs ul{ list-style:none; display:flex; gap:var(--s8) var(--s12); padding-top:var(--s3); flex-wrap:wrap; }
.hero__specs li{ font-family:var(--font-mono); font-size:var(--fz-xs); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--muted); }
.hero__specs li b{ color:var(--ink); font-weight:500; }

/* ============ TICKER ============ */
.ticker{ background:#111214; color:#F1F1ED; overflow:hidden; padding-block:clamp(14px,2vw,22px); }
.ticker__track{ display:flex; width:max-content; will-change:transform; }
.ticker__group{ display:flex; align-items:center; flex:none; }
.ticker__item{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(1.15rem,2.4vw,2rem); white-space:nowrap; padding-inline:.85em; }
.ticker__sep{ width:12px; height:12px; background:var(--accent); flex:none; }

/* ============ BUILDS (selected work) ============ */
.build-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(24px,3.5vw,56px) clamp(16px,3vw,44px); }
.build{ position:relative; display:block; }
.build:nth-child(4n+1){ grid-column:1 / span 7; }
.build:nth-child(4n+2){ grid-column:8 / span 5; margin-top:clamp(32px,7vw,120px); }
.build:nth-child(4n+3){ grid-column:1 / span 5; margin-top:clamp(-36px,-2.5vw,-12px); }
.build:nth-child(4n+4){ grid-column:6 / span 7; margin-top:clamp(24px,5vw,72px); }
.build__media{ position:relative; overflow:hidden; border:1px solid var(--line-strong); background:var(--surface-2); }
.build__media img{ width:100%; height:auto; filter:grayscale(.85) contrast(1.02); transform:scale(1.015);
  transition:filter .5s var(--ease-out), transform .8s var(--ease-out); }
.build__bar{ position:absolute; inset:0 auto 0 0; width:12%; background:var(--accent); transform:translateX(-110%); pointer-events:none; }
.build:hover .build__media img,
.build:focus-visible .build__media img{ filter:none; transform:scale(1.04); }
.build:hover .build__bar{ animation:head-pass .6s var(--ease-rail) forwards; }
@keyframes head-pass{ 0%{ transform:translateX(-110%);} 100%{ transform:translateX(950%);} }
.build__tag{ position:absolute; top:var(--s3); left:var(--s3); z-index:1;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; background:var(--accent); color:var(--on-accent); padding:.4em .8em; }
.build__meta{ display:flex; justify-content:space-between; gap:var(--s4); margin-top:var(--s3); color:var(--muted); flex-wrap:wrap; }
.build__title{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.35rem,2.4vw,2rem); letter-spacing:-.02em; margin-top:2px; text-transform:uppercase; }
.builds__more{ margin-top:clamp(26px,4vw,52px); display:flex; justify-content:flex-end; }
/* seam tightening — the ticker band sits right above, the ink band right below */
.builds{ padding-block:clamp(36px,4.6vw,64px) clamp(48px,6.4vw,92px); }

/* ============ MANIFESTO — proof-first (ink band) ============ */
/* dark bands are blueprint sheets: graphite + drafting grid, no photography */
.manifesto{ background:#111214; color:#F1F1ED; position:relative; overflow:clip; }
.mani__bg{
  position:absolute; inset:-6% 0; /* bleed for the parallax drift */
  background-image:
    linear-gradient(rgba(241,241,237,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241,241,237,.05) 1px, transparent 1px);
  background-size:88px 88px; background-position:center;
}
.mani__content{ position:relative; z-index:1; max-width:62ch; }
.manifesto h2{ font-family:var(--font-display); font-weight:750; text-transform:uppercase; font-size:var(--h2); letter-spacing:-.025em; line-height:1; margin-bottom:var(--s6); }
.manifesto p{ color:rgba(241,241,237,.82); max-width:56ch; }
.manifesto p + p{ margin-top:var(--s4); }
.mani__sig{ margin-top:var(--s8); color:rgba(241,241,237,.5); }

/* ============ THE LINE — horizontal process ============ */
.line{ position:relative; padding-block:clamp(56px,7vw,104px) clamp(36px,4.6vw,64px); }
.line__pin{ overflow-x:auto; } /* no-JS fallback: the track stays reachable */
.js .line__pin{ overflow:hidden; }
.line__track{ display:flex; width:max-content; align-items:stretch; }
.step{
  width:min(78vw,700px); flex:none; padding:clamp(24px,4vw,56px);
  border-left:1px solid var(--line-strong); display:flex; flex-direction:column; gap:var(--s6); min-height:min(60vh,540px);
}
.step:last-child{ border-right:1px solid var(--line-strong); }
.step__no{ font-family:var(--font-mono); font-size:var(--fz-sm); letter-spacing:.1em; }
.step__no b{ background:var(--accent); color:var(--on-accent); padding:.3em .7em; font-weight:500; }
.step__name{ font-family:var(--font-display); font-weight:750; text-transform:uppercase; font-size:clamp(2.4rem,5.5vw,4.6rem); letter-spacing:-.03em; line-height:.95; }
.step p{ color:var(--muted); max-width:44ch; margin-top:auto; font-size:var(--fz-md); }
@media (max-width:767px){
  .line__pin{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .step{ width:82vw; scroll-snap-align:start; min-height:0; gap:var(--s4); }
  .step p{ margin-top:var(--s4); }
}

/* ============ RATE CARD — spec-sheet price list ============ */
.ratecard{ padding-top:clamp(48px,6vw,80px); }
.rate-rows{ border-top:2px solid var(--ink); }
.rate-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:var(--s4);
  padding:clamp(20px,3vw,34px) var(--s2); border-bottom:1px solid var(--hairline);
  position:relative; overflow:hidden; isolation:isolate;
}
.rate-row::before{ content:""; position:absolute; inset:0; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease-rail); z-index:-1; }
.rate-row:hover::before{ transform:scaleX(1); }
.rate-row:hover{ color:var(--on-accent); }
.rate-row:hover .rate-row__desc, .rate-row:hover .rate-row__price small{ color:color-mix(in srgb,var(--on-accent) 62%,transparent); }
.rate-row__name{ font-family:var(--font-display); font-weight:750; text-transform:uppercase; font-size:clamp(1.4rem,3vw,2.5rem); letter-spacing:-.02em; white-space:nowrap; }
.rate-row__badge{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; border:1px solid currentColor; border-radius:var(--r-pill); padding:.35em .8em; vertical-align:middle; margin-left:var(--s3); text-transform:uppercase; }
.rate-row__desc{ color:var(--muted); transition:color .3s; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; }
.rate-row__price{ font-family:var(--font-mono); font-size:clamp(1rem,2vw,1.4rem); white-space:nowrap; }
.rate-row__price small{ display:block; font-size:var(--fz-xs); color:var(--faint); text-align:right; transition:color .3s; }
.ratecard__note{ margin-top:var(--s6); color:var(--muted); max-width:62ch; }
.ratecard__cta{ margin-top:var(--s8); display:flex; gap:var(--s6); align-items:center; flex-wrap:wrap; }

/* ============ MACHINE BAND — full-bleed blueprint moment ============ */
.machineband{ position:relative; min-height:min(82vh,720px); display:flex; align-items:flex-end; color:#F1F1ED; overflow:clip; background:#111214; }
.machineband__media{
  position:absolute; inset:-6% 0; color:rgba(241,241,237,.30);
  background-image:
    linear-gradient(rgba(241,241,237,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241,241,237,.05) 1px, transparent 1px);
  background-size:88px 88px; background-position:center;
}
/* the drafted page — the proof, mid-print */
.machineband__media .bp{
  position:absolute; top:50%; right:-3%; width:min(54vw,700px); height:auto;
  transform:translateY(-50%) rotate(-3deg);
}
.machineband__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,#111214 24%,rgba(17,18,20,.5) 56%,transparent 86%); }
@media (max-width:767px){
  .machineband__media .bp{ width:150vw; right:-52vw; opacity:.45; }
}
.machineband__content{ position:relative; z-index:1; padding-block:clamp(48px,8vw,110px); width:100%; }
.machineband h2{ font-family:var(--font-display); font-weight:750; text-transform:uppercase; font-size:clamp(2.6rem,7vw,6.6rem); letter-spacing:-.03em; line-height:.92; max-width:14ch; }
.machineband p{ margin-top:var(--s6); max-width:54ch; color:rgba(241,241,237,.85); font-size:var(--fz-md); }
.machineband .btn{ margin-top:var(--s8); background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.machineband .btn::before{ background:#F1F1ED; }

/* ============ OPERATOR STRIP ============ */
.operator__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(24px,4vw,56px); align-items:center; }
.operator__plate{ grid-column:1 / span 4; }
.operator__body{ grid-column:5 / span 8; max-width:60ch; }
.operator__body h2{ font-family:var(--font-display); font-weight:750; text-transform:uppercase; font-size:var(--h2); letter-spacing:-.025em; line-height:1; margin-bottom:var(--s6); }
.operator__body p{ color:var(--muted); }
.operator__chips{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s6); }
.chip{ font-family:var(--font-mono); font-size:var(--fz-xs); letter-spacing:var(--ls-label); text-transform:uppercase;
  border:1px solid var(--line-strong); border-radius:var(--r-pill); padding:.55em 1.1em; }
.operator__body .link-mono{ display:inline-block; margin-top:var(--s6); }

/* portrait plate — machined frame; grayscale portrait drops in when supplied */
.plate{
  aspect-ratio:4/5; border:1px solid var(--ink); position:relative; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:var(--s4); padding:var(--s6);
  overflow:hidden;
}
.plate::before,.plate::after{ content:""; position:absolute; width:22px; height:22px; border:2px solid var(--accent); z-index:2; }
.plate::before{ top:10px; left:10px; border-right:0; border-bottom:0; }
.plate::after{ bottom:10px; right:10px; border-left:0; border-top:0; }
.plate img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06); }
.plate .crest{ width:46px; height:46px; opacity:.5; }
.plate__label{ text-align:center; color:var(--faint); }

/* ============ GIANT CTA ============ */
.cta-giant .mono{ color:var(--muted); display:block; margin-bottom:var(--s4); }
.cta-giant a.big{
  font-family:var(--font-display); font-weight:750; text-transform:uppercase;
  font-size:clamp(2.6rem,8.6vw,8rem); letter-spacing:-.035em; line-height:.94; display:inline-block;
  background:linear-gradient(var(--accent) 0 0) bottom left / 0% .09em no-repeat;
  transition:background-size .55s var(--ease-rail);
  overflow-wrap:anywhere;
}
.cta-giant a.big:hover{ background-size:100% .09em; }
.cta-giant__meta{ display:flex; gap:var(--s8); margin-top:var(--s8); flex-wrap:wrap; color:var(--muted); }

/* ============ FOOTER ============ */
.footer{ border-top:2px solid var(--ink); padding-block:clamp(40px,6vw,72px) var(--s8); }
.footer__crest{ display:flex; justify-content:center; margin-bottom:clamp(28px,5vw,52px); }
.footer__crest .crest{ width:60px; height:60px; }
.foot-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--s8); margin-bottom:clamp(32px,5vw,56px); }
.foot-col h3{ font-family:var(--font-mono); font-size:var(--fz-xs); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--faint); margin-bottom:var(--s4); font-weight:400; }
.foot-col ul{ list-style:none; display:grid; gap:var(--s2); }
.foot-col a{ background:linear-gradient(currentColor 0 0) bottom left / 0% 1px no-repeat; transition:background-size var(--t-slow) var(--ease-out); padding-bottom:2px; }
.foot-col a:hover{ background-size:100% 1px; }
.colophon{ border-top:1px solid var(--hairline); padding-top:var(--s6); display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; color:var(--faint); }

/* ============ WORK PAGE — THE PROOF DECK ============ */
.page-head{ padding-top:calc(var(--s32) + var(--s12)); padding-bottom:clamp(36px,6vw,72px); }
.page-head h1{ font-family:var(--font-display); font-weight:750; text-transform:uppercase; font-size:clamp(3rem,10.5vw,9.5rem); letter-spacing:-.035em; line-height:.9; }
.page-head .deck{ margin-top:var(--s6); color:var(--muted); max-width:56ch; font-size:var(--fz-md); }
.case-row__tags{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s4); }

/* sticky stacking deck — cards slide over each other on plain window scroll */
.deck.container{ display:block; }
.deck-card{
  position:relative; background:var(--card); border:1px solid var(--line-strong);
  padding:clamp(20px,3vw,48px); overflow:hidden;
  display:grid; gap:clamp(20px,3vw,48px); align-items:center;
  box-shadow:var(--sh-md);
}
.deck-card + .deck-card{ margin-top:clamp(24px,4vh,44px); }
.deck-ghost{
  position:absolute; right:clamp(4px,1.5vw,24px); bottom:-.14em; z-index:0;
  font-family:var(--font-display); font-weight:750; line-height:1; letter-spacing:-.04em;
  font-size:clamp(7rem,16vw,14rem); color:var(--surface-2);
  pointer-events:none; user-select:none;
}
.deck-media{ position:relative; overflow:hidden; border:1px solid var(--line-strong); background:var(--surface-2); z-index:1; }
.deck-media img{ width:100%; height:auto; transform:scale(1.04); will-change:transform; transition:filter .6s var(--ease-out); }
.js .deck-media img{ filter:grayscale(.9) contrast(1.02); }
.deck-card.is-live .deck-media img, .deck-media:hover img{ filter:none; }
.deck-media:hover .build__bar{ animation:head-pass .6s var(--ease-rail) forwards; }
.deck-body{ position:relative; z-index:1; }
.deck-kicker{ color:var(--faint); }
.deck-title{ font-family:var(--font-display); font-weight:750; text-transform:uppercase; font-size:clamp(2rem,4.2vw,3.6rem); letter-spacing:-.025em; line-height:.95; margin:var(--s3) 0 var(--s4); }
.deck-desc{ color:var(--muted); max-width:46ch; }
.deck-sig{ margin-top:var(--s4); color:var(--muted); border-left:3px solid var(--accent); padding-left:var(--s3); }
.deck-sig b{ color:var(--ink); font-weight:500; }
.deck-body .link-mono{ display:inline-block; margin-top:var(--s6); }
@media (min-width:768px){
  .deck-card{ grid-template-columns:1.12fr .88fr; position:sticky; top:calc(76px + 2vh); min-height:min(72vh,640px); }
  .deck-card:nth-child(even){ grid-template-columns:.88fr 1.12fr; }
  .deck-card:nth-child(even) .deck-media{ order:2; }
  .deck-card:nth-child(even) .deck-body{ order:1; }
  .deck-card:nth-child(even) .deck-ghost{ right:auto; left:clamp(4px,1.5vw,24px); }
}
.machineband--pledge{ min-height:min(74vh,660px); }

/* ============ SERVICES PAGE ============ */
.tier{ border-top:2px solid var(--ink); padding-block:clamp(32px,5vw,64px); display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(20px,3vw,44px); }
.tier__head{ grid-column:1 / span 5; }
.tier__head .mono{ color:var(--faint); }
.tier__head h2{ font-family:var(--font-display); font-weight:750; text-transform:uppercase; font-size:clamp(2rem,4.4vw,3.7rem); letter-spacing:-.03em; margin-block:var(--s2) var(--s4); line-height:.95; }
.tier__price{ font-family:var(--font-mono); font-size:clamp(1.2rem,2.4vw,1.8rem); }
.tier__price small{ display:block; color:var(--faint); font-size:var(--fz-xs); margin-top:var(--s1); }
.tier__body{ grid-column:6 / span 7; }
.tier__body > p{ color:var(--muted); max-width:54ch; margin-bottom:var(--s6); font-size:var(--fz-md); }
.tier ul{ list-style:none; border-top:1px solid var(--hairline); }
.tier li{ display:flex; justify-content:space-between; gap:var(--s4); padding:var(--s3) 0; border-bottom:1px solid var(--hairline); color:var(--muted); }
.tier li b{ color:var(--ink); font-weight:500; }
.tier li .mono{ color:var(--faint); flex:none; }
.faq{ max-width:840px; }
.faq details{ border-top:1px solid var(--hairline); }
.faq details:last-child{ border-bottom:1px solid var(--hairline); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:var(--s4);
  padding:clamp(18px,2.6vw,26px) 0; font-family:var(--font-display); font-weight:600; font-size:clamp(1.1rem,2vw,1.45rem); letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--font-mono); font-size:1.2em; transition:rotate .32s var(--ease-rail); flex:none; }
.faq details[open] summary::after{ rotate:45deg; }
.faq details p{ color:var(--muted); padding-bottom:var(--s6); max-width:62ch; }

/* ============ ABOUT PAGE ============ */
.about-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(24px,4vw,64px); }
.about-grid .plate{ grid-column:1 / span 4; align-self:start; position:sticky; top:var(--s24); }
.about-grid__body{ grid-column:6 / span 7; }
.about-grid__body h2{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:var(--h3); letter-spacing:-.02em; margin:var(--s12) 0 var(--s4); }
.about-grid__body h2:first-child{ margin-top:0; }
.about-grid__body p{ color:var(--muted); max-width:58ch; }
.about-grid__body p + p{ margin-top:var(--s4); }
.values-list{ list-style:none; margin-top:var(--s6); }
.values-list li{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(1.4rem,3vw,2.4rem); letter-spacing:-.02em; line-height:1.25;
  padding:var(--s3) 0; border-bottom:1px solid var(--hairline);
  transition:color .45s var(--ease-out), padding-left .45s var(--ease-out);
}
.js .values-list li{ color:var(--faint); }
.values-list li.is-active{ color:var(--ink); padding-left:var(--s4); box-shadow:inset 3px 0 0 var(--accent); }

/* ============ CONTACT PAGE ============ */
.contact-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(28px,4vw,64px); }
.contact-grid__form{ grid-column:1 / span 7; }
.contact-grid__aside{ grid-column:9 / span 4; }
.field{ display:grid; gap:var(--s2); margin-bottom:var(--s6); }
.field label{ font-family:var(--font-mono); font-size:var(--fz-xs); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--muted); }
.field input,.field select,.field textarea{
  background:transparent; border:0; border-bottom:1px solid var(--line-strong); border-radius:0;
  padding:var(--s3) 2px; transition:border-color var(--t-base) var(--ease-out); font-family:var(--font-body);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{ box-shadow:none; outline:none; border-color:var(--ink); border-bottom-width:2px; }
.field textarea{ min-height:120px; resize:vertical; }
.contact-aside{ display:grid; gap:var(--s8); align-content:start; }
.contact-aside h3{ font-family:var(--font-mono); font-size:var(--fz-xs); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--faint); margin-bottom:var(--s2); font-weight:400; }
.contact-aside a{ font-size:var(--fz-md); border-bottom:1px solid var(--line-strong); }
.fastlane{ border:1px dashed var(--line-strong); padding:var(--s6); position:relative; }
.fastlane::before{ content:""; position:absolute; top:-1px; left:-1px; width:22px; height:22px; border-top:3px solid var(--accent); border-left:3px solid var(--accent); }
.fastlane .mono{ color:var(--faint); display:block; margin-bottom:var(--s2); }

/* ============ PAGE TRANSITIONS — the head pass (hand-rolled, works everywhere) ============ */
.pt{
  position:fixed; inset:0; z-index:9995; pointer-events:none;
  /* yellow leading edge on the right — the head sweeps the page shut */
  background:linear-gradient(90deg, #111214 0 calc(100% - 14px), var(--accent) calc(100% - 14px));
  transform:translateX(-102%);
}
/* entrance: html.pt-enter is set pre-paint by the inline head script when
   arriving from an internal navigation — the curtain wipes away */
html.pt-enter::before{
  content:""; position:fixed; inset:0; z-index:9995; pointer-events:none;
  background:linear-gradient(90deg, var(--accent) 0 14px, #111214 14px);
  animation:pt-out .52s cubic-bezier(.83,0,.17,1) .05s forwards;
}
@keyframes pt-out{ to{ transform:translateX(104%); } }

/* ============ SCROLL RAIL — the head travels the page edge ============ */
.rail{
  position:fixed; top:0; right:16px; bottom:0; z-index:calc(var(--z-sticky) - 1);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s3);
  pointer-events:none; transition:opacity .3s var(--ease-out);
}
.menu-open .rail{ opacity:0; }
.rail__track{ position:relative; width:2px; height:min(42vh,380px); background:var(--line-strong); }
.rail__head{ position:absolute; left:-5px; top:0; width:12px; height:26px; background:var(--accent); box-shadow:0 0 0 1px rgba(17,18,20,.2); }
.rail__label{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); writing-mode:vertical-rl; max-height:34vh; overflow:hidden; white-space:nowrap;
}
.rail[data-on="ink"]{ --ink:#F1F1ED; --line-strong:rgba(241,241,237,.28); }
.rail[data-on="ink"] .rail__label{ color:rgba(241,241,237,.6); }
@media (max-width:1023px){ .rail{ display:none; } }

/* ============ SCROLLBARS — thin, machined ============ */
html{ scrollbar-width:thin; scrollbar-color:#3f4348 var(--surface); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--surface); }
::-webkit-scrollbar-thumb{ background:#3f4348; border:3px solid var(--surface); border-radius:var(--r-pill); }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }
.line__pin{ scrollbar-width:none; }
.line__pin::-webkit-scrollbar{ display:none; }

/* ============ BLUEPRINT GRID — spec-sheet texture under everything ============ */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(color-mix(in srgb,var(--ink) 4%,transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb,var(--ink) 4%,transparent) 1px, transparent 1px);
  background-size:88px 88px;
}

/* ============ SPLIT HEADLINES ============ */
.w{ display:inline-block; white-space:nowrap; }
.ch{ display:inline-block; will-change:transform; }

/* ============ MISC V2 ============ */
/* deal rows: numbered column */
.rate-row{ grid-template-columns:auto auto 1fr auto; }
.rate-row__no{ color:var(--faint); font-size:var(--fz-sm); transition:color .3s; }
.rate-row:hover .rate-row__no{ color:color-mix(in srgb,var(--on-accent) 62%,transparent); }
/* contact form: spec-sheet field indices */
.contact-grid__form{ counter-reset:field; }
.contact-grid__form .field label::before{ counter-increment:field; content:"0" counter(field) " · "; color:var(--faint); }
.btn.is-busy::before{ transform:scaleX(1); }
.btn.is-busy{ color:var(--on-accent); pointer-events:none; }
/* the offer tiers: active-solid heading while in view */
.js .tier h2{ color:var(--faint); transition:color .5s var(--ease-out); }
.tier.is-live h2, .rm .tier h2{ color:var(--ink); }
.clock{ font-variant-numeric:tabular-nums; }

/* ============ RESPONSIVE ============ */
@media (max-width:1023px){
  .masthead__links, .masthead__right .mono{ display:none; }
  .operator__plate{ grid-column:1 / span 6; }
  .operator__body{ grid-column:1 / -1; }
  .about-grid .plate{ grid-column:1 / span 6; position:static; }
  .about-grid__body{ grid-column:1 / -1; }
  .contact-grid__form{ grid-column:1 / -1; }
  .contact-grid__aside{ grid-column:1 / -1; }
  .tier__head,.tier__body{ grid-column:1 / -1; }
  .burger{ display:block; }
}
@media (max-width:767px){
  .masthead__right .btn{ display:none; }
  .build:nth-child(n){ grid-column:1 / -1; margin-top:0; }
  .build + .build{ margin-top:var(--s8); }
  .rate-row{ grid-template-columns:auto 1fr auto; }
  .rate-row__desc{ display:none; }
  .operator__plate{ grid-column:1 / -1; max-width:340px; }
  .asm-line{ white-space:normal; line-height:1; }
  .cta-giant a.big{ font-size:clamp(2.3rem,11.5vw,4rem); }
}
@media (min-width:768px){
  .brand__loc{ display:block; }
}
@media (min-width:1024px){
  .burger{ display:none; }
}

/* ============================================================
   V3 MOTION LAYER — go ham on the static bands
   ============================================================ */

/* ---- manifesto: two-column, copy + a live self-building proof ---- */
.mani__grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,5vw,84px); align-items:center; }
.mani__content{ max-width:56ch; }
.mani__kicker{ display:inline-flex; align-items:center; gap:var(--s3); color:rgba(241,241,237,.6); margin-bottom:var(--s6); }
.mani__kicker .tick{ width:26px; height:10px; background:var(--accent); flex:none; transform-origin:left; }
.js .mani__kicker .tick{ animation:tick-pulse 2.8s var(--ease-out) infinite; }
@keyframes tick-pulse{ 0%,100%{ transform:scaleX(.5); opacity:.55; } 50%{ transform:scaleX(1); opacity:1; } }
@media (max-width:900px){ .mani__grid{ grid-template-columns:1fr; gap:clamp(40px,7vw,64px); } .mani__content{ max-width:60ch; } }

/* slow accent scan drifting across the whole ink band */
.mani__scan{ position:absolute; left:0; right:0; top:0; height:34%; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,225,0,.05), transparent 70%); opacity:.8; }
.js .mani__scan{ animation:mani-drift 9s var(--ease-out) infinite; }
@keyframes mani-drift{ 0%{ transform:translateY(-20%); opacity:0; } 20%{ opacity:.85; } 80%{ opacity:.85; } 100%{ transform:translateY(230%); opacity:0; } }

/* ---- the proof monitor ---- */
.proof-monitor{ position:relative; z-index:1; }
.pm-frame{ background:#0d0e10; border:1px solid rgba(241,241,237,.16); border-radius:7px; overflow:hidden;
  box-shadow:0 34px 80px -34px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.3); }
.js .pm-frame{ animation:pm-float 7.5s var(--ease-out) infinite; }
@keyframes pm-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
.pm-chrome{ display:flex; align-items:center; gap:10px; padding:9px 12px; background:#151619; border-bottom:1px solid rgba(241,241,237,.1); }
.pm-dots{ display:flex; gap:6px; flex:none; }
.pm-dots i{ width:9px; height:9px; border-radius:50%; background:rgba(241,241,237,.2); }
.pm-omni{ flex:1; min-width:0; display:flex; align-items:center; gap:1px; background:#1e2024; border-radius:4px; padding:5px 10px; }
.pm-url{ font-family:var(--font-mono); font-size:11px; letter-spacing:.01em; color:rgba(241,241,237,.72); white-space:nowrap; overflow:hidden; }
.pm-caret{ width:1.5px; height:12px; background:var(--accent); flex:none; opacity:0; }
.pm-live{ flex:none; font-family:var(--font-mono); font-size:9px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:#0d0e10; background:var(--accent); padding:3px 7px; border-radius:2px; position:relative; }
.pm-live::before{ content:""; width:5px; height:5px; border-radius:50%; background:#0d0e10; display:inline-block; margin-right:5px; vertical-align:middle; }
.js .pm-live{ opacity:0; transform:scale(.5); }
.js .pm-live.is-live{ animation:pm-pop .5s var(--ease-out) forwards, pm-blink 1.4s .5s ease-in-out infinite; }
@keyframes pm-pop{ to{ opacity:1; transform:scale(1); } }
@keyframes pm-blink{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,225,0,.5); } 50%{ box-shadow:0 0 0 4px rgba(255,225,0,0); } }

.pm-screen{ position:relative; aspect-ratio:4/3; overflow:hidden; background:linear-gradient(180deg,#121316,#0d0e10); }
.pm-site{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding:14px; align-content:start; }
.pm-blk{ position:relative; overflow:hidden; border:1px solid transparent; border-radius:3px; }
.pm-blk::after{ content:""; position:absolute; inset:0; transform-origin:bottom; }
.js .pm-blk{ border-style:dashed; border-color:rgba(241,241,237,.22); }
.js .pm-blk::after{ transform:scaleY(0); }
.js .pm-blk.is-built{ border-color:transparent; box-shadow:0 0 0 1px rgba(255,225,0,0); animation:pm-snap .5s var(--ease-out); }
.js .pm-blk.is-built::after{ transform:scaleY(1); transition:transform .38s var(--ease-out); }
@keyframes pm-snap{ 0%{ box-shadow:0 0 0 1px var(--accent), 0 0 16px 0 rgba(255,225,0,.5); } 100%{ box-shadow:0 0 0 1px rgba(255,225,0,0), 0 0 0 0 rgba(255,225,0,0); } }
/* block geometry + fills */
.pm-nav{ grid-column:1/-1; height:14px; } .pm-nav::after{ background:rgba(241,241,237,.8); }
.pm-h1{ grid-column:1/3; height:30px; }  .pm-h1::after{ background:rgba(241,241,237,.94); }
.pm-h2{ grid-column:1/3; height:11px; }  .pm-h2::after{ background:rgba(241,241,237,.5); }
.pm-btn{ grid-column:3/4; grid-row:2/4; } .pm-btn::after{ background:var(--accent); }
.pm-hero{ grid-column:1/-1; height:clamp(66px,11vw,116px); } .pm-hero::after{ background:linear-gradient(120deg,#2b2d33,#3b3f47 55%,#25272c); }
.pm-c{ height:38px; } .pm-c::after{ background:rgba(241,241,237,.14); }
/* the print-head sweep */
.pm-print{ position:absolute; left:0; right:0; top:0; height:2px; z-index:3; background:var(--accent);
  box-shadow:0 0 16px 1px rgba(255,225,0,.7); opacity:0; }
.pm-print::after{ content:""; position:absolute; left:0; right:0; top:2px; height:64px;
  background:linear-gradient(180deg, rgba(255,225,0,.16), transparent); }
.pm-cap{ display:flex; align-items:center; gap:var(--s2); margin-top:var(--s4); color:rgba(241,241,237,.55); font-size:10px; }
.pm-cap__dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); }
.js .pm-cap__dot{ animation:pm-blink-dot 1.3s ease-in-out infinite; }
@keyframes pm-blink-dot{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

/* ---- the line: horizontal-scroll progress HUD ---- */
.line__pin{ position:relative; }
.line__hud{ display:none; position:absolute; left:var(--pad-x); right:var(--pad-x); bottom:clamp(14px,3vh,32px);
  align-items:center; gap:var(--s4); z-index:3; pointer-events:none; }
@media (min-width:768px){ .line__hud{ display:flex; } }
.line__hud-count{ color:var(--muted); flex:none; letter-spacing:.12em; }
.line__hud-count b{ color:var(--ink); font-weight:500; font-size:var(--fz-sm); }
.line__hud-count i{ font-style:normal; color:var(--faint); margin:0 3px; }
.line__hud-label{ color:var(--faint); flex:none; letter-spacing:.14em; }
.line__progress{ position:relative; flex:1; height:2px; background:var(--line-strong); overflow:hidden; }
.line__progress i{ position:absolute; inset:0; background:var(--accent); transform:scaleX(0); transform-origin:left; will-change:transform; }

/* ---- operator: the portrait plate keeps acquiring while the photo's pending ---- */
.plate__scan{ position:absolute; left:8px; right:8px; top:0; height:2px; z-index:3; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:0; }
.js .operator .plate__scan{ animation:plate-scan 3.8s var(--ease-out) infinite; }
@keyframes plate-scan{ 0%{ top:0; opacity:0; } 12%{ opacity:.85; } 88%{ opacity:.85; } 100%{ top:100%; opacity:0; } }
.js .operator .plate .crest{ animation:crest-breathe 3.4s ease-in-out infinite; }
@keyframes crest-breathe{ 0%,100%{ opacity:.32; } 50%{ opacity:.62; } }

/* ---- machine band: the blueprint prints itself in ---- */
.js .machineband .bp{ clip-path:inset(0 100% 0 0); }
.machineband.bp-in .bp{ clip-path:inset(0 0 0 0); transition:clip-path 1.25s var(--ease-rail); }

/* ============ REDUCED MOTION — every spectacle exits ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .cursor,.preloader{ display:none !important; }
  .js .hero:not(.hero-done) .asm-word{ color:inherit; outline:none; }
  .js [data-reveal], [data-reveal]{ opacity:1; transform:none; }
  .js .line-mask > .line-inner, .line-mask > .line-inner{ transform:none; }
  .js [data-asm], [data-asm]{ opacity:1; }
  .pt, .rail{ display:none !important; }
  html.pt-enter::before{ display:none !important; }
  .js .deck-media img{ filter:none; }
  .js .tier h2{ color:var(--ink); }
  .ticker__track{ transform:none !important; }
  /* V3 static-safe states */
  .js .pm-blk{ border-color:transparent !important; }
  .js .pm-blk::after{ transform:scaleY(1) !important; }
  .js .pm-live{ opacity:1 !important; transform:none !important; }
  .pm-caret,.pm-print,.mani__scan{ display:none !important; }
  .js .machineband .bp{ clip-path:none !important; }
  .line__hud{ display:none !important; }
  .rm .line__pin, .js .line__pin{ overflow-x:auto !important; }
}