/* ==========================================================================
   LOCK AND KEY LOCKSMITH DE — "CHROME"

   Palette taken from the client's own logo, not invented. Sampled from
   assets/brand/logo-header.png: the wordmark is silver #C0C0C0 with a cool
   tint (#C0C0D0, 13.7% of opaque pixels) and the padlock and key are charcoal
   #202020–#505050. So: charcoal ground, chrome as the brand finish, and one
   warm signal reserved for the things you are meant to press.

   Structure follows a high-converting locksmith landing page: sticky status
   bar, hero that is really one big call button, an honest stat row, what we
   handle, numbered services, FAQ, footer. Every screen ends in the phone.
   ========================================================================== */
:root{
  /* ground — charcoal, from the logo's dark elements */
  --bg:#101216;
  --bg-2:#161920;
  --bg-3:#1D212A;
  --line:rgba(198,200,206,.12);
  --line-2:rgba(198,200,206,.07);

  /* chrome — the wordmark itself */
  --chrome:#C6C8CE;
  --chrome-lo:#8C9099;
  --chrome-grad:linear-gradient(160deg,#FDFDFE 0%,#C6C8CE 38%,#8C9099 58%,#E8E9ED 78%,#B4B7BE 100%);

  /* text — measured against --bg */
  --tx:#E9EAEE;
  --tx-2:#A8ACB5;      /* 6.5:1 */
  --tx-3:#868B94;      /* 4.6:1 — the floor for small text, do not go darker */

  /* signal — warm amber, the one thing you press */
  --sig:#FFB020;
  --sig-ink:#140F02;
  --ok:#3ECF8E;

  --r:14px;
  --r-sm:10px;
  --pad:clamp(18px,4vw,56px);
  --maxw:1240px;

  --f:"Sora","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-m:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--f);
  font-size:16px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;position:relative}

/* ---------- the modern part: a lit background, not a flat dark slab ------- */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(58vw 42vw at 78% -8%, rgba(255,176,32,.13), transparent 62%),
    radial-gradient(50vw 40vw at 8% 6%, rgba(150,170,215,.11), transparent 60%),
    radial-gradient(70vw 50vw at 50% 108%, rgba(198,200,206,.07), transparent 60%),
    var(--bg)}
/* fine grain, so those gradients never band on a large screen */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.15;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

img{max-width:100%;height:auto;display:block}
/* lockandkeylocksmithoffice@gmail.com is 322px of unbreakable text and it hung
   off the side of a 320px screen wherever it appeared. Breaks only when it has
   to, and only these links. */
a[href^="mailto:"]{overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--sig);outline-offset:3px}
.wrap{width:min(100% - calc(var(--pad)*2),var(--maxw));margin-inline:auto}
.m{font-family:var(--f-m);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the logo's own chrome finish, reused as a type treatment */
.chrome{background:var(--chrome-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}

/* ---------- buttons ------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  background:var(--sig);color:var(--sig-ink);border:0;border-radius:var(--r-sm);
  padding:1.05em 1.7em;font-family:inherit;font-weight:700;font-size:1rem;
  letter-spacing:-.01em;cursor:pointer;white-space:nowrap;
  box-shadow:0 8px 26px -10px rgba(255,176,32,.7);
  transition:transform .14s ease,box-shadow .18s ease,filter .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(255,176,32,.85);filter:brightness(1.06)}
.btn--lg{padding:1.2em 2.1em;font-size:1.08rem;width:100%;max-width:420px}
.btn--ghost{background:rgba(198,200,206,.07);color:var(--tx);border:1px solid var(--line);box-shadow:none}
.btn--ghost:hover{background:rgba(198,200,206,.14);box-shadow:none;filter:none}

/* ---------- 01 · sticky status bar ---------------------------------------- */
.bar{position:sticky;top:0;z-index:80;background:rgba(16,18,22,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:1rem;min-height:52px;justify-content:space-between}
.bar__live{display:inline-flex;align-items:center;gap:.55em;font-size:.85rem;color:var(--tx-2)}
.bar__live b{color:var(--tx);font-weight:600}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(62,207,142,.6);animation:pulse 2.4s ease-out infinite}
.pulse.off{background:var(--chrome-lo);animation:none;box-shadow:none}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(62,207,142,0)}100%{box-shadow:0 0 0 0 rgba(62,207,142,0)}}
.bar__tel{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:1rem;
  letter-spacing:-.02em;color:var(--tx)}
.bar__tel:hover{color:var(--sig)}

/* ---------- 02 · header + hero -------------------------------------------- */
.head{padding-block:1.3rem}
.head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.head img{width:clamp(158px,20vw,214px)}
.head__where{color:var(--tx-2);font-size:.88rem;text-align:right;line-height:1.4}
.head__where b{color:var(--tx);display:block;font-weight:600}

.hero{padding-block:clamp(1.4rem,3vw,2.6rem) clamp(2.6rem,6vw,4.4rem)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4rem);align-items:center}
.kicker{display:inline-flex;align-items:center;gap:.6em;padding:.45em 1em;border-radius:999px;
  border:1px solid var(--line);background:rgba(198,200,206,.05);color:var(--tx-2);
  font-size:.8rem;margin-bottom:1.5rem}
.kicker b{color:var(--sig);font-weight:600}
.hero h1{font-size:clamp(2.3rem,5.2vw,3.9rem);margin-bottom:1.2rem}
.hero__sub{color:var(--tx-2);font-size:1.06rem;max-width:46ch;margin-bottom:2rem}
.hero__cta{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start;max-width:420px}
.hero__fine{color:var(--tx-3);font-size:.84rem}
.hero__ticks{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;margin-top:1.9rem}
.tick{display:inline-flex;align-items:center;gap:.5em;color:var(--tx-2);font-size:.9rem}
.tick svg{flex:0 0 auto;color:var(--ok)}

/* the hero photograph, with a glass plate for the rating */
.shot{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover}
.shot__glass{position:absolute;left:14px;right:14px;bottom:14px;padding:1rem 1.15rem;
  border-radius:var(--r-sm);background:rgba(16,18,22,.74);backdrop-filter:blur(12px);
  border:1px solid var(--line);display:flex;align-items:center;gap:.9rem}
.shot__glass b{font-size:1.5rem;font-weight:700;letter-spacing:-.03em}
.shot__glass span{color:var(--tx-2);font-size:.85rem;line-height:1.4}
.shot__glass a{color:var(--tx);border-bottom:1px solid var(--line)}
/* .stars must out-specify .shot__glass span (0,2,0) or the stars render grey.
   This is the same class of bug as a ghost button on a dark section: a
   descendant selector quietly overriding a component's own colour. */
.shot__glass .stars,.stars{color:var(--sig);letter-spacing:.06em}
/* the rating number itself, in the glass plate and in the stat row */
.gold{color:var(--sig)}

/* ---------- 03 · the stat row. Every number here is true ------------------ */
.stats{display:flex;flex-wrap:wrap;gap:1px;background:var(--line-2);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat{background:var(--bg-2);padding:1.5rem 1.3rem;text-align:center;flex:1 1 0;min-width:0}
.stat b.gold{color:var(--sig)}
.stat b{display:block;font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:700;letter-spacing:-.045em;
  line-height:1;margin-bottom:.45rem}
.stat span{color:var(--tx-3);font-size:.83rem;line-height:1.35;display:block}
.stats:has(> .stat:nth-child(5)) .stat{flex-basis:30%}
@media (max-width:620px){
  .stat{flex-basis:44%}
  .stats:has(> .stat:nth-child(5)) .stat{flex-basis:44%}
}

/* ---------- section furniture --------------------------------------------- */
.sec{padding-block:clamp(3rem,7vw,5.4rem)}
.sec__head{max-width:62ch;margin-bottom:clamp(2rem,4vw,3rem)}
.sec__head .m{color:var(--sig);display:block;margin-bottom:.9rem}
.sec__head h2{font-size:clamp(1.85rem,4vw,2.9rem);margin-bottom:.9rem}
.sec__head p{color:var(--tx-2)}

/* ---------- 04 · what we handle ------------------------------------------- */
.handle{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.card{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--bg-2);display:block;transition:transform .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-4px);border-color:rgba(255,176,32,.45)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;opacity:.6;transition:opacity .25s}
.card:hover img{opacity:.82}
.card__b{padding:1.15rem 1.25rem 1.35rem}
.card__b h3{font-size:1.1rem;margin-bottom:.4rem}
.card__b p{color:var(--tx-3);font-size:.87rem;line-height:1.5}

/* ---------- 05 · promise band --------------------------------------------- */
.band{border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(135deg,rgba(255,176,32,.09),rgba(198,200,206,.04) 55%,transparent);
  padding:clamp(1.8rem,4vw,3rem);display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.8rem,4vw,3.2rem);align-items:center}
.band h2{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:.9rem}
.band > div > p{color:var(--tx-2);margin-bottom:1.6rem}
.band ul{display:grid;gap:.9rem}
.band li{display:flex;align-items:flex-start;gap:.75em;color:var(--tx-2);font-size:.95rem}
.band li svg{flex:0 0 auto;color:var(--ok);margin-top:.25em}

/* ---------- 06 · numbered services ---------------------------------------- */
.jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.job{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  padding:1.4rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;
  transition:transform .18s ease,border-color .18s ease,background .18s ease}
.job:hover{transform:translateY(-3px);border-color:rgba(255,176,32,.45);background:var(--bg-3)}
.job__n{font-family:var(--f-m);font-size:.73rem;letter-spacing:.16em;color:var(--sig)}
.job h3{font-size:1.12rem}
.job p{color:var(--tx-3);font-size:.88rem;line-height:1.5;flex:1}
.job__go{display:inline-flex;align-items:center;gap:.45em;color:var(--sig);
  font-weight:600;font-size:.89rem;margin-top:.5rem}

/* ---------- 07 · faq ------------------------------------------------------- */
.faq{display:grid;gap:.7rem;max-width:920px}
.faq details{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);
  transition:border-color .18s}
.faq details[open]{border-color:rgba(255,176,32,.4)}
.faq summary{list-style:none;cursor:pointer;padding:1.15rem 1.35rem;display:flex;
  justify-content:space-between;align-items:center;gap:1.2rem;font-weight:600;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--sig);font-size:1.45rem;line-height:1;font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq .a{padding:0 1.35rem 1.3rem;color:var(--tx-2);line-height:1.65}
.faq .a a{color:var(--tx);border-bottom:1px solid var(--line)}
.faq .a a:hover{color:var(--sig);border-bottom-color:var(--sig)}

/* ---------- 08 · service areas + closing call ------------------------------ */
.areas{display:flex;flex-wrap:wrap;gap:.55rem}
.areas a{padding:.6rem 1rem;border:1px solid var(--line);border-radius:999px;
  font-size:.88rem;color:var(--tx-2);transition:.16s}
.areas a:hover{border-color:var(--sig);color:var(--sig)}

.close{text-align:center;padding-block:clamp(3rem,6vw,5rem)}
.close h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:1rem}
.close p{color:var(--tx-2);margin-bottom:2rem;max-width:50ch;margin-inline:auto}
.close .btn{margin-inline:auto}

/* ---------- footer --------------------------------------------------------- */
.foot{border-top:1px solid var(--line);padding-block:clamp(2.4rem,5vw,3.4rem) 2rem;
  background:rgba(16,18,22,.6)}
.foot__top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));
  gap:2rem;padding-bottom:2.4rem;border-bottom:1px solid var(--line-2)}
.foot img{width:186px;margin-bottom:1rem}
.foot p{color:var(--tx-3);font-size:.89rem;max-width:36ch}
.foot h4{font-family:var(--f-m);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sig);font-weight:500;margin-bottom:1rem}
.foot li{margin-bottom:.55rem}
.foot a{color:var(--tx-2);font-size:.9rem}
.foot a:hover{color:var(--sig)}
.foot__bottom{display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;
  padding-top:1.6rem;color:var(--tx-3);font-size:.84rem}
/* wraps: at 320px the row of links ran 36px past the edge of the screen */
.foot__soc{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem}

/* ---------- sticky mobile call --------------------------------------------- */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;
  padding:.7rem var(--pad);gap:.6rem;
  background:rgba(16,18,22,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.callbar .btn{flex:1;padding:1em 1rem;font-size:1rem;max-width:none}

/* ==========================================================================
   RESPONSIVE. Measured on a real 375px viewport, not guessed: nothing under
   12px, no tap target under 44px, and inputs at 16px so iOS does not zoom the
   whole page the moment a thumb lands in the form.
   ========================================================================== */
@media (max-width:1080px){
  .hero .wrap{grid-template-columns:1fr}
  .handle{grid-template-columns:repeat(2,1fr)}
  .jobs{grid-template-columns:repeat(2,1fr)}
  .band{grid-template-columns:1fr}
  /* (a two-column rule lived here and never applied: a later block wins) */
}
@media (max-width:760px){
  .stat{padding:1.15rem .6rem}
  .handle,.jobs{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr}
  .head__where{display:none}
  .callbar{display:flex}
  body{padding-bottom:78px}

  .m{font-size:.76rem}
  .stat span,.card__b p,.job p,.foot p,.foot a,.hero__fine{font-size:.88rem}
  .bar__live{font-size:.8rem}

  .areas a,.foot__soc a,.foot li a,.job__go{min-height:44px;display:inline-flex;align-items:center}
  .faq summary{min-height:56px}
  .btn{min-height:52px;width:100%;max-width:none}
  .hero__cta{max-width:none;width:100%}
  input,select,textarea{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pulse{animation:none}
  .btn:hover,.card:hover,.job:hover{transform:none}
}

/* ---------- the request form, styled to match the band it sits in --------- */
#reqForm input,#reqForm select,#reqForm textarea{
  background:rgba(198,200,206,.06);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.85rem 1rem;color:var(--tx);font-family:inherit;font-size:1rem;width:100%}
#reqForm textarea{resize:vertical;min-height:88px}
#reqForm select{cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--chrome-lo) 50%),
                   linear-gradient(135deg,var(--chrome-lo) 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 14px) center;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
#reqForm select option{background:var(--bg-2);color:var(--tx)}
#reqForm input:focus,#reqForm select:focus,#reqForm textarea:focus{outline:0;border-color:var(--sig)}
#reqForm input::placeholder,#reqForm textarea::placeholder{color:var(--tx-3)}
#reqForm .btn{width:100%;max-width:none}
.msg{display:none;padding:.9rem 1.1rem;border-radius:var(--r-sm);font-size:.94rem}
.msg--ok{display:block;background:rgba(62,207,142,.14);border:1px solid var(--ok);color:var(--tx)}
.msg--err{display:block;background:rgba(255,120,80,.1);border:1px solid #FF7850;color:#FFC9B8}
.msg--err a{color:var(--tx);border-bottom:1px solid #FF7850}
@media (max-width:760px){ .f-row{grid-template-columns:1fr !important} }

/* ==========================================================================
   NAVIGATION. The first Chrome build shipped with no menu at all — fine for a
   one-page landing, wrong for a site that is about to be 925 pages.
   ========================================================================== */
.head .wrap{position:relative}
.head__logo{flex:0 0 auto}
.nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.9rem);margin-left:auto}
.nav a{color:var(--tx-2);font-size:.94rem;font-weight:500;padding:.4rem 0;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav a:hover{color:var(--tx);border-bottom-color:var(--sig)}
.nav__cta{background:var(--sig);color:var(--sig-ink)!important;border-radius:var(--r-sm);
  padding:.7em 1.2em!important;font-weight:700;border-bottom:0!important}
.nav__cta:hover{border-bottom-color:transparent!important;filter:brightness(1.07)}
.burger{display:none;background:rgba(198,200,206,.06);border:1px solid var(--line);
  border-radius:var(--r-sm);width:48px;height:48px;cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;margin-left:auto}
.burger span{display:block;width:20px;height:2px;background:var(--tx);border-radius:2px;
  transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- links inside running text ------------------------------------- */
.lnk{color:var(--sig);border-bottom:1px solid rgba(255,176,32,.4)}
.lnk:hover{border-bottom-color:var(--sig)}
.band__m{color:var(--sig);display:block;margin-bottom:.9rem}
.band p a{color:var(--sig)}
.mi{color:var(--tx-3)}
.areas__all{border-color:var(--sig)!important;color:var(--sig)!important}

/* ==========================================================================
   REQUEST PAGE
   ========================================================================== */
.sec--top{padding-top:clamp(1.5rem,3vw,2.5rem)}
.crumbs{display:flex;gap:.6rem;align-items:center;color:var(--tx-3);font-size:.88rem;
  margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.crumbs a{color:var(--tx-2)}
.crumbs a:hover{color:var(--sig)}

.req{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:start}
.req__form .sec__head h1{font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:.9rem}
.req form{display:grid;gap:1.1rem;max-width:640px}
.req label{display:grid;gap:.45rem}
.req label .m{color:var(--tx-3)}
.opt{text-transform:none;letter-spacing:0;color:var(--tx-3);font-weight:400}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
#reqForm input,#reqForm select,#reqForm textarea{
  background:rgba(198,200,206,.06);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.9rem 1rem;color:var(--tx);font-family:inherit;font-size:1rem;width:100%}
#reqForm textarea{resize:vertical;min-height:110px}
#reqForm select{cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--chrome-lo) 50%),
                   linear-gradient(135deg,var(--chrome-lo) 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 14px) center;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
#reqForm select option{background:var(--bg-2);color:var(--tx)}
#reqForm input:focus,#reqForm select:focus,#reqForm textarea:focus{outline:0;border-color:var(--sig)}
#reqForm input::placeholder,#reqForm textarea::placeholder{color:var(--tx-3)}
#reqForm .btn{width:100%;max-width:none}
.req__fine{color:var(--tx-3);font-size:.85rem;line-height:1.6}
.req__fine a{color:var(--tx-2);border-bottom:1px solid var(--line)}

.msg{display:none;padding:.95rem 1.15rem;border-radius:var(--r-sm);font-size:.95rem;line-height:1.55}
.msg--ok{display:block;background:rgba(62,207,142,.13);border:1px solid var(--ok);color:var(--tx)}
.msg--err{display:block;background:rgba(255,120,80,.1);border:1px solid #FF7850;color:#FFCFC0}
.msg--err a{color:#fff;border-bottom:1px solid #FF7850}

/* same bare-track trap one level down: without minmax(0,…) the image's own
   intrinsic width becomes the column's floor and it hangs off a 320px screen */
.req__side{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;position:sticky;top:78px}
.req__side > img{border-radius:var(--r);border:1px solid var(--line);
  aspect-ratio:4/3;object-fit:cover;width:100%}
.req__panel{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  padding:1.5rem 1.6rem}
.req__panel h2{font-size:1.15rem;margin-bottom:.9rem}
.req__num{display:inline-block;font-size:1.65rem;font-weight:700;letter-spacing:-.04em;
  color:var(--sig);margin-bottom:1.1rem}
.req__panel ul{display:grid;gap:.6rem;margin-bottom:1.1rem}
.req__panel li{display:flex;gap:.6em;align-items:flex-start;color:var(--tx-2);font-size:.92rem}
.req__panel li svg{color:var(--ok);flex:0 0 auto;margin-top:.25em}
.req__note{color:var(--tx-3);font-size:.9rem;line-height:1.6;margin-top:.7rem}
.req__note a{color:var(--tx-2);border-bottom:1px solid var(--line)}
.req__note a:hover{color:var(--sig);border-bottom-color:var(--sig)}

.close__cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.close__cta .btn{max-width:320px}

@media (max-width:1080px){
  /* minmax(0,…), not a bare 1fr: a bare track keeps min-width:auto on its item,
     so at 320px the form column refused to go below 343px and pushed the page
     off-screen. The desktop rule above already uses minmax for this reason. */
  .req{grid-template-columns:minmax(0,1fr)}
  .req__side{position:static}
}
@media (max-width:900px){
  .nav{position:fixed;inset:auto 0 0 0;top:0;flex-direction:column;align-items:stretch;
    justify-content:flex-start;gap:0;padding:5.6rem var(--pad) 2rem;
    background:rgba(16,18,22,.97);backdrop-filter:blur(18px);z-index:85;
    transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
    overflow-y:auto}
  .nav[data-open="true"]{transform:none}
  .nav a{padding:1.15rem 0;border-bottom:1px solid var(--line);font-size:1.1rem;color:var(--tx)}
  .nav__cta{margin-top:1.4rem;text-align:center;padding:1em!important;font-size:1.05rem}
  .burger{display:flex;position:relative;z-index:86}
  .f-row{grid-template-columns:1fr}
  .close__cta{flex-direction:column}
  .close__cta .btn{max-width:none}
}
@media (prefers-reduced-motion:reduce){ .nav{transition:none} }

/* ---------- generated pages: prose + split hero -------------------------- */
.prose{max-width:72ch}
.prose p{color:var(--tx-2);line-height:1.75;margin-bottom:1.1rem}
.prose p:last-child{margin-bottom:0}
.prose a{color:var(--sig);border-bottom:1px solid rgba(255,176,32,.35)}
.prose a:hover{border-bottom-color:var(--sig)}
.hero__town{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:start}
.hero__town .shot{position:sticky;top:78px}
.hero__town .shot img{aspect-ratio:4/3}
.sec__head h1{font-size:clamp(1.95rem,4.2vw,3rem);margin-bottom:.9rem;letter-spacing:-.035em}
@media (max-width:1080px){
  .hero__town{grid-template-columns:1fr}
  .hero__town .shot{position:static}
}

/* ==========================================================================
   PHONE — second pass, after testing the page types the first pass never saw
   (town hubs, service pages, blog posts). Measured on a real 375px viewport.
   ========================================================================== */

/* The closed menu was only translated off-screen: still in the tab order, so
   keyboard focus walked into an invisible panel, and it registered as document
   overflow. Hide it properly when closed. */
@media (max-width:900px){
  .nav{visibility:hidden;pointer-events:none}
  .nav[data-open="true"]{visibility:visible;pointer-events:auto}
}

/* The first mobile block stopped at 760px but the burger appears at 900px, so
   between those two widths the menu was mobile and the type was not. */
@media (max-width:900px){
  .stat{padding:1.15rem .6rem}
  .handle,.jobs{grid-template-columns:1fr}
  /* (.foot__top handled further down; a later block wins) */
  .head__where{display:none}
  .callbar{display:flex}
  body{padding-bottom:78px}
  .btn{min-height:52px;width:100%;max-width:none}
  .hero__cta,.close__cta{max-width:none;width:100%}
  .close__cta{flex-direction:column}
  input,select,textarea{font-size:16px}

  /* nothing under 12px */
  .m,.job__n,.foot h4,.stat span,.card__b p,.job p,.hero__fine,.bar__live,
  .cat__n,.req__fine,.crumbs,.mi{font-size:.82rem}
  .foot p,.foot a,.req__note{font-size:.9rem}

  /* 44px minimum on anything you tap */
  .areas a,.foot__soc a,.foot li a,.job__go,.crumbs a,
  .foot__bottom a,.head__logo,.bar__tel,.nav a{
    min-height:44px;display:inline-flex;align-items:center}
  .crumbs{gap:.5rem;flex-wrap:wrap}
  .foot__bottom{gap:.4rem 1.6rem}
  .faq summary{min-height:56px}
}

/* /about/ shows two photographs stacked instead of one — the van and the bench
   inside it. The bench shot was generated, passed QC, and had nowhere to live. */
.shot--pair{display:grid;gap:1rem}
.shot--pair img{width:100%;border-radius:var(--r);border:1px solid var(--line);
  aspect-ratio:4/3;object-fit:cover}

/* ==========================================================================
   REQUEST BAND — the form, now on the home page as well as /request/.
   ========================================================================== */
.reqband{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:start;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.6rem,3.5vw,3rem)}
.reqband .sec__head{margin-bottom:1.8rem}
.reqband .sec__head h2{font-size:clamp(1.6rem,3.2vw,2.4rem)}
.reqband form{display:grid;gap:1.1rem;max-width:none}
.reqband__side{display:grid;gap:1rem}
.reqband__side .req__panel{background:var(--bg-3)}
.reqband__side h3{font-size:1.05rem;margin-bottom:.9rem}
.reqband__hours{display:grid;gap:.5rem;margin-bottom:1.1rem}
.reqband__hours li{display:flex;justify-content:space-between;gap:1rem;
  padding-bottom:.5rem;border-bottom:1px solid var(--line-2);font-size:.92rem}
.reqband__hours li:last-child{border-bottom:0}
.reqband__hours b{font-weight:600}
.reqband__hours span{color:var(--tx-2)}
.reqband__steps{display:grid;gap:.85rem;margin:0;padding:0;list-style:none;counter-reset:s}
.reqband__steps li{display:flex;gap:.8rem;align-items:flex-start;color:var(--tx-2);font-size:.92rem}
.reqband__steps b{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--sig);color:var(--sig-ink);display:grid;place-items:center;
  font-size:.8rem;font-weight:700}

@media (max-width:1080px){ .reqband{grid-template-columns:1fr} }
@media (max-width:900px){
  .reqband{padding:1.4rem}
  .reqband .f-row{grid-template-columns:1fr}
}

/* Related-service cards: tighter than the home page grid, and no description —
   the point is the destination, not a second paragraph about it. */
.jobs--tight{grid-template-columns:repeat(4,1fr)}
.jobs--tight .job{padding:1.2rem 1.3rem}
.jobs--tight .job h3{font-size:1rem;margin-bottom:.9rem}
.readnext{margin-top:1.6rem;color:var(--tx-2);font-size:.95rem}
@media (max-width:1080px){ .jobs--tight{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .jobs--tight{grid-template-columns:1fr} }

/* Town hub: services grouped by category rather than one flat list of chips.
   A visitor scanning for "my car" should not have to read 24 names to find it,
   and a crawler gets four labelled clusters instead of one undifferentiated bag. */
.catgroup{border-top:1px solid var(--line);padding-top:1.4rem;margin-top:2rem}
.catgroup:first-of-type{margin-top:0}
.catgroup__head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.catgroup__title .m{color:var(--sig);display:block;margin-bottom:.35rem}
.catgroup__title h3{font-size:1.25rem;letter-spacing:-.03em}
.catgroup__title:hover h3{color:var(--sig)}
.catgroup__all{color:var(--tx-2);font-size:.9rem;border-bottom:1px solid var(--line)}
.catgroup__all:hover{color:var(--sig);border-bottom-color:var(--sig)}
@media (max-width:900px){
  .catgroup__head{flex-direction:column;align-items:flex-start;gap:.5rem}
  .catgroup__all{min-height:44px;display:inline-flex;align-items:center}
}

.catgroup__lede{color:var(--tx-2);max-width:70ch;margin-bottom:1.4rem;line-height:1.65}
.catgroup .jobs{margin-top:0}

/* ==========================================================================
   FOOTER — carries the full service and town lists. Standard for a local
   service network: it puts every page one click from every other page, which
   is how a 915-page site gets crawled to the bottom rather than only the top.
   ========================================================================== */
.foot__top{grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr))}
.foot__reach{margin-top:1.1rem;color:var(--tx-2);font-size:.9rem;line-height:1.7;overflow-wrap:anywhere}
.foot__reach a{color:var(--tx-2)}
.foot__reach a:hover{color:var(--sig)}
.foot__reach b{color:var(--sig);font-size:1.15rem;letter-spacing:-.02em}
.foot__cta{display:inline-flex;align-items:center;margin-top:1.2rem;background:var(--sig);
  color:var(--sig-ink);padding:.75em 1.2em;border-radius:var(--r-sm);font-weight:700;font-size:.9rem}
.foot__cta:hover{filter:brightness(1.07)}
.foot h4 a{color:var(--sig)}
.foot h4 a:hover{filter:brightness(1.12)}

.foot__towns{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,3vw,3rem);
  padding:2.2rem 0;border-top:1px solid var(--line)}
.foot__townlist{columns:3;column-gap:1.4rem}
.foot__townlist li{break-inside:avoid;margin-bottom:.4rem}

@media (max-width:1080px){
  .foot__top{grid-template-columns:1fr 1fr 1fr}
  .foot__townlist{columns:2}
}
@media (max-width:760px){
  .foot__top{grid-template-columns:1fr}
  .foot__towns{grid-template-columns:1fr;gap:1.6rem}
  .foot__townlist{columns:2}
}
@media (max-width:900px){
  .foot__townlist li a,.foot li a{min-height:40px;display:inline-flex;align-items:center}
}

/* ==========================================================================
   WIZARD FORM — the All Seasons 3-step layout, in this site's skin.
   Numbered steps, big option buttons, floating labels, one callback button.
   ========================================================================== */
.wiz{display:grid;gap:1.6rem}
.wiz__label{display:flex;align-items:center;gap:.7em;font-family:var(--f-m);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-2);
  margin-bottom:.9rem}
.wiz__n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--sig);color:var(--sig-ink);font-family:var(--f);font-size:.8rem;font-weight:700}
.wiz__opts{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.wiz__opt{background:rgba(198,200,206,.06);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:1rem 1.1rem;color:var(--tx);font-family:inherit;
  font-size:.95rem;font-weight:600;cursor:pointer;text-align:left;
  transition:border-color .15s,background .15s,transform .12s}
.wiz__opt:hover{border-color:var(--sig);transform:translateY(-1px)}
.wiz__opt.on{background:rgba(255,176,32,.14);border-color:var(--sig);color:var(--sig)}
.wiz__opts--svc{grid-template-columns:repeat(2,1fr)}
.wiz__opt--svc{padding:.8rem 1rem;font-weight:500;font-size:.9rem}
/* JS marks the wizard live and filters step 2 to the chosen category */
[data-wiz].js .wiz__opt--svc{display:none}
[data-wiz].js .wiz__opt--svc.show{display:block}
[data-wiz].js .wiz__hint{display:block}
.wiz__hint{display:none;color:var(--tx-3);font-size:.88rem;padding:.4rem 0}
[data-wiz].js [data-wiz-svc-field]{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0)}

/* floating labels */
.wiz__fields{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.wfield{position:relative}
.wfield--full{grid-column:1/-1}
.wfield input,.wfield select{width:100%;background:rgba(198,200,206,.06);
  border:1px solid var(--line);border-radius:var(--r-sm);color:var(--tx);
  font-family:inherit;font-size:16px;padding:1.35em 1em .55em}
.wfield input:focus,.wfield select:focus{outline:0;border-color:var(--sig)}
.wfield label{position:absolute;left:1em;top:50%;transform:translateY(-50%);
  color:var(--tx-3);font-size:.95rem;pointer-events:none;
  transition:top .15s ease,font-size .15s ease,color .15s ease}
.wfield input:focus + label,
.wfield input:not(:placeholder-shown) + label,
.wfield label.wfield__fixed{top:.85em;transform:none;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tx-2)}
.wfield select option{background:var(--bg-2);color:var(--tx)}

.wiz__submit{width:100%;max-width:none;position:relative}
.wiz__submit[disabled] .wiz__submit-label{visibility:hidden}
.wiz__submit[disabled]::after{content:"";position:absolute;width:20px;height:20px;
  border-radius:50%;border:3px solid rgba(20,15,2,.3);border-top-color:var(--sig-ink);
  animation:wspin .7s linear infinite}
@keyframes wspin{to{transform:rotate(360deg)}}

@media (max-width:640px){
  .wiz__opts,.wiz__opts--svc,.wiz__fields{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .wiz__opt:hover{transform:none}
  .wiz__submit[disabled]::after{animation:none}
}

/* ==========================================================================
   COVERAGE MAP
   Real county outlines, fifty towns at their true coordinates. The dots are a
   visual affordance for pointer users; the list beside them is the real
   navigation — it is crawlable, keyboard-reachable, and sized for thumbs. On
   phones the dots stop taking taps entirely, because a 15px target next to
   forty-nine neighbours is a trap, not a feature.
   ========================================================================== */
.m-wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,3vw,48px);align-items:start}
.m-fig{position:relative;background:radial-gradient(120% 90% at 50% 0%,var(--bg-3) 0%,var(--bg-2) 70%);
  border:1px solid var(--line);border-radius:var(--r);padding:18px 10px 8px}
.m-svg{display:block;width:100%;height:auto;overflow:visible}
.m-cty{fill:#232833;stroke:var(--chrome-lo);stroke-width:2.5;stroke-linejoin:round}
.m-sussex{fill:#272D39}
.m-cname{fill:var(--chrome);opacity:.20;font:700 44px/1 system-ui,sans-serif;letter-spacing:.16em}
.m-dot circle:first-child{fill:var(--chrome);stroke:var(--bg);stroke-width:2.5;transition:fill .15s,r .15s}
.m-hit{fill:transparent}
.m-dot:hover circle:first-child,.m-dot.is-hot circle:first-child{fill:var(--sig);r:10}
.m-dot.is-on circle:first-child{fill:var(--sig);stroke:var(--sig-ink)}
.m-lab{fill:var(--tx-2);font:600 25px/1 system-ui,sans-serif;paint-order:stroke;
  stroke:var(--bg-2);stroke-width:5px;stroke-linejoin:round}
.m-lab.is-on{fill:var(--sig)}
.m-note{margin:10px 4px 2px;color:var(--tx-3);font-size:.86rem;text-align:center}
.m-col+.m-col{margin-top:22px}
.m-colh{margin:0 0 12px;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-2)}
.m-colh span{color:var(--sig);font-weight:700}
.m-towns{display:flex;flex-wrap:wrap;gap:8px}
.m-towns a{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border-radius:999px;
  background:var(--bg-2);border:1px solid var(--line);color:var(--tx);text-decoration:none;font-size:.93rem;
  transition:background .15s,border-color .15s,color .15s}
.m-towns a:hover,.m-towns a:focus-visible{background:var(--bg-3);border-color:var(--sig);color:var(--sig)}
.m-towns a.is-on,.m-towns a.is-hot{border-color:var(--sig);color:var(--sig)}
@media (max-width:860px){
  .m-wrap{grid-template-columns:1fr}
  .m-dot{pointer-events:none}
  .m-cname{font-size:52px}
  .m-lab{font-size:29px}
}
.m-labA:hover .m-lab,.m-labA.is-hot .m-lab{fill:var(--sig)}
.m-more{margin-top:18px;text-align:center}
.m-wrap--side .m-list{padding-top:4px}
@media (max-width:860px){.m-labA{pointer-events:none}}
/* A bare stats row has no <section class="wrap"> around it, so it inherits none
   of the spacing the section blocks provide — the form, the card grid and the
   coverage map all sat flush against its bottom border. */
.stats--bare{margin-block:2rem}
.stats{container-type:inline-size}
@container (max-width:1000px){ .stat b{font-size:2rem} }
@container (max-width:800px){ .stat b{font-size:1.75rem} }
@container (max-width:640px){ .stat{padding:1.15rem .45rem} .stat b{font-size:1.5rem} .stat span{font-size:.78rem} }
@container (max-width:460px){ .stat b{font-size:1.25rem} }