/* Mona Vale Locksmiths. The logo's sunrise over a breaking wave: navy sea, sun-gold for anything you press, sand for calm ground. */
:root{
  --navy:#0E2747;
  --navy-2:#163C68;
  --ocean:#1F6FBF;
  --surf:#5FA8E8;
  --sun:#F2B632;
  --sun-hi:#FFD36A;
  --sand:#F4F2EC;
  --paper:#FFFFFF;
  --field:#FBFAF7;
  --ink:#16202E;
  --muted:#4E5867;
  --line:#E0DCD2;
  --pick:#EAF2FB;
  --urgent:#B4400F;
  --urgent-bg:#FDF0E8;
  --ok:#9EF0C2;
  --on-navy:#F4F2EC;
  --on-navy-muted:#BFC8D6;
  --display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1180px;
  --gutter:20px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--ocean)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
h1,h2,h3{font-family:var(--display);line-height:1.06;letter-spacing:-.015em;text-wrap:balance;margin:0}
h1{font-weight:800;font-size:clamp(2.5rem,5.6vw,4.4rem)}
h2{font-weight:800;font-size:clamp(1.9rem,3.6vw,2.8rem)}
h3{font-weight:700;font-size:1.25rem}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.stack{display:flex;flex-direction:column;gap:16px}
.lede{font-size:1.15rem;color:var(--muted);max-width:36rem}
.eyebrow{font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ocean)}
.skip{position:absolute;left:-999px;top:8px;background:var(--sun);color:var(--navy);padding:10px 14px;z-index:100}
.skip:focus{left:8px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:12px;font-family:var(--display);font-weight:700;font-size:1.05rem;text-decoration:none;border:0;cursor:pointer;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:20px;height:20px;flex:none}
.btn-sun{background:var(--sun);color:var(--navy);box-shadow:0 6px 0 #C98F12}
.btn-sun:hover{background:var(--sun-hi);box-shadow:0 8px 0 #C98F12}
.btn-sun:active{transform:translateY(3px);box-shadow:0 3px 0 #C98F12}
.btn-navy{background:var(--navy);color:var(--on-navy)}
.btn-ghost{border:1.5px solid #5A7398;color:var(--on-navy);background:transparent}
.btn-ghost:hover{border-color:var(--on-navy)}
.btn-line{border:1.5px solid var(--navy);color:var(--navy);background:transparent}
.btn-lg{min-height:60px;font-size:1.2rem;padding:0 28px}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover{transform:none;transition:none}}

/* Header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy)}
.brand img{width:56px;height:56px}
.brand span{font-family:var(--display);font-weight:800;font-size:1.05rem;line-height:1.1;letter-spacing:.02em;text-transform:uppercase}
.brand small{display:block;font-weight:600;font-size:.72rem;letter-spacing:.22em;color:var(--ocean)}
.nav{display:flex;align-items:center;gap:20px}
.nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:.98rem}
.nav a:hover{color:var(--ocean)}
.nav .btn{min-height:46px;padding:0 16px;font-size:1rem;box-shadow:none}
@media (max-width:960px){.nav a.link{display:none}}
@media (max-width:560px){.nav .btn-line{display:none}}
@media (max-width:420px){.brand span{font-size:.92rem}.brand img{width:46px;height:46px}.nav .btn span{display:none}.nav .btn{padding:0 14px}}

/* Hero */
.hero{background:var(--navy);color:var(--on-navy);overflow:hidden;position:relative}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-block:56px 150px;position:relative;z-index:2}
.status{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:8px 14px;border-radius:999px;background:rgba(61,220,132,.12);border:1px solid rgba(61,220,132,.35);color:var(--ok);font-weight:600;font-size:.9rem}
.live-dot{width:9px;height:9px;border-radius:50%;background:#3DDC84;animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,220,132,.55)}70%{box-shadow:0 0 0 12px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.hero h1 .hl{display:block;color:var(--sun)}
.hero .lede{color:var(--on-navy-muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;padding-top:4px}
.mini-ticks{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:6px 0 0;list-style:none;color:var(--on-navy-muted);font-size:.95rem}
.mini-ticks li{display:flex;align-items:center;gap:8px}
.mini-ticks svg{width:16px;height:16px;color:var(--sun);flex:none}
.hero-art{position:relative;min-height:540px}
.sun{position:absolute;top:-30px;right:-60px;width:380px;height:380px;pointer-events:none}
.sun .disc{position:absolute;inset:95px;border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--sun-hi),var(--sun) 70%)}
.sun .rays{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(242,182,50,.55) 0 2.5deg,transparent 2.5deg 12deg);-webkit-mask:radial-gradient(circle,transparent 0 104px,#000 106px 186px,transparent 188px);mask:radial-gradient(circle,transparent 0 104px,#000 106px 186px,transparent 188px);animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.shot{position:absolute;margin:0;border:6px solid var(--paper);border-radius:16px;overflow:hidden;box-shadow:0 24px 50px rgba(3,12,28,.45);background:var(--paper)}
.shot img{width:100%;height:100%;object-fit:cover}
.shot-a{left:4%;top:30px;width:58%;aspect-ratio:3/4;transform:rotate(-4deg)}
.shot-b{right:2%;top:170px;width:46%;aspect-ratio:3/4;transform:rotate(5deg)}
.float{position:absolute;display:flex;align-items:center;gap:12px;background:var(--paper);color:var(--navy);border-radius:12px;padding:12px 16px;box-shadow:0 14px 34px rgba(3,12,28,.35);font-size:.9rem;line-height:1.3;z-index:3}
.float b{display:block;font-family:var(--display);font-size:1rem}
.float .ico{width:38px;height:38px;border-radius:10px;background:var(--navy);color:var(--sun);display:flex;align-items:center;justify-content:center;flex:none}
.float .ico svg{width:20px;height:20px}
.float-a{left:-10px;bottom:70px}
.float-b{right:6%;top:6px}
.waves{position:absolute;left:0;right:0;bottom:-1px;height:120px;z-index:1;pointer-events:none;overflow:hidden}
.waves svg{position:absolute;bottom:0;left:0;width:200%;height:100%}
.waves .w1{fill:var(--ocean);opacity:.55;animation:drift 22s linear infinite}
.waves .w2{fill:var(--surf);opacity:.4;animation:drift 15s linear infinite reverse;bottom:-8px}
.waves .w3{fill:var(--sand);width:100%}
@keyframes drift{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.live-dot,.sun .rays,.waves .w1,.waves .w2{animation:none}html{scroll-behavior:auto}}
@media (max-width:880px){
  .hero .wrap{grid-template-columns:1fr;padding-block:40px 130px}
  .hero-art{min-height:420px;max-width:520px;width:100%}
  .sun{width:300px;height:300px;right:-40px;top:-10px}
  .sun .disc{inset:75px}
  .sun .rays{-webkit-mask:radial-gradient(circle,transparent 0 82px,#000 84px 146px,transparent 148px);mask:radial-gradient(circle,transparent 0 82px,#000 84px 146px,transparent 148px)}
  .shot-b{top:120px}
}
@media (max-width:480px){.hero-art{min-height:360px}.float{font-size:.82rem;padding:10px 12px}.float .ico{width:32px;height:32px}.float-a{left:0;bottom:30px}.shot-a{width:62%}}

/* Page hero (service pages) */
.page-hero{background:var(--navy);color:var(--on-navy);position:relative;overflow:hidden}
.page-hero .wrap{padding-block:52px 130px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;position:relative;z-index:2}
.page-hero .lede{color:var(--on-navy-muted)}
.page-hero .shot{position:relative;width:100%;max-width:360px;aspect-ratio:4/5;justify-self:end;transform:rotate(3deg)}
.crumbs{font-size:.9rem;color:var(--on-navy-muted)}
.crumbs a{color:var(--on-navy-muted)}
@media (max-width:820px){.page-hero .wrap{grid-template-columns:1fr}.page-hero .shot{justify-self:start;aspect-ratio:4/3;transform:rotate(-1.5deg);max-width:100%}}

/* Trust strip */
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-block:8px 36px}
.trust b{display:block;font-family:var(--display);font-weight:800;font-size:1.75rem;color:var(--navy)}
.trust span{color:var(--muted);font-size:.95rem}
@media (max-width:760px){.trust .wrap{grid-template-columns:repeat(2,1fr)}}

/* Sections */
.section{padding-block:88px}
.section-head{display:flex;flex-direction:column;gap:12px;max-width:42rem;margin-bottom:36px}
.navy{background:var(--navy);color:var(--on-navy)}
.navy .lede{color:var(--on-navy-muted)}
.navy .eyebrow{color:var(--sun)}
.white{background:var(--paper);border-block:1px solid var(--line)}
@media (max-width:600px){.section{padding-block:64px}}

/* Service cards */
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:transform .2s ease,box-shadow .2s ease}
.service:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(14,39,71,.14)}
.service .pic{position:relative}
.service .pic img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease}
.service:hover .pic img{transform:scale(1.04)}
.service .ico{position:absolute;left:18px;bottom:-22px;width:46px;height:46px;border-radius:12px;background:var(--navy);color:var(--sun);display:flex;align-items:center;justify-content:center;border:3px solid var(--paper)}
.service .ico svg{width:22px;height:22px}
.service .body{padding:34px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.service p{color:var(--muted);font-size:.97rem}
.service .more{margin-top:auto;padding-top:6px;color:var(--ocean);font-weight:600;font-size:.95rem}
@media (prefers-reduced-motion:reduce){.service,.service .pic img{transition:none}.service:hover,.service:hover .pic img{transform:none}}
@media (max-width:980px){.services{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.services{grid-template-columns:1fr}}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:0;padding:0}
.steps li{list-style:none;border-top:2px solid var(--sun);padding-top:18px;display:flex;flex-direction:column;gap:8px}
.steps .n{font-family:var(--display);font-weight:800;color:var(--sun);font-size:.95rem}
.steps p{color:var(--on-navy-muted)}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery figure{margin:0;display:flex;flex-direction:column;gap:8px}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;background:var(--line)}
.gallery figcaption{font-size:.9rem;color:var(--muted)}
@media (max-width:900px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px}.gallery figure{flex:0 0 72%;scroll-snap-align:start}}

/* Areas */
.areas{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.chips li{padding:9px 16px;border-radius:999px;background:var(--sand);border:1px solid var(--line);font-weight:500;font-size:.95rem}
@media (max-width:820px){.areas{grid-template-columns:1fr}}

/* FAQ */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:12px}
.faq summary{list-style:none;cursor:pointer;padding:18px 20px;font-family:var(--display);font-weight:700;font-size:1.08rem;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;background:var(--sand);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–";background:var(--sun)}
.faq details p{padding:0 20px 20px;color:var(--muted)}
@media (max-width:820px){.faq{grid-template-columns:1fr;gap:24px}}

/* Urgent band */
.sos{background:var(--sun);color:var(--navy)}
.sos .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding-block:40px}
.sos h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.sos p{font-weight:500}
.sos .btn{background:var(--navy);color:var(--sun);box-shadow:none}

/* Service detail */
.detail{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:start}
.detail .prose{display:flex;flex-direction:column;gap:18px;max-width:42rem}
.detail .prose h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:12px}
.ticks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.ticks li{display:flex;gap:12px;align-items:flex-start}
.ticks li::before{content:"";flex:none;width:20px;height:20px;margin-top:4px;border-radius:50%;background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2747' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
.aside{position:sticky;top:96px;background:var(--navy);color:var(--on-navy);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px}
.aside p{color:var(--on-navy-muted)}
.aside .btn{width:100%}
.aside .num{font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--sun);text-decoration:none}
@media (max-width:900px){.detail{grid-template-columns:1fr}.aside{position:static}}
.other{display:flex;flex-wrap:wrap;gap:10px}
.other a{padding:10px 16px;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:500}
.other a:hover{border-color:var(--ocean);color:var(--ocean)}

/* Booking */
.book-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:48px;align-items:start}
.book-side{position:sticky;top:100px}
.book-side .promise{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.book-side .promise li{display:flex;gap:12px;align-items:flex-start;font-weight:500}
.book-side .promise svg{width:22px;height:22px;color:var(--ocean);flex:none;margin-top:2px}
.book-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 20px 50px rgba(14,39,71,.08)}
.book-card form{display:flex;flex-direction:column;gap:28px}
fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;min-width:0}
legend{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--navy);padding:0;margin-bottom:12px}
legend .n{width:32px;height:32px;border-radius:50%;background:var(--sun);color:var(--navy);display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;flex:none}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tile{position:relative;display:block}
.tile input{position:absolute;opacity:0;width:1px;height:1px}
.tile span{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--field);font-weight:600;font-size:.98rem;line-height:1.25;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.tile span svg{width:22px;height:22px;flex:none;color:var(--ocean)}
.tile:hover span{border-color:var(--surf)}
.tile input:checked + span{border-color:var(--ocean);background:var(--pick);box-shadow:inset 0 0 0 1px var(--ocean)}
.tile input:focus-visible + span{outline:3px solid var(--sun);outline-offset:2px}
.tile.urgent{grid-column:1/-1}
.tile.urgent span{border-color:#EBC3AE;background:var(--urgent-bg);color:var(--urgent)}
.tile.urgent span svg{color:var(--urgent)}
.tile.urgent input:checked + span{border-color:var(--urgent);box-shadow:inset 0 0 0 1px var(--urgent);background:var(--urgent-bg)}
.urgent-panel{display:none;flex-direction:column;gap:12px;padding:18px;border-radius:12px;background:var(--navy);color:var(--on-navy)}
.urgent-panel p{color:var(--on-navy-muted)}
form:has(.tile.urgent input:checked) .urgent-panel{display:flex}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills .tile span{min-height:46px;padding:8px 16px;border-radius:999px;font-weight:500}
.sub{font-size:.92rem;font-weight:600;color:var(--muted)}
.date-field{display:none}
form:has(#when-date:checked) .date-field{display:flex}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label.field{display:flex;flex-direction:column;gap:6px;font-weight:500;font-size:.95rem}
input[type=text],input[type=tel],input[type=email],input[type=date],select,textarea{font:inherit;font-size:1rem;color:var(--ink);min-height:50px;padding:0 14px;border:1px solid #C9C4B8;border-radius:10px;background:var(--field);width:100%}
textarea{padding:12px 14px;resize:vertical;min-height:110px}
.upload{display:flex;align-items:center;gap:14px;padding:14px;border:1.5px dashed #C9C4B8;border-radius:12px;background:var(--field);cursor:pointer;font-weight:500}
.upload svg{width:26px;height:26px;color:var(--ocean);flex:none}
.upload small{display:block;color:var(--muted);font-weight:400}
.upload input{font-size:.9rem;max-width:100%}
.upload > span{min-width:0}
.hp{position:absolute;left:-9999px}
.form-note{font-size:.88rem;color:var(--muted)}
.form-msg{padding:14px 16px;border-radius:10px;background:#EAF3EC;color:#1D5A2E;font-weight:500}
.submit{width:100%}
@media (max-width:900px){.book-grid{grid-template-columns:1fr;gap:28px}.book-side{position:static}}
@media (max-width:520px){.book-card{padding:20px 16px}.row{grid-template-columns:1fr}}

/* Footer */
.site-footer{background:var(--navy);color:var(--on-navy-muted);padding-block:56px 130px;font-size:.95rem}
.site-footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
.site-footer h3{color:var(--on-navy);font-size:1rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.site-footer a{color:var(--on-navy-muted);text-decoration:none}
.site-footer a:hover{color:var(--sun)}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.site-footer .phone{color:var(--sun);font-family:var(--display);font-weight:800;font-size:1.4rem}
.legal{grid-column:1/-1;border-top:1px solid #29466E;padding-top:20px;font-size:.85rem}
@media (max-width:760px){.site-footer .wrap{grid-template-columns:1fr}}
@media (min-width:861px){.site-footer{padding-block:56px}}

/* Mobile action bar */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:var(--navy);display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:8px;box-shadow:0 -6px 20px rgba(0,0,0,.18)}
.callbar .btn{min-height:52px;padding:0 10px;font-size:1rem;box-shadow:none}
.callbar .btn svg{width:18px;height:18px}
@media (min-width:861px){.callbar{display:none}}
.book-grid > *,.hero .wrap > *,.page-hero .wrap > *,.detail > *,.faq > *,.areas > *{min-width:0}
.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:420px){.tiles{grid-template-columns:minmax(0,1fr)}}
.upload input{width:100%}
label.date-field{display:none}
form:has(#when-date:checked) label.date-field{display:flex}
.upload{flex-wrap:wrap}
.upload > span{flex:1}
.upload input{flex-basis:100%}

/* ===== DA Locksmiths theme: charcoal steel and safety orange, condensed signwriter type ===== */
:root{
  --navy:#1B1F24; --navy-2:#2A3038; --ocean:#B4480C; --surf:#F59A62;
  --sun:#F26B21; --sun-hi:#FF8A47; --sand:#F2F2EF; --paper:#FFFFFF; --field:#FAFAF8;
  --ink:#1B1F24; --muted:#515863; --line:#DEDEDA; --pick:#FDF0E7;
  --urgent:#B3261E; --urgent-bg:#FCECEA; --on-navy:#F2F2EF; --on-navy-muted:#B9BFC8;
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
}
h1,h2,h3{letter-spacing:0;text-transform:uppercase;line-height:1}
h1{font-size:clamp(3rem,7vw,5.6rem)}
h2{font-size:clamp(2.2rem,4.2vw,3.3rem)}
h3{font-size:1.45rem}
.btn{font-size:1.2rem;letter-spacing:.02em;text-transform:uppercase;border-radius:6px}
.btn-lg{font-size:1.35rem}
.btn-sun{box-shadow:0 6px 0 #B0460D}
.btn-sun:hover{box-shadow:0 8px 0 #B0460D}
.btn-sun:active{box-shadow:0 3px 0 #B0460D}
.btn-ghost{border-color:#5B636E}
.legal{border-top-color:#353B43}
.tile.urgent span{border-color:#EFC0BB}
.brand .mark{width:52px;height:52px;border-radius:6px;background:var(--sun);color:var(--navy);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:1.7rem;letter-spacing:0;flex:none}
.brand span{font-size:1.45rem;letter-spacing:.01em}
.brand small{font-family:var(--body);font-size:.68rem;letter-spacing:.12em;color:var(--muted)}
.nav .btn{font-size:1.1rem}
@media (max-width:420px){.brand span{font-size:1.2rem}.brand .mark{width:44px;height:44px;font-size:1.4rem}.brand small{display:none}}
.hero .wrap{padding-block:56px 110px}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:70px;background:var(--sand);clip-path:polygon(0 100%,100% 0,100% 100%);z-index:1}
.hero-art::before{content:"";position:absolute;right:-30%;top:8%;width:120%;height:46%;background:var(--sun);transform:rotate(-12deg);border-radius:8px}
.shot{border-radius:8px}
.float{border-radius:8px}
.float-a{bottom:40px}
.page-hero .wrap{padding-block:52px 64px}
.trust .wrap{padding-block:28px 36px}
.svcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.svc{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:26px 24px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);transition:transform .2s ease,border-color .2s ease}
.svc:hover{transform:translateY(-3px);border-color:var(--sun)}
.svc .num{position:absolute;right:18px;top:10px;font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1;color:var(--line)}
.svc .ico{width:48px;height:48px;border-radius:6px;background:var(--sun);color:var(--navy);display:flex;align-items:center;justify-content:center}
.svc .ico svg{width:24px;height:24px}
.svc p{color:var(--muted);font-size:1rem}
.svc .more{margin-top:auto;padding-top:6px;color:var(--ocean);font-weight:600}
@media (max-width:900px){.svcs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.svcs{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.svc{transition:none}.svc:hover{transform:none}}
.split{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:start}
.split > *{min-width:0}
.navy .ticks{color:var(--on-navy)}
.brandbox{border:1px solid #3A414A;border-radius:8px;padding:28px}
.brands{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.brands li{padding:8px 16px;border-radius:6px;background:var(--navy-2);color:var(--on-navy);font-family:var(--display);font-weight:700;font-size:1.25rem;text-transform:uppercase;letter-spacing:.03em}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.regions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px}
.region{display:flex;flex-direction:column;gap:12px}
.region h3{color:var(--ocean)}
.chips li{border-radius:6px}
@media (max-width:700px){.regions{grid-template-columns:1fr}}
.gallery img,.book-card,.aside,.faq details,.tile span,.upload,.urgent-panel{border-radius:8px}
.pills .tile span{border-radius:6px}
legend{font-size:1.5rem;text-transform:uppercase}
legend .n{font-size:1.1rem}
.faq summary{font-size:1.35rem;text-transform:uppercase}
.site-footer h3{font-size:1.25rem}
.aside .num,.site-footer .phone{font-size:1.9rem}
.sos .btn{font-size:1.6rem}

/* ===== Matched to the DA shield logo: black steel, brushed silver, orange ===== */
:root{
  --navy:#161616; --navy-2:#2A2A2A; --sun:#EC6608; --sun-hi:#FF8126; --ocean:#B34A00; --surf:#F2955A;
  --ink:#161616; --muted:#55585C; --sand:#F1F1EF; --pick:#FDEFE5;
  --on-navy:#F1F1EF; --on-navy-muted:#B8BBBF; --silver:#C9CCD0;
}
.btn-sun{box-shadow:0 6px 0 #A84600}
.btn-sun:hover{box-shadow:0 8px 0 #A84600}
.btn-sun:active{box-shadow:0 3px 0 #A84600}
.btn-ghost{border-color:#5C5F63}
.legal{border-top-color:#333}
.brandbox{border-color:#3A3A3A}
.site-header{background:var(--navy);border-bottom:1px solid #2E2E2E}
.site-header .wrap{min-height:84px}
.brand{color:var(--silver)}
.brand img{width:62px;height:auto}
.brand i{font-style:normal;color:var(--sun)}
.brand span{font-size:1.6rem}
.brand small{color:var(--on-navy-muted);letter-spacing:.2em;font-size:.62rem}
.nav a{color:var(--on-navy)}
.nav a:hover{color:var(--sun-hi)}
.nav .btn-line{border-color:#5C5F63;color:var(--on-navy)}
.nav .btn-sun,.nav .btn-sun:hover{color:var(--navy)}
.hero h1{color:var(--silver)}
.foot-logo{width:230px;height:auto;margin-left:-8px}
@media (max-width:420px){.brand img{width:50px}.brand span{font-size:1.3rem}}

/* ===== Phone numbers always fit on one line on phones ===== */
.btn{white-space:nowrap}
.brand{min-width:0}
.nav{flex:none}
@media (max-width:560px){
  .site-header .wrap{gap:10px}
  .brand{gap:8px}
  .brand img{width:48px}
  .brand span{font-size:1.3rem;display:block}
  .brand small{display:none}
  .nav .btn span{display:inline}
  .nav .btn{padding:0 12px;font-size:1.05rem;gap:7px}
  .nav .btn svg{width:17px;height:17px}
  .hero-actions .btn{flex:1 1 100%;padding:0 16px;font-size:clamp(1.05rem,5.2vw,1.35rem)}
  .urgent-panel .btn,.sos .btn{width:100%;padding:0 14px;font-size:clamp(1rem,5vw,1.4rem)}
  .aside .num,.site-footer .phone{white-space:nowrap}
}
@media (max-width:400px){.brand img{width:42px}.brand span{font-size:1.1rem}.nav .btn{padding:0 10px;font-size:1rem}}
@media (max-width:340px){.brand span{display:none}}
.trust .wrap > *{min-width:0}
.callbar{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr)}
@media (max-width:400px){
  .trust b{font-size:1.4rem}
  .callbar{gap:6px;padding-inline:8px}
  .callbar .btn{font-size:.9rem;gap:6px;padding:0 6px}
  .callbar .btn svg{width:16px;height:16px}
}
.brand{overflow:hidden}
@media (min-width:1100px){.svcs{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:900px){.regions{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Booking form sits high on the page */
.trust + #book{padding-top:40px}
.section + #book{padding-top:0}
.hero + #book{padding-block:36px 56px}
#book + .trust .wrap{padding-block:0 8px}

/* Hero: three photos for the most common call-outs */
.hero-art.trio{min-height:0;padding-block:34px 44px}
.hero-art.trio::before{top:18%;height:56%}
.hero-trio{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.pick{position:relative;display:block;border:5px solid var(--paper);border-radius:8px;overflow:hidden;background:var(--paper);box-shadow:0 22px 44px rgba(0,0,0,.5);transition:transform .2s ease}
.pick img{width:100%;aspect-ratio:3/4;object-fit:cover}
.pick span{position:absolute;left:0;right:0;bottom:0;padding:34px 10px 10px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff;font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.05;text-transform:uppercase;letter-spacing:.02em}
.pick:nth-child(1){transform:translateY(26px) rotate(-2.5deg)}
.pick:nth-child(2){transform:translateY(-12px)}
.pick:nth-child(3){transform:translateY(34px) rotate(2.5deg)}
.pick:hover{transform:translateY(-6px) rotate(0)}
@media (max-width:880px){.hero-art.trio{max-width:none;padding-block:10px 30px}.hero-trio{gap:10px}.pick{border-width:3px}.pick span{font-size:.95rem;padding:26px 8px 8px}}
@media (prefers-reduced-motion:reduce){.pick{transition:none}}

/* ===== Hero entrance: one sequence on load, then a quiet shimmer ===== */
@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(24px)}}
  @keyframes drop{from{opacity:0;transform:translateY(70px) scale(.9)}}
  @keyframes bob{to{translate:0 -9px}}
  @keyframes sheen{0%{background-position:130% 0}35%,100%{background-position:-70% 0}}
  .hero .wrap > .stack > *{animation:rise .7s cubic-bezier(.2,.7,.2,1) backwards}
  .hero .wrap > .stack > *:nth-child(1){animation-delay:.05s}
  .hero .wrap > .stack > *:nth-child(2){animation-delay:.15s}
  .hero .wrap > .stack > *:nth-child(3){animation-delay:.3s}
  .hero .wrap > .stack > *:nth-child(4){animation-delay:.42s}
  .hero .wrap > .stack > *:nth-child(5){animation-delay:.54s}
  .pick{animation:drop .8s cubic-bezier(.2,.8,.2,1) backwards,bob 6s ease-in-out infinite alternate}
  .pick:nth-child(1){animation-delay:.45s,1.4s}
  .pick:nth-child(2){animation-delay:.6s,2.2s}
  .pick:nth-child(3){animation-delay:.75s,3s}
  .hero h1 .shine{background:linear-gradient(100deg,var(--sun) 0 42%,#FFF1D6 50%,var(--sun) 58% 100%);background-size:260% 100%;background-position:-70% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:sheen 6s 1.3s ease-in-out infinite}
}
/* DA signature: the slash sweeps in and the padlock snaps shut */
.hero h1 .hl{white-space:nowrap}
.lockclick{display:inline-block;width:.62em;height:.72em;margin-left:.14em;vertical-align:-.02em;color:var(--sun);overflow:visible}
@media (prefers-reduced-motion:no-preference){
  @keyframes slash{from{opacity:0;transform:translateX(70%) rotate(-12deg)}}
  @keyframes pop{from{opacity:0;transform:scale(.3)}}
  @keyframes latch{from{transform:translateY(-4.5px)}}
  .hero-art::before{animation:slash .9s .25s cubic-bezier(.2,.8,.2,1) backwards}
  .lockclick{animation:pop .45s .95s cubic-bezier(.3,1.5,.5,1) backwards}
  .lockclick .shackle{animation:latch .4s 1.6s cubic-bezier(.3,1.9,.5,1) backwards}
}

/* ===== Hero signature: job photos seen through a giant keyhole ===== */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(560px circle at var(--mx,74%) var(--my,42%),var(--spot),transparent 65%)}
.hero-art.kh{min-height:0;display:flex;flex-direction:column;align-items:center;gap:26px;padding-block:14px 30px}
.hero-art.kh::before{display:none}
.kh-frame{position:relative;width:min(380px,100%);aspect-ratio:4/5}
.kh-frame::before{content:"";position:absolute;inset:-22%;border-radius:50%;background:radial-gradient(closest-side,var(--halo),transparent 72%)}
.kh-rim,.kh-window{position:absolute;inset:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125'%3E%3Cpath d='M35 82.2A42 42 0 1 1 65 82.2L86 125H14Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125'%3E%3Cpath d='M35 82.2A42 42 0 1 1 65 82.2L86 125H14Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.kh-rim{background:linear-gradient(160deg,var(--sun-hi),var(--sun) 55%);transform:scale(1.055)}
.kh-window{background:var(--navy-2);overflow:hidden}
.kh-window img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.25);opacity:0}
.kh-window img:first-child{opacity:1}
.kh-tabs{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.kh-tabs a{padding:8px 14px;border:1.5px solid var(--tab-line);border-radius:999px;color:var(--on-navy);background:rgba(0,0,0,.25);font-family:var(--display);font-weight:700;font-size:.98rem;text-decoration:none;white-space:nowrap}
.kh-tabs a:hover{border-color:var(--sun);color:var(--sun-hi)}
@media (max-width:880px){.hero-art.kh{max-width:none;gap:18px;padding-block:6px 26px}.kh-frame{width:210px}.kh-tabs a{font-size:.85rem;padding:7px 11px}}
@media (prefers-reduced-motion:no-preference){
  @keyframes khturn{from{opacity:0;transform:rotate(-90deg) scale(.3)}}
  @keyframes khshow{0%{opacity:0;transform:scale(1.2)}5%{opacity:1}33%{opacity:1}38%{opacity:0;transform:scale(1.42)}100%{opacity:0;transform:scale(1.42)}}
  @keyframes khtab{0%,33%{background:var(--sun);border-color:var(--sun);color:var(--navy)}38%,100%{background:rgba(0,0,0,.25);border-color:var(--tab-line);color:var(--on-navy)}}
  @keyframes khhalo{from{opacity:.55;transform:scale(.94)}to{opacity:1;transform:scale(1.06)}}
  .kh-frame{animation:khturn 1.15s .25s cubic-bezier(.2,.9,.25,1.12) backwards}
  .kh-frame::before{animation:khhalo 3.2s ease-in-out infinite alternate}
  .kh-window img{animation:khshow 12s linear infinite}
  .kh-window img:nth-child(2){animation-delay:4s}
  .kh-window img:nth-child(3){animation-delay:8s}
  .kh-tabs a{animation:khtab 12s linear infinite}
  .kh-tabs a:nth-child(2){animation-delay:4s}
  .kh-tabs a:nth-child(3){animation-delay:8s}
  .kh-tabs{animation:rise .7s .9s cubic-bezier(.2,.7,.2,1) backwards}
}
/* DA: orange light, slash behind the keyhole, and a moving services band */
:root{--spot:rgba(236,102,8,.20);--halo:rgba(236,102,8,.55);--tab-line:#5C5F63}
.hero-art.kh::after{content:"";position:absolute;right:-40%;top:22%;width:150%;height:38%;background:var(--sun);transform:rotate(-12deg);border-radius:8px;opacity:.9;z-index:-1}
.hero-art.kh{z-index:0}
.kh-tabs a{border-radius:6px;text-transform:uppercase;font-size:1.1rem;letter-spacing:.02em}
.hero::after{display:none}
.hero .wrap{padding-block:56px 130px}
.ticker{position:absolute;left:-5%;width:110%;bottom:34px;z-index:3;background:var(--sun);color:var(--navy);transform:rotate(-2deg);overflow:hidden;padding:9px 0;font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.ticker .track{display:inline-flex}
.ticker span{padding-inline:22px;position:relative}
.ticker span::after{content:"";position:absolute;right:-4px;top:50%;width:8px;height:8px;margin-top:-4px;background:var(--navy);transform:rotate(45deg)}
@media (max-width:880px){.hero .wrap{padding-block:40px 110px}.ticker{font-size:1.05rem;bottom:28px}.kh-tabs a{font-size:.95rem}}
@media (prefers-reduced-motion:no-preference){
  @keyframes tick{to{transform:translateX(-50%)}}
  .ticker .track{animation:tick 30s linear infinite}
  .hero-art.kh::after{animation:slash .9s .2s cubic-bezier(.2,.8,.2,1) backwards}
}
.hero-art.kh::after{right:-48%;width:128%}
@media (max-width:880px){.kh-frame{width:190px}.kh-tabs{gap:6px}.kh-tabs a{font-size:.82rem;padding:6px 9px}}
@media (min-width:600px) and (max-width:880px){.kh-frame{width:260px}.kh-tabs a{font-size:1rem;padding:8px 13px}}

/* Keyhole photos: wider view, gentle drift, long cross-fade */
.kh-window img{transform:translate(var(--x,0),var(--y,0)) scale(1.15);will-change:transform,opacity;backface-visibility:hidden}
@media (prefers-reduced-motion:no-preference){
  @keyframes khshow2{0%{opacity:0;transform:translate(var(--x,0),var(--y,0)) scale(1.15)}10%{opacity:1}33.3%{opacity:1}43.3%{opacity:0;transform:translate(var(--x,0),var(--y,0)) scale(1.21)}100%{opacity:0;transform:translate(var(--x,0),var(--y,0)) scale(1.21)}}
  @keyframes khtab2{0%{background:rgba(0,0,0,.25);border-color:var(--tab-line);color:var(--on-navy)}6%,33.3%{background:var(--sun);border-color:var(--sun);color:var(--navy)}40%,100%{background:rgba(0,0,0,.25);border-color:var(--tab-line);color:var(--on-navy)}}
  @keyframes khturn2{from{opacity:0;transform:rotate(-55deg) scale(.55)}}
  .kh-frame{animation:khturn2 1.4s .2s cubic-bezier(.22,.8,.3,1) backwards}
  .kh-window img{animation:khshow2 15s linear infinite}
  .kh-window img:nth-child(2){animation-delay:5s}
  .kh-window img:nth-child(3){animation-delay:10s}
  .kh-tabs a{animation:khtab2 15s linear infinite}
  .kh-tabs a:nth-child(2){animation-delay:5s}
  .kh-tabs a:nth-child(3){animation-delay:10s}
}

/* ===== Service area map ===== */
.areas-map{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:start}
.areas-map > *,.areas > *{min-width:0}
.map-card{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--map-land)}
.areamap{display:block;width:100%;height:auto}
.areamap .land{fill:var(--map-land)}
.areamap .water{fill:var(--map-water)}
.areamap .lbl{font:600 13px var(--body);fill:var(--ink);paint-order:stroke;stroke:rgba(255,255,255,.92);stroke-width:3.5px;stroke-linejoin:round}
.areamap .dot{stroke:#fff;stroke-width:2}
.areamap .r1{fill:var(--dot1)}.areamap .r2{fill:var(--dot2)}.areamap .r3{fill:var(--dot3)}
.areamap .halo{opacity:.15}
.areamap .rlabel{font:800 21px var(--display);letter-spacing:.14em;text-transform:uppercase;opacity:.42}
.areamap .rlabel.wl{fill:var(--map-ink);font:italic 600 15px var(--body);letter-spacing:.2em;opacity:.9;text-anchor:middle}
.areamap .pulse{fill:none;stroke:var(--dot-base);stroke-width:2.5;transform-box:fill-box;transform-origin:center}
.areamap .dot.base{fill:var(--dot-base);stroke:var(--navy);stroke-width:2.5}
.areamap .place.base .lbl{font-weight:700;font-size:15px}
.reg{display:flex;flex-direction:column;gap:4px;padding-top:6px}
.reg h3{display:flex;align-items:center;gap:10px}
.reg p,.sublist{color:var(--muted)}
.key{width:14px;height:14px;border-radius:50%;flex:none;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.key.r1{background:var(--dot1)}.key.r2{background:var(--dot2)}.key.r3{background:var(--dot3)}
@media (max-width:820px){.areas-map{grid-template-columns:1fr;gap:26px}}
@media (max-width:700px){
  .areamap .place.minor .lbl{display:none}
  .areamap .lbl{font-size:25px;stroke-width:6px}
  .areamap .place.base .lbl{font-size:27px}
  .areamap .rlabel{font-size:27px}
  .areamap .rlabel.wl{font-size:22px}
}
@media (prefers-reduced-motion:no-preference){
  @keyframes mappulse{from{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}
  .areamap .pulse{animation:mappulse 2.2s ease-out infinite}
}
:root{--map-land:#ECEBE6;--map-water:#C7D3DB;--map-ink:#5C7486;--dot1:#EC6608;--dot2:#161616;--dot3:#5B6B7A;--dot-base:#EC6608}
.areamap .rlabel.r1{fill:#B34A00}
.reg h3{font-size:1.35rem}
.areas-map{grid-template-columns:.7fr 1.3fr}
.areamap .lbl{font-size:15px}
.areamap .place.base .lbl{font-size:17px}
@media (max-width:700px){.areamap .lbl{font-size:25px}.areamap .place.base .lbl{font-size:27px}}
@media (max-width:700px){.areamap .rlabel:not(.wl){display:none}}

/* ===== Service area map v2: one large map, zoomed maps on phones ===== */
.map-card{position:relative}
.areamap.big .lbl{font-size:18px;stroke-width:4.5px}
.areamap.zoom .lbl{font-size:16px;stroke-width:4px}
.areamap.big .place.base .lbl{font-size:20px}
.areamap.zoom .place.base .lbl{font-size:17px}
.areamap .wlabel{fill:var(--map-ink);font:italic 600 15px var(--body);letter-spacing:.2em;text-anchor:middle}
.map-key{position:absolute;right:3%;top:7%;width:25%;min-width:170px;display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:12px;background:rgba(255,255,255,.9);border:1px solid var(--line);font-size:1rem;font-weight:500;color:var(--ink)}
.map-key b{font-family:var(--display);font-size:1.2rem;line-height:1.1}
.map-key span{display:flex;align-items:center;gap:10px;line-height:1.25}
.key.base{background:var(--dot-base);box-shadow:0 0 0 2px var(--navy)}
.map-zooms{display:none}
.map-zooms figcaption{display:flex;align-items:center;gap:10px;padding:12px 14px;font-family:var(--display);font-weight:700;font-size:1.15rem;background:var(--paper);border-bottom:1px solid var(--line)}
.reg-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:30px}
.sublist{margin-top:22px;max-width:60rem}
@media (max-width:700px){
  .map-big{display:none}
  .map-zooms{display:grid;gap:16px}
  .reg-cols{grid-template-columns:1fr;gap:16px;margin-top:22px}
  .areamap.zoom .lbl{font-size:16px;stroke-width:4px}
  .areamap.zoom .place.base .lbl{font-size:17px}
}
.map-key{top:auto;bottom:6%}

/* ===== Service area v3: whole section fits one screen on computers and sideways tablets ===== */
#areas{scroll-margin-top:86px}
.area-head{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.area-head .lede{max-width:34rem}
.map-wide{display:none}
.areamap.wide .lbl{font-size:17px;stroke-width:4.5px}
.areamap.wide .place.base .lbl{font-size:19px}
@media (min-width:1000px){
  #areas.section{padding-block:30px 34px}
  .area-head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:16px}
  .area-head .lede{font-size:1.02rem;text-align:right;max-width:30rem}
  .area-head h2{white-space:nowrap}
  .map-wide{display:block}
  .map-big{display:none}
  .map-wide .map-key{width:auto;min-width:0;right:2.2%;bottom:7%;padding:14px 16px;gap:7px;font-size:.95rem}
  .map-wide .map-key b{font-size:1.1rem}
  .reg-cols{margin-top:18px;gap:24px}
  .reg{padding-top:0}
  .reg p,.sublist{font-size:1rem;line-height:1.5}
  .sublist{margin-top:16px;max-width:none}
}

/* Brand logos on white tiles; brands without a logo file stay as text */
.brands{align-items:stretch}
.brands li{display:flex;align-items:center;justify-content:center;min-height:64px}
.brands li.logo{background:#fff;padding:6px 12px;width:136px}
.brands li.logo img{display:block;width:100%;height:auto;max-height:56px;object-fit:contain}

/* ===== "What's going on?" : services told as the customer's situation ===== */
.needs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.need-main{grid-column:span 2;grid-row:span 2;position:relative;overflow:hidden;background:var(--navy);color:var(--on-navy);border-radius:10px;padding:38px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.need-main::after{content:"";position:absolute;right:-120px;bottom:-150px;width:340px;height:340px;background:var(--sun);transform:rotate(-12deg);border-radius:8px;opacity:.95}
.need-main > *{position:relative;z-index:1}
.need-main h3{font-size:clamp(3rem,5.4vw,4.6rem);color:var(--sun);line-height:.95}
.need-main .big{font-size:1.25rem;line-height:1.45;color:var(--on-navy);max-width:30rem}
.need-main .ticks{color:var(--on-navy-muted)}
.need-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.textlink{color:var(--on-navy);font-weight:600;text-underline-offset:4px}
.need{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
a.need:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(0,0,0,.14);border-color:var(--sun)}
.need img{width:100%;aspect-ratio:16/10;object-fit:cover}
.need .body{display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px;flex:1}
.need h3{font-size:1.4rem;line-height:1.05}
.need p{color:var(--muted);font-size:1rem;line-height:1.5}
.need .more{margin-top:auto;padding-top:6px;color:var(--ocean);font-weight:600}
.need-other{background:var(--sun);border-color:var(--sun);color:var(--navy);justify-content:center}
.need-other .body{justify-content:center;gap:12px}
.need-other p{color:var(--navy)}
.need-other .btn{min-height:46px;padding:0 14px;font-size:1.05rem;flex:1}
@media (max-width:1000px){.needs{grid-template-columns:repeat(2,minmax(0,1fr))}.need-main{grid-row:auto}}
@media (max-width:560px){.needs{grid-template-columns:1fr}.need-main{grid-column:auto;padding:28px 22px}.need-main .btn{width:100%}}
@media (prefers-reduced-motion:reduce){.need{transition:none}a.need:hover{transform:none}}

/* ===== Trust band: the four promises, loud ===== */
.trust.band{background:var(--navy);color:var(--on-navy);border-top:5px solid var(--sun);position:relative;overflow:hidden}
.trust.band .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding-block:0}
.trust.band .t{display:flex;align-items:center;gap:16px;padding:34px 22px;border-left:1px solid #2E2E2E;min-width:0}
.trust.band .t:first-child{border-left:0;padding-left:0}
.trust.band .ti{width:60px;height:60px;border-radius:8px;background:var(--sun);color:var(--navy);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 0 0 6px rgba(236,102,8,.18)}
.trust.band .ti svg{width:30px;height:30px}
.trust.band b{display:block;font-family:var(--display);font-weight:800;font-size:2.1rem;line-height:1;text-transform:uppercase;color:#fff;letter-spacing:.01em}
.trust.band .t span{display:block;color:var(--on-navy-muted);font-size:1rem;line-height:1.35;margin-top:4px}
.trust.band .live-dot{display:inline-block;margin-right:8px;vertical-align:1px}
.trust.band #nowtime{font-style:normal}
.trust.band .lic{font-style:normal;display:inline-block;padding:1px 7px;border:1px solid #5C5F63;border-radius:4px;color:#fff;font-weight:600;letter-spacing:.08em;font-variant-numeric:tabular-nums;white-space:nowrap}
.trust.band.pre .t{opacity:0;transform:translateY(20px)}
.trust.band.pre .ti{transform:scale(.5) rotate(-12deg)}
.trust.band.in .t{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.trust.band.in .ti{transform:none;transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.trust.band.in .t:nth-child(2),.trust.band.in .t:nth-child(2) .ti{transition-delay:.12s}
.trust.band.in .t:nth-child(3),.trust.band.in .t:nth-child(3) .ti{transition-delay:.24s}
.trust.band.in .t:nth-child(4),.trust.band.in .t:nth-child(4) .ti{transition-delay:.36s}
@media (max-width:1000px){
  .trust.band .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust.band .t{padding:24px 16px}
  .trust.band .t:nth-child(odd){border-left:0;padding-left:0}
  .trust.band .t:nth-child(n+3){border-top:1px solid #2E2E2E}
}
@media (max-width:520px){
  .trust.band .t{flex-direction:column;align-items:flex-start;gap:12px;padding:22px 12px}
  .trust.band .ti{width:50px;height:50px}
  .trust.band .ti svg{width:26px;height:26px}
  .trust.band b{font-size:1.6rem}
  .trust.band .t span{font-size:.92rem}
}
.trust.band .t span{display:revert;color:inherit;font-size:inherit;margin-top:0}
.trust.band .t .ti{display:flex;color:var(--navy);width:56px;height:56px}
.trust.band .t > div{min-width:0}
.trust.band .t > div > span{display:block;color:var(--on-navy-muted);font-size:1rem;line-height:1.35;margin-top:5px}
.trust.band .t{padding:34px 18px;gap:14px}
.trust.band b{font-size:clamp(1.35rem,2.05vw,1.95rem)}
@media (max-width:520px){.trust.band .t .ti{width:50px;height:50px}.trust.band b{font-size:1.45rem}.trust.band .t > div > span{font-size:.92rem}.trust.band .t{padding:22px 10px}}

/* ===== Booking: one joined card, dark guide on the left, form on the right ===== */
.book-grid.joined{gap:0;align-items:stretch;grid-template-columns:.78fr 1.22fr;border-radius:12px;overflow:hidden;overflow:clip;background:var(--paper);box-shadow:0 26px 60px rgba(0,0,0,.16)}
.joined .book-side{position:relative;top:auto;background:var(--navy);color:var(--on-navy);padding:44px 38px 110px;overflow:hidden;overflow:clip}
.joined .book-side::after{content:"";position:absolute;left:-110px;bottom:-170px;width:330px;height:270px;background:var(--sun);transform:rotate(12deg);border-radius:8px}
.book-side-in{position:sticky;top:112px;z-index:1;display:flex;flex-direction:column;gap:18px}
.joined .book-side h2{color:#fff;font-size:clamp(2rem,3.4vw,2.9rem)}
.joined .book-side .lede{color:var(--on-navy-muted)}
.joined .book-side .eyebrow{color:var(--sun)}
.next{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;counter-reset:n}
.next li{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:14px;counter-increment:n}
.next li::before{content:counter(n);grid-row:span 2;width:38px;height:38px;border-radius:50%;border:2px solid var(--sun);color:var(--sun);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:1.2rem}
.next b{font-family:var(--display);font-weight:700;font-size:1.3rem;line-height:1.1;text-transform:uppercase;color:#fff}
.next span{color:var(--on-navy-muted);font-size:1rem;line-height:1.4}
.book-sum{display:flex;flex-direction:column;gap:3px;padding:16px 18px;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid #3A3A3A}
.book-sum .lab{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sun)}
.book-sum b{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.1;text-transform:uppercase;color:var(--on-navy-muted)}
.book-sum b.set{color:#fff}
.book-sum [data-sum=when]{color:var(--on-navy-muted)}
.talk{color:var(--on-navy-muted)}
.talk a{color:#fff}
.joined .book-card{border:0;border-radius:0;box-shadow:none;padding:42px 38px}
#book fieldset{display:block}
#book .fs{display:flex;flex-direction:column;gap:12px}
#book legend{font-size:1.6rem;margin-bottom:14px}
#book legend .n{width:36px;height:36px;font-size:1.2rem}
#book .tiles .tile span{min-height:68px;border-radius:8px;background:#fff;gap:14px;transition:border-color .15s ease,background .15s ease,transform .15s ease}
#book .tiles .tile span svg{width:40px;height:40px;padding:9px;border-radius:6px;background:var(--pick);color:var(--ocean)}
#book .tiles .tile:hover span{border-color:var(--sun);transform:translateY(-1px)}
#book .tiles .tile input:checked + span{border-color:var(--sun);background:var(--pick);box-shadow:inset 0 0 0 1.5px var(--sun)}
#book .tiles .tile input:checked + span svg{background:var(--sun);color:var(--navy)}
#book .tiles .tile input:checked + span::after{content:"";flex:none;margin-left:auto;width:22px;height:22px;border-radius:50%;background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
#book .tiles .tile.urgent span{background:var(--urgent-bg)}
#book .tiles .tile.urgent span svg{background:#F4CFCB;color:var(--urgent)}
#book .tiles .tile.urgent input:checked + span{border-color:var(--urgent);background:var(--urgent-bg);box-shadow:inset 0 0 0 1.5px var(--urgent)}
#book .tiles .tile.urgent input:checked + span svg{background:var(--urgent);color:#fff}
#book .tiles .tile.urgent input:checked + span::after{background-color:var(--urgent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
#book .pills .tile span{background:#fff}
#book .pills .tile input:checked + span{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:none}
.assure{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.95rem;color:var(--muted)}
.assure li{display:flex;align-items:center;gap:7px}
.assure svg{width:16px;height:16px;color:var(--ocean);flex:none}
@media (max-width:900px){
  .book-grid.joined{grid-template-columns:1fr}
  .joined .book-side{padding:32px 24px 36px}
  .joined .book-side::after{display:none}
  .book-side-in{position:static;gap:14px}
  .joined .book-card{padding:30px 24px}
}
@media (max-width:520px){
  .joined .book-side{padding:26px 18px 28px}
  .joined .book-card{padding:24px 16px}
  .next{gap:12px}
  #book legend{font-size:1.4rem}
}
@media (prefers-reduced-motion:reduce){#book .tiles .tile span{transition:none}#book .tiles .tile:hover span{transform:none}}

/* ===== FAQ: answers that read well, and someone to ask ===== */
#faq{background:var(--paper);border-top:1px solid var(--line);scroll-margin-top:86px}
#faq .faq{grid-template-columns:.85fr 1.15fr;gap:52px}
.faq-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:112px}
.ask{margin-top:14px;background:var(--navy);color:var(--on-navy);border-radius:10px;padding:26px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.ask::after{content:"";position:absolute;right:-70px;bottom:-90px;width:190px;height:170px;background:var(--sun);transform:rotate(-12deg);border-radius:8px;opacity:.9}
.ask > *{position:relative;z-index:1}
.ask h3{color:#fff;font-size:1.7rem}
.ask p{color:var(--on-navy-muted)}
.ask-btns{display:flex;flex-wrap:wrap;gap:10px;padding-top:4px}
.ask-btns .btn{min-height:50px;padding:0 18px;font-size:1.15rem}
.ask .btn-ghost{background:var(--navy)}
#faq .faq-list{gap:0;border-top:2px solid var(--navy)}
#faq details{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0}
#faq summary{padding:22px 4px;font-size:1.45rem;line-height:1.15;gap:20px}
#faq summary:hover{color:var(--ocean)}
#faq summary::after{width:38px;height:38px;border-radius:6px;background:var(--sand);font-family:var(--body);font-weight:500;font-size:1.6rem;transition:background .15s ease,transform .2s ease}
#faq details[open] summary{color:var(--ocean)}
#faq details[open] summary::after{content:"+";background:var(--sun);color:var(--navy);transform:rotate(45deg)}
#faq details p{padding:0 60px 24px 4px;font-size:1.12rem;line-height:1.6;color:var(--ink);max-width:40rem}
@media (prefers-reduced-motion:no-preference){
  @keyframes faqin{from{opacity:0;transform:translateY(-6px)}}
  #faq details[open] p{animation:faqin .25s ease}
}
@media (max-width:900px){#faq .faq{grid-template-columns:1fr;gap:28px}.faq-side{position:static}}
@media (max-width:520px){#faq summary{font-size:1.25rem;padding:18px 2px}#faq details p{padding-right:8px;font-size:1.05rem}.ask{padding:22px 18px}.ask-btns .btn{flex:1}}

/* "Locked out" option looks unselected until it is tapped; clear prompt if no job is chosen */
#book .tiles .tile.urgent span{background:#fff;border-color:var(--line);color:var(--ink)}
#book .tiles .tile.urgent span svg{color:var(--urgent)}
#book .tiles .tile.urgent span::after{content:"Urgent";margin-left:auto;flex:none;padding:3px 9px;border-radius:999px;background:var(--urgent-bg);color:var(--urgent);font-family:var(--body);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;width:auto;height:auto}
#book .tiles .tile.urgent:hover span{border-color:var(--urgent)}
#book .tiles .tile.urgent input:checked + span{background:var(--urgent-bg);border-color:var(--urgent);color:var(--urgent);box-shadow:inset 0 0 0 1.5px var(--urgent)}
.pick-msg{margin:0;padding:12px 14px;border-radius:8px;background:var(--urgent-bg);color:var(--urgent);font-weight:600}
#book .tiles.need-pick .tile span{border-color:var(--urgent)}
#book .tiles .tile.urgent span svg{background:var(--urgent-bg)}
#book .tiles .tile.urgent input:checked + span::after{content:"";padding:0;width:22px;height:22px;border-radius:50%}

/* Suburb picker */
#book select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355585C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:20px;padding-right:42px}
#book select:invalid{color:var(--muted)}
.field-hint{margin:-4px 0 0;font-size:.92rem;color:var(--muted)}
.brands li.logo.dark{background:#060807;border:1px solid #3A3A3A}

/* ===== Buttons v2: tactile, lit, and asking to be pressed ===== */
.btn{position:relative;overflow:hidden;isolation:isolate;border-radius:8px;font-weight:800;letter-spacing:.03em;transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s ease,background .16s ease,color .16s ease,border-color .16s ease;-webkit-tap-highlight-color:transparent}
.btn-lg{min-height:66px;font-size:1.5rem;padding:0 30px}
.btn svg{transition:transform .2s ease}

/* Primary: orange slab with a deep edge and a glow underneath */
.btn-sun{background:linear-gradient(180deg,#FF7A1A 0%,var(--sun) 55%,#DD5C00 100%);color:#161616;text-shadow:0 1px 0 rgba(255,255,255,.25);box-shadow:0 7px 0 #9A3F00,0 18px 28px -6px rgba(236,102,8,.55),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-sun:hover{background:linear-gradient(180deg,#FF8A33 0%,#F5700F 55%,#E36305 100%);transform:translateY(-3px);box-shadow:0 10px 0 #9A3F00,0 26px 34px -6px rgba(236,102,8,.65),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-sun:active{transform:translateY(5px);box-shadow:0 2px 0 #9A3F00,0 6px 12px -4px rgba(236,102,8,.5),inset 0 2px 6px rgba(0,0,0,.25)}
.btn-sun::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.6) 50%,transparent 62%);transform:translateX(-130%)}
.btn-sun:hover svg{transform:scale(1.15) rotate(-8deg)}

/* Secondary on dark: bright outline that fills on hover */
.btn-ghost{border:2px solid rgba(255,255,255,.75);color:#fff;background:rgba(255,255,255,.04);box-shadow:0 6px 0 rgba(0,0,0,.45)}
.btn-ghost:hover{background:#fff;color:#161616;border-color:#fff;transform:translateY(-3px);box-shadow:0 9px 0 rgba(0,0,0,.45)}
.btn-ghost:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.45)}
.btn-line{border:2px solid rgba(255,255,255,.75);color:#fff}
.btn-line:hover{background:var(--sun);border-color:var(--sun);color:#161616;transform:translateY(-2px)}

/* Dark buttons on the orange cards and bands */
.btn-navy,.sos .btn{background:#161616;color:#fff;box-shadow:0 6px 0 rgba(0,0,0,.4),0 14px 22px -8px rgba(0,0,0,.5)}
.sos .btn{color:var(--sun-hi)}
.btn-navy:hover,.sos .btn:hover{transform:translateY(-3px);background:#000;box-shadow:0 9px 0 rgba(0,0,0,.4),0 20px 28px -8px rgba(0,0,0,.55)}
.btn-navy:active,.sos .btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.4)}

/* Compact buttons keep the look but sit flatter */
.nav .btn{box-shadow:0 4px 0 #9A3F00,0 10px 18px -6px rgba(236,102,8,.5)}
.nav .btn-line{box-shadow:none}
.callbar .btn-sun{box-shadow:0 4px 0 #9A3F00}
.callbar .btn-ghost{box-shadow:none;border-width:1.5px}
.ask-btns .btn,.need-other .btn,.aside .btn{font-size:1.15rem}
.submit{min-height:70px;font-size:1.6rem}

/* Card links become real buttons */
.need .more{align-self:flex-start;margin-top:auto;padding:9px 14px;border:2px solid var(--navy);border-radius:6px;color:var(--navy);font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:.03em;text-transform:uppercase;line-height:1;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease}
a.need:hover .more{background:var(--sun);border-color:var(--sun);color:#161616;transform:translateX(4px)}
.kh-tabs a{transition:transform .16s ease,border-color .16s ease}
.kh-tabs a:hover{transform:translateY(-2px)}
.textlink{font-weight:700}

@media (prefers-reduced-motion:no-preference){
  @keyframes sheen-run{0%,72%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
  @keyframes ring{0%,84%,100%{transform:rotate(0)}87%{transform:rotate(-16deg)}90%{transform:rotate(14deg)}93%{transform:rotate(-10deg)}96%{transform:rotate(6deg)}}
  @keyframes cta-pulse{0%{box-shadow:0 7px 0 #9A3F00,0 0 0 0 rgba(236,102,8,.6)}70%,100%{box-shadow:0 7px 0 #9A3F00,0 0 0 18px rgba(236,102,8,0)}}
  @keyframes bar-pulse{0%{box-shadow:0 4px 0 #9A3F00,0 0 0 0 rgba(236,102,8,.7)}70%,100%{box-shadow:0 4px 0 #9A3F00,0 0 0 12px rgba(236,102,8,0)}}
  .btn-sun::after{animation:sheen-run 4.2s ease-in-out infinite}
  .btn-sun[href^="tel:"] svg{animation:ring 4.2s ease-in-out infinite;transform-origin:50% 50%}
  .hero-actions .btn-sun,.need-main .btn-sun,.urgent-panel .btn-sun{animation:cta-pulse 2.4s ease-out infinite}
  .hero-actions .btn-sun:hover,.need-main .btn-sun:hover,.urgent-panel .btn-sun:hover{animation:none}
  .callbar .btn-sun{animation:bar-pulse 2.4s ease-out infinite}
}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover,.btn:active{transform:none}}
@media (max-width:560px){.btn-lg{min-height:64px;font-size:clamp(1.15rem,5.6vw,1.5rem)}.submit{font-size:1.4rem}}

/* ===== Hero that asks first: "How can we help?" with tap-to-start answers ===== */
.ask-hero .wrap{grid-template-columns:1.25fr .75fr;gap:36px;padding-block:38px 120px;align-items:center}
.ask-hero h1{font-size:clamp(3rem,6.6vw,5.4rem);color:#fff}
.ask-hero .lede{font-size:1.2rem;color:var(--on-navy-muted)}
.helps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.help{position:relative;display:flex;align-items:center;gap:12px;min-height:66px;padding:10px 14px;border:2px solid #3F4349;border-radius:10px;background:#232323;color:#fff;font:inherit;text-align:left;text-decoration:none;cursor:pointer;box-shadow:0 5px 0 #0A0A0A;transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .15s ease,border-color .15s ease,background .15s ease;-webkit-tap-highlight-color:transparent}
.help:hover{transform:translateY(-3px);border-color:var(--sun);background:#2B2B2B;box-shadow:0 8px 0 #0A0A0A}
.help:active{transform:translateY(4px);box-shadow:0 1px 0 #0A0A0A}
.help:focus-visible{outline:3px solid var(--sun-hi);outline-offset:2px}
.help .hi{flex:none;width:42px;height:42px;border-radius:8px;background:rgba(236,102,8,.16);color:var(--sun-hi);display:flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease}
.help .hi svg{width:22px;height:22px}
.help:hover .hi{background:var(--sun);color:#161616}
.help .ht{display:flex;flex-direction:column;min-width:0}
.help b{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1.05;text-transform:uppercase;letter-spacing:.01em}
.help small{font-size:.92rem;font-weight:600;opacity:.9}
.help.urgent{grid-column:1/-1;min-height:84px;padding:12px 18px;border-color:transparent;background:linear-gradient(180deg,#FF7A1A 0%,var(--sun) 55%,#DD5C00 100%);color:#161616;box-shadow:0 7px 0 #9A3F00,0 18px 28px -6px rgba(236,102,8,.55),inset 0 1px 0 rgba(255,255,255,.45);overflow:hidden;isolation:isolate}
.help.urgent:hover{border-color:transparent;background:linear-gradient(180deg,#FF8A33 0%,#F5700F 55%,#E36305 100%);box-shadow:0 10px 0 #9A3F00,0 26px 34px -6px rgba(236,102,8,.65),inset 0 1px 0 rgba(255,255,255,.5)}
.help.urgent:active{box-shadow:0 2px 0 #9A3F00}
.help.urgent .hi,.help.urgent:hover .hi{background:#161616;color:var(--sun-hi);width:50px;height:50px}
.help.urgent b{font-size:clamp(1.6rem,3.2vw,2.2rem)}
.help.urgent .go{margin-left:auto;flex:none;width:50px;height:50px;border-radius:50%;background:#161616;color:#fff;display:flex;align-items:center;justify-content:center}
.help.urgent .go svg{width:24px;height:24px}
.help.urgent::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.6) 50%,transparent 62%);transform:translateX(-130%)}
.hero-who{font-size:.9rem;color:var(--on-navy-muted)}
.ask-hero .kh-frame{width:min(320px,100%)}
.book-sum.flash{animation:sumflash 1.2s ease}
@keyframes sumflash{0%,40%{border-color:var(--sun);box-shadow:0 0 0 4px rgba(236,102,8,.35)}100%{border-color:#3A3A3A;box-shadow:0 0 0 0 rgba(236,102,8,0)}}
@media (min-width:1100px){.helps{grid-template-columns:repeat(4,minmax(0,1fr))}.help:not(.urgent){flex-direction:column;align-items:flex-start;min-height:118px;padding:14px}.help b{font-size:1.2rem}}
@media (max-width:880px){
  .ask-hero .wrap{grid-template-columns:1fr;padding-block:20px 104px;gap:22px}
  .ask-hero .stack{gap:14px!important}
  .ask-hero .lede{font-size:1.05rem}
  .ask-hero h1{font-size:clamp(2.7rem,12vw,3.6rem)}
  .help{min-height:62px;padding:8px 10px;gap:10px}
  .help .hi{width:36px;height:36px}.help .hi svg{width:19px;height:19px}
  .help b{font-size:1.08rem}
  .help.urgent{min-height:76px}
  .help.urgent .hi,.help.urgent .go{width:44px;height:44px}
  .ask-hero .kh-frame{width:170px}
}
@media (prefers-reduced-motion:no-preference){
  .help.urgent::after{animation:sheen-run 4.2s ease-in-out infinite}
  .help.urgent{animation:cta-pulse 2.4s ease-out infinite}
  .help.urgent .go svg{animation:ring 4.2s ease-in-out infinite}
  .helps .help{animation:rise .6s cubic-bezier(.2,.7,.2,1) backwards}
  .helps .help:nth-child(1){animation:rise .6s .3s cubic-bezier(.2,.7,.2,1) backwards,cta-pulse 2.4s 1.2s ease-out infinite}
  .helps .help:nth-child(2){animation-delay:.42s}.helps .help:nth-child(3){animation-delay:.48s}.helps .help:nth-child(4){animation-delay:.54s}.helps .help:nth-child(5){animation-delay:.6s}
  .helps .help:nth-child(6){animation-delay:.66s}.helps .help:nth-child(7){animation-delay:.72s}.helps .help:nth-child(8){animation-delay:.78s}.helps .help:nth-child(9){animation-delay:.84s}
}
@media (prefers-reduced-motion:reduce){.help,.help:hover,.help:active{transform:none}}
@media (max-width:560px){.ask-hero h1{font-size:clamp(2.3rem,10.5vw,3.1rem)}.ask-hero .lede{font-size:1rem}.ask-hero .wrap{padding-top:14px}.ask-hero .status{font-size:.82rem;padding:6px 12px}}

/* ===== Photos instead of icons on the options; step 1 folds to the chosen answer ===== */
.help .hpic{flex:none;width:52px;height:52px;border-radius:8px;object-fit:cover;border:2px solid #3F4349;transition:border-color .15s ease}
.help:hover .hpic{border-color:var(--sun)}
.help.plain{justify-content:center;text-align:center;border-style:dashed}
.help.urgent{padding-left:22px}
@media (min-width:1100px){
  .help:not(.urgent){padding:0;overflow:hidden;gap:0;min-height:0;align-items:stretch}
  .help:not(.urgent) .hpic{width:100%;height:92px;border:0;border-radius:0;border-bottom:2px solid #3F4349}
  .help:not(.urgent) .ht{padding:11px 12px 13px;justify-content:center;flex:1}
  .help.plain{align-items:center;justify-content:center}
  .help.plain .ht{flex:none}
}
@media (max-width:880px){.help .hpic{width:44px;height:44px}}
#book .tiles .tile span img.th{flex:none;width:44px;height:44px;border-radius:6px;object-fit:cover}
#book .tiles .tile span{padding-left:10px}
#book .tiles .tile.urgent span{padding-left:14px}
.picked{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:8px;background:var(--pick);border:2px solid var(--sun)}
.picked[hidden]{display:none}
.pk-tick{flex:none;width:26px;height:26px;border-radius:50%;background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/15px no-repeat}
.picked b{font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1.1;text-transform:uppercase;min-width:0}
.picked .change{margin-left:auto;flex:none;padding:8px 12px;border:0;background:none;color:var(--ocean);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#book fieldset.done .tiles{display:none}
@media (max-width:560px){.help .hpic{width:40px;height:40px}.help:not(.urgent) b{font-size:1.02rem}.help{gap:9px;padding:8px 9px}}

/* ===== Clean text-only options; photos live in the keyhole only ===== */
.help:not(.urgent){flex-direction:row;align-items:center;min-height:64px;padding:12px 14px 12px 16px;gap:10px;overflow:visible;text-align:left;justify-content:flex-start;border-style:solid}
.help:not(.urgent) .ht{padding:0;flex:1}
.help:not(.urgent) b{font-size:1.25rem}
.help:not(.urgent)::after{content:"";flex:none;width:10px;height:10px;border-top:3px solid var(--sun);border-right:3px solid var(--sun);transform:rotate(45deg);margin-right:4px;transition:transform .15s ease}
.help:not(.urgent):hover::after{transform:translateX(4px) rotate(45deg)}
@media (min-width:1100px){.helps{grid-template-columns:repeat(2,minmax(0,1fr))}.help:not(.urgent) b{font-size:1.35rem}}
@media (max-width:560px){.help:not(.urgent){min-height:58px;padding:10px 10px 10px 12px}.help:not(.urgent) b{font-size:1.05rem}.help:not(.urgent)::after{width:8px;height:8px;border-width:2.5px}}
.kh-window img.kh-hover{animation:none;opacity:0;transform:scale(1.12);transition:opacity .25s ease;z-index:2}
.kh-window img.kh-hover.show{opacity:1}
#book .tiles .tile:not(.urgent) span{padding-left:14px;gap:12px}
#book .tiles .tile:not(.urgent) span::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #C4C4BE;background:#fff;transition:border-color .15s ease,background .15s ease}
#book .tiles .tile:not(.urgent) input:checked + span::before{border-color:var(--sun);background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
#book .tiles .tile:not(.urgent) input:checked + span::after{display:none}
/* Headline on one line */
.ask-hero h1 .hl{display:inline;white-space:nowrap}
.ask-hero h1{font-size:clamp(2.6rem,5.6vw,4.8rem)}
@media (max-width:880px){.ask-hero h1{font-size:clamp(2rem,9.6vw,3.4rem)}}
@media (max-width:560px){.ask-hero h1{font-size:clamp(1.9rem,9.6vw,3rem)}}

/* Optional extras tucked away so the booking stays short */
.extras{border:1.5px dashed #C9C4B8;border-radius:8px;background:var(--field)}
.extras summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:12px}
.extras summary::-webkit-details-marker{display:none}
.extras summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:6px;background:var(--sand);display:flex;align-items:center;justify-content:center;font-size:1.3rem;transition:transform .2s ease,background .15s ease}
.extras[open] summary::after{transform:rotate(45deg);background:var(--sun)}
.extras .fs{padding:0 16px 16px}
.extras .upload{background:#fff}

/* ===== Phone: one-line options and far less scrolling ===== */
.help:not(.urgent) b{white-space:nowrap}
@media (max-width:900px){
  .joined .book-side{display:none}                 /* the "Book online" info panel is desktop-only */
  .joined .book-card{padding:22px 16px}
  .hero + #book{padding-block:18px 36px}
}
@media (max-width:880px){
  .ask-hero .hero-art{display:none}                /* photos stay in the galleries further down */
  .ask-hero .hero-who{display:none}
  .ask-hero .wrap{padding-block:14px 86px}
}
@media (max-width:560px){
  .help:not(.urgent){min-height:52px;padding:8px 8px 8px 12px}
  .help:not(.urgent) b{font-size:clamp(.95rem,4.5vw,1.12rem)}
  .help:not(.urgent)::after{display:none}
  .help.urgent{min-height:70px}
  .helps{gap:8px}
  .ask-hero .lede{display:none}
  .ask-hero .mini-ticks{font-size:.85rem;gap:4px 14px;padding-top:2px}
  #book .row{grid-template-columns:1fr 1fr;gap:10px}
  #book .row:has(select){grid-template-columns:1fr}
  #book input[type=text],#book input[type=tel],#book input[type=email],#book select{min-height:46px}
  #book .book-card form{gap:20px}
  #book legend{font-size:1.3rem;margin-bottom:10px}
  #book .fs{gap:10px}
  .field-hint{font-size:.85rem}
}
.help:not(.urgent) b{overflow:hidden;text-overflow:ellipsis;display:block}
@media (max-width:560px){.help:not(.urgent){padding:8px 6px 8px 10px}.help:not(.urgent) b{font-size:clamp(.88rem,4.1vw,1.1rem)}}
@media (max-width:560px){.help:not(.urgent) b{font-size:clamp(.95rem,4.4vw,1.15rem)}}

/* ===== Booking mode: once an option is tapped, the page is only about booking that ===== */
.focus{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.focus[hidden]{display:none}
.focus h2{color:#fff;font-size:clamp(2.4rem,7vw,4rem);outline:none}
.focus .eyebrow{color:var(--sun)}
.focus-blurb{color:var(--on-navy-muted);font-size:1.15rem;max-width:36rem}
.focus-back{margin-bottom:6px;padding:8px 14px;border:2px solid rgba(255,255,255,.6);border-radius:6px;background:none;color:#fff;font:inherit;font-weight:600;cursor:pointer}
.focus-back:hover{background:#fff;color:#161616}
body.booking .ask-hero .status,body.booking .ask-hero h1,body.booking .ask-hero .lede,body.booking .ask-hero .helps,body.booking .ask-hero .mini-ticks,body.booking .ask-hero .hero-who,body.booking .ask-hero .hero-art,body.booking .ticker{display:none}
body.booking .ask-hero .wrap{grid-template-columns:1fr;padding-block:22px 30px}
body.booking main > section:not(.hero):not(#book){display:none}
body.booking #book fieldset:first-of-type{display:none}
body.booking #book legend .n{display:none}
body.booking .hero + #book{padding-block:22px 48px}
body.booking .callbar .btn[href="#book"]{display:none}
body.booking .callbar{grid-template-columns:1.6fr 1fr}
@media (max-width:560px){.focus-blurb{font-size:1rem}body.booking .ask-hero .wrap{padding-block:14px 20px}}
/* ===== Home: the question is asked once. The booking form only appears after an option is tapped ===== */
.ask-hero ~ #book{display:none}
body.booking .ask-hero ~ #book{display:block}
body.booking .callbar .btn[href="#help"]{display:none}
/* ===== Trust band v3: slim strip, no chunky tiles ===== */
.trust.band{border-top-width:3px}
.trust.band .nowtime{font-style:normal}
.trust.band .t .ti{background:none;box-shadow:none;color:var(--sun);width:auto;height:auto}
.trust.band .ti svg{width:32px;height:32px}
.trust.band .t{padding:24px 18px}
.trust-live{display:none}
@media (max-width:700px){
  .trust.band .wrap{grid-template-columns:repeat(4,minmax(0,1fr));padding-block:14px 12px}
  .trust.band .t{flex-direction:column;align-items:center;text-align:center;gap:5px;padding:0 2px!important;border:0!important}
  .trust.band .t > div > span{display:none}
  .trust.band b{font-size:1rem;letter-spacing:.03em;white-space:nowrap}
  .trust.band .ti svg{width:24px;height:24px}
  .trust-live{display:block;grid-column:1/-1;text-align:center;margin:12px 0 0;padding-top:10px;border-top:1px solid #2E2E2E;font-size:.88rem;color:var(--on-navy-muted)}
  .trust-live .live-dot{display:inline-block;margin-right:8px;vertical-align:1px}
}
.trust.band b .sm{display:none}
.hero .wrap > .stack > .focus{animation:rise .25s ease-out backwards;animation-delay:0s}
@media (max-width:700px){
  .trust.band b .lg{display:none}
  .trust.band b .sm{display:inline}
  .trust.band b{font-size:min(1rem,3.7vw);letter-spacing:.02em}
}
/* ===== Options as calls to action: centred text, raised light slabs that press down ===== */
.helps{gap:14px 10px}
.help:not(.urgent){justify-content:center;text-align:center;padding:12px 10px;border:0;background:linear-gradient(180deg,#FFFFFF 0%,#F3F1EC 60%,#E2DFD8 100%);color:#161616;box-shadow:0 6px 0 #8F8B83,0 16px 22px -10px rgba(0,0,0,.8),inset 0 1px 0 #fff}
.help:not(.urgent) .ht{flex:1;align-items:stretch}
.help:not(.urgent) b{text-align:center}
.help:not(.urgent)::after{display:none}
.help:not(.urgent):hover{background:linear-gradient(180deg,#FF7A1A 0%,var(--sun) 55%,#DD5C00 100%);box-shadow:0 9px 0 #9A3F00,0 22px 28px -8px rgba(236,102,8,.55),inset 0 1px 0 rgba(255,255,255,.45)}
.help:not(.urgent):active{transform:translateY(5px);background:linear-gradient(180deg,#FF7A1A 0%,var(--sun) 55%,#DD5C00 100%);box-shadow:0 1px 0 #9A3F00}
.help.urgent{justify-content:center;text-align:center;padding-inline:66px}
.help.urgent .ht{align-items:center}
.help.urgent .go{position:absolute;right:14px;top:50%;margin:-25px 0 0}
@media (max-width:560px){
  .helps{gap:13px 8px}
  .help:not(.urgent){min-height:54px;padding:8px 6px}
  .help.urgent{padding-inline:56px}
  .help.urgent .go{right:10px;margin-top:-22px}
}
/* Trust strip: even space above and below the row, labels on one baseline */
.trust.band b span{line-height:inherit}
.trust.band > .wrap{padding-block:0!important}
@media (max-width:700px){
  .trust.band > .wrap{padding-block:20px 14px!important}
  .trust-live{margin-top:20px;padding-top:12px}
}
.trust.band .t b span{line-height:inherit;margin:0}
/* ===== Trust strip lit up: glowing ring icons that light in turn ===== */
.trust.band{background:radial-gradient(90% 150% at 50% 0%,rgba(236,102,8,.26),transparent 62%),var(--navy);border-top-width:4px}
.trust.band .t .ti{width:52px;height:52px;border-radius:50%;border:2px solid var(--sun);background:rgba(236,102,8,.14);color:var(--sun-hi);box-shadow:0 0 18px rgba(236,102,8,.6),inset 0 0 12px rgba(236,102,8,.3)}
.trust.band .ti svg{width:26px;height:26px}
.trust.band b{color:#fff;text-shadow:0 0 16px rgba(255,138,51,.55)}
@keyframes lightup{0%,22%,100%{background:rgba(236,102,8,.14);color:var(--sun-hi);box-shadow:0 0 18px rgba(236,102,8,.6),inset 0 0 12px rgba(236,102,8,.3)}8%{background:var(--sun);color:#161616;box-shadow:0 0 30px 8px rgba(255,122,26,.9),inset 0 0 0 rgba(0,0,0,0)}}
@media (prefers-reduced-motion:no-preference){
  .trust.band .t .ti{animation:lightup 4.8s ease-in-out infinite}
  .trust.band .t:nth-child(2) .ti{animation-delay:.6s}
  .trust.band .t:nth-child(3) .ti{animation-delay:1.2s}
  .trust.band .t:nth-child(4) .ti{animation-delay:1.8s}
}
@media (max-width:700px){
  .trust.band .t .ti{width:46px;height:46px}
  .trust.band .ti svg{width:23px;height:23px}
  .trust.band .t{gap:9px}
  .trust.band b{font-size:min(1.15rem,4vw)}
  .trust.band > .wrap{padding-block:22px 14px!important}
}
/* Trust strip: steady (no flashing), silver-white instead of orange */
.trust.band{background:radial-gradient(90% 150% at 50% 0%,rgba(255,255,255,.10),transparent 62%),var(--navy)}
.trust.band .t .ti{animation:none!important;border:0;background:linear-gradient(180deg,#FFFFFF 0%,#E9E7E2 60%,#C9C6BF 100%);color:#161616;box-shadow:0 0 22px rgba(255,255,255,.38),inset 0 1px 0 #fff}
.trust.band b{text-shadow:none}
/* ===== Trust strip, premium: brushed-silver rings, fine line icons, tracked lettering ===== */
.trust.band{background:linear-gradient(180deg,#1F1F1F 0%,#121212 100%);border-top:0}
.trust.band::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent 0%,#EC6608 18%,#FFB277 50%,#EC6608 82%,transparent 100%)}
.trust.band .t .ti{width:54px;height:54px;border:1.5px solid transparent;background:linear-gradient(160deg,#262626,#131313) padding-box,linear-gradient(145deg,#FAFAFA 0%,#7C8086 38%,#EDEDED 58%,#4E5257 100%) border-box;color:#F2F2F2;box-shadow:0 8px 18px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.10)}
.trust.band .ti svg{width:24px;height:24px;stroke-width:1.5}
.trust.band b{font-weight:700;letter-spacing:.12em;background:linear-gradient(180deg,#FFFFFF 20%,#B4B8BD 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.trust.band .t{border-left-color:rgba(255,255,255,.08)}
.trust.band b{font-size:clamp(1.15rem,1.7vw,1.6rem)}
@media (max-width:700px){
  .trust.band .t .ti{width:48px;height:48px}
  .trust.band .ti svg{width:21px;height:21px}
  .trust.band .t{gap:11px}
  .trust.band b{font-size:min(.95rem,3.4vw);letter-spacing:.09em}
  .trust.band > .wrap{padding-block:26px 16px!important}
  .trust-live{margin-top:22px;border-top-color:rgba(255,255,255,.09);letter-spacing:.02em}
}
@media (min-width:701px){.trust.band b{letter-spacing:.08em;font-size:clamp(1.1rem,1.55vw,1.5rem)}}
/* Trust strip in gold */
.trust.band::before{background:linear-gradient(90deg,transparent 0%,#A67C2E 18%,#F6E3A1 50%,#A67C2E 82%,transparent 100%)}
.trust.band .t .ti{background:linear-gradient(160deg,#262320,#131211) padding-box,linear-gradient(145deg,#FBEFC0 0%,#B8892F 36%,#F3D98B 58%,#7C5A1B 100%) border-box;color:#EBCB7A;box-shadow:0 8px 18px rgba(0,0,0,.55),0 0 16px rgba(212,170,80,.14),inset 0 1px 0 rgba(255,236,170,.12)}
.trust.band b{background:linear-gradient(180deg,#FBEFC0 10%,#D9B45C 55%,#B08930 100%);-webkit-background-clip:text;background-clip:text}
/* Map: suburb dots gently pulse in a rolling wave */
@keyframes dotbeat{0%,60%,100%{transform:scale(1);filter:none}25%{transform:scale(1.5);filter:drop-shadow(0 0 5px rgba(236,102,8,.85))}}
@media (prefers-reduced-motion:no-preference){
  .areamap .place:not(.base) .mark{transform-box:fill-box;transform-origin:center;animation:dotbeat 3.2s ease-in-out infinite}
  .areamap .place:nth-of-type(7n+1) .mark{animation-delay:.2s}
  .areamap .place:nth-of-type(7n+2) .mark{animation-delay:1.5s}
  .areamap .place:nth-of-type(7n+3) .mark{animation-delay:.7s}
  .areamap .place:nth-of-type(7n+4) .mark{animation-delay:2.3s}
  .areamap .place:nth-of-type(7n+5) .mark{animation-delay:1.1s}
  .areamap .place:nth-of-type(7n+6) .mark{animation-delay:2.8s}
  .areamap .place:nth-of-type(7n) .mark{animation-delay:1.9s}
}
.areamap .tk{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round}
.areamap .mark .dot{stroke-width:1.5}
/* Map detail: parks and main roads */
.areamap .park{fill:#D9E4CE}
.areamap .road-case{fill:none;stroke:#CFCBC2;stroke-width:5.5;stroke-linejoin:round;stroke-linecap:round}
.areamap .road{fill:none;stroke:#FFFFFF;stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}
.areamap .plabel{fill:#6E8A5E;font:italic 600 12px var(--body);text-anchor:middle;letter-spacing:.04em}
.areamap .wlabel{font-size:12px;letter-spacing:.12em}
.areamap.zoom .road-case{stroke-width:7}.areamap.zoom .road{stroke-width:4.5}
/* FAQ tidy: even one-line rows as neat cards */
#faq .faq-list{gap:8px;border-top:0}
#faq details{background:#fff;border:1px solid var(--line);border-radius:10px;transition:border-color .15s ease,box-shadow .15s ease}
#faq details[open]{border-color:var(--sun);box-shadow:0 6px 18px -10px rgba(0,0,0,.35)}
#faq summary{min-height:60px;padding:10px 14px 10px 18px;font-size:1.25rem;gap:14px}
#faq summary::after{width:30px;height:30px;border-radius:50%;font-size:1.3rem}
#faq details p{padding:0 18px 18px;font-size:1.05rem;max-width:none}
@media (max-width:520px){#faq summary{font-size:1.15rem;padding:8px 12px 8px 16px;min-height:56px}#faq details p{padding:0 16px 16px;font-size:1rem}}
/* Areas: one colour on the map, suburbs sorted into tidy region cards */
:root{--dot2:#EC6608;--dot3:#EC6608}
.map-key{display:none!important}
.subs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.subs li{padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.98rem;font-weight:500;line-height:1.2;white-space:nowrap}
.reg-cols{gap:16px}
.reg-cols .reg{padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--paper);display:flex;flex-direction:column;gap:14px}
.reg-cols .reg h3{padding-bottom:10px;border-bottom:3px solid var(--sun);align-self:flex-start}
.map-zooms figcaption{justify-content:space-between;font-size:1.3rem;text-transform:uppercase;border-bottom:0;border-top:4px solid var(--sun);padding:14px 16px 12px}
.map-zooms figcaption small{font-family:var(--body);font-weight:500;font-size:.88rem;text-transform:none;color:var(--muted)}
.map-zooms .subs{padding:14px 14px 16px;background:var(--paper);border-top:1px solid var(--line)}
@media (max-width:700px){.reg-cols{display:none}}
/* FAQ: dark cards with gold icons, to match the 24/7 strip */
#faq details{background:linear-gradient(180deg,#222222,#161616);border:1px solid #2E2E2E;color:#fff}
#faq details[open]{border-color:#C9A24C;box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
#faq summary{justify-content:flex-start;color:#fff}
#faq summary:hover,#faq details[open] summary{color:#F3D98B}
#faq summary .qi{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#EBCB7A;border:1.5px solid transparent;background:linear-gradient(160deg,#262320,#131211) padding-box,linear-gradient(145deg,#FBEFC0 0%,#B8892F 36%,#F3D98B 58%,#7C5A1B 100%) border-box}
#faq summary .qi svg{width:19px;height:19px;stroke-width:1.6}
#faq summary .qt{flex:1;min-width:0}
#faq summary::after{background:rgba(255,255,255,.08);color:#fff;font-weight:400}
#faq details[open] summary::after{background:#D9B45C;color:#161616}
#faq details p{color:#D8D8D8;padding-left:70px}
@media (max-width:520px){#faq summary{padding-left:12px;gap:12px}#faq summary .qi{width:34px;height:34px}#faq summary .qi svg{width:17px;height:17px}#faq details p{padding-left:16px}}
/* FAQ: bright orange cards */
#faq details{background:linear-gradient(180deg,#FF7A1A 0%,#EC6608 60%,#E05E03 100%);border:0;color:#161616;box-shadow:0 4px 0 #9A3F00}
#faq details[open]{border:0;box-shadow:0 4px 0 #9A3F00,0 14px 26px -12px rgba(236,102,8,.6)}
#faq summary,#faq summary:hover,#faq details[open] summary{color:#161616}
#faq summary .qi{background:#161616;border:0;color:#fff}
#faq summary::after{background:rgba(22,22,22,.14);color:#161616;font-weight:500}
#faq details[open] summary::after{background:#161616;color:#fff}
#faq details p{color:#161616;font-weight:500}
#faq .faq-list{gap:12px}
/* FAQ: gold cards */
#faq details{background:linear-gradient(180deg,#FBEFC0 0%,#EBCB7A 55%,#D9B45C 100%);box-shadow:0 4px 0 #A67C2E}
#faq details[open]{box-shadow:0 4px 0 #A67C2E,0 14px 26px -12px rgba(166,124,46,.6)}
#faq summary .qi{color:#EBCB7A}
#faq details[open] summary::after{color:#EBCB7A}
/* FAQ matched to the hero: dark section, same raised white slabs as the "How can we help?" options */
#faq{background:radial-gradient(80% 60% at 85% 0%,rgba(236,102,8,.16),transparent 60%),#161616;border-top:0;color:#fff}
#faq .faq-side h2{color:#fff}
#faq .faq-side .lede{color:var(--on-navy-muted)}
#faq .faq-side .eyebrow{color:var(--sun)}
#faq .ask{background:#232323;border:1px solid #3A3A3A}
#faq .ask .btn-ghost{background:transparent}
#faq details{background:linear-gradient(180deg,#FFFFFF 0%,#F3F1EC 60%,#E2DFD8 100%);box-shadow:0 5px 0 #8F8B83,0 16px 22px -10px rgba(0,0,0,.8),inset 0 1px 0 #fff;color:#161616}
#faq details[open]{box-shadow:0 5px 0 #9A3F00,0 16px 22px -10px rgba(0,0,0,.8),inset 0 1px 0 #fff}
#faq summary .qi{background:#161616;color:#fff}
#faq summary::after{background:rgba(22,22,22,.10);color:#161616}
#faq details[open] summary::after{background:var(--sun);color:#161616}
#faq details p{color:#2B2B2B;font-weight:400}
#faq .faq-list{gap:14px}
/* FAQ as a conversation: each question is a speech bubble, the answer comes back as a reply bubble */
#faq details,#faq details[open]{background:none;box-shadow:none;border:0;border-radius:0}
#faq .faq-list{gap:14px;align-items:flex-start}
#faq details{max-width:100%}
#faq summary{position:relative;display:inline-flex;max-width:100%;min-height:54px;padding:8px 10px 8px 10px;gap:12px;background:#fff;color:#161616;border-radius:22px 22px 22px 5px;box-shadow:0 10px 20px -10px rgba(0,0,0,.8);transition:transform .15s ease,background .15s ease}
#faq summary::before{content:"";position:absolute;left:-7px;bottom:0;width:16px;height:14px;background:inherit;clip-path:polygon(100% 0,100% 100%,0 100%)}
#faq summary:hover{transform:translateY(-2px);color:#161616}
#faq summary:active{transform:translateY(1px)}
#faq details[open] summary{color:#161616}
#faq summary .qt{flex:0 1 auto;padding-right:2px}
#faq summary::after{width:28px;height:28px;font-size:1.2rem}
#faq details p{position:relative;margin:12px 0 4px auto;width:fit-content;max-width:min(92%,34rem);padding:14px 18px;background:#2C2C2C;border:1px solid #444;color:#fff;border-radius:22px 22px 5px 22px;font-size:1.05rem;line-height:1.5}
#faq details p::before{content:"DA Locksmiths";display:block;margin-bottom:4px;font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sun)}
#faq details{width:100%}
@media (max-width:520px){#faq summary{padding:7px 9px;min-height:50px}#faq details p{padding:12px 15px;font-size:1rem;max-width:94%}}
/* ===== FAQ as a rolling conversation ===== */
.chat{display:flex;flex-direction:column;gap:18px;min-width:0}
.chat .stage{display:grid;gap:26px}
.chat .qa{display:flex;flex-direction:column;gap:14px;min-width:0}
.chat .q{position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:12px;max-width:100%;min-height:56px;margin:0;padding:8px 20px 8px 10px;background:#fff;color:#161616;border-radius:22px 22px 22px 5px;font-family:var(--display);font-weight:700;font-size:1.4rem;line-height:1.1;text-transform:uppercase;box-shadow:0 10px 20px -10px rgba(0,0,0,.8)}
.chat .q::before{content:"";position:absolute;left:-7px;bottom:0;width:16px;height:14px;background:#fff;clip-path:polygon(100% 0,100% 100%,0 100%)}
.chat .qi{flex:none;width:38px;height:38px;border-radius:50%;background:#161616;color:#fff;display:flex;align-items:center;justify-content:center}
.chat .qi svg{width:19px;height:19px;stroke-width:1.6}
.chat .reply{position:relative;display:flex;justify-content:flex-end}
.chat .a{margin:0;max-width:min(94%,34rem);padding:14px 18px;background:#2C2C2C;border:1px solid #444;color:#fff;border-radius:22px 22px 5px 22px;font-size:1.08rem;line-height:1.5}
.chat .a::before{content:"DA Locksmiths";display:block;margin-bottom:4px;font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sun)}
.chat .tdots{display:none;position:absolute;right:0;top:0;gap:5px;padding:15px 18px;background:#2C2C2C;border:1px solid #444;border-radius:22px 22px 5px 22px}
.chat .tdots i{width:8px;height:8px;border-radius:50%;background:#B9B9B9;animation:tdot 1s ease-in-out infinite}
.chat .tdots i:nth-child(2){animation-delay:.15s}.chat .tdots i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}}
@keyframes bub{from{opacity:0;transform:translateY(14px) scale(.96)}}
.chat-nav{display:none;align-items:center;justify-content:center;gap:14px}
.chat.live .stage{gap:0}
.chat.live .qa{grid-area:1/1;visibility:hidden}
.chat.live .qa.on{visibility:visible}
.chat.live .qa.on .q{animation:bub .35s cubic-bezier(.2,.8,.2,1) backwards;transform-origin:left bottom}
.chat.live .a{visibility:hidden}
.chat.live .qa.on.typing .tdots{display:flex;animation:bub .25s ease-out backwards}
.chat.live .qa.on.answered .a{visibility:visible;animation:bub .35s cubic-bezier(.2,.8,.2,1) backwards;transform-origin:right bottom}
.chat.live .chat-nav{display:flex}
.cdots{display:flex;gap:9px;align-items:center}
.cdots button{width:11px;height:11px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.28);cursor:pointer;transition:background .2s ease,width .2s ease}
.cdots button.on{background:var(--sun);width:28px;border-radius:6px}
.cn{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.45);background:none;color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding-bottom:4px}
.cn:hover{background:#fff;color:#161616}
@media (max-width:520px){.chat .q{font-size:1.2rem;min-height:52px;padding:7px 16px 7px 9px}.chat .a{font-size:1rem;padding:12px 15px}.chat .qi{width:34px;height:34px}}
/* ===== Trust strip v5: site colours (white + orange), each promise spotlit and ticked off in turn ===== */
.trust.band{background:radial-gradient(70% 140% at 50% 0%,rgba(236,102,8,.14),transparent 60%),#161616}
.trust.band::before{height:3px;background:linear-gradient(90deg,transparent 0%,#EC6608 15%,#FF8A33 50%,#EC6608 85%,transparent 100%)}
.trust.band .t .ti{position:relative;border:2px solid #fff;background:linear-gradient(180deg,#FFFFFF 0%,#F3F1EC 60%,#E2DFD8 100%);color:#161616;box-shadow:0 4px 0 #8F8B83,0 12px 18px -8px rgba(0,0,0,.7);transition:transform .35s cubic-bezier(.3,1.5,.5,1),box-shadow .3s ease,background .3s ease,border-color .3s ease,color .3s ease,opacity .3s ease}
.trust.band .ti svg{stroke-width:1.9}
.trust.band b{background:none;-webkit-text-fill-color:currentColor;color:#fff;transition:color .3s ease,opacity .3s ease}
.trust.band .tkb{position:absolute;right:-7px;top:-7px;width:22px;height:22px;border-radius:50%;background:var(--sun);border:2px solid #161616;display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.7,.5,1)}
.trust.band .tkb svg{width:13px;height:13px;fill:none;stroke:#161616;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .35s ease .2s}
.trust.band .t.done .tkb{transform:scale(1)}
.trust.band .t.done .tkb svg{stroke-dashoffset:0}
.trust.band.roll .t:not(.hot):not(.done) .ti{background:#232323;border-color:#4A4A4A;color:#BDBDBD;box-shadow:none}
.trust.band.roll .t:not(.hot):not(.done) b{opacity:.55}
.trust.band.roll .t.hot .ti{transform:scale(1.16);box-shadow:0 4px 0 #9A3F00,0 0 0 5px rgba(236,102,8,.35),0 0 26px rgba(255,122,26,.7)}
.trust.band.roll .t.hot b{color:var(--sun-hi)}
.trust-live [data-tl]{display:inline-block}
.trust-live [data-tl].swap{animation:bub .35s ease-out backwards}
.trust-live{color:#fff}
.trust.band .trust-live{color:#EDEDED;font-weight:500}
/* Trust strip: lights up green, bigger tick */
.trust.band .tkb{right:-11px;top:-11px;width:30px;height:30px;background:#22C55E;border:2.5px solid #161616;box-shadow:0 0 12px rgba(34,197,94,.7)}
.trust.band .tkb svg{width:18px;height:18px;stroke:#fff;stroke-width:3.6}
.trust.band.roll .t.hot .ti{box-shadow:0 4px 0 #15803D,0 0 0 5px rgba(34,197,94,.4),0 0 30px rgba(34,197,94,.85)}
.trust.band.roll .t.hot b{color:#4ADE80}
.trust.band.roll .t.done .ti{border-color:#22C55E}
@media (max-width:700px){.trust.band .tkb{right:-12px;top:-10px;width:28px;height:28px}.trust.band .tkb svg{width:17px;height:17px}}
/* Trust strip: spotlight grows more, and the word grows with it */
.trust.band b{transition:color .3s ease,opacity .3s ease,transform .35s cubic-bezier(.3,1.5,.5,1);transform-origin:50% 0}
.trust.band.roll .t.hot .ti{transform:scale(1.32)}
.trust.band.roll .t.hot b{transform:translateY(7px) scale(1.28)}
.trust.band.roll .t.hot{position:relative;z-index:2}
@media (min-width:701px){.trust.band b{transform-origin:0 50%}.trust.band.roll .t.hot b{transform:translateX(14px) scale(1.18)}.trust.band.roll .t.hot .ti{transform:scale(1.25)}}
@media (max-width:700px){.trust.band > .wrap{padding-block:30px 16px!important}.trust-live{margin-top:28px}}
/* Trust strip: the rolling line underneath in green and larger */
.trust.band .trust-live{color:#4ADE80;font-size:1.15rem;font-weight:600;letter-spacing:.01em}
.trust.band .trust-live .live-dot{display:none}
/* Trust strip: the rolling line underneath in green and larger */
.trust.band .trust-live{color:#4ADE80;font-size:1.3rem;font-weight:600;letter-spacing:.01em}
.trust.band .trust-live [data-tl]{color:#4ADE80;font-size:inherit}
.trust.band .trust-live{font-size:min(1.2rem,4.7vw)}
/* Trust strip sequence: start white, light up orange, green tick, stay lit */
.trust.band.roll .t:not(.hot):not(.done) .ti{border:2px solid #fff;background:linear-gradient(180deg,#FFFFFF 0%,#F3F1EC 60%,#E2DFD8 100%);color:#161616;box-shadow:0 4px 0 #8F8B83,0 12px 18px -8px rgba(0,0,0,.7)}
.trust.band.roll .t:not(.hot):not(.done) b{opacity:1}
.trust.band.roll .t.hot .ti,.trust.band.roll .t.done .ti{background:linear-gradient(180deg,#FF8A33 0%,#EC6608 60%,#DD5C00 100%);border-color:#FFB277;color:#161616}
.trust.band.roll .t.done .ti{box-shadow:0 4px 0 #9A3F00,0 0 18px rgba(236,102,8,.55)}
.trust.band.roll .t.hot .ti{box-shadow:0 4px 0 #9A3F00,0 0 0 5px rgba(236,102,8,.4),0 0 32px rgba(255,122,26,.9)}
.trust.band.roll .t.hot b,.trust.band.roll .t.done b{color:var(--sun-hi)}
/* Trust strip: icons always orange; each one pops large with a green ring and ripple, gets ticked, and keeps its ring */
.trust.band{--hs:1.34}
@media (min-width:701px){.trust.band{--hs:1.25}}
.trust.band .t .ti,.trust.band.roll .t:not(.hot):not(.done) .ti{background:linear-gradient(180deg,#FF8A33 0%,#EC6608 60%,#DD5C00 100%);border:2px solid #FFB277;color:#161616;box-shadow:0 4px 0 #9A3F00,0 12px 18px -8px rgba(0,0,0,.7)}
.trust.band.roll .t.done .ti{border-color:#FFB277;box-shadow:0 0 0 3px #161616,0 0 0 6px #22C55E,0 0 16px rgba(34,197,94,.45)}
.trust.band.roll .t.hot .ti{border-color:#FFB277;box-shadow:0 0 0 3px #161616,0 0 0 7px #22C55E,0 0 34px rgba(34,197,94,.9);transform:scale(var(--hs));animation:tpop .7s cubic-bezier(.3,1.4,.5,1) both}
@keyframes tpop{0%{transform:scale(1) rotate(0)}35%{transform:scale(calc(var(--hs) + .22)) rotate(-8deg)}60%{transform:scale(calc(var(--hs) - .08)) rotate(5deg)}100%{transform:scale(var(--hs)) rotate(0)}}
.trust.band .ti::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:3px solid #22C55E;opacity:0;pointer-events:none}
.trust.band.roll .t.hot .ti::after{animation:tripple 1s ease-out .15s 2}
@keyframes tripple{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.75)}}
.trust.band.roll .t b,.trust.band.roll .t.done b{color:#fff}
.trust.band.roll .t.hot b{color:#4ADE80}
/* Trust strip staging: icon grows first with a ring that draws itself, then the word follows, then tick + burst */
.trust.band .ti svg.ring{position:absolute;left:-9px;top:-9px;width:calc(100% + 18px)!important;height:calc(100% + 18px)!important;transform:rotate(-90deg);fill:none;stroke:#22C55E;stroke-width:3.2!important;stroke-linecap:round;stroke-dasharray:176;stroke-dashoffset:176;filter:drop-shadow(0 0 4px rgba(34,197,94,.9));pointer-events:none}
.trust.band.roll .t.hot svg.ring{stroke-dashoffset:0;transition:stroke-dashoffset .75s cubic-bezier(.6,0,.3,1) .25s}
.trust.band.roll .t.done svg.ring{stroke-dashoffset:0}
.trust.band.roll .t.done .ti{box-shadow:0 4px 0 #9A3F00,0 12px 18px -8px rgba(0,0,0,.7)}
.trust.band.roll .t.hot .ti{box-shadow:0 4px 0 #9A3F00,0 0 34px rgba(255,122,26,.95)}
.trust.band.roll .t.hot .ti::after{animation:none}
.trust.band.roll .t.done .ti::after{animation:tripple .9s ease-out 1}
.trust.band .ti::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;opacity:0;pointer-events:none;box-shadow:0 -46px 0 #4ADE80,33px -33px 0 #FFB277,46px 0 0 #4ADE80,33px 33px 0 #FFB277,0 46px 0 #4ADE80,-33px 33px 0 #FFB277,-46px 0 0 #4ADE80,-33px -33px 0 #FFB277}
.trust.band.roll .t.done .ti::before{animation:tburst .75s cubic-bezier(.1,.7,.3,1) 1}
@keyframes tburst{0%{opacity:1;transform:scale(.35) rotate(0)}70%{opacity:1}100%{opacity:0;transform:scale(1.35) rotate(25deg)}}
.trust.band.roll .t.hot b{color:#fff;transform:none}
.trust.band.roll .t.hot.say b{color:#4ADE80;transform:translateY(9px) scale(1.28)}
@media (min-width:701px){.trust.band.roll .t.hot.say b{transform:translateX(14px) scale(1.18)}}
/* ===== Options: tap to choose, then confirm with one clear Book button ===== */
.help{touch-action:manipulation}
@media (hover:none){.help:not(.urgent):hover{transform:none;background:linear-gradient(180deg,#FFFFFF 0%,#F3F1EC 60%,#E2DFD8 100%);box-shadow:0 6px 0 #8F8B83,0 16px 22px -10px rgba(0,0,0,.8),inset 0 1px 0 #fff}}
.help:not(.urgent):active{transform:translateY(2px)}
.help:not(.urgent).sel,.help:not(.urgent).sel:hover{transform:none;background:linear-gradient(180deg,#FF8A33 0%,var(--sun) 55%,#DD5C00 100%);box-shadow:0 6px 0 #9A3F00,0 0 0 3px #fff,0 16px 26px -8px rgba(236,102,8,.6)}
.help:not(.urgent).sel .ht b::before{content:"\2713\00a0"}
.pick-bar{display:flex;align-items:center;gap:14px;padding:12px 12px 12px 18px;border:2px dashed #4A4A4A;border-radius:12px;background:rgba(255,255,255,.04);transition:border-color .25s ease,background .25s ease,box-shadow .25s ease}
.pick-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pick-txt b{font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1.1;text-transform:uppercase;color:#BDBDBD}
.pick-txt span{font-size:.95rem;line-height:1.3;color:var(--on-navy-muted)}
.pick-go{flex:none;min-height:54px;padding:0 20px;gap:8px}
.pick-go .arr{font-size:1.3em;line-height:1;transition:transform .2s ease}
.pick-go:disabled{background:#3A3A3A;color:#8A8A8A;box-shadow:none;cursor:not-allowed;animation:none}
.pick-go:disabled::after{display:none}
.pick-bar.on{border:2px solid var(--sun);background:rgba(236,102,8,.12);box-shadow:0 0 0 4px rgba(236,102,8,.18);animation:bub .3s ease-out}
.pick-bar.on .pick-txt b{color:#fff}
.pick-bar.on .pick-txt span{color:#E6E6E6}
.pick-bar.on .pick-go .arr{animation:nudge 1.1s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:none}50%{transform:translateX(5px)}}
body.booking .pick-bar{display:none}
body.booking .ask-hero .focus,body.booking #book{animation:bookin .4s ease-out backwards}
body.booking #book{animation-delay:.08s}
@keyframes bookin{from{opacity:0;transform:translateY(18px)}}
@media (max-width:560px){.pick-bar{padding:10px 10px 10px 14px;gap:10px}.pick-txt b{font-size:1.15rem}.pick-txt span{font-size:.86rem}.pick-go{min-height:50px;padding:0 14px}}
/* ===== Colour roles: orange = the action. Options are quiet choices; the chosen one turns white; Book is the one orange button ===== */
.help:not(.urgent),.help:not(.urgent):hover{background:#262626;color:#fff;border:2px solid #5C5C5C;box-shadow:0 4px 0 #0B0B0B;transform:none}
@media (hover:hover){.help:not(.urgent):hover{border-color:#fff;background:#303030}}
@media (hover:none){.help:not(.urgent):hover{background:#262626;box-shadow:0 4px 0 #0B0B0B}}
.help:not(.urgent):active{transform:translateY(2px);box-shadow:0 2px 0 #0B0B0B}
.help:not(.urgent).sel,.help:not(.urgent).sel:hover{background:#fff;color:#161616;border:2px solid #fff;box-shadow:0 4px 0 #8F8B83,0 0 0 3px var(--sun);transform:none}
.help:not(.urgent).sel .ht b::before{content:"\2713\00a0";color:var(--sun)}
.helps{gap:12px 10px}
.help:not(.urgent).sel .ht b::before{content:none}
.help:not(.urgent).sel::after{content:"\2713";display:flex;position:absolute;right:-8px;top:-10px;width:24px;height:24px;margin:0;border:2px solid #161616;border-radius:50%;background:var(--sun);color:#161616;font-size:.85rem;font-weight:800;align-items:center;justify-content:center;transform:none}
@media (max-width:560px){
  .pick-bar{flex-direction:column;align-items:stretch;gap:10px;padding:12px}
  .pick-go{width:100%;justify-content:center}
  .pick-bar:not(.on) .pick-txt{text-align:center}
}
/* ===== Easy for every age: bigger text and targets, plain instructions, strong contrast ===== */
.step-lab{grid-column:1/-1;margin:6px 0 0;font-size:1.15rem;line-height:1.3;color:#E6E6E6}
.step-lab b{color:#fff;font-weight:700}
body.booking .step-lab{display:none}
.help:not(.urgent){min-height:64px}
.help:not(.urgent) b{font-size:1.35rem}
.help small{font-size:1.02rem}
.pick-txt span{font-size:1.05rem;color:#DADADA}
.pick-txt b{color:#E0E0E0}
.pick-go{min-height:60px;font-size:1.35rem}
.pick-go.off{background:#3A3A3A;color:#C4C4C4;box-shadow:none;animation:none}
.pick-go.off::after{display:none}
.pick-bar.ask{border-color:#fff;animation:shake .4s ease}
.pick-bar.ask .pick-txt b{color:#fff}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.ask-hero .mini-ticks{font-size:1rem;color:#D6D6D6}
.focus-back{min-height:48px;padding:10px 18px;font-size:1.1rem}
@media (max-width:560px){
  .step-lab{font-size:1.08rem}
  .help:not(.urgent){min-height:60px}
  .help:not(.urgent) b{font-size:clamp(1.05rem,4.9vw,1.3rem)}
  .pick-txt b{font-size:1.25rem}
  .pick-txt span{font-size:1rem}
  .ask-hero .mini-ticks{font-size:.98rem}
  .chat .a{font-size:1.06rem}
  .trust.band b{font-size:min(1.05rem,3.8vw)}
}
.help:not(.urgent) b{text-overflow:clip}
/* ===== No grey: options are white, the chosen one gets the orange ring, Book stays orange ===== */
.help:not(.urgent),.help:not(.urgent):hover{background:linear-gradient(180deg,#FFFFFF 0%,#F6F4EF 60%,#E8E5DE 100%);color:#161616;border:2px solid #fff;box-shadow:0 5px 0 #A9A59C,0 14px 20px -10px rgba(0,0,0,.8);transform:none}
@media (hover:hover){.help:not(.urgent):hover{border-color:var(--sun)}}
@media (hover:none){.help:not(.urgent):hover{background:linear-gradient(180deg,#FFFFFF 0%,#F6F4EF 60%,#E8E5DE 100%);box-shadow:0 5px 0 #A9A59C,0 14px 20px -10px rgba(0,0,0,.8)}}
.help:not(.urgent):active{transform:translateY(3px);box-shadow:0 2px 0 #A9A59C}
.help:not(.urgent).sel,.help:not(.urgent).sel:hover{background:#fff;color:#161616;border:2px solid var(--sun);box-shadow:0 5px 0 #9A3F00,0 0 0 4px var(--sun),0 0 26px rgba(236,102,8,.65);transform:none}
.helps:has(.sel) .help:not(.urgent):not(.sel){opacity:.6}
.pick-bar{border:2px dashed rgba(236,102,8,.6);background:rgba(236,102,8,.06)}
.pick-txt b{color:#fff}
.pick-txt span{color:#E6E6E6}
.pick-go.off{background:transparent;color:var(--sun-hi);border:2px solid var(--sun);box-shadow:none}
.pick-bar.on{border:2px solid var(--sun)}
.helps:has(.sel) .help:not(.urgent):not(.sel){opacity:1}
/* ===== Calm and obvious: soft off-white choices with a familiar round selector, plain readable lettering, no flashing ===== */
.help.urgent,.helps .help:nth-child(1){animation:none}
.help.urgent::after{animation:none;display:none}
.help.urgent{box-shadow:0 5px 0 #9A3F00,0 14px 22px -10px rgba(0,0,0,.7)}
.helps{gap:10px}
.help:not(.urgent),.help:not(.urgent):hover{justify-content:flex-start;text-align:left;gap:10px;min-height:60px;padding:10px 12px;background:#F5F2EB;color:#1B1B1B;border:2px solid #F5F2EB;border-radius:12px;box-shadow:0 3px 0 #BDB8AE;transform:none}
.help:not(.urgent)::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;border:2px solid #7D786E;background:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;line-height:1;color:#fff;transition:background .15s ease,border-color .15s ease}
.help:not(.urgent) b{font-family:var(--body);font-weight:600;font-size:1.15rem;letter-spacing:0;text-transform:none;text-align:left;line-height:1.2}
@media (hover:hover){.help:not(.urgent):hover{border-color:var(--sun);background:#fff}}
@media (hover:none){.help:not(.urgent):hover{background:#F5F2EB;box-shadow:0 3px 0 #BDB8AE}}
.help:not(.urgent):active{transform:translateY(2px);box-shadow:0 1px 0 #BDB8AE}
.help:not(.urgent).sel,.help:not(.urgent).sel:hover{background:#FFF1E4;color:#1B1B1B;border:2px solid var(--sun);box-shadow:0 3px 0 #9A3F00;transform:none}
.help:not(.urgent).sel::before{content:"\2713";background:var(--sun);border-color:var(--sun)}
.help:not(.urgent).sel::after{display:none}
.step-lab{font-size:1.15rem;color:#F0F0F0}
.pick-bar,.pick-bar.on{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);box-shadow:none;border-radius:12px}
.pick-bar.on{border-color:var(--sun)}
.pick-txt b{font-family:var(--body);font-weight:700;font-size:1.2rem;text-transform:none;letter-spacing:0}
.pick-txt span{font-size:1.02rem}
.pick-go{box-shadow:0 4px 0 #9A3F00}
.pick-go.off{border:2px solid rgba(255,255,255,.5);color:#fff;background:transparent;box-shadow:none}
@media (max-width:560px){.help:not(.urgent){min-height:58px;padding:9px 10px;gap:9px}.help:not(.urgent) b{font-size:clamp(1rem,4.5vw,1.15rem)}.help:not(.urgent)::before{width:22px;height:22px}}
/* "I'm locked out": an orange panel with a clear white button inside it */
.help.urgent{flex-direction:column;justify-content:center;gap:0;min-height:0;padding:16px 16px 18px!important;border-radius:14px;box-shadow:0 6px 0 #9A3F00,0 16px 24px -10px rgba(0,0,0,.7)}
.help.urgent .go{display:none}
.help.urgent .ht{align-items:center;gap:12px;width:100%}
.help.urgent b{font-size:clamp(1.9rem,7vw,2.4rem);line-height:1}
.help.urgent small{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:26rem;min-height:56px;padding:8px 16px;border-radius:999px;background:#fff;color:#161616;font-family:var(--body);font-weight:700;font-size:1.2rem;opacity:1;box-shadow:0 4px 0 rgba(0,0,0,.38);white-space:nowrap;transition:transform .12s ease,box-shadow .12s ease}
.help.urgent small svg{width:22px;height:22px;flex:none;color:var(--ocean)}
.help.urgent:active{transform:translateY(3px);box-shadow:0 3px 0 #9A3F00}
.help.urgent:active small{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.38)}
@media (hover:hover){.help.urgent:hover small{background:#161616;color:#fff}.help.urgent:hover small svg{color:var(--sun-hi)}}
@media (prefers-reduced-motion:no-preference){.help.urgent small svg{animation:ring 4.2s ease-in-out infinite}}
@media (max-width:560px){.help.urgent small{font-size:min(1.15rem,4.6vw);min-height:54px;padding:8px 10px}}
/* "Locked out?" panel: clear white call button, nothing orange hiding behind it */
.need-main::after{right:-170px;bottom:auto;top:-230px;opacity:.9}
.call-pill{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:64px;padding:10px 30px;border-radius:999px;background:#fff;color:#161616;font-family:var(--body);font-weight:700;font-size:1.3rem;line-height:1.1;text-decoration:none;white-space:nowrap;box-shadow:0 5px 0 var(--sun),0 16px 26px -10px rgba(0,0,0,.8);transition:transform .12s ease,box-shadow .12s ease,background .15s ease,color .15s ease;touch-action:manipulation}
.call-pill svg{width:24px;height:24px;flex:none;color:var(--ocean)}
.call-pill:active{transform:translateY(4px);box-shadow:0 1px 0 var(--sun)}
@media (hover:hover){.call-pill:hover{background:var(--sun);color:#161616;box-shadow:0 5px 0 #9A3F00,0 16px 26px -10px rgba(0,0,0,.8)}.call-pill:hover svg{color:#161616}}
@media (prefers-reduced-motion:no-preference){.call-pill svg{animation:ring 4.2s ease-in-out infinite}}
.need-main .need-actions{flex-direction:column;align-items:flex-start;gap:18px}
@media (max-width:560px){.call-pill{width:100%;font-size:min(1.25rem,5vw);padding:10px 16px}}
.need-main::after{display:none}.need-main{border-top:5px solid var(--sun)}
/* Brands: one white band, logos sit straight on it (no tiles) and roll slowly past */
.brandbox{background:#fff;border:0;border-radius:14px;padding:22px 0 18px;overflow:hidden;gap:10px}
.brandbox h3{color:#161616;padding:0 22px;font-size:1.25rem;letter-spacing:.04em}
.brand-roll{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.brand-roll .brands{flex-wrap:nowrap;gap:0;width:max-content;align-items:center}
.brand-roll .brands li,.brand-roll .brands li.logo,.brand-roll .brands li.logo.dark{flex:none;width:168px;min-height:76px;padding:0 24px;background:none;border:0;border-radius:0;color:#161616}
.brand-roll .brands li.logo img{max-height:54px;mix-blend-mode:multiply}
.brand-roll .brands li.logo.dark img{filter:invert(1) hue-rotate(180deg) saturate(1.3)}
@keyframes brandroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:no-preference){.brand-roll .brands{animation:brandroll 34s linear infinite}}
@media (prefers-reduced-motion:reduce){.brand-roll{-webkit-mask-image:none;mask-image:none}.brand-roll .brands{flex-wrap:wrap;width:auto;justify-content:center}.brand-roll .brands li[aria-hidden]{display:none}}
@media (max-width:560px){.brand-roll .brands li,.brand-roll .brands li.logo,.brand-roll .brands li.logo.dark{width:140px;padding:0 18px;min-height:68px}}
.brand-roll .brands li.logo.dark img{filter:invert(1) hue-rotate(180deg) brightness(1.1) contrast(1.15) saturate(1.3)}
/* Brands: no white band. Logos blend into the dark page and roll past */
.brandbox{background:none;border:0;border-top:1px solid #333;border-bottom:1px solid #333;border-radius:0;padding:22px 0 18px}
.brandbox h3{color:#fff;padding:0;text-align:center}
.brand-roll .brands{background:#161616}
.brand-roll .brands li,.brand-roll .brands li.logo,.brand-roll .brands li.logo.dark{color:#fff}
.brand-roll .brands li.logo img{mix-blend-mode:screen;filter:invert(1) hue-rotate(180deg) contrast(1.15) saturate(1.2)}
.brand-roll .brands li.logo.dark img{filter:contrast(1.2) brightness(.95)}
/* Services on phones: compact rows (photo left, words right) so the list is quick to scan */
@media (max-width:560px){
  #services{padding-top:36px!important}
  .needs{gap:10px}
  .need:not(.need-other){flex-direction:row;align-items:stretch;min-height:104px}
  .need:not(.need-other) img{width:104px;flex:none;aspect-ratio:auto;height:auto;align-self:stretch}
  .need:not(.need-other) .body{padding:12px 34px 12px 14px;gap:4px;justify-content:center;position:relative}
  .need:not(.need-other) h3{font-size:1.25rem}
  .need:not(.need-other) p{font-size:.98rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .need:not(.need-other) .more{position:absolute;right:12px;top:50%;margin:-9px 0 0;padding:0;border:0;width:10px;height:10px;font-size:0;border-top:3px solid var(--sun);border-right:3px solid var(--sun);border-radius:0;transform:rotate(45deg);background:none}
}
/* "Still not sure? Ask David" comes after the questions on phones and tablets; clean buttons */
#faq .ask::after{display:none}
#faq .ask-btns{gap:12px;align-items:center}
#faq .ask .call-pill{min-height:56px;font-size:1.15rem;padding:8px 24px}
#faq .ask .btn-ghost{min-height:56px;border-radius:999px;padding:0 22px}
@media (max-width:900px){
  #faq .faq{gap:12px}
  #faq .faq-side{display:contents}
  #faq .chat{order:2;margin-top:12px}
  #faq .ask{order:3;margin-top:22px}
}
@media (max-width:520px){#faq .ask .call-pill,#faq .ask .btn-ghost{width:100%;flex:none}}
/* Services on phones: slim rows so most of the list shows on one screen */
@media (max-width:560px){
  #services .section-head{margin-bottom:14px}
  #services .section-head .lede{display:none}
  .needs{gap:8px}
  .need:not(.need-other){min-height:0;height:78px;align-items:center}
  .need:not(.need-other) img{width:78px;height:78px;aspect-ratio:auto;align-self:auto;object-fit:cover}
  .need:not(.need-other) .body{padding:6px 34px 6px 14px;gap:2px;min-width:0}
  .need:not(.need-other) h3{font-size:1.18rem;line-height:1.05}
  .need:not(.need-other) h3 br{display:none}
  .need:not(.need-other) p{font-size:.95rem;line-height:1.3;-webkit-line-clamp:1}
  .need:not(.need-other) .more,.need:not(.need-other):hover .more,.need:not(.need-other):active .more{background:none;color:transparent;border-left:0;border-bottom:0}
  .need-other .body{padding:14px 16px;gap:8px}
}
@media (max-width:560px){
  .need:not(.need-other){height:auto;min-height:78px;align-items:stretch}
  .need:not(.need-other) img{height:auto;min-height:78px;align-self:stretch}
  .need:not(.need-other) .body{padding-block:8px}
}
/* Services on phones: photo tiles, two across, with a short plain label on each */
.need h3 .sm{display:none}
@media (max-width:560px){
  .needs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .need:not(.need-other){position:relative;display:block;height:auto;min-height:0;aspect-ratio:4/3;border:0;border-radius:12px;overflow:hidden;background:#161616}
  .need:not(.need-other):nth-of-type(7){grid-column:1/-1;aspect-ratio:8/3}
  .need:not(.need-other) img{position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:cover}
  .need:not(.need-other) .body{position:absolute;inset:0;padding:10px 12px;justify-content:flex-end;gap:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.82) 100%)}
  .need:not(.need-other) h3{font-family:var(--body);font-weight:700;font-size:1.12rem;line-height:1.15;text-transform:none;letter-spacing:0;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
  .need h3 .lg{display:none}.need h3 .sm{display:inline}
  .need:not(.need-other) p,.need:not(.need-other) .more{display:none}
  .need-other{grid-column:1/-1}
}
/* Brands: pure black strip so the logos sit on it cleanly in every browser */
.brandbox{background:#000;border:1px solid #2A2A2A;border-radius:12px;padding:20px 0 16px}
.brand-roll .brands{background:#000}
/* ===== One call button everywhere: green pill, white phone badge, "Call now" ===== */
.callbtn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:7px 26px 7px 9px;border-radius:999px;background:linear-gradient(180deg,#27BD5C 0%,#1C9E49 55%,#16833C 100%);color:#fff;font-family:var(--display);font-weight:800;font-size:1.45rem;line-height:1;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;white-space:nowrap;box-shadow:0 5px 0 #0C5425,0 14px 22px -10px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .12s ease,box-shadow .12s ease,filter .15s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.callbtn .cb-i{flex:none;width:42px;height:42px;border-radius:50%;background:#fff;color:#16833C;display:flex;align-items:center;justify-content:center}
.callbtn .cb-i svg{width:21px;height:21px}
.callbtn .cl{display:none}
.callbtn:active{transform:translateY(4px);box-shadow:0 1px 0 #0C5425}
@media (hover:hover){.callbtn:hover{filter:brightness(1.08)}}
@media (min-width:900px) and (hover:hover){.callbtn .cs{display:none}.callbtn .cl{display:inline}}
@media (prefers-reduced-motion:no-preference){.callbtn .cb-i svg{animation:ring 4.2s ease-in-out infinite}}
.callbtn.lg{min-height:64px;font-size:1.6rem;padding:8px 32px 8px 10px}
.callbtn.lg .cb-i{width:46px;height:46px}
.callbtn.sm{min-height:48px;font-size:1.2rem;padding:5px 18px 5px 6px;gap:9px;box-shadow:0 4px 0 #0C5425}
.callbtn.sm .cb-i{width:36px;height:36px}.callbtn.sm .cb-i svg{width:18px;height:18px}
.callbar .callbtn{width:100%;min-height:52px;font-size:1.2rem;padding:4px 12px 4px 6px;gap:8px;box-shadow:0 4px 0 #0C5425}
.callbar .callbtn .cb-i{width:38px;height:38px}
@media (max-width:560px){.callbtn.lg{font-size:1.45rem;min-height:60px}.need-main .callbtn,.ask .callbtn,.sos .callbtn{width:100%}}
@media (max-width:400px){.callbtn.sm{font-size:1.05rem;padding-right:14px}}
/* hero: locked-out panel is one slim row: title left, call button right */
.help.urgent{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 18px!important}
.help.urgent .ht{width:auto;align-items:flex-start;gap:0}
.help.urgent b{font-size:clamp(1.5rem,6vw,2.1rem);white-space:nowrap}
.help.urgent .callbtn{flex:none;box-shadow:0 4px 0 #0C5425}
@media (max-width:560px){.help.urgent .callbtn.lg{min-height:52px;font-size:1.25rem;padding:5px 18px 5px 6px}.help.urgent .callbtn .cb-i{width:40px;height:40px}}
@media (max-width:360px){.help.urgent b{font-size:1.3rem}.help.urgent .callbtn.lg{font-size:1.1rem;padding-right:12px}}
/* thinner option boxes */
.helps{gap:8px}
.help:not(.urgent){min-height:50px;padding:7px 10px}
.step-lab{margin:4px 0 0}
@media (max-width:560px){.help:not(.urgent){min-height:48px;padding:6px 10px}}
/* Book panel: only appears once something is chosen, tinted orange and joined to the choices */
.pick-bar{display:none}
.pick-bar.on{display:flex;border:2px solid var(--sun);background:rgba(236,102,8,.16);margin-top:-4px}
.pick-bar.on .pick-txt b,.pick-bar.on .pick-txt span{color:#fff}
/* Services on phones: thin text rows, two across, no photos */
@media (max-width:560px){
  .needs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .need:not(.need-other){position:relative;display:flex;align-items:center;aspect-ratio:auto;height:auto;min-height:50px;border:0;border-radius:12px;background:#fff;box-shadow:0 3px 0 #CFCAC0;overflow:visible}
  .need:not(.need-other):nth-of-type(7){aspect-ratio:auto}
  .need:not(.need-other) img{display:none}
  .need:not(.need-other) .body{position:static;background:none;padding:8px 28px 8px 14px;justify-content:center}
  .need:not(.need-other) h3{color:#161616;text-shadow:none;font-size:1.08rem}
  .need:not(.need-other) .body::after{content:"";position:absolute;right:13px;top:50%;width:8px;height:8px;margin-top:-5px;border-top:2.5px solid var(--sun);border-right:2.5px solid var(--sun);transform:rotate(45deg)}
  .need-other p{display:none}
  .need-other .body{padding:12px 14px;gap:10px}
}
.help.urgent .ht{flex:1;min-width:0}
.help.urgent b{white-space:normal;font-size:clamp(1.3rem,5.2vw,2.1rem);line-height:1}
@media (max-width:560px){.help.urgent .callbtn.lg{font-size:1.15rem;padding:5px 16px 5px 6px;gap:9px}.help.urgent .callbtn .cb-i{width:38px;height:38px}}
.nav .callbtn{font-weight:800;color:#fff}
.callbar .callbtn{min-width:0;font-size:1.08rem;gap:7px;padding:4px 10px 4px 5px}
.callbar .callbtn .cb-i{width:34px;height:34px}.callbar .callbtn .cb-i svg{width:17px;height:17px}
/* Call button: deeper, calmer green */
.callbtn{background:linear-gradient(180deg,#1F8A4C 0%,#187540 55%,#125E33 100%);box-shadow:0 5px 0 #0A3A20,0 14px 22px -10px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.22)}
.callbtn .cb-i{color:#125E33}
.callbtn:active{box-shadow:0 1px 0 #0A3A20}
.callbtn.sm,.callbar .callbtn,.help.urgent .callbtn{box-shadow:0 4px 0 #0A3A20}
/* ===== Outcome panel: pick an option and see what we'll do, then book, call, or read more ===== */
.pick-bar.on{flex-direction:column;align-items:stretch;gap:10px;padding:14px 14px 12px}
.pick-bar.on .pick-txt{text-align:left}
.pick-txt b{font-size:1.3rem}
.pick-txt span{font-size:1.08rem;line-height:1.35}
.pick-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.pick-ticks li{position:relative;padding-left:28px;font-size:1.02rem;line-height:1.3;color:#fff}
.pick-ticks li::before{content:"\2713";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;background:#22C55E;color:#fff;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.pick-acts{display:flex;gap:10px;align-items:stretch;margin-top:2px}
.pick-acts .pick-go{flex:1.25;min-width:0;width:auto;min-height:56px;font-size:1.3rem;padding:0 12px}
.pick-acts .callbtn{flex:1;min-width:0;min-height:56px;font-size:1.2rem;padding:5px 14px 5px 6px;gap:8px;box-shadow:0 4px 0 #0A3A20}
.pick-acts .callbtn .cb-i{width:38px;height:38px}
.pick-next{margin:0;font-size:.98rem;line-height:1.35;color:#EDEDED}
.pick-next b{color:#fff}
.pick-more{align-self:flex-start;padding:4px 0;color:#fff;font-weight:600;font-size:1.02rem;text-decoration:underline;text-underline-offset:3px}
.pick-more[hidden]{display:none}
@media (max-width:380px){.pick-acts{flex-direction:column}.pick-acts .pick-go,.pick-acts .callbtn{flex:none;width:100%}}
@media (max-width:560px){#services .eyebrow{display:block}}
@media (max-width:560px){.pick-acts .pick-go{font-size:1.18rem;gap:6px;padding:0 8px}.pick-acts .callbtn{font-size:1.08rem;padding:4px 10px 4px 5px;gap:7px}.pick-acts .callbtn .cb-i{width:34px;height:34px}.pick-acts .callbtn .cb-i svg{width:17px;height:17px}}
/* Recent jobs: photos roll slowly past; touch or hover to pause */
.job-roll{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.gallery.roll{display:flex;grid-template-columns:none;flex-wrap:nowrap;gap:14px;padding:0 14px 0 0;width:max-content;overflow:visible;scroll-snap-type:none}
.gallery.roll figure{flex:none;width:240px}
@keyframes jobroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:no-preference){.gallery.roll{animation:jobroll 76s linear infinite}.job-roll:hover .gallery.roll,.job-roll:active .gallery.roll{animation-play-state:paused}}
@media (prefers-reduced-motion:reduce){.job-roll{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.gallery.roll figure[aria-hidden]{display:none}}
@media (max-width:600px){.gallery.roll{gap:10px;padding-right:10px}.gallery.roll figure{flex:none;width:190px}.gallery.roll img{aspect-ratio:4/5}}
/* Tighter spacing between sections on phones so each one lines up under the last */
@media (max-width:600px){
  .section{padding-block:40px}
  #services{padding-block:30px 26px!important}
  #work{padding-top:8px}
  #work .section-head{margin-bottom:14px}
  #work .section-head .lede{display:none}
  .section-head{margin-bottom:20px}
}
/* Brands: no box, same background as the section around it */
.brandbox{background:none;border:0;border-top:1px solid #2E2E2E;border-radius:0;padding:22px 0 4px}
.brand-roll .brands{background:#161616}
/* Brands on white: logos in their own colours */
.brandbox{background:#fff;border:0;border-radius:14px;padding:20px 0 14px}
.brandbox h3{color:#161616}
.brand-roll .brands{background:#fff}
.brand-roll .brands li,.brand-roll .brands li.logo,.brand-roll .brands li.logo.dark{color:#161616}
.brand-roll .brands li.logo img{mix-blend-mode:multiply;filter:none}
.brand-roll .brands li.logo.dark img{filter:invert(1) hue-rotate(180deg) brightness(1.1) contrast(1.15) saturate(1.3)}
/* ===== "Locked out?" as an emergency button: red, pulsing, one obvious place to tap ===== */
.helps .help.urgent,.helps .help.urgent:hover{background:linear-gradient(180deg,#F23C2E 0%,#D3221A 58%,#B51911 100%);color:#fff;border:2px solid #FF9A91;border-radius:16px;padding:14px 12px 14px 18px!important;box-shadow:0 6px 0 #6F0D08,0 16px 26px -10px rgba(0,0,0,.8)}
.helps .help.urgent b{color:#fff;font-size:clamp(1.7rem,7vw,2.4rem);white-space:nowrap;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.help.urgent .us{display:block;margin-top:4px;font-style:normal;font-family:var(--body);font-weight:600;font-size:1rem;line-height:1.2;color:#FFE5E2}
.helps .help.urgent .callbtn{background:#fff;color:#B51911;box-shadow:0 4px 0 #6F0D08}
.helps .help.urgent .callbtn .cb-i{background:#D3221A;color:#fff}
.helps .help.urgent:active{transform:translateY(4px);box-shadow:0 2px 0 #6F0D08}
@keyframes sospulse{0%{box-shadow:0 6px 0 #6F0D08,0 0 0 0 rgba(242,60,46,.75)}70%,100%{box-shadow:0 6px 0 #6F0D08,0 0 0 16px rgba(242,60,46,0)}}
@keyframes sosbtn{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:no-preference){
  .helps .help.urgent{animation:sospulse 1.7s ease-out infinite}
  .helps .help.urgent .callbtn{animation:sosbtn 1.7s ease-in-out infinite}
}
@media (max-width:560px){.helps .help.urgent b{font-size:clamp(1.5rem,6.6vw,2rem)}.help.urgent .us{font-size:.95rem}}
@media (max-width:360px){.helps .help.urgent b{font-size:1.35rem}.help.urgent .us{font-size:.85rem}}
@media (max-width:560px){
  .helps .help.urgent{flex-direction:column;align-items:stretch;gap:10px;padding:12px 12px 14px!important;text-align:center}
  .helps .help.urgent .ht{align-items:center;flex:none}
  .helps .help.urgent .ht{flex-direction:row;justify-content:center;align-items:baseline;gap:10px;flex-wrap:wrap}
  .helps .help.urgent b{font-size:clamp(1.7rem,7.4vw,2.2rem)}
  .help.urgent .us{margin-top:0}
  .helps .help.urgent .callbtn.lg{width:100%;min-height:58px;font-size:1.5rem;padding:6px 20px 6px 8px;gap:12px}
  .helps .help.urgent .callbtn .cb-i{width:44px;height:44px}
  @keyframes sosbtn{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
}
@media (min-width:561px){.helps .help.urgent .callbtn.lg{font-size:1.25rem;min-height:56px;padding:6px 22px 6px 8px}.helps .help.urgent b{font-size:clamp(1.6rem,2.6vw,2.1rem)}}
/* Phone: keep the whole top section (down to the licence line) on the first screen */
@media (max-width:560px){
  .ask-hero .status{display:none}
  .ask-hero .wrap{padding-top:12px}
  .ask-hero .stack{gap:10px!important}
  .helps .help.urgent{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 10px 14px!important;text-align:left}
  .helps .help.urgent .ht{flex:1;min-width:0;flex-direction:column;align-items:flex-start;gap:1px;flex-wrap:nowrap}
  .helps .help.urgent b{font-size:clamp(1.3rem,5.6vw,1.7rem);white-space:nowrap}
  .help.urgent .us{font-size:.86rem}
  .helps .help.urgent .callbtn.lg{width:auto;flex:none;min-height:50px;font-size:1.2rem;padding:4px 16px 4px 5px;gap:9px}
  .helps .help.urgent .callbtn .cb-i{width:40px;height:40px}
  .helps{gap:7px}
  .step-lab{margin:2px 0 0;font-size:1.02rem}
  .help:not(.urgent){min-height:44px;padding:5px 10px}
  .ask-hero .mini-ticks{padding-top:0;gap:2px 14px;font-size:.92rem}
}
/* Option boxes keep one height in every state (a touched box was growing taller) */
.help:not(.urgent),.help:not(.urgent):hover,.help:not(.urgent):focus,.help:not(.urgent):active,.help:not(.urgent).sel,.help:not(.urgent).sel:hover{min-height:50px;padding:7px 10px;gap:10px}
@media (max-width:560px){.help:not(.urgent),.help:not(.urgent):hover,.help:not(.urgent):focus,.help:not(.urgent):active,.help:not(.urgent).sel,.help:not(.urgent).sel:hover{min-height:44px;padding:5px 10px;gap:9px}}
/* ===== Clean first screen on phones: no moving banner, a calm compact trust row that fits fully ===== */
@media (max-width:700px){
  .ask-hero .ticker{display:none}
  .ask-hero .wrap{padding-bottom:16px}
  .ask-hero .hero-who{display:none}
  .trust.band{--hs:1.16}
  .trust.band > .wrap{padding-block:16px 10px!important}
  .trust.band .t .ti{width:40px;height:40px}
  .trust.band .ti svg{width:20px;height:20px}
  .trust.band .ti svg.ring{left:-7px;top:-7px;width:calc(100% + 14px)!important;height:calc(100% + 14px)!important}
  .trust.band .tkb{right:-9px;top:-8px;width:22px;height:22px;border-width:2px;box-shadow:none}
  .trust.band .tkb svg{width:13px;height:13px}
  .trust.band .t{gap:8px}
  .trust.band b{font-size:min(.98rem,3.6vw)}
  .trust.band.roll .t.hot.say b{transform:translateY(4px) scale(1.12)}
  .trust-live{margin-top:14px;padding-top:9px}
  .trust.band .trust-live{font-size:min(1.05rem,4.2vw)}
}
/* calmer effect everywhere: no wobble, no sparks, softer glow */
@keyframes tpop{0%{transform:scale(1)}60%{transform:scale(calc(var(--hs) + .06))}100%{transform:scale(var(--hs))}}
.trust.band.roll .t.done .ti::before{animation:none}
.trust.band.roll .t.done .ti::after{animation:none}
.trust.band.roll .t.hot .ti{box-shadow:0 4px 0 #9A3F00,0 0 18px rgba(255,122,26,.55)}
.trust.band .ti svg.ring{filter:none}
@media (max-width:700px){
  .ask-hero .wrap{padding-bottom:10px}
  .trust.band > .wrap{padding-block:13px 8px!important}
  .trust.band .t .ti{width:38px;height:38px}
  .trust-live{margin-top:10px;padding-top:7px}
}
/* "Locked out?" finer and clearer: slim bright-red bar, crisp white edge, plain dark behind it */
.helps .help.urgent,.helps .help.urgent:hover{background:linear-gradient(180deg,#F0323C 0%,#DC1F2B 100%);border:1.5px solid #fff;border-radius:12px;padding:8px 8px 8px 16px!important;box-shadow:0 3px 0 #7D0C14,0 10px 18px -8px rgba(0,0,0,.9)}
.helps .help.urgent b{text-shadow:none;letter-spacing:.02em}
.help.urgent .us{color:#fff;opacity:.92;font-weight:500}
.helps .help.urgent .callbtn,.helps .help.urgent .callbtn.lg{min-height:44px;font-size:1.1rem;padding:3px 16px 3px 4px;gap:8px;color:#C4141F;box-shadow:0 2px 0 #7D0C14}
.helps .help.urgent .callbtn .cb-i{width:36px;height:36px;background:#DC1F2B}
.helps .help.urgent .callbtn .cb-i svg{width:18px;height:18px}
.helps .help.urgent:active{transform:translateY(2px);box-shadow:0 1px 0 #7D0C14}
@keyframes sospulse{0%{box-shadow:0 3px 0 #7D0C14,0 0 0 0 rgba(240,50,60,.8)}70%,100%{box-shadow:0 3px 0 #7D0C14,0 0 0 9px rgba(240,50,60,0)}}
@keyframes sosbtn{0%,100%{transform:none}50%{transform:none}}
@media (max-width:560px){
  .helps .help.urgent b{font-size:clamp(1.2rem,5.2vw,1.5rem)}
  .help.urgent .us{font-size:.82rem}
  .ask-hero{background:#161616}
}
@media (min-width:561px){.helps .help.urgent,.helps .help.urgent:hover{padding:10px 10px 10px 20px!important}.helps .help.urgent .callbtn.lg{min-height:48px;font-size:1.2rem}}
@media (max-width:560px){.hero.ask-hero::before{display:none}}
/* Trust row on phones: no orange line crowding the icons; a fine divider with room above them */
@media (max-width:700px){
  .trust.band::before{height:1px;left:16px;right:16px;background:rgba(255,255,255,.14)}
  .trust.band{background:#161616}
  .trust.band > .wrap{padding-block:22px 8px!important}
}
/* Bottom bar: Text and Book as app-style buttons (message bubble, calendar tile) */
.barbtn{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:52px;padding:4px 10px 4px 6px;border-radius:999px;background:#2A2A2A;border:1px solid #454545;color:#fff;font-family:var(--display);font-weight:800;font-size:1.12rem;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;line-height:1;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,background .15s ease}
.barbtn:active{transform:translateY(2px);background:#353535}
.barbtn .bi{flex:none;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.barbtn .bi.msg{background:linear-gradient(180deg,#5FE36F 0%,#1FBF3A 100%)}
.barbtn .bi.msg svg{width:22px;height:22px}
.barbtn .bi.cal{flex-direction:column;justify-content:flex-start;background:#fff}
.barbtn .bi.cal i{display:block;width:100%;height:10px;background:#F0323C;flex:none}
.barbtn .bi.cal b{flex:1;display:flex;align-items:center;justify-content:center;font-family:var(--body);font-weight:700;font-size:1.05rem;letter-spacing:0;color:#161616;line-height:1}
body.booking .callbar .barbtn[href="#help"],body.booking .callbar .barbtn[href="#book"]{display:none}
.callbar{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr)}
@media (max-width:380px){.barbtn{font-size:1rem;gap:6px;padding-right:8px}.barbtn .bi{width:30px;height:30px}}
.barbtn{font-size:1.05rem;gap:7px;padding:4px 8px 4px 5px}.barbtn .bi{width:32px;height:32px}.callbar .callbtn{font-size:1.05rem}
/* Text / Book buttons used in the page (same look as the bottom bar, larger) */
.barbtn.lgb{display:inline-flex;min-height:58px;padding:6px 24px 6px 9px;gap:11px;font-size:1.3rem;box-shadow:0 4px 0 #000}
.barbtn.lgb .bi{width:40px;height:40px;border-radius:11px}
.barbtn.lgb .bi.msg svg{width:26px;height:26px}
.barbtn.lgb .bi.cal i{height:12px}.barbtn.lgb .bi.cal b{font-size:1.2rem}
.barbtn.lgb:active{box-shadow:0 1px 0 #000}
.need-other .barbtn{flex:1;background:#161616;border-color:#161616}
.need-actions .barbtn.lgb{min-height:50px;font-size:1.1rem;padding:5px 14px 5px 6px;gap:8px}
.need-actions .barbtn.lgb .bi{width:34px;height:34px}
@media (max-width:560px){.aside .barbtn,.aside .callbtn,.ask .barbtn,.hero-actions .barbtn,.hero-actions .callbtn{width:100%}}
/* Text / Book: same family as the call button - round white badge with a simple line icon */
.barbtn .bi,.barbtn.lgb .bi{border-radius:50%;background:#fff;color:#161616}
.barbtn .bi svg{width:17px;height:17px;stroke-width:2.2}
.barbtn.lgb .bi svg{width:21px;height:21px}
/* ===== Trust row, toned down: quiet outline icons, a small tick each, plays once and stays ===== */
.trust.band{--hs:1}
.trust.band .t .ti,.trust.band.roll .t:not(.hot):not(.done) .ti,.trust.band.roll .t.hot .ti,.trust.band.roll .t.done .ti{background:none;border:1.5px solid rgba(255,255,255,.35);color:#fff;box-shadow:none;transform:none;animation:none;transition:border-color .4s ease}
.trust.band.roll .t.hot .ti,.trust.band.roll .t.done .ti{border-color:var(--sun)}
.trust.band .ti svg{stroke-width:1.6}
.trust.band .ti svg.ring,.trust.band .ti::before,.trust.band .ti::after{display:none}
.trust.band .tkb{right:-5px;top:-5px;width:17px;height:17px;border:2px solid #161616;background:var(--sun);box-shadow:none}
.trust.band .tkb svg{width:10px;height:10px;stroke:#161616}
.trust.band.roll .t b,.trust.band.roll .t.hot b,.trust.band.roll .t.done b,.trust.band.roll .t.hot.say b{color:#fff;transform:none}
.trust.band .trust-live,.trust.band .trust-live [data-tl]{color:#CFCFCF;font-weight:400;font-size:.95rem}
.trust.band.roll .t.hot{z-index:auto}
@media (max-width:700px){.trust.band .tkb{right:-6px;top:-5px;width:17px;height:17px}.trust.band .tkb svg{width:10px;height:10px}.trust.band b{font-weight:700}}
/* Trust row: icons only (no rings), orange line art; the tick sits beside the label */
.trust.band .t .ti,.trust.band.roll .t:not(.hot):not(.done) .ti,.trust.band.roll .t.hot .ti,.trust.band.roll .t.done .ti{border:0;width:auto;height:auto;color:var(--sun-hi)}
.trust.band .ti svg{width:34px;height:34px;stroke-width:1.5}
.trust.band .tkb{display:none}
@media (max-width:700px){.trust.band .ti svg{width:30px;height:30px}.trust.band .t{gap:6px}}
.trust.band.roll .t:not(.hot):not(.done) .ti{color:#8E8E8E}
.trust.band.roll .t .ti{transition:color .5s ease}
/* ===== Orange pinstripes: faint suit-style stripes on the black areas, fine orange rules between sections ===== */
.site-header{border-bottom:0;box-shadow:0 2px 0 var(--sun),0 5px 0 #161616,0 6px 0 rgba(236,102,8,.55)}
.section.navy,#faq,.site-footer{border-top:2px solid var(--sun);box-shadow:inset 0 4px 0 #161616,inset 0 5px 0 rgba(236,102,8,.55)}
.trust.band{border-bottom:2px solid var(--sun)}
.callbar{border-top:2px solid var(--sun)}
/* ===== Dark through the middle of the page: services and recent jobs on charcoal, white cards, orange accents ===== */
#services,#work{background:#1D1D1D;color:#fff}
#services .section-head h2,#work .section-head h2{color:#fff}
#services .section-head .lede,#work .section-head .lede{color:var(--on-navy-muted)}
#services .eyebrow,#work .eyebrow{color:var(--sun-hi)}
#work{border-top:1px solid #2E2E2E}
.gallery figcaption{color:#CFCFCF}
.gallery img{background:#2A2A2A}
@media (max-width:560px){.need:not(.need-other){box-shadow:0 3px 0 rgba(0,0,0,.5)}}
@media (max-width:560px){.need-other .barbtn.lgb{min-height:50px;font-size:1.05rem;padding:5px 12px 5px 6px;gap:8px;white-space:nowrap}.need-other .barbtn.lgb .bi{width:34px;height:34px}.need-other .barbtn.lgb .bi svg{width:18px;height:18px}}
/* Footer credit */
.site-footer .credit{grid-column:1/-1;margin:0;padding-top:10px;font-size:.85rem;color:#9A9A9A;letter-spacing:.02em}
.site-footer .credit b{font-weight:600;color:#D6D6D6}
.site-footer .credit a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* ===== Crisp buttons: solid fills, clean hard edges, no soft blurred shadows ===== */
.help:not(.urgent),.help:not(.urgent):hover{background:#fff;border:2px solid #fff;box-shadow:0 3px 0 #9E9A92}
@media (hover:hover){.help:not(.urgent):hover{border-color:var(--sun)}}
@media (hover:none){.help:not(.urgent):hover{background:#fff;box-shadow:0 3px 0 #9E9A92}}
.help:not(.urgent)::before{border:2px solid #161616;background:#fff}
.help:not(.urgent) b{font-weight:700;color:#111}
.help:not(.urgent).sel,.help:not(.urgent).sel:hover{background:#fff;border:2px solid var(--sun);box-shadow:0 3px 0 #9A3F00,0 0 0 2px var(--sun)}
.help:not(.urgent).sel::before{background:var(--sun);border-color:var(--sun)}
.callbtn{background:#1A7F45;box-shadow:0 4px 0 #0B3D21;text-shadow:none;border:1.5px solid #3FB872}
.callbtn .cb-i{color:#1A7F45}
.callbtn.sm,.callbar .callbtn,.pick-acts .callbtn{box-shadow:0 3px 0 #0B3D21}
.helps .help.urgent,.helps .help.urgent:hover{background:#E0212D;border:2px solid #fff;box-shadow:0 3px 0 #7D0C14}
.helps .help.urgent .callbtn,.helps .help.urgent .callbtn.lg{background:#fff;border:0;box-shadow:0 2px 0 #7D0C14}
.barbtn{background:#161616;border:1.5px solid #fff}
.barbtn.lgb{box-shadow:none}
.need-other .barbtn{border-color:#161616}
.btn-sun,.pick-go{background:var(--sun);box-shadow:0 4px 0 #9A3F00;text-shadow:none}
.pick-go.off{background:transparent;box-shadow:none}
.pick-bar.on{box-shadow:none}
.callbar{box-shadow:none}
.need:not(.need-other){border:0}
@media (max-width:560px){.need:not(.need-other){box-shadow:0 3px 0 #000}}
.pick-bar.on{background:#1E1E1E}
/* Call band: white with black text for easy reading, orange only as trim */
.sos{background:#fff;color:#111;border-top:4px solid var(--sun);border-bottom:4px solid var(--sun)}
.sos h2{color:#111}
.sos p{color:#333;font-weight:500;font-size:1.1rem}
.sos .wrap{padding-block:34px}
#faq{background:#161616}
/* ===== Focus pass: sharp text, solid colours, hard edges everywhere ===== */
:root{--muted:#333A44;--on-navy-muted:#E4E7EC}
body{-webkit-font-smoothing:auto;text-rendering:optimizeLegibility}
*{text-shadow:none!important}
.hero h1 .shine,.ask-hero h1 .hl,.ask-hero h1 .hl .shine{background:none;-webkit-text-fill-color:var(--sun);color:var(--sun);animation:none}
.job-roll,.brand-roll{-webkit-mask-image:none;mask-image:none}
.callbtn:hover{filter:none}
.mini-ticks,.ask-hero .mini-ticks{color:#F0F0F0}
.step-lab{color:#fff}
.trust.band .trust-live,.trust.band .trust-live [data-tl]{color:#F0F0F0}
.trust.band.roll .t:not(.hot):not(.done) .ti{color:#B5B5B5}
.gallery figcaption{color:#F0F0F0;font-size:.95rem}
.pick-txt span,.pick-next{color:#F2F2F2}
.chat .a{background:#262626;border:1.5px solid #5A5A5A;color:#fff}
.chat .q{box-shadow:none}
.cdots button{background:rgba(255,255,255,.5)}
.cn{border-color:#fff}
#faq .ask{background:#1E1E1E;border:1.5px solid #5A5A5A}
#faq .ask p,.ask p{color:#EDEDED}
.site-footer,.site-footer p,.site-footer li,.site-footer a{color:#E6E6E6}
.site-footer .credit{color:#C8C8C8}
.book-card,.map-card,.need,.aside,.brandbox{box-shadow:none}
.book-card{border:1.5px solid #C9C5BC}
.field input,.field select,.field textarea{border:1.5px solid #6B6B6B;color:#111}
.field-hint,.assure li,.extras summary{color:#222}
.areamap .lbl{fill:#111}
.map-zooms figcaption small{color:#333}
.need-main .ticks,.navy .ticks li,.section.navy .lede{color:#EDEDED}
img{image-rendering:auto}
.gallery img{border-radius:8px}
.focus-blurb{color:#F0F0F0}
/* ===== Home: bigger logo, no call button in the header; "Locked out?" sits under the 24/7 row ===== */
.home .brand img{width:78px}
.home .brand span{font-size:2.1rem}
.home .brand small{display:block;font-size:.7rem}
.home .site-header .wrap{padding-block:10px}
@media (max-width:860px){
  .home .site-header .wrap{justify-content:center}
  .home .site-header .nav{display:none}
  .home .brand{overflow:visible}
  .home .brand img{width:66px}
  .home .brand span{font-size:1.95rem;display:block}
  .home .brand small{display:block;font-size:.6rem;letter-spacing:.18em;margin-top:2px}
}
@media (max-width:360px){.home .brand img{width:56px}.home .brand span{font-size:1.6rem}}
.trust.band .sos-row{grid-column:1/-1;display:block;margin:16px 0 4px}
.trust.band .sos-row .help.urgent{display:flex;width:100%}
.trust.band .sos-row .help.urgent b{background:none;-webkit-text-fill-color:#fff;color:#fff;transform:none;opacity:1}
@media (min-width:701px){.trust.band .sos-row{max-width:640px;margin:6px auto 22px;width:100%}}
@media (max-width:700px){.trust.band > .wrap{padding-bottom:16px!important}}
.trust.band .sos-row span{color:inherit;font-size:inherit}
.trust.band .sos-row .callbtn{color:#C4141F}
.trust.band .sos-row .callbtn .cb-i{color:#fff}
/* ===== Two clear choices to start: emergency call, or open the list of services ===== */
.helps{gap:10px}
.helps .help.urgent,.helps .help.urgent:hover{min-height:72px;padding:12px 10px 12px 18px!important}
.chooser{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px;padding:12px 18px;border:2px solid #fff;border-radius:12px;background:#fff;color:#111;font:inherit;text-align:left;cursor:pointer;box-shadow:0 3px 0 #9E9A92;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.chooser:active{transform:translateY(2px);box-shadow:0 1px 0 #9E9A92}
.chooser .ch-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.chooser b{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,5.6vw,1.7rem);line-height:1;text-transform:uppercase;letter-spacing:.02em}
.chooser em{font-style:normal;font-size:1rem;font-weight:500;color:#333}
.chooser .ch-a{flex:none;width:40px;height:40px;border-radius:50%;background:var(--sun);position:relative;transition:transform .2s ease}
.chooser .ch-a::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-8px 0 0 -6px;border-right:3px solid #111;border-bottom:3px solid #111;transform:rotate(45deg)}
.helps.open .chooser .ch-a{transform:rotate(180deg)}
.helps.open .chooser{border-color:var(--sun)}
body.booking .chooser{display:none}
@media (min-width:561px){.helps .help.urgent b{font-size:clamp(1.6rem,2.6vw,2.1rem)}}
/* 24/7 row lives in the top section, straight under the Locked out bar */
.trust.band.inhero{background:none;border:0;overflow:visible}
.trust.band.inhero::before{display:none}
.trust.band.inhero > .wrap{padding:6px 0 0!important;max-width:none}
.trust.band.inhero .trust-live{border-top:0;margin-top:8px;padding-top:0}
body.booking .trust.band.inhero{display:none}
.ask-hero .wrap{padding-bottom:22px}
@media (max-width:700px){.trust.band.inhero > .wrap{padding:8px 0 0!important}}
@media (min-width:701px){
  .trust.band.inhero > .wrap{grid-template-columns:repeat(4,minmax(0,1fr));padding:14px 0 0!important}
  .trust.band.inhero .t{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:0!important;border:0!important}
  .trust.band.inhero .t > div > span{display:none}
  .trust.band.inhero b{font-size:1.15rem;transform:none!important}
  .trust.band.inhero .trust-live{display:block;grid-column:1/-1;text-align:center;margin:12px 0 0}
  .ask-hero .wrap{padding-bottom:96px}
}
.ask-hero .hero-who{display:none}
/* Free quotes / warranty / licence: one tidy line under the services list */
.svc-ticks{justify-content:center;gap:6px 22px;margin:18px 0 0;padding:14px 0 0;border-top:1px solid #3A3A3A;color:#F0F0F0;font-size:1rem}
.ask-hero .wrap{padding-bottom:18px}
@media (max-width:560px){.svc-ticks{justify-content:flex-start;font-size:.98rem}.ask-hero .wrap{padding-bottom:14px}}
/* ===== First screen: emergency and the service choices together, centred and even ===== */
.helps .help:not(.urgent){display:flex}
.step-lab{grid-column:1/-1;margin:2px 0 0;text-align:center;font-size:1.05rem;font-weight:600;color:#fff;letter-spacing:.02em}
.help:not(.urgent),.help:not(.urgent):hover,.help:not(.urgent):focus,.help:not(.urgent):active,.help:not(.urgent).sel,.help:not(.urgent).sel:hover{justify-content:center;text-align:center;padding:6px 8px;gap:0}
.help:not(.urgent)::before{display:none}
.help:not(.urgent) .ht{flex:1;align-items:stretch}
.help:not(.urgent) b{text-align:center}
.help:not(.urgent).sel,.help:not(.urgent).sel:hover{background:var(--sun);border-color:var(--sun);box-shadow:0 3px 0 #9A3F00}
.ticks-strip{background:#1D1D1D;border-top:1px solid #333}
.ticks-strip .svc-ticks{border-top:0;margin:0;padding:16px 0;justify-content:center}
.ask-hero .trust-live{display:none!important}
@media (max-width:560px){
  .home #services{display:none}
  .ask-hero h1{text-align:center;font-size:clamp(2.1rem,9.4vw,2.8rem)}
  .ask-hero .wrap{padding-top:10px;padding-bottom:14px}
  .ask-hero .stack{gap:10px!important}
  .helps{gap:8px}
  .helps .help.urgent,.helps .help.urgent:hover{flex-direction:column;align-items:stretch;gap:8px;min-height:0;padding:10px 12px 12px!important;text-align:center}
  .helps .help.urgent .ht{align-items:center;flex:none}
  .helps .help.urgent b{font-size:clamp(1.5rem,6.6vw,1.9rem)}
  .help.urgent .us{display:none}
  .helps .help.urgent .callbtn,.helps .help.urgent .callbtn.lg{width:100%;min-height:50px;font-size:1.35rem;justify-content:center;padding:4px 16px 4px 6px}
  .help:not(.urgent),.help:not(.urgent):hover,.help:not(.urgent):focus,.help:not(.urgent):active,.help:not(.urgent).sel,.help:not(.urgent).sel:hover{min-height:46px}
  .trust.band.inhero > .wrap{padding:6px 0 0!important}
  .ticks-strip .svc-ticks{justify-content:center;font-size:.95rem;gap:4px 16px}
}
/* Phone: licence strip fits on one line and sits fully on the first screen */
@media (max-width:560px){
  .ticks-strip .svc-ticks{flex-wrap:nowrap;justify-content:center;gap:0 16px;padding:9px 0;font-size:min(.95rem,3.7vw);white-space:nowrap}
  .ticks-strip .svc-ticks li:nth-child(2){display:none}
  .ask-hero .wrap{padding-bottom:10px}
  .trust.band.inhero > .wrap{padding:2px 0 0!important}
  .trust.band.inhero .t{gap:4px}
  .ask-hero .stack{gap:8px!important}
  .helps{gap:7px}
}
.job-roll:hover .gallery.roll,.job-roll:active .gallery.roll{animation-play-state:running!important}
/* Phone: bigger heading; the top section stretches to the bottom bar with its parts spaced evenly */
@media (max-width:560px){
  .ask-hero h1{font-size:clamp(2.4rem,11.6vw,3.4rem);line-height:1;white-space:nowrap}
  .home .ask-hero{display:flex;flex-direction:column}
  .home .ask-hero > .wrap{flex:1;display:flex;flex-direction:column;width:100%}
  .home .ask-hero .stack{flex:1;justify-content:space-evenly}
  body.booking.home .ask-hero{min-height:0!important}
}
@media (max-width:560px){
  .ask-hero h1{white-space:normal}
  .home .ask-hero > .wrap,.home .ask-hero .stack{min-width:0;max-width:100%;box-sizing:border-box}
  .home .ask-hero .stack > *{min-width:0;max-width:100%}
}
/* Orange outline around the service choice boxes */
.help:not(.urgent),.help:not(.urgent):hover,.help:not(.urgent):focus,.help:not(.urgent):active{border:2px solid var(--sun);box-shadow:0 3px 0 #9A3F00}
.help:not(.urgent).sel,.help:not(.urgent).sel:hover{border:2px solid #fff;box-shadow:0 3px 0 #9A3F00}
.site-footer .credit{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.site-footer .credit img{height:15px;width:auto;display:block;position:relative;top:1px}
.site-footer .credit{justify-content:space-between;gap:10px 16px}.site-footer .credit img{height:20px;top:0;opacity:.55}
/* ===== Service buttons: raised 3D keys (option A) ===== */
.helps{gap:12px 10px}
.help:not(.urgent),.help:not(.urgent):hover,.help:not(.urgent):focus{background:#fff;color:#111;border:0;border-radius:12px;box-shadow:0 7px 0 #9E9A92,0 8px 0 #000;transform:none;transition:transform .1s ease,box-shadow .1s ease,background .15s ease}
.help:not(.urgent):active{border:0;transform:translateY(6px);box-shadow:0 1px 0 #9E9A92}
.help:not(.urgent).sel,.help:not(.urgent).sel:hover,.help:not(.urgent).sel:focus{background:var(--sun);color:#111;border:0;transform:translateY(5px);box-shadow:0 2px 0 #9A3F00}
@media (hover:none){.help:not(.urgent):hover{background:#fff;box-shadow:0 7px 0 #9E9A92,0 8px 0 #000}.help:not(.urgent).sel:hover{background:var(--sun);box-shadow:0 2px 0 #9A3F00}}
.step-lab{margin-bottom:-2px}
@media (max-width:560px){.helps{gap:13px 9px}}
/* Home header on phones: shield in the left corner, name and tagline centred */
@media (max-width:860px){
  .home .site-header .wrap{position:relative;justify-content:center}
  .home .brand{position:static;display:block;text-align:center;padding-inline:62px}
  .home .brand img{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:56px}
  .home .brand span{display:block;font-size:1.9rem;white-space:nowrap}
  .home .brand small{white-space:nowrap}
}
@media (max-width:400px){.home .brand span{font-size:min(1.9rem,7.6vw)}.home .brand{padding-inline:58px}.home .brand img{width:50px;left:14px}}
html{scroll-padding-top:110px}#help,#book{scroll-margin-top:110px}
.upload.want{border:2px solid var(--sun);background:#FFF4EA}
/* Before / after photos in the Smart locks panel */
.pick-ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pick-ba[hidden]{display:none}
.pick-ba figure{position:relative;margin:0;border-radius:10px;overflow:hidden;border:1.5px solid #5A5A5A}
.pick-ba img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.pick-ba figcaption{position:absolute;left:8px;top:8px;padding:4px 10px;border-radius:999px;background:#161616;color:#fff;font-family:var(--display);font-weight:800;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
.pick-ba figure + figure figcaption{background:var(--sun);color:#111}
.pick-ba figure + figure{border-color:var(--sun)}
/* Reviews summary */
#reviews{background:#161616;color:#fff;border-top:2px solid var(--sun);padding-block:44px}
#reviews .wrap{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.rev-score{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px}
.rev-stars{display:flex;gap:3px;color:#FFB400}
.rev-stars svg{width:30px;height:30px;fill:currentColor;stroke:none}
.rev-score b{font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1}
.rev-score > span:last-child{flex-basis:100%;color:#F0F0F0;font-size:1.05rem}
#reviews h2{color:#fff;font-size:clamp(1.7rem,6vw,2.4rem)}
.rev-themes{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;width:100%;text-align:left}
.rev-themes li{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1.5px solid #5A5A5A;border-left:4px solid var(--sun);border-radius:10px;background:#1E1E1E}
.rev-themes b{font-size:1.1rem}
.rev-themes span{color:#EDEDED;font-size:1rem;line-height:1.4}
.rev-note{margin:4px 0 0;color:#C8C8C8;font-size:.9rem}
@media (max-width:600px){#reviews{padding-block:30px}}
/* Star rating in the top section, above the 24/7 row */
.rev-mini{display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;text-decoration:none;line-height:1}
.rev-mini .rev-stars svg{width:20px;height:20px}
.rev-mini b{font-family:var(--display);font-weight:800;font-size:1.5rem}
.rev-mini > span:last-child{font-size:1rem;color:#F0F0F0;text-decoration:underline;text-underline-offset:3px}
body.booking .rev-mini{display:none}
#reviews{scroll-margin-top:100px}
@media (max-width:560px){
  .helps{gap:11px 9px}
  .help:not(.urgent),.help:not(.urgent):hover,.help:not(.urgent):focus,.help:not(.urgent):active,.help:not(.urgent).sel,.help:not(.urgent).sel:hover{min-height:41px;padding:4px 8px}
  .helps .help.urgent,.helps .help.urgent:hover{padding:8px 12px 10px!important;gap:6px}
  .helps .help.urgent .callbtn,.helps .help.urgent .callbtn.lg{min-height:46px}
  .ask-hero .wrap{padding-top:6px;padding-bottom:6px}
  .ticks-strip .svc-ticks{padding:7px 0}
  .trust.band.inhero .ti svg{width:26px;height:26px}
}
/* Phone: stars line is the last thing on the first screen, just above the bottom bar */
@media (max-width:560px){
  .ticks-strip{display:none}
  .rev-mini{padding:4px 0 8px}
}
.rev-themes .rev-stars{display:flex;gap:2px;color:#FFB400;margin-bottom:2px}.rev-themes .rev-stars svg{width:18px;height:18px}
/* Review cards: title on the left, stars on the right of the same line */
.rev-themes li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 10px}
.rev-themes li b{grid-column:1;grid-row:1}
.rev-themes li .rev-stars{grid-column:2;grid-row:1;margin:0}
.rev-themes li > span:last-child{grid-column:1/-1}
/* Review section styled like a familiar ratings panel: white cards, big score, gold stars */
.rev-head{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;padding:16px;border-radius:12px;background:#fff;color:#111;text-align:left}
.rev-head > b{font-family:var(--body);font-weight:700;font-size:3rem;line-height:1}
.rev-head > div{display:flex;flex-direction:column;gap:4px}
.rev-head .rev-stars{color:#FBBC04}
.rev-head .rev-stars svg{width:26px;height:26px}
.rev-head > div > span:last-child{font-size:1rem;color:#333}
.rev-themes li{background:#fff;border:0;border-radius:12px;color:#111;padding:14px 16px}
.rev-themes li b{color:#111}
.rev-themes li > span:last-child{color:#222}
.rev-themes .rev-stars{color:#FBBC04}
.rev-themes .rev-stars svg{width:19px;height:19px}
/* One recent-job photo in each service panel (upgrades to before/after when pairs arrive) */
.pick-job{position:relative;margin:0;border-radius:10px;overflow:hidden;border:1.5px solid var(--sun)}
.pick-job[hidden]{display:none}
.pick-job img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.pick-job figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(17,17,17,.88);color:#fff;font-size:.98rem;line-height:1.25}
.pick-job figcaption b{flex:none;padding:3px 9px;border-radius:999px;background:var(--sun);color:#111;font-family:var(--display);font-weight:800;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
/* ===== Three-dot menu (phones) and gallery page ===== */
.site-header{position:sticky}
.more-btn{display:none;flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid #fff;background:#161616;align-items:center;justify-content:center;gap:4px;cursor:pointer;padding:0;touch-action:manipulation}
.more-btn i{width:5px;height:5px;border-radius:50%;background:#fff}
.more-btn.open{background:var(--sun);border-color:var(--sun)}
.more-btn.open i{background:#111}
.more-menu{position:absolute;right:12px;top:calc(100% + 8px);z-index:80;width:min(290px,calc(100vw - 24px));max-height:calc(100vh - 190px);overflow:auto;padding:8px;border-radius:14px;background:#fff;color:#111;border:2px solid var(--sun);box-shadow:0 14px 0 -10px #000;display:flex;flex-direction:column}
.more-menu[hidden]{display:none}
.more-menu a{display:block;padding:12px 14px;border-radius:9px;color:#111;font-weight:600;font-size:1.1rem;text-decoration:none}
.more-menu a:active,.more-menu a:hover{background:#FFE9D6}
.more-menu a.sub{font-weight:500;font-size:1rem;padding:9px 14px 9px 22px}
.more-menu p{margin:6px 0 2px;padding:8px 14px 2px;border-top:1px solid #DDD;font-family:var(--display);font-weight:800;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;color:#9A3F00}
@media (max-width:860px){
  .more-btn{display:flex}
  .home .more-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%)}
  .home .brand{padding-inline:60px 56px}
  body:not(.home) .site-header .wrap{gap:8px}
  body:not(.home) .site-header .callbtn .cs{display:none}
  body:not(.home) .site-header .callbtn{padding:5px;gap:0}
}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.gal-grid figure{margin:0;display:flex;flex-direction:column;gap:6px}
.gal-grid img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:10px}
.gal-grid figcaption{font-size:.98rem;line-height:1.3;color:#222}
.gal-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media (max-width:560px){.gal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gal-cta > *{width:100%}}
/* Menu button: three lines with the word Menu */
.more-btn{width:auto;min-width:48px;height:48px;padding:5px 8px;border-radius:10px;flex-direction:column;gap:4px}
.more-btn .bars{display:flex;flex-direction:column;gap:4px}
.more-btn .bars i{display:block;width:22px;height:2.5px;border-radius:2px;background:#fff}
.more-btn em{font-style:normal;font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;line-height:1;color:#fff}
.more-btn.open .bars i{background:#111}
.more-btn.open em{color:#111}
/* Book tapped with nothing chosen: ask, and light up the choices */
.helps.ask-pick .step-lab{color:var(--sun-hi);font-weight:700;font-size:1.15rem}
.helps.ask-glow .help:not(.urgent):not(.sel){box-shadow:0 7px 0 #9A3F00,0 0 0 3px var(--sun)}
@keyframes askpick{0%,100%{transform:none}30%{transform:translateY(-5px)}60%{transform:none}80%{transform:translateY(-2px)}}
@media (prefers-reduced-motion:no-preference){.helps.ask-glow .help:not(.urgent){animation:askpick .7s ease 2}.helps.ask-glow .help:nth-of-type(even){animation-delay:.08s}}
/* When Book asks, the Locked out bar is lit up with the other choices */
.helps.ask-glow .help.urgent{box-shadow:0 3px 0 #7D0C14,0 0 0 4px #fff,0 0 0 7px var(--sun)}
@media (prefers-reduced-motion:no-preference){.helps.ask-glow .help.urgent{animation:askpick .7s ease 2}}
.help:not(.urgent),.help.urgent{transition:box-shadow .6s ease,transform .1s ease,background .15s ease}
.helps:not(.ask-glow) .step-lab{transition:color .6s ease}
.helps.ask-pick:not(.ask-glow) .step-lab{color:#fff}
/* Book prompt: one quick, quiet flash of the outline, no bounce */
.helps.ask-glow .help:not(.urgent),.helps.ask-glow .help.urgent,.helps.ask-glow .help:nth-of-type(even){animation:none!important}
.help:not(.urgent),.help.urgent{transition:box-shadow .35s ease,transform .1s ease,background .15s ease}
.helps.ask-glow .help:not(.urgent):not(.sel){box-shadow:0 7px 0 #9E9A92,0 0 0 2px var(--sun)}
.helps.ask-glow .help.urgent{box-shadow:0 3px 0 #7D0C14,0 0 0 3px var(--sun)}
.helps.ask-glow .help{transition:box-shadow .12s ease}
.helps.ask-pick .step-lab,.helps.ask-glow .step-lab{color:#fff;font-weight:600;font-size:1.05rem}
/* Book with nothing chosen: open the booking section with the service choices showing */
body.booking.choose #book fieldset:first-of-type{display:block}
body.booking.choose #book legend .n{display:inline-flex}
/* Home loads as one piece: no staggered entrance of the heading, bar and buttons */
.hero .wrap > .stack > *,.helps .help,.helps .help:nth-child(n),.kh-tabs,.hero .wrap > .stack > .focus{animation:none!important}
.helps .help.urgent{animation:none!important}
.pick-back{align-self:flex-start;min-height:44px;padding:8px 16px;border:1.5px solid #fff;border-radius:8px;background:none;color:#fff;font:600 1.05rem var(--body);cursor:pointer;touch-action:manipulation}.pick-back:active{background:#fff;color:#111}
/* Back buttons sit clear of the header */
body.booking .ask-hero .wrap{padding-top:22px!important}
.pick-bar{scroll-margin-top:110px}
.pick-back{background:#fff;color:#111;border-color:#fff;font-weight:700;min-height:46px;box-shadow:0 3px 0 #9E9A92}.pick-back:active{transform:translateY(2px);box-shadow:0 1px 0 #9E9A92}.pick-bar.on{padding-top:14px}
/* Choosing several services */
.pick-bar.on{flex-wrap:wrap}
.pick-bar .pick-back,.pick-bar .pick-add{align-self:flex-start}
.pick-bar.on{display:grid;grid-template-columns:auto 1fr;gap:10px}
.pick-bar.on > *{grid-column:1/-1}
.pick-bar.on > .pick-back{grid-column:1}
.pick-bar.on > .pick-add{grid-column:2;justify-self:start;min-height:46px;padding:8px 14px;border-radius:8px;border:0;background:var(--sun);color:#111;font:700 1.05rem var(--body);box-shadow:0 3px 0 #9A3F00;cursor:pointer;touch-action:manipulation}
.pick-add:active{transform:translateY(2px);box-shadow:0 1px 0 #9A3F00}
.pick-list{display:none;list-style:none;margin:0;padding:0;flex-wrap:wrap;gap:6px}
.pick-bar.many .pick-list{display:flex}
.pick-list li{padding:6px 12px;border-radius:999px;background:#fff;color:#111;font-weight:600;font-size:1rem}
.pick-bar.many .pick-ticks,.pick-bar.many .pick-ba,.pick-bar.many .pick-job,.pick-bar.many .pick-more{display:none}
@media (max-width:400px){.pick-bar.on > .pick-add,.pick-bar.on > .pick-back{font-size:.95rem;padding-inline:10px}}
/* Picking mode: once a service is chosen, the screen is only the choices and their panel */
body.picking:not(.booking) .ask-hero h1,body.picking:not(.booking) .ask-hero .lede,body.picking:not(.booking) .ask-hero .status,body.picking:not(.booking) .help.urgent,body.picking:not(.booking) .trust.band.inhero,body.picking:not(.booking) .rev-mini,body.picking:not(.booking) .mini-ticks,body.picking:not(.booking) .hero-art,body.picking:not(.booking) .ticker,body.picking:not(.booking) .more-btn,body.picking:not(.booking) .more-menu,body.picking:not(.booking) .site-header .nav,body.picking:not(.booking) .ticks-strip,body.picking:not(.booking) main > section:not(.hero),body.picking:not(.booking) .site-footer{display:none!important}
body.picking:not(.booking) .ask-hero{min-height:calc(100vh - 80px)!important;display:block}
body.picking:not(.booking) .ask-hero .wrap{display:block;padding-block:14px 110px}
body.picking:not(.booking) .ask-hero .stack{display:flex;flex-direction:column;gap:14px!important;justify-content:flex-start}
body.picking:not(.booking) .step-lab{font-size:1.15rem}

/* Picking mode: a "You've chosen" list on top, ticks on chosen keys, a plus on the ones still on offer */
.chosen{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;padding:12px;border:2px solid var(--sun);border-radius:12px;background:#1E1E1E;text-align:left}
.chosen[hidden]{display:none}
.chosen-lab{font:800 1.25rem var(--display);text-transform:uppercase;letter-spacing:.04em;color:#fff}
.chosen ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.chosen li button{width:100%;min-height:46px;display:flex;align-items:center;gap:10px;padding:6px 8px 6px 10px;border:0;border-radius:8px;background:var(--sun);color:#111;font:700 1.1rem var(--body);text-align:left;cursor:pointer;touch-action:manipulation}
.chosen li i{flex:none;width:26px;height:26px;border-radius:50%;background:#111;color:#fff;font-style:normal;font-size:.95rem;display:flex;align-items:center;justify-content:center}
.chosen li span{flex:1;min-width:0}
.chosen li u{flex:none;width:34px;height:34px;border-radius:50%;background:#fff;color:#111;text-decoration:none;font-size:1.4rem;line-height:1;display:flex;align-items:center;justify-content:center}
body.booking .chosen{display:none}
body.picking:not(.booking) .help.sel{display:none!important}
body.picking:not(.booking) .pick-bar.on > .pick-add{display:none}
body.picking:not(.booking) .step-lab{font-size:1.2rem;font-weight:700;text-align:center}
.pick-bar.many .pick-list{display:none}

/* Confirm step: tapping a service asks first, nothing is added until "Yes, add it" */
.confirm{grid-column:1/-1;display:flex;flex-direction:column;gap:10px;padding:16px;border:2px solid var(--sun);border-radius:12px;background:#1E1E1E;text-align:left;color:#fff}
.confirm[hidden]{display:none}
.confirm-q{font:600 1.05rem var(--body);color:#E6E6E6}
.confirm-t{font:800 1.9rem/1 var(--display);text-transform:uppercase;letter-spacing:.03em;color:#fff}
.confirm > span{font-size:1.1rem;line-height:1.4}
.confirm-acts{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.confirm-acts button{min-height:54px;border:0;border-radius:10px;font:700 1.2rem var(--body);cursor:pointer;touch-action:manipulation}
.confirm-yes{background:var(--sun);color:#111;box-shadow:0 4px 0 #9A3F00}
.confirm-no{background:#fff;color:#111;box-shadow:0 4px 0 #9E9A92}
.confirm-acts button:active{transform:translateY(3px);box-shadow:none}
body.confirming:not(.booking) .helps > .help,body.confirming:not(.booking) .step-lab,body.confirming:not(.booking) .chosen,body.confirming:not(.booking) .pick-bar{display:none!important}
body.booking .confirm{display:none}

/* Cart: chosen services sit in a "Your booking" box with the continue and call buttons; details panel is replaced by it */
body.picking:not(.booking) .pick-bar{display:none!important}
.cart-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cart-n{flex:none;padding:4px 12px;border-radius:999px;background:#fff;color:#111;font-weight:700;font-size:.98rem}
.cart .cart-go{width:100%;min-height:58px;font-size:1.35rem;margin-top:4px}
.cart .pick-next{text-align:center}
.cart-call{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid #4A4A4A}
.cart-call span{font-weight:600;font-size:1.05rem;color:#fff}
.cart-call .callbtn{flex:none}
.cart-back{display:none;grid-column:1/-1;justify-self:center;margin-top:4px}
body.picking:not(.confirming):not(.booking) .cart-back{display:inline-flex;align-items:center}
.confirm .pick-ba,.confirm .pick-job{margin-top:4px}
.callbar .barbtn[data-n]{position:relative}
.callbar .barbtn[data-n]::after{content:attr(data-n);position:absolute;top:-9px;right:-3px;min-width:26px;height:26px;padding:0 6px;border-radius:13px;background:var(--sun);color:#111;font:700 1rem/26px var(--body);text-align:center;border:2px solid #161616;box-sizing:content-box}
.focus-items{list-style:none;margin:4px 0 6px;padding:0;display:flex;flex-direction:column;gap:6px}
.focus-items:empty{display:none}
.focus-items li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;background:var(--sun);color:#111;font-weight:700;font-size:1.1rem}
.focus-items li::before{content:"\2713";flex:none;width:26px;height:26px;border-radius:50%;background:#111;color:#fff;font-size:.95rem;display:flex;align-items:center;justify-content:center}