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

   THE PARADIGM: A MARINE SURVEY SHEET, NOT A LANDING PAGE.

   This is the second rebuild of this layer, and the reason for it matters.
   The first pass changed the palette and the typefaces and kept the shared
   component skeleton underneath — hero, card rows, a bar-chart cost band,
   three-column coverage cards, three step cards, an FAQ. Recoloured, not
   rebuilt. SPEC §9.1 asks for different layout structure, different section
   order and different components as well, and the acid test in §9.1.2 is
   whether a stranger would guess two sites came from the same builder. On
   markup they plainly would have.

   So the document is now organised the way a condition survey is:

     · numbered PLATES, not cards. Each section carries a hanging mono
       numeral in the left margin and is closed by a full-bleed keyline.
     · SCHEDULES, not charts. Costs are a ruled table with mono figures
       aligned on the decimal, which is how anyone actually compares them.
     · an INDEX, not a card grid. Coverage is a dense column index.
     · CLAUSES, not step tiles. The procedure is a numbered list in the
       measured column, read rather than scanned.
     · the CUTAWAY LEADS. The signature drawing is the first thing under the
       title block, before any service copy.

   WHAT IS DELIBERATELY NOT RENAMED — the mobile nav contract:
   .navhost / .nav / .burger* / #sitenav / .is-open / .nav-open are shared
   across the estate on purpose. layout.js's script binds .burger and
   #sitenav by name, and the handset rules below drive every site's header
   through .navhost regardless of what that site calls its header wrapper.
   Renaming them here would break the hamburger, which is a bug this estate
   has already shipped once. Structure is ours; the nav hook is shared.
   ========================================================================= */

*,*::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(--steel-700)}
:focus-visible{outline:var(--focus);outline-offset:3px;border-radius:var(--r-sm)}

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

/* skip link */
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--signal-500);
  color:var(--signal-ink);padding:var(--s3) var(--s4);font-weight:700;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

/* ---------- actions ---------- */
.act{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:600;
  font-size:1rem;padding:.8rem 1.5rem;border-radius:var(--r);border:2px solid var(--signal-500);
  background:var(--signal-500);color:var(--signal-ink);text-decoration:none;cursor:pointer;
  letter-spacing:-.01em;transition:background .15s ease,border-color .15s ease,transform .1s ease}
.act:hover{background:var(--signal-600);border-color:var(--signal-600);color:var(--signal-ink);transform:translateY(-1px)}
.act--sm{padding:.55rem 1rem;font-size:var(--t-sm)}
.act--line{background:transparent;color:var(--white);border-color:rgba(185,204,217,.42)}
.act--line:hover{background:rgba(185,204,217,.12);border-color:var(--on-navy);color:var(--white)}
.act--ink{background:transparent;color:var(--ink);border-color:var(--line)}
.act--ink:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ---------- the dark ground: ribbon + masthead + title block ---------- */
.ground{background:var(--navy-900);position:relative;overflow:hidden}
/* faint contour lines, like a bathymetric chart, behind the ground */
.ground::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(120% 90% at 78% -10%,rgba(46,127,174,.30),transparent 60%),
    repeating-linear-gradient(115deg,rgba(185,204,217,.05) 0 1px,transparent 1px 46px)}
.ground>*{position:relative;z-index:1}

.ribbon{border-bottom:1px solid var(--on-navy-line)}
.ribbon__in{max-width:var(--wrap);margin-inline:auto;padding:.5rem var(--s6);
  display:flex;gap:var(--s5);flex-wrap:wrap;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.02em;color:var(--on-navy-2)}
.ribbon strong{color:var(--on-navy);font-weight:600}
.ribbon__geo,.ribbon__tail{display:inline}

.mast{max-width:var(--wrap);margin-inline:auto;padding:var(--s5) var(--s6);
  display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand__mk{width:40px;height:40px;border-radius:var(--r);background:var(--signal-500);
  display:grid;place-items:center;flex:none}
.brand__t{font-family:var(--display);font-weight:700;font-size:1.12rem;color:var(--white);
  line-height:1.1;letter-spacing:-.02em;text-transform:uppercase}
.brand__t small{display:block;font-family:var(--mono);font-weight:500;font-size:.62rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--on-navy-2);margin-top:3px}
.nav{margin-left:auto;display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.nav a{color:var(--on-navy);text-decoration:none;font-weight:500;font-size:.94rem}
.nav a:hover,.nav a[aria-current]{color:var(--white)}
/* The desktop call button. Outline treatment so "Get an estimate" 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 .act--call{background:transparent;color:var(--on-navy);border-color:rgba(185,204,217,.42)}
.nav .act--call:hover{background:rgba(185,204,217,.12);border-color:var(--on-navy);color:var(--white)}

/* ---------- title block: the sheet's header, as on a drawing ----------
   Two unequal columns with the data plate BELOW the statement rather than
   beside it, so the plate reads as a specification appended to the title
   rather than a card sitting next to a hero. */
.tblk{max-width:var(--wrap);margin-inline:auto;padding:var(--s7) var(--s6) var(--s8)}
.kicker{font-family:var(--mono);font-weight:600;font-size:var(--t-xs);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--signal-500);margin:0 0 var(--s5)}
.tblk h1{font-family:var(--display);color:var(--white);font-weight:700;
  font-size:clamp(2.2rem,4.4vw,3.5rem);line-height:var(--lh-tight);
  letter-spacing:var(--track-tight);margin:0 0 var(--s5);text-wrap:balance;max-width:20ch}
.tblk h1 span{color:var(--signal-500)}
.tblk__lede{color:var(--on-navy);font-size:1.12rem;line-height:1.6;max-width:42rem}
.tblk__cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}

/* The data plate runs the full width beneath the statement as a ruled strip
   of key/value pairs — a drawing's title block, not a sidebar card. */
.dplate{margin-top:var(--s7);border-top:1px solid var(--on-navy-line);
  border-bottom:1px solid var(--on-navy-line);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));font-family:var(--mono)}
.dplate__r{padding:var(--s4) var(--s5) var(--s4) 0;border-right:1px solid var(--on-navy-line)}
.dplate__r:last-child{border-right:0}
.dplate__k{display:block;color:var(--on-navy-2);letter-spacing:.12em;text-transform:uppercase;
  font-size:.64rem;margin-bottom:.35rem}
.dplate__v{display:block;color:var(--white);font-weight:600;font-size:.95rem}

/* ---------- Figure 1: the bulkhead cutaway (leads the document) ---------- */
.fig{background:var(--navy-950);border-top:1px solid var(--on-navy-line)}
.fig__in{max-width:var(--wrap);margin-inline:auto;padding:var(--s7) var(--s6)}
.fig__cap{font-family:var(--mono);font-size:.8rem;font-weight:600;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--signal-500);margin:0 0 var(--s5)}
.fig svg{width:100%;height:auto}
.fig svg text{font-family:var(--mono)}
.fig__key{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s4)}
.fig__key li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;
  color:var(--on-navy);line-height:1.45}
.fig__key b{font-family:var(--mono);min-width:22px;height:22px;border-radius:var(--r-sm);
  background:var(--signal-500);color:var(--signal-ink);font-size:.72rem;font-weight:700;
  display:grid;place-items:center;flex:none;margin-top:1px}

.tide,.rod,.scour,.wl{transform-box:fill-box;transform-origin:center}
@keyframes wlRise{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.wl{animation:wlRise 8s ease-in-out infinite}
@keyframes tideShift{0%,100%{opacity:.5;transform:translateX(0)}50%{opacity:.85;transform:translateX(5px)}}
.tide{animation:tideShift 6s ease-in-out infinite}
@keyframes leak{0%{opacity:0;transform:translate(0,0)}30%{opacity:.9}100%{opacity:0;transform:translate(10px,7px)}}
.scour{animation:leak 4.5s ease-out infinite}
.scour-2{animation-delay:1.6s}
.scour-3{animation-delay:3s}

/* ---------- credential stamp strip ---------- */
.stamp{background:var(--navy-800)}
.stamp__in{max-width:var(--wrap);margin-inline:auto;padding:var(--s4) var(--s6);
  display:flex;gap:var(--s6);flex-wrap:wrap;font-family:var(--mono);font-size:.82rem;
  letter-spacing:.02em;font-weight:500;color:var(--on-navy)}
.stamp__in span{position:relative;padding-left:1.1rem}
.stamp__in span::before{content:"";position:absolute;left:0;top:.45em;width:7px;height:7px;
  background:var(--signal-500);border-radius:var(--r-sm)}

/* ---------- PLATE: a numbered section of the survey ----------------------
   The section number hangs in the left margin as a large mono numeral and
   the heading sits in the measured column beside it. Each plate is closed
   by a full-bleed keyline rather than opened by a rule under its heading. */
/* The plate is a two-column document grid: a 4.5rem margin column carrying
   the section numeral, and the content column. Plates WITHOUT a numeral —
   every inner page — leave that column empty on purpose, so the whole site
   keeps one consistent left margin like a bound document.

   `.plate>*{grid-column:2}` is load-bearing: inner-page templates put plain
   unclassed <div>s straight into a plate, and grid auto-placement would drop
   the first one into the 4.5rem numeral column and squeeze it to nothing. */
.plate{max-width:var(--wrap);margin-inline:auto;padding:var(--s8) var(--s6);
  border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:4.5rem minmax(0,1fr);align-items:start}
.plate:last-of-type{border-bottom:0}
.plate>*{grid-column:2;min-width:0}
.plate__hd{max-width:var(--measure);margin:0 0 var(--s6)}
.plate__hd h1,.plate__hd h2{font-family:var(--display);font-size:var(--t-xl);font-weight:700;
  color:var(--ink);margin:0 0 var(--s3);letter-spacing:var(--track-tight);line-height:var(--lh-snug)}
.plate__hd p{font-size:1rem;color:var(--ink-3);margin:0}
/* the hanging numeral — the only thing that lives in the margin column */
.plate__no{grid-column:1;font-family:var(--mono);font-weight:600;
  font-size:1.55rem;line-height:1;color:var(--signal-600);margin:.15rem 0 0;
  letter-spacing:-.02em}
/* the eyebrow label used on inner pages, where there is no section number */
.plate__lbl{font-family:var(--mono);font-weight:600;font-size:.74rem;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--steel-700);
  margin:0 0 var(--s3)}
.plate__body{min-width:0}
.plate>div>p{max-width:var(--measure)}
.plate h3{color:var(--ink)}

/* ---------- condition index: numbered, ruled, hanging numerals ---------- */
.cidx{list-style:none;counter-reset:cidx;margin:0;padding:0;border-top:2px solid var(--ink)}
/* minmax(0,1fr), not 1fr. A bare `1fr` is `minmax(auto,1fr)`, and `auto`
   floors the track at its content's MIN-CONTENT width — which the nowrap
   price figure below blows straight past. The track then refuses to shrink,
   the row runs 22px wider than a 390px screen, and the page scrolls
   sideways. Caught in a browser at 390px; no build guard can see it. */
.cidx__item{counter-increment:cidx;display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;
  gap:var(--s5);align-items:baseline;padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.cidx__item::before{content:counter(cidx,decimal-leading-zero);font-family:var(--mono);
  font-size:.9rem;font-weight:600;color:var(--ink-3)}
.cidx__item h3{font-family:var(--display);font-size:1.16rem;font-weight:600;margin:0 0 .3rem;
  letter-spacing:-.01em}
.cidx__item h3 a{color:var(--ink);text-decoration:none}
.cidx__item h3 a:hover{color:var(--steel-700);text-decoration:underline;text-underline-offset:3px}
.cidx__item p{margin:0;font-size:.96rem;max-width:52ch;color:var(--ink-2)}
.cidx__fig{text-align:right;white-space:nowrap}
.cidx__fig b{display:block;font-family:var(--mono);font-size:1rem;color:var(--ink);font-weight:600}
.cidx__fig small{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3)}

/* ---------- cost schedule: a ruled table, figures in mono --------------- */
.sched{width:100%;border-collapse:collapse;font-size:.95rem}
.sched caption{text-align:left;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-3);
  padding-bottom:var(--s4)}
/* Padding on BOTH sides, with only the outer edges flush. Zeroing the right
   padding on the figure column ran the range straight into the basis beside
   it — "$1,000 – $6,000per job" — which reads as a rendering fault. */
.sched th,.sched td{padding:.7rem var(--s4);border-bottom:1px solid var(--line);
  text-align:left;vertical-align:baseline}
.sched th:first-child,.sched td:first-child{padding-left:0}
.sched th:last-child,.sched td:last-child{padding-right:0}
.sched thead th{font-family:var(--mono);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:2px solid var(--ink)}
.sched tbody th{font-weight:500;color:var(--ink);font-family:var(--sans)}
.sched tbody th a{color:var(--ink);text-decoration:none}
.sched tbody th a:hover{color:var(--steel-700);text-decoration:underline;text-underline-offset:3px}
.sched .num{font-family:var(--mono);text-align:right;white-space:nowrap;color:var(--ink)}
.sched .unit{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3);white-space:nowrap}
.sched__note{font-size:.95rem;color:var(--ink-3);max-width:var(--measure);margin:var(--s5) 0 0}

/* ---------- coverage index: dense columns, no cards ---------- */
.covg{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--s6) var(--s7)}
.covg__col h3{font-family:var(--display);font-size:1.05rem;font-weight:600;color:var(--ink);
  margin:0 0 var(--s2);letter-spacing:-.01em;padding-bottom:var(--s3);
  border-bottom:2px solid var(--ink)}
.covg__col>p{font-size:var(--t-sm);color:var(--ink-3);margin:var(--s3) 0 var(--s4)}
.covg__col ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.covg__col li{border-bottom:1px solid var(--line)}
.covg__col a{color:var(--ink-2);text-decoration:none;font-size:.94rem;display:block;padding:.45rem 0}
.covg__col a:hover{color:var(--steel-700)}

/* ---------- procedure: numbered clauses in the reading column ---------- */
.proc{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proc__in{max-width:var(--wrap);margin-inline:auto;padding:var(--s8) var(--s6)}
.proc h2{font-family:var(--display);font-size:var(--t-xl);font-weight:700;color:var(--ink);
  margin:0 0 var(--s6);letter-spacing:var(--track-tight);max-width:24ch}
.proc__ol{list-style:none;counter-reset:clause;margin:0;padding:0;max-width:var(--measure)}
.proc__ol li{counter-increment:clause;position:relative;padding:0 0 var(--s5) 4.2rem;
  border-left:1px solid var(--line);margin-left:.4rem}
.proc__ol li:last-child{padding-bottom:0}
.proc__ol li::before{content:counter(clause,decimal-leading-zero);position:absolute;
  left:var(--s4);top:0;font-family:var(--mono);font-size:.9rem;font-weight:600;
  color:var(--steel-700)}
.proc__ol h3{font-family:var(--display);font-size:1.06rem;font-weight:600;color:var(--ink);
  margin:0 0 .3rem}
.proc__ol p{font-size:.96rem;margin:0}

/* ---------- advisory inset (agents, attorneys, surveyors) --------------- */
.advis{border:1px solid var(--line);border-left:4px solid var(--steel-600);
  background:var(--white);padding:var(--s6);max-width:var(--measure);margin-top:var(--s6)}
.advis h2{font-family:var(--display);font-size:1.2rem;font-weight:700;color:var(--ink);
  margin:0 0 var(--s3);letter-spacing:var(--track-tight)}
.advis p{margin:0 0 var(--s4);font-size:.96rem;color:var(--ink-2)}
.advis p:last-of-type{margin-bottom:var(--s5)}

/* ---------- queries ---------- */
.qa{display:grid;gap:0;border-top:2px solid var(--ink)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;padding:var(--s5) var(--s6) var(--s5) 0;
  font-family:var(--display);font-size:1.05rem;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.4rem;font-weight:400;color:var(--signal-600);line-height:1}
.qa details[open] summary::after{content:"\2212"}
.qa summary:hover{color:var(--steel-700)}
.qa__a{padding:0 var(--s6) var(--s5) 0}
.qa__a p{margin:0;font-size:.98rem;max-width:var(--measure);color:var(--ink-2)}

/* ---------- notice (the referral disclosure) ---------- */
.notice{background:var(--white);border-left:4px solid var(--signal-500);border-top:1px solid var(--line);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:var(--s5);font-size:.95rem;max-width:var(--measure)}
.notice p:last-child{margin-bottom:0}

/* ---------- colophon (footer) ---------- */
.colo{background:var(--navy-950);color:var(--on-navy-2);padding:var(--s8) 0 var(--s6)}
.colo__g{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--s6);
  padding-bottom:var(--s7);border-bottom:1px solid var(--on-navy-line)}
.colo h4{font-family:var(--mono);font-size:.68rem;color:var(--signal-500);margin:0 0 var(--s4);
  font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase}
.colo ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.colo a{color:var(--on-navy-2);text-decoration:none;font-size:var(--t-sm)}
.colo a:hover{color:var(--white)}
.colo__legal{padding-top:var(--s5);font-size:.85rem;max-width:82ch;margin: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.
   ========================================================================= */
.mast__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 (.mast__tel uses place-items:center), it reads as broken. */
.burger{display:none;appearance:none;background:transparent;border:1px solid var(--on-navy-line);
  border-radius:var(--r-sm);color:var(--on-navy);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)}
.mast__tel{display:inline-grid;place-items:center;min-width:44px;min-height:44px;
  border:1px solid var(--on-navy-line);border-radius:var(--r-sm);color:var(--on-navy);
  text-decoration:none}
.mast__tel:hover{color:var(--white);border-color:var(--on-navy)}

/* ---------- tablet: columns collapse, nav still inline ---------- */
@media(max-width:960px){
  .cidx__item{grid-template-columns:2.6rem minmax(0,1fr)}
  /* The price drops under the description, and the nowrap comes OFF with it:
     held on, the caveat ("per linear foot, typical range, not a quote") sets
     a min-content width no narrow track can honour. */
  .cidx__fig{grid-column:2;text-align:left;white-space:normal}
  .cidx__fig b,.cidx__fig small{white-space:normal}
  .colo__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 this site's .mast, on the template's .hdr, and on
     the differently-named header wrappers other sites in the estate use, 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}
  .mast__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-navy-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-navy-line)}
  .nav .act{justify-content:center;min-height:50px;margin-top:var(--s4);
    border-bottom:0;font-size:1rem}
  .nav .act+.act{margin-top:var(--s3)}
  .nav .act--call{display:none}   /* the sticky bar already carries this */

  /* The ribbon was three wrapped lines of boilerplate above the logo
     — roughly 340px of a 844px screen spent before the brand appeared. */
  .ribbon__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. */
  .ribbon__pitch,.ribbon__tail,.ribbon__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. */
  .tblk__cta{gap:var(--s3)}
  .tblk__cta .act,.callfirst .act{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 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 title-block 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. */
  .tblk 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 kicker 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. */
  .kicker{display:block}
  .kicker::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}

  /* 5. THE HANGING NUMERALS.
     The plate number and the clause numbers hang in a left margin that does
     not exist at this width — 4.5rem of gutter on a 390px screen leaves
     roughly 20 characters of measure. The grid collapses to one column and
     both revert to running inline above their heading, which keeps the
     numbering without the gutter. */
  .plate{grid-template-columns:minmax(0,1fr)}
  .plate>*,.plate__no{grid-column:1}
  .plate__no{margin:0 0 var(--s3)}
  .proc__ol li{padding-left:0;border-left:0;margin-left:0}
  .proc__ol li::before{position:static;display:block;margin-bottom:.2rem}
}

@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){
  .sheet,.ribbon__in,.navhost,.tblk,.plate,.proc__in,.stamp__in{
    padding-inline:var(--s5)}
  .tblk{padding-block:var(--s5) var(--s7)}
  .plate,.proc__in{padding-block:var(--s7)}
  .colo__g{grid-template-columns:1fr;gap:var(--s5)}
  /* Footer links were 20px tall and stacked 0.4rem apart — a column of
     near-unhittable targets. */
  .colo ul{gap:0}
  .colo a{display:inline-block;padding:.55rem 0;font-size:.95rem}
  .qa summary{padding-block:var(--s4)}
  .stamp__in{gap:var(--s4) var(--s5)}
  .dplate__r{border-right:0;border-bottom:1px solid var(--on-navy-line)}
  .dplate__r:last-child{border-bottom:0}
  /* 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. This matters more here than it did
     on the old layout: the cost schedule IS a table now. */
  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}
  .wl,.tide,.scour,.act{animation:none!important}
}


/* ---------- 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(8,21,33,.18);box-shadow:0 -6px 24px rgba(8,21,33,.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(--signal-500,#F2B705);color:var(--signal-ink,#1A1400)}
  .callbar__call:hover{background:var(--signal-600,#D89E00)}
  .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(--navy-800,#12304A);color:#fff;font-weight:700;
    font-size:.9rem;text-align:center;line-height:1.2}
  .callbar__form:hover{background:var(--navy-950,#081521)}
  /* Clear the bar so it never covers the footer. */
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
}