/* =================================================================
   FORMWORK & Co. — own world. Warm industrial editorial.
   Mobile-first. No framework, no build step.
   ================================================================= */

/* ---------- Tokens ---------- */
:root{
  --asphalt:#161412;   /* warm charcoal ground */
  --concrete:#211E1A;  /* raised panels / hairlines */
  --cement:#C9C2B6;    /* body on dark */
  --ply:#EDE8DF;       /* light sections / paper */
  --amber:#E2531F;     /* rationed hi-vis accent — large display / drag-seam / handles / active */
  --amber-btn:#B23C12; /* darker fill behind WHITE button/spine text → white passes AA (~4.7:1) */
  --amber-press:#9b3210;
  --amber-link:#F08A5D; /* lighter amber for body-size links on charcoal (passes AA ~4.9:1) */
  --zinc:#7C7468;      /* weathered-steel mono meta — DARK SECTIONS ONLY where it's decorative */
  --zinc-rd:#9B9384;   /* readable zinc on asphalt (~4.7:1) — labels/captions that must be legible */

  --line: rgba(201,194,182,.16);   /* hairline on dark */
  --line-dark: rgba(22,20,18,.16); /* hairline on light */

  --ff-display:'Anton',Impact,sans-serif;
  --ff-wide:'Archivo Expanded','Archivo',sans-serif;
  --ff-mono:'Archivo Expanded','Archivo Narrow',sans-serif; /* industrial caps label — NOT mono */
  --ff-body:'Inter',system-ui,sans-serif;

  --spine-h: 64px; /* mobile spine height (excl. safe area) */
  --pad: clamp(20px, 5vw, 64px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{overflow-x:clip;
  background:var(--asphalt);
  color:var(--cement);
  font-family:var(--ff-body);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* keep content clear of the docked spine on mobile */
  padding-bottom: calc(var(--spine-h) + env(safe-area-inset-bottom));
}
img,picture{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }

/* ---------- Helpers ---------- */
.amber{ color:var(--amber); }
.sr-only,.skip-link{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link:focus{
  position:fixed; top:8px; left:8px; width:auto; height:auto; clip:auto;
  z-index:200; background:var(--amber); color:#fff; padding:10px 16px;
  font-family:var(--ff-mono); font-size:13px; border-radius:2px;
}
.label{
  font-family:var(--ff-wide); font-weight:700; text-transform:uppercase;
  letter-spacing:.18em; font-size:12px; color:var(--zinc-rd);
}
.label--dark{ color:#6b6358; }

/* visible focus everywhere */
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }

/* =================================================================
   HEADER STRIP
   ================================================================= */
.hdr{
  position:sticky; top:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px var(--pad);
  background:rgba(22,20,18,.92);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--line);
}
.hdr__brand{ display:flex; align-items:baseline; gap:14px; min-width:0; }
.hdr__wordmark{
  font-family:var(--ff-display); text-decoration:none; color:var(--ply);
  font-size:20px; letter-spacing:.01em; line-height:1; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.hdr__mark{ color:var(--amber); font-size:18px; }
.hdr__amp{ color:var(--zinc); margin:0 2px; }
.hdr__stamp{
  font-family:var(--ff-mono); font-size:11px; color:var(--zinc-rd);
  white-space:nowrap; display:none;
}
.hdr__right{ display:flex; align-items:center; gap:14px; }
.hdr__status{ display:none; align-items:center; gap:7px;
  font-family:var(--ff-mono); font-size:11px; color:var(--cement); }
.hdr__dot{
  width:8px; height:8px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 0 0 rgba(226,83,31,.6); animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(226,83,31,.5); }
  70%{ box-shadow:0 0 0 7px rgba(226,83,31,0); }
  100%{ box-shadow:0 0 0 0 rgba(226,83,31,0); }
}
@media (prefers-reduced-motion:reduce){ .hdr__dot{ animation:none; } }
.hdr__call{
  font-family:var(--ff-mono); font-size:13px; font-weight:600;
  color:var(--amber-link); text-decoration:none; white-space:nowrap; display:none;
}
.hdr__call:hover{ text-decoration:underline; }

.hdr__burger{
  width:42px; height:42px; background:transparent; border:1px solid var(--line);
  border-radius:3px; cursor:pointer; display:flex; flex-direction:column;
  justify-content:center; align-items:center; gap:5px; flex:none;
}
.hdr__burger span{ width:18px; height:2px; background:var(--cement);
  transition:transform .25s, opacity .2s; }
.hdr__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hdr__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Slide-down menu */
.menu{
  position:fixed; inset:0 0 auto 0; top:0; z-index:80;
  background:var(--asphalt); border-bottom:1px solid var(--line);
  padding:84px var(--pad) 28px; display:flex; flex-direction:column; gap:4px;
}
.menu[hidden]{ display:none; }
.menu a{
  font-family:var(--ff-display); font-size:clamp(40px,9vw,52px); color:var(--ply);
  text-decoration:none; padding:6px 0; letter-spacing:.01em; line-height:1.05;
  border-bottom:1px solid var(--line);
}
.menu a:hover{ color:var(--amber); }
/* CALL is a mono utility line, not an Anton display link → no 40px floor needed */
.menu__call{
  color:var(--amber-link) !important; font-family:var(--ff-mono) !important;
  font-size:15px !important; font-weight:600 !important; letter-spacing:.04em;
  border-bottom:0 !important; padding-top:18px !important;
}

/* =================================================================
   COVER HERO
   ================================================================= */
.cover{
  position:relative; isolation:isolate;
  min-height: clamp(540px, 88svh, 840px);
  display:flex; flex-direction:column; justify-content:center;
  padding: clamp(40px,9vw,80px) var(--pad) clamp(132px,26vw,150px);
  overflow:hidden;
}
.cover__media{ position:absolute; inset:0; z-index:-2; }
.cover__media img{ width:100%; height:100%; object-fit:cover; }
.cover::after{ /* warm legibility wash — mid-band lifted so --cement text
   (eyebrow/lede) always clears 4.5:1 over the bright-sky strip */
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(22,20,18,.66) 0%, rgba(22,20,18,.52) 40%, rgba(22,20,18,.60) 70%, rgba(22,20,18,.93) 100%),
    linear-gradient(90deg, rgba(22,20,18,.66) 0%, rgba(22,20,18,.12) 55%, rgba(22,20,18,0) 78%);
}
.cover__eyebrow{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.12em;
  color:var(--cement); text-transform:uppercase; margin-bottom:14px;
}
.cover__h{
  font-family:var(--ff-display); color:var(--ply);
  font-size:clamp(64px, 20vw, 168px); line-height:.84;
  letter-spacing:-.01em; text-transform:uppercase;
  text-shadow:0 2px 30px rgba(0,0,0,.4);
}
.cover__lede{
  max-width:46ch; margin-top:22px; font-size:clamp(16px,2.4vw,19px);
  color:var(--cement);
}
.cover__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--ff-wide); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:14px; text-decoration:none;
  padding:16px 26px; min-height:54px; border-radius:3px;
  transition:transform .12s ease, background .15s, color .15s;
}
.btn:active{ transform:translateY(1px); }
.btn--amber{ background:var(--amber-btn); color:#fff; }
.btn--amber:hover{ background:var(--amber-press); }
.btn--ghost{ background:transparent; color:var(--ply); border:1px solid rgba(237,232,223,.5); }
.btn--ghost:hover{ border-color:var(--ply); }
.btn--block{ width:100%; min-height:58px; font-size:15px; }

/* Title block */
.titleblock{
  position:absolute; left:var(--pad); bottom:clamp(28px,7vw,40px); z-index:1;
  display:grid; grid-template-columns:1fr; gap:0;
  font-family:var(--ff-mono); font-size:11px;
  border-left:2px solid var(--amber); padding-left:14px;
  background:rgba(22,20,18,.8); backdrop-filter:blur(3px);
}
.titleblock div{ display:flex; gap:10px; padding:3px 10px 3px 0; }
.titleblock dt{ color:var(--zinc-rd); min-width:96px; letter-spacing:.04em; }
.titleblock dd{ color:var(--cement); }

/* =================================================================
   THE LOG
   ================================================================= */
.log{ padding: clamp(48px,9vw,80px) 0 0; }
.log__head, .js__head, .caps__head, .trust__head, .quote__head{
  padding:0 var(--pad); margin-bottom: clamp(24px,5vw,36px);
}
.log__h{
  font-family:var(--ff-display); text-transform:uppercase; color:var(--ply);
  font-size:clamp(52px,15vw,120px); line-height:.86; letter-spacing:-.01em;
  margin:6px 0 14px;
}
.log__sub, .js__sub, .quote__sub{
  max-width:54ch; color:var(--cement); font-size:clamp(15px,2vw,18px);
}

.plate{ position:relative; }
.plate__media img{ width:100%; height:clamp(320px,58vw,560px); object-fit:cover; }
.plate__body{
  padding:18px var(--pad) clamp(40px,8vw,64px);
  border-bottom:1px solid var(--line);
}
/* small consistent-crop register thumb — desktop only (contact-sheet feel) */
.plate__thumb{ display:none; }
.plate__stamp{
  font-family:var(--ff-mono); font-size:12px; color:var(--zinc-rd);
  letter-spacing:.02em; margin-bottom:8px;
}
.plate__result{
  font-size:clamp(18px,3.4vw,26px); color:var(--ply); max-width:30ch;
  line-height:1.25;
}

/* material divider */
.divider{ position:relative; }
.divider img{ width:100%; height:clamp(120px,22vw,200px); object-fit:cover; filter:saturate(.85) contrast(1.05); }
.divider__tag{
  position:absolute; left:var(--pad); bottom:14px;
  font-family:var(--ff-mono); font-size:11px; color:var(--ply);
  background:rgba(22,20,18,.8); padding:4px 9px; letter-spacing:.06em;
  backdrop-filter:blur(2px);
}

/* material macro band — full-bleed texture between sections, one mono caption.
   Fills charcoal negative space with REAL material, never nothing. */
.macro{ position:relative; isolation:isolate; border-top:1px solid var(--line); }
.macro__media{ position:relative; }
.macro__media img{
  width:100%; height:clamp(150px,40vw,260px); object-fit:cover;
  filter:saturate(.82) contrast(1.06) brightness(.92);
}
.macro::after{ /* warm wash so the caption always reads */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(22,20,18,.72) 0%, rgba(22,20,18,.15) 55%, rgba(22,20,18,0) 80%);
}
.macro__cap{
  position:absolute; left:var(--pad); bottom:14px; z-index:2;
  font-family:var(--ff-mono); font-size:12px; color:var(--cement);
  letter-spacing:.06em; max-width:60ch;
}
.macro__cap b{ color:var(--ply); font-weight:500; }

/* =================================================================
   JOB SHEET
   ================================================================= */
.jobsheet{ padding: clamp(48px,9vw,80px) 0 clamp(48px,9vw,72px);
  border-top:1px solid var(--line); }
.js__h{
  font-family:var(--ff-display); text-transform:uppercase; color:var(--ply);
  font-size:clamp(40px,10vw,84px); line-height:.9; margin:6px 0 14px;
}

/* drag-reveal */
.reveal-compare{ margin: clamp(8px,3vw,20px) 0 clamp(28px,7vw,48px); }
.compare{
  position:relative; width:100%; aspect-ratio:16/10;
  overflow:hidden; background:var(--concrete);
  touch-action:pan-y;            /* allow vertical page scroll, we own horizontal */
  user-select:none; -webkit-user-select:none;
  cursor:ew-resize;
}
.compare__img{ position:absolute; inset:0; }
.compare__img img{
  width:100%; height:100%; object-fit:cover;
  pointer-events:none; -webkit-user-drag:none;
}
.compare__after{ z-index:1; }
/* BEFORE is a FULL-FRAME layer (identical box to AFTER) revealed from the left
   up to the seam (--pos) via clip-path. Because the image always occupies the
   whole frame at the same scale/crop as AFTER, it can NEVER squash and the
   visible slice sits pixel-for-pixel over AFTER — no JS measurement needed. */
.compare__before{
  position:absolute; inset:0; z-index:2;
  clip-path: inset(0 calc(100% - var(--pos,50%)) 0 0);
}
.compare__before .compare__img{ position:absolute; inset:0; }
.compare__before .compare__img img{
  width:100%; height:100%; object-fit:cover;
  pointer-events:none; -webkit-user-drag:none;
}

.compare__label{
  position:absolute; top:14px; z-index:4;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em;
  color:var(--ply); background:rgba(22,20,18,.8);
  padding:4px 10px; backdrop-filter:blur(2px);
}
.compare__label--before{ left:14px; }
.compare__label--after{ right:14px; }

.compare__handle{
  position:absolute; top:0; bottom:0; z-index:5;
  left:var(--pos,50%); width:0; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center;
}
.compare__handle::before{ /* the amber site-marking line */
  content:""; position:absolute; top:0; bottom:0; left:50%;
  width:4px; transform:translateX(-50%);
  background:var(--amber);
  box-shadow:0 0 0 1px rgba(22,20,18,.4);
}
.compare__grip{
  position:relative; z-index:1;
  width:46px; height:46px; border-radius:50%;
  background:var(--amber); border:3px solid #fff;
  box-shadow:0 4px 16px rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
}
.compare__grip::before, .compare__grip::after{
  content:""; width:0; height:0; border-block:6px solid transparent;
  position:absolute;
}
.compare__grip::before{ border-right:8px solid #fff; left:9px; }
.compare__grip::after{ border-left:8px solid #fff; right:9px; }
.compare__hint{
  position:absolute; bottom:16px;
  font-family:var(--ff-mono); font-size:11px; color:#fff;
  background:var(--amber); padding:3px 8px; letter-spacing:.06em;
  white-space:nowrap; transition:opacity .3s;
}
.compare.is-touched .compare__hint{ opacity:0; }
.compare__cap{
  font-family:var(--ff-mono); font-size:12px; color:var(--zinc-rd);
  padding:10px var(--pad) 0;
}
/* keyboard focus ring on the slider */
.compare:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; }

/* --- NO-JS FALLBACK: degrade to two stacked, labelled images ---
   html.js is set by an inline script before paint. Without JS the slider
   can't work, so we drop the clip/handle and stack both photos in flow,
   each clearly labelled (BEFORE on top, AFTER below). */
html:not(.js) .compare{
  aspect-ratio:auto; cursor:default; touch-action:auto;
  display:flex; flex-direction:column;
}
html:not(.js) .compare__before,
html:not(.js) .compare__after{
  position:relative; inset:auto; clip-path:none; width:100%;
}
html:not(.js) .compare__before{ order:1; }
html:not(.js) .compare__after{ order:2; }
html:not(.js) .compare__before .compare__img,
html:not(.js) .compare__after.compare__img{ position:relative; inset:auto; }
html:not(.js) .compare__before .compare__img img,
html:not(.js) .compare__after img{ height:auto; }
html:not(.js) .compare__handle{ display:none; }
html:not(.js) .compare__label--before{ top:14px; left:14px; }
html:not(.js) .compare__label--after{ top:auto; bottom:14px; right:14px; }

/* spec table — stacked on mobile */
.spec{ padding:0 var(--pad); }
.spec__row{
  padding:16px 0; border-top:1px solid var(--line);
  display:grid; gap:4px;
}
.spec__row:last-child{ border-bottom:1px solid var(--line); }
.spec dt{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em;
  color:var(--zinc-rd);
}
.spec dd{ font-size:clamp(16px,2.4vw,19px); color:var(--ply); }

/* =================================================================
   CAPABILITIES — spec index
   ================================================================= */
.caps{ padding: clamp(48px,9vw,72px) 0; border-top:1px solid var(--line); }
.caps__h{
  font-family:var(--ff-display); text-transform:uppercase; color:var(--ply);
  font-size:clamp(48px,13vw,104px); line-height:.86; margin-top:6px;
}
.caps__index{ list-style:none; }
.cap{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"no title" ". scope" ". from";
  column-gap:18px; row-gap:6px;
  padding:24px var(--pad);
  border-top:1px solid var(--line);
  border-left:3px solid transparent;
  transition:border-left-color .2s, background .2s;
}
.cap:last-child{ border-bottom:1px solid var(--line); }
.cap:hover{ border-left-color:var(--amber); background:var(--concrete); }
.cap__no{
  grid-area:no; font-family:var(--ff-mono); font-size:14px; color:var(--zinc-rd);
  padding-top:6px;
}
.cap__title{
  grid-area:title;
  font-family:var(--ff-display); text-transform:uppercase; color:var(--ply);
  font-size:clamp(40px,6.5vw,48px); line-height:.95; font-weight:400;
}
.cap__body{ grid-area:title; display:contents; }
.cap__scope{ grid-area:scope; color:var(--cement); max-width:52ch; }
.cap__from{
  grid-area:from; font-family:var(--ff-mono); font-size:14px; color:var(--amber-link);
  align-self:start;
}

/* =================================================================
   TRUST — light ply docket
   ================================================================= */
.trust{
  background:var(--ply); color:#2a2520;
  padding: clamp(48px,9vw,76px) 0;
}
.trust__h{
  font-family:var(--ff-display); text-transform:uppercase; color:#161412;
  font-size:clamp(46px,12vw,100px); line-height:.86; margin-top:6px;
}
.docket{ padding:0 var(--pad); }
.docket__row{
  display:grid; grid-template-columns:1fr auto; gap:14px; align-items:baseline;
  padding:13px 0; border-top:1px solid var(--line-dark);
  font-family:var(--ff-mono); font-size:13px;
}
.docket__row:last-child{ border-bottom:1px solid var(--line-dark); }
.docket dt{ display:flex; align-items:center; gap:9px; color:#4b443c; letter-spacing:.04em; }
.docket dd{ color:#161412; font-weight:500; text-align:right; }
.docket__check{ color:var(--amber-btn); font-weight:700; }
.docket__note{
  padding:14px var(--pad) 0; font-family:var(--ff-mono); font-size:12px; color:#6b6358;
}

.reviews{
  padding: clamp(32px,7vw,56px) var(--pad) 0;
  display:grid; gap:24px;
}
.review p{
  font-size:clamp(18px,3.2vw,24px); line-height:1.32; color:#161412;
  font-weight:500;
}
.review cite{
  display:block; margin-top:10px; font-family:var(--ff-mono); font-size:12px;
  font-style:normal; color:#6b6358;
}

/* =================================================================
   SAMPLE QUOTE DOCKET — the bone slab made deliberate: "here's exactly
   what a fixed quote looks like." Charcoal mono on --ply paper.
   ================================================================= */
.sample{
  background:var(--ply); color:#2a2520;
  padding: clamp(48px,9vw,76px) 0;
  border-top:1px solid var(--line);
}
.sample__head{ padding:0 var(--pad); margin-bottom:clamp(22px,4.5vw,32px); }
.sample__h{
  font-family:var(--ff-display); text-transform:uppercase; color:#161412;
  font-size:clamp(40px,11vw,92px); line-height:.88; margin-top:6px;
}
.sample__sub{ max-width:54ch; color:#4b443c; font-size:clamp(15px,2vw,18px); margin-top:12px; }

/* the docket sheet itself — a real-looking itemised quote */
.docketsheet{
  margin:0 var(--pad); max-width:760px;
  background:#fbf9f5; border:1px solid var(--line-dark);
  box-shadow:0 1px 0 rgba(22,20,18,.04), 0 18px 40px -28px rgba(22,20,18,.4);
}
.docketsheet__top{
  display:flex; flex-wrap:wrap; gap:6px 24px; justify-content:space-between;
  padding:16px 20px; border-bottom:2px solid #161412;
  font-family:var(--ff-mono); font-size:12px; color:#4b443c; letter-spacing:.04em;
}
.docketsheet__top b{ color:#161412; font-weight:600; }
.docketsheet__rows{ padding:6px 20px 4px; }
.qline{
  display:grid; grid-template-columns:1fr auto; gap:10px 18px;
  align-items:baseline; padding:13px 0; border-bottom:1px solid var(--line-dark);
  font-family:var(--ff-mono); font-size:13px;
}
.qline:last-child{ border-bottom:0; }
.qline__desc{ color:#2a2520; }
.qline__desc small{ display:block; color:#6b6358; font-size:11px; margin-top:3px; letter-spacing:.02em; }
.qline__amt{ color:#161412; font-weight:600; white-space:nowrap; }
.docketsheet__total{
  display:grid; grid-template-columns:1fr auto; gap:18px; align-items:baseline;
  padding:16px 20px; border-top:2px solid #161412;
  font-family:var(--ff-mono);
}
.docketsheet__total .qline__desc{
  font-family:var(--ff-wide); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:13px; color:#161412;
}
.docketsheet__total .qline__amt{ font-size:20px; color:#161412; }
.docketsheet__foot{
  margin:18px var(--pad) 0;
  font-family:var(--ff-mono); font-size:12px; color:#6b6358; max-width:60ch;
}
@media (min-width:760px){
  .docketsheet{ margin-left:var(--pad); }
}

/* =================================================================
   QUOTE BUILDER
   ================================================================= */
.quote{
  background:var(--concrete);
  padding: clamp(48px,9vw,72px) 0 clamp(52px,10vw,80px);
  border-top:1px solid var(--line);
}
.quote__h{
  font-family:var(--ff-display); text-transform:uppercase; color:var(--ply);
  font-size:clamp(46px,12vw,96px); line-height:.86; margin-top:6px;
}
/* =================================================================
   JOB-TYPE SELECTOR — plain tap-to-select title blocks.
   Four real <button>s in the site's mono/title language. Selected =
   amber edge + fill. No slider, no gimmick — bulletproof on touch.
   ================================================================= */
.jobpick{ padding:0 var(--pad); margin-bottom:clamp(30px,6vw,44px); }
.jobpick__label{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em;
  color:var(--zinc-rd); text-transform:uppercase; margin-bottom:14px;
}
.jobpick__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.jobtype{
  -webkit-appearance:none; appearance:none;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  min-height:72px; padding:16px 18px; text-align:left; cursor:pointer;
  background:var(--asphalt); color:var(--cement);
  border:1px solid var(--line); border-left:3px solid transparent;
  border-radius:3px; font:inherit;
  transition:border-color .15s, border-left-color .15s, background .15s, color .15s;
}
.jobtype:hover{ border-left-color:var(--zinc); background:rgba(237,232,223,.04); }
.jobtype:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.jobtype__name{
  font-family:var(--ff-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(22px,5.5vw,28px); line-height:1; letter-spacing:.01em;
  color:var(--ply);
}
.jobtype__price{
  font-family:var(--ff-mono); font-size:13px; letter-spacing:.02em;
  color:var(--amber-link);
}
.jobtype[aria-pressed="true"]{
  border-color:var(--amber-btn); border-left-color:var(--amber);
  background:rgba(178,60,18,.14);
}

.qform__h{
  font-family:var(--ff-wide); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:13px; color:var(--zinc-rd);
  margin-bottom:18px;
}

.qform{ padding:0 var(--pad); max-width:760px; }
.qform__grid{
  display:grid; grid-template-columns:1fr; gap:18px; margin-bottom:24px;
}
.field{ display:flex; flex-direction:column; gap:7px; }
.field--full{ grid-column:1/-1; }
.field label{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; color:var(--zinc-rd);
}
.field__opt{ color:var(--zinc); }
.field input, .field textarea{
  font-family:var(--ff-body); font-size:16px; color:var(--ply);
  background:var(--asphalt); border:1px solid var(--line); border-radius:3px;
  padding:14px 14px; min-height:52px; width:100%;
  transition:border-color .15s;
}
.field textarea{ resize:vertical; min-height:96px; }
.field input:focus, .field textarea:focus{
  outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:#E08A6A; }
.field input:invalid:not(:placeholder-shown){ border-color:#8a3a1a; }

.qform__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.qform__msg{
  margin-top:16px; font-family:var(--ff-mono); font-size:13px; min-height:1.2em;
}
.qform__msg.ok{ color:var(--amber-link); }
.qform__msg.err{ color:#e08a6a; }
.qform__alt{
  margin-top:14px; font-size:14px; color:var(--cement);
}
.qform__alt a{ color:var(--amber-link); font-weight:600; text-decoration:underline; }

/* =================================================================
   FOOTER
   ================================================================= */
.ftr{ padding: clamp(48px,10vw,80px) 0 0; border-top:1px solid var(--line); }
.ftr__mark{
  position:relative;
  font-family:var(--ff-display); color:var(--cement);
  font-size:clamp(72px,26vw,260px); line-height:.8; text-align:center;
  letter-spacing:.01em; overflow:hidden; white-space:nowrap;
  user-select:none;
  /* close the page with weight: near-full cement, not a faint outline */
  text-shadow:0 1px 0 rgba(22,20,18,.5);
}
/* subtle amber hairline along the wordmark's top edge — echoes the drag seam */
.ftr__mark::before{
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:min(92%, 1100px); height:2px; background:var(--amber); opacity:.85;
}
.ftr__meta{
  display:grid; grid-template-columns:1fr; gap:28px;
  padding: clamp(24px,5vw,40px) var(--pad);
  font-family:var(--ff-mono); font-size:13px; color:var(--cement);
}
.ftr__meta p{ margin:2px 0; }
.ftr__meta a{ color:var(--cement); text-decoration:none; }
.ftr__meta a:hover{ color:var(--amber-link); }
.ftr__label{ color:var(--zinc-rd); letter-spacing:.08em; margin-bottom:8px !important; }
.ftr__clock{ color:var(--amber-link); }
.ftr__base{
  display:flex; flex-direction:column; gap:6px;
  padding:20px var(--pad) calc(28px + var(--spine-h) + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  font-family:var(--ff-mono); font-size:11px; color:var(--zinc-rd);
}
.ftr__base a{ color:var(--amber-link); text-decoration:underline; }
.ftr__base a:hover{ text-decoration:underline; }

/* =================================================================
   THE QUOTE SPINE — docked bottom (mobile)
   ================================================================= */
.spine{
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  display:flex; height: calc(var(--spine-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  border-top:1px solid rgba(0,0,0,.4);
  box-shadow:0 -6px 24px rgba(0,0,0,.35);
  transition:transform .22s ease;
}
/* Mobile: when a quote-form field is focused, slide the docked spine out of
   the way so it never covers the active field / submit / on-screen keyboard.
   Restores on blur. (Desktop spine is a right rail — never overlaps fields.)
   :has() handles modern browsers; build.js mirrors it via .spine--hide for the
   rest, so the behaviour never depends on a single mechanism. */
@media (max-width:999px){
  body:has(#qform :focus) .spine{ transform:translateY(110%) !important; }
  .spine--hide{ transform:translateY(110%) !important; }
}
@media (prefers-reduced-motion:reduce){ .spine{ transition:none; } }
.spine__price{
  flex:0 0 60%; display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--amber-btn); color:#fff; text-decoration:none;
  font-family:var(--ff-wide); font-weight:700; letter-spacing:.06em; font-size:15px;
  text-transform:uppercase;
}
.spine__price:active{ background:var(--amber-press); }
.spine__arrow{ font-family:var(--ff-mono); }
.spine__call{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--asphalt); color:var(--ply); text-decoration:none;
  border-left:1px solid rgba(255,255,255,.12);
}
.spine__calltxt{ font-family:var(--ff-wide); font-weight:700; letter-spacing:.06em; font-size:14px; }
.spine__callsub{ font-family:var(--ff-mono); font-size:10px; color:var(--zinc-rd); margin-top:2px; }

/* =================================================================
   THE "TRUE" MOTIF — footer plumb-bob.
   A still hung plumb = "all true" at the close. Pure CSS, no motion.
   ================================================================= */

/* footer plumb-bob — a still hung plumb = "all true" at the close */
.ftr__plumb{
  display:flex; flex-direction:column; align-items:center; gap:0;
  padding:clamp(6px,3vw,16px) 0 clamp(20px,5vw,28px);
}
.ftr__plumb-string{ width:1px; height:clamp(30px,7vw,46px); background:var(--line); }
.ftr__plumb-bob{
  width:12px; height:18px;
  background:linear-gradient(180deg, var(--zinc-rd), var(--zinc));
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  margin-top:-1px;
  position:relative;
}
.ftr__plumb-bob::after{ /* amber tip = the true point */
  content:""; position:absolute; left:50%; bottom:-3px; transform:translateX(-50%);
  width:3px; height:3px; border-radius:50%; background:var(--amber);
}
.ftr__plumb-tag{
  margin-top:10px; font-family:var(--ff-mono); font-size:10px;
  letter-spacing:.18em; color:var(--zinc-rd);
}

/* =================================================================
   REVEALS (IntersectionObserver) — transform/opacity only
   ================================================================= */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

/* Small phones: keep header tight, show stamp once room allows */
@media (min-width:420px){
  .hdr__call{ display:inline; }
}
@media (min-width:560px){
  .hdr__stamp{ display:inline; }
  .qform__grid{ grid-template-columns:1fr 1fr; }
}

/* Tablet up */
@media (min-width:760px){
  .hdr__status{ display:inline-flex; }
  .hdr__wordmark{ font-size:24px; }

  /* job-type selector + quote form get a comfortable reading width */
  .jobpick, .qform{ max-width:820px; }
  .jobpick__grid{ grid-template-columns:repeat(4,1fr); }

  .reviews{ grid-template-columns:repeat(3,1fr); gap:28px; }
  .docket{ display:grid; grid-template-columns:1fr 1fr; column-gap:48px; }

  /* capabilities: number | title/scope | from on one row */
  .cap{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"no title from" ". scope from";
    align-items:start; padding:30px var(--pad);
  }
  .cap__from{ grid-area:from; padding-top:6px; }

  /* LOG rows become a contact-sheet: a small square crop left of the stamp */
  .plate__body{
    display:grid; grid-template-columns:auto 1fr; column-gap:24px;
    align-items:start;
  }
  .plate__thumb{
    display:block; width:84px; height:84px; flex:none;
    border:1px solid var(--line); background:var(--concrete);
    grid-row:1 / span 2;
  }
  .plate__thumb img{ width:100%; height:100%; object-fit:cover; }
  .plate__stamp{ align-self:center; }
}

/* Desktop: spine becomes a slim vertical RIGHT rail */
@media (min-width:1000px){
  body{ padding-bottom:0; }
  .ftr__base{ padding-bottom:32px; }

  .spine{
    left:auto; right:0; top:0; bottom:0; width:64px; height:100vh;
    flex-direction:column; padding-bottom:0; border-top:0;
    border-left:1px solid rgba(0,0,0,.4);
    box-shadow:-6px 0 24px rgba(0,0,0,.3);
  }
  .spine__price{
    flex:0 0 62%; writing-mode:vertical-rl; transform:rotate(180deg);
    gap:14px; font-size:16px; letter-spacing:.12em;
  }
  .spine__arrow{ transform:rotate(90deg); }
  .spine__call{ flex:1; border-left:0; border-top:1px solid rgba(255,255,255,.12);
    writing-mode:vertical-rl; transform:rotate(180deg); gap:8px; }
  .spine__callsub{ writing-mode:horizontal-tb; transform:rotate(90deg); white-space:nowrap; }

  /* clear the rail so content never sits under it */
  .hdr{ padding-right: calc(var(--pad) + 64px); }
  main, .ftr{ padding-right:64px; }
  .cover{ padding-right: calc(var(--pad) + 64px); }

  .cover__h{ font-size:clamp(110px,12vw,176px); }

  /* --- KILL THE DESKTOP VOIDS: tighten the over-generous vertical padding
     so charcoal never sits empty. Mobile clamps are already tightened. --- */
  .log{ padding-top:64px; }
  .jobsheet{ padding:64px 0 64px; }
  .caps{ padding:64px 0; }
  .trust{ padding:72px 0; }
  .sample{ padding:72px 0; }
  .quote{ padding:64px 0 72px; }
  .log__head, .js__head, .caps__head, .trust__head, .quote__head,
  .sample__head{ margin-bottom:30px; }

  /* a material macro reads better tighter than a full plate */
  .macro__media img{ height:clamp(180px,18vw,300px); }
}

/* Large desktop: roomier reading measure for log result lines */
@media (min-width:1200px){
  .plate__result{ font-size:30px; max-width:24ch; }
}