/* ===========================================================================
   Compare Toilet Hire: design system (Oct 2026 redesign)
   Native CSS. Two files make ONE system:
     styles.css    tokens, type, layout, buttons, forms, header + nav, footer, motion
     directory.css page components (crumbs, finder, tiles, provider rows, tables,
                   estimator, calculators, home sections)

   ---------------------------------------------------------------------------
   TOKENS
   Light by default, dark via prefers-color-scheme. Use tokens, never raw hex.
     --bg --surface --surface-2 --ink --ink-2 --muted --line --line-strong
     --accent --accent-hover --accent-ink --accent-tint --accent-line
     --warn-ink --warn-bg --warn-line   (semantic only: the Unconfirmed flag)
     --bad-ink --bad-bg                 (semantic only: errors)
   Shape lock: controls (buttons, inputs, chips, tags) radius var(--r-ctl) 10px;
   surfaces (cards, images, panels) var(--r-surf) 20px; pills only for count badges.
   Type: display (headlines only) Bricolage Grotesque; body Geist;
   figures Geist Mono + tabular-nums (class .mono, or any price/count).
   Spacing: 8px base. Container .wrap = 1200px, 20px gutters on phone.

   ---------------------------------------------------------------------------
   COMPONENTS (class, markup skeleton, variants)

   Buttons     <a class="btn btn-primary">Label</a>
               variants: btn-primary (accent fill; aliases btn-cta, btn-solid)
                         btn-ghost   (ink outline = secondary; alias btn-secondary)
                         btn-quiet   (text button, accent)
                         btn-lg, btn-sm, btn-row (flex wrapper)
               Icons inside: use build.icon('name'). Labels never wrap.
   Phone reveal  <button class="btn btn-ghost phone-reveal" data-p="slug"><svg/><span>Show phone</span></button>
               states: [disabled] loading, .is-error failed, a.phone-revealed shown.
               Contract (see functions/api): data-p slug, the label lives in the <span>.

   Crumbs      rendered by shell(crumbs=[(label, path), ...]); last item is the page.
               <nav class="crumbs"><div class="wrap"><ol><li><a/></li>...</ol></div></nav>
   Page hero   <section class="page-hero [page-hero--plain]"><div class="wrap page-hero-grid">
                 <div class="page-hero-copy"><h1/><p class="lede"/><div class="btn-row"/></div>
                 <figure class="page-hero-img"><img/></figure></div></section>
               Legacy .hero / .hero-tight render the same look with no image.
   Fact strip  <ul class="fact-strip"><li><svg/><span>Fact</span></li> x3</ul> (inside .wrap)
   Price hero  <div class="price-hero"><p class="price-hero-q">What does it cost?</p>
                 <div class="price-hero-items"><div class="price-hero-item">
                   <span class="price-hero-fig mono">$77</span>
                   <span class="price-hero-unit">per week, shower unit</span></div></div>
                 <p class="price-hero-note">...</p></div>
               Answer-first price summary for job pages. Figures only from verified data.
   Finder      build.finder(prefix, compact=False): two selects + "Show providers".
               Selects are hidden without JS; a <noscript> link list takes over.
   Switcher    build.switcher(rows): chip rows with counts. Row = (label, [(text, href,
               count, active)]). Markup: .switcher > .switcher-row > .switcher-label + .chips
               > a.chip[.is-active] > span (count badge, the only pill).
   Chips       <a class="chip">Text<span>12</span></a>  (.chip-primary = accent tint; legacy)
   Job bento   <div class="job-bento"><a class="job-tile [job-tile--wide]">
                 <img/ or .ph><span class="job-tile-body"><span class="job-tile-name"/>
                 <span class="job-tile-meta"/></span></a> x6 </div>   (2 wide + 4 square)
   State map   <div class="state-map"><a class="state-tile state-tile--wa" style="--n:.6">
                 <span class="state-abbr"/><span class="state-name"/><span class="state-n mono"/></a>...</div>
               Cartogram on a CSS grid; each tile is a link, --n (0..1) tints by provider count.
   Provider row  build.op_card(o) -> <article class="op-card [is-unconfirmed]">
                 .op-card-main (.op-card-name, .op-flag, .op-card-where, .op-card-tags)
                 .op-card-act (phone-reveal button + .btn-quiet "See details")
               Wrapped by build.op_list(ops) in <div class="ops">. Legacy .op / .op-* map here.
   Price table build.price_table(...) -> .ptable.ptable-stack (stacks to label/price pairs
               under 560px). Plain .ptable / .tscroll / .ptable.ref still work for any table.
   Next band   build.next_band(title, items, lede='', estimate=True): bottom-of-page step.
               <section class="next-band"><div class="wrap"><div class="next-band-inner">
                 .next-band-copy + ul.next-band-links > li > a.next-link</div></div></section>
   Page hero helper  build.page_hero(h1, lede, img=photo(...), after=html, cls=''): the markup above.
   Op group    build.op_group(ops, show=12, noun='providers', **kw): first rows visible, the
               rest in <details class="more"> (still in the HTML). Used on state and job pages.
   State group <div class="state-group"><div class="sg-head"><h3>Name<span class="count">n</span></h3><a/></div>
               op_group(...)</div>  (national job pages: one per state)
   Provider page  .pv-hero (.pv-where, .pv-tags, aside.pv-actions), .hire-grid > li.hire-item
               (icon + b + span), .action-bar (phone only, last child of main, sticks to the
               bottom of the screen), .more (details disclosure)
   Notes       .note (small muted), .claim (honesty note), .unconfirmed (long warn note),
               .trap, .method, .chart-card, .cta-band (legacy panels, restyled)
   Estimator   .est > .est-head + .est-body (fieldset > legend + .opts > label.opt) + .result
               (.result-label .result-figure .result-sub .breakdown > .brow[.mute]),
               .num-in number field, .src sources list. Unchanged markup, new skin.
   Footer      .site-footer > .footer-grid (.footer-brand, .footer-col) + .footer-bottom;
               .start-band is the "start again" finder band above it.
   Motion      Add data-reveal to a block to fade/slide it in once (JS adds .is-in).
               Everything is static under prefers-reduced-motion.
   =========================================================================== */

/* ---------- Fonts: self-hosted, latin, variable ---------- */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light dark;

  --bg: #F2F5F8;
  --surface: #FBFCFD;
  --surface-2: #E9EEF4;
  --ink: #0E1B2B;
  --ink-2: #3B4A5C;
  --muted: #566478;
  --line: #DAE1E9;
  --line-strong: #8793A3;          /* control borders: 3:1 against the surface */

  --accent: #2A56D6;
  --accent-hover: #2147B5;
  --accent-ink: #F7F9FF;
  --accent-tint: #E5ECFB;
  --accent-line: #BFD0F4;

  --warn-ink: #7A4B00;
  --warn-bg: #FFF1D6;
  --warn-line: #E2BC6B;
  --bad-ink: #8A1F1F;
  --bad-bg: #FCE9E9;

  --ph: #3C5272;                    /* flat placeholder while a photo is missing */
  --scrim: 14 27 43;                /* rgb triplet for photo scrims */

  --footer-bg: #0E1B2B;
  --footer-ink: #B6C2D1;
  --footer-head: #E8EEF5;
  --footer-line: rgb(232 238 245 / .14);

  --shadow-1: 0 1px 2px rgb(14 27 43 / .06), 0 4px 14px rgb(14 27 43 / .06);
  --shadow-2: 0 2px 6px rgb(14 27 43 / .06), 0 18px 40px rgb(14 27 43 / .10);

  --font-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --wrap: 1200px;
  --gutter: 20px;
  --header-h: 68px;
  --r-ctl: 10px;
  --r-surf: 20px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  --z-header: 50;
  --z-bar: 40;                      /* phone contact bar on provider pages */

  /* Legacy names so un-migrated pages keep working */
  --paper: var(--bg);
  --paper-2: var(--surface-2);
  --white: var(--surface);
  --ink-3: var(--muted);
  --cta: var(--accent);
  --cta-ink: var(--accent-ink);
  --radius: var(--r-ctl);
  --radius-lg: var(--r-surf);
  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-2);
  --shadow-lg: var(--shadow-2);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B121B;
    --surface: #121B27;
    --surface-2: #17222F;
    --ink: #E8EEF5;
    --ink-2: #B6C2D1;
    --muted: #93A1B3;
    --line: #243244;
    --line-strong: #62748B;

    --accent: #7C9BFF;
    --accent-hover: #9DB4FF;
    --accent-ink: #0B121B;
    --accent-tint: #16233F;
    --accent-line: #2C4170;

    --warn-ink: #F2C879;
    --warn-bg: #2B2110;
    --warn-line: #6B5322;
    --bad-ink: #F4A3A3;
    --bad-bg: #2D1517;

    --ph: #1B2A40;
    --scrim: 6 10 16;

    --footer-bg: #080E15;
    --footer-ink: #A9B6C6;
    --footer-head: #E8EEF5;

    --shadow-1: 0 1px 2px rgb(2 6 12 / .4), 0 4px 14px rgb(2 6 12 / .3);
    --shadow-2: 0 2px 6px rgb(2 6 12 / .4), 0 18px 40px rgb(2 6 12 / .45);
  }
}

/* ---------- Base ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html:has(.site-header[data-open="true"]) { overflow: hidden; }
main:focus { outline: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.5rem); line-height: 1.04; letter-spacing: -0.032em; }
h2 { font-size: clamp(1.65rem, 1.1rem + 1.9vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); line-height: 1.25; letter-spacing: -0.015em; }
h4 { font-size: 1rem; }
em, .em { font-style: italic; font-weight: inherit; }   /* same-family emphasis only */

p { margin: 0 0 1.1em; text-wrap: pretty; }
li, figcaption, dd { text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.lede { font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem); color: var(--ink-2); line-height: 1.55; max-width: 62ch; }

/* ---------- Layout ---------- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 780px; }

section { padding-block: clamp(48px, 3rem + 3.5vw, 96px); }
.section-tint { background: var(--accent-tint); }
.section-paper2 { background: var(--surface-2); }

.stack-lg > * + * { margin-top: clamp(1.75rem, 3.5vw, 3rem); }
.mt-lg { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.visually-hidden:focus {
  position: fixed; left: 12px; top: 12px; width: auto; height: auto; margin: 0; padding: .7rem 1rem;
  clip: auto; overflow: visible; background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r-ctl); z-index: 100; text-decoration: none; font-weight: 600;
}

/* Legacy small label: now plain context text, not a tracked uppercase eyebrow */
.eyebrow { font-size: .9rem; font-weight: 500; color: var(--muted); margin: 0 0 .7rem; }
.eyebrow a { color: var(--muted); }
.eyebrow a:hover { color: var(--accent); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px;
  padding: .7rem 1.25rem;
  font: 600 .97rem/1.1 var(--font-body);
  color: var(--ink);
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: var(--r-ctl);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms var(--ease), background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.btn:hover { transform: translateY(-1px); color: var(--ink); }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn-primary, .btn-cta, .btn-solid { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover, .btn-cta:hover, .btn-solid:hover {
  background: var(--accent-hover); color: var(--accent-ink);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 32%, transparent);
}

.btn-ghost, .btn-secondary { border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover, .btn-secondary:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }

.btn-quiet { color: var(--accent); padding-inline: .8rem; }
.btn-quiet:hover { background: var(--accent-tint); color: var(--accent-hover); }

.btn-lg { min-height: 54px; font-size: 1.05rem; padding: .9rem 1.6rem; }
.btn-sm { min-height: 40px; font-size: .92rem; padding: .5rem .95rem; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: progress; }
/* Narrow phones: a long label wraps inside the button instead of pushing the page sideways.
   Desktop and normal phones keep the one-line label. */
.btn { max-width: 100%; }
@media (max-width: 379px) {
  .btn { white-space: normal; text-align: center; line-height: 1.2; }
}

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* Phone reveal states (the script swaps the label inside the span) */
.phone-reveal { font-family: var(--font-body); }
.phone-reveal span { font-variant-numeric: tabular-nums; }
.phone-reveal[disabled], .phone-reveal[aria-disabled="true"] { opacity: .75; }
@media (prefers-reduced-motion: no-preference) {
  .phone-reveal[disabled], .phone-reveal[aria-disabled="true"] { animation: pulse 1.1s ease-in-out infinite; }
}
@keyframes pulse { 50% { opacity: .45; } }
.phone-reveal.is-error { border-color: var(--warn-ink); color: var(--warn-ink); background: var(--warn-bg); }
.phone-revealed { font-family: var(--font-body); }
.phone-revealed span { font-family: var(--font-mono); letter-spacing: -0.02em; }

/* ---------- Forms ---------- */

label { font-size: .9rem; font-weight: 600; color: var(--ink); }
label .opt { font-weight: 450; color: var(--muted); }

input, select, textarea {
  font: inherit; font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-ctl);
  padding: .7rem .95rem;
  min-height: 48px;
  width: 100%;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
textarea { resize: vertical; min-height: 118px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent);
}
::placeholder { color: var(--muted); opacity: 1; }

/* A select with a Phosphor caret laid over it */
.select { position: relative; display: block; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; cursor: pointer; }
.select > svg { position: absolute; right: .9rem; top: 50%; width: 16px; height: 16px; margin-top: -8px; pointer-events: none; color: var(--ink-2); }

.form-grid { display: grid; gap: 1rem; }
.field { display: grid; gap: .4rem; }
.form-note { font-size: .86rem; color: var(--muted); }
.form-status { display: none; border-radius: var(--r-ctl); padding: .9rem 1.1rem; font-size: .95rem; font-weight: 500; }
.form-status[data-state="ok"] { display: block; background: var(--accent-tint); border: 1px solid var(--accent-line); color: var(--ink); }
.form-status[data-state="err"] { display: block; background: var(--bad-bg); border: 1px solid var(--bad-ink); color: var(--bad-ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Header + navigation ---------- */

.stuck-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; visibility: hidden; }

.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.site-header[data-stuck="true"], .site-header[data-open="true"] { border-bottom-color: var(--line); }
/* backdrop-filter would make the fixed menu sheet size itself to the header */
.site-header[data-open="true"] { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }

.header-inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.header-inner > .brand { margin-right: auto; }

.brand { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; text-decoration: none; color: var(--ink); flex: none; }
.brand:hover { color: var(--ink); }
.brand-mark { width: 32px; height: 32px; flex: none; }
.bm-bg { fill: var(--accent); }
.bm-fg { fill: var(--accent-ink); }
/* legacy header wordmark parts */
.brand-text { display: contents; }
.brand-where { display: none; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; letter-spacing: -0.03em; white-space: nowrap; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-ctl);
  background: transparent; color: var(--ink); cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .ico-close { display: none; }
.site-header[data-open="true"] .nav-toggle .ico-open { display: none; }
.site-header[data-open="true"] .nav-toggle .ico-close { display: block; }
.nav-toggle-label { font-size: .85rem; }

/* Phone and tablet: full-screen sheet. All jobs, states and tools are visible, so
   every destination is two taps away (menu, then the link). */
/* The sheet is a column: the list scrolls, the Estimate bar sits below it and never covers a row. */
.nav-primary {
  display: none;
  position: fixed; inset: var(--header-h) 0 0 0;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}
.site-header[data-open="true"] .nav-primary { display: flex; }
.header-inner > .btn { display: none; }

.nav-list { list-style: none; margin: 0; padding: .25rem var(--gutter) 1rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-bottom: 1px solid var(--line); }
.nav-item { border-bottom: 1px solid var(--line); padding-block: 1rem; }
.nav-item:last-child { border-bottom: 0; }
.nav-trigger { display: none; }
.nav-link { display: flex; align-items: center; gap: .85rem; min-height: 52px; padding: .55rem .5rem; border-radius: var(--r-ctl); color: var(--ink); text-decoration: none; }
.nav-link:hover { background: var(--accent-tint); color: var(--ink); }
.nav-link > .ico { width: 22px; height: 22px; color: var(--accent); flex: none; }
.nav-link[aria-current="page"] .np-name { color: var(--accent); }
.nav-item--cost { padding-block: .6rem; }
.nav-panel-title { display: block; margin: 0 0 .4rem; font: 650 1.2rem var(--font-display); letter-spacing: -.02em; }

.nav-panel { display: block; }
.np-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.np-link {
  display: flex; align-items: center; gap: .85rem;
  min-height: 52px; padding: .55rem .5rem; border-radius: var(--r-ctl);
  color: var(--ink); text-decoration: none;
}
.np-link:hover { background: var(--accent-tint); color: var(--ink); }
.np-link > .ico { width: 22px; height: 22px; color: var(--accent); flex: none; }
.np-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.np-name { font-weight: 600; }
.np-desc { font-size: .86rem; color: var(--muted); }
.np-link[aria-current="page"] .np-name { color: var(--accent); }
.np-code { display: inline-flex; flex: none; width: 2.7rem; font: 700 .86rem var(--font-mono); letter-spacing: -.01em; color: var(--accent); }
.np-states { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; }
.np-states .np-link { min-height: 48px; }
.np-states .np-name { white-space: nowrap; }
.np-states .np-link > .ico { display: none; }
@media (min-width: 640px) {
  /* two columns reading down, NSW VIC QLD WA then SA TAS ACT NT: the footer uses the same order */
  .np-states { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: .75rem; }
}

.count {
  flex: none; display: inline-block;
  min-width: 1.9em; padding: .12em .6em;
  font: 600 .78rem/1.5 var(--font-mono); font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--ink-2); background: var(--surface-2);
  border-radius: 100px;                    /* the only pill: count badges */
}

.nav-cta-sheet { flex: none; margin: .75rem var(--gutter) calc(.9rem + env(safe-area-inset-bottom)); min-height: 54px; }

/* Desktop: one line, panels drop below their trigger */
@media (min-width: 961px) {
  .nav-toggle { display: none; }
  .header-inner > .btn { display: inline-flex; }
  .nav-cta-sheet { display: none; }
  .header-inner { gap: 1.5rem; }
  .header-inner > .brand { margin-right: 0; }

  .nav-primary {
    display: block; position: static; inset: auto; background: none; overflow: visible; padding: 0;
    margin-right: auto;
  }
  .nav-list { display: flex; align-items: center; gap: .15rem; padding: 0; overflow: visible; flex: none; border: 0; }
  .np-code { display: none; }
  .np-states .np-link > .ico { display: block; }
  .nav-item--cost { padding: 0; }
  .nav-link > .ico, .nav-link .np-desc { display: none; }
  .nav-link .np-text { flex: none; }
  .nav-link .np-name { font-weight: inherit; }
  .nav-item { position: relative; border: 0; padding: 0; }
  .nav-panel-title { display: none; }
  .nav-trigger, .nav-link {
    display: inline-flex; align-items: center; gap: .35rem;
    min-height: 44px; padding: .45rem .8rem;
    font: 560 .96rem var(--font-body); letter-spacing: 0;
    color: var(--ink-2); background: none; border: 0; border-radius: var(--r-ctl);
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: color 160ms var(--ease), background-color 160ms var(--ease);
  }
  .nav-trigger:hover, .nav-link:hover, .nav-item[data-open="true"] > .nav-trigger { color: var(--ink); background: var(--accent-tint); }
  .nav-trigger svg { width: 12px; height: 12px; transition: transform 160ms var(--ease); }
  .nav-item[data-open="true"] > .nav-trigger svg { transform: rotate(180deg); }
  .nav-link[aria-current="page"], .nav-item.is-current > .nav-trigger { color: var(--accent); }

  .nav-panel {
    position: absolute; top: calc(100% + 10px); left: -.5rem;
    width: 28rem; max-width: calc(100vw - 2 * var(--gutter));
    padding: .6rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-surf);
    box-shadow: var(--shadow-2);
    display: none;
  }
  .nav-panel--jobs { width: 29rem; }
  .nav-panel--states { width: 35rem; }
  .nav-panel--tools { width: 31rem; }
  .nav-item:last-child > .nav-panel { left: auto; right: -.5rem; }

  .nav-item[data-open="true"] > .nav-panel { display: block; }
  /* Without JS the panels open on hover and keyboard focus */
  html:not(.js) .nav-item:hover > .nav-panel, html:not(.js) .nav-item:focus-within > .nav-panel { display: block; }
}
@media (min-width: 961px) and (max-width: 1100px) { .brand-name { font-size: 1.05rem; } }

/* Legacy header markup (hand-written cost page): flat links, same look */
.nav { display: none; }
@media (min-width: 961px) {
  .nav { display: flex; align-items: center; gap: .15rem; margin-right: auto; }
  .nav a { font-size: .96rem; font-weight: 560; text-decoration: none; color: var(--ink-2); padding: .5rem .8rem; border-radius: var(--r-ctl); }
  .nav a:hover { color: var(--ink); background: var(--accent-tint); }
  .nav a[aria-current="page"] { color: var(--accent); }
}
@media (max-width: 960px) {
  .site-header[data-open="true"] .nav {
    display: flex; flex-direction: column; position: absolute; inset: var(--header-h) 0 auto;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: .5rem var(--gutter) 1rem;
  }
  .site-header[data-open="true"] .nav a { padding: .85rem .4rem; font-size: 1.1rem; text-decoration: none; color: var(--ink); }
}

/* ---------- Footer ---------- */

.site-footer { background: var(--footer-bg); color: var(--footer-ink); padding-block: clamp(44px, 3rem + 2vw, 72px) 0; margin-top: 0; border-top: 1px solid var(--line); }
.site-footer a { color: var(--footer-ink); text-decoration: none; transition: color 160ms var(--ease); }
.site-footer a:hover { color: var(--footer-head); text-decoration: underline; text-underline-offset: .2em; }
.site-footer :focus-visible { outline-color: var(--footer-head); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1.6fr .8fr 1.3fr; gap: 2rem; }
.footer-brand .brand { color: var(--footer-head); }
.footer-brand .brand-name { color: var(--footer-head); }
.footer-brand p { margin-top: 1rem; font-size: .95rem; max-width: 34ch; }
.footer-h { color: var(--footer-head); font: 600 .95rem var(--font-body); letter-spacing: 0; margin: 0 0 .9rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .95rem; }
/* same order as the nav panel: two columns reading down, NSW VIC QLD WA then SA TAS ACT NT */
.footer-col--states ul { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 1rem; }
@media (max-width: 820px) {
  .footer-col ul { gap: 0; }
  .footer-col li a { display: inline-block; padding-block: .65rem; }
}
.footer-bottom {
  border-top: 1px solid var(--footer-line); margin-top: 2.5rem; padding-block: 1.4rem 1.8rem;
  font-size: .88rem; display: grid; gap: .5rem;
}
.footer-bottom p { margin: 0; max-width: 70ch; }
@media (max-width: 820px) { .footer-bottom a { display: inline-block; padding-block: .65rem; } }
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Photos in dark mode: tone down the glare, keep the picture ---------- */

@media (prefers-color-scheme: dark) {
  img.photo { filter: brightness(.88) contrast(1.02); }
}

/* ---------- Motion ---------- */

.reveal-on [data-reveal] {
  opacity: 0; transform: translateY(12px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }

@media print { .reveal-on [data-reveal] { opacity: 1 !important; transform: none !important; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-on [data-reveal] { opacity: 1; transform: none; }
  .btn:hover, .btn:active { transform: none; }
}