/* ══════════════════════════════════════════════════════════════════════════
   KOVA — THE ATELIER
   One stylesheet for every redesigned page. Built out of the streetwear ad
   page (/for/brands/that/drop), which Sayed approved on 2026-09-16.

   THE WORLD. A one-person workshop at night. Near-black ground, a single
   copper light, bone-paper objects on the table. The copper STITCH is the
   signature: Kova's whole argument is that money leaks in the seams between
   vendors, so the thing that runs through every page is a seam being sewn
   shut.

   RULES THIS FILE ENFORCES
     · No blue anywhere. Warm copper and bone only.
     · Text fails open: hidden states are scoped to html.js-rv, which the
       script adds. A dead script leaves every word on screen.
     · Only transform / opacity / clip-path animate on scroll.
     · Every animation has a reduced-motion answer at the bottom.
     · Every text pair below is measured, not guessed.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Instrument Serif';src:url('/assets/fonts/instrument-serif.woff2?v=f3ae4af3e2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/assets/fonts/instrument-serif-italic.woff2?v=0ee028dd53') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo.woff2?v=59215ddd51') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* NIGHT — measured against the photographs' empty areas (000000–151310). */
  --night:#0A0908; --night-2:#12100D; --night-3:#1B1814; --night-4:#24201A;
  --seam:#2C2720; --seam-2:#3A332A;

  /* INK ON NIGHT (contrast on --night):
       --bone 17.6:1 · --bone-2 10.4:1 · --dim 6.1:1 · --copper 8.4:1 */
  --bone:#F3F1EF; --bone-2:#C4BBAE; --dim:#958B7C;
  --copper:#D39E5A; --copper-hot:#E8B676; --copper-deep:#7C501D;

  /* PAPER OBJECTS. --paper-ink on --paper 11.1:1 · --paper-mut 7.4:1 */
  --paper:#EFE8DC; --paper-2:#E3D9C9; --paper-ink:#3B2812; --paper-mut:#5E4B35;
  --paper-tex:url('/assets/img/atelier/paper-512.jpg?v=4051ede6bb');

  --sans:'Archivo',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --display:'Instrument Serif','Iowan Old Style','Charter',Georgia,serif;

  --spine:clamp(20px,5vw,72px);
  --wide:1280px; --read:700px;
  --nav-h:72px;

  --out:cubic-bezier(.23,1,.32,1);
  --inout:cubic-bezier(.77,0,.175,1);
  --drawer:cubic-bezier(.32,.72,0,1);
}

/* ── RESET ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  font-synthesis:none;-webkit-text-size-adjust:100%;text-size-adjust:100%;
  background:var(--night);color-scheme:dark;
  scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);
}
body{
  font-family:var(--sans);font-size:17px;line-height:1.65;font-weight:400;
  color:var(--bone-2);background:var(--night);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--copper);color:var(--night)}
:focus-visible{outline:2px solid var(--copper-hot);outline-offset:3px;border-radius:4px}
[tabindex="-1"]:focus{outline:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--copper);color:#1A1006;padding:12px 18px;border-radius:8px;font-weight:600;text-decoration:none;transition:top .2s var(--out)}
.skip:focus{top:16px}

/* GRAIN — a static tile; animated grain would repaint the viewport every frame. */
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.065;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .88 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── TYPE ──────────────────────────────────────────────────────────────── */
h1,h2,.display{font-family:var(--display);font-weight:400;color:var(--bone);text-wrap:balance}
h1{font-size:clamp(44px,6.8vw,94px);line-height:.98;letter-spacing:-.022em}
h2{font-size:clamp(34px,4.4vw,60px);line-height:1.03;letter-spacing:-.018em}
h3{font-family:var(--sans);font-size:clamp(18px,1.7vw,20px);font-weight:600;line-height:1.32;letter-spacing:-.01em;color:var(--bone)}
em,.em{font-style:italic;color:var(--copper)}
h1 em,h2 em{padding-right:.04em}
p{text-wrap:pretty}
strong,b{font-weight:600;color:var(--bone)}
.lead{font-size:clamp(18px,1.6vw,20.5px);line-height:1.62;color:var(--bone-2)}
.small{font-size:14px;line-height:1.6;color:var(--dim)}
.link{color:var(--copper);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(211,158,90,.45);transition:color .2s var(--out),text-decoration-color .2s var(--out)}
@media (hover:hover) and (pointer:fine){.link:hover{color:var(--copper-hot);text-decoration-color:currentColor}}

/* A text link that reads as a quiet action: label + arrow that travels. */
.go{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:15px;letter-spacing:.01em;color:var(--bone);text-decoration:none}
.go svg{transition:transform .3s var(--out);color:var(--copper)}
.go span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--out)}
@media (hover:hover) and (pointer:fine){.go:hover svg{transform:translateX(4px)}.go:hover span{background-size:100% 1px}}

/* ── LAYOUT ────────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:calc(var(--wide) + var(--spine) * 2);margin-inline:auto;padding-inline:var(--spine)}
.wrap-read{max-width:calc(var(--read) + var(--spine) * 2)}
.sec{position:relative;padding-block:clamp(96px,12vw,168px)}
.sec-tight{padding-block:clamp(64px,8vw,112px)}
.head{max-width:780px;margin-bottom:clamp(44px,5.5vw,76px)}
.head h2{margin-bottom:22px}
.head .lead{max-width:60ch}
.head-center{margin-inline:auto;text-align:center}
.head-center .lead{margin-inline:auto}

/* ── BUTTONS. Feedback on pointer-down, 160ms. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font:600 14px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  padding:20px 30px;min-height:56px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:transform .16s var(--out),background-color .25s var(--out),border-color .25s var(--out),color .25s var(--out),box-shadow .25s var(--out);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn svg{flex:none;transition:transform .3s var(--out)}
.btn-copper{background:var(--copper);color:#1A1006;box-shadow:0 1px 0 rgba(255,236,205,.45) inset,0 14px 34px -14px rgba(211,158,90,.55)}
.btn-line{color:var(--bone);border-color:var(--seam-2);background:rgba(10,9,8,.35)}
.btn-sm{padding:12px 18px;min-height:44px;font-size:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
@media (hover:hover) and (pointer:fine){
  .btn-copper:hover{background:var(--copper-hot);box-shadow:0 1px 0 rgba(255,236,205,.5) inset,0 18px 40px -14px rgba(232,182,118,.6)}
  .btn-line:hover{border-color:var(--bone-2)}
  .btn:hover svg{transform:translateX(3px)}
}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
@media (max-width:560px){
  .ctas .btn{width:100%;font-size:13px;letter-spacing:.05em;padding:19px 18px}
  .ctas{gap:10px}
}

/* ══ NAV ═════════════════════════════════════════════════════════════════
   Transparent over the hero, translucent once the page moves under it.
   On a phone the links live in a full-screen sheet; the sheet is a sibling
   of the bar, NOT a child, because backdrop-filter on the bar would make it
   the containing block for a fixed child and letterbox the sheet inside the
   bar (RESUME: this bug shipped on 26 pages once). */
.nav{position:fixed;inset:0 0 auto;z-index:80;padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid transparent;transition:background-color .35s var(--out),border-color .35s var(--out)}
.nav.scrolled{background:rgba(10,9,8,.88);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom-color:rgba(58,51,42,.6)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--nav-h)}
.nav-logo{display:block;flex:none;border-radius:4px}
.nav-logo img{width:98px;height:auto}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px);list-style:none}
.nav-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:14.5px;font-weight:500;color:var(--bone-2);text-decoration:none;transition:color .2s var(--out)}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:9px;height:1px;background:var(--copper);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--out)}
.nav-links a[aria-current="page"]{color:var(--bone)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.nav-links a:hover{color:var(--bone)}.nav-links a:hover::after{transform:scaleX(1)}}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-burger{display:none;width:48px;height:48px;border:0;background:transparent;border-radius:50%;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.nav-burger i{position:absolute;left:14px;right:14px;height:1.6px;background:var(--bone);border-radius:2px;transition:transform .4s var(--drawer),opacity .2s var(--out)}
.nav-burger i:nth-child(1){top:19px}.nav-burger i:nth-child(2){top:27px}
.menu-open .nav-burger i:nth-child(1){transform:translateY(4px) rotate(45deg)}
.menu-open .nav-burger i:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
@media (max-width:1000px){
  .nav-links{display:none}
  .nav-burger{display:block}
}
/* On a phone the full label pushed the menu button off-screen (measured: the
   burger's right edge at 415px on a 390px screen). The short label carries it. */
.nav-apply .short{display:none}
@media (max-width:1280px){.nav-apply .long{display:none}.nav-apply .short{display:inline}}
@media (max-width:1180px) and (min-width:1001px){.nav-links{gap:16px}.nav-links a{font-size:14px}}
@media (max-width:600px){.nav-in{gap:12px}}

.sheet{
  position:fixed;inset:0;z-index:79;background:var(--night);
  padding:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 24px) var(--spine) calc(32px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;justify-content:space-between;gap:32px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .3s var(--out),visibility 0s linear .3s;
}
.menu-open .sheet{opacity:1;visibility:visible;transition:opacity .3s var(--out),visibility 0s}
.sheet ul{list-style:none}
.sheet li{border-bottom:1px solid var(--seam)}
.sheet li a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 0;font-family:var(--display);font-size:clamp(32px,9vw,44px);line-height:1.1;color:var(--bone);text-decoration:none;
  transform:translateY(14px);opacity:0;transition:transform .5s var(--out),opacity .4s var(--out)}
.sheet li a small{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.menu-open .sheet li a{transform:none;opacity:1}
.menu-open .sheet li:nth-child(2) a{transition-delay:.03s}.menu-open .sheet li:nth-child(3) a{transition-delay:.06s}
.menu-open .sheet li:nth-child(4) a{transition-delay:.09s}.menu-open .sheet li:nth-child(5) a{transition-delay:.12s}
.menu-open .sheet li:nth-child(6) a{transition-delay:.15s}.menu-open .sheet li:nth-child(7) a{transition-delay:.18s}
.menu-open .sheet li:nth-child(8) a{transition-delay:.21s}
.sheet-foot{display:grid;gap:14px}
.sheet-foot .btn{width:100%}
.sheet-foot p{font-size:14px;color:var(--dim)}
.sheet-foot a:not(.btn){color:var(--bone-2)}
body.menu-lock{overflow:hidden}

/* ══ HERO ════════════════════════════════════════════════════════════════
   The photograph sits in a box with its OWN aspect ratio anchored right, so
   percentage positions inside the box are positions ON the photograph. That
   is what lets pins land on objects without measuring anything in script. */
.hero{position:relative;overflow:hidden;isolation:isolate;background:var(--night);
  min-height:max(660px,min(100svh,1000px));display:flex;align-items:center;
  padding-block:calc(var(--nav-h) + 48px + env(safe-area-inset-top,0px)) 96px}
.hero-media{position:absolute;top:0;right:0;height:100%;aspect-ratio:var(--ar,16/9);z-index:-1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 44%),linear-gradient(0deg,transparent 0,#000 24%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 44%),linear-gradient(0deg,transparent 0,#000 24%);mask-composite:intersect}
.hero-media img{width:100%;height:100%;object-fit:cover;animation:power 1.8s var(--out) .1s both}
/* A scrim on the page side of the photograph. The mask alone left the table
   texture at ~45% under the lead paragraph; text must sit on near-solid night. */
.hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,var(--night) 0,rgba(10,9,8,.94) 30%,rgba(10,9,8,.55) 46%,transparent 62%)}
@keyframes power{0%{opacity:0;filter:brightness(.35);transform:scale(1.045)}55%{opacity:1}100%{opacity:1;filter:none;transform:none}}
.hero-copy{position:relative;max-width:640px}
.hero h1{margin-bottom:30px}
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln > span{display:block;animation:rise 1.1s var(--out) both}
.ln:nth-child(2) > span{animation-delay:.08s}.ln:nth-child(3) > span{animation-delay:.16s}
@keyframes rise{from{transform:translateY(106%)}to{transform:none}}
.hero .lead{max-width:52ch;margin-bottom:40px;animation:fade 1s var(--out) .35s both}
.hero .ctas{animation:fade 1s var(--out) .48s both}
.hero-note{margin-top:28px;font-size:14px;line-height:1.6;color:var(--dim);max-width:48ch;animation:fade 1s var(--out) .6s both}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* PINS — tailor's pins on the photograph, naming the objects. Desktop only;
   on a phone they would sit on top of the headline. */
.pin{position:absolute;left:var(--x);top:var(--y);z-index:2;display:flex;align-items:center;gap:10px;
  opacity:0;transform:translateY(6px);animation:pinIn .7s var(--out) both;animation-delay:var(--d,1.4s);pointer-events:none}
.pin i{position:relative;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE2B8,var(--copper) 55%,var(--copper-deep));box-shadow:0 0 0 4px rgba(211,158,90,.18),0 2px 6px rgba(0,0,0,.6)}
.pin i::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(232,182,118,.6);animation:ping 2.4s var(--out) calc(var(--d,1.4s) + .4s) 2}
.pin span{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--bone);padding:8px 10px;border-radius:999px;background:rgba(10,9,8,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(58,51,42,.9);white-space:nowrap}
@keyframes pinIn{to{opacity:1;transform:none}}
@keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.4);opacity:0}}

/* Between 901 and 1180px a landscape photograph spanning the whole width runs
   under the headline (measured at 1024: the pins sat on the lead paragraph).
   The hero stacks from 1180 down, landscape first, then portrait at 900. */
@media (max-width:1180px){
  .hero::before{display:none}
  .hero{display:block;min-height:0;padding-block:calc(var(--nav-h) + env(safe-area-inset-top,0px)) 80px}
  .hero-media{position:relative;height:auto;width:100%;aspect-ratio:var(--ar-m,4/5);
    -webkit-mask-image:linear-gradient(0deg,transparent 0,rgba(0,0,0,.35) 18%,#000 52%);mask-image:linear-gradient(0deg,transparent 0,rgba(0,0,0,.35) 18%,#000 52%);-webkit-mask-composite:source-over;mask-composite:add;margin-bottom:-22%}
  .hero-copy{padding-inline:0}
  .pin{display:none}
}
@media (min-width:901px) and (max-width:1180px){
  .hero-media{aspect-ratio:var(--ar,16/9);margin-bottom:-10%}
  .hero-copy{max-width:760px}
}

/* ══ PLATE — a photograph set into the page like a print on the table ═══ */
.plate{position:relative;overflow:hidden;border-radius:14px;background:var(--night-2);box-shadow:0 0 0 1px var(--seam),0 40px 80px -40px rgba(0,0,0,.9)}
.plate img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--out)}
.plate figcaption,.cap{font-size:13px;line-height:1.5;color:var(--dim);margin-top:14px}

/* ══ SEAM — full-bleed macro photograph with a live stitch running over it.
   The stitch is a repeating gradient scaled on X by script; composited. */
.seam{position:relative;overflow:hidden;isolation:isolate}
.seam-img{aspect-ratio:21/8;min-height:280px;max-height:620px;width:100%}
.seam-img img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;transform:scale(var(--z,1.06));will-change:transform}
.seam::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--night) 0,transparent 26%,transparent 70%,var(--night) 100%)}
.seam-copy{position:absolute;inset:auto 0 clamp(24px,5vw,64px);z-index:2}
.seam-copy p{max-width:32ch;font-family:var(--display);font-size:clamp(26px,3.2vw,44px);line-height:1.12;color:var(--bone);text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.8)}
.stitch-line{position:relative;height:2px;margin-top:22px;max-width:520px}
.stitch-line::before,.stitch-line i{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,currentColor 0 10px,transparent 10px 18px)}
.stitch-line::before{color:rgba(149,139,124,.35)}
.stitch-line i{color:var(--copper);transform-origin:left;transform:scaleX(var(--p,1))}

/* ══ REPAIR TICKETS — pinned paper notes ═════════════════════════════════ */
.tickets{display:grid;gap:clamp(22px,3vw,36px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
.ticket{position:relative;color:var(--paper-ink);padding:44px 28px 34px;
  background:var(--paper-tex) center/512px,linear-gradient(175deg,var(--paper),var(--paper-2));
  background-blend-mode:multiply;border-radius:3px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),94% 100%,88% calc(100% - 8px),82% 100%,76% calc(100% - 9px),70% 100%,64% calc(100% - 8px),58% 100%,52% calc(100% - 9px),46% 100%,40% calc(100% - 8px),34% 100%,28% calc(100% - 9px),22% 100%,16% calc(100% - 8px),10% 100%,4% calc(100% - 9px),0 100%);
  filter:drop-shadow(0 24px 26px rgba(0,0,0,.55));
  transform:rotate(var(--r,0deg));transition:transform .5s var(--out)}
.ticket:nth-child(1){--r:-1.2deg}.ticket:nth-child(2){--r:.8deg;margin-top:18px}.ticket:nth-child(3){--r:-.5deg;margin-top:6px}
.ticket::before{content:'';position:absolute;left:50%;top:14px;width:16px;height:16px;margin-left:-8px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFE2B8,var(--copper) 50%,var(--copper-deep));box-shadow:0 3px 5px rgba(0,0,0,.45)}
.ticket-label{display:flex;justify-content:space-between;font:800 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--paper-mut);border-bottom:1px dashed rgba(59,40,18,.28);padding-bottom:14px;margin-bottom:20px}
.ticket h3{font-family:var(--display);font-weight:400;font-size:34px;line-height:1;color:var(--paper-ink);margin-bottom:12px}
.ticket p{font-size:15.5px;line-height:1.58;color:var(--paper-mut)}
@media (hover:hover) and (pointer:fine){.ticket:hover{transform:rotate(0deg) translateY(-6px)}}
@media (max-width:640px){.ticket:nth-child(n){margin-top:0}}

/* ══ DOORS — two industries as two lit doorways ══════════════════════════ */
.doors{display:grid;gap:clamp(16px,2vw,24px)}
@media (min-width:860px){.doors{grid-template-columns:1fr 1fr}}
.door{position:relative;display:block;overflow:hidden;border-radius:16px;min-height:clamp(420px,52vw,620px);text-decoration:none;color:var(--bone);isolation:isolate;box-shadow:0 0 0 1px var(--seam)}
.door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s var(--out),filter .8s var(--out);filter:brightness(.82)}
.door::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,9,8,.1) 30%,rgba(10,9,8,.92) 100%)}
.door-copy{position:absolute;inset:auto 0 0;padding:clamp(26px,3.4vw,44px)}
.door-copy h3{font-family:var(--display);font-weight:400;font-size:clamp(34px,3.6vw,50px);line-height:1;margin-bottom:12px}
.door-copy p{max-width:40ch;color:var(--bone-2);margin-bottom:18px}
.door .go{pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .door:hover img{transform:scale(1.045);filter:brightness(.95)}
  .door:hover .go svg{transform:translateX(4px)}
  .door:hover .go span{background-size:100% 1px}
}

/* ══ STATIONS — six services along one thread, with a sticky photograph
   that changes as each station becomes active. On a phone each station
   carries its own photograph and nothing is sticky. */
.stations{display:grid;gap:clamp(40px,6vw,96px)}
@media (min-width:1000px){.stations{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}}
.stations-media{position:sticky;top:calc(var(--nav-h) + 32px);aspect-ratio:4/3.4;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px var(--seam),0 50px 90px -40px rgba(0,0,0,.95);background:var(--night-2)}
.stations-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s var(--out),transform 1.4s var(--out)}
.stations-media img.on{opacity:1;transform:none}
.stations-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(10,9,8,.55));pointer-events:none}
.stations-list{position:relative;list-style:none;padding-left:46px}
.stations-list::before,.stations-thread{content:'';position:absolute;left:12px;top:14px;bottom:14px;width:2px}
.stations-list::before{background:repeating-linear-gradient(180deg,var(--seam-2) 0 8px,transparent 8px 15px)}
.stations-thread{background:repeating-linear-gradient(180deg,var(--copper) 0 8px,transparent 8px 15px);transform-origin:top;transform:scaleY(var(--p,1))}
.station{position:relative;padding-block:clamp(26px,3.2vw,42px);border-bottom:1px solid var(--seam)}
.station:first-child{padding-top:4px}
.station::before{content:'';position:absolute;left:-43px;top:clamp(32px,3.6vw,48px);width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#2A251E,var(--night-2));box-shadow:inset 0 0 0 1.5px var(--seam-2),0 0 0 5px var(--night);transition:background .5s var(--out),box-shadow .5s var(--out)}
.station:first-child::before{top:10px}
.station.on::before{background:radial-gradient(circle at 35% 30%,var(--copper-hot),var(--copper-deep));box-shadow:inset 0 0 0 1.5px rgba(255,220,170,.4),0 0 0 5px var(--night),0 0 22px 2px rgba(211,158,90,.3)}
.station h3{font-family:var(--display);font-weight:400;font-size:clamp(30px,3vw,40px);line-height:1.02;margin-bottom:12px;color:var(--bone-2);transition:color .5s var(--out)}
.station.on h3{color:var(--bone)}
.station p{max-width:48ch;margin-bottom:10px}
.station .plate{display:none;margin-bottom:22px;aspect-ratio:16/10}
@media (max-width:999px){
  .stations-media{display:none}
  .station .plate{display:block}
  .stations-list{padding-left:38px}
  .station::before{left:-35px}
}

/* ══ WORK ORDER — the Ares band ══════════════════════════════════════════ */
.band{background:linear-gradient(180deg,var(--night) 0,var(--night-2) 18%,var(--night-2) 82%,var(--night) 100%)}
.ares{display:grid;gap:clamp(40px,5vw,80px);align-items:center}
@media (min-width:1000px){.ares{grid-template-columns:1fr 1fr}}
.order{position:relative;border-radius:16px;background:var(--night-3);box-shadow:0 0 0 1px var(--seam-2),0 50px 90px -40px rgba(0,0,0,.95);overflow:hidden}
.order-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--seam-2);font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.order-top b{display:inline-flex;align-items:center;gap:8px;color:var(--copper);font-weight:600}
.order-top b::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--copper);box-shadow:0 0 12px var(--copper)}
.order-body{padding:22px 20px 24px;display:grid;gap:14px}
.msg{max-width:88%;padding:14px 16px;border-radius:14px;font-size:15px;line-height:1.55}
.msg-you{justify-self:end;background:var(--copper);color:#1A1006;border-bottom-right-radius:4px}
.msg-op{background:var(--night-4);color:var(--bone);border-bottom-left-radius:4px;box-shadow:inset 0 0 0 1px var(--seam-2)}
.msg-op b{color:var(--copper-hot)}
.calls{display:grid;gap:8px;margin-top:4px}
.call{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--bone-2)}
.call::before{content:'';flex:none;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,var(--copper) 0 3px,transparent 3.5px);box-shadow:inset 0 0 0 1px rgba(211,158,90,.5)}
.call.skip::before{background:none;box-shadow:inset 0 0 0 1px var(--seam-2)}
.order-note{padding:12px 18px;border-top:1px solid var(--seam-2);font-size:12px;color:var(--dim)}
.figs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--seam);border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--seam);margin-top:36px}
@media (min-width:700px){.figs{grid-template-columns:repeat(4,1fr)}}
.fig{background:var(--night-2);padding:24px 18px}
.fig b{display:block;font:400 clamp(36px,4vw,48px)/1 var(--display);color:var(--bone);font-variant-numeric:tabular-nums;margin-bottom:10px}
.fig span{display:block;font-size:13.5px;line-height:1.45;color:var(--bone-2)}

/* ══ LEDGER — "what you can check", written into a ruled book ════════════ */
.ledger{position:relative;color:var(--paper-ink);border-radius:6px;overflow:hidden;
  background:var(--paper-tex) center/512px,linear-gradient(180deg,#F2ECE2,var(--paper) 40%,var(--paper-2));background-blend-mode:multiply;
  box-shadow:0 60px 100px -50px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.4)}
.ledger::before{content:'';position:absolute;top:0;bottom:0;left:clamp(58px,8vw,96px);width:1.5px;background:rgba(160,70,40,.35)}
.ledger ol{list-style:none;counter-reset:l}
.ledger li{position:relative;display:grid;grid-template-columns:clamp(58px,8vw,96px) 1fr auto;align-items:start;gap:0 clamp(18px,3vw,36px);
  padding:24px clamp(20px,3vw,40px) 24px 0;border-bottom:1px solid rgba(59,40,18,.16)}
.ledger li:last-child{border-bottom:0}
.tick{justify-self:center;margin-top:2px;width:26px;height:26px;color:var(--copper-deep)}
.tick path{stroke-dasharray:30;stroke-dashoffset:var(--tick,0);transition:stroke-dashoffset .7s var(--out)}
.js-rv .ledger li:not(.in) .tick path{--tick:30}
.ledger h3{font-family:var(--sans);font-size:17px;color:var(--paper-ink);margin-bottom:4px}
.ledger p{font-size:15.5px;line-height:1.58;color:var(--paper-mut);max-width:62ch}
.ledger a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;font-weight:600;color:var(--copper-deep);text-decoration:none;white-space:nowrap}
.ledger a svg{transition:transform .3s var(--out)}
@media (hover:hover) and (pointer:fine){.ledger a:hover svg{transform:translateX(3px)}}
@media (max-width:760px){
  .ledger li{grid-template-columns:52px 1fr;padding-right:20px}
  .ledger li > a{grid-column:2;margin-top:2px}
  .ledger::before{left:52px}
}

/* ══ STRIP — the method, as a paper strip threaded through brass eyelets ══ */
.strip{position:relative;color:var(--paper-ink);border-radius:4px;padding:clamp(40px,5vw,64px) clamp(20px,4vw,56px);
  background:var(--paper-tex) center/512px,linear-gradient(175deg,var(--paper),var(--paper-2));background-blend-mode:multiply;
  clip-path:polygon(0 3%,3% 0,12% 2%,24% 0,37% 1.5%,50% 0,63% 2%,76% 0,88% 1.5%,97% 0,100% 3%,100% 97%,97% 100%,85% 98%,72% 100%,60% 98.5%,47% 100%,34% 98%,21% 100%,9% 98.5%,0 100%);
  filter:drop-shadow(0 40px 40px rgba(0,0,0,.6))}
.strip-steps{position:relative;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:clamp(16px,3vw,40px);list-style:none}
.strip-thread{position:absolute;left:0;top:0;width:100%;height:60px;pointer-events:none;overflow:visible}
.strip-thread path{fill:none;stroke:var(--copper-deep);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:var(--len,2000);stroke-dashoffset:calc(var(--len,2000) * (1 - var(--p,1)))}
.strip-steps .step{position:relative;padding-top:78px}
.eyelet{position:absolute;left:0;top:10px;width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle,#2A2016 0 9px,#B98A4E 10px,#F0CF97 13px,#8A5E2A 17px,#6A461E 19.5px,transparent 20px);
  box-shadow:0 4px 8px rgba(0,0,0,.35)}
.strip-steps h3{font-family:var(--display);font-weight:400;font-size:clamp(30px,3vw,40px);line-height:1;color:var(--paper-ink);margin-bottom:10px}
.strip-steps p{font-size:15px;line-height:1.55;color:var(--paper-mut)}
@media (max-width:820px){
  .strip-steps{grid-template-columns:1fr;gap:0}
  .strip-steps .step{padding:0 0 30px 64px;min-height:80px}
  .eyelet{top:0}
  .strip-thread{display:none}
  .strip-steps::before{content:'';position:absolute;left:19px;top:30px;bottom:40px;width:2px;background:repeating-linear-gradient(180deg,var(--copper-deep) 0 8px,transparent 8px 14px)}
}

/* ══ FITTING — the diagnostic ════════════════════════════════════════════ */
.fitting{border-radius:18px;background:var(--night-2);box-shadow:0 0 0 1px var(--seam-2),0 50px 90px -40px rgba(0,0,0,.95);overflow:hidden}
.fit-top{display:flex;align-items:center;gap:18px;padding:18px clamp(20px,3vw,32px);border-bottom:1px solid var(--seam-2)}
.fit-top span{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.tape{position:relative;flex:1;height:18px;border-radius:3px;overflow:hidden;background:#2A241C}
.tape::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(243,241,239,.18) 0 1px,transparent 1px 10px),repeating-linear-gradient(90deg,rgba(243,241,239,.3) 0 1px,transparent 1px 50px);background-size:auto,auto;background-position:0 10px,0 4px;background-repeat:repeat-x}
.tape i{position:absolute;inset:0;background:linear-gradient(90deg,#B98A4E,var(--copper-hot));transform-origin:left;transform:scaleX(var(--p,0));transition:transform .5s var(--out)}
.fit-body{padding:clamp(24px,4vw,48px) clamp(20px,3vw,40px)}
.q{display:none}
.q.on{display:block;animation:qIn .45s var(--out)}
@keyframes qIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.q-n{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--copper);margin-bottom:14px}
.q h3{font-family:var(--display);font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1.05;margin-bottom:8px}
.q-sub{color:var(--dim);font-size:15px;margin-bottom:26px}
.opts{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.opt{display:flex;align-items:center;gap:14px;text-align:left;min-height:58px;padding:14px 18px;border-radius:12px;border:1px solid var(--seam-2);background:var(--night-3);cursor:pointer;font-size:15.5px;color:var(--bone);transition:border-color .2s var(--out),background-color .2s var(--out),transform .16s var(--out)}
.opt::before{content:'';flex:none;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--seam-2);transition:box-shadow .2s var(--out),background .2s var(--out)}
.opt[role="checkbox"]::before{border-radius:5px}
.opt:active{transform:scale(.985)}
.opt[aria-checked="true"]{border-color:var(--copper);background:rgba(211,158,90,.1)}
.opt[aria-checked="true"]::before{background:radial-gradient(circle,var(--copper) 0 5px,transparent 5.5px);box-shadow:inset 0 0 0 1.5px var(--copper)}
.opt[role="checkbox"][aria-checked="true"]::before{background:var(--copper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1006' stroke-width='3.2'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat}
@media (hover:hover) and (pointer:fine){.opt:hover{border-color:var(--dim)}}
.fit-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px clamp(20px,3vw,32px);border-top:1px solid var(--seam-2)}
.field{display:grid;gap:8px}
.field label{font-size:14px;font-weight:600;color:var(--bone)}
.field input,.field textarea{width:100%;min-height:52px;padding:14px 16px;border-radius:12px;border:1px solid var(--seam-2);background:var(--night-3);color:var(--bone);font-size:16px;transition:border-color .2s var(--out),box-shadow .2s var(--out)}
.field textarea{min-height:130px;resize:vertical;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:#8A8072}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 3px rgba(211,158,90,.22)}
.result{display:none}
.result.on{display:block;animation:qIn .5s var(--out)}
.result-top{display:grid;gap:28px;align-items:center;margin-bottom:34px}
@media (min-width:720px){.result-top{grid-template-columns:auto 1fr}}
.gauge{position:relative;width:180px;height:180px}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:10}
.gauge .bg{stroke:var(--seam-2)}
.gauge .fg{stroke:var(--copper);stroke-linecap:round;stroke-dasharray:502.65;stroke-dashoffset:502.65;transition:stroke-dashoffset 1.4s var(--out)}
.gauge b{position:absolute;inset:0;display:grid;place-items:center;font:400 54px/1 var(--display);color:var(--bone)}
.recs{display:grid;gap:1px;background:var(--seam);border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--seam);margin-block:26px 30px}
@media (min-width:760px){.recs{grid-template-columns:repeat(3,1fr)}}
.rec{background:var(--night-3);padding:22px}
.rec h4{font-size:16px;font-weight:600;color:var(--bone);margin-bottom:6px}
.rec p{font-size:14.5px;line-height:1.55}

/* ══ FAQ ═════════════════════════════════════════════════════════════════ */
.faq{border-top:1px solid var(--seam);max-width:880px}
.faq details{border-bottom:1px solid var(--seam)}
.faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:26px 0;cursor:pointer;list-style:none;font-size:18px;font-weight:500;color:var(--bone);transition:color .2s var(--out)}
.faq summary::-webkit-details-marker{display:none}
.faq .ico{flex:none;position:relative;width:18px;height:18px;margin-top:5px;transition:transform .3s var(--inout)}
.faq .ico::before,.faq .ico::after{content:'';position:absolute;background:var(--copper);border-radius:1px}
.faq .ico::before{left:0;right:0;top:8px;height:2px}
.faq .ico::after{top:0;bottom:0;left:8px;width:2px;transition:opacity .3s var(--inout)}
.faq details[open] .ico{transform:rotate(90deg)}
.faq details[open] .ico::after{opacity:0}
.faq .a{padding:0 0 28px;max-width:68ch;font-size:16.5px;line-height:1.7}
@media (hover:hover) and (pointer:fine){.faq summary:hover{color:var(--copper-hot)}}

/* ══ SPLIT — photograph + content side by side ═══════════════════════════ */
.split{display:grid;gap:clamp(40px,6vw,96px);align-items:center}
@media (min-width:960px){.split{grid-template-columns:1fr 1fr}.split-rev > :first-child{order:2}}
.steps{list-style:none;display:grid;gap:0;margin-block:30px 38px;border-top:1px solid var(--seam)}
.steps li{display:grid;grid-template-columns:36px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--seam)}
.steps li b{font:400 24px/1 var(--display);color:var(--copper)}
.steps li p{font-size:16px}
.steps li strong{display:block;margin-bottom:2px}

/* ══ CONTACT FORM ════════════════════════════════════════════════════════ */
.form{display:grid;gap:18px}
.form-row{display:grid;gap:18px}
@media (min-width:640px){.form-row{grid-template-columns:1fr 1fr}}
.form-ok{display:none;padding:32px;border-radius:14px;background:var(--night-3);box-shadow:inset 0 0 0 1px var(--seam-2)}
.form-ok.on{display:block;animation:qIn .5s var(--out)}
.form-ok h3{font-family:var(--display);font-weight:400;font-size:34px;margin-bottom:8px}
.form-err{display:none;font-size:14.5px;color:#F0B89A}
.form-err.on{display:block}
.contact-lines{display:grid;gap:4px;margin-top:26px}
.contact-lines a{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--bone);text-decoration:none;font-size:16px}
.contact-lines svg{color:var(--copper)}

/* ══ FOOTER ══════════════════════════════════════════════════════════════ */
.foot{position:relative;background:var(--night-2);border-top:1px solid var(--seam);padding-block:clamp(72px,9vw,120px) calc(40px + env(safe-area-inset-bottom,0px))}
.foot-top{display:grid;gap:48px;padding-bottom:56px;border-bottom:1px solid var(--seam)}
@media (min-width:900px){.foot-top{grid-template-columns:1.3fr 2fr}}
.foot-brand img{width:128px;margin-bottom:22px}
.foot-brand p{max-width:40ch;margin-bottom:24px}
.foot-cols{display:grid;gap:36px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.foot-cols h4{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.foot-cols ul{list-style:none;display:grid;gap:2px}
.foot-cols a{display:inline-flex;align-items:center;min-height:38px;font-size:15px;color:var(--bone-2);text-decoration:none;transition:color .2s var(--out)}
@media (hover:hover) and (pointer:fine){.foot-cols a:hover{color:var(--copper-hot)}}
.socials{display:flex;flex-wrap:wrap;gap:8px}
.socials a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--bone-2);box-shadow:inset 0 0 0 1px var(--seam-2);transition:color .2s var(--out),box-shadow .2s var(--out)}
@media (hover:hover) and (pointer:fine){.socials a:hover{color:var(--copper-hot);box-shadow:inset 0 0 0 1px var(--copper)}}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;padding-top:28px;font-size:13px;line-height:1.65;color:var(--dim)}
.foot-base p{max-width:88ch}

/* ══ DOCK — phone Apply bar ══════════════════════════════════════════════ */
.dock{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:85;
  display:none;align-items:center;gap:8px;padding:8px 8px 8px 18px;border-radius:999px;
  background:rgba(27,24,20,.9);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 0 0 1px rgba(58,51,42,.9),0 20px 40px -16px rgba(0,0,0,.9);
  transform:translateY(calc(100% + 40px));opacity:0;transition:transform .5s var(--out),opacity .3s var(--out)}
.dock.show{transform:none;opacity:1}
.dock p{flex:1;font-size:13px;line-height:1.3;color:var(--bone-2)}
.dock-x{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--dim);display:grid;place-items:center;cursor:pointer}
@media (max-width:700px){.dock{display:flex}}

/* ══ PRIVACY NOTICE (agc-consent.js paints itself for the light site) ════ */
html #agcConsent{background:rgba(18,16,13,.97);border-top:1px solid var(--seam-2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html #agcConsent p{font-family:var(--sans);color:var(--bone-2)}
html #agcConsent p strong{color:var(--bone)!important}
html #agcConsent a{color:var(--copper)}
html #agcConsent button{font-family:var(--sans);color:var(--bone);border-color:var(--seam-2);border-radius:999px;letter-spacing:.06em}
html #agcConsent button.ok{background:var(--copper);color:#1A1006;border-color:transparent}

/* ══ REVEAL — fails open ═════════════════════════════════════════════════ */
.js-rv [data-rv]{opacity:0;transform:translateY(20px)}
.js-rv [data-rv].in{opacity:1;transform:none;transition:opacity .85s var(--out),transform .85s var(--out)}
.js-rv [data-rv="plate"]{opacity:1;transform:none;clip-path:inset(12% 6% 12% 6% round 14px)}
.js-rv [data-rv="plate"] img{transform:scale(1.12)}
.js-rv [data-rv="plate"].in{clip-path:inset(0 0 0 0 round 14px);transition:clip-path 1.2s var(--out)}
.js-rv [data-rv="plate"].in img{transform:none;transition:transform 1.6s var(--out)}

/* ══ ACCESSIBILITY PREFERENCES ═══════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}
  .js-rv [data-rv],.js-rv [data-rv].in,.js-rv [data-rv="plate"],.js-rv [data-rv="plate"].in{opacity:1;transform:none;clip-path:none;transition:none}
  .js-rv [data-rv="plate"] img{transform:none}
  .pin i::after{display:none}
  .stations-thread,.stitch-line i{transform:none}
  .strip-thread path{stroke-dashoffset:0}
  .seam-img img{transform:none}
  .sheet li a{transform:none;opacity:1;transition:none}
  .dock{transition:opacity .2s linear;transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .nav.scrolled,.dock,.pin span,html #agcConsent{background:var(--night-3);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  h1,h2,.display,.ticket h3,.door-copy h3,.station h3,.strip-steps h3,.q h3{font-family:var(--sans);font-weight:700;letter-spacing:-.02em}
  em,.em{font-style:normal;font-weight:700}
  .grain{display:none}
  :root{--dim:#B8AE9F;--seam:#4A4136}
}
@media print{
  .nav,.sheet,.dock,.grain,.hero-media,.pin{display:none!important}
  body,html{background:#fff;color:#000}
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 2 — SERVICE PAGES
   ══════════════════════════════════════════════════════════════════════════ */

/* ── BREADCRUMB ──────────────────────────────────────────────────────── */
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;list-style:none;font-size:13.5px;color:var(--dim)}
.crumbs li{display:inline-flex;align-items:center;gap:10px}
.crumbs li + li::before{content:'';width:14px;height:1px;background:repeating-linear-gradient(90deg,var(--seam-2) 0 3px,transparent 3px 5px)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--bone-2);text-decoration:none}
.crumbs [aria-current]{color:var(--bone)}
@media (hover:hover) and (pointer:fine){.crumbs a:hover{color:var(--copper-hot)}}

/* ── SERVICE HERO: copy left, a photograph pinned with a hang tag right ── */
.shero{position:relative;padding-block:calc(var(--nav-h) + 40px + env(safe-area-inset-top,0px)) clamp(64px,8vw,112px);overflow:hidden}
.shero::before{content:'';position:absolute;inset:-20% -10% auto auto;width:70vw;height:70vw;max-width:1100px;max-height:1100px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(211,158,90,.09),transparent);pointer-events:none}
.shero-grid{position:relative;display:grid;gap:clamp(40px,6vw,88px);align-items:center}
@media (min-width:1000px){.shero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}}
.shero .crumbs{margin-bottom:18px}
.shero h1{font-size:clamp(42px,5.4vw,78px);margin-bottom:26px}
.shero .lead{margin-bottom:36px;max-width:54ch}
.shero-media{position:relative}
.shero-media .plate{aspect-ratio:1376/900}
.shero-media .plate img{animation:power 1.6s var(--out) .1s both}
/* The hang tag, tied to the corner of the photograph. */
.htag{position:absolute;left:clamp(-18px,-1.4vw,-8px);bottom:clamp(-30px,-2.4vw,-18px);z-index:2;width:clamp(150px,15vw,190px);
  transform-origin:50% -34px;animation:tagIn 1.1s var(--out) .7s both}
.htag::before{content:'';position:absolute;left:50%;top:-34px;width:1.4px;height:40px;background:#B9AE9C;transform:translateX(-50%)}
.htag-card{position:relative;color:var(--paper-ink);padding:30px 16px 16px;border-radius:5px 5px 8px 8px;
  background:var(--paper-tex) center/512px,linear-gradient(170deg,var(--paper),var(--paper-2));background-blend-mode:multiply;
  clip-path:polygon(20% 0,80% 0,100% 12%,100% 100%,0 100%,0 12%);filter:drop-shadow(0 20px 24px rgba(0,0,0,.55))}
.htag-card::before{content:'';position:absolute;left:50%;top:8px;width:14px;height:14px;margin-left:-7px;border-radius:50%;
  background:radial-gradient(circle,var(--night) 0 3px,#B98A4E 3.6px,#E8C48E 4.8px,#8A5E2A 6.5px,transparent 7px)}
.htag small{display:block;font:800 9.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--paper-mut);margin-bottom:10px}
.htag b{display:block;font:400 24px/1.02 var(--display);color:var(--paper-ink)}
@keyframes tagIn{0%{opacity:0;transform:rotate(-9deg) translateY(-10px)}60%{opacity:1;transform:rotate(3deg)}100%{opacity:1;transform:rotate(-2deg)}}
@media (max-width:999px){.htag{left:auto;right:12px;bottom:-22px;width:150px}}

/* ── STATION RAIL: the six services on one thread, this one lit ────────── */
.rail{position:relative;border-block:1px solid var(--seam);background:var(--night-2)}
.rail ol{display:flex;list-style:none;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.rail ol::-webkit-scrollbar{display:none}
.rail li{flex:1 0 auto;position:relative;scroll-snap-align:start}
.rail li + li{box-shadow:inset 1px 0 0 var(--seam)}
.rail a{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 22px;color:var(--bone-2);text-decoration:none;white-space:nowrap;font-size:14.5px;transition:color .2s var(--out),background-color .2s var(--out)}
.rail a::before{content:'';flex:none;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--seam-2);transition:background .3s var(--out),box-shadow .3s var(--out)}
.rail a[aria-current]{color:var(--bone);background:var(--night-3)}
.rail a[aria-current]::before{background:radial-gradient(circle at 35% 30%,var(--copper-hot),var(--copper-deep));box-shadow:0 0 12px rgba(211,158,90,.5)}
@media (hover:hover) and (pointer:fine){.rail a:hover{color:var(--bone)}.rail a:hover::before{box-shadow:inset 0 0 0 1.5px var(--copper)}}

/* ── WORK ROWS: what the discipline covers, as terms not cards ─────────── */
.work{display:grid;gap:0 clamp(32px,5vw,72px);border-top:1px solid var(--seam)}
@media (min-width:820px){.work{grid-template-columns:1fr 1fr}}
.work-item{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;padding:28px 0;border-bottom:1px solid var(--seam)}
.work-item .k{grid-row:span 2;font:400 22px/1.2 var(--display);color:var(--copper);font-variant-numeric:tabular-nums;min-width:32px}
.work-item small{grid-column:2;font:600 11.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.work-item h3{grid-column:2;margin-bottom:8px}
.work-item p{grid-column:2;font-size:16px;max-width:52ch}

/* ── SPEC SHEET: the standards, as a tailor's spec card ────────────────── */
.spec{position:relative;color:var(--paper-ink);border-radius:6px;overflow:hidden;max-width:980px;
  background:var(--paper-tex) center/512px,linear-gradient(180deg,#F2ECE2,var(--paper) 45%,var(--paper-2));background-blend-mode:multiply;
  box-shadow:0 50px 90px -46px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.4)}
.spec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px clamp(20px,3vw,34px);border-bottom:1.5px solid rgba(59,40,18,.5)}
.spec-head b{font:800 11.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--paper-ink)}
/* Bold text on a PAPER object must use paper ink. The global strong/b rule
   paints bone (#F3F1EF) for the night ground, which on paper measured ~1.1:1
   — the "Spec sheet" label shipped invisible in the first render. */
.ticket :is(b,strong),.ledger :is(b,strong),.spec :is(b,strong),.strip :is(b,strong),.htag :is(b,strong),.label :is(b,strong){color:var(--paper-ink)}
.spec-head span{font:400 19px/1 var(--display);font-style:italic;color:var(--paper-mut)}
.spec-rows{display:grid}
@media (min-width:760px){.spec-rows{grid-template-columns:repeat(3,1fr)}}
.spec-row{padding:26px clamp(20px,3vw,34px) 30px;border-bottom:1px dashed rgba(59,40,18,.25)}
@media (min-width:760px){.spec-row{border-bottom:0}.spec-row + .spec-row{border-left:1px dashed rgba(59,40,18,.25)}}
.spec-row b{display:block;font:400 clamp(40px,4.4vw,56px)/1 var(--display);color:var(--paper-ink);font-variant-numeric:tabular-nums;margin-bottom:10px}
.spec-row span{font-size:15px;line-height:1.5;color:var(--paper-mut)}

/* ── PACKING LIST: deliverables written into the ledger ────────────────── */
.ledger .num{justify-self:center;margin-top:1px;font:400 20px/1.2 var(--display);color:var(--copper-deep);font-variant-numeric:tabular-nums}
.ledger li.two{grid-template-columns:clamp(58px,8vw,96px) 1fr}
.ledger .link{color:var(--copper-deep)}

/* ── OUTCOMES: three columns sewn apart ────────────────────────────────── */
.outcomes{display:grid;gap:0}
@media (min-width:900px){.outcomes{grid-template-columns:repeat(3,1fr)}}
.outcome{position:relative;padding:34px 0}
@media (min-width:900px){.outcome{padding:8px clamp(24px,3vw,44px)}.outcome:first-child{padding-left:0}.outcome:last-child{padding-right:0}
  .outcome + .outcome::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:repeating-linear-gradient(180deg,var(--seam-2) 0 8px,transparent 8px 15px)}}
@media (max-width:899px){.outcome + .outcome{border-top:1px solid var(--seam)}}
.outcome svg{color:var(--copper);margin-bottom:20px}
.outcome h3{font-family:var(--display);font-weight:400;font-size:clamp(28px,2.6vw,34px);line-height:1.05;margin-bottom:12px}
.outcome p{font-size:16px}

/* ── COMPACT DOORS ─────────────────────────────────────────────────────── */
.doors-sm .door{min-height:clamp(300px,34vw,420px)}
.doors-sm .door-copy h3{font-size:clamp(28px,2.8vw,38px)}
.more-links{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:26px}

/* ── CLOSER: final call to action over the thread photograph ───────────── */
.closer{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(110px,14vw,190px)}
.closer-img{position:absolute;inset:0;z-index:-2}
.closer-img img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.closer::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--night) 0,rgba(10,9,8,.92) 38%,rgba(10,9,8,.55) 70%,rgba(10,9,8,.35)),linear-gradient(180deg,var(--night) 0,transparent 22%,transparent 78%,var(--night) 100%)}
.closer .wrap > div{max-width:640px}
.closer h2{margin-bottom:22px}
.closer .lead{margin-bottom:36px}
@media (max-width:700px){.closer::after{background:linear-gradient(180deg,var(--night) 0,rgba(10,9,8,.8) 30%,rgba(10,9,8,.88) 100%)}}

/* ══ SERVICES OVERVIEW ═══════════════════════════════════════════════════ */
.jump{position:sticky;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));z-index:40;background:rgba(10,9,8,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-block:1px solid var(--seam)}
.jump ol{display:flex;list-style:none;overflow-x:auto;scrollbar-width:none;gap:4px;padding-block:10px}
.jump ol::-webkit-scrollbar{display:none}
.jump a{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:999px;white-space:nowrap;font-size:14px;color:var(--bone-2);text-decoration:none;transition:color .2s var(--out),background-color .25s var(--out)}
.jump a b{font:400 16px/1 var(--display);color:var(--dim);transition:color .2s var(--out)}
.jump a.on{background:var(--night-3);color:var(--bone);box-shadow:inset 0 0 0 1px var(--seam-2)}
.jump a.on b{color:var(--copper)}
@media (hover:hover) and (pointer:fine){.jump a:hover{color:var(--bone)}}
@media (prefers-reduced-transparency:reduce){.jump{background:var(--night-2);-webkit-backdrop-filter:none;backdrop-filter:none}}

.chapter{display:grid;gap:clamp(36px,5vw,84px);align-items:start;padding-block:clamp(80px,10vw,140px);scroll-margin-top:calc(var(--nav-h) + 72px)}
.chapter + .chapter{border-top:1px solid var(--seam)}
@media (min-width:1000px){.chapter{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.chapter.flip > .chapter-media{order:2}}
.chapter-media .plate{aspect-ratio:4/3.3}
/* The photograph stays in view while its chapter's text scrolls past it,
   below the fixed nav and the sticky jump bar. */
@media (min-width:1000px){.chapter-media{position:sticky;top:calc(var(--nav-h) + 96px)}}
.chapter-tag{display:flex;align-items:center;gap:14px;margin-bottom:18px;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.chapter-tag b{font:400 30px/1 var(--display);letter-spacing:0;color:var(--copper)}
.chapter h2{margin-bottom:20px}
.chapter > div > p{margin-bottom:26px;max-width:58ch}
.romans{list-style:none;border-top:1px solid var(--seam);margin-bottom:26px}
.romans li{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:15px 0;border-bottom:1px solid var(--seam);font-size:15.5px;line-height:1.55}
.romans .n{font:400 20px/1.2 var(--display);font-style:italic;color:var(--copper)}
.romans strong{color:var(--bone)}
.pull{position:relative;padding-left:26px;margin-bottom:30px;font:400 clamp(21px,1.9vw,25px)/1.3 var(--display);color:var(--bone);max-width:44ch}
.pull::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:2px;background:repeating-linear-gradient(180deg,var(--copper) 0 7px,transparent 7px 12px)}
.chapter-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px}
/* A rail that scrolls sideways fades at its right edge, so a cut-off
   "Tracki…" reads as more-to-scroll rather than as a clipping bug. */
@media (max-width:1240px){
  .rail ol,.jump ol{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent)}
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 3 — PLAYBOOKS, SACRAMENTO, ROOFING OFFERS
   ══════════════════════════════════════════════════════════════════════════ */

/* ── FIELD GUIDE: question-led long reading with a sticky index ─────────── */
.guide{display:grid;gap:clamp(32px,5vw,80px)}
@media (min-width:1080px){.guide{grid-template-columns:280px minmax(0,1fr)}}
.guide-index{align-self:start}
@media (min-width:1080px){.guide-index{position:sticky;top:calc(var(--nav-h) + 32px)}}
.guide-index p{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.guide-index ol{list-style:none;border-left:1px solid var(--seam)}
.guide-index a{position:relative;display:block;padding:9px 0 9px 18px;font-size:14.5px;line-height:1.4;color:var(--bone-2);text-decoration:none;transition:color .2s var(--out)}
.guide-index a::before{content:'';position:absolute;left:-1px;top:8px;bottom:8px;width:2px;background:var(--copper);transform:scaleY(0);transition:transform .3s var(--out)}
.guide-index a.on{color:var(--bone)}
.guide-index a.on::before{transform:none}
@media (hover:hover) and (pointer:fine){.guide-index a:hover{color:var(--copper-hot)}}
@media (max-width:1079px){.guide-index{display:none}}
.guide-body{max-width:720px}
.guide-part{padding-block:clamp(36px,4.5vw,56px);border-top:1px solid var(--seam);scroll-margin-top:calc(var(--nav-h) + 24px)}
.guide-part:first-child{border-top:0;padding-top:0}
.guide-part h2{font-size:clamp(30px,3.2vw,44px);margin-bottom:22px}
.guide-part p{font-size:18px;line-height:1.72;margin-bottom:18px}
.guide-part p:last-child{margin-bottom:0}
.guide-part .aside{font-size:15px;color:var(--dim);border-top:1px solid var(--seam);padding-top:14px}

/* ── PAPER TABLE: a comparison written onto a spec card ─────────────────── */
.ptable{position:relative;color:var(--paper-ink);border-radius:6px;overflow:hidden;margin-block:30px 8px;
  background:var(--paper-tex) center/512px,linear-gradient(180deg,#F2ECE2,var(--paper) 45%,var(--paper-2));background-blend-mode:multiply;
  box-shadow:0 40px 80px -44px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.4)}
.ptable table{width:100%;table-layout:fixed;border-collapse:collapse;text-align:left}
.ptable caption{padding:16px 22px;text-align:left;font:800 11px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--paper-mut);border-bottom:1.5px solid rgba(59,40,18,.45)}
.ptable th,.ptable td{padding:16px 22px;vertical-align:top;font-size:15px;line-height:1.5;border-bottom:1px dashed rgba(59,40,18,.22)}
.ptable thead th{font:700 11.5px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-mut)}
.ptable tbody th{font-weight:700;color:var(--paper-ink);width:24%}
.ptable[data-cols="2"] tbody th{width:42%}
.ptable[data-cols="3"] tbody th{width:34%}
.ptable td{color:var(--paper-mut)}
.ptable tr:last-child > *{border-bottom:0}
@media (max-width:700px){
  .ptable thead{display:none}
  .ptable table,.ptable tbody,.ptable tr,.ptable th,.ptable td{display:block;width:auto!important}
  .ptable tr{padding:16px 20px;border-bottom:1px dashed rgba(59,40,18,.22)}
  .ptable th,.ptable td{padding:3px 0;border:0}
  .ptable td::before{content:attr(data-h) ': ';font-weight:700;color:var(--paper-ink)}
}

/* ── LETTER: a note from the founder, written on paper ──────────────────── */
.letter{position:relative;max-width:760px;color:var(--paper-ink);padding:clamp(34px,5vw,60px) clamp(26px,5vw,64px);
  background:var(--paper-tex) center/512px,linear-gradient(175deg,#F4EEE4,var(--paper) 60%,var(--paper-2));background-blend-mode:multiply;
  border-radius:3px;box-shadow:0 50px 90px -46px rgba(0,0,0,.95);transform:rotate(-.6deg)}
.letter p{font:400 clamp(21px,2vw,26px)/1.45 var(--display);color:var(--paper-ink);margin-bottom:18px}
.letter .sig{font:600 14px/1.4 var(--sans);letter-spacing:.04em;color:var(--paper-mut);margin:26px 0 0;padding-top:16px;border-top:1px dashed rgba(59,40,18,.3)}
.letter :is(b,strong){color:var(--paper-ink)}

/* ── CITIES: a service-area list and the business card beside it ────────── */
.area{display:grid;gap:clamp(28px,4vw,56px);align-items:start}
@media (min-width:900px){.area{grid-template-columns:1.4fr 1fr}}
.cities{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.cities li{padding:10px 16px;border-radius:999px;font-size:15px;color:var(--bone);box-shadow:inset 0 0 0 1px var(--seam-2)}
.card-nap{color:var(--paper-ink);padding:26px 26px 22px;border-radius:6px;
  background:var(--paper-tex) center/512px,linear-gradient(170deg,var(--paper),var(--paper-2));background-blend-mode:multiply;box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.card-nap dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:15px}
.card-nap dt{font:700 11px/1.8 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-mut)}
.card-nap dd,.card-nap a{color:var(--paper-ink)}

/* ── TERRITORY: the one-roofer-per-ZIP callout ──────────────────────────── */
.zip{display:grid;gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(32px,5vw,64px);border-radius:18px;background:radial-gradient(120% 140% at 100% 0,rgba(211,158,90,.14),transparent 55%),var(--night-2);box-shadow:inset 0 0 0 1px var(--seam-2)}
@media (min-width:900px){.zip{grid-template-columns:1.2fr 1fr}}
.zip-stamp{justify-self:center;display:grid;place-items:center;width:clamp(200px,22vw,260px);aspect-ratio:1;border-radius:50%;text-align:center;color:var(--copper);
  box-shadow:inset 0 0 0 2px var(--copper),inset 0 0 0 9px var(--night-2),inset 0 0 0 10px rgba(211,158,90,.5);transform:rotate(-8deg)}
.zip-stamp b{display:block;font:400 clamp(56px,6vw,76px)/.9 var(--display);color:var(--bone)}
.zip-stamp span{display:block;font:700 11px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;max-width:15ch;margin-inline:auto}

/* ── APPLICATION FORM on a page (founders pack) ────────────────────────── */
.apply-card{padding:clamp(24px,4vw,44px);border-radius:18px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--seam-2),0 50px 90px -46px rgba(0,0,0,.9)}
.apply-card h3{font-family:var(--display);font-weight:400;font-size:clamp(28px,2.8vw,36px);margin-bottom:6px}
.apply-card .small{margin-bottom:26px}
.field select{width:100%;min-height:52px;padding:14px 40px 14px 16px;border-radius:12px;border:1px solid var(--seam-2);background:var(--night-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23958B7C' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 16px center no-repeat;color:var(--bone);font-size:16px;-webkit-appearance:none;appearance:none}
.field select:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 3px rgba(211,158,90,.22)}
.field [aria-invalid="true"]{border-color:#E0906B}

/* ── READING LIST ───────────────────────────────────────────────────────── */
.reads{display:grid;gap:1px;background:var(--seam);border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--seam)}
@media (min-width:760px){.reads{grid-template-columns:repeat(2,1fr)}}
.reads a{display:grid;gap:8px;padding:26px 24px;background:var(--night-2);text-decoration:none;transition:background-color .25s var(--out)}
.reads small{font:600 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}
.reads b{font:400 clamp(22px,2vw,27px)/1.15 var(--display);color:var(--bone)}
@media (hover:hover) and (pointer:fine){.reads a:hover{background:var(--night-3)}}

/* ══ ROOFER PILOT APPLICATION OVERLAY ════════════════════════════════════
   The 8-step form carried over from the pre-Atelier page. Its markup and
   script are unchanged (they write to Formspree and to the CRM as
   form_key "roofer-pilot", and open from ?apply=1 for the ads), so these
   rules restyle the same class names in the night world. Everything is
   scoped under .apply-overlay so the page's own .opt / .field rules are
   untouched. */
.apply-overlay{position:fixed;inset:0;z-index:200;height:100vh;height:100dvh;display:flex;flex-direction:column;overscroll-behavior:contain;
  background:radial-gradient(60% 50% at 80% -10%,rgba(211,158,90,.12),transparent 60%),var(--night);
  opacity:0;visibility:hidden;transition:opacity .4s var(--out),visibility .4s}
.apply-overlay.open{opacity:1;visibility:visible}
html.apply-open,html.apply-open body{overflow:hidden}
.apply-overlay .grain{position:absolute;inset:0;z-index:0;opacity:.05}
.apply-overlay .prog-track{position:absolute;inset:0 0 auto;height:3px;background:rgba(243,241,239,.08);z-index:3}
.apply-overlay .prog-fill{height:100%;transform:scaleX(.125);transform-origin:0 50%;background:linear-gradient(90deg,var(--copper-deep),var(--copper-hot));transition:transform .5s var(--out)}
.apply-overlay .apply-top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;max-width:760px;width:100%;margin:0 auto;padding:22px 24px 0}
.apply-overlay .ax-wordmark{width:92px;height:auto}
.apply-overlay .apply-right{display:flex;align-items:center;gap:14px}
.apply-overlay .step-count{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.apply-overlay .step-count b{color:var(--copper)}
.apply-overlay .apply-close{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--seam-2);background:transparent;color:var(--bone-2);font:500 13px/1 var(--sans);cursor:pointer;transition:border-color .2s var(--out),color .2s var(--out)}
@media (hover:hover) and (pointer:fine){.apply-overlay .apply-close:hover{border-color:var(--copper);color:var(--bone)}}
.apply-overlay .apply-body{position:relative;z-index:3;flex:1;display:flex;overflow-y:auto;-webkit-overflow-scrolling:touch}
.apply-overlay .apply-stage{max-width:760px;width:100%;margin:auto;padding:20px 24px 40px}
.apply-overlay .valuebar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-bottom:34px;font-size:13.5px;color:var(--bone-2)}
.apply-overlay .valuebar .chk{color:var(--copper);margin-right:4px}
.apply-overlay .valuebar .sep{width:4px;height:4px;border-radius:50%;background:var(--seam-2)}
.apply-overlay .fstep .eyebrow{display:block;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--copper);margin-bottom:16px}
.apply-overlay .fstep .q{font-family:var(--display);font-weight:400;font-size:clamp(32px,5vw,52px);line-height:1.04;letter-spacing:-.018em;color:var(--bone);margin-bottom:12px}
.apply-overlay .fstep .help{color:var(--bone-2);font-size:17px;line-height:1.55;margin-bottom:26px;max-width:48ch}
.apply-overlay .fstep .help.tight{margin-bottom:20px}
.apply-overlay .fstep.step-in > *{opacity:0;transform:translateY(calc(14px * var(--dir,1)));animation:stepIn .55s var(--out) forwards}
.apply-overlay .fstep.step-in > *:nth-child(2){animation-delay:.07s}.apply-overlay .fstep.step-in > *:nth-child(3){animation-delay:.14s}.apply-overlay .fstep.step-in > *:nth-child(4){animation-delay:.21s}
@keyframes stepIn{to{opacity:1;transform:none}}
.apply-overlay .field{display:block;margin-bottom:16px}
.apply-overlay .field.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.apply-overlay .field.two .field{margin-bottom:0}
.apply-overlay .lab{display:block;margin-bottom:10px;font-size:14px;font-weight:600;color:var(--bone)}
.apply-overlay .lab .req{color:var(--copper)}
.apply-overlay .control{width:100%;min-height:56px;padding:15px 16px;border-radius:12px;border:1px solid var(--seam-2);background:var(--night-3);color:var(--bone);font-size:17px;-webkit-appearance:none;appearance:none;transition:border-color .2s var(--out),box-shadow .2s var(--out)}
.apply-overlay .control::placeholder{color:#8A8072}
.apply-overlay .control:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 3px rgba(211,158,90,.22)}
.apply-overlay select.control{padding-right:36px;background:var(--night-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23958B7C' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center no-repeat}
.apply-overlay option{color:#111}
.apply-overlay .phone-row{display:grid;grid-template-columns:128px 1fr;gap:12px}
.apply-overlay .opts{display:grid;gap:10px;grid-template-columns:1fr}
.apply-overlay .opt{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:14px 18px;border-radius:12px;border:1px solid var(--seam-2);background:var(--night-3);color:var(--bone);font-size:16.5px;text-align:left;cursor:pointer;transition:border-color .16s var(--out),background-color .16s var(--out),transform .16s var(--out)}
.apply-overlay .opt::before{display:none}
.apply-overlay .opt .key{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--seam-2);font-size:13px;font-weight:600;color:var(--bone-2)}
.apply-overlay .opt .tick{margin-left:auto;color:var(--copper);opacity:0;transform:scale(.6);transition:opacity .16s var(--out),transform .16s var(--out)}
.apply-overlay .opt.sel{border-color:var(--copper);background:rgba(211,158,90,.1)}
.apply-overlay .opt.sel .key{background:var(--copper);border-color:transparent;color:#1A1006}
.apply-overlay .opt.sel .tick{opacity:1;transform:none}
.apply-overlay .opt:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){.apply-overlay .opt:hover{border-color:var(--dim)}}
.apply-overlay .field.err .control,.apply-overlay .opts.err .opt{border-color:#E0906B}
.apply-overlay .err-msg{display:none;margin-top:8px;font-size:13.5px;color:#F0B89A}
.apply-overlay .field.err .err-msg,.apply-overlay .choice.err .err-msg,.apply-overlay .err-msg.show{display:block}
.apply-overlay .gotcha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.apply-overlay .apply-nav{position:relative;z-index:3;border-top:1px solid var(--seam);background:rgba(10,9,8,.92)}
.apply-overlay .apply-nav-inner{max-width:760px;width:100%;margin:0 auto;padding:16px 24px calc(16px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:14px}
.apply-overlay .nav-back{min-height:48px;padding:0 20px;border-radius:999px;border:1px solid var(--seam-2);background:transparent;color:var(--bone-2);font:500 14px/1 var(--sans);cursor:pointer}
.apply-overlay .nav-back[hidden]{display:inline-flex!important;visibility:hidden;pointer-events:none}
.apply-overlay .nav-spacer{flex:1}
.apply-overlay .enter-hint{font-size:12px;color:var(--dim)}
.apply-overlay .enter-hint kbd{font:inherit;padding:2px 7px;border-radius:6px;border:1px solid var(--seam-2);color:var(--bone-2)}
.apply-overlay .nav-next{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border:0;border-radius:999px;background:var(--copper);color:#1A1006;font:600 14px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:transform .16s var(--out),background-color .2s var(--out)}
.apply-overlay .nav-next:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.apply-overlay .nav-next:hover{background:var(--copper-hot)}}
.apply-overlay .nav-next:disabled{cursor:progress;opacity:.8}
.apply-overlay .nav-next.loading .lbl,.apply-overlay .nav-next.loading .arrow{opacity:0}
.apply-overlay .nav-next .spin{display:none;position:absolute;left:calc(50% - 10px);width:20px;height:20px;border:2.5px solid rgba(26,16,6,.3);border-top-color:#1A1006;border-radius:50%;animation:spin .7s linear infinite}
.apply-overlay .nav-next.loading .spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.apply-overlay .apply-foot{position:relative;z-index:3;text-align:center;padding:0 24px 14px}
.apply-overlay .trust{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;font-size:12px;color:var(--dim)}
.apply-overlay .trust svg{color:var(--copper)}
.apply-overlay .fsuccess{text-align:center;max-width:520px;margin:0 auto}
.apply-overlay .fsuccess .badge{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 24px;border-radius:50%;color:#1A1006;background:radial-gradient(circle at 35% 30%,var(--copper-hot),var(--copper-deep))}
.apply-overlay .fsuccess h2{font-size:clamp(34px,4.6vw,46px);margin-bottom:14px}
.apply-overlay .fsuccess p{color:var(--bone-2);font-size:17px;margin:0 auto 8px;max-width:42ch}
.apply-overlay .fsuccess .later{font-size:14px;color:var(--dim);margin-top:20px}
.apply-overlay .ilink{color:var(--copper)}
@media (max-width:620px){
  .apply-overlay .valuebar{display:none}
  .apply-overlay .enter-hint{display:none}
  .apply-overlay .nav-next{flex:1;justify-content:center}
  .apply-overlay .phone-row{grid-template-columns:108px 1fr}
  .apply-overlay .apply-top{padding:14px 18px 0}
  .apply-overlay .apply-stage{padding:8px 18px 30px}
  .apply-overlay .apply-nav-inner{padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:380px){.apply-overlay .field.two{grid-template-columns:1fr}}
@media (max-height:640px){.apply-overlay .valuebar,.apply-overlay .apply-foot{display:none}}
@media (prefers-reduced-motion:reduce){.apply-overlay .fstep.step-in > *{opacity:1;transform:none;animation:none}}
/* The home diagnostic hides every .q until it is the active one. The roofer
   overlay reuses the class name for its question headings, which would hide
   all eight of them. */
.apply-overlay .q{display:block;animation:none}
/* Strip headings scale with the number of eyelets, so five steps on one strip
   do not wrap every heading onto three lines. */
.strip-steps .step h3{font-size:clamp(26px,calc(11.5vw / var(--n,4)),40px)}
@media (max-width:820px){.strip-steps .step h3{font-size:clamp(28px,7vw,34px)}}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 4 — ARTICLES, METHOD, ABOUT, TEARDOWNS
   ══════════════════════════════════════════════════════════════════════════ */
.prose-intro{max-width:720px}
.prose-intro p{font-size:clamp(19px,1.7vw,21px);line-height:1.66;color:var(--bone-2);margin-bottom:20px}
.prose-intro p:first-child::first-letter{font-family:var(--display);float:left;font-size:4.2em;line-height:.82;padding:.06em .12em 0 0;color:var(--copper)}
.prose-list{margin:6px 0 22px;padding-left:22px;display:grid;gap:10px;font-size:18px;line-height:1.66}
.prose-list li::marker{color:var(--copper)}
.prose-ol li::marker{font-family:var(--display)}
.prose-pull{margin:34px 0;max-width:36ch}
.prose-pull p{font:400 clamp(24px,2.4vw,30px)/1.25 var(--display)!important;color:var(--bone)!important;margin:0!important}
.prose-spec{margin:30px 0 8px}
.prose-spec .spec-row b{font-size:clamp(34px,3.6vw,46px)}
.prose-steps{margin:24px 0 8px}
.prose-steps li:last-child{border-bottom:0}
.prose-steps li p{font-size:16.5px!important;margin:0!important}
.takeaways{max-width:900px}
.takeaways li p{font-size:16.5px;line-height:1.6;color:var(--paper-mut);max-width:68ch}
.takeaways li strong{color:var(--paper-ink)}
.guide-part .ptable{margin:26px 0 12px}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:22px;font-size:14px;color:var(--dim)}
.byline img{width:36px;height:36px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--seam-2)}
.byline a{color:var(--bone-2)}
.byline .dot{margin:0 .55em;opacity:.55}

/* ── PORTRAIT (about) ─────────────────────────────────────────────────── */
.portrait{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:860px){.portrait{grid-template-columns:auto 1fr}}
.portrait-frame{position:relative;width:clamp(180px,20vw,240px);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--seam-2),0 0 0 10px var(--night),0 0 0 11px rgba(211,158,90,.35),0 40px 70px -30px rgba(0,0,0,.9)}
.portrait-frame img{width:100%;height:100%;object-fit:cover}
.portrait h2{margin-bottom:18px}
.portrait p{font-size:18px;line-height:1.68;max-width:60ch;margin-bottom:14px}