/* ============================================================================
   CITY MOBILE AUTO GLASS — "DAY BAY"
   ---------------------------------------------------------------------------
   Direction : the page IS a windshield on the bench under bright shop light.
   Metaphor  : daylight glass + service-bay lamp. Ground is cool glass-paper;
               the amber is a LAMP (it pools, it rakes across panels) rather
               than a decorative highlight; a real impact-star figure spreads
               across the hero.
   Tone      : precise · bright · assured
   Signature : an oversized outlined numeral bleeding off the left edge of every
               band, with the section title set INTO the rule beside it — the
               page reads like glass panels racked in a bay, not stacked cards.
   Contrast  : every pairing computed (light-contrast.py) — all AA or better.
               TWO HARD RULES fall out of that maths and are load-bearing:
                 1. Raw --amber on paper is 2.47 — it may NEVER carry text.
                    All amber text uses --amber-ink (#9A4400, 6.21 on paper).
                 2. White on --amber is 2.61 — amber fills take --ink (6.58),
                    never white.
   ========================================================================= */

/* ---- 1. TOKENS ---------------------------------------------------------- */
:root{
  /* glass-paper ground, 4 steps (was night-glass; names kept so every
     downstream rule keeps working — --night now means "ground step 1") */
  --night:#F7F9FA;
  --night-2:#EDF2F5;
  --night-3:#E2EAEF;
  --night-4:#CFDDE5;

  /* ink — cool, like glass, never pure black */
  --glass:#0B1D28;
  --glass-2:#415866;
  --glass-3:#4F6672;

  /* lamp */
  --amber:#FF7A00;
  --amber-t:#9A4400;      /* amber TEXT on paper: 6.21 — NOT the raw amber */
  --amber-deep:#C25A00;

  /* the inverted band ground, for sections that flip dark */
  --deep:#0B2230;
  --deep-ink:#E8F1F5;
  --deep-ink-2:#A9C0CC;
  --deep-amber:#FFA954;   /* amber TEXT on deep: 8.60 */

  --steel:#2A6F9E;

  --line:rgba(11,29,40,.14);
  --line-2:rgba(11,29,40,.075);
  --stroke:rgba(11,29,40,.20);   /* outlined-numeral stroke */
  --lamp:rgba(255,122,0,.16);

  --ease:cubic-bezier(.16,1,.3,1);
  --bar-h:76px;
}

/* ---- 2. RESET ----------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--night);color:var(--glass);
  font-family:'Public Sans',system-ui,sans-serif;
  font-size:15.5px;line-height:1.72;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--amber);color:var(--glass)}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--night)}
::-webkit-scrollbar-thumb{background:var(--night-4)}
::-webkit-scrollbar-thumb:hover{background:var(--amber)}

/* grain sits over everything — screen blend so it lifts, not muddies */
body::after{
  content:"";position:fixed;inset:0;z-index:998;pointer-events:none;
  opacity:.42;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

.wrap{width:min(1280px,92vw);margin:0 auto}

/* ---- 3. TYPE ------------------------------------------------------------ */
/* Display type. Dropped from 800 to 700 and the tracking opened from -.035em
   to -.02em: heavy uppercase set that tight reads as shouting, and the extra
   weight was doing nothing the size wasn't already doing. Line-height also
   opens slightly (.9 -> .96) because the generated service/location pages
   carry long factual headings that wrap to 4-6 lines, where .9 set them as a
   solid block. */
.dsp{
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:-.02em;
  line-height:.96;color:var(--glass);
}
.dsp em{
  font-family:'Newsreader',Georgia,serif;
  font-weight:300;font-style:italic;text-transform:none;
  letter-spacing:-.012em;color:var(--amber-t);
}
/* one word per page may be cut from the glass rather than printed on it */
.out{-webkit-text-stroke:1.35px var(--glass);-webkit-text-fill-color:transparent;
  color:transparent}
.mono{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10.4px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--glass-3);
}
/* H2 was 60px against a 16px lede — a 3.75x jump that turned long generated
   headings into 4-6 line walls. 44px keeps the hierarchy emphatic at a ~2.7x
   ratio and lets those headings settle to 2-3 lines. */
h1.dsp{font-size:clamp(34px,5.2vw,68px)}
h2.dsp{font-size:clamp(25px,3.3vw,44px)}
h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(15.5px,1.4vw,18.5px);
   line-height:1.22;color:var(--glass);letter-spacing:-.008em}
p{max-width:68ch;text-wrap:pretty}
.lede{font-size:clamp(15.5px,1.35vw,17.5px);line-height:1.75;color:var(--glass-2)}

/* ---- 4. FOLIO + BAR ----------------------------------------------------- */
.folio{background:var(--night);border-bottom:1px solid var(--line-2)}
.folio-in{display:flex;justify-content:space-between;align-items:center;
  min-height:34px;gap:14px;flex-wrap:wrap;padding:5px 0}
.folio .mono{font-size:9.5px;letter-spacing:.22em;color:var(--glass-3)}
.folio a.mono{color:var(--amber-t);text-decoration:none}
.folio .dot{width:6px;height:6px;border-radius:50%;background:var(--amber);
  display:inline-block;margin-right:8px;box-shadow:0 0 9px var(--amber);
  animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.folio-l,.folio-r{display:flex;align-items:center;gap:16px}

.bar{position:sticky;top:0;z-index:900;background:rgba(247,249,250,.88);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
  transition:transform .45s var(--ease)}
.bar.hide{transform:translateY(-102%)}
.bar-in{display:flex;align-items:center;justify-content:space-between;
  min-height:var(--bar-h);gap:20px}
/* BRAND LOCKUP.
   The supplied logo.png is a 500x500 SQUARE lockup — the mark sits above a
   stacked "CITY MOBILE / AUTO GLASS" wordmark, with white padding baked in.
   Forced to 52px tall it became a 52x52 tile whose wordmark rendered ~10px
   high and read as a smudge. It also carried background:var(--glass), which
   was a light chip under the old night palette but resolves to DARK INK on
   the light one — a dark box behind dark-navy artwork.
   So: the bar shows the MARK only (cropped past the baked-in wordmark) and a
   real text wordmark is set beside it, which stays legible at any size. */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;
  flex-shrink:0;min-width:0}
/* Crop measured off the source PNG, not eyeballed: ink spans rows 105-395 of
   500; the icon is 105-315, "CITY MOBILE" 327-364, "AUTO GLASS" 376-395.
   So the icon is 42% of the image height, centred at 42% down. Scaling to
   1/0.42 = 238% and pulling the focal point to 42% shows the icon alone. */
/* Crop measured off the source PNG, not eyeballed: ink spans rows 105-395 of
   500; the icon is 105-315, "CITY MOBILE" 327-364, "AUTO GLASS" 376-395.
   The window is the icon's own aspect (rows 105-315 => 210/500 = 42% of a
   square, so 46px tall needs a 46 * (500/210) = 110px tall image), and the
   image is pushed up by the 105px of empty space above the icon
   (105/500 * 110px = 23px). Everything from row 315 down — the baked-in
   wordmark — falls outside the window. */
.brand-mark{width:52px;height:46px;flex-shrink:0;overflow:hidden;
  position:relative}
.brand-mark img{position:absolute;left:50%;top:0;
  width:auto;height:110px;max-width:none;
  transform:translate(-50%,-23px);
  background:none;padding:0}
.brand-txt{display:flex;flex-direction:column;line-height:1;min-width:0}
.brand-txt b{font-family:'Archivo',sans-serif;font-weight:800;
  font-size:15.5px;letter-spacing:-.025em;color:var(--glass);
  white-space:nowrap}
.brand-txt span{font-family:'IBM Plex Mono',monospace;font-size:8.4px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--amber-t);
  margin-top:3px;white-space:nowrap}
@media(max-width:420px){
  .brand-txt b{font-size:14px}
  .brand-txt span{font-size:7.6px;letter-spacing:.16em}
  .brand-mark{width:40px;height:40px}
}
.nav{display:flex;align-items:center;gap:26px}
.nav>a,.drop-p{font-size:13.6px;font-weight:600;color:var(--glass);text-decoration:none;
  letter-spacing:.01em;padding:6px 0;position:relative;white-space:nowrap}
/* full-width rule scaled from 0 — animating `width` relayouts the bar */
.nav>a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--amber);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)}
@media(hover:hover){.nav>a:hover::after{transform:scaleX(1)}}
.nav>a.on::after{transform:scaleX(1)}
.drop{position:relative}
.drop-p{display:flex;align-items:center;gap:7px}
.cv{width:6px;height:6px;border-right:1.6px solid var(--glass);
  border-bottom:1.6px solid var(--glass);transform:rotate(45deg) translateY(-2px);
  transition:transform .3s var(--ease)}
.drop.open .cv{transform:rotate(225deg) translateY(-4px)}
.drop-m{position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  background:var(--night-2);border:1px solid var(--line);
  box-shadow:0 26px 60px rgba(0,0,0,.6);
  padding:10px;min-width:290px;opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.drop-m.wide{min-width:540px;columns:2;column-gap:8px}
.drop.open .drop-m{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop-m a{display:flex;align-items:center;gap:10px;padding:8px 11px;
  font-size:13.2px;text-decoration:none;color:var(--glass-2);break-inside:avoid;
  transition:background .2s var(--ease),color .2s var(--ease)}
.drop-m a .n{font-family:'IBM Plex Mono',monospace;font-size:9.4px;
  color:var(--glass-3);letter-spacing:.1em}
@media(hover:hover){.drop-m a:hover{background:var(--night-3);color:var(--amber-t)}}
.bar-cta{display:flex;align-items:center;gap:12px}

/* BUTTON COLOUR CONTRACT — the two states are pinned to literal values, not
   to --glass/--night. Those tokens FLIP inside an inverted band (.hero/.colo),
   so a wipe painted with the same token as the label produced dark-on-dark
   (measured contrast 1.00 — the label vanished). Ink and paper are named here
   once and used explicitly on both sides of the hover.
     rest : ink on amber .......... 6.58
     hover: paper on ink .......... 15.02  */
.btn{--btn-ink:#0B1D28;--btn-paper:#F7F9FA;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--amber);color:var(--btn-ink);text-decoration:none;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:13.2px;
  text-transform:uppercase;letter-spacing:.06em;
  padding:14px 24px;position:relative;overflow:hidden;
  transition:color .3s var(--ease)}
/* The wipe is painted BEHIND the button's own content. `.btn>*{z-index:1}`
   only lifted ELEMENT children (the arrow span) — the label is a bare text
   node, so it stayed at the parent's paint level and the fill covered it.
   z-index:-1 puts the fill under all content, text nodes included. */
.btn::before{content:"";position:absolute;inset:0;background:var(--btn-ink);
  transform:translateX(-101%);transition:transform .5s var(--ease);z-index:-1}
.btn>*{position:relative}
@media(hover:hover){
  .btn:hover::before{transform:translateX(0)}
  .btn:hover{color:var(--btn-paper)}
}
.btn .a{transition:transform .4s var(--ease)}
@media(hover:hover){.btn:hover .a{transform:translateX(5px)}}
.btn.ghost{background:transparent;color:var(--glass);
  border:1px solid var(--line);box-shadow:none}
@media(hover:hover){
  .btn.ghost:hover{color:var(--btn-paper);border-color:var(--btn-ink)}
}
.btn:focus-visible{outline:2px solid var(--amber-t);outline-offset:3px}

.burger{display:none;width:44px;height:44px;border:1px solid var(--line);
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger i{width:19px;height:2px;background:var(--glass);
  transition:transform .35s var(--ease),opacity .25s}
.burger.on i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mnav{position:fixed;inset:var(--bar-h) 0 0;background:var(--night);z-index:880;
  overflow-y:auto;padding:22px 0 60px;transform:translateY(-100%);
  transition:transform .5s var(--ease);visibility:hidden}
.mnav.on{transform:translateY(0);visibility:visible}
.mnav a{display:flex;justify-content:space-between;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--line-2);
  font-family:'Archivo',sans-serif;font-weight:600;font-size:15px;
  color:var(--glass);text-decoration:none}
.mnav .n{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--glass-3)}
.mnav .mh{display:block;margin:22px 0 4px;font-family:'IBM Plex Mono',monospace;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--amber-t)}

/* ---- 5. HERO — the bay ------------------------------------------------- */
.hero{position:relative;overflow:hidden;
  padding:clamp(30px,4.2vh,52px) 0 0}
/* the inspection lamp: a pooled glow raking from upper-right */
.hero::before{content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(1100px,90vw);aspect-ratio:1;right:-16%;top:-42%;
  background:radial-gradient(circle,var(--lamp) 0%,transparent 62%)}
/* a second, colder pool low-left keeps the deep ground from going flat */
.hero::after{content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(780px,70vw);aspect-ratio:1;left:-14%;bottom:-38%;
  background:radial-gradient(circle,rgba(95,168,211,.10) 0%,transparent 64%)}
.hero .wrap{position:relative;z-index:2}

/* STAGE 1 — sized so headline + opening paragraph + BOTH CTAs land above a
   900px fold. The panel is pushed past the right gutter and overlaps the text
   column: deliberately NOT a 50/50 text|image split. */
.hero-in{display:grid;
  grid-template-columns:64px minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(18px,2.4vw,42px);align-items:center;position:relative}
.hero-lead{position:relative;z-index:2;padding-right:clamp(0px,1.6vw,24px)}
.hero-media{position:relative;z-index:1;
  margin-right:calc(-1 * clamp(0px,4.5vw,74px))}

.rail{display:flex;flex-direction:column;align-items:center;gap:15px;
  padding-top:8px;align-self:stretch}
.rail-cap{width:26px;height:3px;background:var(--amber);flex-shrink:0;
  box-shadow:0 0 12px var(--amber)}
.rail-word{writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:'IBM Plex Mono',monospace;font-size:9.4px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--glass-3);white-space:nowrap}
.rail-line{width:1px;flex:1;min-height:40px;
  background:linear-gradient(180deg,var(--line),transparent)}

.hero-eyebrow{display:flex;align-items:center;gap:11px;margin-bottom:16px;
  opacity:0;animation:fadein .8s var(--ease) .1s forwards}
.hero-eyebrow .ln{width:30px;height:1px;background:var(--amber)}
.hero-eyebrow span{font-family:'IBM Plex Mono',monospace;font-size:9.8px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--glass-2)}

/* the display size is bound to viewport HEIGHT as well as width — on a short
   laptop screen a width-only clamp overflows the fold */
.hero-lead h1{margin-bottom:4px;
  font-size:clamp(34px,min(4.9vw,7.2vh),62px);line-height:.98}
/* the homepage H1 is the docx's full literal sentence ("City Mobile Auto
   Glass: Auto Glass Repair and Windshield Replacement in Canoga Park, CA"),
   not a short punchy tagline like every other page's H1 -- at the shared
   34-62px display size it wraps to 6 visual lines and pushes the hero CTAs
   below the fold. Scoped to body.home only; service/location/info pages
   keep short H1s and are unaffected by this override. */
body.home .hero-lead h1{font-size:clamp(24px,min(3.6vw,5.4vh),42px)}
.hero-lead h1 .ln{display:block;overflow:hidden;padding:.05em 0}
.hero-lead h1 .ln>span{display:block;transform:translateY(108%);
  animation:up 1.05s var(--ease) forwards}
.hero-lead h1 .ln:nth-child(1)>span{animation-delay:.14s}
.hero-lead h1 .ln:nth-child(2)>span{animation-delay:.24s}
.hero-lead h1 .ln:nth-child(3)>span{animation-delay:.34s}
.hero-lead h1 .ln:nth-child(4)>span{animation-delay:.44s}
@keyframes up{to{transform:translateY(0)}}
@keyframes fadein{to{opacity:1}}

.hero-lead .lede{opacity:0;animation:fadein .9s var(--ease) .62s forwards;
  margin-top:18px}
.hero-open{max-width:58ch;font-size:clamp(14.6px,1.12vw,16.4px);line-height:1.7}
.hero-acts{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap;
  opacity:0;animation:fadein .9s var(--ease) .82s forwards}

/* proof strip — sits with the CTAs where it does work, on the rule beneath */
.hero-trust{list-style:none;display:flex;flex-wrap:wrap;
  gap:clamp(18px,2.6vw,44px);margin-top:clamp(20px,2.6vw,32px);
  padding-top:clamp(16px,2vw,22px);border-top:1px solid var(--line);
  opacity:0;animation:fadein .9s var(--ease) .96s forwards}
.hero-trust li{display:flex;flex-direction:column;gap:2px}
/* at narrow widths the flex row wrapped 2+1 and looked broken —
   an explicit 3-track grid keeps the proof strip even */
@media(max-width:640px){
  .hero-trust{display:grid;grid-template-columns:repeat(3,1fr);
    gap:clamp(10px,3vw,20px)}
  .ht-l{font-size:8.4px;letter-spacing:.12em}
}
.ht-n{font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(19px,2vw,26px);letter-spacing:-.02em;color:var(--amber-t);
  line-height:1}
.ht-l{font-family:'IBM Plex Mono',monospace;font-size:9.4px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--glass-3)}

/* hero photo: framed like a glass panel in a rack, with the impact figure over it */
.hero-media{display:flex;flex-direction:column;gap:0;position:relative}
.pane{position:relative;overflow:hidden;background:var(--night-2);
  border:1px solid var(--line);
  opacity:0;animation:fadein 1s var(--ease) .5s forwards}
/* taller crop — the old 4:3.05 panel read small against an 84px headline */
.pane img{width:100%;aspect-ratio:4/3.72;object-fit:cover;object-position:58% 42%;
  filter:saturate(.9) contrast(1.07) brightness(.95)}
/* cool night wash so the daylight photo belongs in the bay */
.pane::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,22,32,.10) 38%,rgba(7,22,32,.78)),
             linear-gradient(90deg,rgba(7,22,32,.44),transparent 46%)}
.pane .impact{position:absolute;inset:0;z-index:2;pointer-events:none}
.pane-tag{position:absolute;left:0;top:0;z-index:3;background:var(--amber);
  font-family:'IBM Plex Mono',monospace;font-size:9.4px;
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:9px 14px}

/* the panel's own status plate — makes the photo a working object in the bay */
.pane-plate{position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:14px clamp(14px,1.6vw,20px);
  border-top:1px solid rgba(232,241,245,.18);
  background:linear-gradient(180deg,rgba(7,22,32,0),rgba(7,22,32,.62))}
.pp-live{display:inline-flex;align-items:center;gap:8px;
  font-family:'IBM Plex Mono',monospace;font-size:9.6px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--deep-ink-2)}
.pp-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 0 rgba(255,122,0,.6);animation:cmagPulse 2.2s infinite}
.pp-tel{font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(15px,1.5vw,19px);letter-spacing:-.02em;
  color:var(--deep-ink);text-decoration:none;transition:color .3s var(--ease)}
@media(hover:hover){.pp-tel:hover{color:var(--deep-amber)}}

/* STAGE 2 — the bench: the second paragraph reads across from the spec sheet.
   Each .bench-copy paragraph is a SEPARATE grid item in column 2 (not one
   wrapped block), so align-items:center centers each one independently in
   its own row track rather than centering the pair as a unit -- tried this,
   it left the 2nd paragraph floating disconnected with gaps on both sides,
   worse than the original top gap. Reverted to align-items:start.
   Fix instead wraps both paragraphs in one flex column (.bench-copy-wrap)
   that CAN be centered as a single block, and gives it a shared connecting
   rule instead of two independent amber rules that read as unrelated
   fragments once vertical space opens up between them. */
.bench-in{display:grid;
  grid-template-columns:64px minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(18px,2.4vw,42px);align-items:center;
  margin-top:clamp(26px,3.4vw,46px);
  padding:clamp(24px,3vw,38px) 0 clamp(26px,3.4vh,44px);
  border-top:1px solid var(--line)}
.bench-copy-wrap{grid-column:2;display:flex;flex-direction:column;
  gap:18px;max-width:56ch;
  padding-left:clamp(16px,1.8vw,26px);border-left:2px solid var(--amber)}
.bench-copy{margin-top:0!important;
  font-size:clamp(14.6px,1.12vw,16.4px);line-height:1.72;
  animation-delay:.2s!important;
  padding-left:0!important;border-left:0!important}
.bench-in .spec{grid-column:3;border-top:1px solid var(--line)!important;
  margin-right:calc(-1 * clamp(0px,4.5vw,74px))}

@media(max-width:1180px){
  .hero-in,.bench-in{grid-template-columns:64px minmax(0,1fr)}
  .hero-lead{padding-right:0}
  /* grid-column:2 is load-bearing, not cosmetic: .hero-in drops from 3 tracks
     to 2 here, and .hero-media has no explicit column at the wider width (it
     just falls in source order after .hero-lead). Auto-placement then wraps
     it into row 2, but back into column 1 -- the 64px rail track, not the
     content track -- collapsing the whole hero photo to a 64px sliver. Same
     fix already applied to .bench-copy/.bench-in .spec below; this is the
     hero-side equivalent that was missing. */
  .hero-media{grid-column:2;margin-right:0;margin-top:34px}
  .bench-copy,.bench-in .spec{grid-column:2}
  .bench-in .spec{margin-right:0;margin-top:26px}
}

/* the spec strip below the photo — reads as the panel's label, not a card */
.spec{border:1px solid var(--line);border-top:0;background:var(--night-2);
  opacity:0;animation:fadein 1s var(--ease) .66s forwards}
.spec-h{display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--line);background:var(--night-3)}
.spec-h .mono{color:var(--glass-2)}
.spec-h .no{font-family:'Archivo',sans-serif;font-weight:800;font-size:11.6px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--amber-t)}
.spec ul{list-style:none}
.spec li{display:flex;align-items:center;gap:11px;padding:9px 16px;
  font-size:13.3px;color:var(--glass-2);border-bottom:1px solid var(--line-2)}
.spec li:last-child{border-bottom:0}
.mark{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:17px;height:17px;color:var(--amber-t)}
.mark svg{width:13px;height:13px}

/* ---- 6. TICKER ---------------------------------------------------------- */
.ticker{background:var(--night-2);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);overflow:hidden;padding:13px 0}
.tick-t{display:flex;width:max-content;animation:march 34s linear infinite}
.ticker:hover .tick-t{animation-play-state:paused}
.tick-t span{display:flex;align-items:center;gap:24px;padding-right:24px}
.tick-t i{font-family:'Archivo',sans-serif;font-style:normal;font-weight:800;
  font-size:12.4px;text-transform:uppercase;letter-spacing:.11em;
  color:var(--glass-2);white-space:nowrap}
.tick-t .sp{color:var(--amber-t);font-size:8px}
@keyframes march{to{transform:translateX(-50%)}}

/* ---- 7. BANDS — glass panels racked in a bay --------------------------- */
.sec{padding:clamp(64px,9vh,124px) 0;position:relative}
/* alternate panels are raised, not a different colour family */
.sec.alt{background:var(--night-2)}
.sec.lit{background:var(--night-2)}
.sec.lit::before{content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(900px,80vw);aspect-ratio:1;left:-14%;top:-30%;
  background:radial-gradient(circle,var(--lamp) 0%,transparent 60%)}
.sec .wrap{position:relative;z-index:1}

/* Two adjacent bands with the SAME ground colour stack their top+bottom
   padding into a dead void with nothing to signal a section break — up to
   ~248px of empty space with no visual explanation. The docx-driven service
   and location page renderers don't track alternation between bands, so
   this occurs repeatedly and unpredictably across the site (confirmed on
   auto-glass-repair, window-regulator-repair; present in source on most
   other service pages). Fixed once here rather than by hand-editing each
   page's alt/lit sequence, since that risks the same drift recurring on any
   future page the renderer produces.
   .sec.lit shares .sec.alt's background (both var(--night-2)), so an
   alt->lit or lit->alt adjacency has the identical problem — matched here
   too, not just literal .sec+.sec or .sec.alt+.sec.alt runs.
   .qsec is EXCLUDED (:not(.qsec) on both sides): it's a plain .sec with no
   .alt/.lit class, but re-points its own background to var(--deep) (see
   section 25b), a real colour change from every other plain .sec. The first
   version of this rule matched .qsec + .sec on class names alone and
   collapsed the padding between the deep quote band and the very next
   section to near-zero, on every service/location page (quote-section.php
   sits directly after the hero, no ticker between them there unlike the
   homepage) — caught by screenshot, not assumed safe.
   The plain-.sec rule ALSO needs :not(.alt):not(.lit) on the LEFT side, not
   just the right: an earlier version only constrained the second element,
   so `.sec.alt + .sec` (a genuine colour-changing alternation) matched it
   too — "the first element is .sec:not(.qsec)" is true of .sec.alt as well,
   since .alt doesn't unset the base .sec class. That zeroed the padding on
   every real alt->plain boundary site-wide (confirmed via computed-style
   sweep across all 11 service pages + homepage, not just one screenshot). */
.sec:not(.alt):not(.lit):not(.qsec) + .sec:not(.alt):not(.lit):not(.qsec){padding-top:0}
.sec.alt:not(.qsec) + .sec.alt:not(.qsec),
.sec.alt:not(.qsec) + .sec.lit:not(.qsec),
.sec.lit:not(.qsec) + .sec.alt:not(.qsec),
.sec.lit:not(.qsec) + .sec.lit:not(.qsec){padding-top:0}
section[id]{scroll-margin-top:calc(var(--bar-h) + 22px)}

/* THE SIGNATURE: oversized outlined numeral bleeding off the left edge,
   with the title set into the rule beside it. Repeated on every band. */
/* numeral | title | lede on ONE baseline row — the previous two-column version
   left a dead bottom-right quadrant on every band. The numeral is now an
   in-flow track, so nothing floats over empty space. */
.band-head{position:relative;display:grid;
  grid-template-columns:auto minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(16px,2.6vw,44px);align-items:start;
  margin-bottom:clamp(30px,4vw,54px);
  padding-top:clamp(18px,2.6vw,34px);border-top:1px solid var(--line)}
.band-head>div{align-self:end}
/* the lede tracks the heading's TOP, not its baseline: a one-line lede
   bottom-aligned against a two-line display heading reads as stranded. */
.band-head>.lede{align-self:start;padding-top:.55em}
/* scaled down with the H2 it sits beside — at 116px it now dwarfed a 44px
   heading instead of counterweighting it */
.band-no{font-family:'Archivo',sans-serif;font-weight:700;
  font-size:clamp(44px,5.6vw,86px);line-height:.72;letter-spacing:-.04em;
  -webkit-text-stroke:1.3px var(--stroke);
  -webkit-text-fill-color:transparent;color:transparent;
  pointer-events:none;user-select:none;align-self:end;
  margin-bottom:-.06em}
@media(max-width:1180px){
  .band-head{grid-template-columns:auto minmax(0,1fr);}
  .band-head .lede{grid-column:2}
}
/* below ~620 the numeral track eats too much width and the lede ends up
   indented in a narrow gutter — drop the numeral out of flow entirely */
@media(max-width:620px){
  .band-head{grid-template-columns:minmax(0,1fr);gap:10px}
  .band-head .lede{grid-column:1;padding-top:.35em}
  .band-no{position:absolute;left:0;top:calc(100% - .28em);
    font-size:clamp(44px,17vw,68px);opacity:.5;z-index:0}
}
.band-head>*{position:relative;z-index:1}
.band-meta{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.band-meta .mono{font-size:9.8px;letter-spacing:.28em}
.band-meta .rule{flex:1;height:1px;background:var(--line);max-width:110px}
.band-head .lede{max-width:52ch;padding-bottom:4px}

/* ---- 8. SERVICE RACK — the core list ----------------------------------- */
.rack{border-top:1px solid var(--line)}
.slot{display:grid;grid-template-columns:78px minmax(0,1fr) 44px;
  gap:clamp(16px,2.4vw,32px);align-items:start;
  padding:clamp(18px,2.3vw,26px) 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;position:relative;overflow:hidden}
/* NOTE: this row used to animate `padding-left`, which reflows the whole grid
   (and re-wraps .slot-d) on every frame — that was the judder. The nudge is
   now a compositor-only transform on the children. Never animate padding,
   margin, width or height on hover. */
.slot>*{transition:transform .5s var(--ease)}
/* the lamp rakes across the slot on hover */
.slot::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,rgba(255,122,0,.13),rgba(255,122,0,.02) 46%,transparent 72%);
  transform:translateX(-101%);transition:transform .6s var(--ease);
  will-change:transform}
.slot>*{position:relative;z-index:1}
.slot-n{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;
  color:var(--glass-3);padding-top:.5em;
  transition:color .35s var(--ease),transform .5s var(--ease)}
.slot-t{transition:color .35s var(--ease),transform .5s var(--ease);
  font-size:clamp(17px,1.9vw,24px);
  font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:-.018em;
  color:var(--glass);line-height:1.15}
.slot-d{font-size:13.4px;line-height:1.62;color:var(--glass-2);margin-top:6px;
  max-width:none}
.slot-k{font-size:12.6px;line-height:1.6;color:var(--glass-3);margin-top:7px;
  max-width:none}
.slot-k b{color:var(--amber-t);font-weight:600}
/* the per-service CTA line (docx: "Get Auto Glass Repair ->" etc.) — the
   card's own arrow button is a fixed 42px circle shared identically across
   all 11 rows, so its geometry can't flex per CTA text length without
   breaking that consistency. This renders the source CTA phrase as its own
   line instead, in the same amber/mono voice as .slot-k's bold label. */
.slot-cta{font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.08em;color:var(--amber-t);margin-top:10px;
  display:flex;align-items:center;gap:6px}
.slot-cta span{transition:transform .35s var(--ease)}
@media(hover:hover){.slot:hover .slot-cta span{transform:translateX(4px)}}
.slot-a{display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border:1px solid var(--line);color:var(--glass);
  flex-shrink:0;justify-self:end;
  transition:transform .5s var(--ease),background .35s var(--ease),
             border-color .35s var(--ease),color .35s var(--ease)}
.slot-a svg{width:16px;height:16px}
@media(hover:hover){
  .slot:hover>*{transform:translateX(16px)}
  .slot:hover .slot-a{transform:translateX(16px) rotate(-45deg)}
  .slot:hover::before{transform:translateX(0)}
  .slot:hover .slot-t{color:var(--amber-t)}
  .slot:hover .slot-n{color:var(--amber-t)}
  .slot:hover .slot-a{background:var(--amber);border-color:var(--amber);
    color:var(--glass);transform:rotate(-45deg)}
}
.slot:focus-visible{outline:2px solid var(--amber-t);outline-offset:-4px}

/* ---- 9. PANELS (cards, but racked) ------------------------------------- */
.panels{display:grid;gap:1px;background:var(--line)}
.panels.p2{grid-template-columns:repeat(2,1fr)}
.panels.p3{grid-template-columns:repeat(3,1fr)}
.panels.p4{grid-template-columns:repeat(4,1fr)}
.panel{background:var(--night);padding:clamp(22px,2.4vw,32px);position:relative;
  transition:background .4s var(--ease)}
.sec.alt .panel,.sec.lit .panel{background:var(--night-2)}
.panel .pn{display:block;font-family:'IBM Plex Mono',monospace;font-size:9.8px;
  letter-spacing:.22em;color:var(--amber-t);margin-bottom:15px}
.panel h3{margin-bottom:.55rem}
.panel p{font-size:13.4px;line-height:1.65;color:var(--glass-2)}
/* lamp edge lights the top of the panel on hover */
.panel::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:var(--amber);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease)}
@media(hover:hover){
  .panel:hover{background:var(--night-3)}
  .panel:hover::before{transform:scaleX(1)}
}

/* ---- 10. CHECKS / STEPS ------------------------------------------------- */
.checks{list-style:none}
.checks li{display:flex;align-items:flex-start;gap:11px;padding:8px 0;
  font-size:14.2px;line-height:1.6;color:var(--glass-2)}
.checks .mark{margin-top:3px}

.steps{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:clamp(58px,7vw,92px) 1fr;
  gap:clamp(14px,2vw,26px);padding:clamp(18px,2.2vw,26px) 0;
  border-bottom:1px solid var(--line);align-items:start}
.step-n{font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(28px,3.6vw,44px);line-height:.9;letter-spacing:-.04em;
  -webkit-text-stroke:1.2px var(--stroke);
  -webkit-text-fill-color:transparent;color:transparent}
.step h3{margin-bottom:.4rem}
.step p{font-size:13.8px;color:var(--glass-2)}

/* ---- 11. SPEC LEADERS (the bay's job sheet) ---------------------------- */
.leaders{list-style:none}
.leaders li{display:flex;align-items:baseline;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--line-2);font-size:14.2px}
.leaders li:first-child{border-top:1px solid var(--line)}
.leaders .lb{color:var(--glass);white-space:nowrap;font-weight:600}
.leaders .ld{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px)}
.leaders .lv{color:var(--amber-t);white-space:nowrap;
  font-family:'IBM Plex Mono',monospace;font-size:11.4px;letter-spacing:.1em}
.leaders .ln2{display:block;font-size:13.2px;color:var(--glass-2);
  margin-top:5px;max-width:62ch}

/* ---- 12. FIGURE: the fact plate ---------------------------------------- */
.fact{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  border-left:2px solid var(--amber);padding:16px 0 16px 22px;margin-bottom:26px}
.fact .big{font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(38px,5.4vw,68px);color:var(--amber-t);line-height:.9;
  letter-spacing:-.04em}
.fact span:last-child{font-size:14.4px;color:var(--glass-2);flex:1;min-width:210px}

/* ---- 13. REVIEWS -------------------------------------------------------- */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.rev{background:var(--night);padding:26px 24px;position:relative}
.sec.alt .rev,.sec.lit .rev{background:var(--night-2)}
.rev .stars{color:var(--amber-t);font-size:11.5px;letter-spacing:.16em;margin-bottom:13px}
.rev p{font-size:13.6px;line-height:1.7;color:var(--glass-2)}
.rev .att{margin-top:15px;padding-top:12px;border-top:1px solid var(--line-2)}
.rev .who{font-family:'IBM Plex Mono',monospace;font-size:9.6px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber-t)}

/* ---- 14. AREAS ---------------------------------------------------------- */
.areas{display:flex;flex-wrap:wrap;gap:8px}
.area{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;
  border:1px solid var(--line);text-decoration:none;font-size:13.2px;
  color:var(--glass-2);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.area .d{width:4px;height:4px;background:var(--amber);flex-shrink:0}
@media(hover:hover){.area:hover{background:var(--amber);border-color:var(--amber);
  color:var(--glass)}}
.area:focus-visible{outline:2px solid var(--amber-t);outline-offset:2px}
.area.primary{background:var(--amber);border-color:var(--amber);color:var(--glass);
  font-weight:600}
.area.primary .d{background:var(--glass)}

/* ---- 15. FAQ ------------------------------------------------------------ */
.faq{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{display:grid;grid-template-columns:1fr 40px;gap:18px;align-items:center;
  padding:19px 0;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{font-size:15.8px;line-height:1.35;transition:color .3s var(--ease)}
@media(hover:hover){.qa summary:hover h3{color:var(--amber-t)}}
.qa .chip{width:32px;height:32px;border:1px solid var(--line);position:relative;
  justify-self:end;transition:background .35s var(--ease),
  border-color .35s var(--ease),transform .45s var(--ease)}
.qa .chip::before,.qa .chip::after{content:"";position:absolute;top:50%;left:50%;
  background:var(--glass);transition:background .3s var(--ease)}
.qa .chip::before{width:11px;height:1.5px;transform:translate(-50%,-50%)}
.qa .chip::after{width:1.5px;height:11px;transform:translate(-50%,-50%)}
.qa[open] .chip{background:var(--amber);border-color:var(--amber);transform:rotate(45deg)}
.qa[open] .chip::before,.qa[open] .chip::after{background:var(--glass)}
.qa-a{display:grid;grid-template-columns:1fr 40px;gap:18px;padding:0 0 21px;
  font-size:14.2px;line-height:1.72;color:var(--glass-2);animation:qain .5s var(--ease)}
@keyframes qain{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.qa summary:focus-visible{outline:2px solid var(--amber-t);outline-offset:2px}

/* ---- 16. CTA BAND + MAP ------------------------------------------------- */
.cta-band{display:block;background:var(--amber);color:var(--glass);
  text-decoration:none;overflow:hidden;padding:17px 0;
  transition:background .45s var(--ease),color .45s var(--ease)}
@media(hover:hover){.cta-band:hover{background:var(--glass);color:var(--night)}}
.cta-band .tick-t{animation-duration:28s}
.cta-band .tick-t i{color:currentColor;font-size:15.5px;letter-spacing:.08em}
.cta-band .tick-t .sp{color:currentColor;opacity:.5}

.mapwrap{border:1px solid var(--line);overflow:hidden;background:var(--night-2)}
.mapwrap iframe{width:100%;height:clamp(300px,42vh,440px);display:block;border:0;
  filter:grayscale(1) contrast(1.04);
  transition:filter .7s var(--ease)}
@media(hover:hover){.mapwrap:hover iframe{filter:grayscale(.15) contrast(1)}}

/* ---- 17. BREADCRUMB / COMPACT HERO ------------------------------------- */
.hero.compact{padding:clamp(30px,4.5vh,52px) 0 clamp(42px,6vh,72px)}
.hero.compact .hero-lead h1{font-size:clamp(28px,4vw,52px)}
.crumb{display:flex;align-items:center;gap:9px;margin-bottom:17px;flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;font-size:9.6px;letter-spacing:.2em;
  text-transform:uppercase}
.crumb a{color:var(--glass-3);text-decoration:none;transition:color .25s var(--ease)}
@media(hover:hover){.crumb a:hover{color:var(--amber-t)}}
.crumb .sep{color:var(--line)}
.crumb .cur{color:var(--glass-2)}

/* ---- 18. FOOTER --------------------------------------------------------- */
.colo{background:var(--night-2);border-top:1px solid var(--line);
  padding:clamp(48px,7vh,80px) 0 26px;position:relative}
.fgrid{display:grid;grid-template-columns:1.3fr .85fr .85fr 1fr;
  gap:clamp(22px,3vw,46px);padding-bottom:34px;border-bottom:1px solid var(--line)}
/* The footer shows the FULL square lockup (mark + baked-in wordmark), so it
   needs real height — at 66px the wordmark rendered ~5px tall and read as a
   smudge. The chip is correct here: this sits inside .colo, an inverted band,
   where --glass resolves to light and the dark-navy artwork needs it. */
.fbrand img{width:132px;height:132px;background:var(--glass);
  padding:10px;margin-bottom:16px;border-radius:3px}
@media(max-width:640px){.fbrand img{width:112px;height:112px}}
.fbrand p{font-size:13.3px;line-height:1.68;color:var(--glass-2);max-width:34ch}
.colo h4{font-family:'IBM Plex Mono',monospace;font-size:9.6px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--amber-t);margin-bottom:15px;font-weight:400}
.colo ul{list-style:none}
.colo ul li{margin-bottom:8px}
.colo ul a{font-size:13.2px;color:var(--glass-2);text-decoration:none;
  transition:color .25s var(--ease)}
@media(hover:hover){.colo ul a:hover{color:var(--amber-t)}}
.fnap div{margin-bottom:13px}
.fnap .fl{display:block;font-family:'IBM Plex Mono',monospace;font-size:9.2px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--glass-3);margin-bottom:3px}
.fnap a,.fnap span{font-size:13.4px;color:var(--glass-2);text-decoration:none}
@media(hover:hover){.fnap a:hover{color:var(--amber-t)}}
.tel-lg{font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(23px,2.5vw,31px);color:var(--glass);text-decoration:none;
  letter-spacing:-.025em;display:inline-block;margin-top:14px}
@media(hover:hover){.tel-lg:hover{color:var(--amber-t)}}
.fbot{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-top:22px;flex-wrap:wrap}
.fbot .mono{font-size:9.4px;color:var(--glass-3)}
.fbot a{color:inherit;text-decoration:none}
@media(hover:hover){.fbot a:hover{color:var(--amber-t)}}

.fab-call{position:fixed;right:17px;bottom:17px;z-index:940;width:56px;height:56px;
  border-radius:50%;background:var(--amber);color:var(--glass);display:none;
  align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.fab-call svg{width:24px;height:24px}

/* ---- 19. REVEAL PRIMITIVE ---------------------------------------------- */
.ro{opacity:0;transform:translateY(30px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.ro.in{opacity:1;transform:none}
.ro.d1{transition-delay:.08s}
.ro.d2{transition-delay:.16s}
.ro.d3{transition-delay:.24s}

/* impact-star figure draws itself when the hero settles */
.impact path,.impact line{stroke:var(--amber);stroke-width:1.1;fill:none;
  stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200);
  animation:crack 1.5s var(--ease) 1.15s forwards;opacity:.85}
.impact circle{fill:none;stroke:var(--amber);stroke-width:1.1;opacity:0;
  animation:fadein .8s var(--ease) 1.5s forwards}
@keyframes crack{to{stroke-dashoffset:0}}

/* ---- 20. RESPONSIVE ----------------------------------------------------- */
@media(max-width:1080px){
  .drop-m.wide{min-width:430px}
  .panels.p4{grid-template-columns:repeat(2,1fr)}
  .revs{grid-template-columns:1fr}
}
@media(max-width:980px){
  .nav{display:none}
  .burger{display:flex}
  .hero-in,.bench-in{grid-template-columns:1fr;gap:30px}
  /* .hero-media must be reset to column 1 here too. The max-width:1180px
     query above sets it to grid-column:2 and stays active all the way down
     through this narrower breakpoint (max-width queries don't turn off just
     because a narrower one also matches) — but .hero-in collapses to a
     single 1fr column here, so "column 2" doesn't exist and the browser
     squeezed the photo into a bogus overflow micro-column instead. Same
     fix already applied to .bench-copy/.bench-in .spec on the next line;
     this was the same gap that caused the 1180px bug, recurring here. */
  .hero-media,.bench-copy,.bench-in .spec{grid-column:1}
  .rail{display:none}
  .band-head{grid-template-columns:1fr;gap:16px;align-items:start}
  .band-no{top:calc(-1 * clamp(20px,7vw,44px));left:0}
  .fgrid{grid-template-columns:1fr 1fr;gap:28px}
  .fab-call{display:flex}
}
@media(max-width:860px){
  .panels.p2,.panels.p3,.panels.p4{grid-template-columns:1fr}
  .slot{grid-template-columns:44px minmax(0,1fr) 34px;gap:14px}
  /* the bracketed index wrapped to two lines in a 44px track */
  .slot-n{white-space:nowrap;font-size:10px;letter-spacing:.08em}
  .slot-d,.slot-k,.slot-cta{display:none}
  .slot-a{width:34px;height:34px}
}
@media(max-width:640px){
  .fgrid{grid-template-columns:1fr}
  .hero-acts .btn{flex:1 1 100%;justify-content:center}
  .folio .hide-s{display:none}
  .fact{padding-left:16px}
  .step{grid-template-columns:46px 1fr;gap:12px}
}

/* ---- 21. ACCESSIBILITY GATES ------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001s!important;animation-delay:0s!important;
    transition-duration:.001s!important}
  .ro,.hero-lead .lede,.hero-acts,.hero-eyebrow,.pane,.spec{
    opacity:1!important;transform:none!important}
  .hero-lead h1 .ln>span{transform:none!important}
  .impact path,.impact line{stroke-dashoffset:0!important}
  .impact circle{opacity:.85!important}
  .tick-t{animation:none!important}
}
@media(hover:none){
  .slot:hover>*{transform:none}
  .slot:hover::before{transform:translateX(-101%)}
  .panel:hover::before{transform:scaleX(0)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   22. SECTION-SPECIFIC STRUCTURES
   Each band gets its OWN shape. Reusing one grid for every section is what
   makes a page read as generated, so nothing below repeats another band.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- 22a. STAIRCASE (Why) — offset columns, editorial, not a card row ---- */
.stair{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,30px);counter-reset:st}
.stair .st{position:relative;padding-top:26px;border-top:2px solid var(--amber)}
.stair .st:nth-child(2){margin-top:clamp(22px,3.4vw,54px)}
.stair .st:nth-child(3){margin-top:clamp(44px,6.8vw,108px)}
.stair .st:nth-child(4){margin-top:clamp(66px,10.2vw,162px)}
.stair .st-n{font-family:'IBM Plex Mono',monospace;font-size:9.8px;
  letter-spacing:.24em;color:var(--amber-t);display:block;margin-bottom:12px}
.stair .st h3{font-size:clamp(17px,1.75vw,22px);margin-bottom:.6rem;line-height:1.16}
.stair .st p{font-size:13.4px;line-height:1.66;color:var(--glass-2)}
@media(max-width:980px){
  .stair{grid-template-columns:repeat(2,1fr)}
  .stair .st:nth-child(2){margin-top:clamp(22px,3.4vw,54px)}
  .stair .st:nth-child(3){margin-top:0}
  .stair .st:nth-child(4){margin-top:clamp(22px,3.4vw,54px)}
}
@media(max-width:620px){
  .stair{grid-template-columns:1fr;gap:0}
  .stair .st{margin-top:0!important;padding:22px 0;border-top:1px solid var(--line)}
  .stair .st:first-child{border-top:2px solid var(--amber)}
}

/* ---- 22b. SPLIT RACK (Services) — sticky index beside a scrolling list ---- */
.rack-wrap{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
  gap:clamp(24px,4vw,72px);align-items:start}
.rack-side{display:block}
.rack-side>.stick{position:sticky;top:calc(var(--bar-h) + 30px)}
.rack-side .fact{margin-bottom:0}
.rack-side .note{margin-top:20px;font-size:13.2px;color:var(--glass-2);
  line-height:1.68;max-width:34ch}
.rack-side .btn{margin-top:22px}
.rack-wrap{align-items:stretch}
.rack-wrap>.rack-side{border-right:1px solid var(--line);
  padding-right:clamp(18px,2.6vw,40px);height:100%}
@media(max-width:980px){
  .rack-wrap{grid-template-columns:1fr;gap:26px}
  .rack-side>.stick{position:static}
  .rack-wrap>.rack-side{border-right:0;padding-right:0;height:auto}
}

/* ---- 22c. LEDGER (Standards) — numbered spec rows, not cards ------------ */
.ledger{border-top:1px solid var(--line)}
.led{display:grid;
  grid-template-columns:clamp(96px,12vw,168px) minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(16px,3vw,44px);padding:clamp(20px,2.4vw,30px) 0;
  border-bottom:1px solid var(--line);align-items:start;
  transition:background .4s var(--ease)}
@media(hover:hover){.led:hover{background:rgba(255,122,0,.045)}}
.led-k{font-family:'IBM Plex Mono',monospace;font-size:11.4px;letter-spacing:.16em;
  color:var(--amber-t);text-transform:uppercase;line-height:1.5}
.led h3{margin-bottom:0;font-size:clamp(16px,1.7vw,21px);line-height:1.2}
.led p{font-size:13.6px;color:var(--glass-2);line-height:1.68;
  padding-left:clamp(0px,1.6vw,26px);border-left:1px solid var(--line)}
@media(max-width:900px){
  .led{grid-template-columns:clamp(96px,13vw,168px) minmax(0,1fr)}
  .led p{grid-column:2;margin-top:.5rem;padding-left:0;border-left:0}
}
@media(max-width:640px){
  .led{grid-template-columns:1fr;gap:8px}
  .led p{grid-column:1}
}

/* ---- 22d. FEATURE QUOTE (Reviews) — one hero quote + two supporting ----- */
.quotes{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);
  gap:clamp(18px,2.6vw,38px);align-items:start}
.q-lead{border-left:2px solid var(--amber);padding:6px 0 6px clamp(20px,2.6vw,34px)}
.q-lead .stars{color:var(--amber-t);font-size:13px;letter-spacing:.2em;margin-bottom:16px}
.q-lead p{font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(19px,2.3vw,30px);line-height:1.42;color:var(--glass);
  letter-spacing:-.012em;max-width:34ch}
.q-lead .who{display:block;margin-top:20px;font-family:'IBM Plex Mono',monospace;
  font-size:9.8px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-t)}
.q-side{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.q-s{background:var(--night);padding:22px}
.sec.alt .q-s,.sec.lit .q-s{background:var(--night-2)}
.q-s .stars{color:var(--amber-t);font-size:11px;letter-spacing:.16em;margin-bottom:11px}
.q-s p{font-size:13.3px;line-height:1.68;color:var(--glass-2)}
.q-s .who{display:block;margin-top:13px;padding-top:11px;
  border-top:1px solid var(--line-2);font-family:'IBM Plex Mono',monospace;
  font-size:9.4px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-t)}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}

/* ---- 22e. FLOW (Mobile service) — a horizontal 3-beat track ------------- */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative}
.flow::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,var(--amber),transparent);opacity:.34}
.flow .fl{padding:clamp(24px,3vw,40px) clamp(18px,2.4vw,32px);position:relative;
  border-right:1px solid var(--line)}
.flow .fl:last-child{border-right:0}
.flow .fl-n{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:1px solid var(--amber);color:var(--amber-t);
  font-family:'IBM Plex Mono',monospace;font-size:12px;margin-bottom:16px;
  background:var(--night);position:relative;z-index:1}
.sec.lit .flow .fl-n,.sec.alt .flow .fl-n{background:var(--night-2)}
.flow .fl h3{margin-bottom:.45rem}
.flow .fl p{font-size:13.4px;color:var(--glass-2);line-height:1.65}
@media(max-width:820px){
  .flow{grid-template-columns:1fr}
  .flow::before{display:none}
  .flow .fl{border-right:0;border-bottom:1px solid var(--line)}
  .flow .fl:last-child{border-bottom:0}
}

/* ---- 22f. PRICE COLUMNS — prose list, not a box grid ------------------- */
.pricegrid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(24px,4vw,64px);align-items:stretch}
.pricegrid>.pg-side{border-right:1px solid var(--line);
  padding-right:clamp(18px,2.6vw,40px)}
.pricegrid .stick{position:sticky;top:calc(var(--bar-h) + 30px)}
.pricegrid .btn{margin-top:24px}
@media(max-width:900px){
  .pricegrid{grid-template-columns:1fr;gap:26px}
  .pricegrid>.pg-side{border-right:0;padding-right:0;
    border-bottom:1px solid var(--line);padding-bottom:24px}
  .pricegrid .stick{position:static}
}
.pricecols{columns:2;column-gap:clamp(24px,4vw,64px);list-style:none}
.pricecols li{break-inside:avoid;display:flex;gap:12px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line-2);font-size:14px;
  color:var(--glass-2)}
.pricecols .n{font-family:'IBM Plex Mono',monospace;font-size:9.8px;
  color:var(--amber-t);letter-spacing:.14em;flex-shrink:0}
@media(max-width:720px){.pricecols{columns:1}}

/* ---- 22g. FAQ SPLIT — sticky question-count aside --------------------- */
.faq-wrap{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);
  gap:clamp(24px,4vw,72px);align-items:stretch}
.faq-wrap>.faq-side{border-right:1px solid var(--line);
  padding-right:clamp(18px,2.6vw,40px);height:100%}
.faq-side{display:block}
.faq-side>.stick{position:sticky;top:calc(var(--bar-h) + 30px)}
.faq-side .big{font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(50px,7vw,96px);line-height:.86;letter-spacing:-.05em;
  -webkit-text-stroke:1.4px var(--stroke);
  -webkit-text-fill-color:transparent;color:transparent;display:block}
.faq-side .note{margin-top:14px;font-size:13.2px;color:var(--glass-2);max-width:26ch}
.faq-side .btn{margin-top:24px}
@media(max-width:980px){
  .faq-wrap{grid-template-columns:1fr;gap:20px}
  .faq-side>.stick{position:static}
  .faq-wrap>.faq-side{border-right:0;padding-right:0;height:auto;
    border-bottom:1px solid var(--line);padding-bottom:22px}
}

/* ---- 22h. CLOSER (Schedule) — copy left, dispatch card right ------------
   Section 09 previously left its whole right half empty below the lede,
   which read as an unfinished grid rather than deliberate whitespace.
   The card carries only facts already declared in config.php. */
.closer{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(26px,4.4vw,72px);align-items:start;
  margin-top:clamp(28px,3.6vw,48px)}
/* the global reset zeros all margins, and unlike every other multi-paragraph
   spot on the site (which sets margin-bottom inline per <p>), .closer-l's
   two paragraphs never got one — they render flush against each other with
   no gap, reading as a single run-on block. 16px matches this component's
   existing internal rhythm (.closer-acts already sits 28px below the last
   paragraph). */
.closer-l p{max-width:56ch;color:var(--glass-2)}
.closer-l p + p{margin-top:16px}
.closer-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

.dispatch{border:1px solid var(--line);background:var(--night-2)}
.sec.lit .dispatch{background:var(--night)}
.dispatch-h{display:flex;justify-content:space-between;align-items:center;
  gap:14px;padding:14px clamp(16px,2vw,24px);
  border-bottom:1px solid var(--line);background:rgba(255,122,0,.05)}
.dispatch-h .mono{font-size:10.4px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--glass-2)}
.dispatch-h .live{display:inline-flex;align-items:center;gap:8px;
  color:var(--amber-t)}
.dispatch .pulse{width:7px;height:7px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 0 rgba(255,122,0,.6);animation:cmagPulse 2.2s infinite}
@keyframes cmagPulse{
  70%{box-shadow:0 0 0 7px rgba(255,122,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,122,0,0)}
}
@media(prefers-reduced-motion:reduce){.dispatch .pulse{animation:none}}

.dispatch dl{margin:0}
.dispatch dl>div{display:grid;grid-template-columns:clamp(72px,8vw,100px) minmax(0,1fr);
  gap:clamp(12px,2vw,24px);align-items:baseline;
  padding:clamp(13px,1.7vw,18px) clamp(16px,2vw,24px);
  border-bottom:1px solid var(--line)}
.dispatch dl>div:last-child{border-bottom:0}
.dispatch dt{font-size:10.4px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber-t)}
.dispatch dd{margin:0;font-size:14px;line-height:1.6;color:var(--glass)}
.dispatch dd a{color:var(--glass);text-decoration:none;
  border-bottom:1px solid var(--line-2);transition:color .3s var(--ease),
  border-color .3s var(--ease)}
@media(hover:hover){.dispatch dd a:hover{color:var(--amber-t);
  border-color:var(--amber-t)}}

@media(max-width:900px){
  .closer{grid-template-columns:1fr;gap:30px}
  .closer-l p{max-width:70ch}
}

/* ---- 23. INVERTED BANDS -------------------------------------------------
   A wholly light page loses the anchor the night version had. The hero and
   the colophon flip to the deep ground so the page opens and closes dark and
   reads bright in between — the lamp figure also only works over deep glass.
   Every token below is re-pointed rather than each rule re-written, so all the
   existing descendant rules keep working inside an inverted band.
   Computed: paper-on-deep 15.47, deep-ink-2 on deep 7.4, deep-amber 8.60. */
.hero,
.colo{
  --night:var(--deep);
  --night-2:#123040;
  --night-3:#1B4255;
  --night-4:#24576F;
  --glass:var(--deep-ink);
  --glass-2:var(--deep-ink-2);
  --glass-3:#8AA6B4;
  --amber-t:var(--deep-amber);
  --line:rgba(232,241,245,.14);
  --line-2:rgba(232,241,245,.075);
  --stroke:rgba(232,241,245,.22);
  background:var(--deep);
  color:var(--deep-ink);
}
/* buttons inside an inverted band: the amber fill still needs DARK text
   (white on amber is 2.61), so pin it rather than inherit the flipped --glass */
/* rest state only — the :hover rule below must still win, so this is scoped
   with :not(:hover). Without it `.hero .btn` (0,2,0) beat `.btn:hover` (0,2,0
   but earlier in source) and the hero's solid button stayed ink-on-ink. */
.hero .btn:not(:hover),
.colo .btn:not(:hover){color:var(--btn-ink)}
@media(hover:hover){
  .hero .btn:hover,
  .colo .btn:hover{color:var(--btn-paper)}
}
/* inside a deep band the ghost label is light at rest, then inverts to paper
   on the ink wipe like every other button */
.hero .btn.ghost,
.colo .btn.ghost{color:var(--deep-ink)}
@media(hover:hover){
  .hero .btn.ghost:hover,
  .colo .btn.ghost:hover{color:var(--btn-paper);border-color:var(--btn-ink)}
}
/* same rule for any other amber-filled chip inside an inverted band —
   the tag inherited the flipped light --glass and fell to 2.28 */
.hero .pane-tag,
.colo .pane-tag{color:#0B1D28}

/* the folio strip sits directly above the hero — carry it into the dark */
.folio{
  --night:var(--deep);
  --glass:var(--deep-ink);
  --glass-2:var(--deep-ink-2);
  --glass-3:#8AA6B4;
  --amber-t:var(--deep-amber);
  --line-2:rgba(232,241,245,.075);
  background:var(--deep);color:var(--deep-ink-2);
}
/* grain is a multiply over paper, but that muddies the deep bands */
.hero,.colo,.folio{position:relative}

/* ============================================================================
   24. DEPTH & MOTION — "light through glass"
   ---------------------------------------------------------------------------
   The light palette flattened the page: on a night ground the lamp gradients
   did the depth work, and on paper they vanish. Depth here is built the way
   real glass builds it — a lit EDGE, a cast SHADOW on the surface below, and
   layers that move at different rates — never a generic drop-shadow.
   Everything below inherits the reduced-motion gate in section 21.
   ========================================================================= */

/* ---- 24a. ELEVATION SCALE ---------------------------------------------- */
:root{
  /* two-part shadows: a tight contact edge + a wide soft cast, both cool
     (glass casts a blue-grey shadow, never neutral black) */
  --e1:0 1px 2px rgba(11,29,40,.05), 0 2px 8px rgba(11,29,40,.045);
  --e2:0 2px 4px rgba(11,29,40,.06), 0 8px 24px rgba(11,29,40,.07);
  --e3:0 4px 10px rgba(11,29,40,.07), 0 18px 48px rgba(11,29,40,.10);
  --e-amber:0 6px 16px rgba(255,122,0,.24), 0 2px 5px rgba(255,122,0,.20);
}

/* ---- 24b. SURFACES LIFT OFF THE PAPER ---------------------------------- */
.pane,.spec,.dispatch,.mapwrap,.q-side,.drop-m{box-shadow:var(--e2)}
/* Elevation change on hover is a CROSS-FADE between two shadow layers, not a
   `box-shadow` transition — transitioning box-shadow repaints the element and
   its backdrop every frame. The deeper shadow lives on a pseudo-element and
   only its opacity animates, which the compositor handles for free. */


/* a lit top edge — the highlight where light catches the glass lip */
.dispatch::before,.pane::before,.spec::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  pointer-events:none}
.dispatch{position:relative}

/* the surfaces that lift, all driven by the cross-fade above */
.dispatch,.mapwrap,.panel,.rev{position:relative;
  transition:transform .5s var(--ease)}
/* .mapwrap is excluded from the shadow cross-fade: it sets overflow:hidden to
   clip the iframe, which would clip an inset ::after away too. */
.dispatch::after,.panel::after,.rev::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  box-shadow:var(--e3);opacity:0;transition:opacity .5s var(--ease)}
@media(hover:hover){
  .dispatch:hover,.mapwrap:hover{transform:translateY(-2px)}
  .panel:hover,.rev:hover{transform:translateY(-3px)}
  .dispatch:hover::after,.panel:hover::after,.rev:hover::after{opacity:1}
}

/* the amber CTA gets a coloured cast so it reads as the lit object */
/* .btn has overflow:hidden (it clips the wiping ::before fill), so a shadow
   pseudo-element would be clipped away — the lift here is transform-only,
   which is compositor-driven and already smooth. The resting cast stays
   static rather than animating box-shadow. */
.btn{box-shadow:var(--e-amber);
  transition:transform .4s var(--ease),color .3s var(--ease)}
.btn.ghost{box-shadow:var(--e1)}
@media(hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:translateY(0)}
}

/* the sticky bar earns its shadow only once the page has moved under it */
.bar{box-shadow:none;transition:box-shadow .45s var(--ease),
     transform .45s var(--ease),background .45s var(--ease)}
.bar.lifted{box-shadow:var(--e2);backdrop-filter:saturate(1.6) blur(12px)}

/* ---- 24c. PARALLAX — layers travel at different rates ------------------ */
/* the outlined band numeral drifts against the scroll, so the page has
   measurable depth rather than everything moving as one plane */
.band-no{will-change:transform;
  transform:translate3d(0,var(--par,0px),0)}
.hero-media{will-change:transform}

/* ---- 24d. STAGGERED REVEALS ------------------------------------------- */
/* children of a revealed group come in one after another rather than as a
   single block — this is what reads as "designed" instead of "faded in" */
/* a transform on a CSS-columns child breaks the column flow, so the
   multi-column list gets an opacity-only stagger */
.pricecols.stagger>li{transform:none!important}
.stagger>*{opacity:0;transform:translateY(18px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:.04s}
.stagger.in>*:nth-child(2){transition-delay:.10s}
.stagger.in>*:nth-child(3){transition-delay:.16s}
.stagger.in>*:nth-child(4){transition-delay:.22s}
.stagger.in>*:nth-child(5){transition-delay:.28s}
.stagger.in>*:nth-child(6){transition-delay:.34s}
.stagger.in>*:nth-child(7){transition-delay:.40s}
.stagger.in>*:nth-child(8){transition-delay:.46s}
.stagger.in>*:nth-child(9){transition-delay:.52s}
.stagger.in>*:nth-child(10){transition-delay:.58s}
.stagger.in>*:nth-child(n+11){transition-delay:.62s}

/* ---- 24e. THE LAMP FOLLOWS THE CURSOR ---------------------------------- */
/* a soft warm pool tracks the pointer across a rack, so the list feels lit
   by a real inspection lamp rather than shaded by a static gradient */
.rack,.ledger{position:relative;isolation:isolate}
/* The pool is pinned at 0,0 and MOVED WITH translate3d — the first version
   wrote `left`/`top` from JS on every pointermove, which relayouts the whole
   section each frame. Position properties are never animated; only transform
   and opacity reach the compositor. */
.rack::after,.ledger::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:520px;height:520px;left:0;top:0;
  transform:translate3d(calc(var(--mx,50%) - 260px),calc(var(--my,50%) - 260px),0);
  opacity:0;transition:opacity .5s var(--ease);will-change:transform,opacity;
  background:radial-gradient(circle,rgba(255,122,0,.10) 0%,transparent 66%)}
@media(hover:hover){
  .rack.lit::after,.ledger.lit::after{opacity:1}
}

/* ---- 24f. UNDERLINE THAT WIPES ---------------------------------------- */
.colo ul a,.fnap a,.dispatch dd a{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .45s var(--ease),color .3s var(--ease)}
@media(hover:hover){
  .colo ul a:hover,.fnap a:hover,.dispatch dd a:hover{background-size:100% 1px}
}
.dispatch dd a{border-bottom:0}

/* ---- 24g. HEADLINE SETTLE --------------------------------------------- */
/* each display line rises from behind its own mask on first paint */
.dsp .ln{display:block;overflow:hidden}
.dsp .ln>span{display:block}

@media(prefers-reduced-motion:reduce){
  .band-no{transform:none!important}
  .stagger>*{opacity:1!important;transform:none!important}
  .rack::after,.ledger::after{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   25. QUOTE SECTION — the request sheet
   ═══════════════════════════════════════════════════════════════════════
   Designed in this site's own system (bay sheet / mono labels / underline
   inputs), NOT copied from the reference site the backend came from.
   Inputs are ruled lines rather than boxes, matching .ledger and .spec.
   ═════════════════════════════════════════════════════════════════════ */
.qgrid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(24px,4vw,64px);align-items:stretch}
.qgrid>.qside{border-right:1px solid var(--line);
  padding-right:clamp(18px,2.6vw,40px)}
.qgrid .stick{position:sticky;top:calc(var(--bar-h) + 30px)}
.qcall{margin-top:2rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.qcall .mono{display:block;margin-bottom:8px}
@media(max-width:900px){
  .qgrid{grid-template-columns:1fr;gap:28px}
  .qgrid>.qside{border-right:0;padding-right:0;
    border-bottom:1px solid var(--line);padding-bottom:26px}
  .qgrid .stick{position:static}
}

/* the sheet itself — a plate racked in the bay */
.qsheet{border:1px solid var(--line);background:var(--night);
  padding:clamp(20px,2.6vw,32px);position:relative}
.sec.alt .qsheet,.sec.lit .qsheet{background:var(--night-2)}
.qsheet::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--amber);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease)}
.qsheet.ready::before{transform:scaleX(1)}
.qhead{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding-bottom:14px;margin-bottom:20px;border-bottom:1px solid var(--line)}

.qrow2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px)}
@media(max-width:560px){.qrow2{grid-template-columns:1fr}}

.qf{display:block;margin-bottom:18px}
.ql{display:block;font-family:'IBM Plex Mono',monospace;font-size:9.4px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--glass-3);
  margin-bottom:7px}
.qf input,.qf textarea{width:100%;background:none;border:0;
  border-bottom:1px solid var(--line);color:var(--glass);
  font-family:'Public Sans',system-ui,sans-serif;font-size:15px;
  padding:9px 2px;transition:border-color .3s var(--ease)}
.qf textarea{resize:vertical;line-height:1.6;min-height:96px}
.qf input::placeholder,.qf textarea::placeholder{color:var(--glass-3);opacity:.75}
.qf input:focus,.qf textarea:focus{outline:none;border-bottom-color:var(--amber)}

.qcap{margin:22px 0 6px}
.qcap-row{display:flex;align-items:center;gap:14px;
  border:1px solid var(--line);padding:11px 14px;
  background:rgba(255,122,0,.045)}
.qq{font-family:'Archivo',sans-serif;font-weight:800;font-size:16px;
  letter-spacing:-.01em;color:var(--glass);white-space:nowrap}
.qcap-row input{width:88px;background:none;border:0;
  border-bottom:1px solid var(--line);color:var(--glass);
  font-family:'IBM Plex Mono',monospace;font-size:15px;padding:5px 2px}
.qcap-row input:focus{outline:none;border-bottom-color:var(--amber)}

/* honeypots — off-screen, never display:none (bots skip hidden fields) */
.hpx{position:absolute!important;left:-9999px!important;width:1px!important;
  height:1px!important;opacity:0!important;pointer-events:none!important}

.qsubmit{margin-top:20px;width:100%;justify-content:center}
.qsubmit:disabled{opacity:.55;cursor:not-allowed}
.qmsg{margin-top:14px;font-size:13.6px;line-height:1.6;color:var(--glass-2)}
.qmsg.err{color:var(--amber-t)}
.qmsg .error{color:var(--amber-t)}

/* the stamped confirmation that replaces the form on success */
.qdone{text-align:center;padding:clamp(22px,4vw,44px) 0}
.qstamp{display:inline-block;font-family:'IBM Plex Mono',monospace;
  font-size:10.4px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--amber-t);border:1px solid var(--amber);
  padding:9px 16px;margin-bottom:18px}
.qdone .success{font-family:'Archivo',sans-serif;font-weight:700;
  font-size:clamp(17px,2vw,22px);color:var(--glass);line-height:1.3}
.qdn{margin-top:16px;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.18em;color:var(--glass-3)}

/* ═══════════════════════════════════════════════════════════════════════
   25b. QUOTE SECTION — MADE TO STAND OUT
   ═══════════════════════════════════════════════════════════════════════
   The quote band was `.sec.alt`, which is the SAME treatment as #services and
   #pricing — three identical bands, so the one that actually converts had no
   more visual weight than the two around it. It now inverts to the deep ground
   (the page's own established "this band matters" device, already carrying the
   hero and the colophon) and the sheet stays PAPER on top of it. That paper-on-
   deep pairing is the single highest-contrast moment on the page, which is
   exactly where it should be.

   Contrast note: inverting re-points --glass/--night etc. per section 23, so
   descendant rules keep working. But the SHEET sits back on paper inside that
   inverted band, so it must re-point those tokens BACK or every input label
   inherits deep-band light ink onto a white sheet. That double flip is the
   fiddly part and is why .qsheet restates the ground tokens explicitly.
   ═════════════════════════════════════════════════════════════════════ */

.qsec{
  --night:var(--deep);
  --night-2:#123040;
  --night-3:#1B4255;
  --night-4:#24576F;
  --glass:var(--deep-ink);
  --glass-2:var(--deep-ink-2);
  --glass-3:#8AA6B4;
  --amber-t:var(--deep-amber);
  --line:rgba(232,241,245,.14);
  --line-2:rgba(232,241,245,.075);
  --stroke:rgba(232,241,245,.22);
  background:var(--deep);
  color:var(--deep-ink);
  position:relative;
  overflow:hidden;
}
/* the lamp rakes across the band from the top-left, same light source as the
   hero figure — a flat deep fill would read as a dead panel */
.qsec::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 90% at 8% -10%, rgba(255,122,0,.20), transparent 62%),
    radial-gradient(90% 70% at 100% 105%, rgba(42,111,158,.24), transparent 65%);
}
.qsec>.wrap{position:relative;z-index:1}

/* buttons + amber chips inside the inverted quote band follow section 23's
   rule: the amber fill still takes DARK text (white on amber is only 2.61) */
.qsec .btn:not(:hover){color:var(--btn-ink)}
@media(hover:hover){.qsec .btn:hover{color:var(--btn-paper)}}

/* ---- the sheet: paper racked on deep glass ----------------------------- */
.qsec .qsheet{
  /* flip the ground tokens BACK — this surface is paper again */
  --night:#F7F9FA;
  --night-2:#EDF2F5;
  --glass:#0B1D28;
  --glass-2:#415866;
  --glass-3:#4F6672;
  --amber-t:#9A4400;
  --line:rgba(11,29,40,.14);
  --line-2:rgba(11,29,40,.075);
  background:#F7F9FA;
  border:0;
  padding:clamp(24px,3vw,38px);
  box-shadow:0 2px 6px rgba(0,0,0,.30), 0 26px 70px rgba(0,0,0,.42);
}
/* .sec.alt/.sec.lit previously repainted the sheet — that rule is more
   specific than the token flip above, so neutralise it here */
.sec.alt .qsec .qsheet,.qsec.alt .qsheet,.qsec.lit .qsheet{background:#F7F9FA}
/* the amber top rule reads much stronger against deep — make it a real edge */
.qsec .qsheet::before{height:3px}

/* ---- side panel gains weight on the deep ground ------------------------ */
.qsec .fact .big{color:var(--deep-amber)}
.qsec .qcall .tel-lg{color:var(--deep-ink)}
@media(hover:hover){.qsec .qcall .tel-lg:hover{color:var(--deep-amber)}}

/* ---- the captcha stops looking like an error state --------------------- */
.qsec .qcap-row{
  background:rgba(11,29,40,.045);
  border:1px solid rgba(11,29,40,.16);
  align-items:center;
}
.qq{font-size:17px}
.qcap-row input{width:74px;text-align:center;
  border-bottom-width:2px;border-bottom-color:rgba(11,29,40,.28)}
.qcap-hint{display:block;margin-top:8px;
  font-family:'IBM Plex Mono',monospace;font-size:9.6px;letter-spacing:.16em;
  text-transform:uppercase;color:#4F6672}

/* ---- submit: the one solid amber action in the band -------------------- */
.qsec .qsubmit{margin-top:24px;padding-top:15px;padding-bottom:15px;
  font-size:14px;box-shadow:var(--e-amber)}

@media(prefers-reduced-motion:reduce){
  .qsec .qsheet::before{transform:none}
}

/* ---- 25c. quote band head, corrected after screenshot ------------------ */
/* The outlined numeral uses --stroke at .22 alpha, tuned for dark-on-paper.
   Re-pointed onto the deep ground that same alpha rendered almost invisible —
   a light hairline on dark needs more alpha than a dark one on light to read
   at equal weight. Raised for this band only. */
.qsec{--stroke:rgba(255,169,84,.42)}
.qsec .band-no{-webkit-text-stroke-width:1.6px}
/* the heading was orphaning its last word while the lede sat in a wide empty
   gutter — give the heading track more room and cap the lede */
@media(min-width:1181px){
  .qsec .band-head{grid-template-columns:auto minmax(0,1.35fr) minmax(0,.72fr)}
  .qsec .band-head .lede{max-width:34ch}
}