/* Cleaner Scout. Built from template variation 2 ("Plumbing, Deep Blue"), re-skinned to Cleaner Scout (DESIGN.md):
   the floating white header bar, photo heroes under a cobalt tint, cobalt-deep bands between light sections, pill buttons
   with a round arrow, white cards with a cobalt icon circle. Cobalt and ink on soap; citrus only on blue. The bubble lens
   (a ring with one gleam, upper left) is the accent: the ring in every button, list markers, the form's progress, a round
   lens-crop photo. Never a four-point shine, stars or floating bubbles. Home-only parts are scoped under body.home. */
@font-face{font-family:"Archivo SC";src:url("/assets/fonts/archivo-sc.woff2") format("woff2");font-weight:600 800;font-stretch:87.5%;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("/assets/fonts/hanken.woff2") format("woff2");font-weight:400 600;font-display:swap}
:root{
  --ink:#1B1A17;--cobalt:#1F4FBF;--deep:#173E96;--citrus:#F3E16B;--soap:#F7F6F2;--suds:#E8EEFB;--grey:#5A5B60;--line:#E3E1DA;
  --on-deep:#D6DEF4;--err:#B42318;--tile-hover:#C9D5F2;--shadow:16,30,70;--tint:18,44,110;
  --head:"Archivo SC","Arial Narrow",Arial,sans-serif;--body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --maxw:1240px;--side:40px;--ease:cubic-bezier(.22,.8,.3,1);--r:12px;--rc:20px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--soap);color:var(--ink);font:400 17px/1.6 var(--body);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
html.menu-open{overflow:hidden}
img,svg{display:block;max-width:100%}
picture{display:block}
a{color:var(--cobalt);text-underline-offset:.18em;text-decoration-thickness:1.5px}
a:hover{color:var(--deep)}
h1,h2,h3,.h2like,.h3like,.disp,.fq,.ask-h,.done-h,.cta-h,.qp-title,.nb-t,.cc-h,.foot-label,.foot-cta-t,.side-h,.pop-h,.ask-big,.card-t{
  font-family:var(--head);font-weight:800;font-stretch:87.5%;letter-spacing:-.01em;line-height:1.06;margin:0}
h1{font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem)}
h2,.h2like{font-size:clamp(1.85rem,1.05rem + 2vw,2.8rem)}
h3{font-size:1.2rem;line-height:1.15}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--side)}
.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:-9999px;top:10px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r)}
.skip:focus{left:10px;color:#fff}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}
.on-deep :focus-visible,.phero :focus-visible{outline-color:var(--citrus)}
.phero .ask :focus-visible{outline-color:var(--cobalt)}
.ic{width:24px;height:24px;flex:none}
.center{text-align:center}
.lead{max-width:34em;margin:0 0 30px;color:var(--grey);font-size:1.1rem;line-height:1.6}
.center .lead{margin-left:auto;margin-right:auto}
.on-deep .lead{color:var(--on-deep)}
.eyebrow{font:600 .95rem/1.3 var(--body);color:var(--grey);margin:0 0 .6em}
.optional{font-weight:400;color:var(--grey)}
.small{font-size:.9rem;color:var(--grey)}

/* ---------------------------------------------------------------- buttons: the pill with a white lens ring first */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px 0 22px;border:0;border-radius:999px;
  background:var(--cobalt);color:#fff;font:600 1.02rem/1.2 var(--body);text-decoration:none;cursor:pointer;transition:background .2s var(--ease)}
.btn:hover{background:var(--deep);color:#fff}
.btn:active{transform:translateY(1px)}
.btn .bl{width:17px;height:17px;flex:none}
.btn .lbl{display:inline-flex;align-items:center;gap:10px}
.btn .circ{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin:0 -19px 0 6px;border-radius:50%;
  background:#fff;color:var(--cobalt);transition:transform .25s var(--ease)}
.btn .circ svg{width:18px;height:18px}
.btn:hover .circ{transform:translateX(-3px)}
.btn.wide{display:flex;width:100%;justify-content:space-between}
.btn.block{width:100%}
.btn[disabled]{opacity:.7;cursor:progress}
/* the template's pair: the pill and its round arrow beside it */
.go{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font:600 1.02rem/1.2 var(--body)}
.go:hover{color:inherit}
.go .pill{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 28px 0 22px;border-radius:999px;background:var(--cobalt);color:#fff;
  transition:background .2s var(--ease)}
.go .pill .bl{width:17px;height:17px}
.go .circ{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:#fff;color:var(--cobalt);
  box-shadow:inset 0 0 0 1.5px var(--line);transition:transform .25s var(--ease)}
.go .circ svg{width:20px;height:20px}
.go:hover .pill{background:var(--deep)}
.go:hover .circ{transform:translateX(5px)}
.go.white .pill{background:#fff;color:var(--ink)}
.go.white .pill .bl{color:var(--cobalt)}
.go.white .circ{background:var(--cobalt);color:#fff;box-shadow:none}
.go.white:hover .pill{background:var(--suds)}
.go.citrus .pill{background:var(--citrus);color:var(--ink)}
.go.citrus .circ{background:#fff;color:var(--deep);box-shadow:none}
.go.citrus:hover .pill{background:#fff}
.go.white-line .pill{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.go.white-line:hover .pill{box-shadow:inset 0 0 0 1.5px var(--cobalt);color:var(--cobalt)}
.linkish{background:none;border:0;padding:6px 0;color:var(--cobalt);font:600 .98rem var(--body);text-decoration:underline;text-underline-offset:.18em;cursor:pointer}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:600}
.more svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.more:hover svg{transform:translateX(4px)}

/* ---------------------------------------------------------------- badges and lens markers */
.badge{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:8px 18px 8px 12px;border-radius:999px;background:rgba(255,255,255,.16);
  color:#fff;font-size:.95rem;font-weight:600;line-height:1.3}
.badge svg{width:17px;height:17px;flex:none;color:var(--citrus)}
.badge-light,.pill-tag{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;padding:8px 18px 8px 12px;border-radius:999px;background:var(--suds);
  color:var(--deep);font-size:.95rem;font-weight:600;line-height:1.3}
.badge-light svg,.pill-tag svg{width:16px;height:16px;flex:none;color:var(--cobalt)}
.pill-tag{background:#fff;color:var(--cobalt)}
ul.lenses,ol.lenses{margin:0 0 1em}
ul.lenses li,ol.lenses li{position:relative;padding-left:34px;margin:0 0 .75em}
ul.lenses li::before,ol.lenses li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;background:url("/assets/img/lens-mark.svg") no-repeat center/contain}
.on-deep ul.lenses li::before,.on-deep ol.lenses li::before{background-image:url("/assets/img/lens-mark-citrus.svg")}
.lens-crop{position:relative;aspect-ratio:1;overflow:hidden;border-radius:50%;background:var(--suds)}
.lens-crop img{width:100%;height:100%;object-fit:cover}
.lens-crop::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 clamp(8px,1.1vw,15px) var(--cobalt);
  background:url("/assets/img/gleam.svg") no-repeat center/100% 100%}
.binos{display:flex;align-items:center;gap:18px;max-width:var(--maxw);margin:64px auto;padding:0 var(--side)}
.binos span{flex:1;height:1px;background:var(--line)}
.binos img{width:44px;height:44px}

/* ---------------------------------------------------------------- header: the template's floating white bar */
.site-head{position:absolute;top:0;left:0;right:0;z-index:80;padding:22px var(--side) 0}
.bar{position:relative;max-width:calc(var(--maxw) - 2 * var(--side) + 100px);margin:0 auto;display:flex;align-items:center;gap:18px;min-height:78px;
  padding:12px 12px 12px 26px;background:#fff;border-radius:18px;box-shadow:0 14px 36px rgba(var(--shadow),.14)}
.logo{display:block;flex:none;line-height:0}
.logo img{width:208px;height:auto}
.mainnav{margin-left:auto}
.mainnav>ul{display:flex;gap:2px}
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:7px;min-height:46px;padding:0 13px;border:0;border-radius:var(--r);background:none;color:var(--ink);
  font:600 1rem var(--body);cursor:pointer;white-space:nowrap;transition:background .15s}
.dd-btn:hover,.dd.open .dd-btn{background:var(--suds)}
.chev{width:14px;height:14px;flex:none;color:var(--cobalt);transition:transform .25s var(--ease)}
.dd.open .dd-btn .chev{transform:rotate(180deg)}
.dd-panel{display:none;position:absolute;top:calc(100% + 24px);left:-12px;z-index:5;padding:22px 24px 18px;background:#fff;border-radius:18px;
  box-shadow:0 26px 60px rgba(var(--shadow),.2)}
.dd-panel::before{content:"";position:absolute;left:0;right:0;top:-26px;height:26px}
.dd.open .dd-panel{display:block;animation:ddin .22s var(--ease)}
@keyframes ddin{from{transform:translateY(-6px)}to{transform:none}}
.dd-panel a{color:var(--ink);text-decoration:none}
.dd-panel a:hover{color:var(--cobalt)}
.dd-label{margin:0 0 8px;font-size:.84rem;font-weight:600;color:var(--grey)}
.dd-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.92rem;color:var(--grey)}
.dd-foot p{margin:0}
.dd-all{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-weight:600;color:var(--cobalt)!important;white-space:nowrap}
.dd-all svg{width:16px;height:16px}
/* the two wide panels (Cleaning services, Locations, 12 Nov 2026) hang off the white bar itself, edge to edge */
.dd-services,.dd-locations{position:static}
.p-services,.p-locations{left:0;right:0;top:calc(100% + 8px);padding:26px 28px 14px}
.dd-panel:focus{outline:none}
.dd-cap{margin:0 0 10px;font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--grey)}
.sv-foot .dd-all:first-child{margin-left:0}
.sv{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px}
.sv-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
.sv-col li a{display:grid;grid-template-columns:26px minmax(0,1fr);gap:0 10px;align-items:start;padding:6px 0}
.sv-col li.sv-main:not(:first-child){margin-top:10px}
.sv-col b{display:block;font-size:.98rem;font-weight:600;line-height:1.3}
.sv-col .sv-main b{font:800 1.14rem/1.15 var(--head);font-stretch:87.5%}
.sv-col small{display:block;margin-top:2px;font-size:.86rem;line-height:1.35;color:var(--grey)}
.mg-ic{display:block;width:26px;height:26px;flex:none;color:var(--cobalt)}
.sv-side{display:flex;flex-direction:column;align-items:flex-start;padding:24px 22px 22px;border-radius:16px;background:var(--deep);color:#fff}
.sv-binos{width:44px;height:44px;color:var(--citrus)}
.sv-side-h{margin:14px 0 8px;font:800 1.55rem/1.08 var(--head);font-stretch:87.5%}
.sv-side p:not(.sv-side-h){margin:0 0 20px;color:var(--on-deep);font-size:.96rem;line-height:1.5}
.sv-side .go{margin-top:auto}
.sv-side .go .pill{min-height:48px;padding:0 20px 0 16px;white-space:nowrap}
.sv-side .go .circ{width:48px;height:48px}
.sv-foot p{flex:1;text-align:center}
.lc-top{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.lc-h{margin:0 0 4px;font:800 1.6rem/1.1 var(--head);font-stretch:87.5%}
.lc-sub{margin:0;color:var(--grey);font-size:.95rem}
.lc-search{flex:0 0 340px}
.lc-search label,.mn-search label{display:block;margin:0 0 6px;font-size:.88rem;font-weight:600}
.lc-box{position:relative;display:flex;align-items:center}
.lc-box>.ic{position:absolute;left:16px;width:18px;height:18px;color:var(--grey);pointer-events:none}
.lc-box input{width:100%;min-height:48px;padding:8px 52px 8px 44px;border:2px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);
  font:400 1rem var(--body);-webkit-appearance:none;appearance:none}
.lc-box input:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(31,79,191,.2)}
.lc-box button{position:absolute;right:5px;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:0;border-radius:50%;
  background:var(--cobalt);color:#fff;cursor:pointer}
.lc-box button:hover{background:var(--deep)}
.lc-box button .ic{width:16px;height:16px}
.lc-body{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:26px;padding:20px 0 18px}
.lc-body.lc-solo{grid-template-columns:minmax(0,1fr)}
.lc-cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 20px}
.lc-cols.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.lc-cols.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.lc-cols.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lc-city{margin:0 0 8px;padding-bottom:10px;border-bottom:1px solid var(--line)}   /* the region name sits under the city (no short codes in New Zealand) */
.lc-city a{display:block;font:800 1.14rem/1.15 var(--head);font-stretch:87.5%}
.lc-city span{display:block;margin-top:4px;font-size:.82rem;font-weight:600;color:var(--grey)}
.lc-col li a,.lc-more li a{display:block;padding:4px 0;font-size:.95rem}
.lc-col li a.lc-allc{margin-top:4px;font-weight:600;color:var(--cobalt)}
.lc-col li a.lc-allc:hover{color:var(--deep)}
.lc-more{padding:18px 20px 14px;border-radius:16px;background:var(--suds)}
.lc-more-h{margin:0 0 8px;padding-bottom:10px;border-bottom:1px solid rgba(var(--tint),.14);font:800 1.14rem/1.15 var(--head);font-stretch:87.5%}
.lc-more ul{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.lc-rows{padding-top:10px;border-top:1px solid var(--line)}
.lc-row{display:flex;align-items:baseline;gap:4px 18px;padding:5px 0;font-size:.92rem}
.lc-row .dd-cap{flex:0 0 76px;margin:0}
.lc-row ul{display:flex;flex:1;flex-wrap:wrap;gap:4px 18px;min-width:0}
.lc-row .dd-all{flex:none}
.lc-pop ul{display:grid;grid-template-columns:repeat(3,max-content);gap:4px 28px}
.lc-row li a{font-weight:600}
/* New Zealand: five main centres with long names ("All Christchurch suburbs", "Palmerston North"), so on a wide screen the
   columns take the width of their words and nothing wraps; under 1300 px they share the row evenly again and may wrap */
@media (min-width:1300px){
  .lc-body{grid-template-columns:minmax(0,1fr) 284px;gap:24px}
  .lc-cols.n5{grid-template-columns:repeat(5,auto);justify-content:space-between}
  .lc-col li a.lc-allc,.lc-more li a{white-space:nowrap}
  .lc-more{padding:18px 18px 14px}
  .lc-more ul{grid-template-columns:auto auto;justify-content:space-between}
}
.mn-search{margin:2px 0 10px}
.mn-search label{color:var(--grey)}
/* the two small panels (Bond and renting, Guides) keep the template's lists */
.pl-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:28px}
.pl-list a{display:block;padding:5px 0;font-weight:600}
.p-renting{width:min(580px,calc(100vw - 120px));left:50%;transform:translateX(-50%)}
.dd.open .p-renting{animation:ddinc .22s var(--ease)}
@keyframes ddinc{from{transform:translate(-50%,-6px)}to{transform:translateX(-50%)}}
.st-head{display:flex;align-items:center;gap:10px;font:800 1.14rem/1.15 var(--head);font-stretch:87.5%;margin:0 0 12px}
.st-ic{width:24px;height:24px;color:var(--cobalt)}
.dd-note{margin:0;color:var(--grey);font-size:.95rem;line-height:1.5}
.p-guides{right:-12px;left:auto;width:300px}
.pl-list a{padding:6px 0}
.head-go{margin-left:6px}
.head-go .pill{min-height:50px;padding:0 22px 0 18px;white-space:nowrap}
.head-go .circ{width:50px;height:50px}
.menu-btn{display:none;align-items:center;gap:8px;min-height:46px;margin-left:auto;padding:0 14px;border:0;border-radius:var(--r);background:var(--suds);
  color:var(--ink);font:600 1rem var(--body);cursor:pointer}
.menu-btn .ic{width:22px;height:22px}
.site-head.slim .bar{justify-content:flex-start}

/* the phone menu: full screen, the button on top, one accordion per item */
.mobile-nav{position:fixed;inset:0;z-index:120;overflow-y:auto;padding:0 18px 48px;background:var(--soap)}
.mn-head{display:flex;align-items:center;justify-content:space-between;min-height:76px;border-bottom:1px solid var(--line)}
.mn-head .logo img{width:176px}
.mn-close{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:0;border-radius:var(--r);background:var(--suds);color:var(--ink);cursor:pointer}
.mn-close .ic{width:22px;height:22px}
.mn-go{margin:20px 0 10px}
.mn-sec{border-bottom:1px solid var(--line)}
.mn-sec summary{display:flex;align-items:center;justify-content:space-between;min-height:64px;cursor:pointer;list-style:none;font:800 1.45rem/1.1 var(--head);font-stretch:87.5%}
.mn-sec summary::-webkit-details-marker{display:none}
.mn-sec summary .chev{width:18px;height:18px}
.mn-sec[open] summary .chev{transform:rotate(180deg)}
.mn-in{padding:0 0 16px}
.mn-sec a{display:block;padding:9px 0;color:var(--ink);font-weight:600;text-decoration:none}
.mn-sec .sub a{padding:6px 0 6px 16px;font-weight:400;color:var(--grey)}
.mn-label{margin:12px 0 2px;font-size:.85rem;font-weight:600;color:var(--grey)}
.mn-sec a.mn-all{color:var(--cobalt)}
.mn-more{margin-top:18px}
.mn-more a{display:block;padding:9px 0;font-weight:600;color:var(--ink);text-decoration:none}

/* ---------------------------------------------------------------- the quote card (the template's request form): the real flow */
.hero-card,.ask{position:relative;padding:30px 30px 24px;border-radius:22px;background:var(--suds);color:var(--ink);box-shadow:0 34px 70px rgba(8,22,60,.32)}
.flowcard,.askcard{margin:0}
.ftop{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 18px}
.fq{font-size:1.9rem;line-height:1.05}
.fprog{display:flex;align-items:center;gap:10px;flex:none}
.fstep{font-size:.88rem;font-weight:600;color:var(--grey);white-space:nowrap}
.plens{display:flex;gap:5px;flex:none}
.plens li svg{width:18px;height:18px}
.pl-hair{fill:none;stroke:#B9C3DD;stroke-width:6}
.pl-disc,.pl-ring,.pl-gleam{fill:var(--cobalt);opacity:0}
/* answered: filled cobalt with a white gleam; now: the outline (rim and gleam); to come: a hairline */
.plens[data-done="1"] .p1 .pl-disc,.plens[data-done="2"] :is(.p1,.p2) .pl-disc,.plens[data-done="3"] :is(.p1,.p2,.p3) .pl-disc,.plens[data-done="4"] .pl-disc{opacity:1}
.plens[data-done="1"] .p1 .pl-gleam,.plens[data-done="2"] :is(.p1,.p2) .pl-gleam,.plens[data-done="3"] :is(.p1,.p2,.p3) .pl-gleam,.plens[data-done="4"] .pl-gleam{opacity:1;fill:#fff}
.plens[data-done="1"] .p1 .pl-hair,.plens[data-done="2"] :is(.p1,.p2) .pl-hair,.plens[data-done="3"] :is(.p1,.p2,.p3) .pl-hair,.plens[data-done="4"] .pl-hair{opacity:0}
.plens[data-now="1"] .p1 :is(.pl-ring,.pl-gleam),.plens[data-now="2"] .p2 :is(.pl-ring,.pl-gleam),.plens[data-now="3"] .p3 :is(.pl-ring,.pl-gleam),.plens[data-now="4"] .p4 :is(.pl-ring,.pl-gleam){opacity:1}
.plens[data-now="1"] .p1 .pl-hair,.plens[data-now="2"] .p2 .pl-hair,.plens[data-now="3"] .p3 .pl-hair,.plens[data-now="4"] .p4 .pl-hair{opacity:0}
.step{display:none}
.step.on{display:block}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0;margin:0;padding:0;border:0}
.tile{position:relative;min-width:0}
.tile input{position:absolute;opacity:0;width:1px;height:1px}
.tile label{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:12px;height:100%;min-height:72px;padding:12px 14px;border-radius:14px;background:#fff;
  cursor:pointer;transition:box-shadow .15s ease}
.tile label:hover{box-shadow:inset 0 0 0 2px var(--tile-hover)}
.tile .tic{width:36px;height:36px;color:var(--ink)}
.tile b{display:block;font:600 1rem/1.2 var(--body)}
.tile small{display:block;margin-top:2px;font-size:.84rem;line-height:1.25;color:var(--grey)}
.tile input:checked+label{box-shadow:inset 0 0 0 2px var(--cobalt)}
.tile input:checked+label .tic,.tile input:checked+label b{color:var(--cobalt)}
.tile input:focus-visible+label{outline:3px solid var(--cobalt);outline-offset:2px}
.chips-q{border:0;margin:0 0 16px;padding:0;min-width:0}
.chips-q legend{margin:0 0 10px;padding:0;font:600 1.02rem var(--body)}
.chipset{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:999px;background:#fff;font-weight:600;cursor:pointer;
  transition:box-shadow .15s ease,background .15s ease}
.chip span:hover{box-shadow:inset 0 0 0 2px var(--tile-hover)}
.sizes .chip span{min-width:56px;justify-content:center}
.chip input:checked+span{background:var(--cobalt);color:#fff}
.chip input:focus-visible+span{outline:3px solid var(--cobalt);outline-offset:2px}
.chip.tog span svg{width:16px;height:16px}
.tg-off{color:#9AA3BA}.tg-on{color:var(--cobalt);display:none}
.chip.tog input:checked+span{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--cobalt)}
.chip.tog input:checked+span .tg-on{display:block}.chip.tog input:checked+span .tg-off{display:none}
.field{margin:0 0 14px}
.field label{display:block;margin:0 0 6px;font-weight:600}
.field input,.field select,.field textarea{width:100%;min-height:54px;padding:10px 16px;border:2px solid transparent;border-radius:var(--r);background:#fff;
  color:var(--ink);font:400 1.06rem var(--body)}
.field textarea{min-height:96px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;padding-right:46px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M18 25L32 39L46 25' fill='none' stroke='%231F4FBF' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center/16px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(31,79,191,.2)}
.field input[aria-invalid="true"]{border-color:var(--err)}
.field input::placeholder{color:#767780}
.hint{display:block;margin-top:6px;font-size:.88rem;color:var(--grey)}
.ferr{display:block;margin-top:6px;font-size:.9rem;font-weight:600;color:var(--err)}
.err{margin:8px 0 0;font-weight:600;color:var(--err)}
.err:empty{display:none}
.stop{margin:4px 0 0;padding:12px 14px;border-radius:var(--r);background:#fff;font-weight:600}
.consent{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;margin:6px 0 8px;font-size:.95rem;line-height:1.45;cursor:pointer}
.consent input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--cobalt)}
.consent span{flex:1}
.consent .ferr{flex-basis:100%}
.fineprint{margin:0 0 14px;font-size:.86rem;color:var(--grey)}
.fineprint a{color:var(--grey)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.captcha:empty,.captcha .g-recaptcha:empty{display:none}
.step-nav{display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.step[data-need="job"] .step-nav{margin-top:4px}
.back{min-height:44px;padding:0 6px;border:0;background:none;color:var(--grey);font:600 1rem var(--body);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.back:hover{color:var(--ink)}
.step.done{padding:4px 0 2px}
.step.done:focus{outline:none}
.done-mark svg{width:46px;height:46px;margin:0 0 14px;color:var(--cobalt)}
.done-h{margin:0 0 .4em;font-size:2rem}
.divx{height:1px;margin:22px 0 16px;background:#CCD6EF}
.callrow{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:.95rem;line-height:1.45;font-weight:600}
.callrow svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--cobalt)}
.card-note,.ask-note{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-weight:600;font-size:.95rem}
.note-lens{width:16px;height:16px;flex:none;color:var(--cobalt)}

/* ---------------------------------------------------------------- content page hero: the page photo under the cobalt tint */
.phero{position:relative;isolation:isolate;overflow:hidden;padding:150px 0 72px;background:var(--deep);color:#fff}
.phero-photo{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--deep)}
.phero-photo picture,.phero-photo img{width:100%;height:100%}
.phero-photo img{object-fit:cover;filter:saturate(.9)}
.phero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(var(--tint),.93) 0%,rgba(var(--tint),.88) 50%,rgba(var(--tint),.55) 66%,rgba(var(--tint),.3) 100%)}
.phero:not(.with-ask) .phero-photo::after{background:linear-gradient(90deg,rgba(var(--tint),.93) 0%,rgba(var(--tint),.86) 60%,rgba(var(--tint),.6) 100%)}
/* generated hero photos (.lite, 12 Nov 2026): the photo in its natural colour under one layer of the hero tint.
   Behind the words (the text column on wide screens, the whole photo on phones) the tint is 76%: a pure white pixel in
   any photo comes out at rgb(75,95,145), so white text is 6.3 to 1, the citrus sub-line 4.7 to 1, the breadcrumb 4.7 to 1
   and the badge 5.0 to 1 on its pill, whatever the photo shows. Right of the words it lifts to a light wash */
.home .hero-photo.lite img,.phero-photo.lite img{filter:none}
.home .hero-photo.lite::after,.phero-photo.lite::after{
  background:linear-gradient(90deg,rgba(var(--tint),.76) 0%,rgba(var(--tint),.76) 57%,rgba(var(--tint),.14) 72%,rgba(var(--tint),.08) 100%)}
.phero:not(.with-ask) .phero-photo.lite::after{background:rgba(var(--tint),.76)}
.lite~.wrap .badge{background:rgba(255,255,255,.1)}
.phero-grid{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:56px;align-items:start}
.phero:not(.with-ask) .phero-grid{grid-template-columns:minmax(0,46em)}
.ph-text{min-width:0;padding-top:10px}
.phero h1{margin:0 0 16px;color:#fff;font-size:clamp(2.1rem,1.1rem + 3vw,3.9rem);line-height:1}
.phero .h1-sub{margin:0 0 12px;color:var(--citrus);font-size:1.22rem;font-weight:600;line-height:1.4}
.phero .lede{max-width:34em;margin:0;color:#fff;font-size:1.15rem;line-height:1.55}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0 0 18px;font-size:.92rem;color:var(--on-deep)}
.crumbs li+li::before{content:"/";margin-right:8px;color:rgba(255,255,255,.5)}
.crumbs a{color:#fff;text-decoration-color:rgba(255,255,255,.45)}
.crumbs a:hover{color:#fff;text-decoration-color:#fff}
.crumbs [aria-current]{color:var(--on-deep)}
.checked{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-weight:600;color:#fff;font-size:.95rem}
.ck-lens{width:16px;height:16px;color:var(--citrus)}
/* the ask card beside the H1: the template's quote card */
.ask-h{margin:0 0 16px;font-size:1.7rem;line-height:1.08}
.ask-job{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:12px 16px;border-radius:14px;background:#fff;font-weight:600;color:var(--cobalt);box-shadow:inset 0 0 0 2px var(--cobalt)}
.ask-job .tic{width:32px;height:32px;flex:none;color:var(--cobalt)}
.ask-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:14px}
.ask-row .field{flex:1 1 150px;margin:0}
.ask-row .btn{flex:1 1 200px;width:auto}
.ask-tiles+input+.ask-row,.ask-tiles~.ask-row{margin-top:14px}

/* the ticks and the rating slot (job, city, city-service and suburb pages, 3 Nov 2026): in the HTML after the card, so
   phones show them after it; on wide screens the grid puts them under the intro, beside the card */
.phero.has-ticks .phero-grid{grid-template-areas:"text card" "ticks card";grid-template-rows:auto 1fr;row-gap:0}
.phero.has-ticks .ph-text{grid-area:text}
.phero.has-ticks .ask{grid-area:card}
.ph-ticks{grid-area:ticks;min-width:0}
.hero-ticks{display:grid;gap:12px;max-width:34em;margin:26px 0 0}
.hero-ticks li{display:flex;align-items:flex-start;gap:12px;color:#fff;font-size:1.04rem;font-weight:600;line-height:1.35}
.hero-ticks svg{width:22px;height:22px;flex:none;margin-top:1px;color:var(--citrus)}
.hero-rating{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:22px 0 0;color:#fff;font-size:.98rem;font-weight:600;line-height:1.4}
.hero-rating .rv-stars{display:inline-flex;gap:2px;color:var(--citrus)}
.hero-rating .rv-stars svg{width:18px;height:18px}
.hero-rating b{font-size:1.12rem}
.home .hero-more .hero-rating{margin:-14px 0 30px}
.hero-card .hero-rating{margin:16px 0 0;color:var(--ink)}
.hero-card .hero-rating .rv-stars{color:var(--cobalt)}

/* the trust cards after the hero: who does what, white cards with a cobalt icon circle (labels, never headings) */
.tcards{padding:48px 0;background:var(--soap)}
.tc-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tc-row li{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;padding:22px 24px;border-radius:var(--rc);background:#fff;
  box-shadow:0 1px 0 var(--line)}
.tc-row span.ic{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--cobalt);color:#fff}
.tc-row span.ic svg{width:26px;height:26px}
.tc-t{margin:4px 0 6px;font:800 1.3rem/1.1 var(--head);font-stretch:87.5%;letter-spacing:-.01em}
.tc-row p:not(.tc-t){margin:0;color:var(--grey);font-size:1rem;line-height:1.5}

/* what happens next: a cobalt-deep band, citrus icon circles */
.on-deep{background:var(--deep);color:#fff}
.next-band{padding:84px 0}
.next-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin:0 0 46px}
.next-head .h2like{color:#fff}
.next-head .badge{margin-bottom:18px}
.next-steps{display:grid;grid-template-columns:repeat(3,1fr)}
.next-steps li{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:0 30px}
.next-steps li:first-child{padding-left:0}
.next-steps li+li{border-left:1px solid rgba(255,255,255,.16)}
.nb-ic{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:var(--citrus);color:var(--ink)}
.nb-ic svg{width:26px;height:26px}
.nb-t{margin:4px 0 8px;color:#fff;font-size:1.4rem;line-height:1.1}
.next-steps p:not(.nb-t){margin:0;color:var(--on-deep);font-size:1rem;line-height:1.5}

/* ---------------------------------------------------------------- the honest check card (the template's check rows) */
.checkcard{padding:96px 0;background:var(--soap)}
.check-grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.check-intro .h2like{margin:0 0 16px}
.check-intro p:not(.h2like):not(.badge-light){color:var(--grey);font-size:1.06rem}
.checks{display:grid;gap:14px}
.checks li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:center;padding:16px 22px 16px 16px;border-radius:16px;background:#fff;box-shadow:0 1px 0 var(--line)}
.checks span.ic{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--cobalt);color:#fff}
.checks span.ic svg{width:24px;height:24px}
.checks p{margin:0;font-size:1.02rem;line-height:1.45}
.check-sub{margin:22px 0 12px;font-weight:600}

/* ---------------------------------------------------------------- page cards (the template's service cards) */
.cards-sec{padding:96px 0;background:var(--suds)}
.cards-sec .badge-light{background:#fff}
.cards-sec h2,.cards-sec>.wrap>.h2like{margin:0 0 40px;max-width:24em}
.cards-sec+.cards-sec{padding-top:0}
.cards-sec+.cards-sec .badge-light{margin-top:8px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
@media (min-width:1100px){.cards:has(>.card:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}}
.card{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--rc);background:#fff;color:var(--ink);text-decoration:none;
  box-shadow:0 10px 30px rgba(var(--shadow),.06);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(var(--shadow),.13);color:var(--ink)}
.card .img{position:relative;height:200px;background:#D9E1F5}
.card .img img{width:100%;height:100%;object-fit:cover}
.card span.ic{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border:4px solid #fff;border-radius:50%;background:var(--cobalt);color:#fff}
.card span.ic svg{width:27px;height:27px}
.card .img span.ic{position:absolute;left:22px;bottom:-29px}
.card .noimg{padding:24px 22px 0}
.card .body{display:flex;flex:1;flex-direction:column;padding:20px 26px 22px}
.card.has-img .body{padding-top:42px}
.card-t{margin:0 0 10px;font-size:1.42rem;line-height:1.1}
.card-b{margin:0 0 16px;color:var(--grey);font-size:1rem;line-height:1.5}
.word{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  font-size:.92rem;font-weight:600;color:var(--cobalt)}
.word svg{width:18px;height:18px;flex:none;transition:transform .25s var(--ease)}
.card:hover .word svg{transform:translateX(4px)}
.cards-sec .more{margin-top:26px}

/* link chips (the template's pill links) */
.chips-sec{padding:64px 0;background:var(--soap)}
.chips-sec h2{margin:0 0 24px;font-size:clamp(1.6rem,1.1rem + 1.4vw,2.2rem)}
.chips-sec+.chips-sec{padding-top:0}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:8px 18px 8px 14px;border-radius:999px;background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);font-weight:600;font-size:.96rem;line-height:1.25;text-decoration:none;transition:box-shadow .15s,color .15s}
.chips a::before{content:"";flex:none;width:15px;height:15px;background:url("/assets/img/lens-mark.svg") no-repeat center/contain}
.chips a:hover{box-shadow:inset 0 0 0 1.5px var(--cobalt);color:var(--cobalt)}
.chips .chip-more a{background:var(--cobalt);box-shadow:none;color:#fff}
.chips .chip-more a::before{background-image:url("/assets/img/lens-mark-citrus.svg")}
.chips .chip-more a:hover{background:var(--deep);color:#fff}

/* ---------------------------------------------------------------- questions (the template's FAQ: two columns of cards) */
.faq{padding:104px 0}
.faq-head{max-width:760px;margin:0 auto 48px;text-align:center}
.faq-head h2{margin:0 0 14px}
.faq-head .lead{margin:0 auto}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;align-items:start}
.faq-col{display:flex;flex-direction:column;gap:16px}
.qa{border-radius:16px;background:#fff;box-shadow:0 1px 0 var(--line)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 20px 20px 24px;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa h3{font-size:1.18rem;line-height:1.25}
.qa p{margin:0;padding:0 24px 22px;color:var(--grey)}
.tg{display:flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--suds);color:var(--deep);transition:background .2s,color .2s}
.tg svg{width:15px;height:15px;transition:transform .25s var(--ease)}
details[open]>summary .tg{background:var(--deep);color:#fff}
details[open]>summary .tg svg{transform:rotate(180deg)}

/* ---------------------------------------------------------------- the last ask (the template's final contact block) */
.closing{background:var(--suds)}
.closing-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;padding-top:100px;padding-bottom:100px}
.cc-card{margin:0 0 22px;padding:34px 34px 22px;border-radius:var(--rc);background:#fff}
.cc-h{margin:0 0 20px;font-size:1.6rem;line-height:1.12}
.cc-note{display:flex;gap:16px;align-items:flex-start;padding:26px 30px}
.cc-ic{width:38px;height:38px;flex:none;color:var(--cobalt)}
.cc-note p{margin:0;font-size:1rem}
.closing-ask h2,.ask-big{margin:0 0 12px;font-size:clamp(2rem,1.2rem + 2vw,2.9rem);line-height:1.02}
.ask-big{font-size:clamp(2.2rem,1.2rem + 2.6vw,3.4rem)}
.ask-p{margin:0 0 26px;color:var(--grey);font-size:1.08rem}
.pc-form .btn{margin-top:8px}

/* ---------------------------------------------------------------- the reading layout (guides, rules, the depth on job pages) */
.doc{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;padding-bottom:40px}
.prose{max-width:46em;min-width:0}
.prose>.meta{margin:0 0 24px;font-size:.88rem;color:var(--grey)}
.prose .meta a{color:var(--grey)}
.prose h2{margin:1.7em 0 .55em;font-size:clamp(1.55rem,1.1rem + 1.2vw,2.1rem)}
.prose .b:first-of-type h2,.prose .meta+.b h2{margin-top:.3em}
.prose p{font-size:1.06rem}
.prose h3{margin:1.1em 0 .35em}
.b{margin:0 0 8px}
.b-steps ol{counter-reset:s}
.b-steps li{counter-increment:s;position:relative;margin-bottom:12px;padding:4px 0 6px 58px}
.b-steps li::before{content:counter(s);position:absolute;left:0;top:2px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;background:var(--cobalt);color:#fff;font:800 1.15rem/1 var(--head);font-stretch:87.5%}
.b-steps li h3{margin:0 0 4px}
.b-steps li p{margin:0}
.b-flags ul,.b-ask ul{margin:0 0 1em}
.b-flags li,.b-ask li{display:grid;grid-template-columns:26px 1fr;gap:12px;margin:0 0 .75em}
.fl-ic{width:22px;height:22px;margin-top:3px;color:var(--cobalt)}
.b-warn{margin:28px 0;padding:22px 24px;border-radius:var(--rc);background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
.warn-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.warn-ic{width:30px;height:30px;flex:none}
.b-warn h2{margin:0!important;font-size:1.35rem}
.b-warn p{margin:0}
.tbl{overflow-x:auto;max-width:100%;margin:0 0 1em}
.b-compare table{width:100%;min-width:480px;border-collapse:collapse;overflow:hidden;border-radius:var(--r);background:#fff;font-size:.98rem}
.b-compare th,.b-compare td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.b-compare thead th{background:var(--suds);font-family:var(--head);font-weight:800;font-stretch:87.5%}
.b-compare tbody th{font-weight:600}
.diy-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.diy-you,.diy-pro{padding:22px 22px 8px;border-radius:var(--rc);background:#fff}
.diy-pro{background:var(--suds)}
.diy-grid h3{margin:0 0 12px}
.b-advice{display:grid;grid-template-columns:44px 1fr;gap:16px;margin:28px 0;padding:26px 24px;border-radius:var(--rc);background:var(--suds)}
.adv-lens{width:40px;height:40px;color:var(--cobalt)}
.b-advice h2{margin:0 0 .4em!important;font-size:1.4rem}
.b-advice p{margin:0}
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.loc{padding:20px 22px 6px;border-radius:var(--rc);background:#fff}
.loc h3{margin:0 0 6px}
.cta-band{margin:32px 0;padding:30px 30px 32px;border-radius:var(--rc)}
.cta-band .cta-h{margin:0 0 .4em;color:#fff;font-size:1.6rem}
.cta-band p:not(.cta-h){color:var(--on-deep)}
.doc-side{min-width:0}
.toc{margin-bottom:18px;padding:22px 24px;border-radius:var(--rc);background:#fff}
.toc .h3like{margin:0 0 12px;font-size:1.1rem}
.toc ol{padding:0 0 0 18px;list-style:decimal;font-size:.95rem}
.toc li{margin:0 0 7px}
.side-cta{padding:24px;border-radius:var(--rc);background:var(--suds)}
.side-h{margin:0 0 8px;font-size:1.35rem}
.side-cta p:not(.side-h){color:var(--grey)}
/* ONE sticky thing in the sidebar (4 Nov 2026: the sticky contents box slid over the ask card's text). The contents box
   scrolls away with the page and the ask card under it sticks; it is short, so it stays clear of the slide-in question
   in the bottom corner (too short a window: nothing sticks). A contents box with nothing under it still sticks. */
.doc-side>.side-cta,.doc-side>.toc:only-child{position:sticky;top:20px}
@media (max-height:599px){.doc-side>.side-cta{position:static}}
.hub-intro{padding-bottom:28px}
.phero+.hub-intro{padding-top:48px}
.hub-intro .prose{padding-top:8px}
.region-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.region-col{padding:22px 24px;border-radius:var(--rc);background:#fff}
.region-col h3{font-size:1.35rem}
.region-col ul{margin:10px 0 0}
.region-col li{margin:0 0 4px}
.sources{padding:40px 0 56px;font-size:.92rem;border-top:1px solid var(--line)}
.sources .h3like{margin:0 0 10px;font-size:1.15rem}
.sources ul{margin:0 0 10px;padding-left:18px;list-style:disc}
.sources li{margin:0 0 4px}
.sources li span{color:var(--grey)}
.site-search label{display:block;margin:0 0 8px}
.site-search input{width:100%;min-height:56px;padding:10px 18px;border:2px solid var(--line);border-radius:999px;background:#fff;font:400 1.08rem var(--body)}
.site-search input:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(31,79,191,.2)}
.search-count{margin:14px 0;color:var(--grey)}
.search-results li{margin:0 0 10px;padding:16px 20px;border-radius:16px;background:#fff}
.search-results a{display:block;font:800 1.2rem/1.15 var(--head);font-stretch:87.5%;text-decoration:none}
.search-results span{display:block;margin-top:4px;color:var(--grey);font-size:.96rem}
.proof-sec{padding:96px 0}
.proof-grid,.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}
.rv{margin:0;padding:22px;border-radius:var(--rc);background:#fff}

/* ---------------------------------------------------------------- the quote page, thank-you, 404: the blue top band */
.top-band{padding:150px 0 132px}
.top-band h1{color:#fff}
.flow-h1{max-width:20em;font-size:clamp(2rem,1.2rem + 2.4vw,3.3rem)}
.flow-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start;margin-top:-92px;padding-bottom:96px}
.flow-page .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.aside-card{padding:28px 28px 14px;border-radius:var(--rc);background:#fff;box-shadow:0 20px 50px rgba(var(--shadow),.12)}
.aside-card h2{margin:0 0 16px;font-size:1.5rem}
.ty-head{max-width:46em}
.ty-head .lede{margin:0;color:#fff;font-size:1.22rem;font-weight:600}
.ty-lens svg{width:54px;height:54px;margin:0 0 18px;color:var(--citrus)}
.ty-head h1{margin:0 0 14px}
.ty-grid{display:grid;grid-template-columns:6fr 5fr;gap:48px;align-items:start;margin-top:-72px;padding-bottom:96px}
.ty-copy{padding:28px 30px 8px;border-radius:var(--rc);background:#fff;box-shadow:0 20px 50px rgba(var(--shadow),.12)}
.ty-copy .cc-note{margin:6px 0 22px;padding:20px 0 0;border-top:1px solid var(--line);border-radius:0}
.ty-card{padding:28px 28px 14px;border-radius:var(--rc);background:var(--suds);box-shadow:0 20px 50px rgba(var(--shadow),.12)}
.ty-card h2{margin:0 0 16px;font-size:1.5rem}
.nf{padding:56px var(--side) 96px}
.actions{display:flex;flex-wrap:wrap;gap:14px}

/* ---------------------------------------------------------------- footer (the template's: logo row, columns, the white box) */
.site-foot{background:var(--deep);color:#fff}
.site-foot .wrap{padding-top:64px;padding-bottom:34px}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 42px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.16)}
.foot-logo img{width:236px;height:auto}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px}
.foot-nav a{padding:9px 16px;border-radius:999px;color:#fff;font-weight:600;text-decoration:none;transition:background .15s}
.foot-nav a:hover{background:var(--cobalt);color:#fff}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px;align-items:start}
.foot-about>p{color:var(--on-deep);font-size:.98rem;line-height:1.55}
.foot-cta{margin-top:24px;padding:20px;border-radius:16px;background:#fff;color:var(--ink)}
.foot-cta-t{margin:0 0 12px;font-size:1.25rem;line-height:1.15}
.foot-cta .btn{min-height:52px;white-space:nowrap}
.foot-cta .btn .circ{width:40px;height:40px;margin-right:-17px}
.foot-label{margin:0 0 14px;color:#fff;font-size:1.12rem;line-height:1.15}
.foot-col li a{position:relative;display:block;padding:5px 0 5px 23px;color:var(--on-deep);font-size:.96rem;line-height:1.35;text-decoration:none}
.foot-col li a::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:14px;background:url("/assets/img/lens-mark-citrus.svg") no-repeat center/contain}
.foot-col li a:hover{color:#fff;text-decoration:underline}
.foot-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:48px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.16);color:var(--on-deep);font-size:.92rem}
.legal-nav{display:inline-flex;flex-wrap:wrap;gap:6px 20px}
.foot-legal a{color:var(--on-deep)}
.foot-legal a:hover{color:#fff}
.foot-legal p{margin:0}
.site-foot.slim .wrap{padding-top:8px;padding-bottom:28px}
.site-foot.slim .foot-legal{margin-top:0;border-top:0}
.site-foot.slim .legal-nav{margin-right:12px}
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#fff;
  box-shadow:0 -10px 30px rgba(var(--shadow),.16)}
.sticky .btn{min-height:54px}

/* ---------------------------------------------------------------- the slide-in question (job pages) */
.quiz-pop{position:fixed;right:24px;bottom:24px;z-index:70;width:370px;padding:22px;border-radius:var(--rc);background:#fff;
  box-shadow:0 26px 60px rgba(var(--shadow),.24);transform:translateY(16px);opacity:0;transition:transform .25s var(--ease),opacity .25s var(--ease)}
.quiz-pop.in{transform:none;opacity:1}
.qp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.qp-title{margin:4px 0 8px;font-size:1.35rem}
.qp-close{flex:none;width:40px;height:40px;margin:-6px -6px 0 0;border:0;border-radius:50%;background:var(--suds);color:var(--ink);cursor:pointer}
.qp-close .ic{width:18px;height:18px;margin:auto}
.qp-intro p{margin-bottom:14px;color:var(--grey)}
.qp-step{margin:0;padding:0;border:0}
.qp-step legend,.qp-step label{display:block;margin-bottom:8px;font-weight:600}
.qp-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.qp-opt{position:relative;display:flex;align-items:center;gap:8px;min-height:48px;padding:6px 10px;border-radius:var(--r);background:var(--suds);cursor:pointer;font-size:.92rem;font-weight:600}
.qp-opt input{position:absolute;opacity:0}
.qp-opt .tic{width:24px;height:24px;flex:none}
.qp-opt:has(input:checked){box-shadow:inset 0 0 0 2px var(--cobalt);color:var(--cobalt)}
.qp-step input[name=postcode]{width:100%;min-height:52px;margin-bottom:10px;padding:10px 16px;border:2px solid var(--line);border-radius:var(--r);font:400 1.06rem var(--body)}

/* ================================================================ home (body.home): template variation 2's sections */
.home .hero{position:relative;isolation:isolate;overflow:hidden;min-height:830px;padding:158px 0 80px;background:var(--deep);color:#fff}
.home .hero-photo{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--deep)}
.home .hero-photo picture,.home .hero-photo img{width:100%;height:100%}
.home .hero-photo img{object-fit:cover;filter:saturate(.9)}
.home .hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(var(--tint),.93) 0%,rgba(var(--tint),.88) 47%,rgba(var(--tint),.46) 60%,rgba(var(--tint),.1) 80%)}
.home .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:56px;align-items:start}
.home .hero-left{padding-top:22px}
.home .hero h1{max-width:8.6em;margin:0 0 24px;color:#fff;font-size:clamp(2.3rem,.9rem + 4.3vw,4.85rem);line-height:.98}
.home .hero .h1-sub{max-width:29em;margin:0 0 30px;color:var(--citrus);font-size:1.22rem;line-height:1.5}
.checks2{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;max-width:600px;margin:0 0 38px}
.checks2 li{display:flex;align-items:flex-start;gap:12px;font-size:1.04rem;font-weight:600;line-height:1.35}
.checks2 svg{width:22px;height:22px;flex:none;margin-top:1px;color:var(--citrus)}
.home .hero-card .tiles{grid-template-columns:1fr 1fr}
/* the ticks, rating slot and button follow the card in the HTML (after it on phones); wide screens put them under the H1 */
.home .hero-grid{grid-template-areas:"left card" "more card";grid-template-rows:auto 1fr;row-gap:0}
.home .hero-left{grid-area:left}
.home .hero-card{grid-area:card}
.home .hero-more{grid-area:more;min-width:0}

.band3 ul{display:grid;grid-template-columns:repeat(3,1fr);padding-top:62px;padding-bottom:62px;text-align:center}
.band3 li{padding:0 34px}
.band3 li+li{border-left:1px solid rgba(255,255,255,.16)}
.band3 svg{width:30px;height:30px;margin:0 auto 16px;color:var(--citrus)}
.band3 .big{margin:0 0 10px;font:800 clamp(1.55rem,1rem + 1.35vw,2.3rem)/1.06 var(--head);font-stretch:87.5%;letter-spacing:-.01em}
.band3 .lab{max-width:22em;margin:0 auto;color:var(--on-deep);font-size:1.02rem}

.why2{padding:112px 0}
.why2 .wrap{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center}
.why2 h2{margin:0 0 16px}
.acc{margin:0 0 14px;border-radius:16px;background:#fff;box-shadow:0 1px 0 var(--line)}
.acc summary{display:flex;align-items:center;gap:16px;padding:17px 18px;cursor:pointer;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc span.ic{display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:50%;background:var(--cobalt);color:#fff}
.acc span.ic svg{width:24px;height:24px}
.acc h3{flex:1;font-size:1.24rem;line-height:1.2}
.acc p{margin:0;padding:0 24px 20px 82px;color:var(--grey);font-size:1rem}
.why2-imgs{position:relative;height:640px}
.why2-imgs .a{position:absolute;top:0;left:0;width:80%;height:520px;overflow:hidden;border-radius:var(--rc);background:var(--suds)}
.why2-imgs .a img{width:100%;height:100%;object-fit:cover}
.why2-imgs .b{position:absolute;right:0;bottom:0;width:52%}
.why2-imgs .b .lens-crop{box-shadow:0 0 0 10px var(--soap)}

.explore{background:var(--suds)}
.explore>.wrap{padding-top:112px;padding-bottom:112px}
.explore h2{margin:0 0 14px}
.exp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:52px}
.ecard{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--rc);background:#fff;color:var(--ink);text-decoration:none;
  box-shadow:0 10px 30px rgba(var(--shadow),.06);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.ecard:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(var(--shadow),.13);color:var(--ink)}
.ecard .img{position:relative;height:216px;background:#D9E1F5}
.ecard .img img{width:100%;height:100%;object-fit:cover}
.ecard span.ic{position:absolute;left:24px;bottom:-29px;display:flex;align-items:center;justify-content:center;width:58px;height:58px;border:4px solid #fff;
  border-radius:50%;background:var(--cobalt);color:#fff}
.ecard span.ic svg{width:28px;height:28px}
.ecard .body{display:flex;flex:1;flex-direction:column;padding:44px 26px 24px}
.ecard h3{margin:0 0 10px;font-size:1.55rem}
.ecard p{margin:0 0 16px;color:var(--grey);font-size:1rem;line-height:1.5}
.ecard:hover .word svg{transform:translateX(4px)}
.ecard.active .body{background:var(--deep);color:#fff}
.ecard.active p{color:var(--on-deep)}
.ecard.active span.ic{border-color:var(--deep)}
.ecard.active .word{border-top-color:rgba(255,255,255,.18);color:#fff}

.about2 .wrap{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center;padding-top:112px;padding-bottom:112px}
.about2-img{height:700px;overflow:hidden;border-radius:var(--rc);background:#2A4FA6}
.about2-img img{width:100%;height:100%;object-fit:cover}
.about2 h2{margin:0 0 20px;color:#fff}
.feat-it{display:grid;grid-template-columns:54px 1fr;gap:18px;margin:0 0 22px}
.feat-it span.ic{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:var(--citrus);color:var(--ink)}
.feat-it span.ic svg{width:26px;height:26px}
.feat-it h3{margin:4px 0 6px;font-size:1.32rem}
.feat-it h3 a{color:#fff;text-decoration:none}
.feat-it h3 a:hover{text-decoration:underline}
.feat-it p{margin:0;color:var(--on-deep);font-size:1rem;line-height:1.5}
.aka{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:28px 0 34px}
.aka .lbl{margin-right:4px;font-size:.92rem;color:var(--on-deep)}
.aka a,.rent-links a{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.38);
  color:#fff;font-size:.93rem;font-weight:600;text-decoration:none;transition:background .15s,color .15s}
.aka a:hover,.rent-links a:hover{background:#fff;color:var(--deep)}

.testi>.wrap{padding-top:112px;padding-bottom:112px}
.testi-head{max-width:760px;margin:0 auto 58px}
.testi-head h2{margin:0 0 16px}
.testi-head .lead{margin:0 auto}
.testi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:center}
.tcard{position:relative;display:block;padding:14px 14px 20px;border-radius:var(--rc);background:#fff;color:var(--ink);text-decoration:none;
  box-shadow:0 10px 30px rgba(var(--shadow),.06);transition:box-shadow .25s var(--ease)}
.tcard.mid{z-index:1;transform:scale(1.06);box-shadow:0 24px 54px rgba(var(--shadow),.14)}
.tcard:hover{box-shadow:0 24px 54px rgba(var(--shadow),.16);color:var(--ink)}
.tcard .img,.ccard .img{position:relative;aspect-ratio:16/11;overflow:hidden;border-radius:13px;background:var(--suds)}
.tcard .img img,.ccard .img img{width:100%;height:100%;object-fit:cover}
.st{position:absolute;top:12px;left:12px;padding:5px 12px;border-radius:999px;background:#fff;color:var(--deep);font-size:.8rem;font-weight:600}
.tbody{padding:20px 10px 0}
.tcard h3{margin:0 0 8px;font-size:1.5rem}
.tcard p{margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--line);color:var(--grey);font-size:.98rem;line-height:1.5}
.who{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.95rem;font-weight:600}
.who svg{width:22px;height:22px;color:var(--cobalt);transition:transform .25s var(--ease)}
.tcard:hover .who svg,.ccard:hover .who svg{transform:translateX(4px)}
.city-small{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:46px}
.ccard{display:block;padding:10px 10px 14px;border-radius:18px;background:#fff;color:var(--ink);text-decoration:none;box-shadow:0 8px 24px rgba(var(--shadow),.05);
  transition:box-shadow .25s var(--ease)}
.ccard:hover{box-shadow:0 18px 40px rgba(var(--shadow),.13);color:var(--ink)}
.ccard .img{aspect-ratio:4/3;border-radius:11px}
.ccard .st{top:8px;left:8px;padding:3px 10px;font-size:.75rem}
.ccard h3{margin:14px 6px 10px;font-size:1.12rem;line-height:1.15}
.ccard .who{margin:0 6px;padding-top:10px;border-top:1px solid var(--line);font-size:.86rem;color:var(--grey)}
.ccard .who svg{width:18px;height:18px}
.popular{display:grid;grid-template-columns:280px minmax(0,1fr);gap:44px;margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
.pop-h{margin:0 0 10px;font-size:1.5rem;line-height:1.1}
.pop-p{margin:0 0 22px;color:var(--grey);font-size:1rem}
.pop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 44px}
.pop a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.pop h3{font-size:clamp(1.3rem,1rem + .8vw,1.75rem);line-height:1.1;transition:color .15s}
.pop svg{width:22px;height:22px;flex:none;color:var(--cobalt);transition:transform .25s var(--ease)}
.pop a:hover h3{color:var(--cobalt)}
.pop a:hover svg{transform:translateX(4px)}
.towns{margin:22px 0 0;color:var(--grey);font-size:1rem}
.towns a{margin-right:14px;font-weight:600;white-space:nowrap}
.towns.regions{margin-top:10px;line-height:1.9}

.feat3-top{padding-top:100px;padding-bottom:168px}
.feat3-head{display:grid;grid-template-columns:1.15fr 1fr auto;gap:44px;align-items:center}
.feat3-head h2{color:#fff}
.feat3-head .lead{margin:0}
.hbox{display:inline-flex;align-items:center;gap:14px;padding:16px 18px 16px 22px;border-radius:14px;background:rgba(255,255,255,.1);color:#fff;font-weight:600;
  text-decoration:none;white-space:nowrap;transition:background .2s}
.hbox:hover{background:rgba(255,255,255,.2);color:#fff}
.hbox .circ{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--citrus);color:var(--ink)}
.hbox .circ svg{width:18px;height:18px}
.feat3-cards{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:-124px}
.fc3{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--rc);background:#fff;color:var(--ink);text-decoration:none;
  box-shadow:0 16px 44px rgba(var(--shadow),.1);transition:transform .25s var(--ease)}
.fc3:hover{transform:translateY(-4px);color:var(--ink)}
.fc3 .img{position:relative;height:300px;background:#D9E1F5}
.fc3 .img img{width:100%;height:100%;object-fit:cover}
.fc3 .ar{position:absolute;top:16px;right:16px;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  background:var(--cobalt);color:#fff;transition:transform .25s var(--ease)}
.fc3 .ar svg{width:19px;height:19px}
.fc3:hover .ar{transform:rotate(-45deg)}
.fc3 .body{flex:1;padding:24px 26px 26px}
.fc3 h3{margin:0 0 10px;font-size:1.5rem}
.fc3 p{margin:0;color:var(--grey);font-size:1rem;line-height:1.5}
.fc3.dark{background:var(--deep);color:#fff}
.fc3.dark p{color:var(--on-deep)}
.fc3.dark .ar{background:var(--citrus);color:var(--ink)}
.guide-links{margin-top:34px}
.feat3 .wrap.below{padding-bottom:112px}

.proc{background:var(--suds)}
.proc>.wrap{padding-top:112px;padding-bottom:112px}
.proc h2{margin:0 0 16px}
.proc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:center;margin:56px 0 52px}
.pcard{padding:46px 32px 42px;border-radius:var(--rc);background:#fff;text-align:center}
.pcard.mid{transform:scale(1.05);box-shadow:0 24px 54px rgba(var(--shadow),.11)}
.pcard div.ic{display:flex;align-items:center;justify-content:center;width:78px;height:78px;margin:0 auto 20px;border-radius:50%;background:var(--cobalt);color:#fff}
.pcard div.ic svg{width:36px;height:36px}
.pcard .stp{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 8px;color:var(--grey);font-size:.92rem;font-weight:600}
.pcard .steps{display:flex;gap:4px}
.pcard .steps svg{width:14px;height:14px;color:var(--cobalt)}
.pcard h3{margin:0 0 12px;font-size:1.55rem}
.pcard p{margin:0;color:var(--grey)}
.pcard p.stp{margin-bottom:8px}

.offers>.wrap{padding-top:104px;padding-bottom:104px}
.offers-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin:0 0 46px}
.offers h2{margin:0 0 14px;color:#fff}
.offers .lead{margin:0}
.offers-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ocard{display:flex;flex-direction:column;padding:24px 22px 22px;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff;text-align:center;
  text-decoration:none;transition:background .2s}
.ocard:hover{background:rgba(255,255,255,.07);color:#fff}
.ocard.fill{background:var(--cobalt);box-shadow:none}
.ocard.fill:hover{background:#2759CC}
.ocard .tag{margin:0 0 14px;color:var(--on-deep);font-size:.9rem}
.ocard .code{margin:0 0 18px;padding:16px 10px;border:2px dashed rgba(255,255,255,.42);border-radius:var(--r);font:800 2.6rem/1 var(--head);font-stretch:87.5%;letter-spacing:.01em}
.ocard.fill .code{border:0;background:rgba(255,255,255,.16)}
.ocard h3{margin:0 0 10px;font-size:1.28rem;line-height:1.15}
.ocard .d{margin:0 0 14px;color:var(--on-deep);font-size:.94rem;line-height:1.5}
.ocard .holder{margin:0 0 20px;padding-top:12px;border-top:1px solid rgba(255,255,255,.16);color:var(--on-deep);font-size:.86rem;line-height:1.4}
.ocard .holder b{display:block;color:#fff;font-weight:600}
.minigo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;min-height:46px;padding:5px 5px 5px 18px;border-radius:999px;
  background:var(--cobalt);color:#fff;font-weight:600;font-size:.94rem}
.minigo .circ{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--cobalt);
  transition:transform .25s var(--ease)}
.minigo .circ svg{width:16px;height:16px}
.ocard.fill .minigo{background:#fff;color:var(--ink)}
.ocard.fill .minigo .circ{background:var(--cobalt);color:#fff}
.ocard:hover .minigo .circ{transform:translateX(-3px)}
.rent-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:40px;padding-top:30px;border-top:1px solid rgba(255,255,255,.16)}
.rent-links .lbl{margin-right:6px;color:var(--on-deep);font-size:.95rem}
.rent-links a::before{content:"";width:15px;height:15px;background:url("/assets/img/lens-mark-citrus.svg") no-repeat center/contain}
.rent-links a:hover::before{background-image:url("/assets/img/lens-mark.svg")}
.home .faq{padding-top:112px;padding-bottom:112px}

/* ================================================================ narrower screens */
@media (max-width:1240px){
  .dd-btn{padding:0 10px}
  .logo img{width:186px}
}
@media (min-width:1100px) and (max-width:1240px){.head-go .circ{display:none}.bar{gap:12px}}
@media (max-width:1099px){
  .mainnav{display:none}
  .menu-btn{display:inline-flex;margin-left:0}
  .head-go{margin-left:auto}
  .home .hero-grid{grid-template-columns:minmax(0,1fr) 470px;gap:40px}
  .phero-grid{grid-template-columns:minmax(0,1fr) 420px;gap:40px}
  .checks2{grid-template-columns:1fr}
  .exp-grid,.feat3-cards{grid-template-columns:repeat(2,1fr)}
  .offers-row{grid-template-columns:repeat(2,1fr)}
  .city-small{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(4,1fr)}
  .foot-about{grid-column:1/-1}
  .feat3-head{grid-template-columns:1fr 1fr}
  .feat3-head .hbox{grid-column:1/-1;justify-self:start}
  .doc{grid-template-columns:1fr;gap:28px}
  .doc-side>.side-cta,.doc-side>.toc:only-child{position:static}
  .next-steps li{padding:0 20px}
}
@media (max-width:900px){
  :root{--side:24px}
  .home .hero{min-height:0;padding-top:128px}
  .home .hero-grid,.phero-grid,.phero:not(.with-ask) .phero-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .home .hero-left{padding-top:0}
  .home .hero-photo::after,.phero-photo::after,.phero:not(.with-ask) .phero-photo::after{
    background:linear-gradient(180deg,rgba(var(--tint),.9) 0%,rgba(var(--tint),.84) 60%,rgba(var(--tint),.7) 100%)}
  .home .hero-photo.lite::after,.phero-photo.lite::after,.phero:not(.with-ask) .phero-photo.lite::after{background:rgba(var(--tint),.76)}
  .phero{padding:128px 0 48px}
  /* the card laps the photo: the soap behind its lower part (and below it) ends the photo, however long the text above runs */
  .home .hero,.phero.with-ask{padding-bottom:40px}
  .home .hero-card::before,.phero.with-ask .ask::before{content:"";position:absolute;z-index:-1;top:120px;bottom:-200px;left:-60vw;right:-60vw;background:var(--soap)}
  .home .hero-card,.phero .ask{max-width:640px}
  .home .hero-grid{grid-template-areas:"left" "card" "more";grid-template-rows:none}
  .phero.has-ticks .phero-grid{grid-template-areas:"text" "card" "ticks";grid-template-rows:none;row-gap:30px}
  /* after the card the ticks sit on the soap that ends the photo: ink type, cobalt lenses */
  .ph-ticks,.home .hero-more{position:relative}
  .ph-ticks::before,.home .hero-more::before{content:"";position:absolute;z-index:-1;top:-44px;bottom:-90px;left:-60vw;right:-60vw;background:var(--soap)}
  .hero-ticks{margin:0}
  .hero-ticks li,.home .hero .checks2 li,.hero-rating{color:var(--ink)}
  .hero-ticks svg,.home .hero .checks2 svg,.hero-rating .rv-stars{color:var(--cobalt)}
  .home .hero .checks2{margin:0}
  .home .hero-more .hero-rating{margin:20px 0 0}
  .home .hero-more .go{display:none}
  .tc-row{grid-template-columns:1fr;gap:14px}
  .why2 .wrap,.about2 .wrap,.closing-grid,.check-grid{grid-template-columns:1fr;gap:44px}
  .why2-imgs{height:auto;aspect-ratio:1/0.8;max-width:620px}
  .why2-imgs .a{height:84%}
  .about2-img{height:420px}
  .testi-row,.proc-row{grid-template-columns:1fr;gap:20px}
  .tcard.mid,.pcard.mid{transform:none}
  .popular{grid-template-columns:1fr;gap:10px}
  .offers-head,.next-head{flex-direction:column;align-items:flex-start;gap:24px}
  .faq-grid{grid-template-columns:1fr}
  .band3 ul{grid-template-columns:1fr;gap:34px;padding-top:50px;padding-bottom:50px}
  .band3 li+li{border-left:0;padding-top:34px;border-top:1px solid rgba(255,255,255,.16)}
  .next-steps{grid-template-columns:1fr;gap:22px}
  .next-steps li,.next-steps li:first-child{padding:0}
  .next-steps li+li{border-left:0;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
  .flow-grid,.ty-grid{grid-template-columns:1fr;gap:24px}
  .region-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:719px){
  /* generated hero photos on phones: the photo fills a box at the top of the hero (460 px; 270 px on the home page, where the
     card starts higher), not the whole tall hero, so more of the room shows above the card; its foot fades into the
     cobalt-deep base, which carries any longer text */
  .phero-photo.lite{bottom:auto;height:460px}
  .home .hero-photo.lite{bottom:auto;height:270px}
  .home .hero-photo.lite::after,.phero-photo.lite::after,.phero:not(.with-ask) .phero-photo.lite::after{
    background:linear-gradient(180deg,rgba(var(--tint),.76) 0%,rgba(var(--tint),.76) 68%,var(--deep) 100%)}
  :root{--side:16px}
  body{font-size:16.5px}
  .site-head{padding:10px 10px 0}
  .bar{min-height:62px;gap:10px;padding:8px 8px 8px 16px;border-radius:16px}
  .logo img{width:170px}
  .head-go{display:none}
  .menu-btn{margin-left:auto;padding:0 13px}
  .lead{font-size:1.04rem}
  .home .hero{padding:90px 0 34px}
  .home .hero-card::before,.phero.with-ask .ask::before{top:84px}
  .home .hero .badge{display:none}
  .phero.has-ticks .phero-grid{row-gap:20px}
  .hero-ticks{gap:10px}
  .hero-ticks li,.home .hero .checks2 li{font-size:.98rem}
  .home .hero .checks2{gap:10px}
  .tcards{padding:32px 0}
  .tc-row li{grid-template-columns:44px 1fr;gap:14px;padding:18px}
  .tc-row span.ic{width:44px;height:44px}
  .tc-row span.ic svg{width:22px;height:22px}
  .tc-t{margin-top:2px;font-size:1.16rem}
  .home .hero h1{max-width:none;margin:0 0 10px;font-size:clamp(1.4rem,8.1vw,2.4rem);line-height:1.05}
  .home .hero .h1-sub{margin:0;font-size:1.02rem;line-height:1.45}
  .home .hero-grid{gap:20px}
  .phero{padding:88px 0 40px}
  .phero.with-ask{padding-bottom:34px}
  .phero-grid{gap:20px}
  .ph-text{padding-top:0}
  .crumbs ol{display:block;margin-bottom:12px;overflow:hidden;font-size:.86rem;white-space:nowrap;text-overflow:ellipsis}
  .crumbs li{display:inline}
  .crumbs li+li::before{margin:0 7px}
  .card .noimg{padding:18px 18px 0}
  .card .noimg span.ic{width:48px;height:48px}
  .card .noimg span.ic svg{width:23px;height:23px}
  .card .body{padding:14px 20px 18px}
  .card.has-img .body{padding-top:36px}
  .card-t{font-size:1.28rem}
  .phero .badge{margin-bottom:12px;padding:6px 14px 6px 10px;font-size:.88rem}
  .phero h1{margin:0 0 10px;font-size:clamp(1.65rem,7.4vw,2.3rem);line-height:1.04}
  .phero .h1-sub{margin:0 0 8px;font-size:1.04rem}
  .phero .lede{font-size:1.02rem;line-height:1.45}
  .checked{font-size:.9rem;margin-bottom:8px}
  .hero-card,.ask{padding:18px 14px 16px;border-radius:20px;box-shadow:0 20px 44px rgba(8,22,60,.24)}
  .ftop{margin-bottom:12px}
  .fq{font-size:1.38rem}
  .fstep{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ask-h{margin-bottom:12px;font-size:1.3rem}
  .tiles{gap:8px}
  .tile label{grid-template-columns:28px 1fr;gap:9px;min-height:68px;padding:10px}
  .tile .tic{width:28px;height:28px}
  .tile b{font-size:.95rem}
  .tile small{font-size:.8rem}
  .divx{margin:16px 0 12px}
  .callrow{font-size:.88rem}
  .flow-page .tiles{grid-template-columns:1fr 1fr}
  .why2,.checkcard,.cards-sec,.faq,.home .faq,.proof-sec{padding-top:64px;padding-bottom:64px}
  .explore>.wrap,.about2 .wrap,.testi>.wrap,.proc>.wrap,.offers>.wrap,.closing-grid{padding-top:64px;padding-bottom:64px}
  .next-band{padding:56px 0}
  .chips-sec{padding:44px 0}
  .feat3-top{padding-top:64px;padding-bottom:120px}
  .feat3-head{grid-template-columns:1fr;gap:18px}
  .feat3 .wrap.below{padding-bottom:64px}
  .exp-grid,.feat3-cards,.offers-row,.foot-grid,.cards,.region-grid,.diy-grid,.loc-grid{grid-template-columns:1fr}
  .acc summary{padding:14px;gap:12px}
  .acc span.ic,.checks span.ic{width:42px;height:42px}
  .acc span.ic svg,.checks span.ic svg{width:21px;height:21px}
  .acc h3{font-size:1.1rem}
  .acc p{padding:0 18px 18px}
  .checks li{grid-template-columns:42px 1fr;gap:12px;padding:14px}
  .about2-img{height:300px}
  .city-small{grid-template-columns:1fr 1fr;gap:14px}
  .pop{grid-template-columns:1fr}
  .testi-head,.faq-head{margin-bottom:34px}
  .proc-row{margin:34px 0}
  .pcard{padding:30px 22px 28px}
  .pcard div.ic{width:62px;height:62px;margin-bottom:14px}
  .pcard div.ic svg{width:30px;height:30px}
  .cc-card{padding:26px 22px 14px}
  .closing-ask{order:-1}
  .cc-note{padding:22px}
  .foot-top{flex-direction:column;align-items:flex-start}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px 18px}
  .foot-about{grid-column:1/-1}
  .foot-legal{flex-direction:column;align-items:flex-start}
  .go .pill{min-height:52px}
  .go .circ{width:52px;height:52px}
  .band3 ul{gap:24px;padding-top:40px;padding-bottom:40px}
  .band3 li{padding:0 6px}
  .band3 li+li{padding-top:24px}
  .band3 svg{margin-bottom:10px}
  .card .img{height:180px}
  .qa summary{padding:16px 16px 16px 18px}
  .qa p{padding:0 18px 18px}
  .top-band{padding:96px 0 104px}
  .flow-grid{margin-top:-76px;padding-bottom:56px}
  .ty-grid{margin-top:-60px;padding-bottom:56px}
  .ty-copy,.ty-card,.aside-card{padding:22px 20px 8px}
  .quiz-pop{left:16px;right:16px;bottom:16px;width:auto}
  .b-steps li{padding-left:52px}
  /* phones: the six cleans in two columns; the long card rows become swipe rails (the template's carousel) */
  .exp-grid{grid-template-columns:1fr 1fr;gap:12px;margin-top:34px}
  .ecard .img{height:118px}
  .ecard span.ic{left:12px;bottom:-21px;width:44px;height:44px;border-width:3px}
  .ecard span.ic svg{width:21px;height:21px}
  .ecard .body{padding:30px 14px 14px}
  .ecard h3{margin:0 0 8px;font-size:1.14rem}
  .ecard p{display:none}
  .ecard .word{padding-top:10px;font-size:.84rem;line-height:1.3}
  .ecard .word svg{display:none}
  .rail{display:grid;grid-auto-flow:column;grid-auto-columns:84%;grid-template-columns:none;gap:14px;align-items:stretch;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding:0 var(--side);margin-left:calc(-1 * var(--side));margin-right:calc(-1 * var(--side));padding:8px var(--side) 22px;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail>*{scroll-snap-align:start}
  .feat3-cards.rail{margin-top:-96px}
  .offers-row.rail{grid-auto-columns:80%}
}
@media (min-width:1024px){.sticky{display:none!important}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
@media print{.site-head,.sticky,.quiz-pop,.ask,.closing,.site-foot,.phero-photo,.hero-photo{display:none}.phero,.home .hero,.on-deep{background:none;color:var(--ink)}.phero h1,.phero .lede,.phero .h1-sub,.home .hero .h1-sub{color:var(--ink)}}

/* 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}
.foot-disclaimer a{color:inherit}   /* the terms link was cobalt on the deep footer, 12 Nov 2026 */