/* ==========================================================================
   ROCKSHORE BUILDING GROUP — inner page modules
   Signature modules, one per page family, so no two page types share a
   skeleton. Loads after site.css and only adds; it overrides nothing.
   --------------------------------------------------------------------------
   1  guards + shared primitives        6  coverage schematic (areas hub)
   2  page hero variants                7  generations timeline (about)
   3  process spine (service pages)     8  gallery filter + lightbox (our work)
   4  filter grid (services hub)        9  step flow (contact)
   5  local snapshot (area pages)      10  anchor rail (privacy) + responsive
   ========================================================================== */

/* ---------- 1. guards + shared primitives ---------- */

/* Standing rule: never show a visible breadcrumb trail. The BreadcrumbList
   JSON-LD carries the whole SEO value. This is a belt-and-braces guard in case
   the markup is ever reinstated. */
.crumbs{display:none !important}

/* visually hidden, still read by screen readers and crawlers */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* reading progress, inner pages only */
.rs-prog{position:fixed;left:0;top:0;height:2px;z-index:1200;width:100%;
  background:transparent;pointer-events:none}
.rs-prog i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-glow));
  box-shadow:0 0 12px rgba(228,196,119,.55);transition:width .12s linear}

/* section eyebrow with a rule, used to break up the vertical rhythm */
.rule-head{display:flex;align-items:baseline;gap:1.1rem;margin-bottom:1.1rem}
.rule-head .eyebrow{margin-bottom:0;white-space:nowrap}
.rule-head::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(201,162,78,.45),transparent)}

/* alternating section grounds so pages do not read as one flat column */
.section.tint{background:
  linear-gradient(180deg,rgba(20,32,56,.44),rgba(10,17,32,0) 70%)}
.section.tint::before{content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,162,78,.30),transparent)}

/* pull quote / statement line */
.statement{max-width:30ch;margin-inline:auto;text-align:center;position:relative;
  padding-top:1.6rem;font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.18;letter-spacing:-.015em}
.statement::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:56px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--gold-glow))}
.statement em{font-style:normal;color:var(--gold-lite)}

/* fact strip: a row of short verified facts */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap:1px;background:var(--glass-line);border:1px solid var(--glass-line);
  border-radius:16px;overflow:hidden}
.facts>div{background:#0c1524;padding:1.35rem 1.5rem}
.facts dt{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-lite);font-weight:600;margin-bottom:.45rem}
.facts dd{color:var(--cream);font-size:1.02rem;line-height:1.45}

/* ---------- 2. page hero variants ---------- */

/* service pages: headline left, verified at-a-glance panel right */
.page-hero .ph-grid{display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4rem);align-items:end}
.ph-card{background:rgba(12,21,36,.72);backdrop-filter:blur(9px);
  border:1px solid var(--glass-line);border-radius:18px;padding:1.6rem 1.7rem;
  box-shadow:0 30px 70px rgba(0,0,0,.45)}
.ph-card .ph-k{font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-lite);font-weight:600;margin-bottom:1.1rem}
.ph-card ul{list-style:none;display:grid;gap:.8rem;margin:0;padding:0}
.ph-card li{display:flex;gap:.75rem;align-items:flex-start;color:var(--cream-dim);
  font-size:.95rem;line-height:1.5}
.ph-card li svg{width:17px;height:17px;flex:0 0 17px;margin-top:.24em;color:var(--gold-lite)}

/* area pages: headline centred over a location plate */
.page-hero.ph-place{text-align:center}
.page-hero.ph-place h1,.page-hero.ph-place .lead{margin-inline:auto}
.page-hero.ph-place .hero-actions{justify-content:center;display:flex;flex-wrap:wrap;gap:.8rem}
.ph-plate{display:inline-flex;align-items:center;gap:.7rem;padding:.5rem 1.1rem;
  border:1px solid var(--glass-line);border-radius:999px;background:rgba(12,21,36,.6);
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-dim);
  font-weight:600;margin-bottom:1.2rem}
.ph-plate b{color:var(--gold-lite);font-weight:600}
.ph-plate .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-lite);
  box-shadow:0 0 0 4px rgba(201,162,78,.18)}

/* hub pages: oversized headline, no side panel */
.page-hero.ph-wide h1{max-width:16ch;font-size:clamp(2.4rem,6vw,4.6rem)}

/* ---------- 3. process spine (service pages) ---------- */
.spine{display:grid;grid-template-columns:clamp(220px,24vw,290px) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.spine-rail{position:sticky;top:110px}
.spine-railhead{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-lite);font-weight:600;margin-bottom:1.1rem}
.spine-list{position:relative}
.spine-nav{list-style:none;margin:0;padding:0 0 0 1.6rem;display:grid;gap:.15rem}
.spine-track{position:absolute;left:5px;top:.55rem;bottom:.55rem;width:2px;
  background:rgba(246,241,231,.12);border-radius:2px;overflow:hidden}
.spine-fill{position:absolute;left:0;top:0;width:100%;height:0;
  background:linear-gradient(180deg,var(--gold-glow),var(--gold));
  box-shadow:0 0 10px rgba(228,196,119,.5);transition:height .3s var(--ease)}
.spine-nav li{position:relative}
.spine-nav a{display:flex;gap:.65rem;align-items:baseline;padding:.5rem .6rem .5rem .2rem;
  color:var(--cream-dim);font-size:.9rem;line-height:1.35;border-radius:8px;
  transition:color .3s ease,background .3s ease}
.spine-nav a b{font-variant-numeric:tabular-nums;font-weight:600;font-size:.76rem;
  color:rgba(246,241,231,.4);transition:color .3s ease}
.spine-nav a::before{content:"";position:absolute;left:-1.6rem;top:.95em;
  width:12px;height:12px;border-radius:50%;background:#0a1120;
  border:2px solid rgba(246,241,231,.22);transition:.35s var(--ease);transform:translateY(-50%)}
.spine-nav a:hover{color:var(--cream);background:rgba(201,162,78,.07)}
.spine-nav a.on{color:var(--cream)}
.spine-nav a.on b{color:var(--gold-lite)}
.spine-nav a.on::before{border-color:var(--gold-lite);background:var(--gold-lite);
  box-shadow:0 0 0 4px rgba(201,162,78,.18)}
.spine-nav a.done::before{border-color:var(--gold);background:var(--gold)}

.spine-body{display:grid;gap:clamp(1rem,2vw,1.4rem);counter-reset:spinestep}
.spine-step{position:relative;background:var(--glass);border:1px solid var(--glass-line);
  border-radius:16px;padding:clamp(1.5rem,3vw,2.1rem);scroll-margin-top:120px;
  transition:border-color .45s ease,box-shadow .45s ease,transform .45s var(--ease)}
.spine-step::after{content:"";position:absolute;left:0;top:1.4rem;bottom:1.4rem;width:2px;
  border-radius:2px;background:var(--gold-lite);opacity:0;transition:opacity .45s ease}
.spine-step.on{border-color:rgba(201,162,78,.42);box-shadow:0 24px 60px rgba(0,0,0,.4)}
.spine-step.on::after{opacity:1}
.spine-step h3{font-size:clamp(1.15rem,1.9vw,1.42rem);margin:0 0 .7rem;color:var(--cream);
  display:flex;align-items:baseline;gap:.85rem}
.spine-step h3::before{counter-increment:spinestep;content:counter(spinestep,decimal-leading-zero);
  font-family:'Inter',sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.1em;
  color:var(--gold-lite);flex:0 0 auto}
.spine-step p{color:var(--cream-dim);margin:0}
.spine-step p+p{margin-top:.8rem}
.spine-note{margin-top:1.3rem;padding-left:1.2rem;border-left:2px solid rgba(201,162,78,.4);
  color:var(--cream-dim);font-size:.95rem}

/* ---------- 4. filter grid (services hub, our work) ---------- */
.filterbar{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.fbtn{font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;
  padding:.62rem 1.15rem;border-radius:999px;color:var(--cream-dim);
  background:rgba(20,32,56,.5);border:1px solid var(--glass-line);
  transition:.3s var(--ease);white-space:nowrap}
.fbtn:hover{color:var(--cream);border-color:rgba(201,162,78,.5);transform:translateY(-1px)}
.fbtn[aria-pressed="true"]{background:linear-gradient(120deg,var(--gold-glow),var(--gold-lite));
  color:#1a1405;border-color:transparent;box-shadow:0 10px 26px rgba(201,162,78,.28)}
.fcount{color:var(--cream-dim);font-size:.85rem;margin-bottom:1.2rem;min-height:1.2em}
.fhide{display:none !important}

/* service cards with a numbered index and a literal thumbnail */
.svcx{display:grid;grid-template-columns:minmax(0,1fr);gap:1.15rem}
.svcx>*{grid-column:span 1}
@media (min-width:600px){.svcx{grid-template-columns:repeat(4,minmax(0,1fr))}.svcx>*{grid-column:span 2}}
@media (min-width:900px){.svcx{grid-template-columns:repeat(6,minmax(0,1fr))}.svcx>*{grid-column:span 2}}
.svcx-card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:16px;border:1px solid var(--glass-line);background:var(--glass);
  transition:.45s var(--ease)}
.svcx-card:hover{transform:translateY(-5px);border-color:rgba(201,162,78,.5);
  box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 34px rgba(201,162,78,.12)}
.svcx-shot{aspect-ratio:16/10;overflow:hidden;position:relative}
.svcx-shot img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.svcx-card:hover .svcx-shot img{transform:scale(1.07)}
.svcx-shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(10,17,32,.85))}
.svcx-n{position:absolute;left:1rem;top:.9rem;z-index:2;font-size:.72rem;font-weight:600;
  letter-spacing:.14em;color:var(--gold-glow);font-variant-numeric:tabular-nums;
  text-shadow:0 2px 10px rgba(0,0,0,.7)}
.svcx-tag{position:absolute;right:1rem;top:.9rem;z-index:2;font-size:.66rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--cream);padding:.28rem .6rem;
  border-radius:999px;background:rgba(10,17,32,.7);border:1px solid var(--glass-line)}
.svcx-body{padding:1.25rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1;gap:.6rem}
.svcx-body h3{font-size:1.22rem;margin:0}
.svcx-body p{color:var(--cream-dim);font-size:.93rem;margin:0;flex:1}
.svcx-go{display:inline-flex;align-items:center;gap:.45rem;color:var(--gold-lite);
  font-size:.85rem;font-weight:600;letter-spacing:.02em}
.svcx-go svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.svcx-card:hover .svcx-go svg{transform:translateX(4px)}
/* whole card clickable, without nesting links */
.svcx-card>a.svcx-hit{position:absolute;inset:0;z-index:3;border-radius:16px}
.svcx-card>a.svcx-hit:focus-visible{outline:2px solid var(--gold-glow);outline-offset:-3px}

/* ---------- 5. local snapshot (area pages) ---------- */
.snap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4.5vw,3.6rem);align-items:center}
.snap-panel{background:var(--glass);border:1px solid var(--glass-line);border-radius:18px;
  padding:clamp(1.5rem,3vw,2.1rem);box-shadow:0 30px 70px rgba(0,0,0,.42)}
.snap-row{display:flex;gap:1.1rem;padding:1.05rem 0;border-bottom:1px solid var(--hair)}
.snap-row:last-child{border-bottom:0;padding-bottom:0}
.snap-row:first-child{padding-top:0}
.snap-ic{flex:0 0 38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:rgba(201,162,78,.12);border:1px solid rgba(201,162,78,.26);color:var(--gold-lite)}
.snap-ic svg{width:18px;height:18px}
.snap-k{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lite);
  font-weight:600;margin-bottom:.25rem}
.snap-v{color:var(--cream);line-height:1.5;font-size:.97rem}
.snap-v .pc{display:inline-block;font-variant-numeric:tabular-nums;font-weight:600;
  color:var(--cream);background:rgba(246,241,231,.07);border:1px solid var(--hair);
  border-radius:6px;padding:.1rem .45rem;margin:.15rem .3rem .15rem 0;font-size:.86rem}

/* what we build round here: a compact two column index */
.matrix{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:.6rem}
.mx{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.95rem;
  align-items:start;padding:1.05rem 1.2rem;border-radius:12px;
  background:rgba(20,32,56,.42);border:1px solid var(--glass-line);
  transition:.35s var(--ease)}
.mx:hover{border-color:rgba(201,162,78,.5);background:rgba(20,32,56,.78);transform:translateX(5px);
  box-shadow:0 16px 40px rgba(0,0,0,.32)}
.mx-ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;margin-top:.1rem;
  background:rgba(201,162,78,.13);border:1px solid rgba(201,162,78,.28);color:var(--gold-lite)}
.mx-ic svg{width:14px;height:14px}
.mx b{display:block;color:var(--cream);font-weight:600;font-size:.98rem;margin-bottom:.2rem}
.mx span{display:block;color:var(--cream-dim);font-size:.87rem;line-height:1.5}
.mx em{font-style:normal;color:var(--gold-lite);font-size:1.05rem;align-self:center;
  opacity:.35;transition:.3s var(--ease)}
.mx:hover em{opacity:1;transform:translateX(3px)}
.mx:focus-visible{outline:2px solid var(--gold-glow);outline-offset:2px}

/* ---------- 6. coverage schematic (areas hub) ---------- */
.cov{background:var(--glass);border:1px solid var(--glass-line);border-radius:20px;
  padding:clamp(1.4rem,3vw,2.4rem);box-shadow:0 30px 70px rgba(0,0,0,.42)}
.cov-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.cov-swipe{display:none}
.cov-svg{width:100%;height:auto;display:block;overflow:visible}
/* on a phone the labels would be unreadable if the whole diagram were squeezed
   in, so it keeps a legible width and the reader swipes it instead */
@media (max-width:760px){
  .cov-svg{min-width:660px}
  .cov-scroll{margin-inline:-.4rem;padding:.4rem;scrollbar-width:thin}
  .cov-swipe{display:flex;align-items:center;gap:.4rem;margin-top:.7rem;
    font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,241,231,.42);font-weight:600}
  .cov-swipe svg{width:14px;height:14px}
}
.cov-coast{fill:none;stroke:rgba(201,162,78,.34);stroke-width:2;stroke-linecap:round}
.cov-reach{stroke:rgba(201,162,78,.16);stroke-width:1;stroke-dasharray:3 7}
.cov-sea{fill:rgba(30,58,95,.24)}
.cov-node{cursor:pointer}
.cov-node .ring{fill:none;stroke:rgba(201,162,78,.5);stroke-width:1.5;opacity:0;
  transition:opacity .3s ease,r .3s var(--ease)}
.cov-node .dot{fill:var(--cream-dim);transition:.32s var(--ease)}
.cov-node .lbl{fill:var(--cream-dim);font:600 11px 'Inter',sans-serif;letter-spacing:.06em;
  transition:fill .3s ease;pointer-events:none}
.cov-node:hover .dot,.cov-node:focus .dot,.cov-node.on .dot{fill:var(--gold-glow);r:7}
.cov-node:hover .lbl,.cov-node:focus .lbl,.cov-node.on .lbl{fill:var(--cream)}
.cov-node:hover .ring,.cov-node:focus .ring,.cov-node.on .ring{opacity:1}
.cov-node:focus{outline:none}
.cov-node:focus-visible .ring{opacity:1;stroke:var(--gold-glow);stroke-width:2.5}
.cov-node.base .dot{fill:var(--gold);r:8}
.cov-node.base .pulse{fill:none;stroke:var(--gold-lite);stroke-width:2;transform-origin:center;
  animation:covPulse 3.2s ease-out infinite}
@keyframes covPulse{0%{r:8;opacity:.75}70%{r:30;opacity:0}100%{r:30;opacity:0}}
@media (prefers-reduced-motion:reduce){.cov-node.base .pulse{animation:none;opacity:.35}}
.cov-read{margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--hair);
  display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap;min-height:3.4rem}
.cov-read b{font-family:'Fraunces',serif;font-weight:600;font-size:1.25rem;color:var(--cream)}
.cov-read span{color:var(--cream-dim);font-size:.94rem;flex:1;min-width:min(260px,100%)}
.cov-read a{color:var(--gold-lite);font-weight:600;font-size:.88rem;white-space:nowrap}
.cov-note{margin-top:.9rem;font-size:.78rem;color:rgba(246,241,231,.45);line-height:1.5}

/* ---------- 7. generations timeline (about) ---------- */
.gens{position:relative;display:grid;gap:clamp(1.6rem,3vw,2.4rem)}
.gens::before{content:"";position:absolute;left:clamp(17px,2.2vw,25px);top:1rem;bottom:1rem;width:2px;
  background:linear-gradient(180deg,rgba(201,162,78,.55),rgba(201,162,78,.12));border-radius:2px}
.gen{position:relative;padding-left:clamp(3.4rem,6vw,4.6rem)}
.gen-mark{position:absolute;left:0;top:.1rem;width:clamp(36px,4.6vw,52px);height:clamp(36px,4.6vw,52px);
  border-radius:50%;display:grid;place-items:center;background:#0c1524;
  border:1px solid rgba(201,162,78,.45);color:var(--gold-lite);font-weight:600;
  font-size:.8rem;letter-spacing:.08em;box-shadow:0 0 0 6px rgba(10,17,32,1)}
.gen h3{font-size:clamp(1.2rem,2.1vw,1.55rem);margin:0 0 .2rem}
.gen .gen-when{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-lite);font-weight:600;margin-bottom:.6rem;display:block}
.gen p{color:var(--cream-dim);margin:0}

/* ---------- 8. gallery filter + lightbox (our work) ---------- */
.gx{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.gx>*{grid-column:span 1}
@media (min-width:600px){.gx{grid-template-columns:repeat(4,minmax(0,1fr))}.gx>*{grid-column:span 2}}
@media (min-width:900px){.gx{grid-template-columns:repeat(6,minmax(0,1fr))}.gx>*{grid-column:span 2}}
.gx-item{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--glass-line);
  background:#0c1524;padding:0;cursor:zoom-in;transition:.4s var(--ease);display:flex;
  flex-direction:column;width:100%;text-align:left;font:inherit;color:inherit}
.gx-shot{position:relative;overflow:hidden}
.gx-item img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform 1s var(--ease-out)}
.gx-item:hover{border-color:rgba(201,162,78,.5);transform:translateY(-4px);
  box-shadow:0 26px 60px rgba(0,0,0,.5)}
.gx-item:hover img{transform:scale(1.06)}
.gx-cap{padding:.95rem 1.1rem 1.15rem;color:var(--cream-dim);font-size:.87rem;line-height:1.55;flex:1}
.gx-cap b{display:block;color:var(--cream);font-weight:600;font-size:.78rem;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:.4rem;color:var(--gold-lite)}
.gx-item:focus-visible{outline:2px solid var(--gold-glow);outline-offset:3px}
.gx-zoom{position:absolute;right:.75rem;top:.75rem;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;background:rgba(10,17,32,.72);border:1px solid var(--glass-line);
  color:var(--gold-lite);opacity:0;transform:scale(.85);transition:.35s var(--ease)}
.gx-item:hover .gx-zoom{opacity:1;transform:none}
.gx-zoom svg{width:15px;height:15px}

.lbx{position:fixed;inset:0;z-index:1500;display:none;place-items:center;
  background:rgba(6,10,20,.93);backdrop-filter:blur(6px);padding:clamp(1rem,4vw,3rem)}
.lbx.open{display:grid}
/* the floating action rail must not sit over the lightbox or the mobile menu */
body.rs-noscroll #rs-fab{opacity:0;pointer-events:none;transition:opacity .25s ease}
.lbx img{max-width:min(1180px,94vw);max-height:82vh;width:auto;height:auto;border-radius:12px;
  border:1px solid var(--glass-line);box-shadow:0 40px 110px rgba(0,0,0,.7)}
.lbx-cap{margin-top:1rem;text-align:center;color:var(--cream-dim);font-size:.92rem}
.lbx-x,.lbx-p,.lbx-n{position:absolute;width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:rgba(20,32,56,.75);border:1px solid var(--glass-line);
  color:var(--cream);transition:.3s var(--ease)}
.lbx-x:hover,.lbx-p:hover,.lbx-n:hover{border-color:var(--gold-lite);color:var(--gold-lite)}
.lbx-x{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lbx-p{left:clamp(.6rem,2.5vw,2rem);top:50%;transform:translateY(-50%)}
.lbx-n{right:clamp(.6rem,2.5vw,2rem);top:50%;transform:translateY(-50%)}
.lbx-x svg,.lbx-p svg,.lbx-n svg{width:19px;height:19px}
.lbx figure{margin:0;display:grid;justify-items:center}

/* ---------- 9. step flow (contact) ---------- */
/* five steps: one full row on desktop, one clean column below. Never a
   part-filled row. */
.flow{display:grid;grid-template-columns:1fr;gap:clamp(1rem,2.4vw,1.6rem);position:relative}
@media (min-width:1080px){.flow{grid-template-columns:repeat(var(--n,5),minmax(0,1fr))}}
.flow-step{position:relative;padding:1.5rem 1.4rem;border-radius:16px;background:var(--glass);
  border:1px solid var(--glass-line);transition:.45s var(--ease)}
.flow-step:hover{border-color:rgba(201,162,78,.45);transform:translateY(-4px);
  box-shadow:0 26px 60px rgba(0,0,0,.42)}
.flow-n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(201,162,78,.14);border:1px solid rgba(201,162,78,.4);color:var(--gold-lite);
  font-size:.8rem;font-weight:600;margin-bottom:.9rem;font-variant-numeric:tabular-nums}
.flow-step h3{font-size:1.08rem;margin:0 0 .45rem}
.flow-step p{color:var(--cream-dim);font-size:.93rem;margin:0}
@media (min-width:1080px){
  .flow-step::after{content:"";position:absolute;right:-.85rem;top:2.5rem;width:.9rem;height:1px;
    background:linear-gradient(90deg,rgba(201,162,78,.5),transparent)}
  .flow-step:last-child::after{display:none}
  .flow-step{padding:1.35rem 1.2rem}
  .flow-step h3{font-size:1.02rem}
  .flow-step p{font-size:.89rem}
}
.flow-tail{margin-top:clamp(1.6rem,3vw,2.2rem);padding-left:1.2rem;
  border-left:2px solid rgba(201,162,78,.4);color:var(--cream-dim);max-width:62ch}

/* ---------- 10. anchor rail (privacy) ---------- */
.toc{position:sticky;top:110px;background:var(--glass);border:1px solid var(--glass-line);
  border-radius:16px;padding:1.4rem 1.5rem}
.toc h2{font-family:'Inter',sans-serif;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-lite);font-weight:600;margin:0 0 .9rem}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.1rem;counter-reset:toc}
.toc a{display:block;padding:.42rem .5rem;border-radius:8px;color:var(--cream-dim);
  font-size:.88rem;line-height:1.4;transition:.3s ease}
.toc a::before{counter-increment:toc;content:counter(toc) ". ";color:rgba(246,241,231,.35);
  font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--cream);background:rgba(201,162,78,.08)}
.toc a.on{color:var(--gold-lite);background:rgba(201,162,78,.1)}
.split.sticky-l{align-items:start}
.split.sticky-l>*:first-child{position:sticky;top:110px}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .page-hero .ph-grid{grid-template-columns:1fr;gap:2rem;align-items:start}
  .snap{grid-template-columns:1fr}
  .split.sticky-l{grid-template-columns:1fr}
  .split.sticky-l>*:first-child{position:static}
}
@media (max-width:900px){
  /* spine rail becomes a sticky horizontal step scroller */
  /* minmax(0,1fr) so the track may shrink below the no-wrap chip row, which
     would otherwise blow the column out to the width of all seven chips */
  .spine{grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .spine-rail{position:sticky;top:88px;z-index:5;margin-inline:-4vw;padding:.7rem 4vw;
    background:linear-gradient(180deg,#0a1120 62%,rgba(10,17,32,.94));
    backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
  .spine-railhead{display:none}
  .spine-track{display:none}
  .spine-list{position:static}
  .spine-nav{display:flex;gap:.5rem;padding:0;overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .spine-nav::-webkit-scrollbar{display:none}
  .spine-nav li{scroll-snap-align:start;flex:0 0 auto}
  .spine-nav a{white-space:nowrap;border:1px solid var(--glass-line);background:rgba(20,32,56,.5);
    padding:.45rem .85rem;font-size:.82rem}
  .spine-nav a::before{display:none}
  .spine-nav a.on{border-color:rgba(201,162,78,.55);background:rgba(201,162,78,.13)}
  .toc{position:static}
}
@media (max-width:760px){
  .spine-rail{top:74px}
  .facts>div{padding:1.1rem 1.2rem}
  .cov-read{flex-direction:column;gap:.5rem}
  .lbx-p,.lbx-n{top:auto;bottom:clamp(1rem,4vw,2rem);transform:none}
  .lbx-p{left:calc(50% - 56px)}
  .lbx-n{right:calc(50% - 56px)}
}

/* ---------- 11. picker: a diagram with a readout ----------
   One behaviour, three very different faces: a driveway cross section, a
   load path elevation and a housing era selector. Every readout panel stays
   in the HTML so a crawler reads all of them. */
.picker{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.2rem);align-items:start}
.pk-read{min-height:210px}
.pk-k{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lite);
  font-weight:600;margin-bottom:.9rem}
.pk-panel{display:none}
.pk-panel.is-on{display:block;animation:pkIn .45s var(--ease-out) both}
@keyframes pkIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pk-panel.is-on{animation:none}}
.pk-panel h3{font-size:clamp(1.2rem,2.2vw,1.6rem);margin:0 0 .6rem}
.pk-panel p{color:var(--cream-dim);margin:0}
.pk-panel ul{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.5rem}
.pk-panel li{position:relative;padding-left:1.5rem;color:var(--cream-dim);font-size:.94rem}
.pk-panel li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;
  border-radius:50%;background:var(--gold-lite);box-shadow:0 0 0 3px rgba(201,162,78,.16)}

/* cross section: stacked bands, thickness to scale */
.pk-stack{display:grid;gap:3px;border-radius:14px;overflow:hidden;
  border:1px solid var(--glass-line);background:var(--glass-line)}
.pk-band{position:relative;display:flex;align-items:center;gap:.9rem;width:100%;cursor:pointer;
  font:inherit;text-align:left;color:var(--cream-dim);padding:.7rem 1.1rem;border:0;
  min-height:var(--h,58px);padding-right:2.6rem;background:linear-gradient(100deg,#0e1a2c,#12203a);
  transition:.4s var(--ease)}
.pk-band:hover{color:var(--cream);background:linear-gradient(100deg,#132139,#1a2c4c)}
.pk-band[aria-pressed="true"]{color:#1a1405;
  background:linear-gradient(100deg,var(--gold),var(--gold-lite))}
.pk-band[aria-pressed="true"] .pk-d{color:rgba(26,20,5,.72)}
.pk-band[aria-pressed="true"]::after{content:"";position:absolute;right:1.1rem;width:8px;height:8px;
  border-right:2px solid #1a1405;border-bottom:2px solid #1a1405;transform:rotate(-45deg)}
.pk-band b{font-weight:600;font-size:.95rem;flex:1}
.pk-d{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(246,241,231,.42);
  font-variant-numeric:tabular-nums}
.pk-band:focus-visible{outline:2px solid var(--gold-glow);outline-offset:-3px}

/* load path elevation */
.pk-svg{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--glass-line);
  background:linear-gradient(160deg,#0d1728,#101c31)}
.pk-hot{cursor:pointer}
.pk-hot rect,.pk-hot path,.pk-hot circle{transition:.35s var(--ease)}
.pk-hot .hit{fill:transparent}
.pk-hot .sh{fill:rgba(246,241,231,.13);stroke:rgba(246,241,231,.3);stroke-width:1.5}
.pk-hot:hover .sh,.pk-hot.on .sh{fill:rgba(201,162,78,.34);stroke:var(--gold-glow)}
.pk-hot .tx{fill:var(--cream-dim);font:600 10px 'Inter',sans-serif;letter-spacing:.05em;
  pointer-events:none;transition:fill .3s}
.pk-hot:hover .tx,.pk-hot.on .tx{fill:var(--cream)}
.pk-hot:focus{outline:none}
.pk-hot:focus-visible .sh{stroke:var(--gold-glow);stroke-width:3}
.pk-load-g{stroke:rgba(201,162,78,.45);stroke-width:2;stroke-dasharray:5 6;fill:none}
.pk-arrow{fill:var(--gold-lite)}

/* era selector */
.pk-eras{display:flex;flex-direction:column;gap:.55rem}
.pk-era{display:flex;align-items:baseline;gap:.9rem;width:100%;cursor:pointer;font:inherit;
  text-align:left;padding:1rem 1.2rem;border-radius:12px;color:var(--cream-dim);
  background:rgba(20,32,56,.45);border:1px solid var(--glass-line);transition:.35s var(--ease)}
.pk-era:hover{color:var(--cream);border-color:rgba(201,162,78,.42);transform:translateX(4px)}
.pk-era[aria-pressed="true"]{color:var(--cream);border-color:rgba(201,162,78,.6);
  background:linear-gradient(100deg,rgba(201,162,78,.16),rgba(20,32,56,.5));
  box-shadow:0 14px 34px rgba(0,0,0,.3)}
.pk-era b{font-family:'Fraunces',serif;font-weight:600;font-size:1.08rem;flex:1}
.pk-era span{font-size:.78rem;letter-spacing:.1em;color:var(--gold-lite);
  font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:900px){
  .picker{grid-template-columns:1fr;gap:1.6rem}
  .pk-read{min-height:0}
}

/* ---------- 12. counters + turn cards (about) ---------- */
.countband{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:1px;background:var(--glass-line);border:1px solid var(--glass-line);
  border-radius:18px;overflow:hidden}
.cb{background:linear-gradient(160deg,#0d1728,#101d33);padding:clamp(1.6rem,3vw,2.2rem) 1.4rem;
  text-align:center;transition:background .45s ease}
.cb:hover{background:linear-gradient(160deg,#111e35,#16264180)}
.cb b{display:block;font-family:'Fraunces',serif;font-weight:600;line-height:1;
  font-size:clamp(2.4rem,5vw,3.4rem);letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--gold-glow),var(--gold-lite) 60%,#a9852f);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cb b>span{display:inline;font-size:inherit;color:inherit;margin:0}
.cb>span{display:block;margin-top:.6rem;color:var(--cream-dim);font-size:.88rem;line-height:1.45}

.flip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:1.1rem}
.fc{display:block;width:100%;perspective:1400px;background:none;border:0;padding:0;font:inherit;
  color:inherit;cursor:pointer;text-align:left;min-height:290px}
.fc-in{display:block;position:relative;width:100%;height:100%;min-height:290px;
  transition:transform .75s var(--ease-out);transform-style:preserve-3d}
.fc:hover .fc-in,.fc:focus-visible .fc-in,.fc.on .fc-in{transform:rotateY(180deg)}
.fc-a,.fc-b{position:absolute;inset:0;display:flex;flex-direction:column;
  border-radius:16px;border:1px solid var(--glass-line);background:var(--glass);
  padding:clamp(1.4rem,2.6vw,1.8rem);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.fc-a{justify-content:flex-end;gap:.7rem}
.fc-b{transform:rotateY(180deg);justify-content:center;
  background:linear-gradient(150deg,rgba(28,44,74,.92),rgba(14,23,41,.96));
  border-color:rgba(201,162,78,.42)}
.fc-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(201,162,78,.13);border:1px solid rgba(201,162,78,.3);color:var(--gold-lite);
  margin-bottom:auto}
.fc-ic svg{width:21px;height:21px}
.fc-a h3{font-size:1.16rem;margin:0}
.fc-turn{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lite);
  font-weight:600;display:flex;align-items:center;gap:.45rem}
.fc-turn svg{width:13px;height:13px}
.fc-b p{color:var(--cream-dim);font-size:.92rem;line-height:1.6;margin:0}
.fc:focus-visible{outline:2px solid var(--gold-glow);outline-offset:4px;border-radius:16px}
@media (prefers-reduced-motion:reduce){
  .fc-in{transition:none;transform:none !important}
  .fc-a,.fc-b{position:static;transform:none;backface-visibility:visible}
  .fc-b{margin-top:.7rem}
  .fc,.fc-in{min-height:0}
  .fc-turn{display:none}
}
@media (max-width:600px){.fc,.fc-in{min-height:330px}}

/* ---------- 13. tidiness rules ----------
   Fix a whole class of layout faults at once rather than page by page. */

/* inline links inside any body copy: cream, slightly bold, no underline.
   Gold is for buttons and labels, not for words in a sentence. */
.prose a:not(.btn),.faq-answer a,.pk-panel a,.spine-step a,.snap-v a,.gx-cap a,.flow-step a,
.spine-note a,.cov-note a,.mx a{color:var(--cream);font-weight:600;text-decoration:none;
  transition:color .25s ease}
.prose a:not(.btn):hover,.faq-answer a:hover,.pk-panel a:hover,.spine-step a:hover,.snap-v a:hover,
.flow-step a:hover,.spine-note a:hover{color:var(--gold-lite)}

/* stacked blocks inside a section always get air between them */
.wrap>.prose+.gal-grid,.wrap>.prose+.link-grid,.wrap>.prose+.matrix,.wrap>.prose+.facts,
.wrap>.section-head+.gal-grid,.wrap>.lede+.gal-grid,.wrap>.lede+.link-grid,.wrap>.lede+.matrix,
.wrap>.lede+.chip-row,.wrap>.lede+.hero-actions,.wrap>.lede+.facts{margin-top:clamp(2rem,4vw,3rem)}
.wrap>.gal-grid+.prose,.wrap>.link-grid+.prose,.wrap>.matrix+.prose,.wrap>.gal-grid+.hero-actions,
.wrap>.link-grid+.hero-actions,.wrap>.flip+.prose,.wrap>.flow+.prose{margin-top:clamp(2rem,4vw,3rem)}
.wrap>.chip-row+.hero-actions,.wrap>.prose+.hero-actions,.wrap>.chip-row+.prose{margin-top:2rem}
.wrap>.prose+.chip-row{margin-top:1.6rem}

/* a section with only text used to sit in the left half and leave the right
   empty. The head and the copy now share a row, the head staying put while
   the copy scrolls, so the section reads as designed rather than unfinished. */
.lede{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.lede>.section-head{margin-bottom:0;position:sticky;top:120px}
.lede>.prose{max-width:none}
.lede>.prose>p:first-child{font-size:1.08rem;color:var(--cream)}
@media (max-width:900px){
  .lede{grid-template-columns:1fr;gap:1.4rem}
  .lede>.section-head{position:static}
}

/* three column photo and link grids: the column count now follows the
   number of items, so a row is never left part filled. */
.gal-grid:has(> :nth-child(2):last-child),.gal-grid:has(> :nth-child(4):last-child),
.link-grid:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.link-grid:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1000px){
  .link-grid:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
}
.gal-grid:has(> :nth-child(1):last-child){grid-template-columns:minmax(0,1fr);max-width:820px;margin-inline:auto}
@media (max-width:560px){
  .gal-grid:has(> :nth-child(2):last-child),.gal-grid:has(> :nth-child(4):last-child){grid-template-columns:1fr}
}

/* centred variant for symmetric sections */
.section-head.centre{text-align:center;margin-inline:auto}
.section-head.centre p{margin-inline:auto}
.prose.centre{margin-inline:auto;text-align:center}

/* ---------- 14. score card (about) ---------- */
.score{background:var(--glass);border:1px solid var(--glass-line);border-radius:18px;
  padding:clamp(1.5rem,3vw,2.1rem);box-shadow:0 30px 70px rgba(0,0,0,.42);
  max-width:460px;margin-inline:auto;width:100%}
.score-top{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  padding-bottom:1.2rem;border-bottom:1px solid var(--hair)}
.score-k{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lite);
  font-weight:600;margin-bottom:.4rem}
.score-n{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;
  letter-spacing:-.02em;color:var(--cream)}
.score-n small{font-size:.42em;color:var(--cream-dim);font-weight:500;letter-spacing:0}
.score-stars{display:flex;gap:3px;color:var(--gold-lite);padding-bottom:.35rem}
.score-stars svg{width:18px;height:18px;fill:currentColor}
.score-rows{display:grid;gap:.75rem;padding:1.2rem 0;border-bottom:1px solid var(--hair)}
.score-row{display:grid;grid-template-columns:1fr auto;gap:.8rem;align-items:center;font-size:.93rem;
  color:var(--cream-dim)}
.score-row b{color:var(--cream);font-weight:600;font-variant-numeric:tabular-nums}
.score-bar{grid-column:1/-1;height:4px;border-radius:2px;background:rgba(246,241,231,.08);overflow:hidden}
.score-bar i{display:block;height:100%;width:var(--w,100%);border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-glow))}
.score-foot{padding-top:1.1rem;display:grid;gap:.4rem;font-size:.88rem;color:var(--cream-dim)}
.score-foot span{display:flex;gap:.55rem;align-items:baseline}
.score-foot span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-lite);
  flex:0 0 6px;position:relative;top:-2px}

/* ---------- 15. coverage schematic, interactive layer ---------- */
.cov:focus-visible{outline:2px solid var(--gold-glow);outline-offset:4px}
.cov-reach{stroke:rgba(201,162,78,.16);stroke-width:1;stroke-dasharray:3 7;fill:none;transition:stroke .4s ease}
.cov-reach.on{stroke:rgba(201,162,78,.30)}
.cov-trail{fill:none;stroke:var(--gold-lite);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);opacity:0;
  transition:stroke-dashoffset .9s var(--ease-out),opacity .3s ease}
.cov-trail.on{stroke-dashoffset:0;opacity:1}
.cov-van{fill:var(--gold-glow);stroke:#0a1120;stroke-width:2;
  filter:drop-shadow(0 0 6px rgba(228,196,119,.8))}
.cov-title{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;width:100%}
.cov-meta{display:inline-flex;gap:.5rem;flex-wrap:wrap;font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:600}
.cov-meta em,.cov-meta i{font-style:normal;padding:.28rem .6rem;border-radius:999px;
  border:1px solid var(--glass-line);background:rgba(20,32,56,.55);color:var(--cream-dim)}
.cov-meta i{color:var(--gold-lite);font-variant-numeric:tabular-nums}
.cov-read{flex-wrap:wrap}
.cov-read>span[data-cov-desc]{flex-basis:100%}
.cov-dots{display:flex;gap:.45rem;margin-top:1rem}
.cov-dots i{width:6px;height:6px;border-radius:50%;background:rgba(246,241,231,.18);transition:.3s var(--ease)}
.cov-dots i.on{background:var(--gold-lite);width:18px;border-radius:3px}
.link-card.is-hot{border-color:rgba(201,162,78,.6);box-shadow:0 0 0 1px rgba(201,162,78,.25),0 20px 50px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){.cov-trail{transition:none}}

/* three item grids keep three columns down to tablet, then go to one column.
   Two columns would always leave an orphan. */
@media (min-width:700px) and (max-width:1000px){
  .gal-grid:has(> :nth-child(3):last-child),.link-grid:has(> :nth-child(3):last-child){
    grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:699px){
  .gal-grid:has(> :nth-child(3):last-child),.link-grid:has(> :nth-child(3):last-child){
    grid-template-columns:1fr}
}
/* the reviews matrix has three items: three across, or one */
.matrix:has(> :nth-child(3):last-child){grid-template-columns:1fr}
@media (min-width:900px){.matrix:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
/* four turn cards: four across, two by two, or one, never three plus one */
.flip{grid-template-columns:1fr}
@media (min-width:600px){.flip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){.flip{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* grids whose count divides by three (3, 6, 9) keep three columns on tablet
   rather than dropping to two and leaving one over */
@media (min-width:700px) and (max-width:1000px){
  .link-grid:has(> :nth-child(3n):last-child),.gal-grid:has(> :nth-child(3n):last-child),
  .svc-grid:has(> :nth-child(3n):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .link-card{padding:1.3rem 1.2rem}
  .link-card h3{font-size:1rem}
  .link-card p{font-size:.86rem}
}
@media (max-width:699px){
  .svc-grid:has(> :nth-child(3n):last-child){grid-template-columns:1fr}
}
/* four counters: four across, two by two, or one */
.countband{grid-template-columns:1fr}
@media (min-width:560px){.countband{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.countband{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* the scrolling areas strip on the homepage: every town is a link */
a.town{display:inline-block;transition:color .3s ease,transform .3s var(--ease)}
a.town:hover,a.town:focus-visible{color:var(--gold-lite);transform:translateY(-2px)}
a.town:focus-visible{outline:2px solid var(--gold-glow);outline-offset:4px;border-radius:6px}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.areas-all{color:var(--gold-lite);font-weight:600;white-space:nowrap}
.areas-all:hover{color:var(--gold-glow)}

/* ---------- 16. mobile menu can be taller than the screen ----------
   With the services list expanded the menu runs to ~1100px. The page is
   locked while it is open, so the panel itself must scroll or the last items
   are unreachable. */
@media (max-width:1100px){
  nav[data-nav]{max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);overflow-y:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:2.2rem}
  nav[data-nav]::after{content:"";display:block;height:env(safe-area-inset-bottom,0)}
}
.foot-social a.gg svg{width:17px;height:17px}

/* ---------- 17. footer: hover labels + trust bar ---------- */
/* a small label rises above each social icon on hover or keyboard focus */
.foot-social a{position:relative}
.foot-social a::after{content:attr(data-label);position:absolute;left:50%;bottom:calc(100% + 10px);
  transform:translate(-50%,6px);white-space:nowrap;pointer-events:none;
  font-size:.72rem;font-weight:600;letter-spacing:.06em;color:var(--cream);
  background:#0c1524;border:1px solid rgba(201,162,78,.45);border-radius:999px;padding:.3rem .65rem;
  box-shadow:0 10px 26px rgba(0,0,0,.45);opacity:0;transition:.25s var(--ease)}
.foot-social a::before{content:"";position:absolute;left:50%;bottom:calc(100% + 5px);
  transform:translate(-50%,6px) rotate(45deg);width:8px;height:8px;background:#0c1524;
  border-right:1px solid rgba(201,162,78,.45);border-bottom:1px solid rgba(201,162,78,.45);
  opacity:0;transition:.25s var(--ease);pointer-events:none}
.foot-social a:hover::after,.foot-social a:focus-visible::after,
.foot-social a:hover::before,.foot-social a:focus-visible::before{opacity:1;transform:translate(-50%,0)}
.foot-social a:hover::before,.foot-social a:focus-visible::before{transform:translate(-50%,0) rotate(45deg)}

/* trust bar at the top of the footer: Checkatrade carries the weight, Google beside it */
.trustbar{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:1rem;
  padding-bottom:clamp(2rem,3.5vw,2.8rem);margin-bottom:clamp(2rem,3.5vw,2.8rem);
  border-bottom:1px solid var(--hair)}
.tb{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;
  column-gap:1.2rem;row-gap:.7rem;padding:1.1rem 1.35rem;
  border-radius:16px;background:var(--glass);border:1px solid var(--glass-line);color:var(--cream);
  transition:.4s var(--ease);position:relative}
.tb-subs{grid-column:1/-1}
.tb-stars{grid-column:3}
.tb-go{grid-column:4;grid-row:1}
.tb:hover{border-color:rgba(201,162,78,.5);transform:translateY(-3px);
  box-shadow:0 22px 50px rgba(0,0,0,.4),0 0 28px rgba(201,162,78,.12)}
.tb-mark{display:flex;align-items:center;gap:.55rem;font-weight:600;font-size:.82rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cream-dim);white-space:nowrap}
.tb-mark svg{width:20px;height:20px;color:var(--gold-lite);flex:0 0 20px}
.tb-score{font-family:'Fraunces',serif;font-weight:600;font-size:1.9rem;line-height:1;letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--gold-glow),var(--gold-lite) 60%,#a9852f);
  -webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.tb-score small{font-size:.5em;color:var(--cream-dim);-webkit-text-fill-color:var(--cream-dim)}
.tb-subs{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.8rem;color:var(--cream-dim)}
.tb-subs b{color:var(--cream);font-weight:600;font-variant-numeric:tabular-nums}
.tb-stars{display:flex;gap:2px;color:var(--gold-lite)}
.tb-stars svg{width:15px;height:15px;fill:currentColor}
.tb-go{justify-self:end;display:inline-flex;align-items:center;gap:.4rem;color:var(--gold-lite);
  font-weight:600;font-size:.84rem;white-space:nowrap}
.tb-go svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.tb:hover .tb-go svg{transform:translateX(4px)}
.tb>a.tb-hit{position:absolute;inset:0;border-radius:16px}
.tb>a.tb-hit:focus-visible{outline:2px solid var(--gold-glow);outline-offset:-3px}
@media (max-width:1000px){.trustbar{grid-template-columns:1fr}}
@media (max-width:560px){
  .tb{grid-template-columns:auto minmax(0,1fr);padding:1rem 1.1rem;column-gap:.9rem}
  .tb-score{grid-column:2}
  .tb-stars,.tb-go{grid-column:1/-1;grid-row:auto;justify-self:start}
}

/* ---------- 18. homepage record band: Checkatrade + MyBuilder tiles ---------- */
.stat.stat-link{position:relative;display:block;color:inherit;transition:.4s var(--ease);
  background:linear-gradient(160deg,#0d1728,#0a1120)}
.stat.stat-link:hover{background:linear-gradient(160deg,#132139,#0e1a2c)}
.stat.stat-link::after{content:"";position:absolute;inset:0;border:1px solid transparent;
  transition:border-color .4s ease;pointer-events:none}
.stat.stat-link:hover::after,.stat.stat-link:focus-visible::after{border-color:rgba(201,162,78,.5)}
.stat.stat-link:focus-visible{outline:none}
.stat.stat-link .num small{font-size:.42em;color:var(--cream-dim);letter-spacing:0;
  -webkit-text-fill-color:var(--cream-dim)}
.stat.stat-link .lbl{display:grid;gap:.35rem;justify-items:center}
.stat .plat{display:inline-flex;align-items:center;gap:.45rem;color:var(--cream);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;font-size:.78rem}
.stat .plat svg{width:16px;height:16px;color:var(--gold-lite)}
.stat .go{display:inline-flex;align-items:center;gap:.35rem;color:var(--gold-lite);font-size:.78rem;
  font-weight:600;letter-spacing:.02em;text-transform:none;opacity:.75;transition:.3s var(--ease)}
.stat .go svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.stat.stat-link:hover .go{opacity:1}
.stat.stat-link:hover .go svg{transform:translateX(4px)}

/* footer trust bar: three equal cards */
.trustbar{grid-template-columns:repeat(3,minmax(0,1fr))}
.tb{grid-template-columns:auto minmax(0,1fr) auto}
.tb-subs{grid-column:1/-1}
.tb-stars{grid-column:1/-1;grid-row:2}
.tb-go{grid-column:3;grid-row:1}
.tb-score{grid-column:2;justify-self:start}
@media (max-width:1000px){.trustbar{grid-template-columns:1fr}}
@media (max-width:560px){
  .tb{grid-template-columns:auto minmax(0,1fr)}
  .tb-score{grid-column:2}
  .tb-stars,.tb-go{grid-column:1/-1;grid-row:auto;justify-self:start}
}
.foot-social a.mb svg{stroke:currentColor;fill:none;width:17px;height:17px}

/* ---------- 19. enquiry form: security code row + invalid state ---------- */
.field.cap .cap-row{display:flex;gap:.6rem;align-items:stretch}
.field.cap .cap-img{flex:0 0 120px;width:120px;height:auto;align-self:center;border-radius:8px;
  border:1px solid var(--glass-line);background:#fff}
.field.cap input{flex:1 1 auto;min-width:0}
.cap-new{flex:0 0 auto;font:inherit;font-size:.82rem;font-weight:600;color:var(--cream-dim);cursor:pointer;
  background:rgba(20,32,56,.5);border:1px solid var(--glass-line);border-radius:10px;padding:0 .9rem;
  min-height:44px;white-space:nowrap;transition:.3s var(--ease)}
.cap-new:hover{color:var(--cream);border-color:rgba(201,162,78,.5)}
.field input.is-bad,.field textarea.is-bad{border-color:rgba(219,80,80,.7);box-shadow:0 0 0 3px rgba(219,80,80,.14)}
@media (max-width:420px){.field.cap .cap-row{flex-wrap:wrap}.field.cap input{flex-basis:100%}}

/* ---------- 20. footer on phones and tablets ----------
   Explore and What we build sit side by side; the areas run as a carousel
   instead of wrapping into a ragged cluster. Desktop keeps the single row. */
.fa-marquee{flex:1 1 auto;min-width:0}
.fa-track{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.fa-track .fa-town[aria-hidden="true"]{display:none}
@media (max-width:1000px){
  .foot-areas{flex-wrap:nowrap;gap:0;align-items:center}
  .foot-areas .fa-lbl{flex:0 0 auto;margin-right:1rem}
  .fa-marquee{overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
  .fa-track{flex-wrap:nowrap;width:max-content;gap:.6rem;animation:town-scroll 38s linear infinite;will-change:transform}
  .fa-track .fa-town{white-space:nowrap}
  .fa-track .fa-town[aria-hidden="true"]{display:inline-block}
  .fa-marquee:hover .fa-track,.fa-marquee:focus-within .fa-track{animation-play-state:paused}
}
@media (max-width:640px){
  .foot-areas{flex-wrap:wrap;gap:.8rem}
  .foot-areas .fa-lbl{flex-basis:100%;margin:0}
  .fa-marquee{flex-basis:100%;margin-inline:-4vw;padding-inline:4vw;width:100vw}
  /* Explore beside What we build; the brand and the contact details span the row */
  .foot-grid{grid-template-columns:1fr 1fr;column-gap:1.4rem}
  .foot-brand,.foot-col:last-child{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .fa-marquee{-webkit-mask-image:none;mask-image:none}
  .fa-track{animation:none !important;flex-wrap:wrap;width:100%}
  .fa-track .fa-town[aria-hidden="true"]{display:none}
}

/* ---------- 21. mobile menu: Services sits on the same centre line ----------
   The caret used to share the row with the word, which pushed "Services" left
   of every other item. A three column grid centres the word exactly and hangs
   the caret off its right. */
@media (max-width:1100px){
  nav[data-nav] li.has-sub{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0}
  nav[data-nav] li.has-sub > a{grid-column:2;justify-self:center}
  nav[data-nav] li.has-sub > .sub-toggle{grid-column:3;justify-self:start;margin-left:.1rem}
  nav[data-nav] li.has-sub > ul.subnav{grid-column:1/-1}
  nav[data-nav] a{text-align:center}
}
/* the floating buttons are fixed at the right edge; on a phone the footer's
   right column must stop short of that lane or its links sit under a button */
@media (max-width:640px){
  .foot-grid{padding-right:64px}
}