/* ==========================================================================
   Kohl Customs — TheWayUp build
   Palette: bone ground + black structural panels + chrome + gold
   Type: Archivo bold-italic (display, matches the logo lettering) + Barlow (body).
   Self-hosted, subset latin. Palette derived from the mark: black, chrome, gold.
   ========================================================================== */

/* ---------- Fonts ---------- */
/* Display face matches the "ONE STOP CUSTOM SHOP" lettering in the logo:
   a bold oblique grotesque. Archivo is the closest open equivalent. */
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-BoldItalic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap;}
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('../fonts/Barlow-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('../fonts/Barlow-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('../fonts/Barlow-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* ---------- Tokens ---------- */
:root{
  --bone:#F4EFE6;
  --bone-2:#EBE3D5;
  --bone-3:#DDD3C1;
  --ink:#12100E;
  --ink-2:#1C1916;
  --ink-3:#2B2620;
  --ink-4:#3D372F;

  --gold:#A8791F;        /* large / display gold on bone (AA large 3.4:1) */
  --gold-ink:#7A5714;    /* small gold text on bone / bone-2 (AA 5.2:1) */
  --gold-2:#E3B45C;      /* gold on ink */
  --gold-3:#F2D392;      /* gold highlight */

  --chrome:#8C9199;
  --chrome-2:#C3C8CE;
  --chrome-3:#E4E7EA;

  /* The primary mark is 49% black, 33% chrome, 12% gold, 5% white — and 0.06% red.
     Red lived only in the banner's corner flourishes, so it is NOT a site colour.
     Chrome does the work red was doing. --err stays, for form errors only. */
  --chrome-d:#5F656D;    /* chrome dark enough for hairlines on bone */

  --muted:#655C50;       /* body-muted on bone (AA) */
  --muted-2:#7C7365;
  --muted-ink:#A79E92;   /* muted on ink */

  --ok:#2E6B4F;
  --err:#A3181F;

  --ff-display:'Archivo',"Helvetica Neue",Helvetica,Arial,sans-serif;
  --ff-body:'Barlow',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --wrap:1240px;
  --gut:clamp(1.15rem,4vw,2.5rem);
  --r:3px;
  --ease:cubic-bezier(.4,0,.2,1);
  --t:220ms var(--ease);

  --hdr-h:68px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
/* The enquiry form hides whole steps and field blocks with [hidden]; several
   components set an explicit display, which would otherwise win. */
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--ff-body);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:clip;overflow-wrap:break-word;
}
img,picture,video,svg{max-width:100%;display:block;}
img{height:auto;}
a{color:inherit;}
button{font:inherit;color:inherit;}
h1,h2,h3,h4{margin:0;font-weight:400;overflow-wrap:break-word;}
p{margin:0 0 1.1em;}
ul{margin:0;padding:0;}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px;}
::selection{background:var(--gold-3);color:var(--ink);}

/* ---------- Type scale ---------- */
.d1{font-family:var(--ff-display);font-weight:700;font-style:italic;font-size:clamp(2.15rem,5.6vw,3.9rem);line-height:.98;letter-spacing:-.005em;text-transform:uppercase;}
.d2{font-family:var(--ff-display);font-weight:700;font-style:italic;font-size:clamp(1.72rem,3.9vw,2.7rem);line-height:1;text-transform:uppercase;}
.d3{font-family:var(--ff-display);font-weight:700;font-style:italic;font-size:clamp(1.4rem,2.9vw,1.95rem);line-height:1.04;text-transform:uppercase;}
.d4{font-family:var(--ff-display);font-weight:700;font-style:italic;font-size:clamp(1.12rem,2vw,1.38rem);line-height:1.1;text-transform:uppercase;}
.lead{font-size:clamp(1.06rem,1.9vw,1.28rem);line-height:1.58;color:var(--muted);}
.label{font-family:var(--ff-body);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);}
.label--ink{color:var(--gold-2);}
.small{font-size:.9rem;}
.tnum{font-variant-numeric:tabular-nums;}

/* ---------- Layout ---------- */
.wrap{width:min(100% - (var(--gut)*2),var(--wrap));margin-inline:auto;}
.wrap--wide{width:min(100% - (var(--gut)*2),1440px);margin-inline:auto;}
.sec{padding:clamp(3.4rem,8vw,6.5rem) 0;}
.sec--tight{padding:clamp(2.4rem,5vw,4rem) 0;}
.ink-band{background:var(--ink);color:var(--bone);}
.ink-band .lead{color:var(--muted-ink);}
.ink-band a{color:var(--gold-2);}
.bone-2{background:var(--bone-2);}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--gold-2);padding:.8rem 1.2rem;z-index:200;font-weight:700;}
.skip:focus{left:.6rem;top:.6rem;}

/* ==========================================================================
   Signature device 1 — PINSTRIPE
   ========================================================================== */
.pin{height:4px;border:0;margin:0;background:
  linear-gradient(var(--chrome-d),var(--chrome-d)) 0 0/100% 2px no-repeat,
  linear-gradient(var(--gold),var(--gold)) 0 3px/100% 1px no-repeat;
}
.pin--ink{background:
  linear-gradient(var(--chrome),var(--chrome)) 0 0/100% 2px no-repeat,
  linear-gradient(rgba(227,180,92,.55),rgba(227,180,92,.55)) 0 3px/100% 1px no-repeat;}
.pin-rule{width:78px;height:7px;border:0;margin:0 0 1.6rem;background:
  linear-gradient(var(--gold),var(--gold)) 0 0/100% 4px no-repeat,
  linear-gradient(var(--chrome-d),var(--chrome-d)) 0 5px/56% 2px no-repeat;}
.pin-rule--ink{background:
  linear-gradient(var(--gold-2),var(--gold-2)) 0 0/100% 4px no-repeat,
  linear-gradient(var(--chrome),var(--chrome)) 0 5px/56% 2px no-repeat;}
.pin-rule--c{margin-inline:auto;}

/* corner flourish, echoes the banner pinstriping */
.flourish{position:absolute;width:clamp(120px,16vw,230px);height:auto;opacity:.34;pointer-events:none;color:var(--chrome-d);}
.flourish--tr{top:0;right:0;}
.flourish--bl{bottom:0;left:0;transform:scale(-1,-1);}
.ink-band .flourish{opacity:.5;color:var(--gold-2);}

/* ==========================================================================
   Signature device 2 — BUILD PLATE (riveted data plate)
   ========================================================================== */
.plate{
  position:relative;background:var(--ink);color:var(--bone);
  border-radius:var(--r);padding:1.5rem 1.6rem;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 14px 34px -18px rgba(18,16,14,.7);
}
.plate::after{
  content:"";position:absolute;inset:7px;border:1px solid rgba(227,180,92,.42);
  border-radius:2px;pointer-events:none;
}
.plate--bone{background:var(--bone-2);color:var(--ink);box-shadow:0 14px 34px -22px rgba(18,16,14,.45);}
.plate--bone::after{border-color:rgba(184,134,43,.45);}
.rivets{position:absolute;inset:0;pointer-events:none;}
.rivets i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--chrome);opacity:.55;box-shadow:0 1px 1px rgba(0,0,0,.5);}
.rivets i:nth-child(1){top:14px;left:14px;} .rivets i:nth-child(2){top:14px;right:14px;}
.rivets i:nth-child(3){bottom:14px;left:14px;} .rivets i:nth-child(4){bottom:14px;right:14px;}

/* plate spec rows */
.spec{list-style:none;display:grid;gap:0;}
.spec li{display:flex;justify-content:space-between;gap:1.2rem;padding:.62rem 0;border-bottom:1px solid rgba(227,180,92,.18);font-size:.95rem;}
.spec li:last-child{border-bottom:0;}
.spec dt,.spec .k{color:var(--muted-ink);font-weight:500;letter-spacing:.03em;}
.spec .v{color:var(--bone);font-weight:700;text-align:right;}
.plate--bone .spec li{border-color:rgba(18,16,14,.13);}
.plate--bone .spec .k{color:var(--muted);} .plate--bone .spec .v{color:var(--ink);}

/* ==========================================================================
   Signature device 3 — SERIAL NUMBER
   ========================================================================== */
.serial{font-family:var(--ff-display);font-weight:700;font-style:italic;font-size:clamp(2.3rem,6vw,3.9rem);line-height:.85;color:var(--bone-3);
  -webkit-text-stroke:1px var(--gold);letter-spacing:.01em;}
.serial--ink{color:transparent;-webkit-text-stroke:1px var(--gold-2);}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.9rem 1.75rem;border:2px solid var(--ink);border-radius:var(--r);
  background:var(--ink);color:var(--bone);text-decoration:none;cursor:pointer;
  font-weight:700;font-size:.95rem;letter-spacing:.09em;text-transform:uppercase;
  transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t),border-color var(--t);
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;flex:none;}
.btn--sm svg{width:14px;height:14px;}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(18,16,14,.75), 3px 3px 0 0 var(--gold);}
.btn:active{transform:translateY(0);}
.btn--gold{background:var(--gold);border-color:var(--gold);color:var(--ink);}
.btn--gold:hover{background:var(--gold-3);border-color:var(--gold-3);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn--ghost:hover{background:var(--ink);color:var(--bone);}
.btn--ghost-ink{background:transparent;color:var(--bone);border-color:rgba(227,180,92,.6);}
.btn--ghost-ink:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);}
.btn--sm{min-height:44px;padding:.6rem 1.15rem;font-size:.82rem;}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;}
/* .ink-band a{} would otherwise recolour buttons inside dark bands — pin them back */
.ink-band a.btn{color:var(--bone);}
.ink-band a.btn--gold{color:var(--ink);}
.ink-band a.btn--ghost-ink{color:var(--bone);}
.ink-band a.btn--ghost-ink:hover{color:var(--ink);}

/* underline-reveal text link */
.tlink{
  display:inline-block;text-decoration:none;font-weight:700;color:var(--ink);
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size 300ms var(--ease),color var(--t);padding-bottom:2px;
}
.tlink:hover,.tlink:focus-visible{background-size:100% 2px;}
.tlink svg{width:14px;height:14px;display:inline;vertical-align:-2px;}
.ink-band .tlink,.tlink--ink{color:var(--gold-2);background-image:linear-gradient(var(--gold-2),var(--gold-2));}

/* ==========================================================================
   HEADER — §6a Layer 1, variant H6 (top utility bar + distinct main nav row)
   ========================================================================== */
.util{background:var(--ink);color:var(--muted-ink);font-size:.8rem;}
.util__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:38px;flex-wrap:wrap;}
.util__list{display:flex;align-items:center;gap:1.35rem;list-style:none;flex-wrap:wrap;}
.util__list li{display:flex;align-items:center;gap:.42rem;}
.util a{color:var(--gold-2);text-decoration:none;font-weight:700;}
.util a:hover{text-decoration:underline;}
.util svg{width:14px;height:14px;flex:none;color:var(--chrome);}
.util__soc{display:flex;gap:.85rem;align-items:center;}
.util__soc a{display:grid;place-items:center;width:30px;height:30px;color:var(--chrome-2);}
.util__soc a:hover{color:var(--gold-2);}
.util__soc svg{width:17px;height:17px;color:currentColor;}

.hdr{position:sticky;top:0;z-index:120;background:var(--bone);}
.hdr__in{display:flex;align-items:center;gap:1.2rem;min-height:var(--hdr-h);}
.brand{display:flex;align-items:center;text-decoration:none;flex:none;margin-right:auto;}
/* The transparent emblem sits straight on the header — no plate behind it.
   The mark carries its own black badge and white keyline, so it reads as a decal. */
.brand__plate{display:grid;place-items:center;transition:transform var(--t);}
.brand:hover .brand__plate{transform:translateY(-1px);}
.brand img{width:auto;height:46px;}
@media (max-width:600px){.brand img{height:40px;}}
.nav{display:flex;align-items:center;gap:.25rem;}
.nav a{
  text-decoration:none;font-weight:700;font-size:.88rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.62rem .8rem;border-radius:var(--r);position:relative;color:var(--ink);transition:color var(--t);
}
.nav a::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.34rem;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform 260ms var(--ease);}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);}
.nav a[aria-current="page"]{color:var(--gold-ink);}
.hdr__cta{flex:none;margin-left:.5rem;}
.burger{display:none;width:48px;height:48px;border:2px solid var(--ink);border-radius:var(--r);background:transparent;
  cursor:pointer;padding:0;place-items:center;flex:none;}
.burger span{display:block;width:20px;height:2px;background:var(--ink);position:relative;transition:background 120ms;}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);
  transition:transform 260ms var(--ease),top 200ms var(--ease);}
.burger span::before{top:-6px;} .burger span::after{top:6px;}
.burger[aria-expanded="true"] span{background:transparent;}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);}

/* mobile overlay nav */
.mnav{position:fixed;inset:0;z-index:130;background:var(--ink);color:var(--bone);
  display:grid;grid-template-rows:auto 1fr auto;opacity:0;visibility:hidden;transition:opacity 260ms var(--ease),visibility 260ms;}
.mnav[data-open="true"]{opacity:1;visibility:visible;}
.mnav__top{display:flex;align-items:center;justify-content:space-between;padding:1rem var(--gut);}
.mnav__top img{width:auto;height:40px;}
.mnav__close{width:48px;height:48px;border:2px solid rgba(227,180,92,.55);background:transparent;color:var(--gold-2);
  border-radius:var(--r);font-size:1.4rem;line-height:1;cursor:pointer;display:grid;place-items:center;}
.mnav__list{list-style:none;display:flex;flex-direction:column;justify-content:center;gap:.2rem;padding:0 var(--gut);overflow-y:auto;}
.mnav__list a{display:block;text-decoration:none;font-family:var(--ff-display);font-weight:700;font-style:italic;font-size:clamp(1.9rem,8vw,2.6rem);
  text-transform:uppercase;padding:.42rem 0;color:var(--bone);border-bottom:1px solid rgba(227,180,92,.16);}
.mnav__list a[aria-current="page"]{color:var(--gold-2);}
.mnav__foot{padding:1.4rem var(--gut) 2rem;display:grid;gap:.75rem;}
.mnav__foot .btn{width:100%;}
.mnav__foot a.small{color:var(--muted-ink);text-decoration:none;}

/* sticky mobile CTA */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:110;display:none;
  background:var(--ink);border-top:2px solid var(--gold);padding:.55rem var(--gut) calc(.55rem + env(safe-area-inset-bottom));
  gap:.55rem;grid-template-columns:1fr 1fr;}
.mcta .btn{min-height:48px;width:100%;padding:.7rem .5rem;font-size:.8rem;}

@media (max-width:960px){
  .nav,.hdr__cta{display:none;}
  .burger{display:grid;}
  .util__soc{display:none;}
  .util__list li.util--hide{display:none;}
  .mcta{display:grid;}
  body{padding-bottom:74px;}
}

/* ==========================================================================
   HERO — §6a Layer 2, variant HE7 (editorial, asymmetric, no eyebrow line)
   ========================================================================== */
.hero{position:relative;overflow:clip;padding-top:clamp(2rem,5vw,3.6rem);padding-bottom:clamp(2.6rem,6vw,4.6rem);}
.hero__grid{display:grid;gap:clamp(1.8rem,4vw,3rem);align-items:center;}
.hero__grid>*,.feat__grid>*,.chap__grid>*,.cta-band__in>*,.cs-body>*,.cols>*{min-width:0;}
.hero__copy{position:relative;z-index:2;max-width:33rem;}
.hero h1{margin-bottom:1.3rem;}
.hero h1 em{font-style:normal;color:var(--gold);display:block;}
.hero__sub{font-size:clamp(1.02rem,1.75vw,1.2rem);color:var(--muted);max-width:44ch;line-height:1.6;}
.hero__act{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem;margin-top:1.9rem;}
.hero__tel{font-weight:700;text-decoration:none;color:var(--ink);font-size:.98rem;}
.hero__tel span{color:var(--muted);font-weight:500;}
.hero__media{position:relative;}
.hero__fig{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink-2);
  box-shadow:0 40px 70px -46px rgba(18,16,14,.85);}
.hero__fig img{width:100%;aspect-ratio:3/2;object-fit:cover;}
.hero__cap{
  position:relative;margin:-3.4rem 0 0 0;width:min(100%,420px);z-index:3;
}
.hero__cap .plate{padding:1.05rem 1.25rem;}
.hero__cap .d4{margin-bottom:.15rem;}
.hero__cap p{margin:0 0 .7rem;color:var(--muted-ink);font-size:.92rem;}

@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,4.6fr) minmax(0,7fr);gap:clamp(2rem,4vw,4rem);}
  .hero__media{margin-right:calc((100vw - min(100vw - (var(--gut)*2),var(--wrap)))/-2);}
  .hero__fig{border-radius:var(--r) 0 0 var(--r);}
  .hero__cap{margin:-4.6rem 0 0 -2.6rem;}
}

/* trust strip */
.trust{background:var(--ink);color:var(--bone);}
.trust__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.8rem;padding:1.05rem 0;}
.trust__i{display:flex;align-items:center;gap:.6rem;font-size:.92rem;color:var(--chrome-2);}
.trust__i b{color:var(--bone);font-weight:700;}
.trust__i svg{width:17px;height:17px;flex:none;color:var(--gold-2);}
.stars{display:inline-flex;gap:1px;color:var(--gold-2);}
.stars svg{width:14px;height:14px;}

/* ==========================================================================
   Editorial feature (Section 6 pattern D)
   ========================================================================== */
.feat{position:relative;}
.feat__grid{display:grid;gap:clamp(1.6rem,4vw,2.8rem);align-items:center;}
.feat__media{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink-2);}
.feat__media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 600ms var(--ease);}
.feat a.feat__media:hover img{transform:scale(1.035);}
.feat__no{position:absolute;top:-.4rem;left:0;}
.feat__body{position:relative;}
.feat__body h2{margin:.4rem 0 1rem;}
@media (min-width:880px){
  .feat__grid{grid-template-columns:1.25fr 1fr;}
  .feat--flip .feat__grid{grid-template-columns:1fr 1.25fr;}
  .feat--flip .feat__media{order:2;}
}

/* pull quote */
.pq{position:relative;margin:0;padding:clamp(1.5rem,4vw,2.4rem) 0 0;}
.pq p{font-family:var(--ff-display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(1.22rem,2.7vw,1.8rem);
  line-height:1.08;margin:0 0 .8rem;max-width:20ch;}
.pq cite{font-style:normal;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;}
.ink-band .pq cite{color:var(--muted-ink);}

/* ==========================================================================
   Editorial service index (home) — numbered rows, NOT a tile grid
   ========================================================================== */
.sidx{list-style:none;border-top:1px solid rgba(18,16,14,.16);}
.sidx li{border-bottom:1px solid rgba(18,16,14,.16);}
.sidx a{display:grid;grid-template-columns:auto 1fr auto;gap:1rem 1.3rem;align-items:center;
  text-decoration:none;padding:1.4rem .3rem;transition:padding var(--t),background var(--t);position:relative;}
.sidx a:hover{padding-left:1.1rem;background:linear-gradient(90deg,rgba(184,134,43,.09),transparent 70%);}
.sidx__n{font-family:var(--ff-display);font-weight:700;font-style:italic;font-size:1.05rem;color:var(--gold-ink);letter-spacing:.04em;}
.sidx__t{font-family:var(--ff-display);font-weight:700;font-style:italic;font-size:clamp(1.2rem,2.6vw,1.7rem);text-transform:uppercase;line-height:1;}
.sidx__d{grid-column:2;font-size:.95rem;color:var(--muted);margin:.4rem 0 0;max-width:56ch;}
.sidx__go{width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;
  transition:background var(--t),color var(--t),transform var(--t);flex:none;}
.sidx a:hover .sidx__go{background:var(--ink);border-color:var(--ink);color:var(--gold-2);transform:translateX(4px);}
.sidx__go svg{width:15px;height:15px;}

/* ==========================================================================
   Services chapters (Section 6 pattern C — long-form scroll narrative)
   ========================================================================== */
.chap{position:relative;padding:clamp(2.8rem,7vw,5rem) 0;border-top:1px solid rgba(18,16,14,.14);}
.chap:first-of-type{border-top:0;}
.chap.ink-band{border-top:0;}
.chap__grid{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:start;}
.chap__head{position:relative;}
.chap__no{font-family:var(--ff-display);font-weight:700;font-style:italic;font-size:clamp(3rem,7.5vw,5rem);line-height:.85;color:transparent;
  -webkit-text-stroke:1.5px var(--gold);display:block;margin-bottom:.5rem;}
.ink-band .chap__no{-webkit-text-stroke-color:var(--gold-2);}
.chap h2{margin-bottom:.9rem;}
.chap__list{list-style:none;display:grid;gap:1.15rem;margin-top:1.6rem;}
.chap__list li{padding-left:1.5rem;position:relative;}
.chap__list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--gold);
  transform:rotate(45deg);}
.chap__list b{display:block;font-size:1.04rem;}
.chap__list span{color:var(--muted);font-size:.96rem;}
.ink-band .chap__list span{color:var(--muted-ink);}
.chap__mediacol{min-width:0;}
.chap__fig{margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink-2);}
.chap__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.chap__fig figcaption{font-size:.82rem;color:var(--muted);padding:.6rem .2rem 0;}
.ink-band .chap__fig figcaption{color:var(--muted-ink);}
@media (min-width:900px){
  .chap__grid{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:stretch;}
  .chap--flip .chap__mediacol{order:-1;}
  /* The photo tracks the middle of the viewport as you scroll the chapter, rather
     than pinning under the header. Capping at 100% of the row keeps a short
     chapter from being stretched by a full-height sticky box. */
  /* The photo tracks the middle of the viewport instead of pinning under the header.
     Half the photo's height at this breakpoint is ~12.2vw + 39px (a 4:3 image in the
     .85fr column, plus its caption), so that offset centres it. max() stops it riding
     up under the header on short viewports. Sizing the box to the photo rather than to
     the viewport keeps ~570px of sticky travel instead of ~170px. */
  .chap__mediacol{position:sticky;align-self:start;
    top:max(calc(var(--hdr-h) + 1rem),calc(50dvh - 12.2vw - 39px));}
}
@media (max-width:899px){.chap__mediacol{position:static;height:auto;display:block;}}

/* services jump index */
.jump{position:sticky;top:var(--hdr-h);z-index:100;background:var(--bone-2);border-bottom:1px solid rgba(18,16,14,.14);}
.jump__in{display:flex;gap:.3rem;overflow-x:auto;padding:.6rem 0;scrollbar-width:thin;-webkit-overflow-scrolling:touch;}
.jump a{flex:none;text-decoration:none;font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.55rem .85rem;border-radius:var(--r);color:var(--muted);transition:background var(--t),color var(--t);white-space:nowrap;}
.jump a:hover,.jump a.is-active{background:var(--ink);color:var(--gold-2);}

/* target flash on anchor arrival */
.flash{animation:flash 1.4s var(--ease);}
@keyframes flash{0%{box-shadow:inset 0 0 0 3px var(--gold);}100%{box-shadow:inset 0 0 0 3px transparent;}}
@media (prefers-reduced-motion:reduce){.flash{animation:none;}}

/* ==========================================================================
   Projects
   ========================================================================== */
.pgrid{display:grid;gap:clamp(1.3rem,3vw,2rem);}
@media (min-width:760px){.pgrid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1080px){.pgrid{grid-template-columns:repeat(3,1fr);}}
.pgrid--lead>li:first-child{grid-column:1/-1;}

.pcard{position:relative;height:100%;}
.pcard a{display:block;text-decoration:none;color:inherit;height:100%;}
.pcard__fig{position:relative;margin:0;overflow:hidden;border-radius:var(--r);background:var(--ink-2);}
.pcard__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 620ms var(--ease),filter 400ms var(--ease);}
.pgrid--lead>li:first-child .pcard__fig img{aspect-ratio:16/9;}
.pcard a:hover .pcard__fig img,.pcard a:focus-visible .pcard__fig img{transform:scale(1.045);}
.pcard__tag{position:absolute;top:.85rem;left:.85rem;background:var(--ink);color:var(--gold-2);
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .6rem;border-radius:2px;}
.pcard__body{padding:1.05rem .1rem 0;}
.pcard__no{font-family:var(--ff-display);font-weight:700;font-style:italic;font-size:.9rem;color:var(--gold-ink);letter-spacing:.05em;}
.pcard h3{font-family:var(--ff-display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1;margin:.25rem 0 .35rem;}
.pgrid--lead>li:first-child h3{font-size:clamp(1.65rem,4vw,2.5rem);}
.pcard__meta{color:var(--muted);font-size:.95rem;margin:0 0 .55rem;}
.pcard__svc{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin-top:.6rem;}
.pcard__svc li{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  border:1px solid rgba(18,16,14,.22);border-radius:2px;padding:.25rem .5rem;}
.pcard__go{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.86rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);margin-top:.7rem;}
.pcard__go svg{width:14px;height:14px;transition:transform var(--t);}
.pcard a:hover .pcard__go svg{transform:translateX(4px);}

/* "more builds" honest card */
.pcard--soon .pcard__fig{background:var(--ink);display:grid;place-items:center;aspect-ratio:4/3;}
.pcard--soon .pcard__fig div{text-align:center;padding:2rem 1.4rem;}

/* ---- "on the floor" work-in-progress card -------------------------------
   These builds are live in the shop and have no finished photo set yet, so
   the card is typographic rather than photographic. Deliberately reads as a
   shop-floor docket: rule, number, name, status. When the photos land, swap
   .pcard--wip for a normal .pcard with a <picture> and it slots straight in.
   ------------------------------------------------------------------------- */
.pcard--wip .pcard__fig{background:var(--ink);display:flex;flex-direction:column;justify-content:space-between;
  aspect-ratio:4/3;padding:1.35rem 1.3rem;background-image:
  repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 2px,transparent 2px 9px);}
.pcard--wip .wip__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.pcard--wip .wip__no{font-family:var(--ff-display);font-weight:700;font-style:italic;font-size:2.6rem;
  line-height:.8;color:var(--gold-2);opacity:.92;}
.pcard--wip .wip__status{display:inline-flex;align-items:center;gap:.45rem;font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bone);
  border:1px solid rgba(244,239,230,.28);border-radius:100px;padding:.3rem .62rem;white-space:nowrap;}
.pcard--wip .wip__dot{width:6px;height:6px;border-radius:50%;background:var(--gold-2);flex:none;}
@media (prefers-reduced-motion:no-preference){
  .pcard--wip .wip__dot{animation:wipPulse 2.4s var(--ease) infinite;}
  @keyframes wipPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.78)}}
}
.pcard--wip .wip__name{font-family:var(--ff-display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.45rem,3.4vw,2.05rem);line-height:.95;color:var(--bone);margin:0;}
.pcard--wip .wip__rule{border:0;border-top:1px solid rgba(244,239,230,.2);margin:.85rem 0 .7rem;}
.pcard--wip .wip__sub{color:var(--muted-ink);font-size:.9rem;margin:0;}
.pcard--wip a:hover .pcard__fig,.pcard--wip a:focus-visible .pcard__fig{background-color:var(--ink-2);}
.pcard--wip .pcard__fig{transition:background-color var(--t);}

/* ==========================================================================
   Case study
   ========================================================================== */
.cs-hero{position:relative;background:var(--ink);color:var(--bone);overflow:clip;}
.cs-hero__fig{margin:0;position:relative;}
.cs-hero__fig img{width:100%;height:clamp(300px,58vh,620px);object-fit:cover;opacity:.82;}
.cs-hero__fig::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,16,14,.55) 0%,rgba(18,16,14,.1) 35%,rgba(18,16,14,.92) 100%);}
.cs-hero__copy{position:relative;margin-top:-9.5rem;z-index:2;padding-bottom:clamp(2rem,5vw,3.4rem);}
.cs-hero__copy h1{margin:.3rem 0 .7rem;}
.cs-hero__meta{display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;color:var(--chrome-2);font-size:.95rem;font-weight:500;}
.cs-hero__meta b{color:var(--gold-2);font-weight:700;}

.cs-body{display:grid;gap:clamp(1.8rem,4vw,3.2rem);}
@media (min-width:920px){.cs-body{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(2.2rem,5vw,4.5rem);}}
.cs-prose p{font-size:1.06rem;line-height:1.7;}
.cs-prose h2{margin:2.2rem 0 .9rem;}
.cs-side{display:grid;gap:1.3rem;align-content:start;}
@media (min-width:920px){.cs-side{position:sticky;top:calc(var(--hdr-h) + 1.6rem);}}

.draftnote{border-left:4px solid var(--gold);background:var(--bone-2);padding:.95rem 1.15rem;font-size:.92rem;color:var(--muted);}
.draftnote b{color:var(--ink);}

/* gallery */
.gal{display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr);}
@media (min-width:720px){.gal{grid-template-columns:repeat(3,1fr);gap:.9rem;}}
@media (min-width:1080px){.gal{grid-template-columns:repeat(4,1fr);}}
.gal li:nth-child(1),.gal li:nth-child(8){grid-column:span 2;grid-row:span 2;}
.gal button{display:block;width:100%;height:100%;padding:0;border:0;background:var(--ink-2);cursor:pointer;
  border-radius:var(--r);overflow:hidden;position:relative;}
.gal img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;transition:transform 600ms var(--ease),opacity 300ms;}
.gal li:nth-child(1) img,.gal li:nth-child(8) img{aspect-ratio:1;}
.gal button:hover img{transform:scale(1.06);}
.gal button::after{content:"";position:absolute;inset:0;background:rgba(18,16,14,0);transition:background var(--t);}
.gal button:hover::after{background:rgba(18,16,14,.14);}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(10,9,8,.96);display:grid;grid-template-rows:auto 1fr auto;
  opacity:0;visibility:hidden;transition:opacity 240ms var(--ease),visibility 240ms;}
.lb[data-open="true"]{opacity:1;visibility:visible;}
.lb__bar{display:flex;justify-content:space-between;align-items:center;padding:.9rem var(--gut);color:var(--muted-ink);font-size:.85rem;}
/* minmax(0,1fr) is the important bit: without it the stage's own implicit row
   is content-sized, so a tall portrait clip made the row 2400px and the
   media's height:100% resolved against that instead of the visible stage. */
.lb__stage{display:grid;grid-template-rows:minmax(0,1fr);place-items:center;padding:0 var(--gut);min-height:0;overflow:hidden;}
.lb__stage img{object-fit:contain;border-radius:var(--r);}
.lb__cap{padding:.9rem var(--gut) 1.4rem;color:var(--chrome-2);font-size:.92rem;text-align:center;}
.lb__btn{width:48px;height:48px;border-radius:50%;border:2px solid rgba(227,180,92,.5);background:transparent;
  color:var(--gold-2);display:grid;place-items:center;cursor:pointer;transition:background var(--t),color var(--t);}
.lb__btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);}
.lb__btn svg{width:18px;height:18px;}
.lb__nav{display:flex;gap:.6rem;}

/* ==========================================================================
   FAQ (branded accordion, no native details marker)
   ========================================================================== */
.faq{border-top:1px solid rgba(18,16,14,.16);}
.faq__i{border-bottom:1px solid rgba(18,16,14,.16);}
.faq__q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem;text-align:left;
  background:none;border:0;padding:1.25rem .2rem;cursor:pointer;font-weight:700;font-size:1.04rem;line-height:1.4;}
.faq__q:hover{color:var(--gold-ink);}
.faq__ic{flex:none;width:26px;height:26px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;
  margin-top:.1rem;transition:transform 300ms var(--ease),background var(--t),border-color var(--t);}
.faq__ic::before,.faq__ic::after{content:"";position:absolute;background:var(--ink);}
.faq__ic::before{width:11px;height:2px;} .faq__ic::after{width:2px;height:11px;transition:transform 300ms var(--ease);}
.faq__q[aria-expanded="true"] .faq__ic{background:var(--ink);border-color:var(--ink);transform:rotate(180deg);}
.faq__q[aria-expanded="true"] .faq__ic::before,.faq__q[aria-expanded="true"] .faq__ic::after{background:var(--bone);}
.faq__q[aria-expanded="true"] .faq__ic::after{transform:scaleY(0);}
.faq__a{overflow:hidden;height:0;transition:height 320ms var(--ease);}
.faq__a>div{padding:0 3rem 1.35rem .2rem;color:var(--muted);}
.faq__a p:last-child{margin-bottom:0;}

/* ==========================================================================
   FORMS — §7b, fully branded, zero native chrome
   ========================================================================== */
.form{display:grid;gap:1.35rem;}
.fgrid{display:grid;gap:1.1rem;}
@media (min-width:640px){.fgrid--2{grid-template-columns:1fr 1fr;}}
.field{display:grid;gap:.42rem;position:relative;}
.field>label,.fset__lg{font-weight:700;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);}
.field .hint{font-size:.85rem;color:var(--muted);font-weight:400;letter-spacing:0;text-transform:none;}
.req{color:var(--err);}
.inp{
  width:100%;min-height:52px;padding:.85rem 1rem;border:2px solid rgba(18,16,14,.24);border-radius:var(--r);
  background:var(--bone);color:var(--ink);font:inherit;font-size:1rem;transition:border-color var(--t),box-shadow var(--t),background var(--t);
  appearance:none;-webkit-appearance:none;
}
.inp::placeholder{color:var(--muted-2);}
.inp:hover{border-color:rgba(18,16,14,.4);}
.inp:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 4px rgba(184,134,43,.18);background:#fff;}
textarea.inp{min-height:130px;resize:vertical;line-height:1.55;}
.field[data-invalid="true"] .inp,.field[data-invalid="true"] .csel__btn{border-color:var(--err);}
.field[data-invalid="true"] .inp:focus{box-shadow:0 0 0 4px rgba(163,24,31,.16);}
.err{display:none;color:var(--err);font-size:.86rem;font-weight:700;align-items:center;gap:.4rem;}
.err svg{width:15px;height:15px;flex:none;}
.drop .btn svg{width:14px;height:14px;}
.field[data-invalid="true"] .err{display:flex;}

/* custom select (§7b: never a bare <select>) */
.csel{position:relative;}
.csel__btn{width:100%;min-height:52px;padding:.85rem 2.6rem .85rem 1rem;border:2px solid rgba(18,16,14,.24);
  border-radius:var(--r);background:var(--bone);color:var(--ink);font:inherit;font-size:1rem;text-align:left;cursor:pointer;
  transition:border-color var(--t),box-shadow var(--t);}
.csel__btn[data-placeholder="true"]{color:var(--muted-2);}
.csel__btn:hover{border-color:rgba(18,16,14,.4);}
.csel__btn:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 4px rgba(184,134,43,.18);}
.csel__car{position:absolute;right:1rem;top:50%;transform:translateY(-50%);width:12px;height:12px;pointer-events:none;
  color:var(--muted);transition:transform 260ms var(--ease);}
.csel[data-open="true"] .csel__car{transform:translateY(-50%) rotate(180deg);}
.csel__list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;background:var(--bone);
  border:2px solid var(--ink);border-radius:var(--r);max-height:264px;overflow-y:auto;list-style:none;padding:.3rem;
  box-shadow:0 22px 44px -22px rgba(18,16,14,.6);display:none;}
.csel[data-open="true"] .csel__list{display:block;}
.csel__list li{padding:.68rem .8rem;border-radius:2px;cursor:pointer;font-size:.97rem;}
.csel__list li:hover,.csel__list li[data-active="true"]{background:var(--ink);color:var(--gold-2);}
.csel__list li[aria-selected="true"]{font-weight:700;}

/* custom radio / checkbox */
.opts{display:grid;gap:.6rem;}
.opts--2{grid-template-columns:1fr;}
@media (min-width:560px){.opts--2{grid-template-columns:1fr 1fr;}}
.opt{position:relative;display:flex;align-items:flex-start;gap:.75rem;padding:.95rem 1rem;cursor:pointer;
  border:2px solid rgba(18,16,14,.2);border-radius:var(--r);background:var(--bone);transition:border-color var(--t),background var(--t),transform var(--t);}
.opt:hover{border-color:rgba(18,16,14,.42);}
.opt input{position:absolute;opacity:0;width:1px;height:1px;}
.opt__box{flex:none;width:22px;height:22px;border:2px solid rgba(18,16,14,.4);border-radius:50%;margin-top:.1rem;
  display:grid;place-items:center;transition:border-color var(--t),background var(--t);}
.opt__box::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--bone);transform:scale(0);transition:transform 200ms var(--ease);}
.opt--check .opt__box{border-radius:3px;}
.opt--check .opt__box::after{border-radius:1px;}
.opt input:checked ~ .opt__box{background:var(--ink);border-color:var(--ink);}
.opt input:checked ~ .opt__box::after{transform:scale(1);}
.opt input:checked ~ .opt__t b{color:var(--gold-ink);}
.opt:has(input:checked){border-color:var(--ink);background:var(--bone-2);}
.opt input:focus-visible ~ .opt__box{outline:3px solid var(--gold);outline-offset:2px;}
.opt__t b{display:block;font-size:.99rem;}
.opt__t span{display:block;color:var(--muted);font-size:.87rem;line-height:1.45;}

/* file input (§7b: hide native, custom trigger) */
.drop{border:2px dashed rgba(18,16,14,.3);border-radius:var(--r);padding:1.6rem 1.2rem;text-align:center;
  background:var(--bone-2);transition:border-color var(--t),background var(--t);}
.drop[data-drag="true"]{border-color:var(--gold);background:rgba(184,134,43,.09);}
.drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}
.drop svg{width:30px;height:30px;color:var(--muted);margin:0 auto .6rem;}
.drop p{margin:0 0 .9rem;color:var(--muted);font-size:.94rem;}
.files{list-style:none;display:grid;gap:.5rem;margin-top:.9rem;}
.files li{display:flex;align-items:center;gap:.7rem;background:var(--bone);border:1px solid rgba(18,16,14,.18);
  border-radius:var(--r);padding:.5rem .6rem;font-size:.88rem;}
.files img{width:44px;height:44px;object-fit:cover;border-radius:2px;flex:none;}
.files .fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.files .fs{color:var(--muted);flex:none;}
.files button{border:0;background:none;cursor:pointer;color:var(--err);font-weight:700;padding:.3rem .45rem;border-radius:2px;flex:none;}
.files button:hover{background:rgba(163,24,31,.1);}

/* steps */
.steps{display:flex;align-items:center;gap:.4rem;list-style:none;margin-bottom:1.9rem;flex-wrap:wrap;}
.steps li{display:flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);}   /* was --muted-2: 4.08 contrast, below AA at .76rem */
.steps b{width:28px;height:28px;border-radius:50%;border:2px solid rgba(18,16,14,.25);display:grid;place-items:center;
  font-size:.78rem;transition:background var(--t),border-color var(--t),color var(--t);}
.steps li[data-state="active"]{color:var(--ink);} .steps li[data-state="active"] b{background:var(--ink);border-color:var(--ink);color:var(--gold-2);}
.steps li[data-state="done"]{color:var(--muted);} .steps li[data-state="done"] b{background:var(--ink);border-color:var(--ink);color:var(--gold-2);}
/* The connector is drawn between crumbs rather than sitting in the markup as
   its own element. The two flows have different step counts and crumbs get
   hidden, so hard-coded separators would leave an orphan dash dangling after
   whichever crumb disappeared. */
.steps li + li::before{content:"";width:16px;height:2px;background:rgba(18,16,14,.2);flex:none;}
/* .steps li sets display:flex, which beats the `hidden` attribute — without
   this, crumbs excluded from the current flow stay on screen. */
.steps li[hidden]{display:none;}
.fstep{display:none;} .fstep[data-active="true"]{display:grid;gap:1.35rem;animation:stepin 340ms var(--ease);}
@keyframes stepin{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.fstep[data-active="true"]{animation:none;}}
.fnav{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;padding-top:.3rem;}
.fnav .btn{flex:1;min-width:150px;}
@media (min-width:560px){.fnav .btn{flex:0 1 auto;}}

/* turnstile holder */
.ts{display:flex;justify-content:flex-start;min-height:0;}
.ts:empty{display:none;}
.ts-note{font-size:.82rem;color:var(--muted);}

/* spinner */
.spin{width:17px;height:17px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:spin .7s linear infinite;display:none;}
.btn[data-loading="true"] .spin{display:block;}
.btn[data-loading="true"] .btxt{opacity:.75;}
@keyframes spin{to{transform:rotate(360deg);}}

/* success panel */
.sent{display:none;text-align:center;padding:clamp(2rem,5vw,3.2rem) 1.2rem;}
.sent[data-on="true"]{display:block;animation:stepin 400ms var(--ease);}
.sent__ic{width:74px;height:74px;border-radius:50%;background:var(--ink);color:var(--gold-2);display:grid;place-items:center;margin:0 auto 1.3rem;}
.sent__ic svg{width:34px;height:34px;}
.chap__list svg{width:15px;height:15px;display:inline;vertical-align:-2px;}
.spec .v svg{width:16px;height:16px;color:var(--gold-2);margin-left:auto;}
.plate--bone .spec .v svg{color:var(--ok);}

/* toast */
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:1.2rem;z-index:210;display:grid;gap:.55rem;
  width:min(92vw,420px);pointer-events:none;}
.toast{background:var(--ink);color:var(--bone);border-left:4px solid var(--gold);border-radius:var(--r);
  padding:.85rem 1.05rem;font-size:.93rem;box-shadow:0 20px 42px -20px rgba(0,0,0,.8);
  display:flex;align-items:center;gap:.65rem;animation:tin 320ms var(--ease);pointer-events:auto;}
.toast[data-kind="err"]{border-left-color:var(--err);}
.toast svg{width:18px;height:18px;flex:none;color:var(--gold-2);}
.toast[data-kind="err"] svg{color:var(--err);}
@keyframes tin{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@media (max-width:960px){.toasts{bottom:88px;}}

/* ==========================================================================
   Contact detail cards / map
   ========================================================================== */
.cinfo{display:grid;gap:1rem;}
@media (min-width:620px){.cinfo{grid-template-columns:1fr 1fr;}}
.cinfo__i{display:flex;gap:.9rem;align-items:flex-start;}
.cinfo__i svg{width:20px;height:20px;color:var(--gold-2);flex:none;margin-top:.25rem;}
.cinfo__i b{display:block;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-ink);margin-bottom:.15rem;}
.cinfo__i a,.cinfo__i span{color:var(--bone);text-decoration:none;font-size:1.02rem;font-weight:500;}
.cinfo__i a:hover{color:var(--gold-2);}
.mapwrap{border-radius:var(--r);overflow:hidden;background:var(--ink-2);aspect-ratio:16/10;}
.mapwrap iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.35) contrast(1.05);}

/* ==========================================================================
   Footer
   ========================================================================== */
.ftr{background:var(--ink);color:var(--muted-ink);padding:clamp(2.8rem,6vw,4.2rem) 0 0;position:relative;overflow:clip;}
.ftr .flourish{opacity:.22;}
.ftr__grid{display:grid;gap:2.2rem;}
@media (min-width:820px){.ftr__grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.6rem;}}
.ftr h2,.ftr h3{color:var(--bone);font-family:var(--ff-body);font-weight:700;font-size:.78rem;letter-spacing:.15em;
  text-transform:uppercase;margin-bottom:1rem;}
.ftr__logo{width:230px;height:auto;margin-bottom:1.1rem;}
.ftr p{font-size:.94rem;line-height:1.6;}
.ftr ul{list-style:none;display:grid;gap:.55rem;}
.ftr a{color:var(--muted-ink);text-decoration:none;font-size:.95rem;transition:color var(--t);}
.ftr a:hover{color:var(--gold-2);}
.ftr__soc{display:flex;gap:.6rem;margin-top:1.1rem;}
.ftr__soc a{width:42px;height:42px;border:1px solid rgba(227,180,92,.3);border-radius:var(--r);display:grid;place-items:center;
  color:var(--chrome-2);transition:border-color var(--t),color var(--t),background var(--t);}
.ftr__soc a:hover{border-color:var(--gold-2);color:var(--ink);background:var(--gold-2);}
.ftr__soc svg{width:18px;height:18px;}
.ftr__bot{margin-top:2.6rem;border-top:1px solid rgba(227,180,92,.16);padding:1.2rem 0 1.5rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;font-size:.85rem;}
.ftr__bot a{font-size:.85rem;}
.ftr__built a{color:var(--gold-2);}

/* ==========================================================================
   404
   ========================================================================== */
.e404{display:grid;place-items:center;text-align:center;padding:clamp(3rem,10vw,7rem) 0;}
.e404__n{font-family:var(--ff-display);font-weight:700;font-style:italic;font-size:clamp(5rem,21vw,13rem);line-height:.85;color:transparent;
  -webkit-text-stroke:2px var(--gold);margin-bottom:.4rem;}
.e404__links{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2rem;}
.e404__pop{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:2.4rem;}
.e404__pop a{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  border:1px solid rgba(18,16,14,.24);border-radius:var(--r);padding:.5rem .85rem;transition:background var(--t),color var(--t),border-color var(--t);}
.e404__pop a:hover{background:var(--ink);color:var(--gold-2);border-color:var(--ink);}

/* ==========================================================================
   Misc
   ========================================================================== */
.breadcrumb{font-size:.82rem;color:var(--muted);padding:1rem 0 0;}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;}
.breadcrumb a{text-decoration:none;color:var(--muted);}
.breadcrumb a:hover{color:var(--gold-ink);}
.ink-band .breadcrumb,.ink-band .breadcrumb a{color:var(--muted-ink);}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:.4rem;opacity:.5;}

.phead{padding:clamp(2.2rem,5vw,3.6rem) 0 clamp(1.6rem,4vw,2.6rem);}
/* page heads stay left-aligned with the rest of the grid; the measure lives on the text */
.phead>.wrap{max-width:var(--wrap)!important;}
.phead h1{margin-bottom:1rem;max-width:17ch;}
.phead .lead{max-width:62ch;}
.phead .plate{max-width:640px;}

.cta-band{position:relative;overflow:clip;}
.cta-band__in{display:grid;gap:1.6rem;align-items:center;}
@media (min-width:820px){.cta-band__in{grid-template-columns:1.4fr auto;gap:3rem;}}
.cta-band h2{margin-bottom:.8rem;}
.cta-band .btns{display:flex;flex-wrap:wrap;gap:.8rem;}

.cols{display:grid;gap:1.4rem;}
@media (min-width:700px){.cols--3{grid-template-columns:repeat(3,1fr);}.cols--2{grid-template-columns:repeat(2,1fr);}}

.areas{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;}
.areas a{display:inline-block;text-decoration:none;font-size:.84rem;font-weight:500;padding:.42rem .75rem;
  border:1px solid rgba(18,16,14,.2);border-radius:var(--r);color:var(--muted);transition:all var(--t);}
.areas a:hover{background:var(--ink);color:var(--gold-2);border-color:var(--ink);}
.ink-band .areas a{border-color:rgba(227,180,92,.28);color:var(--muted-ink);}
.ink-band .areas a:hover{background:var(--gold-2);color:var(--ink);border-color:var(--gold-2);}

/* ==========================================================================
   Motion — §7c
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(18px);transition:opacity 520ms var(--ease),transform 520ms var(--ease);}
  .rv.in{opacity:1;transform:none;}
  .rv-d1{transition-delay:90ms;} .rv-d2{transition-delay:180ms;} .rv-d3{transition-delay:270ms;} .rv-d4{transition-delay:360ms;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* very narrow phones: let long CTA labels wrap rather than push the page wide */
@media (max-width:420px){
  .btn{white-space:normal;text-align:center;padding-inline:1.15rem;}
  .btn svg{display:none;}
  .d3{font-size:1.42rem;}
}

/* print */
@media print{.hdr,.util,.mcta,.mnav,.ftr__soc,.cta-band{display:none!important;}body{background:#fff;}}

/* ==========================================================================
   VIDEO — projects showcase
   Three modes, because Netlify now bills bandwidth by credit (20 credits/GB):
     .facade   → poster + play, iframe injected on click (YouTube/Vimeo serve the bytes)
     .vidself  → short self-hosted clip, preload="none" so nothing loads until play
     .ambient  → tiny muted hero loop, never autoplays under prefers-reduced-motion
   ========================================================================== */

/* play badge — shared by every video affordance */
.playbadge{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,16,14,.05),rgba(18,16,14,.42));
  transition:background var(--t);
}
.playbadge i{
  width:clamp(48px,8vw,66px);aspect-ratio:1;border-radius:50%;
  background:rgba(18,16,14,.72);border:2px solid var(--gold-2);
  display:grid;place-items:center;transition:transform var(--t),background var(--t);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.8);
}
.playbadge i::after{
  content:"";width:0;height:0;margin-left:4px;
  border-left:15px solid var(--gold-2);border-top:10px solid transparent;border-bottom:10px solid transparent;
}
button:hover>.playbadge i,a:hover>.playbadge i,.media:hover .playbadge i{transform:scale(1.09);background:var(--gold);}
button:hover>.playbadge i::after,a:hover>.playbadge i::after,.media:hover .playbadge i::after{border-left-color:var(--ink);}
button:hover>.playbadge,.media:hover .playbadge{background:linear-gradient(180deg,rgba(18,16,14,.02),rgba(18,16,14,.3));}

/* duration chip */
.dur{
  position:absolute;right:.5rem;bottom:.5rem;z-index:2;
  background:rgba(18,16,14,.86);color:var(--bone);border-radius:2px;
  font-size:.7rem;font-weight:700;letter-spacing:.05em;padding:.2rem .42rem;
  font-variant-numeric:tabular-nums;pointer-events:none;
}
.kindtag{
  position:absolute;left:.5rem;top:.5rem;z-index:2;
  background:var(--ink);color:var(--gold-2);border-radius:2px;
  font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.2rem .42rem;pointer-events:none;
}

/* the gallery tile already handles layout; these just add the video affordances */
.gal li[data-kind="video"] button{position:relative;}

/* ---------- facade: external host, zero bytes until clicked ---------- */
.facade{position:relative;width:100%;margin:0;background:var(--ink-2);border-radius:var(--r);overflow:hidden;}
.facade__btn{
  display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;position:relative;
}
.facade__btn img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform 620ms var(--ease);}
.facade__btn:hover img{transform:scale(1.03);}
.facade iframe{width:100%;aspect-ratio:16/9;border:0;display:block;}
.facade figcaption{padding:.65rem .2rem 0;font-size:.86rem;color:var(--muted);}
.ink-band .facade figcaption{color:var(--muted-ink);}
.facade__host{
  position:absolute;left:.6rem;bottom:.6rem;z-index:2;font-size:.66rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--chrome-2);background:rgba(18,16,14,.72);
  padding:.2rem .45rem;border-radius:2px;pointer-events:none;
}

/* ---------- self-hosted clip ---------- */
.vidself{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink-2);}
.vidself video{width:100%;height:auto;display:block;background:var(--ink-2);}
.vidself[data-portrait="true"] video{max-height:78vh;width:auto;margin-inline:auto;}

/* ---------- ambient hero loop ---------- */
.ambient{position:absolute;inset:0;overflow:hidden;}
.ambient video{width:100%;height:100%;object-fit:cover;}
.ambient__toggle{
  position:absolute;right:.8rem;bottom:.8rem;z-index:3;
  width:42px;height:42px;border-radius:50%;border:2px solid rgba(227,180,92,.6);
  background:rgba(18,16,14,.6);color:var(--gold-2);display:grid;place-items:center;cursor:pointer;
}
.ambient__toggle:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.ambient__toggle svg{width:15px;height:15px;}
@media (prefers-reduced-motion:reduce){.ambient video{display:none;}}

/* ---------- lightbox: photo OR video ---------- */
/* Portrait 9:16 clips (all of Kohl's footage is shot on a phone) blew straight
   past max-height:100% here — the percentage never resolved against the 1fr
   stage row, so a 1080x1920 clip rendered at full height and ran off the
   bottom of the viewport. Sizing the media to fill the stage and letting
   object-fit letterbox it works for any aspect ratio, portrait or landscape. */
.lb__stage img,.lb__stage video{height:100%;width:auto;max-width:100%;max-height:100%;
  object-fit:contain;border-radius:var(--r);}
.lb__stage video{background:#000;}
.lb__stage iframe{width:min(100%,1400px);aspect-ratio:16/9;border:0;border-radius:var(--r);}
.lb__stage{width:100%;}

/* project card video badge */
.pcard__fig[data-kind="video"]{position:relative;}