/* Which Pest: the field guide. Tokens from brand/final/colours/brand-colours.css (DESIGN.md). Every colour on the site
   comes from :root, so a palette change is a token change. No dark ink band anywhere (every sister site has one). */
@font-face{font-family:"Newsreader";src:url(/assets/fonts/newsreader-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/assets/fonts/plex-sans-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/assets/fonts/plex-sans-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/assets/fonts/plex-sans-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/plex-mono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/plex-mono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --chalk:#F2F1E8;        /* the page */
  --tint:#E6E5D6;         /* the drawer and quiet bands */
  --line:#D3D1BD;         /* hairlines, never text */
  --card:#FAFAF4;         /* inside cards, tiles and fields */
  --ink:#22241E;          /* olive graphite: text, lines, drawings (13.8 to 1 on chalk) */
  --grey:#575A4E;         /* small print and captions (6.2 to 1 on chalk) */
  --deep:#545016;         /* deep olive: buttons (chalk text, 7.3 to 1) and links */
  --deep-2:#433F10;       /* button hover */
  --olive:#857A1E;        /* field olive: pin heads and drawing accents, never text */
  --lichen:#D4DA9C;       /* specimen labels, the pin head on dark */
  --label:#E4E7C6;        /* pale label: tile and card foot strips */
  --label-2:#EEF0DC;      /* the lightest lichen band */
  --pin-rest:#B5B39A;     /* a pin head before it is chosen */
  --clay:#E8B49A;         /* the urgent tag only (wasps, bees): ink text on it */
  --clay-2:#F8E9DF;       /* urgent note ground */
  --clay-line:#E2A98A;
  --serif:"Newsreader",Georgia,serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --wrap:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
html.menu-open{overflow:hidden}
body{margin:0;background:var(--chalk);color:var(--ink);font:400 17px/1.6 var(--sans)}
img,svg{display:block;max-width:100%}
a{color:var(--deep);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--deep-2);text-decoration-thickness:2px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.14;margin:0;letter-spacing:-.006em;text-wrap:balance}
h1{font-size:clamp(28px,3.6vw,50px);line-height:1.08;letter-spacing:-.012em}
h2{font-size:clamp(27px,2.8vw,40px)}
h3{font-size:21px}
p{margin:0}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font:inherit}
[hidden]{display:none!important}
.wrap{width:min(var(--wrap),100% - 48px);margin-inline:auto}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0;border:0}
.skip{position:absolute;left:-999px;top:8px;z-index:60;padding:10px 14px;background:var(--card);color:var(--ink);border:1px solid var(--ink)}
.skip:focus{left:12px}
.mono{font-family:var(--mono)}
.eyebrow{font:500 13.5px/1.35 var(--mono);color:var(--ink);margin-bottom:10px}
.small{font-size:15px;color:var(--grey)}
.tbc{background:var(--clay-2);outline:1px dashed var(--clay-line);padding:0 3px}

/* keyboard focus: a field-olive pin head at the corner of whatever has focus */
:where(a,button,summary,input,select,textarea):focus-visible{outline:2px solid var(--ink);outline-offset:3px}
:where(a,button,summary):focus-visible{position:relative}
:where(a,button,summary):focus-visible::before{content:"";position:absolute;top:-10px;right:-10px;width:12px;height:12px;border-radius:50%;background:var(--olive);box-shadow:0 0 0 2px var(--chalk);pointer-events:none;z-index:3}

/* ---------------------------------------------------------------- buttons: square label tags with a punched hole */
.tagbtn{--hole:var(--chalk);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 22px 12px 42px;border:0;border-radius:0;
  background-color:var(--deep);background-image:radial-gradient(circle at 20px 50%,var(--hole) 0 4.6px,rgba(242,241,232,.55) 4.9px 6px,transparent 6.3px);
  color:var(--chalk);font:600 16px/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:background-color .15s}
.tagbtn:hover{background-color:var(--deep-2);color:var(--chalk);text-decoration:none}
.tagbtn:disabled{opacity:.7;cursor:wait}
.tagbtn.lichen{background-color:var(--lichen);color:var(--ink);background-image:radial-gradient(circle at 20px 50%,var(--hole) 0 4.6px,rgba(34,36,30,.4) 4.9px 6px,transparent 6.3px)}
.tagbtn.lichen:hover{background-color:#C6CD88;color:var(--ink)}
.tagbtn.block{display:flex;width:100%}
.tagbtn .ic{width:18px;height:18px}
.textbtn{display:inline-block;background:none;border:0;padding:10px 2px;color:var(--ink);font:500 16px/1.25 var(--sans);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;cursor:pointer;text-align:left}
.textbtn:hover{text-decoration-thickness:2px;color:var(--ink)}
.textlink{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--deep);font-weight:500}
.textlink .ic{width:18px;height:18px}
.ic{width:20px;height:20px;flex:none}

/* the mini pin (nav buttons, list markers) */
.mini-pin{position:relative;width:9px;height:15px;flex:none;display:inline-block}
.mini-pin::before{content:"";position:absolute;left:4px;top:4px;width:1.4px;height:11px;background:var(--ink);transform:rotate(18deg);transform-origin:top}
.mini-pin::after{content:"";position:absolute;left:0;top:0;width:8px;height:8px;border-radius:50%;background:var(--pin-rest);transition:background-color .2s,transform .2s}
[aria-expanded="true"] .mini-pin::after{background:var(--olive);transform:translateY(3px)}
.pinlist,.ringlist{list-style:none}
.pinlist li,.ringlist li{position:relative;margin:7px 0;padding-left:26px}
.pinlist li::after,.ringlist li::after{content:"";position:absolute;left:4px;top:.45em;width:9px;height:9px;border-radius:50%;background:var(--olive)}
.pinlist li::before,.ringlist li::before{content:"";position:absolute;left:8px;top:calc(.45em + 7px);width:1.3px;height:11px;background:var(--ink);transform:rotate(-22deg);transform-origin:top}

/* ---------------------------------------------------------------- photos (3 Nov 2026: "more photos less claude graphics") */
.ph-grid:not(.has-photo){grid-template-columns:minmax(0,1fr)}
.ph-grid.has-photo{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:44px;align-items:start}
.ph-photo{margin:0;padding:10px 10px 0;background:var(--card);border:1px solid var(--line);box-shadow:0 18px 30px -26px rgba(34,36,30,.5)}
.ph-photo img,.page-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--tint)}
.ph-photo figcaption,.page-photo figcaption{padding:9px 2px 11px;font:500 12.5px/1.45 var(--mono);color:var(--ink)}
.ph-photo .cap{display:block}
.credit{color:var(--grey);font-size:11.5px}
.ph-photo .credit{display:block;margin-top:2px}
.credit a{color:var(--grey)}
.page-photo-wrap{display:none}
.page-photo{margin:0;padding:8px 8px 0;background:var(--card);border:1px solid var(--line)}
.card-art{display:block;overflow:hidden;border-bottom:1px solid var(--line);background:var(--tint)}
.card-art img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .35s}
.card:hover .card-art img{transform:scale(1.03)}
.mini-tiles .mt-photo{width:40px;height:40px;flex:none;object-fit:cover;border:1px solid var(--line)}
.spec{overflow:hidden}
.spec .tile-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spec:has(.tile-photo) .pin{display:none}
.credits{max-width:860px;padding:34px 0 60px}
.credits h1{margin-bottom:14px}
.credit-list{list-style:none;margin-top:26px}
.credit-list li{display:flex;align-items:center;gap:14px;padding:10px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.45}
.credit-list img{width:60px;height:60px;flex:none;object-fit:cover}
@media (max-width:899px){
  .ph-photo{display:none}
  .ph-grid.has-photo{grid-template-columns:minmax(0,1fr)}
  .page-photo-wrap{display:block;margin-top:18px}
}

/* ---------------------------------------------------------------- header */
.top{position:relative;z-index:40;background:var(--chalk);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:28px;min-height:76px}
.logo{display:flex;flex-direction:column;gap:3px;margin-right:auto;color:var(--ink);text-decoration:none}
.logo img{align-self:flex-start;width:auto;height:31px}
.logo-desc{font:500 12.5px/1.2 var(--sans);color:var(--grey);letter-spacing:.01em}
.logo:hover{color:var(--ink)}
.head-cta{min-height:46px;font-size:15px}
.menu-btn{display:none;align-items:center;gap:9px;min-height:44px;padding:8px 14px;background:var(--card);border:1px solid var(--line);color:var(--ink);font:500 15px/1 var(--sans);cursor:pointer}
.nav{align-self:stretch;display:flex}
.nav>ul{display:flex;align-items:stretch;gap:22px;list-style:none}
.nav>ul>li{display:flex;align-items:center}
.dd-top,.nav-link{display:inline-flex;align-items:center;gap:6px;padding:10px 0;background:none;border:0;color:var(--ink);font:500 16px/1 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap}
.dd-top:hover,.nav-link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:6px}
.dd-btn{display:inline-flex;align-items:center;justify-content:center;min-width:26px;min-height:40px;padding:0;background:none;border:0;color:var(--ink);cursor:pointer}
.dd-btn.dd-top{min-width:0;gap:4px}
.chev{width:16px;height:16px;transition:transform .2s}
.dd.open .chev{transform:rotate(180deg)}
.dd-panel{display:none;position:absolute;left:0;right:0;top:100%;background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 18px 30px -24px rgba(34,36,30,.35)}
.dd.open>.dd-panel{display:block}
@media (hover:hover) and (min-width:1120px){.dd:hover>.dd-panel{display:block}.dd:hover .chev{transform:rotate(180deg)}}
/* menu round 12 Nov 2026 */
.dd-loc:focus-within{display:block}
.dd-in{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:40px;padding:26px 0 24px}
.dd-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 36px;align-items:start}
.dd-h{font:500 12px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--grey);margin-bottom:10px}
.dd-g ul{list-style:none}
.dd-g a{display:block;padding:6px 0;color:var(--ink);text-decoration:none}
.dd-n{display:block;font:400 16px/1.25 var(--sans)}
.dd-d{display:block;margin-top:2px;font:400 13.5px/1.35 var(--sans);color:var(--grey)}
.dd-desc .dd-n{font-weight:600}
.dd-desc .dd-g a{padding:7px 0 8px}
.dd-g a:hover .dd-n{text-decoration:underline;text-underline-offset:4px}
.dd-2c{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;column-gap:28px}
.dd-r3{grid-template-rows:repeat(3,auto)}
.dd-r4{grid-template-rows:repeat(4,auto)}
.dd-r5{grid-template-rows:repeat(5,auto)}
/* the promo card: the one deep olive card on the site (the button colour), chalk text and a lichen tag */
.dd-side{align-self:start;padding:20px 22px 22px;background:var(--deep);color:var(--chalk)}
.dd-side-h{font:600 22px/1.2 var(--serif);margin-bottom:8px}
.dd-side p:not(.dd-side-h){font-size:15px;line-height:1.5;margin-bottom:16px}
.dd-side .tagbtn{--hole:var(--deep);display:flex}
.dd-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0 16px;border-top:1px solid var(--line)}
.dd-foot a{display:inline-flex;align-items:center;gap:8px;font-weight:500}
.dd-foot .ic{width:18px;height:18px}
/* the Locations panel: title and suburb search, a column per main city, the tinted "more" panel, the state row */
.loc-in{padding:22px 0 22px}
.loc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.loc-t{font:600 24px/1.2 var(--serif)}
.loc-s{margin-top:4px;font-size:15px;line-height:1.4;color:var(--grey)}
.loc-head .loc-search{flex:0 0 380px}
.loc-search label{display:block;margin-bottom:6px;font:500 12px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--grey)}
.loc-field{display:flex}
.loc-field input{flex:1;min-width:0;min-height:46px;padding:10px 12px;background:var(--card);border:1px solid rgba(34,36,30,.55);border-right:0;border-radius:0;color:var(--ink);font:400 16px/1.2 var(--sans);-webkit-appearance:none;appearance:none}
.loc-field button{min-height:46px;padding:0 18px;border:0;border-radius:0;background:var(--deep);color:var(--chalk);font:600 15px/1 var(--sans);cursor:pointer}
.loc-field button:hover{background:var(--deep-2)}
.locp-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;padding-top:20px}
.loc-cols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0 24px}
.loc-city{padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.loc-city a{display:inline-flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none;font:600 20px/1.2 var(--serif)}
.loc-city a:hover{text-decoration:underline;text-underline-offset:4px}
.loc-city .ic{width:16px;height:16px;color:var(--deep)}
.loc-city>span{display:block;margin-top:3px;font:500 12px/1.3 var(--mono);letter-spacing:.09em;color:var(--grey)}
.loc-col ul,.loc-more ul{list-style:none}
.loc-col li a,.loc-more li a{display:block;padding:5px 0;color:var(--ink);text-decoration:none;font:400 15.5px/1.3 var(--sans)}
.loc-col li a:hover,.loc-more li a:hover,.loc-by a:hover{text-decoration:underline;text-underline-offset:4px}
.loc-all{display:inline-block;margin-top:6px;font:500 14px/1.3 var(--sans);color:var(--deep)}
.loc-more{align-self:start;padding:16px 20px 14px;background:var(--label-2);border:1px solid var(--line)}
.loc-more-h{font:600 20px/1.2 var(--serif);padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.loc-more ul{columns:2;column-gap:20px}
.loc-more li{break-inside:avoid}
.loc-by{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
.loc-by .dd-h{margin:0 2px 0 0}
.loc-foot .loc-by a{color:var(--ink);text-decoration:none;font:400 15px/1.3 var(--sans)}
.mn-body .loc-search{margin:2px 0 10px}
.mn-body .dd-n{font:inherit}
/* one short line under each ask-card tile; not on a phone, where the compact tray keeps the postcode on the first screen */
.mini-tiles small{display:block;margin-top:2px;font:400 12px/1.25 var(--sans);color:var(--grey)}
.mini-tiles label{height:100%}
@media (max-width:599px){.mini-tiles small{display:none}}
/* the headline's second part in the brand's deep olive (never field olive: that is not a text colour) */
.h1-acc{color:var(--deep)}
.phero .h1-sub{color:var(--deep)}
/* end menu round */
.mnav{position:fixed;inset:0;z-index:60;overflow:auto;background:var(--chalk)}
.mnav-in{padding:12px 0 40px}
.mn-head{display:flex;align-items:center;justify-content:space-between;min-height:56px;margin-bottom:8px}
.mn-head .logo img{height:27px}
.mn-close{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;background:var(--card);border:1px solid var(--line);color:var(--ink);font:500 15px/1 var(--sans);cursor:pointer}
.mn-close .ic{width:18px;height:18px}
.mn-sec{border-top:1px solid var(--line)}
.mn-sec summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;list-style:none;cursor:pointer;font:600 22px/1.2 var(--serif)}
.mn-sec summary::-webkit-details-marker{display:none}
.mn-sec[open] .chev{transform:rotate(180deg)}
.mn-body{padding:0 0 18px}
.mn-h{font:500 13px/1.3 var(--mono);color:var(--grey);margin:12px 0 4px}
.mn-body ul{list-style:none}
.mn-body a{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);text-decoration:none;font:400 17px/1.25 var(--sans)}
.mn-all{display:inline-flex!important;gap:8px;margin-top:6px;font-weight:500!important;color:var(--deep)!important}
.mn-all .ic{width:18px;height:18px}
.mn-links{display:flex;flex-direction:column;border-top:1px solid var(--line);padding:8px 0 18px}
.mn-link{display:flex;align-items:center;min-height:52px;color:var(--ink);text-decoration:none;font:600 22px/1.2 var(--serif)}
html.menu-open{overflow:hidden}

/* ---------------------------------------------------------------- the specimen tray (the quote flow) */
.tray{position:relative;padding:20px 22px 18px;background:var(--tint);border:1px solid var(--line);box-shadow:inset 0 0 0 7px var(--tint),inset 0 0 0 8px var(--line);scroll-margin-top:14px}
.tray-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin:0 0 14px}
.tq{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px}
.fq{font:600 clamp(26px,2.5vw,36px)/1.1 var(--serif);letter-spacing:-.006em}
.fq:focus{outline:none}
.tray-lede{font-size:16px}
.tray-prog{display:flex;align-items:center;gap:12px;flex:none}
.qcount{font:400 13.5px/1.3 var(--mono)}
.qpins{width:112px;height:34px;overflow:visible}
.qpins .ground{stroke:var(--line);stroke-width:1.5}
.qpins .sh{stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;opacity:.45;transition:transform .3s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.qpins .hd{fill:var(--pin-rest);transition:fill .2s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.qpins .p{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.qpins[data-done="1"] .p1,.qpins[data-done="2"] .p1,.qpins[data-done="2"] .p2,.qpins[data-done="3"] .p1,.qpins[data-done="3"] .p2,.qpins[data-done="3"] .p3,.qpins[data-done="4"] .p{transform:translate(-2px,4px)}
.qpins[data-done="1"] .p1 .hd,.qpins[data-done="2"] .p1 .hd,.qpins[data-done="2"] .p2 .hd,.qpins[data-done="3"] .p1 .hd,.qpins[data-done="3"] .p2 .hd,.qpins[data-done="3"] .p3 .hd,.qpins[data-done="4"] .hd{fill:var(--olive)}
.qpins[data-done="1"] .p1 .sh,.qpins[data-done="2"] .p1 .sh,.qpins[data-done="2"] .p2 .sh,.qpins[data-done="3"] .p1 .sh,.qpins[data-done="3"] .p2 .sh,.qpins[data-done="3"] .p3 .sh,.qpins[data-done="4"] .sh{opacity:.95}
.step{display:none}
.step.on{display:block}
fieldset{margin:0;padding:0;border:0;min-width:0}
legend{padding:0}
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.tile{position:relative}
.tile input{position:absolute;opacity:0;width:1px;height:1px}
.tile label{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid var(--line);color:var(--ink);cursor:pointer;transition:border-color .15s}
.tile label:hover{border-color:var(--ink)}
.tile input:focus-visible+label{outline:2px solid var(--ink);outline-offset:3px}
.tile input:checked+label{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.spec{position:relative;display:grid;place-items:center;height:104px}
.spec img{width:84px;height:84px}
.spec img.qpin{width:62px;height:62px}
.pin{position:absolute;left:58%;width:1.6px;height:42px;top:calc(46% - 42px);background:var(--ink);opacity:.9;border-radius:1px;transform-origin:50% 100%;transform:rotate(26deg);pointer-events:none;transition:transform .28s cubic-bezier(.3,1.5,.5,1)}
.pin::after{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--pin-rest);transition:background-color .2s}
.tile label:hover .pin{transform:rotate(26deg) translateY(-3px)}
.tile input:checked+label .pin{transform:rotate(26deg) translateY(6px)}
.tile input:checked+label .pin::after{background:var(--olive)}
.lab{display:block;flex:1;min-height:52px;padding:8px 10px 9px;background:var(--label);border-top:1px solid var(--line)}
.lab b{display:block;font:500 14px/1.25 var(--mono)}
.lab small{display:block;margin-top:2px;font:400 13px/1.3 var(--sans)}
.tile.urgent .lab{background:var(--clay)}
.flag{display:inline-block;margin:0 0 4px;padding:1px 6px;background:var(--ink);color:var(--chalk);font:500 12px/1.35 var(--mono)}
.tile.unsure{grid-column:span 2}
.tile.unsure .spec{background:repeating-linear-gradient(-45deg,transparent 0 9px,rgba(34,36,30,.06) 9px 10px)}
.opts-q legend{font:600 23px/1.2 var(--serif);margin-bottom:12px}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.opts label{position:relative;display:block;cursor:pointer}
.opts input{position:absolute;opacity:0;width:1px;height:1px}
.opts span{display:flex;align-items:center;min-height:58px;padding:12px 16px 12px 42px;background:var(--card);border:1px solid var(--line);font:500 16px/1.3 var(--sans);transition:border-color .15s}
.opts span::after{content:"";position:absolute;left:16px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--tint);box-shadow:inset 0 0 0 1px rgba(34,36,30,.45);transition:background-color .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.opts label:hover span{border-color:var(--ink)}
.opts input:checked+span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opts input:checked+span::after{background:var(--olive);box-shadow:none;transform:scale(1.15)}
.opts input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.note{max-width:780px;margin:0 0 14px;padding:12px 16px;background:var(--card);border:1px solid var(--line);font-size:15.5px}
.note b{font-weight:600}
.urgent-note{background:var(--clay-2);border-color:var(--clay-line)}
.state-note{margin-top:14px}
.hint{display:block;margin-top:10px;font-size:14.5px;color:var(--grey)}
.tray .hint{color:var(--ink)}
.stop{max-width:780px;margin-top:14px;padding:16px 18px;background:var(--card);border:1px solid var(--ink)}
.stop-h{font:600 21px/1.25 var(--serif);margin-bottom:6px}
.stop p+p{margin-top:8px}
.field{max-width:520px;margin-bottom:18px}
.field label{display:block;margin-bottom:6px;font:500 15px/1.3 var(--sans)}
.optional{font-weight:400;color:var(--grey)}
.field input,.field textarea,.field select{width:100%;min-height:52px;padding:12px 14px;background:var(--card);border:1px solid rgba(34,36,30,.55);border-radius:0;color:var(--ink);font:400 17px/1.4 var(--sans)}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--ink)}
.pc-big{max-width:180px;font:500 26px/1 var(--mono)!important;letter-spacing:.14em}
.you-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;max-width:780px}
.add-note{margin:-6px 0 10px}
.consent{display:grid;grid-template-columns:24px 1fr;gap:10px;max-width:660px;margin-top:6px;font-size:15.5px;cursor:pointer}
.consent input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--deep)}
.fineprint{margin:8px 0 0 34px;max-width:626px;font-size:14.5px;color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.captcha:has(.g-recaptcha[data-sitekey=""]){display:none}
.captcha{margin-top:14px}
.err{margin-top:10px;font:500 15px/1.35 var(--sans);color:#7A2E12}
.err:empty{display:none}
.ferr{display:block;margin-top:6px;font:500 14.5px/1.35 var(--sans);color:#7A2E12}
.step-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:16px}
.tray.on-job .step-nav .tagbtn{display:none}

/* ---------------------------------------------------------------- home */
.hero{padding:30px 0 60px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:52px;align-items:start}
.hero-chip{display:inline-block;margin-bottom:14px;padding:6px 12px;background:var(--label);font:500 13px/1.3 var(--mono);color:var(--ink)}
.hero .lp-card .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
.hero-side{position:relative;padding:0 26px 26px 0}
.home-photo{margin:0}
.hp-frame{position:relative;display:block}
.hp-frame::before{content:"";position:absolute;left:26px;top:26px;right:-26px;bottom:-26px;background:var(--deep);z-index:0}
.home-photo img{position:relative;z-index:1;display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--tint)}
.home-photo figcaption{position:relative;z-index:1;margin-top:38px;font:500 12.5px/1.45 var(--mono);color:var(--grey)}
.hero .h1-sub{margin-top:10px;font:400 19px/1.5 var(--sans);color:var(--grey)}
.hero .tray{margin-top:22px}
.card-note{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:15.5px}
.card-note .ic{width:18px;height:18px}
.season{padding:44px 0 46px;background:var(--label-2)}
.season-in{display:grid;grid-template-columns:250px minmax(0,1fr);gap:44px}
.season-head h2{margin:4px 0 10px;font-size:34px}
.season-head p:last-child{font-size:16px}
.season-row{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.season-row li{display:flex;flex-direction:column;padding:2px 22px 0;border-left:1px solid rgba(34,36,30,.24)}
.season-row li:first-child{padding-left:0;border-left:0}
.season-row img{width:64px;height:64px;margin-bottom:10px;object-fit:cover;border:1px solid var(--line)}
.season-row h3{margin-bottom:6px;font-size:21px}
.season-row p{font-size:15.5px}
.season-row a{margin-top:auto;padding-top:12px;color:var(--ink);font-weight:500}
.notes{padding:76px 0}
.notes-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:52px;align-items:start}
.notes-head h2{margin-bottom:16px}
.notes-head p+p{margin-top:12px}
.quiet{font-family:var(--serif);font-size:21px;line-height:1.35}
.notebook{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 36px;padding:28px 32px;background-color:var(--card);border:1px solid var(--line);
  background-image:repeating-linear-gradient(to bottom,transparent 0 27px,rgba(34,36,30,.08) 27px 28px)}
.fnote{display:grid;grid-template-columns:62px minmax(0,1fr);gap:14px}
.fnote img{width:62px;height:62px;object-fit:cover;border:1px solid var(--line)}
.fnote h3{margin:0;font-size:22px;line-height:28px}
.notebook .pinlist li{margin:0;line-height:28px}
.notebook .pinlist li::after{top:9px}
.notebook .pinlist li::before{top:15px}
.index{padding:76px 0;background:var(--tint)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:28px}
.sec-head p{max-width:500px;font-size:17px}
.spec-cards{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.spec-card{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none}
.spec-card:hover{color:var(--ink);border-color:var(--ink)}
.spec-card:hover .sc-foot{text-decoration:underline;text-underline-offset:3px}
.sc-art{position:relative;display:block;overflow:hidden;background:var(--tint)}
.sc-art img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.sc-art .pin{height:40px;top:calc(44% - 40px)}
.sc-art .pin::after{background:var(--olive)}
.sc-body{flex:1;padding:2px 18px 16px}
.sc-name{margin-bottom:6px;font-size:24px}
.sc-how{display:block;font-size:15.5px;line-height:1.5}
.sc-foot{display:block;padding:9px 18px;background:var(--label);border-top:1px solid var(--line);font:500 13.5px/1.3 var(--mono)}
.where{padding:84px 0;overflow:hidden}
.where-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:52px;align-items:center}
.where-text>p{margin-top:14px}
.rooms{list-style:none;margin:22px 0 28px}
.rooms li{border-top:1px solid var(--line)}
.rooms li:last-child{border-bottom:1px solid var(--line)}
.rooms a{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;padding:9px 0;color:var(--ink);text-decoration:none;font-size:16px}
.rooms a:hover span{text-decoration:underline;text-underline-offset:3px}
.rooms b{font:500 14px/1.6 var(--mono)}
.where-art{margin:0}
.home-fig{margin:0;padding:10px 10px 0;background:var(--card);border:1px solid var(--line)}
.home-fig img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.home-fig figcaption{padding:9px 2px 11px;font:500 12.5px/1.45 var(--mono)}
.where-art img{width:100%;height:auto}
.where-art figcaption{margin-top:12px;font:400 13.5px/1.45 var(--mono);color:var(--grey)}
.how{padding:84px 0;background:var(--chalk)}
.how-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}
.how-head{order:2;padding-top:30px}
.how-head p{margin-top:14px}
.stack{order:1;position:relative;list-style:none;padding:36px 0 30px}
.stack::before{content:"";position:absolute;left:52px;top:12px;bottom:0;width:2px;background:var(--ink);border-radius:1px;z-index:2}
.stack::after{content:"";position:absolute;left:43px;top:0;width:20px;height:20px;border-radius:50%;background:var(--olive);z-index:3}
.slip{position:relative;max-width:600px;margin-bottom:18px;padding:20px 26px 22px 92px;background:var(--card);border:1px solid var(--line)}
.slip:nth-child(1){transform:rotate(-.6deg)}
.slip:nth-child(2){margin-left:26px;padding-left:66px;background:var(--label);border-color:rgba(34,36,30,.25);transform:rotate(.5deg)}
.slip:nth-child(3){margin-left:10px;padding-left:82px;transform:rotate(-.25deg)}
.slip-k{display:block;margin-bottom:4px;font:500 13.5px/1.3 var(--mono)}
.slip h3{margin-bottom:6px;font-size:24px}
.slip p{font-size:16px}
.ready{padding:8px 0 84px}
.ready-tag{position:relative;max-width:1060px;padding:40px 44px 34px 96px;background:var(--label)}
.ready-tag::after{content:"";position:absolute;left:38px;top:46px;width:24px;height:24px;border-radius:50%;background:var(--chalk);box-shadow:inset 0 0 0 1.5px rgba(34,36,30,.45)}
.ready-lede{max-width:720px;margin:12px 0 22px}
.pinlist.cols{columns:2;column-gap:44px}
.pinlist.cols li{break-inside:avoid;margin:0 0 12px}
.guides{padding:76px 0 84px}
.cat{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:18px}
.gcard{position:relative;display:flex;flex-direction:column;padding:22px 26px 46px;background-color:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none;
  background-image:repeating-linear-gradient(to bottom,transparent 0 31px,rgba(34,36,30,.06) 31px 32px);background-position:0 58px}
.gcard:hover{color:var(--ink);border-color:var(--ink)}
.gcard .call{padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid rgba(34,36,30,.28);font:500 13.5px/1.3 var(--mono)}
.gcard h3{font-size:25px;line-height:1.18}
.gcard p{margin-top:10px;font-size:16px}
.gcard .go{margin-top:auto;padding-top:18px;color:var(--deep);font-weight:500;text-decoration:underline;text-underline-offset:4px}
.gcard .rod{position:absolute;left:50%;bottom:14px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--chalk);box-shadow:inset 0 0 0 1px rgba(34,36,30,.35)}
.g-big{grid-row:span 2}
.g-big h3{font-size:34px}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 4px}
.vs figure{margin:0;padding:12px;background:var(--chalk);border:1px solid var(--line)}
.vs img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.vs figcaption{margin-top:6px;font:400 13.5px/1.4 var(--mono)}
.places{padding:76px 0;background:var(--label-2)}
.place-index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 36px}
.place-index h3{font:500 13.5px/1.3 var(--mono);margin-bottom:8px}
.place-index p{display:flex;flex-wrap:wrap;gap:4px 16px}
.place-index a{font:600 21px/1.3 var(--serif);color:var(--ink);text-decoration:none}
.place-index a:hover{text-decoration:underline}

/* FAQ (home and content pages) */
.faq{padding:76px 0;background:var(--tint)}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:52px}
.faq-grid>div:first-child{position:sticky;top:24px;align-self:start}
.faq details{border-top:1px solid rgba(34,36,30,.22)}
.faq details:last-child{border-bottom:1px solid rgba(34,36,30,.22)}
.faq summary{display:flex;justify-content:space-between;gap:20px;padding:18px 0;list-style:none;cursor:pointer;font:600 21px/1.3 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font:inherit;margin:0;letter-spacing:0}
.faq summary .chev{display:none}
.faq summary::after{content:"";flex:none;width:13px;height:13px;margin-top:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);transition:background-color .2s}
.faq details[open] summary::after{background:var(--olive);box-shadow:none}
.faq details p{max-width:700px;padding:0 0 22px}

/* closing ask */
.closing{padding:50px 0;background:var(--label)}
.close-in{display:flex;justify-content:space-between;align-items:center;gap:44px}
.closing h2{font-size:clamp(28px,2.6vw,38px)}
.cta-sub{max-width:600px;margin:8px 0 18px}
.closing .tagbtn{--hole:var(--label)}
.sign-row{list-style:none;display:grid;grid-template-columns:repeat(6,76px);gap:10px;flex:none}
.sign-row li{padding:6px;background:var(--card);border:1px solid rgba(34,36,30,.22)}
.pc-row{display:flex;flex-wrap:wrap;gap:10px}
.pc-row select,.pc-row input{min-height:50px;padding:10px 14px;background:var(--card);border:1px solid rgba(34,36,30,.55);border-radius:0;color:var(--ink);font:400 17px/1.3 var(--sans)}
.pc-row input{width:150px;font-family:var(--mono);letter-spacing:.1em}

/* footer, on tint (no dark band) */
.foot{padding:44px 0 40px;background:var(--tint);border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px 40px}
.foot-logo{width:260px;height:auto}
.foot-brand p{max-width:420px;margin-top:14px;font-size:15.5px}
.foot .foot-h{font:500 13.5px/1.3 var(--mono);margin-bottom:10px}
.foot ul{list-style:none}
.foot li{margin:6px 0}
.foot li a{color:var(--ink);font-size:15.5px}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;margin-top:30px;padding-top:16px;border-top:1px solid rgba(34,36,30,.22);font:400 13.5px/1.5 var(--mono)}
.legal a{color:var(--ink)}
.foot.slim{padding:22px 0}
.foot.slim .legal{margin-top:0;padding-top:0;border-top:0}

/* sticky ask (phones), only after the page's ask has scrolled away */
.sbar{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--chalk);border-top:1px solid var(--line);transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility 0s .25s}
.sbar.show{transform:none;visibility:visible;transition:transform .25s ease}
.sbar .tagbtn{width:100%}
/* while the slide-in question is open the bar steps away, so the two never sit on top of each other (4 Nov 2026) */
.quiz-pop:not([hidden])~.sbar.show{transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility 0s .25s}
@media (min-width:900px){.sbar{display:none}}

/* ---------------------------------------------------------------- quote page and thank-you */
.flow-page main{padding:28px 0 70px}
.flow-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start}
.flow-h1{font-size:clamp(26px,2.6vw,36px);margin-bottom:16px}
.aside-card{padding:22px 22px 18px;background:var(--card);border:1px solid var(--line)}
.aside-card h2{font-size:23px;margin-bottom:8px}
.aside-card li{font-size:15.5px}
.simple{padding:44px 0 80px}
.ty-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px;align-items:start}
.ty-mark{width:96px;height:96px;margin-bottom:18px}
.simple h1{font-size:clamp(30px,3.4vw,46px)}
.lede{margin-top:14px;font-size:19px}
.ty-card{padding:24px 26px;background:var(--card);border:1px solid var(--line)}
.ty-card h2{font-size:25px;margin-bottom:8px}
.ty-card .note{margin-top:16px}
.nf .actions{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:24px}

/* ---------------------------------------------------------------- content pages */
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;list-style:none;margin-bottom:14px;font:400 13.5px/1.4 var(--mono)}
.crumbs li{color:var(--grey)}
.crumbs li+li::before{content:"/";margin:0 8px;color:var(--grey)}
.crumbs a{color:var(--ink)}
.phero{padding:26px 0 40px;border-bottom:1px solid var(--line)}
.ph-grid{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:32px;align-items:start}
.ph-spec{position:relative;display:grid;place-items:center;height:170px;background:var(--card);border:1px solid var(--line)}
.ph-spec img{width:120px;height:120px}
.ph-spec .pin{height:50px;top:calc(46% - 50px)}
.ph-spec .pin::after{background:var(--olive)}
.ph-spec figcaption{position:absolute;left:0;right:0;bottom:0;padding:6px 10px;background:var(--label);border-top:1px solid var(--line);font:500 12.5px/1.3 var(--mono);text-align:left}
.h1-sub{margin-top:8px;font:600 21px/1.3 var(--serif);color:var(--grey)}
.phero .lede{max-width:760px;margin-top:12px;font-size:18px}
.checked{display:flex;align-items:center;gap:10px;margin-top:12px;font:500 14px/1.3 var(--mono)}
.official{margin-top:6px;font-size:15.5px}
.official span{color:var(--grey)}
.phero .askwrap{margin-top:22px}
.askcard{padding:18px 20px 16px;background:var(--tint);border:1px solid var(--line);box-shadow:inset 0 0 0 6px var(--tint),inset 0 0 0 7px var(--line)}
.ask-h{font:600 23px/1.2 var(--serif);margin-bottom:12px}
.mini-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:12px}
.mini-tiles .mt{position:relative}
.mini-tiles input{position:absolute;opacity:0;width:1px;height:1px}
.mini-tiles label{display:flex;align-items:center;gap:8px;min-height:52px;padding:6px 10px 6px 6px;background:var(--card);border:1px solid var(--line);cursor:pointer;font:500 14px/1.2 var(--mono)}
.mini-tiles img{width:38px;height:38px;flex:none}
.mini-tiles .mt.urgent label{background:var(--clay-2);border-color:var(--clay-line)}
.mini-tiles input:checked+label{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.mini-tiles input:focus-visible+label{outline:2px solid var(--ink);outline-offset:3px}
.ask-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px}
.ask-row .field{margin:0}
.ask-row .field input{width:170px;font-family:var(--mono);letter-spacing:.1em}
.ask-note{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:15px}
.safety{margin:4px 0 12px;padding:10px 14px;background:var(--clay-2);border:1px solid var(--clay-line);font-size:15px}
.trust-strip{padding:16px 0;background:var(--label-2);border-bottom:1px solid var(--line)}
.trust-strip .pinlist{display:flex;flex-wrap:wrap;gap:4px 34px}
.trust-strip .pinlist li{margin:4px 0;font-size:15.5px}
.next-band{padding:52px 0;background:var(--label)}
.next-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:44px;align-items:start}
.next-intro .next-h{font:600 32px/1.14 var(--serif);letter-spacing:-.006em;text-wrap:balance;margin-bottom:18px}
.next-intro .tagbtn{--hole:var(--label)}
.next-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:n}
.next-steps li{padding:18px 18px 16px;background:var(--card);border:1px solid rgba(34,36,30,.2);counter-increment:n}
.next-steps li::before{content:"No. " counter(n);display:block;margin-bottom:6px;font:500 13px/1.3 var(--mono);color:var(--grey)}
.next-steps .next-t{margin-bottom:6px;font:600 21px/1.14 var(--serif);letter-spacing:-.006em}
.next-steps p{font-size:15.5px}
.doc{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:56px;padding:48px 0 56px}
.prose{max-width:740px;min-width:0;overflow-wrap:break-word}
.b-compare{overflow-x:auto}
.prose .meta{margin-bottom:22px;font:400 13.5px/1.45 var(--mono);color:var(--grey)}
.prose .meta a{color:var(--grey)}
.b{margin:0 0 34px}
.b h2{margin-bottom:14px;font-size:clamp(25px,2.2vw,32px)}
.b h3{margin:0 0 4px;font-size:20px}
.b p+p{margin-top:12px}
.b-steps ol{list-style:none;counter-reset:s}
.b-steps li{position:relative;padding:14px 0 14px 52px;border-top:1px solid var(--line);counter-increment:s}
.b-steps li::before{content:counter(s);position:absolute;left:0;top:14px;width:34px;height:34px;display:grid;place-items:center;background:var(--label);font:500 15px/1 var(--mono)}
.b-check ul,.b-flags ul,.b-ask ul{list-style:none}
.b-check li,.b-flags li,.b-ask li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line)}
.b-check li:last-child,.b-flags li:last-child,.b-ask li:last-child{border-bottom:1px solid var(--line)}
.b-check .pm{flex:none;width:22px;height:22px;margin-top:2px;background:url(/assets/img/pin-mark.svg) center/22px no-repeat}
.b-flags .ic,.b-ask .ic{margin-top:3px}
.b-warn{padding:18px 20px;background:var(--clay-2);border:1px solid var(--clay-line)}
.warn-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.warn-head h2{margin:0;font-size:24px}
.tbl{overflow-x:auto}
.b-compare table{width:100%;border-collapse:collapse;font-size:15.5px;background:var(--card)}
.b-compare th,.b-compare td{padding:10px 12px;border:1px solid var(--line);text-align:left;vertical-align:top}
.b-compare thead th{background:var(--label);font:500 13.5px/1.3 var(--mono)}
.diy-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.diy-grid>div{padding:16px 18px;background:var(--card);border:1px solid var(--line)}
.diy-grid h3{font:500 13.5px/1.3 var(--mono);margin-bottom:8px}
.diy-grid ul{padding-left:18px}
.diy-grid li{margin:6px 0;font-size:16px}
.b-advice{display:grid;grid-template-columns:64px minmax(0,1fr);gap:18px;padding:22px 24px;background:var(--label-2);border:1px solid var(--line)}
.b-advice .adv-mark{width:56px;height:56px}
.b-advice h2{font-size:25px;margin-bottom:8px}
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.loc{padding:16px 18px;background:var(--card);border:1px solid var(--line)}
.loc h3{font-size:19px;margin-bottom:6px}
.loc p{font-size:16px}
.cta-band{margin:0 0 34px;padding:20px 22px;background:var(--label)}
.cta-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 24px}
.cta-band .cta-h{font:600 24px/1.14 var(--serif);margin-bottom:4px}
.cta-band p{font-size:16px;max-width:520px}
.cta-band .tagbtn{--hole:var(--label)}
.doc-side{display:flex;flex-direction:column;gap:18px}
/* the contents box and the ask card under it stick as ONE block (4 Nov 2026: a sticky contents box slid over the ask
   card's text). A long contents list scrolls inside its own box, so the block always fits on the screen. */
.side-in{position:sticky;top:20px;display:flex;flex-direction:column;gap:18px;max-height:calc(100vh - 40px)}
.side-in>.side-cta{flex:none}
.toc{min-height:0;overflow-y:auto;padding:16px 18px;background:var(--card);border:1px solid var(--line)}
.toc .toc-h{font:500 13.5px/1.3 var(--mono);margin-bottom:8px}
.toc ol{list-style:none}
.toc li{margin:6px 0;font-size:15px}
.toc a{color:var(--ink)}
.side-cta{padding:16px 18px;background:var(--label);font-size:15.5px}
.side-cta .tagbtn{--hole:var(--label);margin-top:12px}
.hub-intro{padding:40px 0 10px}
.cards-sec{padding:44px 0}
.cards-sec h2{margin-bottom:20px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none}
.card:hover{color:var(--ink);border-color:var(--ink)}
.card-art{display:grid;place-items:center;height:96px;border-bottom:1px solid var(--line)}
.card-art img{width:70px;height:70px}
.card-t{display:block;padding:12px 16px 4px;font:600 21px/1.2 var(--serif)}
.card-b{display:block;flex:1;padding:0 16px 14px;font-size:15px;color:var(--ink)}
.card-subs{display:block;padding:0 16px 12px;font:400 13px/1.4 var(--mono);color:var(--grey)}
.card-go{display:block;padding:8px 16px;background:var(--label);border-top:1px solid var(--line);font:500 13px/1.3 var(--mono)}
.chips-sec{padding:30px 0}
.chips-sec h2{margin-bottom:14px;font-size:26px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.chips a{display:inline-block;padding:7px 12px;background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none;font:500 14px/1.3 var(--mono)}
.chips a:hover{border-color:var(--ink)}
.state-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px}
.state-col h3{font-size:22px;margin-bottom:8px}
.state-col ul{list-style:none}
.state-col li{margin:4px 0}
.sources{padding:34px 0 44px;border-top:1px solid var(--line)}
.sources .src-h{font:600 22px/1.14 var(--serif);margin-bottom:12px}
.sources ul{list-style:none;margin-bottom:12px}
.sources li{margin:6px 0;font-size:15px}
.sources li span{font:500 13px/1.3 var(--mono);color:var(--grey)}
.cta-final .pc-row{margin-top:14px}
.quiz-pop{position:fixed;right:18px;bottom:18px;z-index:35;width:min(360px,100% - 24px);padding:16px 18px;background:var(--card);border:1px solid var(--ink);box-shadow:0 18px 40px -20px rgba(34,36,30,.5);transform:translateY(20px);opacity:0;transition:transform .25s,opacity .25s}
.quiz-pop.in{transform:none;opacity:1}
.qp-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.qp-title{font:600 21px/1.2 var(--serif)}
.qp-close{display:grid;place-items:center;width:40px;height:40px;background:none;border:0;color:var(--ink);cursor:pointer}
.qp-intro p{margin:6px 0 12px;font-size:15.5px}
.qp-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.qp-opt{display:flex;align-items:center;gap:6px;min-height:44px;padding:6px 8px;border:1px solid var(--line);font:500 13px/1.2 var(--mono);cursor:pointer}
.qp-opt input{accent-color:var(--deep)}
.qp-step legend,.qp-step label{display:block;margin:8px 0;font-weight:500}
.qp-step input[type=text],.qp-step input:not([type]){width:100%;min-height:48px;margin-bottom:10px;padding:10px;border:1px solid rgba(34,36,30,.55);background:var(--chalk);font-family:var(--mono)}
.qp-fine{margin-top:10px;font-size:13.5px;color:var(--grey)}
.site-search label{display:block;margin-bottom:8px}
.site-search input{width:100%;min-height:52px;padding:12px 14px;background:var(--card);border:1px solid rgba(34,36,30,.55)}
.search-results{list-style:none;margin-top:14px}
.search-results li{padding:10px 0;border-top:1px solid var(--line)}
.search-count{margin-top:8px;font:400 13.5px/1.3 var(--mono);color:var(--grey)}

/* ---------------------------------------------------------------- widths */
@media (max-width:1199px){
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tile.unsure{grid-column:span 1}
  .spec-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .doc{grid-template-columns:minmax(0,1fr) 250px;gap:36px}
}
@media (min-width:1120px) and (max-width:1279px){
  .logo-desc{display:none}
}
@media (max-width:999px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .hero-side{max-width:560px}
}
@media (max-width:1119px){
  .nav,.head-cta{display:none}
  .menu-btn{display:inline-flex}
}
@media (min-width:1120px){
  .mnav{display:none!important}
}
@media (max-width:999px){
  .top-in{min-height:66px}
  .logo img{height:27px}
  .season-in,.notes-in,.where-in,.how-in,.faq-grid,.next-grid,.flow-grid,.ty-grid{grid-template-columns:1fr;gap:28px}
  .season-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 0}
  .season-row li:nth-child(3){padding-left:0;border-left:0}
  .how-head{order:0;padding-top:0}
  .faq-grid>div:first-child{position:static}
  .where-art{margin-right:0}
  .cat{grid-template-columns:1fr 1fr}
  .g-big{grid-row:auto;grid-column:span 2}
  .close-in{flex-direction:column;align-items:flex-start}
  .foot{padding-bottom:110px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:span 2}
  .doc{grid-template-columns:minmax(0,1fr)}
  .side-in{position:static;max-height:none}
  .toc{overflow:visible}
  .next-steps{grid-template-columns:1fr}
  .place-index{grid-template-columns:1fr 1fr}
}
@media (max-width:899px){
  .tray-head{display:block}
  .tray-prog{margin-top:10px}
}
@media (max-width:599px){
  .mini-tiles label{min-height:46px;padding:4px 8px 4px 4px}
  .mini-tiles .mt-photo{width:36px;height:36px}
  .hero .lp-card .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* job pages on a phone: the postcode and Next come first so they sit above 640 px; the safety line follows in the card */
  .askcard{display:flex;flex-direction:column}
  .askcard .ask-h{order:1}
  .askcard .mini-tiles{order:2}
  .askcard .ask-row{order:3}
  .askcard .err{order:4}
  .askcard .safety{order:5;margin:12px 0 0}
  .askcard .ask-note{order:6}
  body{font-size:16.5px}
  .wrap{width:calc(100% - 32px)}
  .logo-desc{font-size:11.5px}
  .hero{padding:14px 0 40px}
  .hero h1{font-size:24px;line-height:1.16}
  .hero .h1-sub{margin-top:6px;font-size:15.5px;line-height:1.45}
  .tray-prog{margin-top:8px}
  .qpins{width:92px;height:28px}
  .hero .tray{margin:14px -6px 0}
  .tray{padding:14px 10px 14px;box-shadow:none}
  .fq{font-size:29px}
  .tray-lede{font-size:15px;line-height:1.4;margin-top:4px}
  .tq{display:block}
  .tray-head{margin-bottom:12px}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .tile.unsure{grid-column:span 2}
  .spec{height:76px}
  .spec img{width:58px;height:58px}
  .spec img.qpin{width:44px;height:44px}
  .pin{height:28px;top:calc(42% - 28px)}
  .pin::after{width:10px;height:10px;margin-left:-5px;top:-5px}
  .lab{min-height:46px;padding:6px 7px 7px}
  .lab b{font-size:12.5px;line-height:1.22}
  .lab small{font-size:12px;line-height:1.25}
  .flag{margin-bottom:3px;padding:0 5px;font-size:11px}
  .opts{grid-template-columns:1fr;gap:8px}
  .opts span{min-height:52px;padding:10px 10px 10px 36px;font-size:15.5px}
  .opts span::after{left:13px}
  .opts-q legend{font-size:21px}
  .you-grid{grid-template-columns:1fr}
  .season-row{grid-template-columns:1fr}
  .season-row li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 14px;padding:16px 0 0;border-left:0;border-top:1px solid rgba(34,36,30,.24)}
  .season-row li:first-child{border-top:0;padding-top:0}
  .season-row img{grid-row:span 3;width:56px;height:56px}
  .notes,.index,.where,.how,.guides,.faq,.places{padding:56px 0}
  .notebook{grid-template-columns:1fr;padding:22px 18px}
  .spec-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sc-body{padding:0 12px 12px}
  .sc-name{font-size:20px}
  .sc-how{font-size:14.5px}
  .sc-foot{padding:8px 12px}
  .sec-head{display:block}
  .sec-head p{margin-top:10px}
  .rooms a{grid-template-columns:96px minmax(0,1fr)}
  .stack::before{left:24px}
  .stack::after{left:15px}
  .slip,.slip:nth-child(2),.slip:nth-child(3){margin-left:0;padding:18px 16px 18px 50px}
  .ready-tag{padding:34px 20px 26px 60px}
  .ready-tag::after{left:20px;top:38px;width:20px;height:20px}
  .pinlist.cols{columns:1}
  .cat{grid-template-columns:1fr}
  .g-big{grid-column:auto}
  .sign-row{grid-template-columns:repeat(3,76px)}
  .foot-grid{grid-template-columns:1fr}
  .foot-brand{grid-column:auto}
  .phero{padding:16px 0 28px}
  .ph-grid{grid-template-columns:1fr}
  .ph-spec{display:none}
  .h1-sub{font-size:18px}
  .phero .lede{font-size:16.5px}
  .askcard{padding:14px 12px;box-shadow:none}
  .mini-tiles{grid-template-columns:1fr 1fr;gap:6px}
  .mini-tiles label{min-height:48px;font-size:12.5px}
  .mini-tiles img{width:30px;height:30px}
  .diy-grid,.loc-grid{grid-template-columns:1fr}
  .place-index{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------- page order, 3 Nov 2026 (the Door Hero / Find My Roofer
   layout that converts; Which Pest's own look). Hero: headline and ticks LEFT, the card RIGHT; on a phone the ticks go
   under the card. Then trust cards, the reviews slot (only real in-network reviews), the ask band, the photo with the
   page's sections, the depth. Bands stay lichen, label and tint: never dark. */
.lp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);grid-template-areas:"head card" "ticks card";grid-template-rows:auto 1fr;gap:0 52px;align-items:start}
.lp-head{grid-area:head;min-width:0}
.lp-card{grid-area:card;min-width:0}
.lp-ticks{grid-area:ticks;margin-top:20px}
.lp-ticks li{margin:0 0 12px;font-size:16.5px;font-weight:500;line-height:1.45}
.lp-card .askwrap{margin-top:0}
.hero .lp-grid{grid-template-columns:minmax(0,1fr) minmax(0,640px)}
.hero .lp-ticks{margin-top:26px}
.rate-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px;padding:9px 14px;background:var(--card);border:1px solid var(--line);font-size:15px;line-height:1.35}
.rl-who{color:var(--grey)}
@media (min-width:1000px){
  .hero .lp-card .tray{margin-top:0}
}
@media (max-width:999px){
  .lp-grid,.hero .lp-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "card" "ticks";grid-template-rows:auto;gap:0}
  .phero .lp-card{margin-top:20px}
  .lp-ticks{margin-top:18px}
}

/* trust cards: each tick with the reason behind it, a pin marker on each */
.tcards{padding:26px 0;background:var(--label-2);border-bottom:1px solid var(--line)}
.tc-row{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tc-row li{position:relative;padding:18px 20px 18px 46px;background:var(--card);border:1px solid var(--line)}
.tc-pin{position:absolute;left:19px;top:22px;width:12px;height:20px}
.tc-pin::after{content:"";position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--olive)}
.tc-pin::before{content:"";position:absolute;left:4.5px;top:8px;width:1.3px;height:12px;background:var(--ink);transform:rotate(-22deg);transform-origin:top}
.tc-h{margin-bottom:6px;font:600 20px/1.22 var(--serif);letter-spacing:-.004em}
.tc-row p:not(.tc-h){font-size:15.5px}
.tc-row a{white-space:nowrap}

/* the reviews slot and job photos (proof.py): renders only for a business marked in_network */
.proof-sec{padding:56px 0;border-bottom:1px solid var(--line)}
.proof-sec h2{margin:4px 0 22px}
.rv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rv-grid.n1{grid-template-columns:minmax(0,640px)}
.rv-grid.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rv{display:flex;flex-direction:column;margin:0;padding:18px 20px 0;background:var(--card);border:1px solid var(--line)}
.rv-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.rv-stars{display:inline-flex;gap:2px;color:var(--olive)}
.rv-stars svg{width:17px;height:17px}
.rv-job{font:500 12.5px/1.3 var(--mono);color:var(--grey);text-align:right}
.rv blockquote{flex:1;margin:0}
.rv blockquote p{font-size:16px}
.rv .redact{color:var(--grey)}
.rv figcaption{margin-top:12px;font-size:15px}
.rv-who{margin:12px -20px 0;padding:9px 20px;background:var(--label);border-top:1px solid var(--line);font:500 12.5px/1.4 var(--mono)}
.proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.proof-job{margin:0;padding:10px 10px 0;background:var(--card);border:1px solid var(--line)}
.proof-job img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--tint)}
.proof-job figcaption{padding:9px 2px 11px;font:500 12.5px/1.45 var(--mono)}

/* "what to know": the page photo and the page's sections as rows */
.know{padding:56px 0 8px}
.know-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:52px;align-items:center}
.know:not(.has-pic) .know-grid{grid-template-columns:minmax(0,760px)}
.know-photo{margin:0;padding:10px 10px 0;background:var(--card);border:1px solid var(--line);box-shadow:0 18px 30px -26px rgba(34,36,30,.5)}
.know-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--tint)}
.know-photo figcaption{padding:9px 2px 11px;font:500 12.5px/1.45 var(--mono)}
.know-text h2{margin-bottom:18px;font-size:clamp(26px,2.4vw,34px)}
.know-rows{list-style:none;margin-top:8px}
.know-rows li{border-top:1px solid var(--line)}
.know-rows li:last-child{border-bottom:1px solid var(--line)}
.know-rows a{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 2px;color:var(--ink);text-decoration:none;font-size:16.5px}
.know-rows a:hover span{text-decoration:underline;text-underline-offset:3px}
.know-rows .go{width:18px;height:18px;color:var(--deep)}

/* home: service cards with photos, the ask band, the compact places block */
.home-services{padding:76px 0}
.svc-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.svc-cards .card-art{display:block;height:auto}
.svc-cards .card-art img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.svc-more{margin-top:26px}
.svc-more .eyebrow{margin-bottom:10px}
.home-ask{padding:0 0 20px}
.home-ask .cta-band{margin:0;padding:26px 28px}
.home-places{padding:76px 0;background:var(--label-2)}
.hpl-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:52px;align-items:center}
.hpl-text>p{max-width:560px;margin:12px 0 20px}
.hpl-text .chips a{font-size:15px}

@media (max-width:999px){
  .tc-row,.rv-grid,.rv-grid.n2,.proof-grid{grid-template-columns:1fr}
  .tc-row{gap:10px}
  .know-grid,.hpl-grid{grid-template-columns:1fr;gap:26px}
  .svc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:599px){
  .tcards{padding:20px 0}
  .tc-row li{padding:14px 14px 14px 40px}
  .tc-pin{left:15px;top:18px}
  .tc-h{font-size:18.5px}
  .proof-sec,.know{padding:40px 0 8px}
  .home-services,.home-places{padding:56px 0}
  .svc-cards{gap:10px}
  .svc-cards .card-t{padding:10px 12px 4px;font-size:18px}
  .svc-cards .card-b{padding:0 12px 12px;font-size:14px}
  .svc-cards .card-go{padding:7px 12px}
  .home-ask .cta-band{padding:20px 18px}
  .lp-ticks li{font-size:15.5px}
}

/* 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}

/* ---------------------------------------------------------------- photo heroes, 12 Nov 2026 (Cameron: "photos in all
   hero sections"). A page with a hero photo (photos.hero_for) carries it full bleed behind the hero. The tint is the
   brand's own Deep Olive (never black), and only where the words are: headline, sub-line and ticks in the lightest
   card colour, the second part of the headline in Lichen (Deep Olive cannot be read on itself), the ask card or the
   tray on the right as before. Everywhere else the photo shows almost bare, so the scene reads at a glance. The order
   of words, card and ticks is unchanged on every width. A page without a hero photo has no .photo-hero and looks as
   it did. This is the one dark band on the site, by Cameron's instruction; every other band stays lichen, label, tint.

   Tuning pass, 12 Nov 2026: the first build laid Deep Olive over the whole photo as a multiply, which flattened it to
   an olive band; that is gone. The tint now hangs off the words themselves, so it follows them at every width:
     .lp-head::before    behind the headline block, out to the left edge of the screen, soft on the right
     .lede::before       (home: .h1-sub::before) a little more behind every line ABOVE it, where the Lichen and Label
                         words sit: they need a darker ground than the white ones
     .lp-ticks::before   behind the ticks, soft on the right and underneath
     .hero-photo::after  a light wash over the whole photo, so it sits with the palette
   Strengths: .8 behind white words and .92 behind Lichen words hold 4.5 to 1 even on a pure white patch of photo
   (4.65 and 4.55), measured against the real pixels and never counting the soft text shadow. */
:root{--deep-rgb:84,80,22}   /* Deep Olive #545016 as numbers, for the tint */
.photo-hero{position:relative;isolation:isolate;background:var(--deep);border-bottom:0;
  --t-col:.8;     /* tint behind the words */
  --t-top:.6;     /* extra behind the top lines (.8 and .6 together make .92) */
  --t-far:.14;    /* the light wash over the whole photo */
  --pad-t:34px;   /* the hero's own top padding: the tint behind the headline block starts at the hero's top edge */
  --side:24px;    /* the page's side margin in one column */
  --soft:130px;   /* how far the tint takes to fade out beside the words */
  --under:52px}   /* how far the tint runs on under the ticks: on a page hero, to the hero's bottom edge and no further */
.photo-hero.hero{--pad-t:40px;--under:110px}   /* the home hero is tall (the tray): the tint fades out under the ticks */
.hero-photo{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--deep)}
.hero-photo img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--focus,50% 50%)}
.hero-photo::after{content:"";position:absolute;inset:0;background:rgba(var(--deep-rgb),var(--t-far))}
.photo-hero.hero{padding:var(--pad-t) 0 64px}
.photo-hero.phero{padding:var(--pad-t) 0 var(--under)}
.photo-hero .lp-card{position:relative;z-index:1}   /* the card and the tray always sit above the tint */
/* the tint behind the headline block, and the extra behind its top lines. The extra hangs off the first white
   paragraph (no top or bottom set, so it starts where that paragraph starts) and is pulled up over everything above
   it; the block's clip-path cuts it off at the hero's top edge. */
.photo-hero .lp-head{position:relative;clip-path:inset(calc(-1*var(--pad-t)) calc(-1*var(--soft) - 1px) -80px -100vw)}
.photo-hero .lp-head::before,.photo-hero .lp-head .lede::before,.photo-hero.hero .lp-head .h1-sub::before,.photo-hero .lp-ticks::before{content:"";position:absolute;z-index:-1;left:-100vw;right:calc(-1*var(--soft));
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--soft)),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - var(--soft)),transparent)}
.photo-hero .lp-head::before{top:calc(-1*var(--pad-t));bottom:calc(-1*var(--gap,20px));background:rgba(var(--deep-rgb),var(--t-col))}
.photo-hero.hero .lp-head::before{--gap:26px}   /* down to the top of the ticks (their margin), where their own tint takes over */
.photo-hero .lp-head .lede::before,.photo-hero.hero .lp-head .h1-sub::before{height:900px;transform:translateY(calc(26px - 100%));background:rgba(var(--deep-rgb),var(--t-top));
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--soft)),transparent),linear-gradient(180deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - var(--soft)),transparent),linear-gradient(180deg,#000 calc(100% - 26px),transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.photo-hero .lp-ticks{position:relative}
.photo-hero .lp-ticks::before{top:0;bottom:calc(-1*var(--under));background:rgba(var(--deep-rgb),var(--t-col));
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--soft)),transparent),linear-gradient(180deg,#000 calc(100% - var(--under)),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - var(--soft)),transparent),linear-gradient(180deg,#000 calc(100% - var(--under)),transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* the one line under the home tray sits on the photo too: its own small soft patch of the same tint */
.photo-hero .lp-card>.card-note{position:relative}
.photo-hero .lp-card>.card-note::before{content:"";position:absolute;z-index:-1;inset:-4px -10px;background:rgba(var(--deep-rgb),var(--t-col));box-shadow:0 0 14px 10px rgba(var(--deep-rgb),var(--t-col))}
/* a reading hero (About, How it works, a hub or guide with no real photo of its own): the words keep to a 760 px
   column on the left and one tint panel sits behind that column from the hero's top edge to its bottom edge, fading
   out to the right, so the photo shows beside the words under the light wash only. Every line is in the card colour,
   so the one strength (.8, any-photo safe: 4.65 to 1 on a pure white pixel) is enough. */
.photo-hero.reading>.wrap{position:relative}
.photo-hero.reading .ph-text{max-width:760px}
.photo-hero.reading>.wrap::before{content:"";position:absolute;z-index:-1;top:calc(-1*var(--pad-t));bottom:calc(-1*var(--under));left:-100vw;right:calc(100% - 760px - var(--soft));background:rgba(var(--deep-rgb),var(--t-col));
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--soft)),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - var(--soft)),transparent)}
.photo-hero.reading .h1-sub,.photo-hero.reading .eyebrow,.photo-hero.reading .crumbs li,.photo-hero.reading .crumbs li+li::before,.photo-hero.reading .official span{color:var(--card)}
.photo-hero h1,.photo-hero .lede,.photo-hero.hero .h1-sub,.photo-hero .checked,.photo-hero .official,.photo-hero .lp-ticks li,.photo-hero .lp-card>.card-note{color:var(--card)}
.photo-hero .h1-acc,.photo-hero.job .h1-sub,.photo-hero .eyebrow{color:var(--lichen)}
.photo-hero .crumbs li,.photo-hero .crumbs li+li::before,.photo-hero .official span{color:var(--label)}
.photo-hero .crumbs a,.photo-hero .lede a,.photo-hero .official a{color:var(--card)}
/* a soft Deep Olive shadow under the words on the photo: a help on a busy picture, never counted in the contrast */
.photo-hero .lp-head,.photo-hero .ph-text,.photo-hero .lp-ticks,.photo-hero .lp-card>.card-note{text-shadow:0 1px 2px rgba(var(--deep-rgb),.55)}
.photo-hero .hero-chip{text-shadow:none}
.photo-hero .lp-ticks li::before,.photo-hero .lp-card>.card-note .mini-pin::before,.photo-hero .checked .mini-pin::before{background:var(--card)}
.photo-hero .lp-ticks li::after{background:var(--lichen)}   /* the pin head on dark (DESIGN.md) */
.photo-hero .lp-head :focus-visible,.photo-hero .ph-text :focus-visible{outline-color:var(--card)}
@media (max-width:999px){
  /* one column: the photo sits behind the words and the top of the card, then runs out into plain Deep Olive. The
     tint behind the words runs the full width of the screen (no soft side: there is no side) */
  .hero-photo{bottom:auto;height:560px;max-height:100%}
  .hero-photo img{object-position:var(--focus-s,var(--focus,50% 50%))}
  .hero-photo::after{background:linear-gradient(180deg,rgba(var(--deep-rgb),var(--t-far)) 0%,rgba(var(--deep-rgb),.5) 45%,var(--deep) 100%)}
  .photo-hero.reading>.wrap::before{right:calc(-1*var(--side));-webkit-mask-image:none;mask-image:none}   /* one column: the panel runs the full width */
  .photo-hero{--soft:0px}
  .photo-hero .lp-head{clip-path:inset(calc(-1*var(--pad-t)) calc(-1*var(--side)) -80px -100vw)}
  .photo-hero .lp-head::before,.photo-hero .lp-head .lede::before,.photo-hero.hero .lp-head .h1-sub::before,.photo-hero .lp-ticks::before{right:calc(-1*var(--side));-webkit-mask-image:none;mask-image:none}
  .photo-hero .lp-head::before{bottom:-44px;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 44px),transparent)}
  .photo-hero .lp-head .lede::before,.photo-hero.hero .lp-head .h1-sub::before{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);-webkit-mask-composite:source-over;mask-composite:add}
  .photo-hero .lp-ticks::before{top:-18px;bottom:-28px}   /* from the card down to the hero's bottom edge */
}
@media (max-width:599px){
  .photo-hero{--pad-t:16px;--side:16px;--under:28px}
  .photo-hero.hero{--pad-t:14px;padding:var(--pad-t) 0 40px}
}
@media print{
  .hero-photo,.photo-hero .lp-head::before,.photo-hero .lede::before,.photo-hero .h1-sub::before,.photo-hero .lp-ticks::before,.photo-hero .card-note::before,.photo-hero.reading>.wrap::before{display:none}
  .photo-hero{background:none}
  .photo-hero h1,.photo-hero .lede,.photo-hero.hero .h1-sub,.photo-hero.phero .h1-sub,.photo-hero .h1-acc,.photo-hero .eyebrow,.photo-hero .lp-ticks li,.photo-hero .crumbs li,.photo-hero .crumbs a,.photo-hero .lp-card>.card-note,.photo-hero.reading .h1-sub,.photo-hero.reading .eyebrow,.photo-hero.reading .crumbs li,.photo-hero.reading .crumbs li+li::before,.photo-hero.reading .official span,.photo-hero .checked,.photo-hero .official,.photo-hero .official a,.photo-hero .lede a{color:var(--ink)}
  .photo-hero .lp-head,.photo-hero .ph-text,.photo-hero .lp-ticks,.photo-hero .lp-card>.card-note{text-shadow:none}
}