/* ==========================================================================
   MOD1 CUSTOMS — DESIGN SYSTEM
   Machined surfaces, engineered motion, bronze on graphite.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Every button component below sets its own surface, so strip the UA chrome
   here - otherwise anything styled as a link (.tlink) keeps a gray box. */
button { background: none; border: 0; }
a { color: inherit; text-decoration: none; }

/* ----------------------------------------------------------------- tokens */
:root {
  /* surfaces — graphite through steel */
  --void:      #060708;
  --graphite:  #0B0D0F;
  --steel-900: #111417;
  --steel-850: #16191D;
  --steel-800: #1C2025;
  --steel-700: #262B31;
  --steel-600: #343A42;
  --steel-500: #4A525B;
  --steel-400: #6D767F;
  --steel-300: #98A1AA;
  --steel-200: #C3CAD1;
  --steel-100: #E4E8EB;
  --white:     #F5F7F8;

  /* accents — straight off the logo */
  --bronze:    #C0803E;
  --bronze-lt: #E2A868;
  --bronze-dk: #7C4F22;
  --spark:     #FF6A15;
  --gold:      #C2A03A;

  /* semantic */
  --bg:        var(--graphite);
  --ink:       var(--steel-200);
  --ink-dim:   var(--steel-400);
  --ink-hi:    var(--white);
  --rule:      rgba(255,255,255,.075);
  --rule-hi:   rgba(255,255,255,.14);
  --edge-top:  rgba(255,255,255,.055);
  --edge-bot:  rgba(0,0,0,.55);

  /* type */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* motion — machined easings */
  --settle: cubic-bezier(.16,1,.3,1);
  --drive:  cubic-bezier(.65,0,.35,1);
  --snap:   cubic-bezier(.2,.9,.25,1);
  --t-fast: .28s;
  --t-med:  .55s;
  --t-slow: 1.05s;

  /* rhythm */
  --gut: clamp(20px, 4vw, 64px);
  --max: 1440px;
  --nav-h: 104px;
}

/* --------------------------------------------------------------- surfaces */
/* micro-grain: a machined surface is never perfectly flat */
.grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  opacity: .22; mix-blend-mode: overlay;
  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='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------- base */
/* `clip` rather than `hidden`: it stops sideways scroll without turning the
   element into a scroll container, so position:sticky keeps working. */
html { scroll-behavior: auto; overflow-x: clip; }
body {
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  /* global fine grid — the blueprint underlay */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 88px 88px;
}
body::after {
  /* vignette — cinematic lighting falloff */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(0,0,0,.55) 100%);
}

/* scrollbars, in the same materials as everything else */
* { scrollbar-width: thin; scrollbar-color: var(--steel-600) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--steel-700); border: 2px solid var(--void); }
::-webkit-scrollbar-thumb:hover { background: var(--steel-600); }
::-webkit-scrollbar-corner { background: var(--void); }
::selection { background: rgba(192,128,62,.34); color: var(--white); }

/* --------------------------------------------------------------- typography */
.d1, .d2, .d3 {
  font-weight: 900; line-height: .89; letter-spacing: -.035em;
  color: var(--ink-hi); text-transform: uppercase;
}
.d1 { font-size: clamp(3rem, 11vw, 10.5rem); }
.d2 { font-size: clamp(2.2rem, 6.2vw, 5.4rem); letter-spacing: -.032em; }
.d3 { font-size: clamp(1.6rem, 3.4vw, 2.9rem); letter-spacing: -.028em; line-height: .98; }

.lede { font-size: clamp(1.02rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--steel-300); font-weight: 400; max-width: 62ch; }
.body { color: var(--steel-300); max-width: 68ch; }
.body + .body { margin-top: 1.1em; }

/* technical label — the instrumentation voice */
.tl {
  font-family: var(--mono); font-size: .625rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; color: var(--steel-400);
}
.tl--bronze { color: var(--bronze); }
.tl--sm { font-size: .58rem; letter-spacing: .26em; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.hi { color: var(--ink-hi); }
.br { color: var(--bronze); }

/* section number tab */
.secnum {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--steel-400);
}
.secnum::before {
  content: ''; width: 30px; height: 1px; background: var(--bronze); opacity: .8;
}

/* ------------------------------------------------------------------ layout */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); position: relative; z-index: 3; }
.sec { position: relative; padding-block: clamp(72px, 11vw, 168px); }
.sec--tight { padding-block: clamp(52px, 7vw, 104px); }
.rule { height: 1px; background: var(--rule); border: 0; }

/* measurement rail — thin ticked edge, pure engineering detail */
.rail { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.rail--l { left: 0; } .rail--r { right: 0; }
.rail::before {
  content: ''; position: absolute; left: -3px; width: 7px; top: 0; bottom: 0;
  background-image: repeating-linear-gradient(to bottom, var(--rule-hi) 0 1px, transparent 1px 56px);
}

/* --------------------------------------------------------------- surfaces */
.panel {
  position: relative; background:
    linear-gradient(180deg, var(--steel-850) 0%, var(--steel-900) 100%);
  border: 1px solid var(--rule);
  box-shadow: inset 0 1px 0 var(--edge-top), 0 18px 40px -24px rgba(0,0,0,.9);
}
.panel--raised { background: linear-gradient(180deg, var(--steel-800) 0%, var(--steel-850) 100%); }

/* brushed metal band */
.brushed {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--steel-800), var(--steel-900));
}

/* ---------------------------------------------------------------- buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: .85rem;
  padding: 1.05rem 1.7rem; border: 1px solid var(--rule-hi); background: transparent;
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ink-hi);
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: color var(--t-fast) var(--drive), border-color var(--t-fast) var(--drive);
}
.btn::before {
  /* the fill drives in from the left like a machine slide */
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bronze);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t-med) var(--settle);
}
.btn:hover { color: var(--void); border-color: var(--bronze); }
.btn:hover::before { transform: scaleX(1); }
.btn:focus-visible { outline: 2px solid var(--bronze-lt); outline-offset: 3px; }
.btn:disabled { opacity: .5; cursor: progress; pointer-events: none; }
.btn__ar { transition: transform var(--t-med) var(--settle); }
.btn:hover .btn__ar { transform: translateX(5px); }

.btn--solid { background: var(--bronze); border-color: var(--bronze); color: var(--void); }
.btn--solid::before { background: var(--bronze-lt); }
.btn--solid:hover { color: var(--void); }
.btn--ghost { border-color: var(--rule); color: var(--steel-300); }
.btn--sm { padding: .72rem 1.1rem; font-size: .6rem; letter-spacing: .2em; }

/* text link with the technical rule expansion */
.tlink {
  position: relative; display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--bronze); padding-bottom: .35rem;
}
.tlink::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--bronze); transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-med) var(--settle);
}
.tlink:hover::after { transform: scaleX(1); transform-origin: left; }

/* ======================================================================
   NAVIGATION
   ====================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: var(--nav-h);
  display: flex; align-items: center;
  transition: background var(--t-med) var(--drive), border-color var(--t-med) var(--drive),
              backdrop-filter var(--t-med) var(--drive), height var(--t-med) var(--drive);
  border-bottom: 1px solid transparent;
}
.nav.is-solid {
  background: rgba(11,13,15,.92); backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--rule); height: 76px;
}
.nav__in { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: clamp(.6rem, 1.6vw, 1.6rem); min-width: 0; }
.nav__brand { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }
/* The mark is background-keyed with a real alpha channel, so it sits on the
   bar (and on the hero photo) with no box and no blend tricks. */
.nav__mark {
  width: 74px; height: 74px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.65));
  transition: width var(--t-med) var(--drive), height var(--t-med) var(--drive);
}
.nav.is-solid .nav__mark { width: 56px; height: 56px; }
.nav__wordmark { display: flex; flex-direction: column; line-height: 1; }
.nav__wordmark b { font-weight: 900; letter-spacing: -.022em; font-size: 1.16rem; color: var(--ink-hi);
  transition: font-size var(--t-med) var(--drive); }
.nav.is-solid .nav__wordmark b { font-size: 1.1rem; }
.nav__wordmark span { font-family: var(--mono); font-size: .56rem; letter-spacing: .34em; color: var(--bronze); margin-top: 5px; }

.nav__links { display: flex; align-items: center; gap: clamp(0px, .5vw, .3rem); min-width: 0; flex-wrap: nowrap; }
.nav__link {
  position: relative; padding: .55rem clamp(.4rem, .85vw, .8rem); font-family: var(--mono);
  font-size: clamp(.56rem, .74vw, .64rem); letter-spacing: .18em; text-transform: uppercase;
  color: var(--steel-300); white-space: nowrap;
  transition: color var(--t-fast) var(--drive);
}
.nav__link::after {
  content: ''; position: absolute; left: clamp(.4rem,.85vw,.8rem); right: clamp(.4rem,.85vw,.8rem); bottom: .1rem; height: 1px;
  background: var(--bronze); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-med) var(--settle);
}
.nav__link:hover, .nav__link.is-active { color: var(--ink-hi); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__ctas { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; margin-left: .4rem; }
.nav__cta { flex-shrink: 0; }

/* The second CTA. Outlined rather than filled, in the same bronze: it reads
   as one pair with Build sheet instead of two buttons competing, and the
   shared .btn fill means hovering either one behaves the same. */
.nav__cta--alt { border-color: var(--bronze); color: var(--bronze-lt); }
.nav__cta--alt:hover { color: var(--void); }
.nav__cta--alt.is-active { background: var(--bronze); border-color: var(--bronze); color: var(--void); }

.nav__burger { display: none; width: 44px; height: 44px; border: 1px solid var(--rule-hi);
  background: transparent; cursor: pointer; position: relative; }
.nav__burger i { position: absolute; left: 12px; right: 12px; height: 1px; background: var(--ink-hi);
  transition: transform var(--t-med) var(--settle), opacity var(--t-fast); }
.nav__burger i:nth-child(1) { top: 16px; } .nav__burger i:nth-child(2) { top: 21px; } .nav__burger i:nth-child(3) { top: 26px; }
.nav.is-open .nav__burger i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav.is-open .nav__burger i:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 89; background: var(--graphite);
  transform: translateY(-100%); transition: transform .7s var(--settle);
  display: flex; flex-direction: column; justify-content: center; padding: var(--nav-h) var(--gut) 0;
  overflow-y: auto;
}
.drawer.is-open { transform: translateY(0); }
.drawer a {
  display: block; padding: .7rem 0; font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.6rem, 8vw, 2.6rem); letter-spacing: -.03em; color: var(--steel-300);
  border-bottom: 1px solid var(--rule); opacity: 0; transform: translateY(18px);
}
.drawer.is-open a { opacity: 1; transform: none; transition: opacity .5s var(--settle), transform .6s var(--settle); }
.drawer.is-open a:nth-child(1){transition-delay:.10s} .drawer.is-open a:nth-child(2){transition-delay:.16s}
.drawer.is-open a:nth-child(3){transition-delay:.22s} .drawer.is-open a:nth-child(4){transition-delay:.28s}
.drawer.is-open a:nth-child(5){transition-delay:.34s} .drawer.is-open a:nth-child(6){transition-delay:.40s}
.drawer.is-open a:nth-child(7){transition-delay:.46s} .drawer.is-open a:nth-child(8){transition-delay:.52s}
.drawer.is-open a:nth-child(9){transition-delay:.58s} .drawer.is-open a:nth-child(10){transition-delay:.64s}
.drawer a:hover { color: var(--ink-hi); }
/* Below 960px the two header buttons are gone, so the drawer has to carry the
   same signal: the two things you DO are bronze, the pages you read are not. */
.drawer a[data-route="build"], .drawer a[data-route="transfers"] { color: var(--bronze-lt); }

/* ======================================================================
   COMMAND PALETTE — jump anywhere from the keyboard
   ====================================================================== */
.cmd {
  position: fixed; inset: 0; z-index: 180; display: flex; justify-content: center;
  align-items: flex-start; padding: clamp(56px, 13vh, 150px) var(--gut) var(--gut);
  background: rgba(6,7,8,.84); backdrop-filter: blur(7px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--drive), visibility .3s;
}
.cmd.is-open { opacity: 1; visibility: visible; }
.cmd__box {
  width: min(660px, 100%); border: 1px solid var(--rule-hi);
  background: linear-gradient(180deg, var(--steel-850), var(--steel-900));
  box-shadow: inset 0 1px 0 var(--edge-top), 0 44px 96px -34px #000;
  transform: translateY(-14px) scale(.985);
  transition: transform .44s var(--settle);
  display: flex; flex-direction: column; max-height: 100%;
}
.cmd.is-open .cmd__box { transform: none; }
.cmd__f { display: flex; align-items: center; gap: .85rem; padding: 1.05rem 1.2rem;
  border-bottom: 1px solid var(--rule); flex-shrink: 0; }
.cmd__f input { flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--ink-hi); font-size: 1.04rem; letter-spacing: -.01em; }
.cmd__f input::placeholder { color: var(--steel-500); }
.cmd__res { overflow-y: auto; flex: 1; }
.cmd__grp { padding: .85rem 1.2rem .35rem; position: sticky; top: 0;
  background: var(--steel-900); }
.cmd__i { display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left;
  padding: .72rem 1.2rem; cursor: pointer; color: var(--steel-300);
  transition: background var(--t-fast) var(--drive), color var(--t-fast) var(--drive); }
.cmd__i:hover { background: rgba(255,255,255,.035); color: var(--ink-hi); }
.cmd__i.is-sel { background: rgba(192,128,62,.14); color: var(--ink-hi);
  box-shadow: inset 2px 0 0 var(--bronze); }
.cmd__i b { font-weight: 600; font-size: .95rem; flex: 1; }
.cmd__i .tl { flex-shrink: 0; }
.cmd__none { padding: 2rem 1.2rem; text-align: center; color: var(--steel-500); font-size: .9rem; }
.cmd__foot { padding: .75rem 1.2rem; border-top: 1px solid var(--rule); display: flex;
  gap: 1.2rem; flex-wrap: wrap; flex-shrink: 0; }
kbd { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; color: var(--steel-400);
  border: 1px solid var(--rule-hi); padding: 2px 6px; }

/* the affordance in the bar */
.nav__cmd { display: flex; align-items: center; gap: .5rem; padding: .48rem .7rem;
  border: 1px solid var(--rule); color: var(--steel-400); cursor: pointer; flex-shrink: 0;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  transition: border-color var(--t-fast) var(--drive), color var(--t-fast) var(--drive); }
.nav__cmd:hover { border-color: var(--bronze); color: var(--bronze); }

/* ======================================================================
   BOOT SEQUENCE
   The slide is drawn as a toolpath, its optic pocket is cut, then it
   racks and returns to battery. Total 3.1s, then it clears.
   ====================================================================== */
.boot {
  position: fixed; inset: 0; z-index: 200; background: var(--void);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .75s var(--drive), visibility .75s;
}
.boot::before {
  /* the same blueprint grid, tighter — this is the machine's own screen */
  content: ''; position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 44px 44px;
}
.boot.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.boot__stage { position: relative; width: min(720px, 86vw); }
.boot__svg { width: 100%; height: auto; overflow: visible; }

/* datum lines fade up first */
.bt-datum { opacity: 0; animation: btFade .5s var(--drive) .05s forwards; }
@keyframes btFade { to { opacity: 1; } }

/* every profile line draws itself on, in sequence */
.bt-draw { stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: btDraw .7s var(--drive) forwards; }
.bt-draw line { stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: btDraw .45s var(--drive) forwards; }
@keyframes btDraw { to { stroke-dashoffset: 0; } }

.boot__svg > .bt-cycle > .bt-draw:first-child { animation-delay: .18s; }
.bt-ser  line, .bt-ser2 line { stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: btDraw .45s var(--drive) forwards; }
.bt-ser  line:nth-child(1) { animation-delay: .60s } .bt-ser line:nth-child(2) { animation-delay: .66s }
.bt-ser  line:nth-child(3) { animation-delay: .72s } .bt-ser line:nth-child(4) { animation-delay: .78s }
.bt-ser  line:nth-child(5) { animation-delay: .84s }
.bt-ser2 line:nth-child(1) { animation-delay: .70s } .bt-ser2 line:nth-child(2) { animation-delay: .76s }
.bt-ser2 line:nth-child(3) { animation-delay: .82s }
.bt-sight { animation-delay: .52s; }
/* the uncut top edge: drawn with the body, removed as the cutter passes */
.bt-blank { stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: btDraw .45s var(--drive) .46s forwards, btBlank .34s var(--drive) 1.2s forwards; }
@keyframes btBlank { to { opacity: 0; } }

/* The cut. The cutter runs the length of the pocket and the shallow step in
   the top edge appears behind it, which is what milling an optic pocket
   actually looks like from the side. */
.bt-optic { stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: btDraw .58s linear 1.08s forwards; }
.bt-cutter { opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: btCutter .58s linear 1.08s forwards; }
@keyframes btCutter {
  0%   { opacity: 1; transform: translateX(0); }
  92%  { opacity: 1; transform: translateX(80px); }
  100% { opacity: 0; transform: translateX(80px); }
}

/* Sparks come off the cutter, so they are anchored to the DRAWING rather than
   the stage, and they travel with it.
   viewBox is 0 0 540 170; the pocket runs x 132 -> 212 at y 44 -> 53.
     left  132/540 = 24.44%   (cutter start)
     top    46/170 = 27.06%   (the cutting edge)
     width  80/540 = 14.81%   (pocket length — the distance the cutter travels)
   The wrapper is exactly the travel distance wide, so translateX(100%) walks
   it from one end of the pocket to the other at any screen size. */
.boot__cut { position: relative; }
.bt-sparks {
  position: absolute; left: 24.44%; top: 27.06%; width: 14.81%; height: 0;
  animation: btTravel .58s linear 1.08s both;
}
/* matches btCutter exactly — that one reaches the far end at 92% and holds,
   so a linear 0→100% here would let the sparks lag the cutter mid-cut */
@keyframes btTravel {
  0%   { transform: translateX(0); }
  92%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
.bt-sparks i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--spark); box-shadow: 0 0 7px 1px rgba(255,106,21,.85);
  opacity: 0; animation: btSpark .62s var(--drive) forwards;
  animation-delay: calc(1.16s + var(--t));
}
@keyframes btSpark {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0;
         transform: rotate(var(--a)) translateX(var(--d)) scale(.3); }
}

/* rack rearward, then snap back into battery */
.bt-cycle {
  transform-box: fill-box; transform-origin: center;
  animation: btRack .82s var(--drive) 1.86s both;
}
@keyframes btRack {
  0%   { transform: translateX(0); }
  34%  { transform: translateX(-46px); }
  52%  { transform: translateX(-46px); }
  84%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

/* status log indexes in like instrumentation coming online */
.boot__log { margin-top: clamp(18px, 3vw, 30px); display: flex; flex-direction: column; gap: .5rem; }
.boot__log li {
  display: flex; align-items: baseline; gap: .8rem; opacity: 0;
  animation: btLine .4s var(--settle) forwards;
}
.boot__log li::before {
  content: ''; width: 16px; height: 1px; background: var(--bronze); flex-shrink: 0;
}
.boot__log li:nth-child(1) { animation-delay: .95s; }
.boot__log li:nth-child(2) { animation-delay: 1.62s; }
.boot__log li:nth-child(3) { animation-delay: 2.62s; }
@keyframes btLine { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

.boot__bar { margin-top: clamp(20px, 3vw, 32px); height: 1px; background: var(--steel-700); overflow: hidden; }
.boot__bar i { display: block; height: 100%; background: var(--bronze);
  transform: scaleX(0); transform-origin: left; animation: btBar 2.9s var(--drive) forwards; }
@keyframes btBar { to { transform: scaleX(1); } }

.boot__sig {
  margin-top: 1rem; font-weight: 900; letter-spacing: -.02em; font-size: 1.1rem;
  color: var(--ink-hi); text-transform: uppercase; opacity: 0;
  animation: btFade .5s var(--drive) 2.55s forwards;
}
.boot__sig span { font-family: var(--mono); font-weight: 500; font-size: .58rem;
  letter-spacing: .34em; color: var(--bronze); margin-left: .5rem; }

/* ======================================================================
   PAGE TRANSITION — a slide closing across the viewport
   ====================================================================== */
.pt { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; }
.pt i {
  position: absolute; inset: 0; transform: translateX(-102%);
  background: linear-gradient(90deg,
    rgba(11,13,15,0) 0%, rgba(11,13,15,.97) 9%, rgba(11,13,15,.97) 100%);
}
.pt i::after {
  /* the leading edge — a machined face catching the light */
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 2px;
  background: var(--bronze); box-shadow: 0 0 30px 5px rgba(192,128,62,.42);
}
.pt.run i { animation: ptBattery .78s var(--drive) forwards; }
@keyframes ptBattery {
  0%   { transform: translateX(-102%); }
  42%  { transform: translateX(0); }
  58%  { transform: translateX(0); }
  100% { transform: translateX(102%); }
}
#view.chambering { animation: ptChamber .5s var(--settle); }
@keyframes ptChamber { from { opacity: .25; } to { opacity: 1; } }

/* ======================================================================
   MOTION PRIMITIVES
   Each program is a distinct entrance; they share one motion DNA.
   ====================================================================== */
[data-anim] { will-change: transform, opacity, clip-path; }

/* mask reveal — heading slides out from behind a hard edge */
[data-anim="mask"] { overflow: hidden; }
[data-anim="mask"] > * { display: block; transform: translateY(105%); transition: transform 1.05s var(--settle); }
[data-anim="mask"].in > * { transform: translateY(0); }

/* lift — body copy, weighted */
[data-anim="lift"] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--drive), transform 1s var(--settle); }
[data-anim="lift"].in { opacity: 1; transform: none; }

/* wipe — panels revealed by a traveling edge.
   The reveal is a shutter that slides off, NOT clip-path on the element
   itself: anything clipped (or scaled) to zero area is invisible to
   IntersectionObserver, so it would never receive .in and would stay
   hidden forever. Keep observed elements at full size, always. */
[data-anim="wipe"] { position: relative; }
[data-anim="wipe"]::after {
  content: ''; position: absolute; inset: 0; z-index: 6;
  background: var(--graphite);
  transform-origin: right center;
  transition: transform 1.15s var(--settle);
}
[data-anim="wipe"].in::after { transform: scaleX(0); }

/* index — instrumentation coming online, sequentially */
[data-anim="index"] > * { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--drive), transform .7s var(--settle); }
[data-anim="index"].in > * { opacity: 1; transform: none; }
[data-anim="index"].in > *:nth-child(1){transition-delay:.04s} [data-anim="index"].in > *:nth-child(2){transition-delay:.10s}
[data-anim="index"].in > *:nth-child(3){transition-delay:.16s} [data-anim="index"].in > *:nth-child(4){transition-delay:.22s}
[data-anim="index"].in > *:nth-child(5){transition-delay:.28s} [data-anim="index"].in > *:nth-child(6){transition-delay:.34s}
[data-anim="index"].in > *:nth-child(7){transition-delay:.40s} [data-anim="index"].in > *:nth-child(8){transition-delay:.46s}
[data-anim="index"].in > *:nth-child(9){transition-delay:.52s} [data-anim="index"].in > *:nth-child(10){transition-delay:.58s}
[data-anim="index"].in > *:nth-child(11){transition-delay:.64s} [data-anim="index"].in > *:nth-child(12){transition-delay:.70s}

/* seat — imagery settles with weight and a touch of scale */
[data-anim="seat"] { opacity: 0; transform: scale(1.06); transition: opacity 1s var(--drive), transform 1.4s var(--settle); }
[data-anim="seat"].in { opacity: 1; transform: scale(1); }

.par { will-change: transform; }

/* ======================================================================
   HERO
   ====================================================================== */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  padding-block: calc(var(--nav-h) + 40px) clamp(40px, 7vw, 90px); overflow: hidden; }
.hero__bg { position: absolute; inset: -8% 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .42; filter: contrast(1.12) saturate(.72); }
.hero__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,7,8,.86) 0%, rgba(6,7,8,.5) 42%, rgba(6,7,8,.97) 100%); }
.hero__sweep {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(224,168,104,.09) 48%, transparent 58%);
  transform: translateX(-40%); animation: sweep 9s var(--drive) infinite;
}
@keyframes sweep { 0%,72% { transform: translateX(-45%); } 100% { transform: translateX(45%); } }
.hero .wrap { z-index: 4; width: 100%; }
.hero__kicker { display: flex; align-items: center; gap: 1rem; margin-bottom: clamp(14px, 2.2vw, 26px); flex-wrap: wrap; }
.hero__kicker i { flex: 1; max-width: 90px; height: 1px; background: var(--bronze); }
/* the hero display sits below the global d1 scale so the whole composition
   lands inside one viewport on a laptop without the CTA falling off */
.hero__title { margin-bottom: clamp(16px, 2.4vw, 28px); font-size: clamp(2.3rem, 6.1vw, 6.1rem); }
.hero__title span { display: block; }
.hero__title .sub { color: var(--bronze); }
.hero__row { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 56px); align-items: flex-end; justify-content: space-between; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(18px, 2.4vw, 30px); }

/* telemetry strip — instrumentation along the base */
.telem { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  border-top: 1px solid var(--rule); margin-top: clamp(22px, 3.6vw, 46px); }
.telem div { padding: .85rem 0 0; border-right: 1px solid var(--rule); padding-right: 1rem; }
.telem div:last-child { border-right: 0; }
.telem b { display: block; font-family: var(--mono); font-size: 1.05rem; font-weight: 600;
  color: var(--ink-hi); margin-top: .3rem; letter-spacing: -.02em; }

/* scroll cue */
.cue { position: absolute; right: var(--gut); bottom: clamp(40px,7vw,90px); z-index: 4;
  display: flex; align-items: center; gap: .7rem; writing-mode: vertical-rl; }
.cue i { width: 1px; height: 54px; background: linear-gradient(var(--bronze), transparent);
  animation: cuepulse 2.4s var(--drive) infinite; transform-origin: top; }
@keyframes cuepulse { 0%,100% { transform: scaleY(.3); opacity: .4 } 50% { transform: scaleY(1); opacity: 1 } }

/* ======================================================================
   ARCHIVE PICKER — admin only, choosing the front page showcase
   ====================================================================== */
.fpick { display: grid; gap: 4px; margin-top: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.fpick__i { position: relative; aspect-ratio: 1; padding: 0; border: 1px solid var(--rule);
  background: var(--steel-900); overflow: hidden; display: block;
  transition: border-color var(--t-fast) var(--drive); }
/* The tile is a div so it can hold its own controls; this is the click target
   that toggles it, sitting under the arrows and the delete button. */
.fpick__hit { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  border: 0; background: none; cursor: pointer; padding: 0; }
.fpick__hit:focus-visible { outline: 2px solid var(--bronze-lt); outline-offset: -2px; }
/* Reorder arrows, revealed on hover so 88 tiles are not a wall of chrome. */
.fpick__mv { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 20px; height: 30px; padding: 0; border: 0; cursor: pointer;
  background: rgba(6,7,8,.82); color: var(--ink-hi); font-size: 10px; line-height: 30px;
  opacity: 0; transition: opacity var(--t-fast) var(--drive), background var(--t-fast); }
.fpick__mv--l { left: 0; }
.fpick__mv--r { right: 0; }
.fpick__i:hover .fpick__mv, .fpick__mv:focus-visible { opacity: 1; }
.fpick__mv:hover { background: var(--bronze); color: #0B0D0F; }
/* An uploaded photograph is flagged so it is never confused with the archive. */
.fpick__up { position: absolute; top: 0; left: 0; z-index: 2; padding: 2px 5px;
  font-family: var(--mono); font-size: .52rem; letter-spacing: .1em;
  background: var(--bronze); color: #0B0D0F; font-weight: 700; }
.fpick__i img { width: 100%; height: 100%; object-fit: cover;
  opacity: .42; filter: grayscale(1); transition: opacity var(--t-fast), filter var(--t-fast); }
.fpick__i:hover img { opacity: .8; filter: grayscale(.3); }
.fpick__i.is-on { border-color: var(--bronze); }
.fpick__i.is-on img { opacity: 1; filter: none; }
.fpick__i:focus-visible { outline: 2px solid var(--bronze-lt); outline-offset: -2px; }
/* An uploaded photograph, and a shipped frame that has been taken down. */
.fpick__i.is-up { cursor: default; }
.fpick__i.is-off { border-color: var(--rule); opacity: .5; }
.fpick__i.is-off img { opacity: .2; filter: grayscale(1); }
.fpick__i.is-off .fpick__n { background: var(--steel-800, #14171A); color: var(--steel-500); }
.fpick__x {
  position: absolute; top: 0; right: 0; z-index: 3; width: 22px; height: 22px; padding: 0;
  border: 0; cursor: pointer; background: rgba(6,7,8,.82); color: var(--ink-hi);
  font-size: 14px; line-height: 22px; text-align: center;
}
.fpick__x:hover { background: var(--spark, #FF6A15); color: #0B0D0F; }
.fpick__n { position: absolute; left: 0; bottom: 0; min-width: 20px; padding: 2px 5px;
  font-family: var(--mono); font-size: .58rem; line-height: 1.4; letter-spacing: .04em;
  color: var(--steel-500); background: rgba(6,7,8,.82); }
.fpick__i.is-on .fpick__n { color: var(--ink-hi); background: var(--bronze); font-weight: 600; }

/* ======================================================================
   MAKE COMBOBOX — 228 manufacturers behind a text field
   ====================================================================== */
/* The dropdown anchors to .mk__box, which wraps ONLY the input — so `top:
   100%` lands flush under it with no arithmetic. Anchoring to .mk instead
   meant subtracting the hint's height by hand, and `top: 100%` resolves
   against the padding box, so the padding reserved for the hint pushed the
   list 26px adrift. No magic numbers now. */
.mk { position: relative; }
.mk__box { position: relative; }
.mk__q { width: 100%; }
.mk__hint { display: block; margin-top: .35rem; color: var(--steel-500); }

.mk__list {
  position: absolute; left: 0; right: 0; top: 100%; margin-top: 2px; z-index: 60;
  max-height: 300px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--steel-850); border: 1px solid var(--bronze);
  box-shadow: 0 24px 60px rgba(0,0,0,.72);
}
.mk__list[hidden] { display: none; }

.mk__i {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  width: 100%; padding: .52rem .7rem; border: 0; cursor: pointer;
  background: none; color: var(--ink); text-align: left;
  font-family: inherit; font-size: .88rem; line-height: 1.3;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.mk__i:last-of-type { border-bottom: 0; }
.mk__i:hover, .mk__i.is-cursor { background: rgba(192,128,62,.16); color: var(--ink-hi); }
.mk__i.is-on { color: var(--bronze); }
/* A brand that does not build the selected platform class is still offered —
   it is only marked, never hidden, because the tagging is a best guess and a
   missing option costs a customer. */
.mk__i.is-off { color: var(--steel-500); }
.mk__i.is-off i { font-style: normal; flex-shrink: 0; opacity: .8; }

.mk__more { margin: 0; padding: .55rem .7rem; color: var(--steel-500);
  border-top: 1px solid var(--rule); background: var(--steel-900); }

/* "Use what you typed" leads the list the moment what they typed is not on
   it, so the way out is the most obvious thing on screen when it is needed. */
.mk__i--use { background: rgba(192,128,62,.14); color: var(--ink-hi); }
.mk__i--use span { font-weight: 600; }
.mk__i--use i { color: var(--bronze); }

/* The standing escape hatch, pinned last whatever is showing. */
.mk__i--other { position: sticky; bottom: 0; background: var(--steel-900);
  border-top: 1px solid var(--rule); border-bottom: 0; color: var(--ink); }
.mk__i--other i { color: var(--bronze); }
/* Layered, not blended: this row is sticky, so hovering it with a 16%-alpha
   tint replaced its opaque base and let the names scrolling underneath show
   straight through the text. The tint now sits ON the base colour. */
.mk__i--other:hover,
.mk__i--other:focus-visible {
  background: linear-gradient(rgba(192,128,62,.16), rgba(192,128,62,.16)), var(--steel-900);
  color: var(--ink-hi);
}

/* Manual entry: a plain field in the same slot, with the way back underneath. */
.mk__back {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--bronze); text-decoration: underline;
  text-underline-offset: 2px;
  /* The UA stylesheet pins text-transform and letter-spacing on buttons, so
     `font: inherit` alone left this sentence-case beside an all-caps label. */
  text-transform: uppercase; letter-spacing: inherit;
}
.mk__back:hover { color: var(--bronze-lt); }
.mk__back:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

@media (max-width: 720px) {
  .mk__list { max-height: 50svh; }
  .mk__i { padding: .72rem .7rem; }   /* bigger tap target */
}

/* ======================================================================
   THE CERAKOTE COLOR PICKER

   256 colors. A full-screen sheet on a phone, a centred modal on a desktop.
   Deliberately NOT reusing .rack: that is 2-up at <=640px with 136px tiles,
   which would be about twenty-one phone screens of scrolling. The rack keeps
   its generous sizing for the twelve on the shelf; this is a dense grid.
   ====================================================================== */
.cpick { position: fixed; inset: 0; z-index: 320; display: none; }
.cpick.is-open { display: block; }
.cpick__scrim { position: absolute; inset: 0; background: rgba(4,5,6,.86); backdrop-filter: blur(3px); }

.cpick__sheet {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(900px, calc(100vw - 32px)); height: min(84svh, 760px);
  display: flex; flex-direction: column;
  background: var(--steel-900); border: 1px solid var(--rule);
  box-shadow: 0 40px 120px rgba(0,0,0,.8);
  animation: cpickIn .34s var(--settle) both;
}
@keyframes cpickIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
                     to   { opacity: 1; transform: translate(-50%, -50%); } }
.cpick__sheet::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--bronze) 0 38%, rgba(192,128,62,.15) 38%); }

.cpick__head { flex-shrink: 0; padding: 1.1rem clamp(14px,3vw,20px) .7rem; border-bottom: 1px solid var(--rule); }
.cpick__x { background: none; border: 0; color: var(--steel-500); font-size: 1.5rem;
  line-height: 1; cursor: pointer; padding: 0 .2rem; }
.cpick__x:hover { color: var(--ink-hi); }
.cpick__q { width: 100%; margin-top: .7rem; }

/* Chip rows scroll sideways rather than wrapping into three lines of chrome. */
.cpick__chips {
  display: flex; gap: .4rem; margin-top: .6rem; overflow-x: auto; padding-bottom: .3rem;
  scrollbar-width: none; touch-action: pan-x; scroll-snap-type: x proximity;
}
.cpick__chips::-webkit-scrollbar { display: none; }
.cpick__chip, .cpick__fin {
  flex: 0 0 auto; scroll-snap-align: start; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .36rem .62rem; border: 1px solid var(--rule); background: var(--steel-850);
  color: var(--ink); font-family: var(--mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; transition: border-color var(--t-fast), color var(--t-fast);
}
.cpick__chip i { width: 10px; height: 10px; display: block; border: 1px solid rgba(255,255,255,.22); }
.cpick__chip:hover, .cpick__fin:hover { border-color: var(--bronze); color: var(--ink-hi); }
.cpick__chip.is-on, .cpick__fin.is-on { border-color: var(--bronze); background: rgba(192,128,62,.14); color: var(--ink-hi); }
.cpick__chips--fin { margin-top: .35rem; }
.cpick__note { font-size: .68rem; line-height: 1.5; color: var(--steel-500); margin: .6rem 0 0; }

.cpick__grid {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  /* Rows size to content and sit at the top. Without this the grid has a
     definite height from `flex: 1` and tries to distribute its rows into it. */
  grid-auto-rows: max-content; align-content: start;
  gap: 8px; padding: clamp(12px,2.4vw,16px);
}
.cpick__empty { grid-column: 1 / -1; color: var(--steel-500); font-size: .9rem; padding: 2rem 0; text-align: center; }

.cpick__t {
  /* Block, not flex. As a flex item inside a grid row this collapsed to 2px
     and its own chip overflowed it — a block box just sizes to its content. */
  position: relative; display: block; cursor: pointer;
  padding: 0; border: 1px solid var(--rule); background: var(--steel-850);
  text-align: left; overflow: hidden; transition: border-color var(--t-fast) var(--drive);
}
.cpick__t:hover { border-color: var(--steel-600, #5A6069); }
.cpick__t.is-on { border-color: var(--bronze); }
.cpick__t.is-cursor { outline: 2px solid var(--bronze-lt); outline-offset: -2px; }
.cpick__t:focus-visible { outline: 2px solid var(--bronze-lt); outline-offset: -2px; }

.cpick__chipimg { position: relative; display: block; aspect-ratio: 1; width: 100%; }
.cpick__chipimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A hairline inside every chip, or a dozen near-blacks are indistinguishable
   from each other and from the panel behind them. */
.cpick__chipimg::after { content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); pointer-events: none; }

.cpick__meta { display: block; padding: .4rem .45rem .45rem; }
.cpick__n { display: block; font-size: .72rem; line-height: 1.25; color: var(--ink-hi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpick__c { display: block; font-family: var(--mono); font-size: .58rem; color: var(--steel-500); margin-top: .15rem; }

.cpick__badge { position: absolute; top: 0; right: 0; padding: 2px 5px;
  font-family: var(--mono); font-size: .5rem; letter-spacing: .08em;
  background: rgba(6,7,8,.82); color: var(--ink); }
.cpick__badge--on { background: var(--bronze); color: #0B0D0F; font-weight: 700; }
/* Selection is a numbered tick, not just a border — color alone fails WCAG
   1.4.1 and is unreadable on a wall of colored tiles. */
.cpick__tick { position: absolute; top: 0; left: 0; width: 22px; height: 22px;
  display: grid; place-items: center; background: var(--bronze); color: #0B0D0F;
  font-family: var(--mono); font-size: .62rem; font-weight: 700; }

.cpick__foot {
  flex-shrink: 0; display: flex; align-items: center; gap: 1rem;
  padding: .75rem clamp(14px,3vw,20px); border-top: 1px solid var(--rule); background: var(--steel-900);
}
.cpick__cap { flex: 1; display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.cpick__cap b { font-size: .86rem; color: var(--ink-hi); }
.cpick__sum { font-family: var(--mono); font-size: .8rem; color: var(--bronze); }
.cpick__cap.is-flash { animation: cpickFlash .5s var(--drive); }
@keyframes cpickFlash { 0%,100% { transform: none } 25% { transform: translateX(-4px) } 75% { transform: translateX(4px) } }
.cpick__done {
  flex: 0 0 auto; height: 44px; padding: 0 1.5rem; border: 0; cursor: pointer;
  background: var(--bronze); color: #0B0D0F;
  font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .16em;
}
.cpick__done:hover { background: var(--bronze-lt); }

/* A color the shop does not stock, shown under the rack once chosen. */
.rack--off { opacity: .97; }
.swatch--off .swatch__chip { box-shadow: inset 0 0 0 1px rgba(192,128,62,.5); }

@media (max-width: 720px) {
  /* Full screen. An inline section would push Continue thousands of pixels
     down and strand the estimate panel, which stacks below the main column. */
  /* Opacity only. Animating transform here left the sheet parked at the
     keyframe's 18px offset, which pushed the Done button below the fold —
     on the one layout where reaching it one-handed is the whole point. The
     transform is doing layout on this breakpoint, so nothing else may touch it. */
  .cpick__sheet { left: 0; top: 0; transform: none; width: 100vw; height: 100svh;
    max-width: none; border: 0; animation: cpickFade .26s var(--settle) both; }
  @keyframes cpickFade { from { opacity: 0 } to { opacity: 1 } }
  .cpick__grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
  .cpick__n { font-size: .66rem; }
  /* Claw back header height — on a 812px screen every 40px is another half
     row of swatches, which is what the customer actually came here for. */
  .cpick__head { padding-top: .8rem; }
  .cpick__note { font-size: .62rem; margin-top: .45rem; }
  .cpick__q { margin-top: .55rem; }
  .cpick__chips { margin-top: .45rem; }
  .cpick__meta { padding: .3rem .35rem .35rem; }
  /* Done sits in the thumb zone, not pinned to the top out of reach. */
  .cpick__foot { padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .cpick__sheet { animation: none; }
  .cpick__cap.is-flash { animation: none; }
}

/* ======================================================================
   AGE GATE + ANNOUNCEMENT

   The two cards share .gate__card, and that is not decoration: both are the
   same fixed height, centered the same way, with the primary button in a
   fixed-height row at the bottom. That puts .gate__yes at identical screen
   coordinates in both, so a visitor clicks through the age check and the
   announcement without moving the mouse. Change one card's height and the
   alignment is gone, so the height lives in one variable.
   ====================================================================== */
:root { --gate-h: 392px; --gate-w: 524px; }

.gate { position: fixed; inset: 0; z-index: 300; display: none; }
.gate.is-open { display: block; }
.gate__scrim {
  position: absolute; inset: 0;
  background: rgba(4,5,6,.93);
  backdrop-filter: blur(3px);
}

.gate__card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(var(--gate-w), calc(100vw - 28px));
  height: var(--gate-h);
  display: flex; flex-direction: column;
  background: var(--steel-900);
  border: 1px solid var(--rule);
  box-shadow: 0 40px 120px rgba(0,0,0,.8);
  animation: gateIn .42s var(--settle) both;
}
@keyframes gateIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.gate__card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--bronze) 0 38%, rgba(192,128,62,.15) 38%);
}

.gate__top {
  display: flex; align-items: center; gap: .85rem;
  padding: 1.15rem clamp(18px, 4vw, 26px) 0;
}
.gate__rule { width: 26px; height: 1px; background: var(--bronze); flex-shrink: 0; }
.gate__top .tl:last-child { margin-left: auto; color: var(--steel-500); }

/* The only part that flexes. A long announcement scrolls inside here rather
   than growing the card, because growing the card would move the button. */
.gate__body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: clamp(14px, 3vw, 20px) clamp(18px, 4vw, 26px) 0;
}
.gate__t {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.75rem, 5.2vw, 2.5rem); line-height: .96; letter-spacing: -.02em;
  color: var(--ink-hi); margin: 0 0 .85rem;
}
.gate__t--sm { font-size: clamp(1.3rem, 3.8vw, 1.72rem); line-height: 1.08; }
.gate__p { font-size: .93rem; line-height: 1.62; color: var(--ink); margin: 0; }

/* Fixed height, so the button sits at the same y on both cards. */
.gate__act {
  flex-shrink: 0; padding: clamp(14px, 3vw, 18px) clamp(18px, 4vw, 26px) clamp(16px, 3vw, 20px);
  border-top: 1px solid var(--rule);
}
.gate__yes {
  display: block; width: 100%; height: 52px; border: 0; cursor: pointer;
  background: var(--bronze); color: #0B0D0F;
  font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  transition: background var(--t-fast) var(--drive), transform var(--t-fast) var(--drive);
}
.gate__yes:hover { background: var(--bronze-lt); }
.gate__yes:active { transform: translateY(1px); }
.gate__yes:focus-visible { outline: 2px solid var(--ink-hi); outline-offset: 2px; }

.gate__no {
  display: block; width: 100%; height: 30px; margin-top: 8px;
  background: none; border: 0; cursor: pointer; text-decoration: none;
  color: var(--steel-500); font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; text-align: center; line-height: 30px;
  transition: color var(--t-fast) var(--drive);
}
.gate__no:hover { color: var(--ink); }
/* Holds the row open on a card with no secondary action, so the primary
   button does not shift between the two cards. */
.gate__no--ghost { pointer-events: none; }

/* ------------------------------------------------------------ the refusal */
.gate--deny { overflow-y: auto; }
.gate__deny {
  min-height: 100svh; background: var(--steel-950, #0B0D0F);
  display: flex; align-items: center;
  padding-block: clamp(48px, 10vw, 110px);
}
.gate__dt {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.1rem, 7vw, 4.6rem); line-height: .93; letter-spacing: -.025em;
  color: var(--ink-hi); margin: 0 0 clamp(16px, 2.4vw, 26px);
}
.gate__dp { font-size: clamp(.95rem, 1.5vw, 1.06rem); line-height: 1.68; color: var(--ink);
  max-width: 62ch; margin: 0; }
.gate__law {
  margin-top: clamp(24px, 4vw, 40px); padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--rule); border-left: 3px solid var(--bronze);
  background: var(--steel-900); max-width: 72ch;
}
.gate__lawh { margin-bottom: .9rem; }
.gate__law p { font-size: .88rem; line-height: 1.68; color: var(--ink); margin: 0 0 .8rem; }
.gate__law p:last-child { margin-bottom: 0; }
.gate__law b { color: var(--ink-hi); font-family: var(--mono); font-size: .84rem; letter-spacing: .01em; }
.gate__note { color: var(--steel-400) !important; font-size: .82rem !important;
  border-top: 1px solid var(--rule); padding-top: .8rem; margin-top: 1rem !important; }
.gate__dfoot { margin-top: clamp(28px, 5vw, 52px); padding-top: 1rem; border-top: 1px solid var(--rule); }

@media (max-width: 460px) {
  :root { --gate-h: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .gate__card { animation: none; }
}

/* ======================================================================
   PRE-OPEN — the shop before the first listing

   Same construction as the hero so the two read as one site: photograph,
   scrim, slow sweep. The difference is the status rail across the bottom
   and the countdown reticle, which say "not yet" without a placeholder
   graphic. When a product is listed this section is never rendered.
   ====================================================================== */
.preopen {
  position: relative; overflow: hidden; display: flex; align-items: flex-end;
  min-height: min(92svh, 860px);
  padding-block: calc(var(--nav-h) + 48px) clamp(44px, 7vw, 96px);
}
.preopen__bg { position: absolute; inset: -8% 0; z-index: 0; }
.preopen__bg img { width: 100%; height: 100%; object-fit: cover;
  opacity: .34; filter: grayscale(.45) contrast(1.16) saturate(.7); }
.preopen__scrim { position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 78% 22%, rgba(192,128,62,.13) 0%, transparent 58%),
    linear-gradient(180deg, rgba(6,7,8,.9) 0%, rgba(6,7,8,.56) 40%, rgba(6,7,8,.98) 100%); }
.preopen__sweep { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(224,168,104,.085) 48%, transparent 58%);
  transform: translateX(-40%); animation: sweep 11s var(--drive) infinite; }
.preopen .wrap { position: relative; z-index: 4; width: 100%; }

/* one tick shy of the hero so the shop never out-shouts the front page */
.preopen__t { font-size: clamp(2.05rem, 5.4vw, 5.4rem); }
.preopen__t > span { display: block; }
.preopen__t > span:last-child { color: var(--bronze); }

/* a machined rule under the headline, drawn rather than stated */
.preopen__t::after {
  content: ''; display: block; height: 2px; width: clamp(96px, 16vw, 210px);
  margin-top: clamp(14px, 2vw, 24px);
  background: linear-gradient(90deg, var(--bronze), rgba(192,128,62,0));
}

/* ======================================================================
   "PREPARING" BAYS — categories the shop will carry, not invented stock
   ====================================================================== */
.svc--soon { cursor: default; }
.svc--soon::before { transform: scaleX(1); transform-origin: left;
  background: linear-gradient(90deg, var(--bronze) 0 34%, rgba(192,128,62,.16) 34%); }
.svc--soon:hover .svc__ph img { opacity: .26; filter: grayscale(.2) contrast(1.1); transform: scale(1.06); }
.svc--soon .svc__st { color: var(--bronze); }
.svc--soon .svc__st::before { background: var(--bronze); box-shadow: 0 0 8px rgba(192,128,62,.75);
  animation: soonBreathe 2.8s var(--drive) infinite; }
@keyframes soonBreathe { 0%,100% { opacity: .35 } 50% { opacity: 1 } }

/* three bars filling in sequence — the bay's own quiet progress read-out */
.soonpip { display: inline-flex; gap: 3px; align-items: center; }
.soonpip i { width: 12px; height: 2px; background: rgba(192,128,62,.22); display: block;
  animation: soonPip 2.1s var(--drive) infinite; }
.soonpip i:nth-child(2) { animation-delay: .22s; }
.soonpip i:nth-child(3) { animation-delay: .44s; }
@keyframes soonPip { 0%,70%,100% { background: rgba(192,128,62,.22) } 22%,48% { background: var(--bronze) } }

@media (prefers-reduced-motion: reduce) {
  .preopen__sweep,
  .svc--soon .svc__st::before,
  .soonpip i { animation: none; }
}

/* ======================================================================
   CAPABILITY / SERVICE CARDS
   ====================================================================== */
.grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  position: relative; background: var(--steel-900); padding: clamp(22px, 2.6vw, 38px);
  display: flex; flex-direction: column; gap: 1rem; min-height: 300px;
  overflow: hidden; isolation: isolate; text-align: left; width: 100%;
  border: 0; cursor: pointer; font-family: inherit; color: inherit;
  transition: background var(--t-med) var(--drive);
}
.card::before {
  /* lighting shift on hover */
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(90% 70% at 20% 0%, rgba(192,128,62,.16), transparent 70%);
  transition: opacity var(--t-med) var(--drive);
}
.card::after {
  /* the indicator rule drives across the top edge */
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--bronze);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--settle);
}
.card:hover { background: var(--steel-850); }
.card:hover::before { opacity: 1; }
.card:hover::after { transform: scaleX(1); }
.card__code { display: flex; justify-content: space-between; align-items: center; }
.card__img { position: relative; aspect-ratio: 16/10; overflow: hidden; margin: 0 calc(-1 * clamp(22px,2.6vw,38px)); }
.card__img img { width: 100%; height: 100%; object-fit: cover; opacity: .6; filter: saturate(.7) contrast(1.06);
  transition: transform 1.1s var(--settle), opacity var(--t-med) var(--drive); }
.card:hover .card__img img { transform: scale(1.05); opacity: .82; }
.card__t { font-weight: 800; font-size: clamp(1.2rem, 1.8vw, 1.62rem); letter-spacing: -.028em;
  text-transform: uppercase; color: var(--ink-hi); line-height: 1.02; }
.card__b { font-size: .9rem; color: var(--steel-400); flex: 1; }
.card__f { display: flex; justify-content: space-between; align-items: center; padding-top: .9rem;
  border-top: 1px solid var(--rule); }

/* spec table — clean technical data */
.spec { width: 100%; border-collapse: collapse; }
.spec tr { border-bottom: 1px solid var(--rule); }
.spec tr:last-child { border-bottom: 0; }
.spec td { padding: .8rem 0; font-size: .86rem; vertical-align: top; }
.spec td:first-child { font-family: var(--mono); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--steel-400); width: 42%; padding-right: 1.2rem; }
.spec td:last-child { color: var(--ink-hi); text-align: right; }

/* price pill */
.price { font-family: var(--mono); font-weight: 600; color: var(--bronze-lt);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ======================================================================
   RATE BOARD — headline numbers, posted like a shop's price board
   ====================================================================== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); }
/* Three headline numbers instead of four. Deliberately declared here and not
   after the media queries, so the 1180px and 640px rules below still step it
   down to two and then one. */
.stats--3 { grid-template-columns: repeat(3, 1fr); }
.stat { background: var(--steel-900); padding: clamp(20px, 2.4vw, 34px);
  display: flex; flex-direction: column; gap: .45rem; position: relative; overflow: hidden; }
.stat::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--bronze); transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--settle); }
[data-anim="index"].in .stat::after { transform: scaleX(1); }
.stat b { font-family: var(--mono); font-weight: 600; letter-spacing: -.03em; line-height: 1;
  font-size: clamp(1.5rem, 2.7vw, 2.15rem); color: var(--ink-hi); font-variant-numeric: tabular-nums; }
.stat span { font-size: .84rem; color: var(--steel-400); }

/* closing panel — the finale carries the shop's details */
.finale { position: relative; overflow: hidden; border-top: 1px solid var(--rule); }
.finale__bg { position: absolute; inset: -10% 0; z-index: 0; }
.finale__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .2;
  filter: saturate(.6) contrast(1.1); }
.finale__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,7,8,.94), rgba(6,7,8,.78) 45%, rgba(6,7,8,.97)); }
.finale .wrap { z-index: 3; }
.contactbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); margin-top: clamp(34px, 5vw, 62px); }
.contactbar div { background: rgba(17,20,23,.78); padding: clamp(18px, 2.2vw, 28px);
  display: flex; flex-direction: column; gap: .5rem; }
.contactbar b { font-weight: 700; color: var(--ink-hi); font-size: .96rem; line-height: 1.4; }
.contactbar a:hover { color: var(--bronze); }

/* ======================================================================
   PROCESS RAIL
   ====================================================================== */
.proc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); }
.proc__i { background: var(--steel-900); padding: clamp(20px,2.4vw,34px); position: relative; min-height: 210px;
  display: flex; flex-direction: column; gap: .7rem; }
.proc__i::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px;
  background: var(--bronze); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--settle); }
.proc__i.in::after { transform: scaleX(1); }
.proc__n { font-family: var(--mono); font-size: 2.1rem; font-weight: 600; color: var(--steel-700);
  line-height: 1; letter-spacing: -.04em; }
.proc__t { font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; color: var(--ink-hi); font-size: 1.02rem; }
.proc__b { font-size: .84rem; color: var(--steel-400); }

/* ======================================================================
   GALLERY
   ====================================================================== */
.gal { columns: 3; column-gap: 14px; }
.gal figure { break-inside: avoid; margin-bottom: 14px; position: relative; overflow: hidden;
  background: var(--steel-900); border: 1px solid var(--rule); cursor: zoom-in; }
.gal img { width: 100%; height: auto; opacity: .84; filter: saturate(.78) contrast(1.05);
  transition: transform 1s var(--settle), opacity var(--t-med) var(--drive), filter var(--t-med); }
.gal figure:hover img { transform: scale(1.04); opacity: 1; filter: saturate(.95) contrast(1.08); }
.gal figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .85rem;
  background: linear-gradient(transparent, rgba(6,7,8,.92)); opacity: 0;
  transform: translateY(8px); transition: opacity var(--t-med) var(--drive), transform var(--t-med) var(--settle); }
.gal figure:hover figcaption { opacity: 1; transform: none; }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 150; background: rgba(6,7,8,.97);
  display: flex; align-items: center; justify-content: center; padding: clamp(20px,5vw,70px);
  opacity: 0; visibility: hidden; transition: opacity .45s var(--drive), visibility .45s; }
.lb.is-open { opacity: 1; visibility: visible; }
.lb img { max-width: 100%; max-height: 86vh; object-fit: contain; transform: scale(.965);
  transition: transform .7s var(--settle); }
.lb.is-open img { transform: scale(1); }
.lb__x { position: absolute; top: clamp(16px,3vw,32px); right: clamp(16px,3vw,32px);
  width: 46px; height: 46px; border: 1px solid var(--rule-hi); background: transparent; cursor: pointer; color: var(--ink-hi); }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 68px;
  border: 1px solid var(--rule-hi); background: rgba(11,13,15,.7); cursor: pointer; color: var(--ink-hi);
  transition: background var(--t-fast), border-color var(--t-fast); }
.lb__nav:hover { background: var(--bronze); border-color: var(--bronze); color: var(--void); }
.lb__nav--p { left: clamp(8px,2vw,26px); } .lb__nav--n { right: clamp(8px,2vw,26px); }
.lb__cap { position: absolute; bottom: clamp(16px,3vw,30px); left: 0; right: 0; text-align: center; }

/* ======================================================================
   COLOR RACK
   ====================================================================== */
.rack { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); }
/* A transparent border reserved on every swatch, coloured when selected.
   This used to be `outline: 2px solid` with `outline-offset: -2px`, which
   draws the ring 2px INSIDE the tile while the photograph fills to the edge —
   so a sliver of the image sat outside the orange ring on all four sides.
   A border shrinks the content box instead, so the photo is framed by it. */
.swatch { position: relative; background: var(--steel-900); padding: 0; cursor: pointer;
  border: 2px solid transparent; text-align: left; overflow: hidden;
  font-family: inherit; color: inherit; }
.swatch__chip { height: 92px; position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -22px 34px -20px rgba(0,0,0,.85); }
/* The rack carries real swatch photographs; the hex behind stays as the
   backing colour so a tile is never blank while its image loads. */
.swatch__chip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.swatch__chip::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(118deg, rgba(255,255,255,.16) 0%, transparent 42%); }
.swatch__m { padding: .8rem .85rem; display: flex; flex-direction: column; gap: .28rem; }
.swatch__n { font-size: .82rem; font-weight: 600; color: var(--ink-hi); line-height: 1.2; }
.swatch.is-on { border-color: var(--bronze); }
.swatch:focus-visible { outline: 2px solid var(--bronze-lt); outline-offset: 2px; }
.swatch.is-on .swatch__m { background: rgba(192,128,62,.1); }

/* ======================================================================
   CONFIGURATOR — THE BUILD SHEET
   ====================================================================== */
.bs { display: grid; grid-template-columns: 1fr 372px; gap: clamp(20px,3vw,40px); align-items: start; }
.bs__main { min-width: 0; }

/* stepper */
.steps { display: flex; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 2rem;
  position: sticky; top: 62px; z-index: 40; }
.step { flex: 1; background: var(--steel-900); padding: .95rem .9rem; text-align: left;
  border: 0; cursor: pointer; font-family: inherit; color: inherit; position: relative;
  transition: background var(--t-fast) var(--drive); }
.step::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--bronze); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--settle); }
.step:hover { background: var(--steel-850); }
.step.is-on { background: var(--steel-850); }
.step.is-on::after, .step.is-done::after { transform: scaleX(1); }
.step.is-done::after { background: var(--steel-600); }
.step__n { font-family: var(--mono); font-size: .58rem; letter-spacing: .26em; color: var(--steel-500); }
.step.is-on .step__n { color: var(--bronze); }
.step__t { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em;
  color: var(--steel-400); margin-top: .25rem; }
.step.is-on .step__t { color: var(--ink-hi); }

/* stage panels */
.stage { display: none; }
.stage.is-on { display: block; animation: stagein .7s var(--settle); }
@keyframes stagein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.fset { border: 1px solid var(--rule); background: var(--steel-900); margin-bottom: 1px; }
.fset__h { padding: 1rem 1.25rem; border-bottom: 1px solid var(--rule); display: flex;
  justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.fset__t { font-weight: 800; text-transform: uppercase; letter-spacing: -.018em; color: var(--ink-hi); font-size: 1rem; }
.fset__b { padding: 1.25rem; }
.fhelp { font-size: .8rem; color: var(--steel-400); margin-bottom: 1rem; max-width: 70ch; }

/* field grid */
.fg { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.fg--1 { grid-template-columns: 1fr; }
.f { display: flex; flex-direction: column; gap: .45rem; }
.f__l { font-family: var(--mono); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--steel-400); }
.f__l .req { color: var(--bronze); }
.inp, select.inp, textarea.inp {
  width: 100%; padding: .8rem .9rem; background: var(--steel-850); color: var(--ink-hi);
  border: 1px solid var(--rule-hi); font-size: .92rem; font-family: var(--display);
  transition: border-color var(--t-fast) var(--drive), background var(--t-fast) var(--drive);
  appearance: none; border-radius: 0;
}
textarea.inp { min-height: 108px; resize: vertical; line-height: 1.55; }
select.inp { background-image: linear-gradient(45deg, transparent 50%, var(--steel-400) 50%), linear-gradient(135deg, var(--steel-400) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat; padding-right: 2.4rem; cursor: pointer; }

/* The select arrow above is drawn by hand; the date field's calendar glyph is
   not, and the browser ships a near-black one that disappears against this
   surface. Invert it and it belongs to the palette like everything else. */
input[type="date"].inp::-webkit-calendar-picker-indicator {
  filter: invert(1); opacity: .45; cursor: pointer;
  transition: opacity var(--t-fast) var(--drive);
}
input[type="date"].inp::-webkit-calendar-picker-indicator:hover { opacity: .95; }
input[type="date"].inp::-webkit-datetime-edit-month-field:not([aria-valuenow]),
input[type="date"].inp::-webkit-datetime-edit-day-field:not([aria-valuenow]),
input[type="date"].inp::-webkit-datetime-edit-year-field:not([aria-valuenow]) {
  color: var(--steel-300);
}
.inp:focus { outline: none; border-color: var(--bronze); background: var(--steel-800); }
.inp::placeholder { color: var(--steel-500); }

/* option rows — radio / check as engineered tiles */
.opts { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.opt { display: flex; align-items: flex-start; gap: .9rem; padding: .9rem 1rem; background: var(--steel-850);
  cursor: pointer; position: relative; transition: background var(--t-fast) var(--drive); }
.opt:hover { background: var(--steel-800); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt__mk { flex-shrink: 0; width: 15px; height: 15px; border: 1px solid var(--steel-500); margin-top: 3px;
  position: relative; transition: border-color var(--t-fast), background var(--t-fast); }
.opt__mk--r { border-radius: 50%; }
.opt__mk::after { content: ''; position: absolute; inset: 3px; background: var(--bronze);
  transform: scale(0); transition: transform .3s var(--snap); }
.opt__mk--r::after { border-radius: 50%; }
.opt input:checked ~ .opt__mk { border-color: var(--bronze); }
.opt input:checked ~ .opt__mk::after { transform: scale(1); }
.opt input:focus-visible ~ .opt__mk { outline: 2px solid var(--bronze-lt); outline-offset: 2px; }
.opt__c { flex: 1; min-width: 0; }
.opt__l { font-size: .92rem; color: var(--ink); line-height: 1.4; }
.opt input:checked ~ .opt__c .opt__l { color: var(--ink-hi); }
.opt__n { font-size: .76rem; color: var(--steel-500); margin-top: .22rem; }
.opt__p { flex-shrink: 0; margin-left: auto; padding-left: .8rem; }
.opt.is-on { background: var(--steel-800); }
.opt.is-on::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--bronze); }

/* qty stepper inside an option */
.qty { display: flex; align-items: center; gap: 0; margin-top: .6rem; }
.qty button { width: 30px; height: 30px; border: 1px solid var(--rule-hi); background: var(--steel-900);
  color: var(--ink-hi); cursor: pointer; font-family: var(--mono); transition: background var(--t-fast); }
.qty button:hover { background: var(--bronze); color: var(--void); border-color: var(--bronze); }
.qty input { width: 52px; height: 30px; text-align: center; background: var(--steel-850);
  border: 1px solid var(--rule-hi); border-left: 0; border-right: 0; color: var(--ink-hi);
  font-family: var(--mono); font-size: .84rem; }

/* service module toggle cards */
.mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); }
.mod { background: var(--steel-900); padding: 1.1rem; text-align: left; border: 0; cursor: pointer;
  font-family: inherit; color: inherit; position: relative; min-height: 152px;
  display: flex; flex-direction: column; gap: .5rem; transition: background var(--t-fast) var(--drive); }
.mod:hover { background: var(--steel-850); }
.mod::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--bronze);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--settle); }
.mod.is-on { background: var(--steel-800); }
.mod.is-on::after { transform: scaleX(1); }
.mod__t { font-weight: 800; text-transform: uppercase; font-size: 1.02rem; letter-spacing: -.022em; color: var(--ink-hi); }
.mod__s { font-size: .82rem; color: var(--steel-400); flex: 1; }
.mod__x { position: absolute; top: 1.1rem; right: 1.1rem; width: 18px; height: 18px;
  border: 1px solid var(--steel-500); transition: all var(--t-fast); }
.mod__x::before, .mod__x::after { content: ''; position: absolute; background: var(--steel-400);
  transition: background var(--t-fast), transform .35s var(--snap); }
.mod__x::before { left: 3px; right: 3px; top: 50%; height: 1px; margin-top: -.5px; }
.mod__x::after { top: 3px; bottom: 3px; left: 50%; width: 1px; margin-left: -.5px; }
.mod.is-on .mod__x { border-color: var(--bronze); background: var(--bronze); }
.mod.is-on .mod__x::before, .mod.is-on .mod__x::after { background: var(--void); }
.mod.is-on .mod__x::after { transform: scaleY(0); }

/* ======================================================================
   THE BAY — capability selection
   Each card is a bay on the rack: dark and gray on standby, lit and in
   color once armed. The switch throws, an edge light runs, the work
   photo comes up behind it.
   ====================================================================== */
.manifest {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  padding: .95rem 1.25rem; border: 1px solid var(--rule); background: var(--steel-850);
  margin-bottom: 1px; min-height: 58px;
}
.manifest__l { font-family: var(--mono); font-size: .58rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--steel-500); margin-right: .3rem; }
.chip {
  display: inline-flex; align-items: center; gap: .55rem; padding: .42rem .5rem .42rem .72rem;
  border: 1px solid rgba(192,128,62,.42); background: rgba(192,128,62,.11);
  font-family: var(--mono); font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bronze-lt);
  animation: chipIn .42s var(--settle);
}
@keyframes chipIn { from { opacity: 0; transform: translateY(-7px) scale(.93); } to { opacity: 1; transform: none; } }
.chip button { background: none; border: 0; color: inherit; cursor: pointer; opacity: .6;
  font-size: .8rem; line-height: 1; padding: 0 2px; transition: opacity var(--t-fast); }
.chip button:hover { opacity: 1; }

.bay { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
/* auto-fill leaves a dead cell when the row does not divide evenly. Sections
   with a fixed, small number of bays use auto-fit so they stretch instead. */
.bay--fit { grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); }

.svc {
  position: relative; background: var(--steel-900); border: 0; padding: 0; margin: 0;
  text-align: left; font-family: inherit; color: inherit; cursor: pointer;
  overflow: hidden; isolation: isolate; min-height: 252px;
  display: flex; flex-direction: column;
  transition: background var(--t-med) var(--drive);
}
/* work photo behind the bay */
.svc__ph { position: absolute; inset: 0; z-index: 0; }
.svc__ph img { width: 100%; height: 100%; object-fit: cover;
  opacity: .12; filter: grayscale(1) contrast(1.15); transform: scale(1.05);
  transition: opacity .8s var(--drive), filter .8s var(--drive), transform 1.3s var(--settle); }
.svc__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,13,15,.62) 0%, rgba(11,13,15,.9) 58%, rgba(11,13,15,.97) 100%); }
.svc:hover .svc__ph img { opacity: .2; transform: scale(1.08); }
.svc.is-on { background: var(--steel-850); }
.svc.is-on .svc__ph img { opacity: .36; filter: grayscale(0) saturate(.95) contrast(1.06); transform: scale(1); }

/* the arming sweep — a light running the length of the bay, once */
.svc__sweep { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(224,168,104,.2) 38%,
    rgba(245,247,248,.17) 50%, rgba(224,168,104,.2) 62%, transparent 100%);
  transform: translateX(-110%); opacity: 0; }
.svc.is-arming .svc__sweep { animation: svcSweep .68s var(--drive); }
@keyframes svcSweep { 0% { transform: translateX(-110%); opacity: 1; } 100% { transform: translateX(110%); opacity: 0; } }

/* edge light + indicator rule */
.svc::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 4;
  background: var(--bronze); transform: scaleX(0); transform-origin: left;
  transition: transform .52s var(--settle); }
.svc.is-on::before { transform: scaleX(1); }
.svc::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border: 1px solid transparent; transition: border-color .45s var(--drive); }
.svc.is-on::after { border-color: rgba(192,128,62,.5); }
.svc:focus-visible { outline: 2px solid var(--bronze-lt); outline-offset: -2px; }

.svc__in { position: relative; z-index: 2; padding: clamp(18px, 2.2vw, 26px);
  display: flex; flex-direction: column; gap: .65rem; flex: 1; }
.svc__top { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; }
.svc__code { display: flex; align-items: center; gap: .5rem; }
.svc__k { font-family: var(--mono); font-size: .54rem; color: var(--steel-500);
  border: 1px solid var(--rule-hi); padding: 1px 5px; line-height: 1.5; }
.svc.is-on .svc__k { color: var(--bronze); border-color: rgba(192,128,62,.4); }

/* the switch — it physically throws */
.svc__sw { width: 36px; height: 19px; border: 1px solid var(--steel-500); position: relative;
  flex-shrink: 0; transition: border-color var(--t-fast) var(--drive); }
.svc__sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  background: var(--steel-500); transition: transform .4s var(--snap), background .3s var(--drive),
  box-shadow .3s var(--drive); }
.svc.is-on .svc__sw { border-color: var(--bronze); }
.svc.is-on .svc__sw::after { transform: translateX(17px); background: var(--bronze);
  box-shadow: 0 0 11px rgba(192,128,62,.8); }

.svc__t { font-weight: 800; text-transform: uppercase; letter-spacing: -.026em;
  font-size: clamp(1.06rem, 1.5vw, 1.24rem); color: var(--ink-hi); line-height: 1.02; }
.svc__s { font-size: .86rem; color: var(--steel-400); flex: 1; }
.svc__foot { display: flex; justify-content: space-between; align-items: baseline; gap: .7rem;
  padding-top: .8rem; border-top: 1px solid var(--rule); }
.svc__st { font-family: var(--mono); font-size: .55rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--steel-500); display: flex; align-items: center; gap: .4rem; }
.svc__st::before { content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--steel-600); transition: background .35s var(--drive), box-shadow .35s var(--drive); }
.svc.is-on .svc__st { color: var(--bronze); }
.svc.is-on .svc__st::before { background: var(--bronze); box-shadow: 0 0 8px rgba(192,128,62,.9); }

/* link variant — same bay, but it opens a page instead of arming */
.svc--link { text-decoration: none; }
.svc--link:hover { background: var(--steel-850); }
.svc--link:hover::before { transform: scaleX(1); }
.svc--link:hover::after { border-color: rgba(192,128,62,.3); }
.svc--link:hover .svc__ph img { opacity: .3; filter: grayscale(0) saturate(.9) contrast(1.06); transform: scale(1.02); }
.svc--link .svc__foot .tlink::after { display: none; }
.svc--link:hover .svc__foot .tlink .btn__ar { transform: translateX(5px); }
.svc--link .btn__ar { transition: transform var(--t-med) var(--settle); }

/* configuration panel, tethered to the bay that opened it */
.rig { border: 1px solid var(--rule); background: var(--steel-900); margin-bottom: 1px;
  animation: rigIn .5s var(--settle); }
@keyframes rigIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.rig__h { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); }
.rig__ph { position: absolute; inset: 0; }
.rig__ph img { width: 100%; height: 100%; object-fit: cover; opacity: .26; filter: saturate(.8); }
.rig__ph::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,13,15,.94) 24%, rgba(11,13,15,.6) 100%); }
.rig__hin { position: relative; z-index: 2; padding: 1.05rem 1.25rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.rig__t { font-weight: 800; text-transform: uppercase; letter-spacing: -.02em;
  color: var(--ink-hi); font-size: 1.04rem; }
.rig__b { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.6rem; }

/* reference images attached to a build sheet */
.reflab { display: inline-flex; align-items: center; gap: .9rem; padding: .8rem 1.1rem;
  border: 1px dashed var(--rule-hi); cursor: pointer; transition: border-color var(--t-fast) var(--drive); }
.reflab:hover { border-color: var(--bronze); }
.refs { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.ref { position: relative; margin: 0; width: 104px; }
.ref img { width: 104px; height: 78px; object-fit: cover; border: 1px solid var(--rule-hi); background: var(--steel-850); }
.ref button { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px;
  border: 1px solid var(--rule-hi); background: var(--steel-900); color: var(--ink-hi);
  cursor: pointer; line-height: 1; font-size: .8rem; transition: background var(--t-fast); }
.ref button:hover { background: var(--spark); border-color: var(--spark); color: var(--void); }
.ref figcaption { display: block; margin-top: .35rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.refs--sm .ref { width: 78px; }
.refs--sm .ref img { width: 78px; height: 58px; }

/* the estimate readout — sticky instrumentation */
.est { position: sticky; top: 78px; }
.est__box { border: 1px solid var(--rule-hi); background: linear-gradient(180deg, var(--steel-850), var(--steel-900));
  box-shadow: inset 0 1px 0 var(--edge-top), 0 24px 50px -30px #000; }
.est__h { padding: 1rem 1.1rem; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; }
.est__total { padding: 1.3rem 1.1rem; border-bottom: 1px solid var(--rule); }
.est__num { font-family: var(--mono); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--ink-hi); letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.est__num small { font-size: .5em; color: var(--steel-400); font-weight: 500; }
.est__lines { max-height: 320px; overflow-y: auto; }
.est__line { padding: .7rem 1.1rem; border-bottom: 1px solid var(--rule); display: flex;
  justify-content: space-between; gap: .8rem; align-items: baseline; font-size: .82rem;
  animation: linein .45s var(--settle); }
@keyframes linein { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.est__line b { font-weight: 500; color: var(--ink); }
.est__line span { color: var(--steel-500); font-size: .72rem; display: block; margin-top: .15rem; }
.est__f { padding: 1.1rem; display: flex; flex-direction: column; gap: .6rem; }
.est__empty { padding: 2rem 1.1rem; text-align: center; color: var(--steel-500); font-size: .84rem; }

/* review build sheet */
.sheet { border: 1px solid var(--rule-hi); background: var(--steel-900); }
.sheet__h { padding: 1.4rem; border-bottom: 1px solid var(--rule-hi); display: flex;
  justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; }
.sheet__grp { border-bottom: 1px solid var(--rule); }
.sheet__gt { padding: .8rem 1.4rem; background: var(--steel-850); display: flex;
  justify-content: space-between; align-items: center; gap: 1rem; }
.sheet__row { padding: .75rem 1.4rem; display: flex; justify-content: space-between; gap: 1rem;
  align-items: baseline; border-bottom: 1px solid var(--rule); font-size: .88rem; }
.sheet__row:last-child { border-bottom: 0; }
.sheet__tot { padding: 1.4rem; display: flex; justify-content: space-between; align-items: baseline;
  background: var(--steel-850); }

/* notices */
.note { border-left: 2px solid var(--bronze); background: rgba(192,128,62,.07);
  padding: .9rem 1.1rem; font-size: .84rem; color: var(--steel-300); }
.note--warn { border-left-color: var(--spark); background: rgba(255,106,21,.07); }
.note strong { color: var(--ink-hi); }

/* ======================================================================
   PAGER — step between capabilities without going back to the index
   ====================================================================== */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border-top: 1px solid var(--rule); }
.pager__i { position: relative; background: var(--steel-900); padding: clamp(24px, 3vw, 44px) clamp(20px, 3vw, 40px);
  display: flex; flex-direction: column; gap: .55rem; overflow: hidden;
  transition: background var(--t-med) var(--drive); }
.pager__i--n { align-items: flex-end; text-align: right; }
.pager__i::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--bronze); transform: scaleX(0); transition: transform .5s var(--settle); }
.pager__i--p::before { transform-origin: right; }
.pager__i--n::before { transform-origin: left; }
.pager__i:hover { background: var(--steel-850); }
.pager__i:hover::before { transform: scaleX(1); }
.pager__t { font-weight: 800; text-transform: uppercase; letter-spacing: -.026em;
  font-size: clamp(1.15rem, 2.1vw, 1.75rem); color: var(--ink-hi); line-height: 1.02; }
.pager__i .btn__ar { transition: transform var(--t-med) var(--settle); }
.pager__i--p:hover .btn__ar { transform: rotate(180deg) translateX(5px); }
.pager__i--n:hover .btn__ar { transform: translateX(5px); }

/* ======================================================================
   FOOTER
   ====================================================================== */
.foot { border-top: 1px solid var(--rule); background: var(--void); position: relative; z-index: 3; }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(24px,3vw,48px);
  padding-block: clamp(48px,6vw,86px); }
.foot__t { font-family: var(--mono); font-size: .6rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--steel-500); margin-bottom: 1.1rem; }
.foot__l a, .foot__l li { display: block; padding: .34rem 0; font-size: .9rem; color: var(--steel-400);
  transition: color var(--t-fast) var(--drive); }
.foot__l a:hover { color: var(--bronze); }
.foot__bot { border-top: 1px solid var(--rule); padding-block: 1.5rem; display: flex;
  justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; }
.legal { font-size: .7rem; color: var(--steel-600); line-height: 1.6; max-width: 100%; }

/* ======================================================================
   UTILITIES
   ====================================================================== */
.stack { display: flex; flex-direction: column; }
.gap-xs{gap:.5rem}.gap-s{gap:1rem}.gap-m{gap:1.6rem}.gap-l{gap:2.6rem}.gap-xl{gap:4rem}
.row { display: flex; flex-wrap: wrap; }
.between { justify-content: space-between; }
.center { align-items: center; }
.mt-s{margin-top:1rem}.mt-m{margin-top:2rem}.mt-l{margin-top:3.4rem}
.mb-s{margin-bottom:1rem}.mb-m{margin-bottom:2rem}.mb-l{margin-bottom:3.4rem}
.tc { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* honeypot: off-canvas rather than display:none, which some bots skip */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,80px); align-items: center; }
.split--a { align-items: start; }
.hold { position: relative; overflow: hidden; background: var(--steel-900); }
.hold img { width: 100%; height: 100%; object-fit: cover; }
.ratio-4-5 { aspect-ratio: 4/5; } .ratio-16-9 { aspect-ratio: 16/9; } .ratio-1-1 { aspect-ratio: 1/1; }
.ratio-3-2 { aspect-ratio: 3/2; }
/* keep a wide hero from growing past its source and going soft */
.hold.ratio-3-2 { max-height: 720px; }
.hold img { image-rendering: auto; }

/* callout annotation on imagery */
.cal { position: absolute; z-index: 4; }
.cal__d { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--bronze);
  background: rgba(192,128,62,.28); position: relative; }
.cal__d::after { content: ''; position: absolute; inset: -7px; border: 1px solid var(--bronze);
  border-radius: 50%; opacity: 0; animation: ping 2.6s var(--drive) infinite; }
@keyframes ping { 0% { transform: scale(.6); opacity: .8 } 70%,100% { transform: scale(1.5); opacity: 0 } }
.cal__l { position: absolute; left: 14px; top: 3px; white-space: nowrap; padding-left: 34px; }
.cal__l::before { content: ''; position: absolute; left: 0; top: 50%; width: 28px; height: 1px;
  background: var(--bronze); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--settle); }
.cal.in .cal__l::before { transform: scaleX(1); }

/* 404 */
.e404 { min-height: 76svh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 1.4rem; }

/* ======================================================================
   RESPONSIVE — recomposed, not scaled
   ====================================================================== */
@media (max-width: 1320px) { .nav__cmd { display: none; } }
/* Measured, not guessed: with both buttons up, the link row starts clipping
   just under 1024, so the secondary button steps aside there and not before. */
@media (max-width: 1023px) { .nav__cta--alt { display: none; } }
@media (max-width: 1180px) {
  .bs { grid-template-columns: 1fr; }
  .est { position: static; }
  .est__lines { max-height: none; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .proc { grid-template-columns: repeat(2, 1fr); }
  .stats, .contactbar { grid-template-columns: repeat(2, 1fr); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  :root { --nav-h: 64px; }
  .nav__ctas { display: none; }
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__cta { display: none; }
  .grid--3 { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .gal { columns: 2; }
  .steps { position: static; overflow-x: auto; }
  .step { min-width: 128px; }
}
@media (max-width: 640px) {
  /* 16px is the floor at which iOS Safari stops zooming the page when a field
     takes focus. Below it, every tap on a long form shoves the layout sideways
     and the visitor has to pinch back out to carry on. */
  .inp, select.inp, textarea.inp { font-size: 16px; }
  .grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr; }
  .proc { grid-template-columns: 1fr; }
  .stats, .contactbar { grid-template-columns: 1fr; }
  .gal { columns: 1; }
  .pager { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .hero { min-height: 92svh; }
  .cue { display: none; }
  .telem { grid-template-columns: 1fr 1fr; }
  .telem div { border-right: 0; padding-bottom: .8rem; }
  .fg { grid-template-columns: 1fr; }
  .mods, .bay { grid-template-columns: 1fr; }
  .rack { grid-template-columns: repeat(2, 1fr); }
  .lb__nav { width: 40px; height: 54px; }
}

/* touch — no hover choreography, immediate feedback instead */
@media (hover: none) {
  .card:hover .card__img img { transform: none; }
  .gal figure:hover img { transform: none; }
  .gal figcaption { opacity: 1; transform: none; }
}

/* ------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  [data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-anim="mask"] > * { transform: none !important; }
  [data-anim="index"] > * { opacity: 1 !important; transform: none !important; }
  [data-anim="wipe"]::after { display: none; }
  .hero__sweep, .pt, .bt-sparks { display: none; }
  .boot { display: none; }
}

/* ======================================================================
   PRINTED WORK ORDER
   A real form: black on white, letter portrait, letterhead, line items,
   terms and an intake block the shop can write on.
   ====================================================================== */
#printForm { display: none; }

@media print {
  @page { size: letter portrait; margin: 13mm; }

  html, body { background: #fff !important; }
  body > *:not(#printForm) { display: none !important; }
  body::before, body::after { display: none !important; }

  #printForm {
    display: block; color: #000; font-family: var(--display);
    font-size: 9.6pt; line-height: 1.42; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .pf__head { display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16pt; border-bottom: 1.6pt solid #000; padding-bottom: 8pt; }
  .pf__mark { display: flex; gap: 10pt; align-items: center; }
  /* The mark is dark gunmetal and bronze, so it reads on white paper as-is.
     It used to sit on a dark tile, which the earlier light-metal artwork
     needed; on the current mark that tile would swallow it. */
  .pf__tile { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
  .pf__tile img { width: 46pt; height: auto; object-fit: contain; }
  .pf__name { font-weight: 900; font-size: 17pt; letter-spacing: -.02em; line-height: 1; text-transform: uppercase; }
  .pf__tag { font-family: var(--mono); font-size: 5.6pt; letter-spacing: .26em;
    text-transform: uppercase; margin-top: 3pt; color: #444; }
  .pf__addr { font-family: var(--mono); font-size: 6.6pt; line-height: 1.75;
    letter-spacing: .04em; color: #333; margin-top: 5pt; }
  .pf__doc { text-align: right; flex-shrink: 0; }
  .pf__doct { font-weight: 900; font-size: 13pt; letter-spacing: -.01em; text-transform: uppercase; line-height: 1; }
  .pf__meta { font-family: var(--mono); font-size: 7pt; line-height: 1.8; margin-top: 6pt; }
  .pf__meta b { font-weight: 600; }

  .pf__grid { display: flex; gap: 0; border-bottom: .6pt solid #000; }
  .pf__col { flex: 1; padding: 7pt 9pt 8pt 0; }
  .pf__col + .pf__col { border-left: .6pt solid #000; padding-left: 9pt; }
  .pf__lab { font-family: var(--mono); font-size: 6pt; letter-spacing: .22em;
    text-transform: uppercase; color: #666; margin-bottom: 4pt; }
  .pf__row { display: flex; gap: 6pt; padding: 1.6pt 0; }
  .pf__row span:first-child { font-family: var(--mono); font-size: 6.2pt; letter-spacing: .1em;
    text-transform: uppercase; color: #666; width: 62pt; flex-shrink: 0; padding-top: 1pt; }
  .pf__row span:last-child { font-weight: 500; }

  .pf__sec { font-family: var(--mono); font-size: 6.4pt; letter-spacing: .24em;
    text-transform: uppercase; background: #000; color: #fff; padding: 3.4pt 9pt; margin-top: 11pt; }

  .pf__tbl { width: 100%; border-collapse: collapse; }
  .pf__tbl th { font-family: var(--mono); font-size: 5.8pt; letter-spacing: .2em;
    text-transform: uppercase; color: #666; text-align: left; padding: 5pt 6pt; border-bottom: .6pt solid #000; }
  .pf__tbl th:last-child, .pf__tbl td:last-child { text-align: right; }
  .pf__tbl td { padding: 4.6pt 6pt; border-bottom: .4pt solid #bbb; vertical-align: top; }
  .pf__tbl tr.pf__grp td { background: #eee; font-family: var(--mono); font-size: 6.2pt;
    letter-spacing: .18em; text-transform: uppercase; padding: 3.4pt 6pt;
    text-align: left; font-weight: 600; }
  .pf__code { font-family: var(--mono); font-size: 6.6pt; color: #555; white-space: nowrap; }
  .pf__amt { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
  .pf__spec { color: #555; font-size: 8.4pt; }

  .pf__tot { display: flex; justify-content: space-between; align-items: flex-end;
    border-top: 1.6pt solid #000; padding-top: 7pt; margin-top: 2pt; }
  .pf__totn { font-family: var(--mono); font-weight: 600; font-size: 15pt; letter-spacing: -.02em; }

  .pf__notes { border: .6pt solid #000; padding: 7pt 9pt; margin-top: 5pt; min-height: 40pt; }
  /* reference only — deliberately small, the real artwork follows by email */
  .pf__refs { display: flex; flex-wrap: wrap; gap: 6pt; margin-top: 8pt;
    padding-top: 7pt; border-top: .4pt solid #bbb; }
  .pf__refs figure { margin: 0; width: 74pt; page-break-inside: avoid; break-inside: avoid; }
  .pf__refs img { width: 74pt; height: 55pt; object-fit: cover; border: .5pt solid #999; }
  .pf__refs figcaption { font-family: var(--mono); font-size: 5.4pt; color: #666;
    margin-top: 2pt; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pf__terms { font-size: 7pt; line-height: 1.6; color: #444; margin-top: 9pt;
    border-top: .4pt solid #bbb; padding-top: 6pt; }

  .pf__office { border: 1pt solid #000; margin-top: 10pt; page-break-inside: avoid; }

  /* The shop's own page. Always starts fresh so it can be pulled off, clipped
     to the job and written on without the customer's copy attached. */
  .pf__page2 { page-break-before: always; break-before: page; }
  .pf__p2head { display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 1.6pt solid #000; padding-bottom: 7pt; margin-bottom: 4pt; }
  .pf__p2t { font-weight: 900; font-size: 15pt; text-transform: uppercase; letter-spacing: -.01em; }
  .pf__p2ref { font-family: var(--mono); font-size: 8pt; color: #555; }
  .pf__officeh { font-family: var(--mono); font-size: 6.2pt; letter-spacing: .24em;
    text-transform: uppercase; background: #000; color: #fff; padding: 3.4pt 9pt; }
  .pf__fields { display: flex; flex-wrap: wrap; }
  .pf__f { flex: 1 1 33%; padding: 9pt 9pt 5pt; min-width: 110pt; }
  .pf__f i { display: block; border-bottom: .6pt solid #000; height: 15pt; }
  .pf__f span { font-family: var(--mono); font-size: 5.8pt; letter-spacing: .18em;
    text-transform: uppercase; color: #666; }
  .pf__sign { display: flex; gap: 18pt; margin-top: 12pt; page-break-inside: avoid; }
  .pf__sign > div { flex: 1; }
  .pf__sign i { display: block; border-bottom: .6pt solid #000; height: 24pt; }
  .pf__sign span { font-family: var(--mono); font-size: 5.8pt; letter-spacing: .18em;
    text-transform: uppercase; color: #666; }
  .pf__foot { display: flex; justify-content: space-between; font-family: var(--mono);
    font-size: 5.8pt; letter-spacing: .16em; text-transform: uppercase; color: #777;
    border-top: .4pt solid #bbb; margin-top: 10pt; padding-top: 5pt; }
  /* --- pagination: nothing may be sliced across a page boundary -------- */
  .pf__head, .pf__grid, .pf__col, .pf__tot, .pf__notes, .pf__terms,
  .pf__office, .pf__sign, .pf__block, .pf__tbl tr, .pf__f {
    page-break-inside: avoid; break-inside: avoid;
  }
  /* a section header never ends a page on its own */
  .pf__sec, .pf__officeh, .pf__tbl thead, .pf__tbl tr.pf__grp {
    page-break-after: avoid; break-after: avoid;
  }
  .pf__tbl thead { display: table-header-group; }
  .pf__tbl tfoot { display: table-footer-group; }
  /* keep at least two lines together if anything does have to wrap */
  #printForm { orphans: 3; widows: 3; }
}


/* ======================================================================
   TRANSFERS — the notice form

   One long form in a single bordered slab, sectioned by hairlines rather
   than by nested cards: the whole thing is one task, and a stack of cards
   would read as five unrelated ones.
   ====================================================================== */
.xf { border: 1px solid var(--rule); background: var(--steel-900); }

.xf__priv { display: block; margin: 0; padding: .95rem 1.15rem; line-height: 1.85;
  color: var(--steel-300); border-bottom: 1px solid var(--rule); background: var(--steel-850); }

.xf__g { padding: clamp(18px, 2.2vw, 30px); border-bottom: 1px solid var(--rule); }

.xf__h { margin: 0 0 1.1rem; font-family: var(--mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--bronze); }

.xf__sub { margin: 1.6rem 0 .9rem; font-family: var(--mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--steel-400); }

.xf__hint { display: block; color: var(--steel-300); }

/* The consequence of each acknowledgement is the part worth reading, so it
   gets its own line and a tone that clears 4.5:1 rather than the 2.2:1 the
   shared option note carries. */
.xf .opt__n { display: block; margin-top: .3rem; color: var(--steel-300); }

.xf__a { color: var(--bronze); text-decoration: underline; text-underline-offset: 2px; }
.xf__a:hover { color: var(--bronze-lt); }
.xf__a:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

.xf__again { display: block; margin-top: .6rem; color: var(--bronze-lt); }

/* The reference and the send button sit on one bar, so the thing you are
   about to send is named right next to the control that sends it. */
.xf__foot { display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem; flex-wrap: wrap; padding: clamp(18px, 2.2vw, 30px);
  border-top: 1px solid var(--rule); background: var(--steel-850); }
.xf__sum { display: flex; flex-direction: column; gap: .35rem; }
.xf__sum b { font-size: 1.05rem; letter-spacing: .06em; color: var(--ink-hi);
  font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .xf__foot { flex-direction: column; align-items: stretch; }
  .xf__foot .btn { justify-content: center; }
}