/* ============================================================
   GRAVEL GIRL — committed single-theme dark.
   Roadside neon: warm near-black ground, chrome trim, hot neon,
   hazard amber. Every color painted explicitly.
   ============================================================ */
:root{
  --ink:      #100C0A;
  --ink-2:    #191311;
  --ink-3:    #221A16;
  --line:     #392C27;
  --line-2:   #4C3A33;

  --hot:      #FF2E5E;
  --hot-deep: #B5123E;
  --hot-glow: rgba(255,46,94,.30);

  --amber:    #FFB627;

  --chrome:   #D7DBE0;
  --dust:     #A79A90;
  --dust-2:   #7A6E66;

  --step--1: .78rem;
  --step-0:  1rem;
  --step-1:  1.2rem;
  --step-2:  1.6rem;
  --step-3:  clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  --step-4:  clamp(2.4rem, 1.3rem + 4.8vw, 5rem);

  --pad: clamp(3rem, 5vw, 5.5rem);
  --gut: clamp(1.1rem, 4vw, 2.5rem);
  --max: 1180px;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--ink);
  color:var(--chrome);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{margin:0;text-wrap:balance;line-height:.96;letter-spacing:.005em}
p{margin:0}
a{color:inherit}

:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* ---- shared type roles ---- */
.poster{font-family:"Anton","Arial Narrow",Impact,sans-serif;font-weight:400;text-transform:uppercase}
.script{font-family:"Yellowtail",cursive;font-weight:400;line-height:1}
.mono{font-family:"DM Mono",ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}

.eyebrow{
  font-family:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:var(--step--1);letter-spacing:.22em;text-transform:uppercase;
  color:var(--hot);margin:0 0 .9rem;
}
.eyebrow.amber{color:var(--amber)}
.lede{color:var(--dust);max-width:64ch}

/* ---- hazard stripe divider ---- */
.stripe{height:13px;background:repeating-linear-gradient(115deg,var(--amber) 0 16px,var(--ink) 16px 32px)}
.stripe.thin{height:7px;opacity:.85}

/* ============ TOP BAR ============ */
.topbar{
  background:var(--hot-deep);color:#FFE8EE;
  font-family:"DM Mono",ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;justify-content:center;padding-block:.55rem;text-align:center}
.topbar a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)}

/* ============ NAV ============ */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(16,12,10,.93);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;gap:1.4rem;padding-block:.8rem}
.brand{display:flex;align-items:baseline;gap:.75rem;text-decoration:none;margin-right:auto}
.brand .script{font-size:1.85rem;color:var(--hot);text-shadow:0 0 22px var(--hot-glow)}
.brand .tag{
  font-family:"DM Mono",monospace;font-size:.6rem;letter-spacing:.2em;
  color:var(--dust-2);text-transform:uppercase;display:none;
}
.navlinks{display:none;gap:1.5rem;align-items:center}
.navlinks a{
  white-space:nowrap;
  text-decoration:none;color:var(--dust);
  font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
}
.navlinks a:hover{color:var(--chrome)}

.btn{
  white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:"Anton",Impact,sans-serif;text-transform:uppercase;letter-spacing:.06em;
  padding:.72rem 1.3rem;border-radius:2px;text-decoration:none;border:0;cursor:pointer;
  font-size:.95rem;line-height:1;transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-hot{background:var(--hot);color:#180208}
.btn-hot:hover{background:#FF4B73;box-shadow:0 6px 26px var(--hot-glow);transform:translateY(-1px)}
.btn-amber{background:var(--amber);color:#1A1204}
.btn-amber:hover{background:#FFC64F;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--chrome);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--hot);color:var(--hot)}
.btn-wide{width:100%;padding-block:1rem;font-size:1.15rem}

@media (min-width:1080px){
  .navlinks{display:flex}
  .brand .tag{display:block}
}

/* ============ HERO ============ */
.hero{position:relative;overflow:hidden;padding-block:var(--pad) calc(var(--pad) * .8)}
.hero::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:70%;
  background:radial-gradient(60% 70% at 22% 40%, rgba(255,46,94,.16), transparent 70%);
  pointer-events:none;
}
.hero .wrap{position:relative;display:grid;gap:clamp(2.4rem,5vw,4rem);align-items:start}
@media (min-width:980px){ .hero .wrap{grid-template-columns:1.05fr .95fr} }

.hero-script{
  font-size:clamp(3.2rem,2rem + 6.4vw,6rem);color:var(--hot);
  text-shadow:0 0 40px var(--hot-glow);margin-bottom:-.12em;display:block;
}
.hero h1{font-size:var(--step-4);color:var(--chrome);margin-block:.15em .6rem}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero .lede{font-size:var(--step-1);margin-bottom:1.6rem}

.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2rem}

.badges{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{
  font-family:"DM Mono",monospace;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dust);border:1px solid var(--line);background:var(--ink-2);
  padding:.4rem .7rem;border-radius:99px;
}
.pill b{color:var(--amber);font-weight:500}

/* ============ TICKET (quote calculator) ============ */
.ticket{
  background:var(--ink-2);border:1px solid var(--line-2);border-radius:3px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  font-family:"DM Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;
  overflow:hidden;
}
.ticket-head{
  background:var(--amber);color:#1A1204;
  padding:.7rem 1.1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
}
.ticket-head strong{font-family:"Anton",Impact,sans-serif;letter-spacing:.08em;font-size:.95rem;font-weight:400}
.ticket-body{padding:1.1rem 1.1rem 1.3rem;display:flex;flex-direction:column;gap:.85rem}

.field{display:flex;flex-direction:column;gap:.32rem}
.field > span{font-size:.65rem;letter-spacing:.17em;text-transform:uppercase;color:var(--dust-2)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.7rem}
.measure{border:1px dashed var(--line-2);border-radius:2px;background:var(--ink)}
.measure summary{cursor:pointer;list-style:none;padding:.6rem .7rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dust);display:flex;align-items:center;gap:.5rem}
.measure summary::-webkit-details-marker{display:none}
.measure summary::after{content:"+";margin-left:auto;color:var(--hot);font-size:1.15rem;line-height:1}
.measure[open] summary::after{content:"\2013"}
.measure summary:hover{color:var(--amber)}
.measure-body{padding:0 .7rem .75rem;display:flex;flex-direction:column;gap:.6rem}
.measure-out{font-size:.7rem;color:var(--amber);line-height:1.5;letter-spacing:.02em}

.ticket input,.ticket select{
  width:100%;background:var(--ink);color:var(--chrome);
  border:1px solid var(--line-2);border-radius:2px;
  padding:.6rem .65rem;font:inherit;font-size:.92rem;appearance:none;
}
.ticket select{
  background-image:linear-gradient(45deg,transparent 50%,var(--dust) 50%),linear-gradient(135deg,var(--dust) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2rem;
}
.ticket input:focus,.ticket select:focus{border-color:var(--hot);outline:none;box-shadow:0 0 0 2px var(--hot-glow)}

.perf{border-top:1px dashed var(--line-2);margin-top:.3rem;padding-top:.9rem;display:flex;flex-direction:column;gap:.45rem}
.line{display:flex;justify-content:space-between;gap:1rem;font-size:.84rem;color:var(--dust)}
.line b{color:var(--chrome);font-weight:500;text-align:right}
.total{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-top:2px solid var(--line-2);margin-top:.5rem;padding-top:.75rem;
}
.total span{font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;color:var(--dust-2)}
.total b{font-family:"Anton",Impact,sans-serif;font-weight:400;font-size:2.3rem;color:var(--amber);line-height:1}
.fineprint{font-size:.66rem;line-height:1.5;color:var(--dust-2);letter-spacing:.02em}
.note-load{font-size:.73rem;color:var(--hot);letter-spacing:.03em;line-height:1.45}

.confirm{display:none;border-top:1px dashed var(--line-2);margin-top:.2rem;padding-top:.9rem;flex-direction:column;gap:.6rem}
.confirm.on{display:flex}
.confirm p{font-size:.8rem;color:var(--dust);line-height:1.55}
.confirm .script{font-size:1.5rem;color:var(--hot)}
.lead{display:flex;flex-direction:column;gap:.7rem}
.sent{border:1px solid var(--hot);border-radius:2px;padding:.85rem .9rem;color:var(--chrome);font-size:.85rem;line-height:1.55}
.sent b{color:var(--hot)}

/* ============ MARQUEE ============ */
.marquee{border-block:1px solid var(--line);background:var(--ink-2);overflow:hidden;padding-block:.85rem}
.marquee-track{
  display:flex;gap:2.5rem;width:max-content;animation:slide 38s linear infinite;
  font-family:"Anton",Impact,sans-serif;text-transform:uppercase;
  font-size:1.05rem;letter-spacing:.1em;color:var(--dust-2);white-space:nowrap;
}
.marquee-track i{font-style:normal;color:var(--hot)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto}
  .marquee-track{animation:none;padding-inline:var(--gut)}
}

/* ============ SECTIONS ============ */
.sec{padding-block:var(--pad)}
.sec-alt{background:var(--ink-2)}
.sec-head{max-width:66ch;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head h2{font-size:var(--step-3);color:var(--chrome)}
.sec-head h2 em{font-style:normal;color:var(--hot)}
.sec-head .lede{margin-top:.9rem}

/* ---- price table ---- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:3px;background:var(--ink)}
table.prices{width:100%;border-collapse:collapse;min-width:620px;font-variant-numeric:tabular-nums}
table.prices caption{
  text-align:left;padding:1rem 1.1rem;background:var(--ink-3);
  font-family:"DM Mono",monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dust);border-bottom:1px solid var(--line);
}
table.prices th,table.prices td{padding:.85rem 1.1rem;text-align:left;border-bottom:1px solid var(--line)}
table.prices thead th{
  font-family:"DM Mono",monospace;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dust-2);font-weight:400;background:var(--ink-2);
}
table.prices tbody tr:hover{background:var(--ink-3)}
table.prices tbody th{font-weight:400}
.m-name{font-family:"Anton",Impact,sans-serif;text-transform:uppercase;font-size:1.05rem;color:var(--chrome);display:block;letter-spacing:.02em}
.m-use{font-size:.8rem;color:var(--dust);display:block;margin-top:.2rem;line-height:1.45}
.m-alias{font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--hot);display:block;margin-top:.3rem}
td.num{font-family:"DM Mono",monospace;color:var(--amber);white-space:nowrap;font-size:.95rem}
td.num small{display:block;color:var(--dust-2);font-size:.66rem;letter-spacing:.06em;margin-top:.15rem}
td.na{font-family:"DM Mono",monospace;color:var(--dust-2);font-size:.8rem}

/* ---- why ---- */
.why{display:grid;border-top:1px solid var(--line)}
.why > div{display:grid;gap:.4rem 1.5rem;padding-block:1.5rem;border-bottom:1px solid var(--line);align-items:start}
.why h3{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:var(--step-2);color:var(--amber)}
.why p{color:var(--dust);max-width:60ch}
.why .num{font-family:"DM Mono",monospace;font-size:.7rem;letter-spacing:.19em;color:var(--hot)}
@media (min-width:820px){ .why > div{grid-template-columns:7rem 16rem 1fr;align-items:baseline} }

/* ---- steps ---- */
.steps{display:grid;gap:1.6rem}
@media (min-width:840px){.steps{grid-template-columns:repeat(3,1fr);gap:2.2rem}}
.step{display:flex;flex-direction:column;gap:.6rem;padding-top:1.1rem;border-top:3px solid var(--hot)}
.step .n{font-family:"Anton",Impact,sans-serif;font-size:2.6rem;line-height:1;color:var(--line-2)}
.step h3{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:1.25rem;color:var(--amber)}
.step p{color:var(--dust);font-size:.92rem}

/* ---- service area ---- */
.zones{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:2rem}
@media (min-width:800px){.zones{grid-template-columns:repeat(3,1fr)}}
.zone{background:var(--ink);padding:1.3rem;display:flex;flex-direction:column;gap:.45rem}
.zone .z{font-family:"DM Mono",monospace;font-size:.64rem;letter-spacing:.17em;text-transform:uppercase;color:var(--hot)}
.zone h3{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:1.2rem;color:var(--chrome)}
.zone p{font-size:.86rem;color:var(--dust);line-height:1.5;flex:1}
.zone .fee{font-family:"DM Mono",monospace;color:var(--amber);font-size:.88rem;border-top:1px dashed var(--line-2);padding-top:.6rem}

.counties{display:grid;gap:1.6rem}
@media (min-width:760px){.counties{grid-template-columns:repeat(4,1fr)}}
.county h4{
  font-family:"DM Mono",monospace;font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--amber);margin:0 0 .6rem;font-weight:400;
}
.county p{font-size:.85rem;color:var(--dust);line-height:1.7}

/* ---- crew ---- */
.crew{display:grid;gap:1.2rem}
@media (min-width:620px){.crew{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.crew{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--ink);border:1px solid var(--line);border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
/* PHOTO SLOT: replace each .portrait div with <img class="portrait" src="..." alt="..."> at 4:5 */
.portrait{
  aspect-ratio:4/5;position:relative;display:grid;place-items:center;
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(255,46,94,.34), transparent 62%),
    repeating-linear-gradient(0deg, rgba(215,219,224,.05) 0 2px, transparent 2px 5px),
    linear-gradient(180deg,var(--ink-3),var(--ink));
  border-bottom:1px solid var(--line);
}
.portrait .initials{font-family:"Anton",Impact,sans-serif;font-size:3.6rem;color:var(--chrome);opacity:.9}
.portrait .cdl{
  position:absolute;left:.65rem;bottom:.65rem;
  font-family:"DM Mono",monospace;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  background:var(--amber);color:#1A1204;padding:.25rem .5rem;border-radius:2px;
}
.card-body{padding:1.05rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.card-body h3{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:1.18rem;color:var(--chrome)}
.card-body .role{font-family:"DM Mono",monospace;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--hot)}
.card-body .quote{color:var(--dust);font-size:.9rem;line-height:1.5;font-style:italic;flex:1}
.card-body .rig{font-family:"DM Mono",monospace;font-size:.7rem;color:var(--dust-2);border-top:1px dashed var(--line);padding-top:.6rem;line-height:1.45}

/* ---- facts ---- */
.facts{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:560px){.facts{grid-template-columns:repeat(2,1fr)}}
@media (min-width:940px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{background:var(--ink);padding:1.7rem 1.3rem;display:flex;flex-direction:column;gap:.35rem}
.fact b{font-family:"Anton",Impact,sans-serif;font-weight:400;font-size:2.3rem;line-height:1;color:var(--hot)}
.fact span{font-family:"DM Mono",monospace;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dust)}

/* ---- FAQ ---- */
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding-block:1.2rem;
  display:flex;align-items:baseline;gap:1rem;
  font-family:"Anton",Impact,sans-serif;text-transform:uppercase;
  font-size:1.1rem;color:var(--chrome);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--hot);font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--amber)}
.faq .a{padding-bottom:1.3rem;color:var(--dust);max-width:68ch;line-height:1.65}
.faq .a p + p{margin-top:.7rem}

/* ---- reviews ---- */
.buildnote{
  display:inline-flex;gap:.5rem;font-family:"DM Mono",monospace;font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dust-2);
  border:1px dashed var(--line-2);border-radius:2px;padding:.35rem .6rem;margin-top:1.4rem;line-height:1.5;
}
.reviews{display:grid;gap:1.1rem}
@media (min-width:760px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{background:var(--ink);border:1px solid var(--line);border-left:3px solid var(--amber);padding:1.2rem 1.25rem;display:flex;flex-direction:column;gap:.7rem}
.review .stars{color:var(--amber);letter-spacing:.18em;font-size:.85rem}
.review p{color:var(--chrome);font-size:.95rem;line-height:1.55;flex:1}
.review cite{font-family:"DM Mono",monospace;font-style:normal;font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--dust-2)}

/* ---- CTA ---- */
.cta{background:var(--hot);color:#1B0209;padding-block:var(--pad)}
.cta .wrap{display:grid;gap:1.8rem;align-items:center}
@media (min-width:900px){.cta .wrap{grid-template-columns:1.3fr auto}}
.cta h2{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:var(--step-3);color:#1B0209}
.cta .script{font-size:2.4rem;color:#4A0417;display:block;margin-bottom:.1em}
.cta p{color:#4A0417;font-weight:600;margin-top:.8rem;max-width:52ch}
.cta-actions{display:flex;flex-direction:column;gap:.7rem;min-width:min(100%,17rem)}
.btn-dark{background:#1B0209;color:#FFE8EE}
.btn-dark:hover{background:#2E060F;transform:translateY(-1px)}
.btn-outline-dark{background:transparent;color:#1B0209;border:2px solid #1B0209}
.btn-outline-dark:hover{background:rgba(27,2,9,.09)}

/* ---- emblem + footer ---- */
.emblem{width:min(190px,48vw);height:auto;display:block;margin:1.2rem 0}
.ringtext{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:2.4px;fill:#A79A90}
.foot{background:var(--ink-2);border-top:1px solid var(--line);padding-block:3rem 2rem}
.foot-grid{display:grid;gap:2.2rem}
@media (min-width:860px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2.4rem}}
.foot h4{font-family:"DM Mono",monospace;font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;color:var(--dust-2);margin:0 0 .9rem;font-weight:400}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.foot a{color:var(--dust);text-decoration:none;font-size:.88rem}
.foot a:hover{color:var(--hot)}
.foot .script{font-size:2rem;color:var(--hot)}
.foot p{color:var(--dust-2);font-size:.85rem;max-width:38ch;line-height:1.55}
.legal{
  border-top:1px solid var(--line);margin-top:2.4rem;padding-top:1.2rem;
  font-family:"DM Mono",monospace;font-size:.66rem;letter-spacing:.07em;color:var(--dust-2);
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;text-transform:uppercase;
}

/* ============================================================
   INTERIOR PAGES — material detail, materials index, service area
   ============================================================ */
.crumb{
  font-family:"DM Mono",monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dust-2);
  display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-bottom:1.1rem;
}
.crumb a{color:var(--dust);text-decoration:none}
.crumb a:hover{color:var(--hot)}
.crumb span[aria-current]{color:var(--amber)}

.subhero{position:relative;overflow:hidden;padding-block:calc(var(--pad) * .75) calc(var(--pad) * .55);border-bottom:1px solid var(--line)}
.subhero::before{
  content:"";position:absolute;inset:-40% -10% auto -10%;height:80%;
  background:radial-gradient(55% 70% at 20% 40%, rgba(255,46,94,.13), transparent 70%);
  pointer-events:none;
}
.subhero .wrap{position:relative}
.subhero h1{font-size:clamp(2.1rem,1.4rem + 3.2vw,3.6rem);color:var(--chrome)}
.subhero h1 em{font-style:normal;color:var(--amber)}
.subhero .lede{font-size:var(--step-1);margin-top:1rem}

.matlead{display:grid;gap:clamp(1.6rem,4vw,2.6rem);align-items:start;margin-top:2rem}
@media (min-width:860px){.matlead{grid-template-columns:1fr 19rem}}

.pricebox{
  background:var(--ink-2);border:1px solid var(--line-2);border-radius:3px;
  padding:1.3rem 1.5rem;display:flex;flex-direction:column;gap:.35rem;
  min-width:min(100%,17rem);font-variant-numeric:tabular-nums;
}
.pricebox .k{font-family:"DM Mono",monospace;font-size:.64rem;letter-spacing:.17em;text-transform:uppercase;color:var(--dust-2)}
.pricebox .v{font-family:"Anton",Impact,sans-serif;font-size:3rem;line-height:1;color:var(--amber)}
.pricebox .u{font-family:"DM Mono",monospace;font-size:.75rem;color:var(--dust)}
.pricebox .btn{margin-top:.9rem}
.pricebox .fine{font-size:.68rem;color:var(--dust-2);line-height:1.5;margin-top:.2rem}

.prose{max-width:68ch;display:flex;flex-direction:column;gap:1rem;color:var(--dust);line-height:1.7}
.prose h2{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:var(--step-2);color:var(--chrome);margin-top:.8rem}
.prose h3{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:1.15rem;color:var(--amber)}
.prose strong{color:var(--chrome);font-weight:600}
.prose ul{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.45rem}
.prose li::marker{color:var(--hot)}

.speclist{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
@media (min-width:640px){.speclist{grid-template-columns:repeat(2,1fr)}}
.speclist div{background:var(--ink);padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.25rem}
.speclist dt{font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hot)}
.speclist dd{margin:0;color:var(--chrome);font-size:.95rem}

table.cover{width:100%;border-collapse:collapse;min-width:420px;font-variant-numeric:tabular-nums}
table.cover th,table.cover td{padding:.7rem 1rem;text-align:left;border-bottom:1px solid var(--line)}
table.cover thead th{font-family:"DM Mono",monospace;font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dust-2);font-weight:400;background:var(--ink-2)}
table.cover td{font-family:"DM Mono",monospace;color:var(--chrome);font-size:.9rem}
table.cover td:first-child{color:var(--amber)}

.matgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:620px){.matgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.matgrid{grid-template-columns:repeat(3,1fr)}}
.matcard{
  background:var(--ink);padding:1.3rem;display:flex;flex-direction:column;gap:.5rem;
  text-decoration:none;transition:background .15s ease;
}
.matcard:hover{background:var(--ink-3)}
.matcard .cat{font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hot)}
.matcard h2,.matcard h3{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:1.25rem;color:var(--chrome)}
.matcard:hover h2,.matcard:hover h3{color:var(--amber)}
.matcard p{font-size:.86rem;color:var(--dust);line-height:1.5;flex:1}
.matcard .p{font-family:"DM Mono",monospace;color:var(--amber);font-size:.92rem;border-top:1px dashed var(--line-2);padding-top:.6rem}
.matcard .p small{color:var(--dust-2);font-size:.7rem}

.related{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:640px){.related{grid-template-columns:repeat(3,1fr)}}

/* price-table material names are links into the detail pages */
a.m-name{text-decoration:none;transition:color .12s ease}
a.m-name:hover{color:var(--hot)}
table.prices tbody tr:hover a.m-name{color:var(--amber)}

/* ---- standalone calculator page ---- */
.calcwrap{display:grid;gap:1.4rem;align-items:start}
@media (min-width:900px){.calcwrap{grid-template-columns:1fr 1fr}}
.calcpanel{background:var(--ink-2);border:1px solid var(--line-2);border-radius:3px;overflow:hidden;font-family:"DM Mono",ui-monospace,monospace}
.calcpanel .ticket-head{background:var(--amber)}
.calcpanel .ticket-body{padding:1.1rem 1.1rem 1.3rem;display:flex;flex-direction:column;gap:.85rem}
.calcpanel input,.calcpanel select{
  width:100%;background:var(--ink);color:var(--chrome);border:1px solid var(--line-2);
  border-radius:2px;padding:.6rem .65rem;font:inherit;font-size:.92rem;appearance:none;
}
.calcpanel select{
  background-image:linear-gradient(45deg,transparent 50%,var(--dust) 50%),linear-gradient(135deg,var(--dust) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2rem;
}
.calcpanel input:focus,.calcpanel select:focus{border-color:var(--hot);outline:none;box-shadow:0 0 0 2px var(--hot-glow)}

.bigout{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line)}
@media (min-width:480px){.bigout{grid-template-columns:repeat(3,1fr)}}
.bigout div{background:var(--ink);padding:1.1rem;display:flex;flex-direction:column;gap:.3rem}
.bigout .k{font-family:"DM Mono",monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dust-2)}
.bigout .v{font-family:"Anton",Impact,sans-serif;font-size:1.9rem;line-height:1;color:var(--amber);font-variant-numeric:tabular-nums}
.bigout div:last-child .v{color:var(--hot)}
.calcnote{padding:1rem 1.1rem;font-size:.72rem;line-height:1.6;color:var(--dust-2);border-top:1px solid var(--line);background:var(--ink)}
.calcnote b{color:var(--amber)}

.worked{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:760px){.worked{grid-template-columns:repeat(2,1fr)}}
.worked div{background:var(--ink);padding:1.2rem;display:flex;flex-direction:column;gap:.45rem}
.worked h3{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:1.1rem;color:var(--chrome)}
.worked p{font-size:.86rem;color:var(--dust);line-height:1.55}
.worked .ans{font-family:"DM Mono",monospace;font-size:.8rem;color:var(--amber);border-top:1px dashed var(--line-2);padding-top:.55rem}

/* ============================================================
   MOBILE
   The nav was desktop-only: below 980px there was no way to reach
   any of the other 68 pages. Hamburger + stacked panel fixes that.
   ============================================================ */
.navtoggle{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;margin-left:auto;
  background:transparent;border:1px solid var(--line-2);border-radius:3px;cursor:pointer;
}
.navtoggle span{display:block;height:2px;width:100%;background:var(--chrome);transition:transform .18s ease,opacity .18s ease}
.navtoggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle.open span:nth-child(2){opacity:0}
.navtoggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1079px){
  .nav .wrap{flex-wrap:wrap;gap:.75rem}
  .navlinks{
    display:none;order:3;flex-basis:100%;flex-direction:column;align-items:stretch;
    gap:0;border-top:1px solid var(--line);margin-top:.2rem;
  }
  .navlinks.open{display:flex}
  .navlinks a{
    padding:.95rem .2rem;border-bottom:1px solid var(--line);
    font-size:.92rem;letter-spacing:.1em;
  }
  .navlinks a:last-child{border-bottom:0}
  .navcta{order:2}
}
@media (min-width:1080px){ .navtoggle{display:none} }

@media (max-width:600px){
  /* top bar: the whole strip was competing for one line */
  .topbar .wrap{gap:.3rem .9rem;font-size:.62rem;letter-spacing:.1em;padding-block:.5rem}
  .nav .wrap{gap:.6rem}
  .brand .script{font-size:1.5rem}
  .navcta{padding:.6rem .9rem;font-size:.82rem}

  /* give thumbs a real target and stop buttons sitting side by side */
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%;padding-block:.95rem}
  .cta-actions{width:100%}

  /* the measure helper's three fields were ~70px wide each */
  .row3{grid-template-columns:1fr 1fr;gap:.6rem}
  .row3 > :last-child{grid-column:1 / -1}
  .row2{grid-template-columns:1fr}

  /* big readouts */
  .total b{font-size:1.9rem}
  .bigout{grid-template-columns:repeat(2,1fr)}
  .bigout .v{font-size:1.5rem}
  .pricebox .v{font-size:2.4rem}
  .pricebox .v.v-quote{font-size:1.5rem;line-height:1.2}

  /* tables scroll in their own box rather than pushing the page sideways */
  .tablewrap{-webkit-overflow-scrolling:touch}
  table.prices{min-width:420px}
  table.cover{min-width:340px}
  table.prices th,table.prices td,table.cover th,table.cover td{padding:.7rem .75rem}
  .m-name{font-size:.95rem}
  .m-use{font-size:.74rem}

  /* long specs and quotes */
  .speclist div{padding:.85rem .95rem}
  .faq summary{font-size:1rem;padding-block:1rem;gap:.6rem}
  .sec-head{margin-bottom:1.6rem}
  .crumb{font-size:.6rem;gap:.3rem}
  .legal{gap:.3rem .9rem}
}

/* never let anything push the page sideways */
html,body{max-width:100%;overflow-x:hidden}
img,svg,table{max-width:100%}
.pricebox .v.v-quote{font-size:1.7rem;line-height:1.2}

/* ============================================================
   RECENT DROPS — photo gallery generated from assets/drops/
   ============================================================ */
.drops{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:560px){.drops{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.drops{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1200px){.drops{grid-template-columns:repeat(4,1fr)}}
.drop{background:var(--ink);display:flex;flex-direction:column}
.drop img{
  height:auto;
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  background:var(--ink-3);border-bottom:1px solid var(--line);
}
.drop-cap{padding:.85rem 1rem 1rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.drop-cap .qty{
  font-family:"Anton",Impact,sans-serif;text-transform:uppercase;
  font-size:1.05rem;color:var(--chrome);letter-spacing:.02em;line-height:1.15;
}
.drop-cap .qty a{text-decoration:none}
.drop-cap .qty a:hover{color:var(--hot)}
.drop-cap .where{
  font-family:"DM Mono",monospace;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--hot);
}
.drop-cap .where a{text-decoration:none}
.drop-cap .where a:hover{color:var(--amber)}
.drop-cap .when{font-family:"DM Mono",monospace;font-size:.64rem;letter-spacing:.1em;color:var(--dust-2);margin-top:auto;padding-top:.4rem}

/* horizontal strip used on the home page */
.dropstrip{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:560px){.dropstrip{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.dropstrip{grid-template-columns:repeat(4,1fr)}}
.dropstrip .drop img{aspect-ratio:1/1}

.dropnote{
  font-family:"DM Mono",monospace;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dust-2);margin-top:1.2rem;
}

/* ---- category showcase (home) : what we carry, without 27 rows ---- */
.cats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:620px){.cats{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cats{grid-template-columns:repeat(3,1fr)}}
.cat{background:var(--ink);padding:1.4rem 1.3rem;display:flex;flex-direction:column;gap:.55rem;text-decoration:none;transition:background .15s ease}
.cat:hover{background:var(--ink-3)}
.cat .n{font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;color:var(--hot)}
.cat h3{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:1.3rem;color:var(--chrome)}
.cat:hover h3{color:var(--amber)}
.cat .items{font-size:.84rem;color:var(--dust);line-height:1.55;flex:1}
.cat .from{font-family:"DM Mono",monospace;font-size:.9rem;color:var(--amber);border-top:1px dashed var(--line-2);padding-top:.6rem;font-variant-numeric:tabular-nums}
.cat .from small{color:var(--dust-2);font-size:.7rem;letter-spacing:.06em}

/* ---- order form (/order/) ---- */
.orderform{display:flex;flex-direction:column;gap:1.1rem;max-width:780px}
.orderform input,.orderform select,.orderform textarea{
  width:100%;background:var(--ink);color:var(--chrome);
  border:1px solid var(--line-2);border-radius:2px;
  padding:.65rem .7rem;font:inherit;font-size:.95rem;appearance:none;
}
.orderform textarea{min-height:5.5rem;resize:vertical;line-height:1.55}
.orderform select{
  background-image:linear-gradient(45deg,transparent 50%,var(--dust) 50%),linear-gradient(135deg,var(--dust) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2rem;
}
.orderform input:focus,.orderform select:focus,.orderform textarea:focus{
  border-color:var(--hot);outline:none;box-shadow:0 0 0 2px var(--hot-glow)
}
.orderform .req{color:var(--hot)}
.orderform .hint{font-size:.7rem;color:var(--dust-2);letter-spacing:.02em;line-height:1.5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.fset{
  border:1px solid var(--line);border-radius:2px;background:var(--ink-2);
  padding:1.35rem 1.25rem;display:flex;flex-direction:column;gap:.95rem;margin:0;
  min-inline-size:0;min-width:0;
}
.fset legend{
  font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:.06em;font-size:1rem;color:var(--amber);padding:0 .55rem;margin-left:-.55rem;
}
.cards{display:flex;flex-wrap:wrap;gap:.5rem;margin:.1rem 0}
.cards span{
  font-family:"DM Mono",monospace;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:2px;padding:.42rem .62rem;
  color:var(--chrome);background:var(--ink);white-space:nowrap;
}
.paynote{font-size:.82rem;color:var(--dust);line-height:1.65}
.paynote strong{color:var(--chrome)}
.feeline{
  font-family:"DM Mono",monospace;color:var(--amber);font-size:.9rem;
  border:1px dashed var(--line-2);border-radius:2px;padding:.75rem .85rem;line-height:1.55;
}
.checkrow{display:flex;gap:.6rem;align-items:flex-start;font-size:.84rem;color:var(--dust);line-height:1.6}
.checkrow input[type=checkbox]{width:auto;flex:0 0 auto;margin-top:.22rem;appearance:auto;accent-color:var(--hot)}