/* base.css — shared by every direction. Colours and type come from the
   direction's variables; nothing here names a hex that is not his (slate,
   cream, gold) or Google's (the reviews unit). No uppercase-plus-tracking
   anywhere: that is the eyebrow the grammar gate bans. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:var(--body-w,400) 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
h1,h2,h3{font-family:var(--f-display);color:var(--head);line-height:1.12;margin:0 0 .5em;font-weight:var(--head-w,700)}
p{margin:0 0 1em}
ul{margin:0;padding:0}
table{border-collapse:collapse;width:100%}
q{quotes:"\201C" "\201D"}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--pad)}
:root{--pad:16px;--slate:#334355;--cream:#FFF5E7;--gold:#FFC650;--gold2:#EDB63B;--focus:#1A57C2}
@media (min-width:760px){:root{--pad:32px}}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:#000;padding:10px 14px}
.skip:focus{left:8px;top:8px}
[hidden]{display:none!important}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 20px;font:600 17px/1 var(--f-ui,var(--f-body));text-decoration:none;border:0;cursor:pointer;border-radius:var(--radius,0)}
.btn svg{width:20px;height:20px;fill:currentColor;flex:none}
.btn-call{background:var(--call-bg);color:var(--call-ink)}
.btn-wa{background:var(--wa-bg,#fff);color:var(--wa-ink,#14532d);box-shadow:inset 0 0 0 2px var(--wa-line,#1f7a44)}
.btn-send{background:var(--send-bg);color:var(--send-ink);width:100%}
.btn:hover{filter:brightness(1.06)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.cta-row .btn{flex:1 1 100%}
@media (min-width:560px){.cta-row .btn{flex:1 1 200px}}

/* ---- the register line ---- */
.reg{font-size:15px;line-height:1.45;margin:0}
.reg span{margin-right:4px}

/* ---- sources ---- */
.src{font-size:13.5px;line-height:1.45;color:var(--muted);margin:.6em 0 0}
.src a{color:inherit}

/* ---- the quote form ---- */
.qf{background:var(--card);color:var(--card-ink);padding:18px 16px 16px;border:var(--card-line,0)}
.qf-h{font:var(--head-w,700) 22px/1.2 var(--f-display);margin:0 0 12px;color:var(--card-head,var(--card-ink))}
.qf-grid{display:grid;gap:11px}
.f{display:grid;gap:5px;font-size:15px;font-weight:600;line-height:1.3}
.f b{color:var(--req,#9b1c1c);font-weight:700}
.f i{font-style:normal;font-weight:400;color:var(--card-muted)}
.f input[type=text],.f input[type=tel],.f input[type=date],.f select{width:100%;min-height:48px;padding:10px 12px;font:400 17px/1.3 var(--f-body);color:#111;background:#fff;border:1.5px solid var(--field-line);border-radius:var(--field-radius,0)}
.f input[type=file]{font:400 15px/1.3 var(--f-body);max-width:100%}
.f small{font-weight:400;font-size:14px;color:var(--card-muted);line-height:1.4}
.f-photo{padding:10px 12px;border:1.5px dashed var(--field-line)}
.qf-send{margin-top:14px}
.qf-note{font-size:14px;margin:8px 0 0;color:var(--card-muted)}
@media (min-width:560px){.qf-grid{grid-template-columns:1fr 1fr}.qf-grid .f-photo,.qf-grid .f-props{grid-column:1/-1}}

/* ---- tables ---- */
.codes caption,.rec caption{text-align:left;font-size:14px;color:var(--muted);padding:0 0 6px}
.codes th,.codes td,.rec th,.rec td{text-align:left;vertical-align:top;padding:10px 10px 10px 0;border-top:1px solid var(--rule);font-size:15.5px;line-height:1.45}
.codes thead th,.rec thead th{font-size:13.5px;color:var(--muted);font-weight:600;border-top:0}
.code{display:inline-block;min-width:2.6em;padding:3px 6px;text-align:center;font:600 15px/1.2 var(--f-data,var(--f-body));background:var(--code-bg);color:var(--code-ink)}
@media (max-width:559px){.codes thead{display:none}.codes tr{display:grid;grid-template-columns:3.4em 1fr;border-top:1px solid var(--rule);padding:8px 0}.codes th,.codes td{border:0;padding:2px 0}.codes td:last-child{grid-column:2}}

/* ---- Google reviews (Tonbridge unit, restyled to the page ground) ---- */
.gr-defs{position:absolute;width:0;height:0;overflow:hidden}
.gr{--g-star:#FBBC04;--g-off:#9aa0a6;background:var(--gr-bg);color:var(--gr-ink);padding:26px 0 20px}
.gr-in{max-width:1200px;margin:0 auto}
.gr-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 var(--pad);margin:0 0 14px}
.gr-brand{display:flex;align-items:center;gap:14px;min-width:0}
.gr-gbox{width:52px;height:52px;flex:none;background:#fff;border-radius:50%;display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.gr-gbox svg{width:30px;height:30px}
.gr .gr-h{font:700 21px/1.1 var(--f-body);margin:0;color:var(--gr-ink)}
.gr-score{margin:6px 0 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15.5px;line-height:1}
.gr-score b{font-size:24px;font-weight:700}
.gr-score a{color:var(--gr-link);font-weight:700}
.gr-stars{position:relative;display:inline-block;line-height:0;white-space:nowrap}
.gr-stars .off,.gr-stars .on{display:inline-flex;gap:1px}
.gr-stars .on{position:absolute;left:0;top:0;overflow:hidden}
.gr-stars svg{width:19px;height:19px;flex:none;fill:var(--g-off)}
.gr-stars .on svg{fill:var(--g-star)}
.gr-nav{display:flex;gap:9px;visibility:hidden;flex:none}
.gr--js .gr-nav{visibility:visible}
.gr-nav button,.cw-nav button{width:44px;height:44px;padding:0;border-radius:50%;background:var(--arrow-bg,#fff);color:var(--arrow-ink,#202124);border:1.5px solid var(--arrow-line,#dadce0);font-size:19px;cursor:pointer;display:grid;place-items:center}
.gr-nav button:disabled,.cw-nav button:disabled{opacity:.35;cursor:default}
.gr-row{display:flex;align-items:stretch;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--pad) 16px;scroll-padding:0 var(--pad);scrollbar-width:none}
.gr-row::-webkit-scrollbar{display:none}
.gr-row::after{content:"";flex:0 0 1px}
.gr-q{flex:0 0 86%;scroll-snap-align:start;margin:0;background:#fff;color:#202124;border-radius:12px;padding:18px 18px 14px;box-shadow:0 1px 3px rgba(60,64,67,.25),0 1px 2px rgba(60,64,67,.12);position:relative}
.gr-who{display:flex;align-items:center;gap:11px;margin:0 0 9px}
.gr-av{width:40px;height:40px;border-radius:50%;flex:none;background-position:center;background-size:cover;color:#fff;display:grid;place-items:center;font:700 17px/1 var(--f-body)}
.gr-nm{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1}
.gr-nm a,.gr-nm span{font:700 15.5px/1.25 var(--f-body);color:#202124;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-nm small{font-size:13.5px;color:#5F6368}
.gr-gs{width:22px;height:22px;flex:none}.gr-gs svg{width:22px;height:22px}
.gr-q .gr-stars svg{width:17px;height:17px}.gr-q .gr-stars .off svg{fill:#DADCE0}
.gr-txt{margin:10px 0 0;font:400 15.5px/1.55 var(--f-body);white-space:pre-line;color:#202124}
.gr-mt{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.gr-mt ~ .gr-txt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
.gr-mt:checked ~ .gr-txt{display:block;overflow:visible}
.gr-more{display:inline-block;margin:8px 0 0;font:700 14.5px/1 var(--f-body);color:#1A57C2;cursor:pointer}
.gr-more .b,.gr-mt:checked ~ .gr-more .a{display:none}.gr-mt:checked ~ .gr-more .b{display:inline}
.gr-dots{display:flex;justify-content:center;gap:7px;height:9px}
.gr-dots i{width:9px;height:9px;border-radius:5px;background:var(--g-off);transition:width .2s}
.gr-dots i.on{width:24px;background:var(--gr-link)}
.gr-foot{font-size:13.5px;color:var(--gr-muted);margin:10px var(--pad) 0}
@media (min-width:760px){.gr-q{flex-basis:calc((100% - 2 * 16px) / 3)}.gr-row{gap:16px}}

/* ---- before and after ---- */
.rv{margin:0}
.rv-stage{display:grid;gap:14px}
.rv-card{margin:0;background:var(--card);color:var(--card-ink)}
.rv-card img{width:100%}
.rv-card figcaption{padding:10px 12px 12px;font-size:15px;line-height:1.45}
.rv-card figcaption b{display:block;font:var(--head-w,700) 17px/1.2 var(--f-display);margin:0 0 2px}
.rv-cap{font-size:13.5px;color:var(--muted);margin:10px 0 0}
@media (min-width:760px){.rv-stage{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}}
/* JS on (and motion allowed): the after card sits over the before until the test button is pressed */
.rv--js .rv-stage{display:grid;grid-template-columns:1fr;max-width:620px}
.rv--js .rv-card{grid-area:1/1}
.rv--js .rv-after{opacity:0;transform:translateY(14px) scale(.985);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.rv--js.rv--on .rv-after{opacity:1;transform:none;pointer-events:auto}
.rv--js.rv--on .rv-before{opacity:.0;transition:opacity .35s ease}
.rv-before{max-width:620px}
.rv-ctl{margin:14px 0 0}
.rv-test{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:6px 16px 6px 6px;background:#fff;color:#1b1b1b;border:1.5px solid #9aa3ad;border-radius:6px;font:600 16px/1.2 var(--f-body);cursor:pointer}
.rv-t{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#e7e9ec;box-shadow:inset 0 -3px 0 #b8bec6,inset 0 0 0 2px #c8cdd3;font:700 18px/1 var(--f-body);color:#333}
.rv-test[aria-pressed=true] .rv-t{box-shadow:inset 0 3px 0 #b8bec6,inset 0 0 0 2px #c8cdd3;background:#dfe2e6}

/* ---- the charger wall ---- */
.cw{position:relative}
.cw-row{list-style:none;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 0 12px;scrollbar-width:thin}
.cw-card{flex:0 0 72%;max-width:300px;scroll-snap-align:start;background:var(--card);color:var(--card-ink)}
.cw-card img{width:100%;aspect-ratio:3/4;object-fit:cover}
.cw-wall{padding:10px 12px 12px;margin:0;font-size:14.5px;line-height:1.45}
.cw-wall b{display:block;font:var(--head-w,700) 16px/1.25 var(--f-display);margin:0 0 3px}
.cw-brand{display:block;font-size:13px;color:var(--card-muted)}
.cw-nav{display:flex;gap:9px;justify-content:flex-end;margin:6px 0 0}
@media (min-width:760px){.cw-card{flex-basis:260px}}

/* ---- the single-line diagram ---- */
.sld-box{margin:8px 0 0}
.sld{width:100%;height:auto;overflow:visible}
.sld-w{display:none}
@media (min-width:860px){.sld-w{display:block}.sld-t2{display:none}}
.sld-t2{max-width:420px}
.sld-l{fill:none;stroke:var(--sld-line);stroke-width:4;stroke-linecap:round}
.sld-n{fill:var(--sld-fill);stroke:var(--sld-line);stroke-width:4}
.sld-a{font:var(--head-w,700) 19px/1 var(--f-display);fill:var(--sld-ink)}
.sld-b{font:400 14.5px/1 var(--f-body);fill:var(--sld-muted)}
.sld-t{cursor:pointer}
.sld-t:hover .sld-n,.sld-t:focus .sld-n{fill:var(--sld-line)}
.sld-t:hover .sld-a{text-decoration:underline}
.sld--armed .sld-l{stroke-dasharray:1;stroke-dashoffset:1}
.sld--armed .sld-n{opacity:0}
.sld--on .sld-l{transition:stroke-dashoffset 1.2s ease}
.sld--on .sld-l{stroke-dashoffset:0}
.sld--on .sld-bus{transition-delay:.35s}
.sld--on .sld-t .sld-l{transition-delay:.9s}
.sld--on .sld-n{opacity:1;transition:opacity .4s ease 1.5s}
.sld--on .sld-src{transition-delay:0s}

/* ---- sticky call bar (mobile) ---- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--bar-bg);box-shadow:0 -2px 10px rgba(0,0,0,.18);padding-bottom:env(safe-area-inset-bottom)}
.sticky[hidden]{display:none}
.sticky a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:56px;color:var(--bar-ink);text-decoration:none;font:600 16px/1 var(--f-ui,var(--f-body))}
.sticky svg{width:19px;height:19px;fill:currentColor}
.sticky .sk-call{background:var(--call-bg);color:var(--call-ink)}
@media (min-width:900px){.sticky{display:none!important}}

/* ---- footer ---- */
.ft{background:var(--slate);color:#E9EDF2;font-size:15px;line-height:1.55;padding:40px 0 0;margin-top:0}
.ft a{color:#fff}
.ft-in{max-width:1200px;margin:0 auto;padding:0 var(--pad);display:grid;gap:26px 32px;grid-template-columns:1fr 1fr}
.ft-id{grid-column:1/-1}
.ft-id img{margin:0 0 14px}
.ft-h{font:700 16px/1.2 var(--f-display);color:var(--gold);margin:0 0 8px}
.ft ul{list-style:none}.ft li{margin:0 0 6px}
.ft-small,.ft-hrs{font-size:14px;color:#C9D1DB}
.ft-base{border-top:1px solid rgba(255,255,255,.18);margin-top:30px;padding:14px var(--pad) 90px;max-width:1200px;margin-left:auto;margin-right:auto;font-size:14px}
@media (min-width:900px){.ft-in{grid-template-columns:1.4fr 1fr 1fr 1fr 1.3fr}.ft-id{grid-column:auto}.ft-base{padding-bottom:18px}}

/* ---- motion: off entirely under reduced motion ---- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* THE SITE THEME: Direction B, The Registered Firm (picked 26 Sep), plus C's motion (end of file).
   B · The Registered Firm. White ground, slate ink (10.1:1), cream bands,
   gold only on slate. Libre Caslon Text for headings, Karla for everything
   else. Motion: 150 to 300 ms colour and underline changes, the menu
   opening, and the shared set; the rest is still. */
@font-face{font-family:"Libre Caslon Text";src:url(/fonts/libre-caslon-text-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url(/fonts/libre-caslon-text-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url(/fonts/libre-caslon-text-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Karla";src:url(/fonts/karla-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Karla";src:url(/fonts/karla-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Karla";src:url(/fonts/karla-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --f-display:"Libre Caslon Text",Georgia,serif;--f-body:"Karla",system-ui,sans-serif;--f-data:"Karla",sans-serif;--f-ui:"Karla",sans-serif;
  --ground:#fff;--ink:#334355;--head:#334355;--muted:#56637A;--rule:#D9D2C5;--link:#334355;--head-w:400;
  --card:#fff;--card-ink:#334355;--card-head:#334355;--card-muted:#56637A;--card-line:1px solid #D9D2C5;--field-line:#8A94A3;
  --call-bg:#334355;--call-ink:#FFF5E7;--wa-bg:#fff;--wa-ink:#14532d;--wa-line:#1f7a44;--send-bg:#334355;--send-ink:#FFF5E7;
  --code-bg:#334355;--code-ink:#FFC650;
  --gr-bg:#FFF5E7;--gr-ink:#334355;--gr-link:#334355;--gr-muted:#56637A;
  --sld-line:#FFC650;--sld-fill:#334355;--sld-ink:#FFF5E7;--sld-muted:#D5DCE5;
  --bar-bg:#FFF5E7;--bar-ink:#334355;--radius:0}
body{font-size:17.5px}
h1{font-size:clamp(32px,6.2vw,58px);line-height:1.08}
h2{font-size:clamp(28px,4.2vw,42px)}
h3{font-size:22px}
a{transition:color .2s ease,text-decoration-color .2s ease}
.band{background:var(--cream)}

/* ---- header ---- */
.hb-top{background:var(--cream);border-bottom:1px solid var(--rule);font:600 14.5px/1.3 var(--f-body)}
.hb-top-in{display:flex;gap:6px 18px;align-items:center;flex-wrap:wrap;min-height:38px;padding-top:5px;padding-bottom:5px}
.hb-top a{color:var(--ink);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.hb-top svg{width:15px;height:15px;fill:var(--ink)}
.hb-reg{display:none;margin-left:auto;font-weight:400}
.hb-reg a{text-decoration:underline}
.hb-mast{background:var(--slate)}
.hb-mast-in{display:flex;align-items:center;justify-content:space-between;min-height:84px}
.hb-logo img{width:170px}
.hb-menu summary{list-style:none;cursor:pointer;color:var(--cream);font:600 17px/1 var(--f-body);padding:11px 15px;border:1px solid rgba(255,245,231,.6)}
.hb-menu summary::-webkit-details-marker{display:none}
.hb-menu-p{position:absolute;left:0;right:0;z-index:40;background:#fff;border-bottom:3px solid var(--slate);padding:6px var(--pad) 16px;box-shadow:0 14px 24px rgba(0,0,0,.14)}
.hb{position:relative}
.hb-menu-p .mm-col{padding:10px 0;border-bottom:1px solid var(--rule)}
.mm-h{font:400 20px/1.2 var(--f-display);margin:0 0 6px}
.mm-h a{color:var(--head)}
.mm-col ul,.mm-plain{list-style:none}
.mm-col li a,.mm-plain a{display:block;padding:5px 0;color:var(--ink)}
.mm-plain{padding-top:8px}
.hb-nav{display:none;border-bottom:1px solid var(--rule)}
@media (min-width:1000px){
  .hb-reg{display:block}
  .hb-mast-in{justify-content:center;min-height:120px}
  .hb-logo img{width:230px}
  .hb-menu{display:none}
  .hb-nav{display:block}
  .hb-nav-in{display:flex;justify-content:center;gap:40px;font:600 17px/1 var(--f-body)}
  .hb-nav-in>a,.mm summary{display:block;padding:18px 0;color:var(--ink);text-decoration:none;border-bottom:2px solid transparent;cursor:pointer;list-style:none}
  .mm summary::-webkit-details-marker{display:none}
  .mm summary::after{content:" \25BE";font-size:13px}
  .hb-nav-in>a:hover,.mm summary:hover{border-bottom-color:var(--gold2)}
  .mm-p{position:absolute;left:0;right:0;z-index:40;background:#fff;border-top:1px solid var(--rule);border-bottom:3px solid var(--slate);box-shadow:0 14px 24px rgba(0,0,0,.12)}
  .mm-in{display:grid;grid-template-columns:repeat(4,1fr) 280px;gap:28px;padding-top:26px;padding-bottom:28px}
  .mm-fig{margin:0}.mm-fig figcaption{font-size:14px;color:var(--muted);margin-top:6px}
}

/* ---- hero: the headline over his photograph, on a measured slate wash ---- */
.hero-b{position:relative;background:var(--slate);color:var(--cream)}
.hero-b-ph{position:absolute;inset:0 0 auto 0;height:430px;overflow:hidden}
.hero-b-ph img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 35%)}
.hero-b-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(51,67,85,.8) 0%,rgba(51,67,85,.88) 50%,#334355 100%)}
.hero-b-in{position:relative;display:grid;gap:18px;padding-top:26px;padding-bottom:26px}
.hero-b h1{color:var(--cream)}
.hero-b .lede{font-size:18px;color:#F4EEE4}
.hero-b .btn-call{background:var(--gold);color:#1E2833}
.hero-b .btn-wa{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 2px var(--cream)}
.hero-b .hero-reg{color:#F4EEE4;font-size:14.5px}
.hero-b .hero-reg a{color:var(--gold)}
.hero-b .qf{box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hero-b-cap{position:relative;font-size:13.5px;color:#D5DCE5;margin:0;padding-bottom:12px}
@media (min-width:980px){
  .hero-b-ph{inset:0 0 0 38%;height:auto}
  .hero-b-ph::after{background:linear-gradient(90deg,#334355 0%,rgba(51,67,85,.8) 22%,rgba(51,67,85,.15) 60%,rgba(51,67,85,.1) 100%)}
  .hero-b-in{grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);gap:60px;padding-top:64px;padding-bottom:40px;align-items:start}
  .hero-b-copy{padding-top:20px}
}

/* ---- sections ---- */
.sec{padding:44px 0}
.intro{font-size:19px;max-width:40em}
.gr-b{padding:36px 0 26px}
.aud-b{display:grid;gap:0;margin:24px 0 36px;border-top:1px solid var(--rule)}
.aud{padding:20px 0;border-bottom:1px solid var(--rule)}
.aud h3{font-size:25px}
.more a{font-weight:700}
@media (min-width:860px){.aud-b{grid-template-columns:repeat(3,1fr);gap:40px;border:0}.aud{border-bottom:0;border-top:2px solid var(--slate);padding-top:18px}}
.read-b{max-width:40em;margin:0 auto 34px}
.read-b h3{font-size:26px;font-style:italic}
.read-b p{font-size:19px;line-height:1.7}
.codes-b{max-width:52em}
.codes-b dl{margin:0;border-top:1px solid var(--rule)}
.codes-b dl>div{padding:12px 0;border-bottom:1px solid var(--rule);display:grid;gap:4px}
.codes-b dt{font:400 20px/1.3 var(--f-display)}
.codes-b dd{margin:0}
@media (min-width:760px){.codes-b dl>div{grid-template-columns:18em 1fr;gap:20px}}
.rv-b-in{display:grid;gap:26px}
.rv-b .rv-card{border:1px solid var(--rule)}
@media (min-width:980px){.rv-b-in{grid-template-columns:.9fr 1.1fr;gap:56px}}
.cw-b .cw-card{border:1px solid var(--rule)}
.law{margin:14px 0 0;font-weight:600}
.sldsec-b{background:var(--slate);color:var(--cream)}
.sldsec-b h2{color:var(--cream)}
.sldsec-b .intro{color:#F4EEE4}
.sldsec-b a{color:var(--cream)}
.other-b-in{display:grid;gap:24px}
.svc-b{list-style:none;columns:2;column-gap:24px;margin-top:6px}
.svc-b li{padding:5px 0;border-bottom:1px solid var(--rule);break-inside:avoid}
.ph-b{margin:0}.ph-b figcaption{font-size:14px;color:var(--muted);margin-top:6px}
@media (min-width:900px){.other-b-in{grid-template-columns:1.2fr 1fr 1fr;align-items:start}}
.areas-l{list-style:none;border-top:1px solid var(--rule);margin:18px 0}
.areas-l li{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:13px 0;border-bottom:1px solid var(--rule)}
.areas-l a{font:400 22px/1.2 var(--f-display);grid-row:1/span 2}
.areas-l span{font-size:15px;color:var(--muted);text-align:right}
@media (min-width:760px){.areas-l li{grid-template-columns:1fr 12em 10em}.areas-l a{grid-row:auto}}
.close-b{padding:56px 0 64px}
.close-line{font:400 clamp(38px,7.4vw,86px)/1.04 var(--f-display);color:var(--head);margin:0 0 30px;max-width:12em}
.close-b-in{max-width:44em}
.close-b-in p{font-size:19px;line-height:1.7}

/* ======================================================================
   SITE ADDITIONS (26 Sep): the pieces every inner page needs.
   ====================================================================== */
.slate{background:var(--slate);color:var(--cream)}
.slate h2,.slate h3{color:var(--cream)}
.slate a{color:var(--cream)}
.slate .src{color:#D5DCE5}
.slate p{color:#F4EEE4}
.hb-call{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--gold);color:#1E2833;margin-left:auto;margin-right:10px}
.hb-call svg{width:20px;height:20px;fill:currentColor}
@media (min-width:1000px){.hb-call{display:none}}
.hb-nav-in>a[aria-current=page]{border-bottom-color:var(--slate)}
.mm-sm{position:relative}
.mm-p-sm{left:auto;right:auto;min-width:250px;padding:10px 18px}
.mm-p-sm ul{list-style:none}
.mm-p-sm a{display:block;padding:7px 0;color:var(--ink)}
@media (min-width:1000px){.mm-sm .mm-p{position:absolute;left:-18px;right:auto;top:100%;border-top:1px solid var(--rule)}}

/* breadcrumbs, over the hero */
.bc ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 0;margin:0 0 12px;padding:0;font-size:14.5px;color:#FFF5E7}
.bc li+li::before{content:"\203A";margin:0 8px;color:var(--gold)}
.bc a{color:#FFF5E7}

/* running prose */
.prose{max-width:42em}
.prose p{font-size:18.5px;line-height:1.7}
.prose h3{font-size:24px;margin-top:1.3em}
.lead-p{font-size:20px;line-height:1.6;max-width:40em}
.two{display:grid;gap:28px}
@media (min-width:960px){.two{grid-template-columns:1.15fr 1fr;gap:56px;align-items:start}}
.aside{border-top:2px solid var(--slate);padding-top:14px}
.aside h3{font-size:22px}
.note{font-size:15.5px;color:var(--muted)}
.pull{margin:0;padding:22px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pull blockquote{margin:0;font:400 italic clamp(21px,2.6vw,27px)/1.45 var(--f-display);color:var(--head)}
.pull figcaption{margin-top:12px;font-size:15px;color:var(--muted)}

/* definition lists, tables and checklists in B's register */
.dl{margin:0;border-top:1px solid var(--rule)}
.dl>div{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--rule)}
.dl dt{font:400 20px/1.3 var(--f-display);color:var(--head)}
.dl dd{margin:0}
@media (min-width:760px){.dl>div{grid-template-columns:15em 1fr;gap:24px}}
.tbl-wrap{overflow-x:auto}
.tbl{border-collapse:collapse;width:100%;min-width:520px}
.tbl caption{text-align:left;font-size:14.5px;color:var(--muted);padding:0 0 8px}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;border-top:1px solid var(--rule);font-size:16px;line-height:1.5}
.tbl thead th{font-size:14px;color:var(--muted);font-weight:600}
.tbl tbody th{font:400 18px/1.3 var(--f-display);color:var(--head)}
.check{list-style:none;border-top:1px solid var(--rule)}
.check li{display:grid;grid-template-columns:28px 1fr;gap:4px 12px;padding:14px 0;border-bottom:1px solid var(--rule)}
.check li::before{content:"";width:18px;height:18px;margin-top:5px;border:2px solid var(--slate);grid-row:1/span 2}
.check b{font:400 20px/1.3 var(--f-display);color:var(--head)}
.check span{grid-column:2}

/* FAQ, native disclosure */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;position:relative;font:400 20px/1.35 var(--f-display);color:var(--head)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font:400 26px/1 var(--f-body);color:var(--slate)}
.faq details[open] summary::after{content:"\2212"}
.faq-a{padding:0 0 16px;max-width:44em}

/* related links */
.rel{list-style:none;display:grid;gap:0;border-top:1px solid var(--rule)}
.rel a{display:block;padding:14px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.rel b{display:block;font:400 21px/1.3 var(--f-display);color:var(--head);text-decoration:underline;text-decoration-color:var(--gold2);text-underline-offset:4px}
.rel span{font-size:15.5px;color:var(--muted)}
@media (min-width:860px){.rel{grid-template-columns:repeat(3,1fr);column-gap:32px}}

/* the figure with numbered callouts (photo 17) */
.callout{position:relative;margin:0}
.callout .pin{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:var(--gold);color:#1E2833;display:grid;place-items:center;font:700 16px/1 var(--f-body);box-shadow:0 0 0 3px #1E2833}
.callout figcaption{font-size:14.5px;color:var(--muted);margin-top:8px}
.legend{list-style:none;counter-reset:l;margin:16px 0 0;border-top:1px solid var(--rule)}
.legend li{counter-increment:l;display:grid;grid-template-columns:34px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule)}
.legend li::before{content:counter(l);width:30px;height:30px;border-radius:50%;background:var(--gold);color:#1E2833;display:grid;place-items:center;font:700 15px/1 var(--f-body)}
.legend b{display:block;font:400 19px/1.3 var(--f-display);color:var(--head)}

/* specimen report, the due-date tool, the alarm diagram */
.spec{background:#fff;border:1px solid var(--rule);box-shadow:0 12px 30px rgba(51,67,85,.10);padding:18px;max-width:640px;font-size:14.5px}
.spec-h{display:flex;justify-content:space-between;gap:10px;border-bottom:2px solid var(--slate);padding-bottom:8px;margin-bottom:10px;font:400 18px/1.2 var(--f-display);color:var(--head)}
.spec-h span{font:600 12.5px/1.3 var(--f-body);color:var(--muted);text-align:right}
.spec ol{list-style:none;counter-reset:s;margin:0;padding:0}
.spec li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:10px;padding:9px 0;border-bottom:1px dashed var(--rule)}
.spec li::before{content:counter(s);font:600 13px/24px var(--f-body);background:var(--cream);color:var(--head);text-align:center;height:24px}
.spec li b{display:block;color:var(--head)}
.spec-row{display:grid;grid-template-columns:1fr 60px;gap:8px;margin-top:6px;font-size:13px}
.spec-row span{border:1px solid var(--rule);padding:4px 6px;color:var(--muted)}
.due{background:var(--cream);border:1px solid var(--rule);padding:18px}
.due label{display:block;font:400 21px/1.3 var(--f-display);color:var(--head);margin-bottom:8px}
.due input{min-height:48px;padding:8px 12px;font:400 17px/1 var(--f-body);border:1.5px solid var(--field-line);background:#fff;max-width:100%}
.due-out p{margin:10px 0 0;font-size:17px}
.due-out p:first-child{font-weight:700}
.house{max-width:560px}
.house svg{width:100%;height:auto}
.house .hl{fill:none;stroke:var(--slate);stroke-width:2.5}
.house .fl{fill:var(--cream);stroke:var(--slate);stroke-width:1.5}
.house .al{fill:#fff;stroke:var(--slate);stroke-width:2}
.house .co{fill:var(--gold);stroke:#1E2833;stroke-width:2}
.house text{font:600 13px/1 var(--f-body);fill:var(--head)}
.house .tx{font:400 12.5px/1 var(--f-body);fill:var(--muted)}
.mech{display:grid;gap:22px;align-items:start}
.mech-fig{background:var(--slate);color:var(--cream);padding:22px 20px}
.mech-fig b{display:block;font:400 clamp(52px,9vw,84px)/1 var(--f-display);color:var(--gold)}
.mech-fig span{display:block;margin-top:10px;font-size:16px;line-height:1.5;color:#F4EEE4}
.mech-fig .src{color:#D5DCE5}
.mech-fig .src a{color:#fff}
@media (min-width:900px){.mech{grid-template-columns:320px 1fr;gap:48px}}
.map{margin:0}
.map img{border:1px solid var(--rule);width:100%}
.map figcaption{font-size:13.5px;color:var(--muted);margin-top:6px}
.thanks{padding:70px 0 80px}

/* ======================================================================
   FROM DIRECTION C, at Cameron's request: the motion.
   1. the header tightens as you scroll (state, 300 ms)
   2. the kit drawings draw themselves once, then lift on hover
   3. photographs settle in as they scroll into view (native, no script)
   4. cards lift on hover
   All four are off under prefers-reduced-motion.
   ====================================================================== */
.hb{position:sticky;top:-39px;z-index:45}
@media (max-width:999px){.hb{top:-39px}}
.hb-mast-in,.hb-logo img{transition:min-height .3s ease-in-out,width .3s ease-in-out}
.hb.tight .hb-mast-in{min-height:62px}
.hb.tight .hb-logo img{width:120px}
@media (min-width:1000px){.hb.tight .hb-mast-in{min-height:70px}.hb.tight .hb-logo img{width:150px}}

.kit-b{padding:34px 0 30px;border-bottom:1px solid var(--rule)}
.kit{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.kit li:last-child{grid-column:1/-1}
.kit a{display:block;height:100%;background:#fff;border:1px solid var(--rule);padding:16px 14px;text-decoration:none;color:var(--ink);transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease}
.kit a:hover{box-shadow:0 10px 24px rgba(51,67,85,.16);transform:translateY(-3px);border-color:var(--slate)}
.kit svg{width:78px;height:104px;fill:none;stroke:var(--slate);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;margin:0 0 10px}
.kit b{display:block;font:400 22px/1.15 var(--f-display);color:var(--head)}
.kit span{display:block;font-size:14px;color:var(--muted);margin-top:4px;line-height:1.4}
@media (min-width:860px){.kit{grid-template-columns:repeat(5,1fr)}.kit li:last-child{grid-column:auto}}
.kit--armed svg *{stroke-dasharray:1;stroke-dashoffset:1}
.kit--on svg *{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s ease}
.kit--on li:nth-child(2) svg *{transition-delay:.12s}
.kit--on li:nth-child(3) svg *{transition-delay:.24s}
.kit--on li:nth-child(4) svg *{transition-delay:.36s}
.kit--on li:nth-child(5) svg *{transition-delay:.48s}

.cw-card,.rel a,.areas-l li{transition:box-shadow .3s ease,transform .3s ease}
.cw-card:hover{box-shadow:0 10px 24px rgba(51,67,85,.16);transform:translateY(-3px)}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .sec .cw-card img,.sec .rv-card img,.sec .ph-b img,.sec .callout img,.sec .map img{animation:settle linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    @keyframes settle{from{transform:scale(1.06);opacity:.55}to{transform:none;opacity:1}}
    .cw-card,.rv-card,.ph-b,.callout{overflow:hidden}
  }
}
[id]{scroll-margin-top:150px}
.aside .rel{grid-template-columns:1fr}
@media (min-width:760px){.aside .dl>div{grid-template-columns:1fr;gap:4px}}
.two>*,.mech>*,.other-b-in>*,.rv-b-in>*{min-width:0}
.two .rel{grid-template-columns:1fr}
.ph-b img{max-height:620px;width:100%;object-fit:cover}
.aside .ph-b img{max-height:420px}
.rel-h{margin-top:1.4em}
.prose p.note{font-size:15px;line-height:1.5;color:var(--muted)}
.tbl-wrap:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ======================================================================
   THE POSTCODE-DISTRICT PAGES (2 Oct): the place hero, the ward table,
   the localities list, and the district pages nested under their towns
   in the menus, the footer and the homepage list.
   ====================================================================== */
.hero-place .place{margin:0}
.place-ph{position:relative;height:min(66.667vw,520px);overflow:hidden;background:var(--slate)}
.place-ph picture,.place-ph img{display:block;width:100%;height:100%}
.place-ph img{object-fit:cover;object-position:50% 50%}
.place-ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52px;background:linear-gradient(180deg,rgba(51,67,85,0) 0%,rgba(51,67,85,.72) 45%,rgba(51,67,85,.94) 75%,#334355 100%);pointer-events:none}
.place-cap{position:relative;font-size:13.5px;line-height:1.5;color:#D5DCE5;margin:0 auto;padding-top:6px;overflow-wrap:anywhere}
.place-cap a{color:#FFF5E7}
.hero-place .hero-b-in{padding-top:16px}
@media (min-width:980px){
  .place-ph{height:clamp(280px,29vw,460px)}
  .place-ph::after{height:72px}
  .place-cap{text-align:right;padding-top:8px}
  .hero-place .hero-b-in{padding-top:6px;padding-bottom:44px}
  .hero-place .hero-b-copy{padding-top:14px}
}
.tbl-w-wrap{margin-top:18px}
.tbl.tbl-w{min-width:0}
.tbl-w th,.tbl-w td{font-size:15.5px;padding:11px 10px 11px 0}
.tbl-w tbody th{font-size:17px}
.tbl-w tbody th small{display:block;font:400 14px/1.4 var(--f-body);color:var(--muted);margin-top:2px}
.tbl-w td:nth-child(2){white-space:nowrap}
@media (min-width:760px){.tbl-w th,.tbl-w td{font-size:16px;padding:12px 14px 12px 0}}
.loc{list-style:none;columns:2;column-gap:18px;margin:6px 0 4px;font-size:17px;line-height:1.5}
.loc li{break-inside:avoid;padding:3px 0}
.mm-sub,.ft-sub{list-style:none;margin:0 0 4px;padding-left:14px;border-left:2px solid var(--rule)}
.mm-p-sm .mm-sub a{padding:4px 0;font-size:15.5px}
.hb-menu-p .mm-sub a{padding:3px 0;font-size:15.5px}
.ft-sub{border-left-color:rgba(255,255,255,.22)}
.ft-sub a{font-size:14px}
.areas-l li.sub{padding-left:18px}
.areas-l li.sub a{font-size:19px}