/* =========================================================================
   site.css — component styles. Reads tokens.css for every value.

   STRUCTURAL PARADIGM: a technical document inside an instrument chassis.

     - Graphite bars top and bottom; paper in between.
     - Full-width horizontal BANDS stacked down the page, alternating
       paper / panel / graphite. No left rail anywhere.
     - Inside a band, content sits either in a centred reading column
       (`.doc`, ~66ch) or in a full-width frame (`.wrap`) for ledgers,
       scales and grids.
     - Every label, number, unit and key is mono, uppercase and tracked.
     - Hairline rules and tick marks do the work that cards and shadows do
       elsewhere. Radii are 2-4px. Nothing is a pill.
   ========================================================================= */

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

body{margin:0;background:var(--paper);color:var(--ink-2);font-family:var(--sans);
  font-size:var(--t-base);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}

p{margin:0 0 var(--s4)}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--sig-600);text-underline-offset:2px}
a:hover{color:var(--sig-500)}
:focus-visible{outline:var(--focus);outline-offset:3px;border-radius:var(--r-sm)}
hr{border:0;border-top:1px solid var(--rule);margin:var(--s6) 0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5)}
.doc{max-width:var(--doc);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* mono label — the single most repeated element on the site */
.lbl{font-family:var(--mono);font-size:var(--t-2xs);font-weight:500;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-3);
  margin:0 0 var(--s3)}
.lbl--sig{color:var(--sig-600)}
.lbl--dark{color:var(--on-dark-2)}

.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--sig-500);
  color:var(--on-sig);padding:var(--s3) var(--s4);font-weight:600;font-family:var(--mono);
  font-size:var(--t-sm)}
.skip:focus{left:0}

/* ---------- buttons: squared, bordered, mono-ish weight ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:var(--t-sm);
  letter-spacing:.01em;padding:.8rem 1.35rem;border-radius:var(--r);
  border:1.5px solid var(--sig-500);background:var(--sig-500);color:var(--on-sig);
  text-decoration:none;cursor:pointer;transition:background .14s ease,border-color .14s ease}
.btn:hover{background:var(--sig-600);border-color:var(--sig-600);color:var(--on-sig)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn--ghost:hover{background:var(--paper-2);border-color:var(--ink);color:var(--ink)}
.btn--onDark{background:transparent;color:var(--white);border-color:var(--on-dark-rule)}
.btn--onDark:hover{background:rgba(215,211,198,.1);border-color:var(--on-dark);color:var(--white)}
.btn--sm{padding:.5rem 1rem;font-size:var(--t-xs)}

/* =========================================================================
   CHASSIS — top bar, masthead, tick rule
   ========================================================================= */
.topbar{background:var(--graphite-950);color:var(--on-dark-2)}
.topbar__in{max-width:var(--wrap);margin-inline:auto;padding:.45rem var(--s5);
  display:flex;gap:var(--s5);flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.09em;text-transform:uppercase}
.topbar b{color:var(--on-dark);font-weight:500}
.topbar__act{color:var(--sig-500)}

.masthead{background:var(--paper);border-bottom:1px solid var(--rule)}
.masthead__in{max-width:var(--wrap);margin-inline:auto;padding:var(--s4) var(--s5);
  display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none}
.brand__mk{width:36px;height:36px;background:var(--graphite-900);border-radius:var(--r);
  display:grid;place-items:center;flex:none}
.brand__t{font-family:var(--display);font-weight:700;font-size:1.08rem;color:var(--ink);
  line-height:1.1;letter-spacing:var(--track-tight)}
.brand__t small{display:block;font-family:var(--mono);font-weight:400;font-size:var(--t-2xs);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.nav{margin-left:auto;display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.nav a{color:var(--ink-2);text-decoration:none;font-size:var(--t-sm);font-weight:500}
.nav a:hover{color:var(--sig-600)}
/* .nav a out-specifies .btn, so the CTA in the nav needs its colour restated
   or it renders dark-on-red. Same for any future button placed inside a nav. */
.nav a.btn{color:var(--on-sig)}
.nav a.btn:hover{color:var(--on-sig)}
/* The desktop call button. Ghost treatment so "Get quotes" stays the one
   loud thing in the header; the handset block below hides this entirely,
   where the header icon and the sticky bar already carry the number. */
.nav a.btn--call{color:var(--ink)}
.nav a.btn--call:hover{color:var(--ink)}

/* the ruler under the masthead — a repeating tick pattern, 1 tick per 8px */
.tickrule{height:9px;background:var(--paper);border-bottom:1px solid var(--rule);
  background-image:repeating-linear-gradient(to right,var(--rule-2) 0 1px,transparent 1px 8px);
  background-size:100% 4px;background-repeat:no-repeat;background-position:0 0}

/* =========================================================================
   BANDS — the page rhythm
   ========================================================================= */
.band{padding:var(--s8) 0}
.band--tight{padding:var(--s7) 0}
.band--paper{background:var(--paper)}
.band--panel{background:var(--paper-2);border-block:1px solid var(--rule)}
.band--dark{background:var(--graphite-900);color:var(--on-dark)}

.band h2{font-family:var(--display);font-size:var(--t-xl);font-weight:600;color:var(--ink);
  letter-spacing:var(--track-tight);line-height:var(--lh-snug);margin:0 0 var(--s4);max-width:24ch}
.band h3{font-family:var(--display);font-size:1.12rem;font-weight:600;color:var(--ink);
  letter-spacing:-.015em;margin:0 0 var(--s2)}
.band__intro{max-width:58ch;color:var(--ink-2)}

/* Dark-band overrides come AFTER the base .band rules on purpose: they carry
   the same specificity, so source order is what decides. Moving them above
   would put ink-coloured headings on a graphite ground — invisible. Anything
   added to .band h2/h3 below this point needs an override here too. */
.band--dark h2,.band--dark h3,
.band--dark .col h3,.band--dark .spec h3{color:var(--white)}
.band--dark a{color:var(--white)}
.band--dark a:hover{color:var(--sig-500)}
.band--dark .band__intro{color:var(--on-dark)}

/* =========================================================================
   OPENER — the light hero. No 60/40 split; a stacked readout.
   ========================================================================= */
.opener{background:var(--paper);padding:var(--s8) 0 var(--s7)}
.opener__in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5)}
.opener h1{font-family:var(--display);font-size:var(--t-display);font-weight:700;
  color:var(--ink);line-height:var(--lh-tight);letter-spacing:var(--track-tight);
  margin:0 0 var(--s5);max-width:20ch;text-wrap:balance}
.opener h1 em{font-style:normal;color:var(--sig-500)}
.opener__lede{font-size:var(--t-md);line-height:1.6;color:var(--ink-2);max-width:52ch;margin:0}
.opener__cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}
.opener__note{font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin:var(--s5) 0 0}

/* =========================================================================
   READOUT + SCALE — the signature graphic
   ========================================================================= */
.readout{display:grid;grid-template-columns:auto 1fr;gap:var(--s6);align-items:end;
  margin-top:var(--s7);padding-top:var(--s6);border-top:2px solid var(--graphite-900)}
.readout__n{font-family:var(--mono);font-size:var(--t-readout);font-weight:600;
  color:var(--graphite-900);line-height:.82;letter-spacing:-.05em}
.readout__n sup{font-size:.26em;vertical-align:super;color:var(--sig-500);letter-spacing:0}
.readout__u{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--ink-3);display:block;margin-top:var(--s3)}
.readout__t{max-width:46ch;font-size:var(--t-sm);color:var(--ink-2);margin:0}

/* the pCi/L scale strip */
.scale{margin-top:var(--s6)}
.scale__bar{display:flex;height:14px;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--rule-2)}
.scale__seg{height:100%}
.scale__seg--safe{background:var(--lvl-safe)}
.scale__seg--watch{background:var(--lvl-watch)}
.scale__seg--act{background:var(--lvl-act)}
.scale__ticks{display:flex;margin-top:6px;font-family:var(--mono);font-size:var(--t-2xs);
  color:var(--ink-3);letter-spacing:.06em}
.scale__ticks span{position:relative;padding-top:6px;
  border-left:1px solid var(--rule-2)}
.scale__ticks span:first-child{padding-left:4px}
.scale__key{display:flex;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s4);
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.scale__key i{display:inline-block;width:9px;height:9px;margin-right:.45rem;
  border-radius:1px;vertical-align:.02em}
.scale__key i.s{background:var(--lvl-safe)}
.scale__key i.w{background:var(--lvl-watch)}
.scale__key i.a{background:var(--lvl-act)}

/* =========================================================================
   CUTAWAY — the animated entry-route diagram
   ========================================================================= */
.cut{margin:0}
/* The section is wide and detailed. Below the breakpoint it would shrink the
   16px callout type past legibility, so let it scroll horizontally at a
   readable size instead — the same rule the rest of the site uses for tables. */
.cut__frame{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cut svg{width:100%;height:auto;display:block}
@media(max-width:720px){
  .cut__frame svg{width:700px;max-width:none}
}
.cut svg text{font-family:var(--mono)}
.cut__key{list-style:none;margin:var(--s5) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s4)}
.cut__key li{font-size:var(--t-sm);color:var(--ink-2);line-height:1.55;
  padding-top:var(--s3);border-top:1px solid var(--rule-2)}
.cut__key li:first-child{border-top-color:var(--graphite-900);border-top-width:2px}
.cut__key b{display:block;font-family:var(--mono);font-size:var(--t-2xs);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--sig-600);
  margin-bottom:.3rem;font-weight:500}

@media(prefers-reduced-motion:no-preference){
  /* Soil gas is a dash flowing along its streamline — a drawn convention,
     not a blurred blob. Negative delays stagger the three without a visible
     start, so the drawing is never caught mid-nothing on first paint. */
  @keyframes gasFlow{to{stroke-dashoffset:-56}}
  .gas{stroke-dasharray:6 10;animation:gasFlow 2.8s linear infinite}
  .gas-2{animation-delay:-.93s}
  .gas-3{animation-delay:-1.86s}
  @keyframes fanSpin{to{transform:rotate(360deg)}}
  .fanblade{animation:fanSpin 2.4s linear infinite;transform-box:fill-box;transform-origin:center}
}

/* =========================================================================
   STRIP — the four-fact bar under the opener
   ========================================================================= */
.strip{background:var(--graphite-900);color:var(--on-dark)}
.strip__in{max-width:var(--wrap);margin-inline:auto;padding:var(--s5);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s5)}
.strip__i{border-left:2px solid var(--sig-500);padding-left:var(--s4)}
.strip__i b{display:block;font-family:var(--mono);font-size:var(--t-2xs);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--on-dark-2);
  font-weight:500;margin-bottom:.35rem}
.strip__i span{font-size:var(--t-sm);color:var(--white);line-height:1.45}

/* =========================================================================
   SPEC BLOCKS — numbered steps, square, hairline-ruled
   ========================================================================= */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;
  border-top:2px solid var(--graphite-900)}
.spec{padding:var(--s5) var(--s5) var(--s5) 0;border-bottom:1px solid var(--rule)}
.spec + .spec{border-left:1px solid var(--rule);padding-left:var(--s5)}
.spec__n{font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:var(--track-label);
  color:var(--sig-600);margin-bottom:var(--s3)}
.spec h3{margin-bottom:var(--s2)}
.spec p{font-size:var(--t-sm);margin:0;color:var(--ink-2)}
.band--dark .spec{border-bottom-color:var(--on-dark-rule)}
.band--dark .spec + .spec{border-left-color:var(--on-dark-rule)}
.band--dark .spec p{color:var(--on-dark)}
.band--dark .specs{border-top-color:var(--sig-500)}
.band--dark .spec__n{color:var(--sig-500)}

/* =========================================================================
   LEDGER — the service list, rendered as an instrument readout table
   ========================================================================= */
.ledger{border-top:2px solid var(--graphite-900)}
.ledger__r{display:grid;grid-template-columns:1fr minmax(150px,auto);gap:var(--s5);
  align-items:baseline;padding:var(--s5) 0;border-bottom:1px solid var(--rule)}
.ledger__r h3{margin:0 0 .3rem}
.ledger__r h3 a{color:var(--ink);text-decoration:none}
.ledger__r h3 a:hover{color:var(--sig-600);text-decoration:underline}
.ledger__r p{margin:0;font-size:var(--t-sm);max-width:56ch}
.ledger__p{text-align:right;white-space:nowrap}
.ledger__p b{display:block;font-family:var(--mono);font-size:var(--t-sm);font-weight:600;
  color:var(--ink);letter-spacing:-.01em}
.ledger__p small{display:block;font-family:var(--mono);font-size:var(--t-2xs);color:var(--ink-3);
  letter-spacing:.05em;margin-top:.2rem}

/* =========================================================================
   DOCUMENT HEAD — the dark data strip that opens every inner page
   ========================================================================= */
.dochead{background:var(--graphite-900);color:var(--on-dark);
  border-bottom:3px solid var(--sig-500)}
.dochead__in{max-width:var(--wrap);margin-inline:auto;padding:var(--s7) var(--s5) var(--s6)}
.dochead h1{font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:700;
  color:var(--white);line-height:1.08;letter-spacing:var(--track-tight);
  margin:0 0 var(--s4);max-width:22ch;text-wrap:balance}
.dochead__lede{color:var(--on-dark);max-width:58ch;margin:0;font-size:var(--t-md);line-height:1.55}
.kv{display:flex;flex-wrap:wrap;gap:0 var(--s6);margin:var(--s5) 0 0;padding:var(--s4) 0 0;
  border-top:1px solid var(--on-dark-rule);list-style:none}
.kv li{font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--on-dark-2);padding:.2rem 0}
.kv b{color:var(--white);font-weight:500}

/* breadcrumb sits above the doc head */
.crumb{background:var(--graphite-950);font-family:var(--mono);font-size:var(--t-2xs);
  letter-spacing:.08em;text-transform:uppercase}
.crumb__in{max-width:var(--wrap);margin-inline:auto;padding:.5rem var(--s5);color:var(--on-dark-2)}
.crumb a{color:var(--on-dark);text-decoration:none}
.crumb a:hover{color:var(--white);text-decoration:underline}

/* =========================================================================
   DOCUMENT BODY — the centred reading column
   ========================================================================= */
.doc h2{font-family:var(--display);font-size:var(--t-lg);font-weight:600;color:var(--ink);
  letter-spacing:-.02em;margin:var(--s7) 0 var(--s3);padding-top:var(--s4);
  border-top:1px solid var(--rule)}
.doc h2:first-child{margin-top:0;border-top:0;padding-top:0}
.doc h3{font-family:var(--display);font-size:1.06rem;font-weight:600;color:var(--ink);
  margin:var(--s6) 0 var(--s2);letter-spacing:-.01em}
.doc p{margin:0 0 var(--s4)}
.doc ul,.doc ol{margin:0 0 var(--s5);padding-left:1.15rem}
.doc li{margin-bottom:.5rem}
.doc__first{font-size:var(--t-md);color:var(--ink);line-height:1.55}
.doc table{width:100%;border-collapse:collapse;font-size:var(--t-sm);margin:0 0 var(--s5)}
.doc th,.doc td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--rule);
  vertical-align:top}
.doc th{font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}
/* Only a real column header gets the heavy rule. Row headers (th scope="row",
   used by the NJDEP figures table) keep the ordinary hairline. */
.doc thead th{border-bottom:2px solid var(--graphite-900)}
.doc tbody th[scope="row"]{width:60%;color:var(--ink-2);font-weight:500}

/* a bordered fact block dropped into the document flow */
.factbox{border:1px solid var(--rule-2);border-left:3px solid var(--graphite-900);
  background:var(--paper-2);padding:var(--s5);margin:0 0 var(--s5)}
.factbox p:last-child{margin-bottom:0}
.factbox .lbl{margin-bottom:var(--s2)}

/* the compliance / disclosure block */
.callout{border:1px solid var(--sig-500);border-left-width:3px;background:var(--sig-050);
  padding:var(--s5);font-size:var(--t-sm);margin:0 0 var(--s5)}
.callout p:last-child{margin-bottom:0}
.callout strong{color:var(--ink)}

/* =========================================================================
   CTA — a squared graphite block, used on every inner page
   ========================================================================= */
.cta{background:var(--graphite-900);color:var(--on-dark);padding:var(--s6);
  border-left:3px solid var(--sig-500);margin:var(--s7) 0 0}
.cta h2{font-family:var(--display);font-size:var(--t-lg);font-weight:600;color:var(--white);
  margin:0 0 var(--s3);border:0;padding:0;letter-spacing:-.02em}
.cta p{color:var(--on-dark);max-width:52ch;font-size:var(--t-sm)}
.cta .btn{margin-top:var(--s2)}

/* =========================================================================
   GRIDS — coverage columns, related links
   ========================================================================= */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--s6)}
.col h3{font-family:var(--display);font-size:1.05rem;font-weight:600;color:var(--ink);
  margin:0 0 var(--s2)}
.col > p{font-size:var(--t-sm);color:var(--ink-3);margin:0 0 var(--s4);
  padding-bottom:var(--s3);border-bottom:2px solid var(--sig-500)}
.col ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.col li{font-size:var(--t-sm);line-height:1.45}
.col a{color:var(--ink-2);text-decoration:none}
.col a:hover{color:var(--sig-600);text-decoration:underline}
.band--dark .col > p{color:var(--on-dark-2)}
.band--dark .col a{color:var(--on-dark)}
.band--dark .col a:hover{color:var(--white)}

/* =========================================================================
   Q&A
   ========================================================================= */
.qa{border-top:2px solid var(--graphite-900)}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{cursor:pointer;list-style:none;padding:var(--s5) var(--s6) var(--s5) 0;
  font-family:var(--display);font-size:1.02rem;font-weight:600;color:var(--ink);position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:1.25rem;font-weight:400;color:var(--sig-500);line-height:1}
.qa details[open] summary::after{content:"\2212"}
.qa summary:hover{color:var(--sig-600)}
.qa__a{padding:0 var(--s6) var(--s5) 0}
.qa__a p{margin:0;font-size:var(--t-sm);max-width:var(--measure)}

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot{background:var(--graphite-950);color:var(--on-dark-2);padding:var(--s8) 0 var(--s5);
  border-top:3px solid var(--sig-500)}
.foot__g{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:var(--s6);
  padding-bottom:var(--s6);border-bottom:1px solid var(--on-dark-rule)}
.foot h4{font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--on-dark);margin:0 0 var(--s4);font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.foot a{color:var(--on-dark-2);text-decoration:none;font-size:var(--t-sm)}
.foot a:hover{color:var(--white)}
.foot__blurb{font-size:var(--t-sm);margin:0;color:var(--on-dark-2);max-width:36ch}
.foot__legal{padding-top:var(--s5);font-size:var(--t-xs);max-width:88ch;margin:0;
  color:var(--on-dark-2);line-height:1.55}

/* =========================================================================
   FORMS — used by /start/ and the crew request form
   ========================================================================= */
.fset{border:1px solid var(--rule-2);border-top:2px solid var(--graphite-900);
  padding:var(--s5);margin:0 0 var(--s5);background:var(--white)}
.fset legend{font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--sig-600);padding:0 .5rem;font-weight:500}
.fset label{display:block;margin-bottom:var(--s4);font-weight:600;color:var(--ink);
  font-size:var(--t-sm)}
.fset label[hidden]{display:none}
.fset label.chk{font-weight:400;display:flex;gap:.6rem;align-items:flex-start;color:var(--ink-2);
  margin-bottom:.55rem}
.fset input[type=checkbox]{margin-top:.3rem;flex:none;width:17px;height:17px;accent-color:var(--sig-500)}
.fset input,.fset select,.fset textarea{display:block;width:100%;margin-top:.35rem;padding:.6rem;
  border:1px solid var(--rule-2);border-radius:var(--r-sm);font:inherit;font-weight:400;
  background:var(--paper);color:var(--ink)}
.fset input:focus,.fset select:focus,.fset textarea:focus{background:var(--white)}
.opt{font-weight:400;color:var(--ink-3);font-size:var(--t-xs);font-family:var(--mono);
  letter-spacing:.05em;text-transform:uppercase}
.note{font-size:var(--t-sm);color:var(--ink-3);margin:.4rem 0 0}
.note.err{color:var(--sig-600);font-weight:600}
.callout label.chk{font-size:var(--t-sm);display:flex;gap:.6rem;align-items:flex-start}
.callout input[type=checkbox]{margin-top:.3rem;flex:none;width:17px;height:17px;accent-color:var(--sig-500)}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media(max-width:900px){
  .readout{grid-template-columns:1fr;gap:var(--s4);align-items:start}
  .spec + .spec{border-left:0;padding-left:0}
  .ledger__r{grid-template-columns:1fr}
  .ledger__p{text-align:left}
  .foot__g{grid-template-columns:1fr 1fr}
  .nav{width:100%;margin-left:0;gap:var(--s4)}
  .nav a{font-size:var(--t-xs)}
}
@media(max-width:560px){
  .foot__g{grid-template-columns:1fr}
  .band{padding:var(--s7) 0}
}

/* =========================================================================
   THE MOBILE HEADER — hamburger button and drop-down panel.

   Hidden entirely above the breakpoint: these rules cost a desktop visitor
   nothing but the bytes.
   ========================================================================= */
.hdr__act{display:none}
/* justify-content:center is load-bearing, not tidiness. Below 420px the label
   is hidden and the padding drops to 0, so the button is held open by
   min-width:44px alone — a 42px content box with an 18px stack of bars in it.
   A flex container defaults to flex-start, which pinned those bars to the left
   edge with 24px of dead space to their right. On its own that reads as
   slightly wrong; sitting beside the CallRail phone button, whose icon IS
   centred (.hdr__tel uses place-items:center), it reads as broken. */
.burger{display:none;appearance:none;background:transparent;border:1px solid var(--on-deep-line);
  border-radius:var(--r-sm);color:var(--on-deep);font:inherit;font-size:var(--t-sm);
  font-weight:600;cursor:pointer;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;min-width:44px;padding:0 .8rem}
.burger__bars{display:grid;gap:4px;width:18px}
.burger__bars i{display:block;height:2px;background:currentColor;border-radius:2px;
  transition:transform .18s ease,opacity .18s ease}
/* The three lines fold into an X. Purely a state cue — aria-expanded is what
   actually communicates the state to assistive tech. */
.burger[aria-expanded="true"] .burger__bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bars i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.hdr__tel{display:inline-grid;place-items:center;min-width:44px;min-height:44px;
  border:1px solid var(--on-deep-line);border-radius:var(--r-sm);color:var(--on-deep);
  text-decoration:none}
.hdr__tel:hover{color:var(--white);border-color:var(--on-deep)}

/* ---------- tablet: columns collapse, nav still inline ---------- */
@media(max-width:960px){
  .hero{grid-template-columns:1fr;gap:var(--s6)}
  .rail{grid-template-columns:1fr;gap:var(--s6)}
  .row{grid-template-columns:1fr}
  .row__pr{text-align:left}
  .bar,.costs__scale{grid-template-columns:1fr}
  .bar__v{text-align:left}
  .strip__in{grid-template-columns:1fr}
  .ftr__g,.foot__g{grid-template-columns:1fr 1fr}
}

/* ---------- handset: the hamburger takes over ---------- */
@media(max-width:900px){
  /* .navhost is the flex container holding the brand, the burger and the nav.
     It is a second class on the template's .hdr, and on the differently-named
     header wrappers two sites in the estate use (.mast__in, .masthead__in), so
     one rule set drives all of them without any site re-declaring it. */
  .navhost{flex-wrap:wrap;gap:var(--s4);padding:var(--s4) var(--s5);align-items:center}
  /* The brand takes the leftover width and yields it: without min-width:0 a
     long site name refuses to shrink, the two 44px buttons no longer fit
     beside it, and the whole action group wraps onto a line of its own. */
  .navhost .brand{flex:1 1 0;min-width:0}
  .brand__t{min-width:0}
  .hdr__act{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex:none}
  .burger{display:inline-flex}

  /* The panel is hidden ONLY when the head script has run. No JS means no
     data-jsnav, which means the nav renders as it always did — every link
     present and clickable. */
  html[data-jsnav] .nav{display:none}
  html[data-jsnav] .nav.is-open{display:flex}

  .nav{order:3;flex-basis:100%;width:100%;margin-left:0;margin-top:var(--s3);
    flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--on-deep-line);
    max-height:min(70vh,560px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* 52px rows: comfortably past the 44px Apple and 48px Android minimums,
     which the bare text links of the desktop nav were nowhere near. */
  .nav a{display:flex;align-items:center;min-height:52px;padding:0 .25rem;
    font-size:1.02rem;border-bottom:1px solid var(--on-deep-line)}
  .nav .btn{justify-content:center;min-height:50px;margin-top:var(--s4);
    border-bottom:0;font-size:1rem}
  .nav .btn+.btn{margin-top:var(--s3)}
  .nav .btn--call{display:none}   /* the sticky bar already carries this */

  /* The utility strip was three wrapped lines of boilerplate above the logo
     — roughly 340px of a 844px screen spent before the brand appeared. */
  .util__in{padding:.45rem var(--s5);gap:var(--s4);font-size:var(--t-xs)}
  /* The number is already on screen twice on a handset — the header icon and
     the sticky bar — so the third copy only costs a line of vertical space. */
  .util__pitch,.util__tail,.util__call{display:none}

  .brand__mk{width:32px;height:32px}
  .brand__t{font-size:1rem}
}

@media(max-width:560px){
  /* Ragged half-width buttons stacked three deep read as an accident. Full
     width also gives each one a 44px+ target without touching the padding. */
  .hero__cta{gap:var(--s3)}
  .hero__cta .btn,.callfirst .btn{flex:1 1 100%;justify-content:center}

  /* ---------------------------------------------------------------------
     THE HANDSET APPEARANCE PASS

     Everything above this point made the sites WORK on a phone — nothing
     wider than the screen, a reachable menu, hittable targets. All of it
     passed on a site that still looked wrong, because "is it 390px wide and
     does the menu open" is not the same question as "does it look right".

     These four rules close that gap. Each one is a defect that survived the
     mechanical checks and was only visible in a screenshot.
     --------------------------------------------------------------------- */

  /* 1. THE HEADLINE FLOOR.
     Sites set their own clamp on the hero h1, and a clamp's FIRST value is a
     floor, not a suggestion — below that width it stops scaling. One site
     had a floor of 2.6rem in uppercase, which on a 390px screen is four
     lines of shouting that fill the viewport before the lede. Capping it
     here lets each site keep its own display size on a desktop and still
     land near 33px on a handset, which is what the good one already did. */
  .hero h1{font-size:clamp(1.85rem,8.4vw,2.35rem)}

  /* 2. THE ORPHANED RULE.
     A decorative dash drawn as a ::before on an inline-flex eyebrow sits on
     its own line the moment the label wraps to two — which at this width it
     always does. It reads as a rendering fault rather than a flourish, so
     the label goes back to being a plain block and the dash stands down. */
  .eyebrow{display:block}
  .eyebrow::before{display:none}

  /* 3. THE BRAND LOCKUP.
     Uppercase with positive tracking costs roughly a third more width than
     the same name in sentence case. That is what drives the longer brands
     onto a second line jammed against the burger. Sentence-case brands are
     unaffected by the tracking reset and simply get tighter leading. */
  .brand__t{font-size:.95rem;line-height:1.15;letter-spacing:0}
  .brand__mk{width:30px;height:30px}

  /* 4. HEADING-PLUS-BADGE ROWS.
     A title and its tag sitting on one row is a two-column layout wearing a
     flexbox, and it collides the moment neither can shrink further. */
  .placard__hd,.card__hd,.panel__hd{flex-wrap:wrap;gap:.4rem}
}

@media(max-width:420px){
  .brand__t small{display:none}   /* the tagline is the first thing to go */
  .burger__lbl{display:none}      /* icon-only below this width */
  .burger{padding:0}
}

/* ---------- handset: everything below the header ---------- */
@media(max-width:760px){
  .wrap,.util__in,.navhost,.hero,.rail,.costs__in,.how__in,.strip__in,.trust__in{
    padding-inline:var(--s5)}
  .hero{padding-block:var(--s5) var(--s7)}
  .rail,.costs__in,.how__in{padding-block:var(--s7)}
  .ftr__g,.foot__g{grid-template-columns:1fr;gap:var(--s5)}
  /* Footer links were 20px tall and stacked 0.4rem apart — a column of
     near-unhittable targets. */
  .ftr ul,.foot ul{gap:0}
  .ftr a,.foot a{display:inline-block;padding:.55rem 0;font-size:.95rem}
  .faq summary{padding-block:var(--s4)}
  .trust__in{gap:var(--s4) var(--s5)}
  /* iOS zooms the whole page when a focused input is under 16px. Every form
     on the site inherits from body, but a nested rule that shrinks type would
     silently reintroduce it, so pin the floor here. */
  input,select,textarea{font-size:max(16px,1rem)}

  /* A data table has an intrinsic minimum width that no amount of wrapping
     gets under. Left alone it widens the page, and mobile Chrome answers by
     zooming the WHOLE document out to fit — measured at 466px, 520px and
     709px of layout viewport on a 390px screen. Body copy renders at two
     thirds size and Search Console calls it "content wider than screen".

     display:block turns the table itself into the scroll container, so the
     table scrolls and the page does not. */
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Long unbroken strings — a URL in a source line, an email address — are the
   usual cause of a phone-width page scrolling sideways. */
body{overflow-x:hidden;-webkit-text-size-adjust:100%}
a,td,dd,li,p{overflow-wrap:break-word}

/* Nothing behind the open menu should scroll away underneath it. */
body.nav-open{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .gas{opacity:.85}
}

/* =========================================================================
   PRINT — the site is a document; let people print one.
   ========================================================================= */
@media print{
  .topbar,.nav,.tickrule,.cta,.foot__g{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .dochead{background:#fff;color:#000;border-bottom:2px solid #000}
  .dochead h1,.dochead__lede,.kv b{color:#000}
  .band--dark{background:#fff;color:#000}
  a{color:#000;text-decoration:underline}
}


/* ---------- the sticky mobile call bar -----------------------------------
   Hidden entirely on desktop, where the header carries the number. Below the
   nav breakpoint it is the primary way to reach the line: full width, two
   targets well past the 44px/48px minimums, and clear of the home indicator
   via env(safe-area-inset-bottom).

   `body` gets matching bottom padding so the bar never covers the footer's
   last line — the disclosure, which is the one piece of text on the page
   that legally has to be readable.
   ------------------------------------------------------------------------ */
.callbar{display:none}

@media(max-width:900px){
  .callbar{display:grid;grid-template-columns:1.6fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(13,15,18,.18);box-shadow:0 -6px 24px rgba(13,15,18,.24);
    padding-bottom:env(safe-area-inset-bottom,0px);
    border-top:1px solid rgba(255,255,255,.16)}
  .callbar a{text-decoration:none;display:flex;flex-direction:column;
    align-items:center;justify-content:center;padding:.7rem .5rem;min-height:56px}
  .callbar__call{background:var(--sig-500,#C1272D);color:var(--on-sig,#FFFFFF)}
  .callbar__call:hover{background:var(--sig-600,#9E1F24)}
  .callbar__lbl{font-weight:800;font-size:1.02rem;line-height:1.1}
  .callbar__sub{font-size:.72rem;line-height:1.25;opacity:.85;margin-top:.1rem;
    text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden}
  .callbar__form{background:var(--graphite-800,#1F242A);color:#fff;font-weight:700;
    font-size:.9rem;text-align:center;line-height:1.2}
  .callbar__form:hover{background:var(--graphite-950,#0D0F12)}
  /* Clear the bar so it never covers the footer. */
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
}