/* ============================================================
   XCALIBUR V3 — "PREMIUM ON PAPER"
   Bone ground kept. Fraunces / Inter / IBM Plex Mono / Barlow removed.
   Type: Archivo (body + wide headlines) · Michroma (labels) · Akira (package names only)
   Red under 5% of pixels: primary action, section rule, featured card, progress.
   Depth from hairlines, not shadow. Corners 0px, 2px on controls. No pills.
   ============================================================ */

@font-face{font-family:'Akira Expanded';src:url('../fonts/akira_bold-webfont.woff2') format('woff2'),url('../fonts/akira_bold-webfont.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* ---- palette (literal brand colours, names describe the colour) ---- */
  --paper:#F6F1E8;--paper-deep:#EAE4D8;--paper-line:#D8D0C0;
  --ink:#191512;--ink-soft:#675F52;--ink-faint:#8C8374;
  --red:#C1121F;--red-deep:#8E0E17;--red-on-dark:#F2333C;--white:#FFFDF9;--gold:#C9962B;--accent-soft:#E8A0A6;

  /* ---- roles (names describe the job) — INK GROUND ---- */
  --ground:#191512;      /* page background */
  --ground-2:#1F1A16;    /* banded sections */
  --surface:#221D19;     /* raised cards, inputs, nav */
  --line:#37302A;        /* borders and hairlines */
  --text:#F6F1E8;        /* headlines, primary type */
  --text-soft:#C9C0B2;   /* body copy */
  --text-faint:#A99F8F;  /* captions, meta */

  --sans:'Archivo','Helvetica Neue',Helvetica,sans-serif;
  --display:'Akira Expanded','Archivo',sans-serif;
  --label:'Michroma','Archivo',sans-serif;
  --radius:0px;--radius-ctl:2px;
  --gutter:clamp(20px,5vw,48px);
  --dur:180ms;--ease:cubic-bezier(.22,.9,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}
body{font-family:var(--sans);font-size:19px;line-height:1.6;color:var(--text);background:var(--ground);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-variant-numeric:tabular-nums}
/* height:auto matters: these tags carry width/height attributes, and without it
   the height attribute wins over any CSS aspect-ratio, so crops never applied
   and images rendered at full intrinsic height. */
img,video{max-width:100%;height:auto;display:block}
a{color:var(--text);text-decoration:none}
a:hover{color:var(--red-on-dark)}
button{font:inherit;cursor:pointer}
.container{width:min(1120px,100%);margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:clamp(72px,12vw,132px);scroll-margin-top:72px}
.sr-seo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* reveal — 16px rise, long decel, once */
.rv{opacity:0;transform:translateY(16px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ---------- type ---------- */
/* eyebrow carries the 3px red section rule — the page's structural signature */
.eyebrow{display:block;font-family:var(--label);font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--text-soft);margin-bottom:20px}
.eyebrow::before{content:"";display:block;width:40px;height:3px;background:var(--red);margin-bottom:16px}
h1,h2,h3{font-family:var(--sans);font-stretch:118%;font-weight:700;line-height:1.03;letter-spacing:-.02em}
h2{font-size:clamp(36px,6vw,60px);margin-bottom:20px;text-wrap:balance}
h2 em,h3 em{font-style:italic;font-weight:600}
.section-sub{font-size:clamp(18px,2.2vw,21px);color:var(--text-soft);max-width:36em;font-stretch:100%}

/* ---------- buttons — 2px, machined, colour-only hover ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:16px 30px;border:none;border-radius:var(--radius-ctl);font-family:var(--sans);font-size:17px;font-weight:600;font-stretch:105%;letter-spacing:.01em;text-decoration:none;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn:active{transform:scale(.985)}
.btn-red{background:var(--red);color:var(--white)}
.btn-red:hover{background:var(--red-deep);color:var(--white)}
.btn-ink{background:var(--text);color:var(--ground)}
.btn-ink:hover{background:var(--white);color:var(--ground)}
.btn-line{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn-line:hover{border-color:var(--text);color:var(--text)}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---------- wordmark ---------- */
.wm{display:block;height:30px;width:auto;color:var(--text)}
.wm-light{color:var(--ground)}
footer .wm{height:34px;margin-bottom:12px}
@media (max-width:680px){.wm{height:24px}}

/* ---------- header ---------- */
.header{position:fixed;inset-inline:0;top:0;z-index:60;padding-block:14px;transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.header.scrolled{background:rgba(25,21,18,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;padding:10px 0}
.brand-x{width:34px;height:34px;flex:none}
.brand-name{font-family:var(--sans);font-stretch:118%;font-weight:700;font-size:19px;letter-spacing:.01em}
.brand-name small{display:block;font-family:var(--label);font-size:9px;font-weight:400;letter-spacing:.22em;color:var(--text-soft);text-transform:uppercase;margin-top:3px}
.header-actions{display:flex;align-items:center;gap:10px}
.header-phone{font-weight:600;font-size:16px;white-space:nowrap;padding:12px 16px;border-radius:var(--radius-ctl);color:var(--text);display:inline-flex;align-items:center;gap:8px;min-height:48px;transition:background var(--dur) var(--ease)}
.header-phone:hover{background:var(--ground-2);color:var(--text)}
.header .btn{min-height:48px;padding:12px 22px;font-size:16px;white-space:nowrap}
@media (max-width:680px){.header-phone .hp-txt{display:none}.header-phone{padding:12px;border:1px solid var(--line);background:rgba(25,21,18,.85)}.brand-name small{display:none}}

/* ---------- hero ---------- */
/* column flex + margin-top:auto on the inner — auto margins never resolve negative, so a
   card taller than the viewport grows the section downward instead of clipping under the header */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;padding:104px 0 0;overflow:hidden;background:var(--text)}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:62%;object-fit:cover;object-position:center 32%;animation:heroDrift 24s ease-out both}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;opacity:0;transition:opacity .8s var(--ease);pointer-events:none}
.hero-video.ready{opacity:1}
/* Phones get the 720p cut, not the desktop file (see the loader). Geometry has to
   match the mobile still exactly (see the max-width:899px hero block below, which
   puts the image at height:100% and object-position:center 42%), otherwise the
   framing jumps the moment the video fades in over it. */
@media (max-width:899px){.hero-video{height:100%;object-position:center 42%}}
@keyframes heroDrift{from{transform:scale(1.06)}to{transform:scale(1)}}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(25,21,18,.34) 0%,rgba(25,21,18,0) 22%,rgba(25,21,18,0) 36%,rgba(25,21,18,.9) 56%,var(--ground) 64%,var(--ground) 100%)}
@media (min-width:900px){.hero-media img{height:100%}.hero-media::after{background:linear-gradient(to left,rgba(25,21,18,.95) 0%,rgba(25,21,18,.88) 36%,rgba(25,21,18,.35) 46%,rgba(25,21,18,0) 56%),linear-gradient(to bottom,rgba(25,21,18,.10) 0%,rgba(25,21,18,0) 20%,rgba(25,21,18,0) 70%,rgba(25,21,18,.42) 85%,rgba(25,21,18,.86) 95%,var(--ground) 100%)}.hero-card{margin-left:auto}}
.hero-inner{position:relative;z-index:2;width:100%;margin-top:auto;padding-bottom:clamp(48px,8vh,90px)}
.hero-card{max-width:600px}
.hero-eyebrow{font-family:var(--label);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text);background:var(--surface);border:1px solid var(--line);display:inline-flex;align-items:center;gap:10px;padding:11px 16px;border-radius:var(--radius-ctl);margin-bottom:26px}
.hero-eyebrow .star{color:var(--gold);letter-spacing:0}
/* the stressed word is red, not italic: Akira has no italic and red does the job at one word */
.hero-poster{font-family:var(--sans);font-stretch:114%;font-weight:800;font-size:clamp(44px,7.4vw,70px);color:var(--text);line-height:.98;letter-spacing:-.025em;text-wrap:balance;margin-bottom:22px}
.hero-poster em{font-style:normal;color:var(--red-on-dark)}
.hero-lede{font-size:clamp(19px,2.4vw,22px);color:var(--text);max-width:31em;margin-bottom:34px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:26px}
.hero-call{display:inline-block;margin-top:14px;font-size:15px;color:var(--text-soft);border-bottom:1px solid var(--line);padding-bottom:2px}
.hero-call:hover{color:var(--text);border-color:var(--text)}
.fleet-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin-bottom:26px}
.fleet-head .fleet-h2{font-size:clamp(28px,4.2vw,42px);margin-bottom:12px}
.fleet-head .section-sub{max-width:34em}
.fleet-cta{flex:none}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px 24px;font-family:var(--label);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft)}
.hero-trust span{display:inline-flex;align-items:center;gap:8px}
.hero-trust svg{flex:none;color:var(--text-faint)}
@media (max-width:899px){.hero{min-height:0;display:block;padding-top:0;background:var(--ground)}.hero-media{position:relative;height:48svh;min-height:330px}.hero-media img{height:100%;object-position:center 42%}.hero-media::after{background:linear-gradient(to bottom,rgba(25,21,18,.34) 0%,rgba(25,21,18,0) 30%,rgba(25,21,18,0) 66%,var(--ground) 98%)}.hero-inner{padding-bottom:44px}.hero-card{position:relative;margin-top:-44px}}
@media (max-width:620px){.hero-ctas .btn{width:100%}}

/* ---------- coverage strip ---------- */
.strip{padding:18px 0;border-block:1px solid var(--line);background:var(--ground);overflow:hidden;white-space:nowrap}
.strip-track{display:inline-flex;gap:48px;animation:slide 36s linear infinite;padding-left:48px}
@keyframes slide{to{transform:translateX(-50%)}}
.strip span{font-family:var(--label);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-soft)}
.strip b{color:var(--red-on-dark);font-weight:400}

/* ============================================================
   THE WORK ORDER
   ============================================================ */
.quote-section{background:var(--ground-2);position:relative}
.quote-head{text-align:center;margin-bottom:clamp(36px,6vw,64px)}
.quote-head .eyebrow::before{margin-inline:auto}
.quote-head .section-sub{margin-inline:auto}
/* the blade cut — 45° chamfer, once per view, on the page's centrepiece */
.wo{width:min(680px,100%);margin-inline:auto;background:var(--surface);border:1px solid var(--line);overflow:hidden;position:relative;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.wo::before{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--red) 0 44px,var(--text) 44px 100%)}
.wo-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px;border-bottom:1px solid var(--line);font-family:var(--label);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft)}
.wo-head b{color:var(--text);font-weight:400}
.wo-promo{color:var(--red-on-dark);display:none}
.wo-promo.on{display:inline}
.wo-progress{height:3px;background:var(--ground-2)}
.wo-progress i{display:block;height:100%;width:0%;background:var(--red);transition:width .4s var(--ease)}
.wo-stage{padding:clamp(24px,5vw,40px);min-height:380px}
.wo-q{font-family:var(--sans);font-stretch:118%;font-size:clamp(25px,4.4vw,33px);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin-bottom:6px}
.wo-hint{color:var(--text-soft);font-size:16px;margin-bottom:24px}
.wo-opts{display:grid;gap:10px}
.wo-opt{display:flex;align-items:center;gap:14px;text-align:left;width:100%;min-height:62px;padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-ctl);font-size:17.5px;font-weight:500;color:var(--text);transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.wo-opt:hover{border-color:var(--text)}
.wo-opt:active{transform:scale(.985)}
.wo-opt small{display:block;font-weight:400;color:var(--text-soft);font-size:14.5px;margin-top:2px}
.wo-opts.plates{grid-template-columns:repeat(2,1fr)}
.tk-repeat{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:15px;color:var(--text-soft)}
.tk-repeat a{color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:1px}
.tk-repeat a:hover{color:var(--text);border-color:var(--text)}
.wo-cloak{display:block;width:100%;text-align:left;background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 20%,transparent),transparent 62%);border:1px solid var(--gold);border-radius:var(--radius-ctl);padding:20px 22px;margin-bottom:14px;transition:background var(--dur) var(--ease)}
.wo-cloak:hover{background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 30%,transparent),transparent 62%)}
.wo-cloak.onx{border-width:2px;background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 34%,transparent),transparent 62%)}
.wc-tag{display:block;font-family:var(--label);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.wc-title{display:block;font-family:var(--display);font-size:clamp(22px,3.4vw,30px);text-transform:uppercase;letter-spacing:-.01em;color:var(--text);margin-bottom:8px}
.wc-lede{display:block;font-size:16px;color:var(--text);margin-bottom:14px;max-width:52ch}
.wc-list{display:grid;gap:9px;margin-bottom:16px}
.wc-list span{display:block;font-size:14.5px;color:var(--text-soft);line-height:1.45;padding-left:15px;position:relative}
.wc-list span::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--gold)}
.wc-list b{color:var(--text);font-weight:700}
.wc-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;padding-top:13px;border-top:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
.wc-price{font-size:19px;font-weight:700;color:var(--gold)}
.wc-alt{font-size:13.5px;color:var(--text-faint)}
.wc-cta{margin-left:auto;font-family:var(--label);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--text)}
.wo-fleet{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;width:100%;text-align:left;
  background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 16%,transparent),transparent 70%);
  border:1px solid var(--gold);border-radius:var(--radius-ctl);padding:16px 20px;margin-bottom:20px;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.wo-fleet:hover{background:color-mix(in srgb,var(--gold) 24%,transparent)}
.wo-fleet .wf-tag{grid-column:1;font-family:var(--label);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.wo-fleet .wf-main{grid-column:1;font-size:16px;color:var(--text);line-height:1.4}
.wo-fleet .wf-main b{font-weight:700;color:var(--gold)}
.wo-fleet .wf-go{grid-column:2;grid-row:1/3;font-family:var(--label);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);white-space:nowrap}
@media (max-width:600px){.wo-fleet{grid-template-columns:1fr}.wo-fleet .wf-go{grid-column:1;grid-row:auto;margin-top:8px}}
.wo-spec-label{font-family:var(--label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin:22px 0 10px}
/* summary carries the label styling and a chevron so it reads as openable */
summary.wo-spec-label{cursor:pointer;list-style:none;position:relative;padding:12px 26px 12px 0;margin:14px 0 0;min-height:44px;display:flex;align-items:center}
summary.wo-spec-label::-webkit-details-marker{display:none}
summary.wo-spec-label::after{content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--text-faint);border-bottom:2px solid var(--text-faint);transform:rotate(45deg);transition:transform var(--dur) var(--ease)}
.wo-spec-wrap[open] summary.wo-spec-label::after{transform:rotate(-135deg);margin-top:-2px}
.wo-spec-wrap[open] .wo-spec{margin-top:10px}
.wo-spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.wo-opt.plate{flex-direction:column;gap:6px;text-align:center;padding:16px 10px 14px;font-size:15.5px}
.wo-opt.plate img{width:100%;max-width:150px;height:auto;aspect-ratio:16/9;object-fit:contain}
@media (min-width:560px){.wo-opts.plates{grid-template-columns:repeat(4,1fr)}.wo-opt.plate img{max-width:120px}}
.wo-back{background:none;border:none;color:var(--text-soft);font-family:var(--label);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:8px 0;min-height:44px}
.wo-back:hover{color:var(--text)}
.wo-extra{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-ctl);margin-bottom:10px}
.wo-ask{width:100%;text-align:left;background:none;color:var(--text);cursor:pointer;transition:border-color var(--dur) var(--ease)}
.wo-ask:hover{border-color:var(--text)}
.wo-ask .xp{font-family:var(--label);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap}
.wo-ask:hover .xp{color:var(--text)}
.wo-extra.onx{border-color:var(--text);background:var(--ground)}
.wo-extra .xl{font-weight:600;font-size:17px;min-width:0}
.wo-extra .xl small{display:block;font-weight:400;font-size:14px;color:var(--text-soft);margin-top:2px}
.wo-extra .xp{font-size:15px;color:var(--text-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.seg{display:inline-flex;flex:none;border:1px solid var(--line);border-radius:var(--radius-ctl);overflow:hidden}
.seg button{border:none;background:none;padding:10px 16px;font-family:var(--label);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);min-height:44px;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.seg button.on{background:var(--text);color:var(--ground)}
.wo-run[hidden]{display:none}
.wo-run{position:sticky;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 24px;background:var(--ground);border-top:1px solid var(--line);font-family:var(--label);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.wo-run b{font-family:var(--sans);font-size:22px;font-weight:700;letter-spacing:0;color:var(--text);font-variant-numeric:tabular-nums}

/* ---------- the ticket ---------- */
.tk{font-family:var(--sans);font-variant-numeric:tabular-nums}
.tk-head{text-align:center;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:22px}
.tk-head .tk-brand{font-family:var(--label);font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.tk-head .tk-meta{font-family:var(--label);font-size:9.5px;color:var(--text-soft);margin-top:8px;letter-spacing:.16em;text-transform:uppercase}
/* Akira lives here: the Arthurian package names, as model designations */
.tk-pkg{text-align:center;margin-bottom:12px;font-family:var(--display);font-size:clamp(24px,4.4vw,34px);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.04}
.tk-tag{text-align:center;color:var(--text-soft);font-size:16px;margin-bottom:6px}
.tk-why{text-align:center;font-size:15px;color:var(--text-soft);max-width:30em;margin:0 auto 22px}
.tk-lines{border-top:1px solid var(--line);padding-top:16px;margin-bottom:16px}
.tk-line{display:flex;justify-content:space-between;gap:16px;font-size:15.5px;padding:7px 0}
.tk-line .l{color:var(--text-soft)}
.tk-line .r{font-weight:600;white-space:nowrap}
.tk-line.free .r{color:var(--red-on-dark)}
.tk-line.disc .l,.tk-line.disc .r{color:var(--red-on-dark);font-weight:600}
.tk-total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--text);padding-top:14px;margin-bottom:8px}
.tk-total .l{font-family:var(--label);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
.tk-total .r{font-size:clamp(38px,7vw,48px);font-weight:800;font-stretch:118%;letter-spacing:-.03em}
.tk-note{font-size:14px;color:var(--text-soft);margin-bottom:20px}
.tk-confirms{font-size:14.5px;color:var(--text-soft);background:var(--ground);border:1px solid var(--line);padding:14px 18px;margin-bottom:20px}
.tk-confirms li{margin-left:18px;padding:2px 0}
.tk-ctas{display:grid;gap:10px}
.tk-ctas .btn{width:100%}
.tk-alt{text-align:center;font-size:15px;color:var(--text-soft);margin-top:4px}
.tk-alt a{color:var(--red-on-dark);font-weight:600;display:inline-block;padding:10px 4px}
.tk-vets{text-align:center;font-family:var(--label);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);margin-top:12px;display:none}
.tk-vets.on{display:block}
/* stamp: mechanical settle, no bounce past 1 */
.stamp-wrap{position:relative}
.stamp{position:absolute;top:10px;right:2px;z-index:3;background:var(--surface);font-family:var(--label);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--red-on-dark);border:2px solid var(--red-on-dark);padding:9px 14px;transform:rotate(-8deg);opacity:0}
.stamp.slam{animation:slam .34s var(--ease) .3s both}
@keyframes slam{0%{opacity:0;transform:rotate(-8deg) scale(1.5)}100%{opacity:.92;transform:rotate(-8deg) scale(1)}}

/* ============================================================
   PROOF
   ============================================================ */
.ba-section{background:var(--ground)}
.ba-grid{display:grid;gap:clamp(24px,4vw,48px);align-items:center}
@media (min-width:900px){.ba-grid{grid-template-columns:1fr 1fr}}
.ba{position:relative;overflow:hidden;aspect-ratio:4/3;user-select:none;touch-action:none;cursor:ew-resize}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .after-img{clip-path:inset(0 0 0 50%)}
.ba-bar{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--surface);transform:translateX(-50%);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--surface);color:var(--text);display:flex;align-items:center;justify-content:center;gap:2px;pointer-events:none;font-size:13px;font-weight:700}
.ba-label{position:absolute;bottom:14px;font-family:var(--label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;background:rgba(25,21,18,.72);color:var(--white);padding:7px 12px;pointer-events:none}
.ba-label.before{left:14px}
.ba-label.after{right:14px}
.ba-copy h2{max-width:9em}
.ba-copy .drag-cue{display:inline-flex;align-items:center;gap:10px;font-family:var(--label);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);margin-top:20px}

/* photo band */
.band{padding:0}
.band-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gutter) 18px;-webkit-overflow-scrolling:touch}
.band-track::-webkit-scrollbar{display:none}
.band-item{flex:0 0 78%;max-width:420px;scroll-snap-align:center;overflow:hidden;position:relative;aspect-ratio:4/5}
@media (min-width:700px){.band-item{flex-basis:32%}}
.band-item img{width:100%;height:100%;object-fit:cover}
.band-item figcaption{position:absolute;left:0;bottom:0;font-family:var(--label);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;background:var(--ground);padding:8px 14px}

/* reviews — dark band */
.reviews-section{background:var(--ground-2);color:var(--text-soft)}
.reviews-section .eyebrow{color:var(--accent-soft)}
.reviews-section h2{color:var(--text)}
.reviews-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:clamp(28px,5vw,48px)}
.rv-score{font-family:var(--label);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dark-meta);line-height:1.9}
.rv-score b{font-family:var(--sans);font-stretch:118%;font-size:38px;font-weight:800;letter-spacing:-.03em;margin-right:10px;color:var(--text)}
.rv-score .stars{color:var(--gold);letter-spacing:2px;font-size:15px}
.rv-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;-webkit-overflow-scrolling:touch}
.rv-track::-webkit-scrollbar{display:none}
.rv-card{flex:0 0 86%;max-width:400px;scroll-snap-align:start;background:var(--dark-card);border:1px solid var(--dark-line);padding:26px;display:flex;flex-direction:column;gap:14px}
@media (min-width:760px){.rv-card{flex-basis:44%}}
@media (min-width:1080px){.rv-card{flex-basis:31%}}
.rv-card .stars{color:var(--gold);letter-spacing:3px;font-size:13px}
.rv-card blockquote{font-size:16.5px;line-height:1.55;color:#EDE7DC}
.rv-card figcaption{font-family:var(--label);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dark-meta);margin-top:auto;line-height:1.8}
.rv-card figcaption b{color:var(--text);font-weight:400}
.rv-more{margin-top:22px}
.rv-more a{color:var(--text);font-weight:600;font-size:16px;display:inline-block;padding:12px 6px;border-bottom:1px solid var(--dark-line)}
.rv-more a:hover{color:var(--white);border-color:var(--red-on-dark)}
.fleet{border-top:1px solid var(--dark-line);margin-top:clamp(36px,6vw,60px);padding-top:clamp(28px,5vw,44px)}
.fleet-label{font-family:var(--label);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dark-meta);margin-bottom:20px}
.fleet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:760px){.fleet-grid{grid-template-columns:repeat(4,1fr)}}
.fleet-card{position:relative;overflow:hidden;aspect-ratio:4/3}
.fleet-card img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.fleet-card span{position:absolute;left:0;bottom:0;font-family:var(--label);font-size:9px;letter-spacing:.14em;text-transform:uppercase;background:rgba(25,21,18,.82);color:var(--text);padding:7px 11px}

/* chuck */
.chuck-grid{display:grid;gap:clamp(28px,5vw,64px);align-items:center}
@media (min-width:900px){.chuck-grid{grid-template-columns:5fr 6fr}}
.chuck-photo{overflow:hidden;position:relative}
.chuck-photo img{aspect-ratio:4/5;object-fit:cover;object-position:center 25%;width:100%}
/* 4:5 at full width is ~490px tall on a phone, which showed him down to the knees
   and ate the screen. A landscape crop holds the face and gives the page back. */
@media (max-width:899px){.chuck-photo img{aspect-ratio:16/10;object-position:center 20%}}
.chuck-photo figcaption{position:absolute;left:0;bottom:0;font-family:var(--label);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;background:var(--ground);padding:9px 14px}
.chuck-copy p{margin-bottom:18px;font-size:clamp(18px,2.1vw,20px)}
.chuck-copy .sig{font-family:var(--sans);font-stretch:118%;font-weight:700;font-size:24px;letter-spacing:-.02em;margin-top:26px}
.chuck-copy .sig small{display:block;font-family:var(--label);font-weight:400;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-soft);margin-top:10px}
.chuck-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chuck-facts span{font-family:var(--label);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);border-radius:var(--radius-ctl);padding:9px 13px;color:var(--text-soft)}

/* ---------- packages ---------- */
.pk-section{background:var(--ground-2)}
.pk-section .eyebrow::before{margin-inline:auto}
.pk-grid{display:grid;gap:16px;margin-top:clamp(32px,5vw,56px)}
@media (min-width:800px){.pk-grid{grid-template-columns:repeat(2,1fr)}}
/* Phones got five tall cards stacked, which buried the prices under a long scroll.
   Below 800px they become one swipeable row instead. Cards sit at 86% so the next
   one always peeks in from the right: that peek IS the "there is more" signal.
   Full-bleed via the negative inline margin so the row runs edge to edge, and
   padding-top leaves room for .pk-badge, which hangs above the card. */
/* Phone-only affordances. Declared BEFORE the max-width block on purpose: these
   and the mobile rules have equal specificity, so whichever comes last wins, and
   sitting after it switched them straight back off on phones. */
.pk-more-btn{display:none}
.pk-swipe{display:none;margin-top:14px;font-family:var(--label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
.pk-swipe::after{content:" \2192";color:var(--red-on-dark)}
@media (max-width:799px){
  .pk-grid{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    margin-inline:calc(50% - 50vw);
    padding:20px var(--gutter) 18px;
    scroll-padding-inline:var(--gutter);
    scrollbar-width:none;
    /* without this every card stretches to the tallest one, so a four-bullet
       package was as long as the nine-bullet one */
    align-items:start;
  }
  .pk-grid::-webkit-scrollbar{display:none}
  .pk{flex:0 0 86%;max-width:400px;scroll-snap-align:start}
  .pk-swipe{display:block}

  /* Cards ran well over a phone screen, so a single package needed its own
     scroll. Tightened padding, price and list rhythm. Copy is untouched. */
  .pk{padding:18px 18px 18px}
  .pk h3{font-size:20px}
  .pk .pk-tag{font-size:14px;margin:6px 0 10px;line-height:1.35}
  .pk .pk-price{margin-bottom:10px;gap:8px}
  .pk .pk-price b{font-size:28px}
  .pk ul{margin-bottom:14px}
  .pk li{padding:3px 0 3px 20px;font-size:14.5px;line-height:1.38}
  .pk li::before{top:9px;width:10px;height:10px}
  .pk li.note{font-size:13px;margin-top:7px;padding-top:8px;line-height:1.4}
  .pk-badge{top:-10px;left:16px;font-size:8.5px;padding:5px 9px}
  .pk .btn{min-height:50px}
  /* long packages get capped at five lines with the rest behind a toggle, so a
     card always fits a phone screen instead of running past the button */
  .pk ul.pk-more > li:nth-child(n+6){display:none}
  .pk ul.pk-more.open > li{display:block}
  .pk-more-btn{display:block;width:100%;text-align:left;background:none;border:0;padding:2px 0 12px 20px;margin:-8px 0 0;font-family:var(--label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);min-height:40px}
  .pk-more-btn:hover{color:var(--red-on-dark)}
}
@media (min-width:1100px){.pk-grid{grid-template-columns:repeat(3,1fr)}}
.pk{background:var(--surface);border:1px solid var(--line);padding:30px 28px 26px;display:flex;flex-direction:column;position:relative;transition:border-color var(--dur) var(--ease)}
.pk:hover{border-color:var(--text)}
/* the featured card carries a hard offset, not a glow — the flyer's poster language */
.pk.feat{border:1px solid var(--text);box-shadow:8px 8px 0 var(--red)}
.pk.feat:hover{border-color:var(--text)}
.pk-badge{position:absolute;top:-13px;left:26px;background:var(--red);color:var(--white);font-family:var(--label);font-size:9px;letter-spacing:.18em;text-transform:uppercase;padding:7px 12px}
.pk-badge.gold{background:var(--gold);color:var(--ink)}
.pk.cloak{overflow:hidden}
.cloak-rain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.75}
.pk.cloak>*:not(.cloak-rain){position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.cloak-rain{display:none}}
.pk.cloak{border-color:var(--gold)}
.pk.cloak .pk-price b{color:var(--gold)}
/* seasonal band: Merlin's Cloak */
.cloak-band{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border:1px solid var(--gold);border-radius:var(--radius-ctl);padding:16px 20px;margin-bottom:26px;background:var(--surface)}
.cloak-band .cb-tag{font-family:var(--label);font-size:9px;letter-spacing:.18em;text-transform:uppercase;background:var(--gold);color:var(--ink);padding:7px 12px;white-space:nowrap}
.cloak-band .cb-text{font-size:16px;color:var(--text-soft);margin:0;flex:1 1 320px}
.cloak-band .cb-text strong{color:var(--text)}
.cloak-band .cb-link{font-family:var(--label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);white-space:nowrap;border-bottom:1px solid var(--gold);padding-bottom:2px}
.cloak-band .cb-link:hover{color:var(--text);border-color:var(--text)}
/* seasonal popup */
.mc-pop{position:fixed;inset:0;z-index:90;background:rgba(25,21,18,.72);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px}
.mc-pop[hidden]{display:none}
.mc-pop-card{position:relative;max-width:520px;width:100%;background:var(--surface);border:1px solid var(--gold);border-radius:var(--radius-ctl);padding:34px 32px 30px}
.mc-pop-x{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--text-faint);font-size:26px;line-height:1;padding:8px;min-height:44px;min-width:44px}
.mc-pop-x:hover{color:var(--text)}
.mc-pop-eyebrow{font-family:var(--label);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.mc-pop-title{font-family:var(--display);font-size:clamp(26px,4vw,34px);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:12px}
.mc-pop-body{font-size:16px;color:var(--text-soft);margin-bottom:22px}
.mc-pop-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (prefers-reduced-motion:no-preference){.mc-pop-card{animation:mcIn .3s var(--ease) both}@keyframes mcIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}}
.pk h3{font-family:var(--display);font-size:clamp(24px,2.4vw,27px);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.06;font-stretch:100%}
.pk .pk-tag{color:var(--text-soft);font-size:15.5px;margin:10px 0 16px}
.pk .pk-price{font-family:var(--label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);margin-bottom:18px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pk .pk-price b{font-family:var(--sans);font-stretch:118%;font-size:42px;font-weight:800;letter-spacing:-.03em;color:var(--text)}
.pk ul{list-style:none;margin-bottom:20px}
.pk li{padding:6px 0 6px 24px;position:relative;font-size:16px;color:var(--text)}
.pk li::before{content:"";position:absolute;left:0;top:14px;width:12px;height:12px;background:var(--text);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='4'/%3E%3C/svg%3E") center/contain no-repeat}
.pk li.note{color:var(--text-soft);font-size:14px;padding-left:0;border-top:1px solid var(--line);margin-top:10px;padding-top:12px}
.pk li.note::before{display:none}
.pk-book{margin-top:auto}
.pk-book>.btn{width:100%}
.pk-sizes{display:none;gap:8px;margin-top:8px}
.pk-sizes.open{display:grid}
.pk-sizes a{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:var(--radius-ctl);padding:13px 16px;font-weight:600;font-size:16px;min-height:52px;transition:border-color var(--dur) var(--ease)}
.pk-sizes a:hover{border-color:var(--text);color:var(--text)}
.pk-sizes a span:last-child{font-family:var(--label);font-size:11px;letter-spacing:.08em;color:var(--text-soft)}
.pk-quiz-nudge{text-align:center;margin-top:28px;color:var(--text-soft)}
.pk-quiz-nudge a{color:var(--red-on-dark);font-weight:600;display:inline-block;padding:10px 6px}
/* add-on strip: the menu that stacks onto a package */
.addons{background:var(--surface);border:1px solid var(--line);padding:clamp(24px,3.4vw,34px) clamp(22px,3vw,32px);margin-top:16px}
.addons-title{font-family:var(--display);font-size:clamp(20px,2.1vw,24px);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.06;font-stretch:100%;margin-bottom:22px}
.addons-list{list-style:none;display:grid}
@media (min-width:900px){.addons-list{grid-template-columns:repeat(2,1fr);column-gap:36px}}
.addons-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:14px;padding:16px 0;border-top:1px solid var(--line)}
.addons-list li:first-child{border-top:none;padding-top:0}
@media (min-width:900px){.addons-list li:nth-child(2){border-top:none;padding-top:0}}
.ao-name{font-weight:600;font-size:17px}
.ao-price{font-family:var(--label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
/* a two-part price ("$50 one · $100 pair") cannot fit beside the name on a phone,
   and nowrap made it push straight out of the card. Let it wrap under 560px. */
@media (max-width:560px){.ao-price{white-space:normal;text-align:right;max-width:42vw}}
/* Each add-on is a tappable row: the name and price are always visible so the
   menu scans at a glance, and the explanation opens on demand rather than
   stacking four paragraphs of body copy on a phone. */
.addons-list li{padding:0}
.ao{border:0}
.ao>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:14px;padding:16px 26px 16px 0;cursor:pointer;position:relative;list-style:none;min-height:44px}
.ao>summary::-webkit-details-marker{display:none}
.ao>summary::after{content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;margin-top:-6px;border-right:2px solid var(--text-faint);border-bottom:2px solid var(--text-faint);transform:rotate(45deg);transition:transform var(--dur) var(--ease)}
.ao[open]>summary::after{transform:rotate(-135deg);margin-top:-2px}
.ao>summary:hover .ao-name{color:var(--red-on-dark)}
.ao-note{font-size:15px;color:var(--text-soft);margin:0 0 16px;padding-right:26px}
.addons-fine{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:15px;font-style:italic;color:var(--text-soft)}
/* standalone service line item: sold on its own, not stacked onto a package */
.solo{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--red);padding:clamp(24px,3.2vw,30px) clamp(22px,3vw,32px);margin-top:16px}
.solo-eyebrow{font-family:var(--label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-soft);margin-bottom:14px}
.solo-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.solo-name{font-family:var(--display);font-size:clamp(19px,2vw,23px);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.1;font-stretch:100%}
.solo-price{font-family:var(--sans);font-stretch:118%;font-size:36px;font-weight:800;letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums}
.solo-note{color:var(--text-soft);font-size:16px;margin:12px 0 20px;max-width:62ch}
@media (max-width:560px){.solo .btn{width:100%}}

/* ---------- process ---------- */
.proc-grid{display:grid;gap:clamp(28px,5vw,56px);align-items:center}
@media (min-width:940px){.proc-grid{grid-template-columns:6fr 5fr}}
.proc-steps{display:grid;gap:0;margin-top:12px}
.proc-step{display:flex;gap:22px;padding:22px 0;border-bottom:1px solid var(--line)}
.proc-step:last-child{border-bottom:none}
.proc-num{font-family:var(--label);font-size:11px;letter-spacing:.1em;color:var(--text-faint);flex:none;width:38px;padding-top:6px}
.proc-step h3{font-family:var(--sans);font-stretch:112%;font-size:20px;font-weight:700;letter-spacing:-.015em;margin-bottom:6px}
.proc-step p{color:var(--text-soft);font-size:16.5px}
.proc-video{overflow:hidden;position:relative;aspect-ratio:4/5;background:var(--text)}
.proc-video video,.proc-video img{width:100%;height:100%;object-fit:cover}
.proc-video .play{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;background:rgba(25,21,18,.94);border:none;display:flex;align-items:center;justify-content:center;transition:background var(--dur) var(--ease)}
.proc-video .play:hover{background:var(--surface)}
.proc-video .play svg{margin-left:4px}

/* ---------- faq ---------- */
.faq-wrap{max-width:760px;margin-inline:auto;margin-top:clamp(28px,5vw,48px);border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 4px;cursor:pointer;font-family:var(--sans);font-stretch:112%;font-weight:700;font-size:clamp(17px,2.2vw,19px);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{flex:none;width:30px;height:30px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:400;transition:transform .25s var(--ease),border-color var(--dur) var(--ease)}
.faq[open] summary .ic{transform:rotate(45deg);border-color:var(--red-on-dark);color:var(--red-on-dark)}
.faq p{padding:0 4px 24px;color:var(--text-soft);max-width:60ch;font-size:17px}

/* ---------- finale ---------- */
.finale{background:var(--paper);color:var(--ink);text-align:center;position:relative;overflow:hidden}
.finale .bg-x{position:absolute;inset:-20% -30% auto auto;width:70vw;max-width:900px;opacity:.05;pointer-events:none}
.finale .eyebrow{color:rgba(25,21,18,.6)}
.finale .eyebrow::before{margin-inline:auto}
.finale h2{color:var(--ink);font-size:clamp(40px,7.6vw,78px);max-width:11em;margin-inline:auto;position:relative;z-index:1}
.finale h2 em{font-style:normal;color:var(--red)}
.finale p{color:var(--ink-soft);max-width:34em;margin:0 auto 36px;font-size:clamp(18px,2.2vw,21px);position:relative;z-index:1}
.finale-ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;position:relative;z-index:1}
.finale .btn-line{border-color:var(--paper-line);color:var(--ink)}
.finale .btn-line:hover{border-color:var(--ink);color:var(--ink)}
@media (max-width:620px){.finale-ctas .btn{width:100%}}
.finale-meta{margin-top:34px;font-family:var(--label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);position:relative;z-index:1}

/* ---------- footer ---------- */
footer{background:var(--ground-2);color:var(--text-faint);border-top:1px solid var(--dark-line);padding:56px 0 110px;font-size:15px}
.foot-grid{display:grid;gap:32px}
@media (min-width:800px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
footer h4{font-family:var(--label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text);margin-bottom:16px;font-weight:400}
footer a{color:var(--text-soft);display:block;padding:10px 0}
footer a:hover{color:var(--text)}
.foot-brand p{max-width:30em;margin-top:12px}
.foot-legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--dark-line);display:flex;flex-wrap:wrap;gap:10px 24px;font-family:var(--label);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.foot-legal a{display:inline-block;padding:8px 2px}

/* ---------- sticky mobile dock ---------- */
.dockbar{position:fixed;inset-inline:0;bottom:0;z-index:70;display:flex;gap:10px;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));background:rgba(25,21,18,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .35s var(--ease)}
.dockbar.show{transform:none}
.dockbar .btn{flex:1;min-height:54px;font-size:16px;padding-inline:10px}
@media (min-width:900px){.dockbar{display:none}}

/* ---- Mobile header fit fix, 2026-08-20 ----
   At 375px the header row has a 335px content box, but brand (152) + gap (16)
   + actions (198) needed 366px. Nothing shrank (btn is white-space:nowrap,
   actions is flex-wrap:nowrap), so the primary "Get my price" CTA overflowed
   to x=386 and was clipped 11px. It did not show as a horizontal scrollbar
   because body{overflow-x:hidden} was swallowing it. Trimming the wordmark,
   the button padding and the row gap brings the row inside the box. */
@media (max-width:420px){
  .wm{height:21px}
  .header-row{gap:10px}
  .header .btn{padding:12px 15px;font-size:15px}
  .header-phone{padding:12px 11px}
}

/* ---------- bone texture on the ink ground ----------
   Option A, the fine pinstripe. Bone is held at 7% over a 10px repeat so it
   reads as material, never as pattern: type and buttons stay the loudest
   thing on the panel. Raise the alpha past ~.12 and it starts competing. */
.quote-section,.reviews-section,footer{
  background-image:repeating-linear-gradient(90deg,rgba(246,241,232,.07) 0 1px,transparent 1px 10px);
}
/* the closing panel is the one bone field on the site, so it gets the
   inverse: ink pinstripe on bone, same weight. */
.finale{
  background-image:repeating-linear-gradient(90deg,rgba(25,21,18,.06) 0 1px,transparent 1px 10px);
}

/* ---------- small layout utilities ----------
   These replace the last inline style attributes on the homepage. Declared last
   so they win over same-specificity component rules; the two .u-medium variants
   are scoped because .tk-line .r and .tk-alt a set font-weight at higher weight. */
.u-center{text-align:center}
.u-mi-auto{margin-inline:auto}
.u-pad-center{padding:28px;text-align:center}
.u-pt-0{padding-top:0}
.u-mt-10{margin-top:10px}
.foot-brand p.u-mt-10{margin-top:10px}
.u-mt-14{margin-top:14px}
.u-mt-22{margin-top:22px}
.u-w-full{width:100%}
.u-semibold{font-weight:600}
.u-half-em{font-size:.5em}
.u-medium{font-weight:500}
.tk-line .r.u-medium{font-weight:500}
.tk-alt a.u-medium{font-weight:500}


/* ============================================================
   MOBILE READING ORDER
   On a phone the package menu sat seventh, roughly eight screens down, behind
   the proof strip, the photo band, the reviews and the bio. Someone who wants a
   price should not have to scroll past all of that. Below 800px the packages
   move up directly behind the quote builder; the persuasion sections follow.
   DOM order is unchanged, so this does not affect crawling or the desktop view.
   ============================================================ */
@media (max-width:799px){
  body{display:flex;flex-direction:column}
  body > *{order:5}
  #topbar{order:0}
  #top{order:1}
  .strip{order:2}
  #quiz{order:3}
  #pricing{order:4}
  #proof{order:6}
  .band{order:7}
  #reviews{order:8}
  #about{order:9}
  #process{order:10}
  #faq{order:11}
  #book{order:12}
  footer{order:13}
}