/* Mechanic Sorted. Tokens from brand/brand-colours.css (guidelines, 3 Nov 2026); layout and device rules in DESIGN.md.
   Light pages, soot type, oxblood for the one thing to tap, amber only for lit states. Square buttons, no icons in them.
   The gear card is the one ask on every page. No houses, no streets, no rounded pills. */

@font-face { font-family: "Encode Sans Semi Expanded"; font-style: normal; font-weight: 800; font-display: swap;
  src: url(/assets/fonts/encode-sans-semi-expanded-800-latin.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/fonts/instrument-sans-var-latin.woff2) format("woff2"); }
@font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/martian-mono-500-latin.woff2) format("woff2"); }

:root {
  --soot: #1D1B1C; --soot-2: #2A2829; --slot: #3A3739; --oxblood: #5E2A2C; --oxblood-dark: #4A2022;
  --steel: #AFBAC1; --amber: #E8A33D; --page: #F5F6F7; --mist: #E9ECEE; --line: #DCE0E3; --slate: #5B5F65;
  --white: #FFFFFF; --on-soot: #E6E7EA; --on-soot-quiet: #B9BCC4; --err-dark: #FFB4A6; --err: #8E2B22;
  --disp: "Encode Sans Semi Expanded", "Arial Black", Arial, sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, Menlo, monospace;
  --shift: cubic-bezier(.3, 1.25, .5, 1);
  --gut: 16px;
}
@media (min-width: 760px) { :root { --gut: 28px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 12px; }
body { margin: 0; background: var(--page); color: var(--soot); font: 400 17px/1.55 var(--body); overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: var(--oxblood); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--oxblood-dark); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--oxblood); outline-offset: 2px; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--soot); color: #fff; padding: 10px 14px; }
.skip:focus { left: 8px; }
h1, h2, h3 { font-family: var(--disp); font-weight: 800; letter-spacing: -.012em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(1.85rem, 1.15rem + 2.9vw, 3.375rem); line-height: 1.04; }
h2 { font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.125rem); line-height: 1.1; margin-bottom: .5em; }
h3 { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.2; }
p { margin: 0 0 1em; }
.eyebrow { font: 500 12.5px/1.4 var(--mono); color: var(--slate); margin: 0 0 10px; letter-spacing: .01em; }
.small { font-size: 14px; color: var(--slate); }
.optional { font-weight: 400; color: inherit; opacity: .8; }

/* ---------- buttons: square corners, oxblood, no icon ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border: 0;
  border-radius: 3px; background: var(--oxblood); color: #fff; font: 700 16px/1.2 var(--body); text-decoration: none; cursor: pointer;
  transition: background .15s, transform .12s; }
.btn:hover { background: var(--oxblood-dark); color: #fff; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.block { display: flex; width: 100%; }
.btn.ring { box-shadow: inset 0 0 0 2px #fff; }
.btn[disabled] { opacity: .75; cursor: progress; }
.linkish { background: none; border: 0; padding: 6px 0; color: inherit; font: 600 15px var(--body); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; min-height: 44px; }

/* ---------- the logo ---------- */
.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--soot); }
.lockup { display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; line-height: 1; font-size: 21px; }
.lockup .knob { width: 1.8em; height: 1.8em; flex: none; }
.lk-word { font-family: var(--disp); font-weight: 800; letter-spacing: -.01em; }
.lockup.on-dark .lk-word { color: #fff; }
.odo { display: inline-flex; gap: .07em; }
.odo .w { position: relative; width: .86em; height: 1.24em; overflow: hidden; background: var(--soot); border-radius: .1em; display: inline-block; }
.lockup.on-dark .odo .w { background: #3A3739; }
.odo .w.red, .lockup.on-dark .odo .w.red { background: var(--oxblood); }
.odo .strip { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; transform: translateY(-1.24em); }
.odo .w.red .strip { transform: translateY(calc(-1.24em + .2em)); }
.odo .strip b { height: 1.24em; display: grid; place-items: center; color: #fff; font: 800 .92em/1 var(--disp); flex: none; }
.odo .w::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.5)); }
.lockup-phone { display: none; align-items: center; gap: 8px; white-space: nowrap; }
.lockup-phone .knob { width: 30px; height: 30px; flex: none; }
.lockup-phone .lk-word { font-size: 17px; }
.lockup-phone .lk-word b { color: var(--oxblood); font-weight: 800; }

/* ---------- header ---------- */
.site-head { background: #fff; border-bottom: 1px solid var(--line); position: relative; z-index: 30; }
.head-in { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.mainnav { margin-left: auto; }
.mainnav > ul { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; align-items: center; }
.mainnav .dd { display: flex; align-items: center; }
.dd-top { display: inline-block; padding: 10px 6px 10px 10px; color: var(--soot); font: 600 16px var(--body); text-decoration: none; }
.dd-top.plain { padding-right: 10px; }
.dd-top:hover { color: var(--oxblood); }
.dd-btn { background: none; border: 0; padding: 8px 6px; color: var(--slate); cursor: pointer; display: inline-flex; min-height: 40px; align-items: center; }
.dd-btn .chev { width: 16px; height: 16px; transition: transform .2s; }
.dd.open .dd-btn .chev { transform: rotate(180deg); }
.dd-panel { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px -24px rgba(29,27,28,.5); }
.dd.open .dd-panel { display: block; }
@media (hover: hover) and (min-width: 960px) { .dd:not(.shut):hover .dd-panel { display: block; } }
.dd-in { display: grid; grid-template-columns: 1fr 320px; gap: 40px; padding-top: 28px; padding-bottom: 30px; }
.dd-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 28px; align-content: start; }
.dd-h { font: 500 12.5px var(--mono); color: var(--slate); margin: 0 0 8px; }
.dd-g ul { list-style: none; margin: 0; padding: 0; }
.dd-g a { display: block; padding: 7px 0; color: var(--soot); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--mist); }
.dd-g a:hover { color: var(--oxblood); }
.dd-all { grid-column: 1 / -1; font-weight: 700; margin-top: 10px; }
.dd-side { background: var(--page); border: 1px solid var(--line); border-radius: 6px; padding: 20px; align-self: start; }
.dd-side p { font-size: 15.5px; }
.head-cta { margin-left: 4px; }
.menu-btn { display: none; margin-left: auto; min-height: 44px; min-width: 64px; padding: 8px 14px; background: #fff; color: var(--soot);
  border: 1.5px solid var(--soot); border-radius: 3px; font: 700 15px var(--body); cursor: pointer; }
.site-head.slim .head-in { min-height: 64px; }
@media (max-width: 959px) {
  .lockup { display: none; }
  .lockup-phone { display: inline-flex; }
  .mainnav { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .head-in { gap: 10px; min-height: 62px; }
  .head-cta { margin-left: auto; padding: 10px 14px; min-height: 44px; font-size: 15px; }
  .head-cta + .menu-btn { margin-left: 0; }
  .site-head.slim .lockup-phone { display: inline-flex; }
}
@media (max-width: 479px) { .head-cta { display: none; } }

/* phone menu: full screen, accordions */
.mobile-nav { display: none; position: fixed; inset: 0; z-index: 60; background: #fff; overflow-y: auto; padding: 0 var(--gut) 40px; }
.mobile-nav.open { display: block; }
html.menu-open { overflow: hidden; }
.mn-head { display: flex; align-items: center; justify-content: space-between; min-height: 62px; border-bottom: 1px solid var(--line); margin: 0 calc(var(--gut) * -1) 8px; padding: 0 var(--gut); }
.mn-close { background: none; border: 1.5px solid var(--soot); border-radius: 3px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--soot); cursor: pointer; }
.mn-close .ic { width: 22px; height: 22px; }
.mn-sec { border-bottom: 1px solid var(--line); }
.mn-sec summary, .mn-plain { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 0;
  font: 800 1.25rem var(--disp); cursor: pointer; color: var(--soot); text-decoration: none; min-height: 56px; }
.mn-plain { border-bottom: 1px solid var(--line); }
.mn-sec summary::-webkit-details-marker { display: none; }
.mn-sec summary .chev { width: 22px; height: 22px; transition: transform .2s; }
.mn-sec[open] summary .chev { transform: rotate(180deg); }
.mn-body { padding: 0 0 16px; }
.mn-h { font: 500 12.5px var(--mono); color: var(--slate); margin: 10px 0 4px; }
.mn-body ul { list-style: none; margin: 0; padding: 0; }
.mn-body a { display: block; padding: 10px 0; color: var(--soot); text-decoration: none; font-weight: 600; }
.mn-all { font-weight: 700 !important; color: var(--oxblood) !important; }
.mobile-nav .btn { margin: 22px 0 8px; }
.mn-search { display: flex; align-items: center; gap: 10px; padding: 12px 0; color: var(--soot); font-weight: 600; text-decoration: none; }
.mn-search .ic { width: 22px; height: 22px; }

/* ---------- the gear card ---------- */
.gear { background: var(--soot); color: #fff; border-radius: 12px; padding: 18px; position: relative; }
.gear-top { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: center; margin-bottom: 14px; }
.gate { width: 92px; height: auto; display: block; overflow: visible; }
.knobdot { transition: transform .42s var(--shift); }
.gear-state { font: 500 11.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-soot-quiet); margin: 0 0 6px; }
.gear-q { font: 800 1.32rem/1.15 var(--disp); margin: 0; color: #fff; letter-spacing: -.01em; }
.gear fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.jb { position: relative; }
.jb input, .mk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jb label { display: flex; align-items: center; gap: 10px; min-height: 56px; height: 100%; padding: 9px 11px; border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 4px; color: var(--on-soot); font: 600 15px/1.25 var(--body); cursor: pointer; transition: border-color .15s, background .15s; }
.jb label .ic { width: 26px; height: 26px; flex: none; color: #fff; }
.jb label:hover { border-color: rgba(255,255,255,.55); }
.jb input:checked + label { border-color: var(--amber); background: rgba(232,163,61,.09); }
.jb input:checked + label .ic { color: var(--amber); }
.jb input:focus-visible + label { outline: 3px solid var(--amber); outline-offset: 2px; }
.jb.urgent { grid-column: 1 / -1; }
.jb.urgent label { background: var(--oxblood); border-color: #7C3B3E; color: #fff; font-weight: 700; }
.jb.urgent label:hover { border-color: #fff; }
.jb.urgent input:checked + label { border-color: var(--amber); }
.jb:last-child { grid-column: 1 / -1; }
.safety { grid-column: 1 / -1; font-size: 14px; line-height: 1.45; color: var(--on-soot); margin: 2px 0 6px; }
.safety.urgent-line { border: 1px solid rgba(255,255,255,.22); border-radius: 4px; padding: 10px 12px; margin-bottom: 12px; }
.makes { display: flex; flex-wrap: wrap; gap: 8px; }
.mk span, .models button { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 13px; border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 4px; color: var(--on-soot); font: 600 15px var(--body); cursor: pointer; background: transparent; }
.mk span:hover, .models button:hover { border-color: rgba(255,255,255,.55); }
.mk input:checked + span { border-color: var(--amber); color: #fff; background: rgba(232,163,61,.09); }
.mk input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 2px; }
.models { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.models:empty { display: none; }
.models button.on { border-color: var(--amber); }
.pane-q { font: 600 15px var(--body); color: var(--on-soot); margin: 0 0 8px; }
.gear .field { margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.gear label, .gear .field > label { font: 600 15px var(--body); color: var(--on-soot); }
.gear input[type="text"], .gear input:not([type]), .gear input[type="tel"], .gear input[type="email"], .gear select, .gear textarea {
  width: 100%; min-height: 50px; padding: 11px 13px; background: var(--soot-2); color: #fff; border: 1.5px solid #5A5557; border-radius: 4px;
  font: 400 17px var(--body); }
.gear select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.gear textarea { min-height: 90px; resize: vertical; }
.gear ::placeholder { color: #9A9DA4; }
.gear input:focus-visible, .gear select:focus-visible, .gear textarea:focus-visible { outline: 3px solid var(--amber); outline-offset: 1px; }
.gear [aria-invalid="true"] { border-color: var(--err-dark); }
.gear .hint { font-size: 14px; color: var(--on-soot-quiet); }
.gear .ferr, .gear .err { color: var(--err-dark); font-size: 14.5px; font-weight: 600; }
.gear .err:empty, .gear .ferr:empty { display: none; }
.gear .err { margin: 10px 0 0; }
.gear .linkish { color: #fff; margin-top: 6px; }
.consent { display: flex !important; gap: 12px; align-items: flex-start; margin-top: 16px; font-weight: 400 !important; font-size: 15px !important; line-height: 1.45; cursor: pointer; }
.consent input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--amber); }
.fineprint { font-size: 13.5px; color: var(--on-soot-quiet); margin: 10px 0 0; }
.fineprint a { color: #fff; }
.captcha { margin-top: 14px; min-height: 78px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.step-nav { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.gear .btn { box-shadow: inset 0 0 0 2px #fff; min-width: 120px; }
.gear .btn.send { flex: 1; }
.back { background: none; border: 0; color: var(--on-soot); font: 600 15px var(--body); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; min-height: 44px; padding: 6px 2px; }
.back:hover { color: #fff; }
.gear .back:focus-visible, .gear .btn:focus-visible, .gear .linkish:focus-visible, .gear a:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.gear-foot { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); font-size: 14.5px; color: var(--on-soot); font-weight: 600; }
.knobs li::before, .trust li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--oxblood); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--steel); flex: none; }
.gear .step { display: none; }
.gear .step.on { display: block; }
.gear.home, .gear.quote { padding: 20px; }
@media (min-width: 760px) {
  .gear { padding: 22px; }
  .gate { width: 104px; }
  .gear-top { grid-template-columns: 104px 1fr; gap: 20px; }
  .gear-q { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .knobdot, .btn, .jb label, .dd-btn .chev { transition: none !important; } html { scroll-behavior: auto !important; } }

/* ---------- home ---------- */
.hero { padding: 22px 0 34px; }
.hero-grid { display: grid; gap: 18px; }
.hero-text h1 { max-width: 15ch; }
.h1-sub { font-size: 1.12rem; color: var(--slate); margin: 12px 0 0; max-width: 40ch; }
.hero-more { margin: 14px 0 0; font-size: 15px; font-weight: 600; }
@media (max-width: 759px) { .hero-more { display: none; } }
@media (min-width: 1000px) {
  .hero { padding: 54px 0 64px; }
  .hero-grid { grid-template-columns: minmax(440px, 520px) 1fr; grid-template-areas: "card text"; gap: 64px; align-items: center; }
  .hero-text { grid-area: text; }
  .hero-card { grid-area: card; }
  .h1-sub { font-size: 1.25rem; }
}
.checks { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 40px 0; }
.checks-grid { display: grid; gap: 20px; }
.checks-lead { font: 800 1.15rem/1.35 var(--disp); }
.checks.slim { border-top: 0; padding: 30px 0 34px; }
.checks.slim h2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); }
@media (min-width: 900px) { .checks-grid { grid-template-columns: 5fr 6fr; gap: 60px; } }
.knobs { list-style: none; margin: 0 0 1em; padding: 0; }
.knobs li { display: flex; gap: 14px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--mist); }
.knobs li:last-child { border-bottom: 0; }
.knobs li::before { transform: translateY(1px); }
.how { background: var(--soot); color: #fff; padding: 52px 0; }
.how a:not(.btn) { color: #fff; }
.how-grid { display: grid; gap: 34px; align-items: center; }
.how-text p { color: var(--on-soot); max-width: 52ch; }
@media (min-width: 900px) { .how-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.gearmap { position: relative; color: var(--slot); }
.gm-h { position: absolute; left: 0; right: 0; top: 30px; bottom: 30px; width: 100%; height: calc(100% - 60px); }
.gearmap ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "g1 g3 g5" "gap gap gap" "g2 g4 gR"; grid-template-rows: auto 64px auto; text-align: center; }
.gearmap li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; }
.gearmap .g1 { grid-area: g1; } .gearmap .g2 { grid-area: g2; } .gearmap .g3 { grid-area: g3; }
.gearmap .g4 { grid-area: g4; } .gearmap .g5 { grid-area: g5; } .gearmap .gR { grid-area: gR; }
.gearmap li b { font: 800 1.4rem/1 var(--disp); color: #8F939C; background: var(--soot); padding: 4px 8px; }
.gearmap li span { font-size: 14.5px; color: var(--on-soot); background: var(--soot); padding: 2px 6px; line-height: 1.3; }
.gearmap li.lit b { color: var(--amber); }
.gearmap li.lit span { color: #fff; font-weight: 700; }
.gearmap li.lit::after { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--oxblood); box-shadow: 0 0 0 3px #fff; margin-top: 8px; order: 3; }
.dash-sec { padding: 56px 0; }
.sec-head { display: grid; gap: 10px; margin-bottom: 24px; }
.sec-head h2 { margin: 0; }
.sec-head p { color: var(--slate); max-width: 60ch; margin: 0; }
@media (min-width: 900px) { .sec-head { grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; } }
.dashgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.dashgrid li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.dash { display: grid; grid-template-columns: 34px 1fr; gap: 4px 14px; padding: 22px; color: var(--soot); text-decoration: none; height: 100%; }
.dash .ic { width: 32px; height: 32px; grid-row: span 2; color: var(--soot); }
.dash:hover { background: var(--page); color: var(--soot); }
.dash:hover .ic { color: var(--oxblood); }
.dash-t { font: 800 1.1rem/1.2 var(--disp); }
.dash-b { font-size: 15px; color: var(--slate); }
.makes-sec { background: var(--mist); padding: 48px 0; }
.makes-grid { display: grid; gap: 18px; }
@media (min-width: 900px) { .makes-grid { grid-template-columns: 4fr 7fr; gap: 60px; } }
.makerow { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.makerow li { font: 800 1.05rem/1.6 var(--disp); color: var(--slate); }
.makerow a { color: var(--oxblood); }
.two-sec { padding: 56px 0; }
.two-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .two-grid { grid-template-columns: 1fr 1fr; gap: 72px; } }
.near > p { color: var(--slate); }
.place-col h3 { margin: 14px 0 8px; }
.place-col h3 a { color: var(--soot); text-decoration: none; }
.place-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.place-col li a, .chips a { display: inline-flex; min-height: 40px; align-items: center; padding: 8px 13px; background: #fff; border: 1px solid var(--line); border-radius: 3px; color: var(--soot); text-decoration: none; font-weight: 600; font-size: 15.5px; }
.place-col li a:hover, .chips a:hover { border-color: var(--soot); color: var(--oxblood); }
.guidelist { list-style: none; margin: 14px 0 0; padding: 0; border-top: 2px solid var(--soot); }
.guidelist a { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--soot); text-decoration: none; }
.gl-t { font: 800 1.12rem/1.25 var(--disp); }
.gl-b { color: var(--slate); font-size: 15.5px; }
.guidelist a:hover .gl-t { color: var(--oxblood); }

/* ---------- content page hero ---------- */
.phero { padding: 16px 0 26px; }
.phero-grid { display: grid; gap: 16px; }
.crumbs ol { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 14px; color: var(--slate); }
.crumbs li + li::before { content: "/"; color: var(--steel); margin: 0 8px; }
.crumbs a { color: var(--slate); }
.ph-text h1 { max-width: 20ch; }
.ph-text .lede { font-size: 1.08rem; margin: 14px 0 0; max-width: 58ch; }
.lede-rest { display: none; }
@media (max-width: 999px) {
  .phero .lede .l2 { display: none; }
  .lede-rest { display: block; font-size: 1.05rem; margin: 18px 0 0; }
  .phero .eyebrow { display: none; }
}
@media (min-width: 1000px) {
  .phero { padding: 30px 0 40px; }
  .phero-grid { grid-template-columns: 1fr minmax(420px, 480px); grid-template-areas: "text card"; gap: 60px; align-items: start; }
  .phero .ph-text { grid-area: text; padding-top: 18px; }
  .phero .ph-card { grid-area: card; }
  .phero.plain .ph-text { padding-top: 0; }
}
.phero.plain { padding-bottom: 8px; }

/* the slot rule: the section break, a gate slot with the knob resting in it */
.slotrule { position: relative; height: 30px; margin: 6px 0 2px; }
.sr-line { position: absolute; left: 0; right: 0; top: 12px; height: 6px; border-radius: 3px; background: var(--mist); box-shadow: inset 0 1px 0 rgba(29,27,28,.08); }
.sr-cross { position: absolute; left: var(--at); top: 0; width: 6px; height: 30px; margin-left: -3px; border-radius: 3px; background: var(--mist); }
.sr-knob { position: absolute; left: var(--at); top: 5px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--oxblood); box-shadow: 0 0 0 2.5px #fff, 0 0 0 3.5px var(--steel); }

.trust { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 14px; }
.trust ul { list-style: none; margin: 0 auto; display: grid; gap: 0; padding-top: 4px; padding-bottom: 4px; }
.trust li { display: flex; gap: 14px; align-items: center; padding: 12px 0; font-weight: 600; font-size: 15.5px; }
.trust li + li { border-top: 1px solid var(--mist); }
@media (min-width: 900px) { .trust ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .trust li + li { border-top: 0; } }

.next-band { background: var(--soot); color: #fff; padding: 44px 0; margin-top: 36px; }
.next-grid { display: grid; gap: 30px; align-items: center; }
.next-intro p { color: var(--on-soot); max-width: 50ch; }
@media (min-width: 900px) { .next-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* page photo and proof */
.page-photo-wrap { margin-top: 30px; }
.page-photo { margin: 0; }
.page-photo img { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 6px; display: block; filter: saturate(.9); }
.page-photo figcaption { font-size: 13px; color: var(--slate); margin-top: 6px; }
.proof-sec { padding: 40px 0 10px; }
.proof-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 18px; }
.proof-job { margin: 0; }
.proof-job img { width: 100%; height: auto; border-radius: 4px; display: block; }
.proof-job figcaption { font-size: 14px; color: var(--slate); margin-top: 6px; }
.rv-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 18px; }
.rv { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 18px; }
.rv-stars { color: var(--amber); display: inline-flex; gap: 2px; } .rv-stars svg { width: 18px; height: 18px; }
.rv-who { font-size: 13.5px; color: var(--slate); margin: 8px 0 0; }

/* ---------- reading layout ---------- */
.doc { display: grid; gap: 30px; padding-top: 34px; padding-bottom: 20px; }
@media (min-width: 1000px) { .doc { grid-template-columns: minmax(0, 720px) 300px; gap: 64px; justify-content: space-between; } }
.prose { min-width: 0; }
.prose .meta { font-size: 14px; color: var(--slate); }
.prose h2 { margin: 2.1rem 0 .8rem; }
.prose > section:first-of-type h2, .prose > .meta + section h2 { margin-top: .6rem; }
.prose h3 { margin: 1.3rem 0 .4rem; }
.prose p, .prose li { max-width: 68ch; }
.prose ul { padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 24px; margin: 0 0 .55rem; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--oxblood); box-shadow: 0 0 0 2px var(--page), 0 0 0 3px var(--steel); }
.b-steps ol { list-style: none; counter-reset: s; padding: 0; margin: 0; }
.b-steps li { counter-increment: s; position: relative; padding: 0 0 14px 56px; }
.b-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 38px; height: 38px; display: grid; place-items: center; background: var(--soot); color: #fff; font: 800 1rem var(--disp); border-radius: 3px; }
.b-steps li h3 { margin: 6px 0 4px; }
.b-warn { border: 2px solid var(--soot); border-radius: 6px; padding: 18px 20px; margin: 1.6rem 0; background: #fff; }
.warn-head { display: flex; gap: 12px; align-items: center; }
.warn-head .ic { width: 30px; height: 30px; flex: none; color: var(--oxblood); }
.warn-head h2 { margin: 0 !important; font-size: 1.3rem; }
.b-warn p { margin: 10px 0 0; }
.b-advice { display: grid; grid-template-columns: 52px 1fr; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 20px; margin: 1.8rem 0; }
.adv-knob { width: 52px; height: 52px; }
.b-advice h2 { margin: 0 0 .5rem !important; font-size: 1.35rem; }
.b-advice p { margin: 0; }
.diy-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .diy-grid { grid-template-columns: 1fr 1fr; } }
.diy-grid > div { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; }
.diy-pro { background: var(--mist) !important; }
.diy-grid h3 { margin-top: 0; }
.loc-grid { display: grid; gap: 14px; }
@media (min-width: 700px) { .loc-grid { grid-template-columns: 1fr 1fr; } }
.loc { border-top: 2px solid var(--soot); padding-top: 10px; }
.loc h3 { margin-top: 0; }
.tbl { overflow-x: auto; }
.b-compare table { border-collapse: collapse; width: 100%; font-size: 15.5px; background: #fff; }
.b-compare th, .b-compare td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.b-compare thead th { background: var(--soot); color: #fff; }
.doc-side { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 1000px) { .doc-side { position: sticky; top: 20px; align-self: start; } }
.toc { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; }
.toc h2 { font-size: 1rem; margin: 0 0 8px; }
.toc ol { margin: 0; padding-left: 20px; font-size: 15px; }
.toc li { margin: 4px 0; }
.side-ask { background: var(--mist); border-radius: 6px; padding: 18px; }
.side-ask p { font-weight: 600; }
.hub-intro { padding-top: 26px; }
.hub-intro .prose { max-width: 760px; }

/* cards, chips, faq, closing, sources */
.cards-sec, .chips-sec { padding: 34px 0; }
.cards-sec h2, .chips-sec h2 { margin-bottom: 18px; }
.lcards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.lcard { display: grid; grid-template-columns: 30px 1fr; gap: 4px 14px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 18px; color: var(--soot); text-decoration: none; }
.lcard .ic { width: 28px; height: 28px; grid-row: span 2; }
.lcard:hover { border-color: var(--soot); color: var(--soot); }
.lcard:hover .lc-t { color: var(--oxblood); }
.lc-t { font: 800 1.05rem/1.25 var(--disp); }
.lc-b { font-size: 15px; color: var(--slate); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.faq { padding: 48px 0; }
.faq-grid { display: grid; gap: 18px; }
.faq-grid > h2 { margin: 0; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 4fr 7fr; gap: 60px; } }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 2px solid var(--soot); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font: 700 1.08rem/1.35 var(--body); letter-spacing: 0; }
.faq summary .chev { width: 20px; height: 20px; flex: none; transition: transform .2s; }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq details p { margin: 0 0 18px; max-width: 64ch; }
.closing { background: var(--mist); padding: 40px 0; }
.close-in { display: grid; gap: 18px; align-items: center; }
.close-in .gate, .close-knob { width: 76px; height: auto; }
.close-in p { margin: 6px 0 0; color: var(--slate); }
@media (min-width: 760px) { .close-in { grid-template-columns: auto 1fr auto; gap: 30px; } }
.closing .gate text { fill: var(--slate); }
.closing .gate text.g5 { fill: var(--oxblood); }
.closing .gate path { stroke: var(--steel); }
.end-ask { padding: 40px 0; background: var(--mist); }
.end-grid { display: grid; gap: 20px; }
@media (min-width: 1000px) { .end-grid { grid-template-columns: 1fr minmax(420px, 480px); gap: 60px; align-items: start; } }
.sources { padding: 30px 0 44px; font-size: 14.5px; color: var(--slate); }
.sources h2 { font-size: 1.1rem; margin-bottom: 10px; color: var(--soot); }
.sources ul { margin: 0 0 12px; padding-left: 18px; }
.sources li { margin: 4px 0; }
.sources li span { color: var(--soot); font-weight: 600; }

/* ---------- quote page and thank-you ---------- */
.flow { padding: 18px 0 44px; }
.flow-grid { display: grid; gap: 26px; }
.flow-h1 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); margin: 0 0 14px; max-width: 22ch; }
@media (min-width: 1000px) { .flow { padding-top: 34px; } .flow-grid { grid-template-columns: minmax(0, 620px) 340px; gap: 64px; justify-content: center; } }
.flow-aside h2 { font-size: 1.25rem; margin: 6px 0 12px; }
.next-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--soot); }
.next-list li { display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.next-list b { font: 800 1rem var(--disp); }
.ty { padding: 28px 0 50px; }
.ty-grid { display: grid; gap: 28px; }
@media (min-width: 1000px) { .ty-grid { grid-template-columns: 1fr 440px; gap: 64px; align-items: start; } .ty { padding-top: 50px; } }
.ty-gear { display: flex; align-items: center; gap: 16px; background: var(--soot); border-radius: 12px; padding: 14px 18px; width: max-content; max-width: 100%; margin-bottom: 20px; }
.ty-gear .gate { width: 92px; }
.ty-gear .gear-state { margin: 0; color: var(--amber); }
.ty-main h1 { max-width: 16ch; }
.ty-main .lede { font-size: 1.12rem; margin-top: 14px; max-width: 52ch; }
.ty-job { font-weight: 700; }
.ty-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.ty-card h2 { font-size: 1.3rem; margin-bottom: 10px; }
.ty-card .safety { color: var(--soot); font-weight: 600; font-size: 15px; margin-top: 8px; }

/* ---------- footer and the sticky bar ---------- */
.site-foot { background: var(--soot); color: var(--on-soot); padding: 44px 0 26px; margin-top: 0; }
.site-foot a { color: #fff; }
.foot-top { display: grid; gap: 14px; padding-bottom: 24px; border-bottom: 1px solid #3A3739; }
.foot-logo { text-decoration: none; }
.foot-logo .lockup { display: inline-flex; font-size: 20px; }
.foot-what { max-width: 62ch; color: var(--on-soot-quiet); margin: 0; font-size: 15.5px; }
.foot-cols { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); padding: 24px 0; }
.foot-h { font: 500 12.5px var(--mono); color: var(--on-soot-quiet); margin: 0 0 8px; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; }
.foot-cols li { margin: 6px 0; }
.foot-cols a { text-decoration: none; font-weight: 600; }
.foot-cols a:hover { text-decoration: underline; }
.foot-small { border-top: 1px solid #3A3739; padding-top: 18px; font-size: 14px; display: grid; gap: 6px; }
.foot-small p { margin: 0; }
.foot-abn { color: var(--on-soot-quiet); }
.site-foot.slim { padding: 18px 0; }
.site-foot.slim .foot-small { border-top: 0; padding-top: 0; }
.site-foot :focus-visible { outline-color: var(--amber); }
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; border-top: 1px solid var(--line); padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 24px -18px rgba(29,27,28,.45); }
.sticky .btn { width: 100%; }
@media (min-width: 960px) { .sticky { display: none !important; } }
body.has-sticky { padding-bottom: 72px; }
@media (min-width: 960px) { body.has-sticky { padding-bottom: 0; } }

/* search */
.site-search input { width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--soot); border-radius: 3px; font: 400 17px var(--body); background: #fff; }
.site-search .results { list-style: none; padding: 0; margin: 16px 0 0; }
.site-search .results a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--soot); }
.site-search .results b { display: block; font: 800 1.05rem var(--disp); }
.site-search .results span { color: var(--slate); font-size: 15px; }
.tbc { background: #FFF1D6; color: var(--soot); padding: 0 4px; }
.prose .site-search .results li { padding-left: 0; margin: 0; }
.prose .site-search .results li::before { display: none; }

/* ---------- 3 Nov 2026 rework (Cameron): template variation 4 bones, headline and selling points left, card right ---------- */
/* header: the menu items fill the header's height, so the mouse never crosses a gap on its way into a panel */
@media (min-width: 960px) {
  .mainnav { align-self: stretch; display: flex; }
  .mainnav > ul { align-items: stretch; }
  .mainnav > ul > li { display: flex; align-items: center; }
}
.dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.dd-h a { color: var(--soot); font: 800 15.5px/1.3 var(--disp); letter-spacing: 0; text-decoration: none; }
.dd-h a:hover { color: var(--oxblood); }
.dd-groups.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mn-h a { color: inherit; text-decoration: none; font-weight: 700; }

/* buttons on light backgrounds */
.btn.line { background: transparent; color: var(--soot); box-shadow: inset 0 0 0 2px var(--soot); }
.btn.line:hover { background: var(--soot); color: #fff; }
.btn.light { background: #fff; color: var(--oxblood); }
.btn.light:hover { background: var(--mist); color: var(--oxblood-dark); }

/* hero: headline, selling points and the network rating on the left, the gear card on the right */
.home .hero { background: #fff; border-bottom: 1px solid var(--line); }
.usp { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.usp li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 1.02rem; line-height: 1.4; }
.usp .ic { width: 22px; height: 22px; flex: none; color: #fff; background: var(--oxblood); border-radius: 50%; padding: 4px; margin-top: 1px; }
.hero-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 20px 0 0; font-size: 15px; color: var(--slate); }
.hero-rating b { color: var(--soot); font-size: 1.05rem; }
.hero-usp .usp { margin-top: 4px; }
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr minmax(440px, 500px); grid-template-areas: "text card" "usp card"; gap: 0 64px; }
  .hero-text { align-self: end; }
  .hero-usp { grid-area: usp; align-self: start; }
  .hero-usp .usp { margin-top: 22px; }
  .hero-text h1 { max-width: 13ch; }
}

/* reviews */
.rv-sec { padding: 56px 0; }
.rv-head { display: grid; gap: 16px; align-items: end; }
.rv-head h2 { margin: 0; }
@media (min-width: 900px) { .rv-head { grid-template-columns: 1fr auto; gap: 40px; } }
.rv-score { display: grid; grid-template-columns: auto auto; gap: 2px 12px; align-items: center; justify-content: start; background: #fff;
  border: 1px solid var(--line); border-radius: 6px; padding: 14px 18px; }
.rv-score b { font: 800 2.4rem/1 var(--disp); grid-row: span 2; }
.rv-score span { font-size: 13.5px; color: var(--slate); max-width: 30ch; }
.rv-sec .rv-grid { margin-top: 26px; }

/* services: the top level, each breaking down into its jobs */
.svc-sec { padding: 56px 0; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; justify-content: space-between; margin-bottom: 26px; }
.sec-row h2 { margin: 0; }
.svc-sec > .wrap > h2 { margin-bottom: 22px; }
.svc-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.svc { display: flex; flex-direction: column; background: var(--page); border: 1px solid var(--line); border-radius: 6px; padding: 22px; }
.svc-ic { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; background: var(--soot); color: #fff; border-radius: 6px; }
.svc-ic .ic { width: 28px; height: 28px; }
.svc h3 { margin: 16px 0 6px; font-size: 1.25rem; }
.svc h3 a { color: var(--soot); text-decoration: none; }
.svc h3 a:hover { color: var(--oxblood); }
.svc p { margin: 0 0 12px; color: var(--slate); font-size: 15.5px; }
.svc-list { list-style: none; margin: 0 0 16px; padding: 0; }
.svc-list a { display: flex; align-items: center; gap: 9px; min-height: 40px; color: var(--soot); font-weight: 600; font-size: 15.5px;
  text-decoration: none; border-bottom: 1px solid var(--line); }
.svc-list a::before { content: ""; width: 6px; height: 6px; background: var(--oxblood); border-radius: 50%; flex: none; }
.svc-list a:hover { color: var(--oxblood); }
.svc-more { margin-top: auto; font-weight: 700; color: var(--oxblood); }

/* the call-to-action band */
.band { background: var(--oxblood); color: #fff; padding: 40px 0; }
.band-in { display: grid; gap: 18px; align-items: center; }
@media (min-width: 860px) { .band-in { grid-template-columns: 1fr auto; gap: 40px; } }
.band h2 { color: #fff; margin: 0 0 6px; }
.band p { margin: 0; color: #F3EAEA; max-width: 60ch; }

/* how it works, in three numbered steps */
.steps-sec { padding: 56px 0; }
.steps-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .steps-grid { grid-template-columns: 4fr 7fr; gap: 60px; align-items: start; } }
.steps-text p { color: var(--slate); max-width: 46ch; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: 18px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 20px 22px; }
.step-n { font: 800 2rem/1 var(--disp); color: var(--oxblood); }
.steps h3 { font-size: 1.15rem; margin: 2px 0 6px; }
.steps p { margin: 0; color: var(--slate); font-size: 15.5px; }

.faq-side h2 { margin: 0 0 10px; }
.faq-side p { color: var(--slate); max-width: 40ch; }
.more-link { margin: 16px 0 0; font-weight: 700; }

/* locations: every city and town by state */
.loc-state { padding: 34px 0 10px; }
.loc-state h2 { margin-bottom: 8px; padding-bottom: 10px; border-bottom: 2px solid var(--soot); }
.place-grid { display: grid; gap: 6px 36px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.rv blockquote { margin: 12px 0 14px; }
.rv blockquote p { margin: 0; }
.rv-top { display: grid; gap: 6px; }
.rv-job { font-size: 13.5px; font-weight: 700; color: var(--slate); }
.makegrid { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
.makegrid a { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; background: #fff; border: 1px solid var(--line); border-radius: 4px;
  color: var(--soot); font-weight: 700; text-decoration: none; }
.makegrid a:hover { border-color: var(--soot); color: var(--oxblood); }
.dd-groups.c4 { grid-template-columns: 1fr; }
.dd-groups.c4 .dd-g ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }
.loc-city { margin: 18px 0 6px; }
.loc-city h3 { margin: 0 0 10px; }
.loc-city h3 a { color: var(--soot); text-decoration: none; }
.loc-city h3 a:hover { color: var(--oxblood); }
.loc-city ul, .loc-towns ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.loc-towns { margin: 22px 0 6px; }
.loc-towns h3 { margin: 0 0 10px; font-size: 1.1rem; }
.loc-city li a, .loc-towns li a { display: inline-flex; min-height: 40px; align-items: center; padding: 8px 13px; background: #fff;
  border: 1px solid var(--line); border-radius: 4px; color: var(--soot); font-weight: 600; text-decoration: none; }
.loc-city li a:hover, .loc-towns li a:hover { border-color: var(--soot); color: var(--oxblood); }
.loc-towns li a { font-weight: 700; }

/* Referral disclaimer at the bottom of every footer (Cameron, 5 Nov 2026) */
.foot-disclaimer{flex-basis:100%;width:100%;max-width:none;margin:1.5rem 0 0;padding:1.25rem 0 0;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent);font-size:.8rem;line-height:1.6;text-align:left}
.foot-disclaimer p{margin:0 0 .75em;max-width:80em}
.foot-disclaimer p:last-child{margin-bottom:0}

/* ---------- 12 Nov 2026 (Cameron): menu panels and hero accents ----------
   Services: grouped columns, a plain line under each service, a dark side card, a foot row. Locations: suburb search,
   a column per main city, the other cities on a tint, the states. Square corners, no icons in buttons, no side bars. */
.dd-panel { max-height: calc(100vh - 76px); overflow-y: auto; }
.dd:has(.lm-search input:focus) .dd-panel { display: block; }   /* typing a suburb keeps the panel open */
.dd-in { grid-template-columns: minmax(0, 1fr) 272px; gap: 36px; padding-top: 24px; padding-bottom: 0; }
.dd-groups { gap: 16px 28px; }
.dd-h { font: 700 11.5px/1.3 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--slate); margin: 0 0 4px;
  padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.dd-h a { font: inherit; letter-spacing: inherit; color: var(--slate); text-decoration: none; }
.dd-h a:hover { color: var(--oxblood); }
.dd-g a { border-bottom: 0; padding: 5px 0; }
.dd-groups.has-desc .dd-g a { padding: 5px 0 4px; line-height: 1.25; }
.dd-g a b { display: block; font-weight: 700; font-size: 15px; }
.dd-g a small { display: block; margin-top: 1px; font-size: 13px; line-height: 1.3; font-weight: 400; color: var(--slate); }
.dd-side { background: var(--soot); border: 0; border-radius: 6px; padding: 22px; color: var(--on-soot); }
.dd-side-h { font: 800 1.2rem/1.2 var(--disp); letter-spacing: -.01em; color: #fff; margin: 0 0 8px; }
.dd-side p { font-size: 15px; line-height: 1.5; color: var(--on-soot); }
.dd-side .btn { margin-top: 6px; }
.dd-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px 28px; margin-top: 20px; padding: 13px 0 15px;
  border-top: 1px solid var(--line); }
.dd-foot > a { font-weight: 700; font-size: 15px; color: var(--soot); text-decoration: none; white-space: nowrap; }
.dd-foot > a:hover { color: var(--oxblood); text-decoration: underline; }

.lm > .wrap { padding-top: 22px; }
.lm-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.lm-title { font: 800 1.4rem/1.15 var(--disp); letter-spacing: -.012em; margin: 0 0 4px; }
.lm-sub { margin: 0; font-size: 15px; color: var(--slate); }
.lm-search { flex: none; width: 360px; margin: 0; }
.lm-search label { display: block; font: 700 13.5px/1.3 var(--body); margin: 0 0 6px; }
.lm-box { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--steel); border-radius: 4px; padding: 3px 3px 3px 12px; }
.lm-box:focus-within { border-color: var(--soot); }
.lm-box .ic { width: 20px; height: 20px; flex: none; color: var(--slate); }
.lm-box input { flex: 1; min-width: 0; min-height: 40px; border: 0; background: none; color: var(--soot); font: 400 16px var(--body); outline: 0; -webkit-appearance: none; appearance: none; }
.lm-box input::placeholder { color: var(--slate); opacity: 1; }
.lm-box button { flex: none; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 3px; background: var(--oxblood); color: #fff; font: 700 15px var(--body); cursor: pointer; }
.lm-box button:hover { background: var(--oxblood-dark); }
.lm-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.8fr); gap: 22px; padding: 20px 0 2px; }
.lm-cols.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2fr); }
.lm-cols.n6 { grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 2fr); gap: 20px; }
.lm-city { margin: 0 0 6px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.lm-city a { display: block; font: 800 1.08rem/1.2 var(--disp); letter-spacing: -.01em; color: var(--soot); text-decoration: none; }
.lm-city a:hover, .lm-col li a:hover, .lm-more li a:hover, .lm-states a:hover { color: var(--oxblood); text-decoration: underline; }
.lm-city span { display: block; margin-top: 4px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.lm-col ul, .lm-more ul { list-style: none; margin: 0; padding: 0; }
.lm-col li a, .lm-more li a { display: block; padding: 5px 0; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--soot); text-decoration: none; }
.lm-all { display: inline-block; margin-top: 6px; font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.lm-all:hover { text-decoration: underline; }
.lm-more { background: var(--page); border-radius: 6px; padding: 16px 18px 14px; align-self: start; }
.lm-more li a { font-size: 14.5px; }
.lm-more-h { font: 800 1.08rem/1.2 var(--disp); letter-spacing: -.01em; margin: 0 0 6px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.lm-more ul { columns: 2; column-gap: 14px; }
.lm-more li { break-inside: avoid; }
.lm-states { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 0; font-size: 14.5px; }
.lm-states span { font: 700 11.5px/1.3 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--slate); margin-right: 2px; }
.lm-states a { color: var(--soot); font-weight: 600; text-decoration: none; }

/* phone menu: the suburb finder at the top of Locations, the other cities in two columns */
.mn-find { display: flex !important; align-items: center; gap: 10px; min-height: 46px; margin: 2px 0 8px; padding: 8px 12px !important;
  border: 1.5px solid var(--steel); border-radius: 4px; font-weight: 500 !important; color: var(--slate) !important; }
.mn-find .ic { width: 20px; height: 20px; flex: none; }
.mn-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }

/* hero: the second part of a two-part headline in the accent colour; a short line under each job button in the card */
.h1-acc { color: var(--oxblood); }
.jb label small { display: block; margin-top: 2px; font: 400 12.5px/1.3 var(--body); color: var(--on-soot-quiet); }
.jb.urgent label small { color: var(--on-soot); }
.jb input:checked + label small { color: var(--on-soot); }
@media (max-width: 519px) { .jb label small { display: none; } }   /* phones keep the card short: the labels alone */

/* ---------- 12 Nov 2026 (Cameron): photo heroes ----------
   Where the picker finds a hero photo (_build/photos.py: the page's own, else its service's, else the general set), the
   photo fills the hero under a tint in soot. The tint is only as heavy as the words need (behind the words, on the
   left) and clearly lighter everywhere else, so the scene reads at a glance. The words go white, the accent part of the
   headline a pale oxblood, the ticks take the knob's white ring. One column (phones and tablets): the photo sits behind
   the words and the top of the card, then the page carries on as before, so nothing moves. A page with no hero photo
   has no .has-photo and is untouched. No caption, no credit.
   ANY-PHOTO RULE (full run, 12 Nov 2026): the tint behind the words passes on a PURE WHITE pixel, so any approved
   photo is safe without tuning. The words never reach past 53 per cent of the screen (widest measured 52.7), and the
   tint is .68 or more up to 54 per cent: on pure white that gives white words 5.89 to 1 and the pale accent 4.66 to
   1. One column: .70 or more over the whole photo band (white 6.34, accent 5.02). White words fail under .60 and the
   accent under .67, so do not lighten the first two stops or the one-column tint, and do not widen the words column
   past 54 per cent without moving the second stop. Right of the words it stays light (.32 to .2). */
:root { --oxblood-tint: #F8DFE0; --tint: 29, 27, 28; }
.has-photo { position: relative; isolation: isolate; overflow: hidden; background: var(--soot); }
.hero-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--soot); }
.hero-photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero-photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(var(--tint), .7) 0%, rgba(var(--tint), .68) 54%, rgba(var(--tint), .32) 76%, rgba(var(--tint), .2) 100%); }
.has-photo h1 { color: #fff; }
.has-photo .h1-acc { color: var(--oxblood-tint); }
.has-photo .h1-sub { color: #fff; }
.has-photo .ph-text .lede { color: #fff; }
.has-photo .ph-text .eyebrow, .has-photo .crumbs ol, .has-photo .crumbs a { color: #fff; }
.has-photo .crumbs li + li::before { color: var(--on-soot); }
.has-photo .crumbs a:hover, .has-photo .ph-text .lede a { color: #fff; }
.has-photo .ph-text a:focus-visible { outline-color: var(--amber); }
/* a soft shadow under the words; the contrast figures are measured WITHOUT it */
.has-photo h1, .has-photo .h1-sub, .has-photo .ph-text .lede, .has-photo .ph-text .eyebrow, .has-photo .crumbs { text-shadow: 0 1px 2px rgba(var(--tint), .45); }
.has-photo .gear { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }   /* the soot card needs an edge on a soot tint */
@media (min-width: 1000px) {
  .home .hero.has-photo { border-bottom: 0; }
  .has-photo .gear { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 24px 60px rgba(0, 0, 0, .42); }
  .hero.has-photo .usp li { color: #fff; text-shadow: 0 1px 2px rgba(var(--tint), .45); }
  .hero.has-photo .usp .ic { box-shadow: 0 0 0 1.5px #fff; }
  .hero.has-photo .hero-rating { color: #fff; text-shadow: 0 1px 2px rgba(var(--tint), .45); }
  .hero.has-photo .hero-rating b { color: #fff; }
}
@media (max-width: 999px) {
  .hero-photo { bottom: auto; height: 400px; }   /* fades to solid soot at its foot, so longer words never show a seam */
  .hero-photo::after { background: linear-gradient(180deg, rgba(var(--tint), .7) 0%, rgba(var(--tint), .7) 55%, rgb(var(--tint)) 100%); }
  .has-photo .hero-card, .has-photo .ph-card { position: relative; }
  .has-photo .hero-card::before, .has-photo .ph-card::before { content: ""; position: absolute; z-index: -1; top: 104px; bottom: -4000px;
    left: -100vw; right: -100vw; background: var(--page); }   /* the page takes over part-way down the card */
  .home .hero.has-photo .hero-card::before { background: #fff; }
}