/* =============================================================================
   TRADE — the shared base under the lesson-* (driving school) and garage-* (mechanic)
   layouts, 2026-10-09. Written for a phone first: most of these clients' customers
   open the link from WhatsApp or Facebook on a phone, so the base is one column,
   thumb-sized actions, a bottom dock (call · WhatsApp · book) once the hero has gone
   by, and swipe rows instead of grids. Wider screens get columns at 900px+.

   A layout's own css/styles.css is appended after this file and gives the identity:
   the hero, the type, the shapes. These knobs are what it turns:
     --r        corner radius of cards and buttons
     --r-btn    corner radius of buttons
     --d-weight / --d-case / --d-track / --d-style   the display face's voice
     --hero-h   how much of the first phone screen the hero takes
   Every colour is a token from brand.css (palette.mjs), so a light, dark or warm
   ground works without edits. Motion uses translate/scale/opacity only and none of
   it runs under reduced motion; without JS this is the finished, still page.
   ========================================================================== */

:root{
  --wrap:1200px;
  --gut:20px;
  --r:14px;
  --r-btn:999px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --spring:cubic-bezier(.3,1.5,.5,1);
  --nav-h:64px;
  --d-weight:800;
  --d-case:none;
  --d-track:-.02em;
  --d-style:normal;
  --sec:72px;
}
@media (min-width:900px){ :root{ --gut:40px; --nav-h:76px; --sec:120px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); }
body{ margin:0; background:var(--ink); color:var(--fg); font:400 17px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
svg{ flex:none; }
.wrap{ width:min(100% - 2 * var(--gut), var(--wrap)); margin-inline:auto; }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
:focus-visible{ outline:2px solid var(--brand-lift); outline-offset:3px; }

/* --- type ------------------------------------------------------------------ */
.d-xl,.d-lg,.d-md{ font-family:var(--serif); margin:0; text-wrap:balance; font-weight:var(--d-weight);
  text-transform:var(--d-case); letter-spacing:var(--d-track); font-style:var(--d-style); }
.d-xl{ font-size:clamp(44px,12vw,104px); line-height:.94; }
.d-lg{ font-size:clamp(34px,8.6vw,64px); line-height:1; }
.d-md{ font-size:clamp(24px,5.4vw,32px); line-height:1.08; }
.d-xl i,.d-lg i,.d-md i{ font-style:var(--d-style); color:var(--brand-lift); }
.d-xl em,.d-lg em,.d-md em{ font-style:var(--d-style); color:var(--fg-2); }
.label{ margin:0 0 14px; font:700 12px/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--brand-lift); }
.lede{ margin:14px 0 0; max-width:54ch; font-size:clamp(17px,1.4vw,19px); line-height:1.6; color:var(--fg-2); text-wrap:pretty; }
.lede i,.lede em{ font-style:normal; color:var(--fg); font-weight:600; }

/* --- buttons ---------------------------------------------------------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 24px;
  border:2px solid transparent; border-radius:var(--r-btn); cursor:pointer; text-decoration:none; white-space:nowrap;
  font:700 16px/1 var(--sans); letter-spacing:.005em; -webkit-tap-highlight-color:transparent;
  transition:background-color .2s, border-color .2s, color .2s, scale .15s var(--ease); }
.btn:active{ scale:.97; }
.btn svg{ width:19px; height:19px; transition:translate .25s var(--ease); }
.btn:hover svg{ translate:3px 0; }
.btn--brand{ background:var(--brand); color:var(--on-brand); }
.btn--brand:hover{ background:var(--brand-deep); }
.btn--accent{ background:var(--accent); color:var(--on-accent); }
.btn--line{ border-color:var(--line-2); color:var(--fg); background:transparent; }
.btn--line:hover{ border-color:var(--fg); }
.btn--ghost{ border-color:rgb(var(--hero-fg-rgb) / .4); color:var(--hero-fg); background:transparent; }
.btn--ghost:hover{ border-color:var(--hero-fg); }
.btn--sm{ min-height:42px; padding:0 18px; font-size:14.5px; }
.btn--lg{ min-height:58px; padding:0 28px; font-size:17px; }
.btn--full{ width:100%; }

/* --- preview notice ---------------------------------------------------------- */
.pv{ position:relative; z-index:60; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:8px 44px 8px 16px; background:var(--fg); color:var(--ink); font:500 12.5px/1.35 var(--sans); text-align:center; }
.pv b{ font-weight:800; }
.pv button{ position:absolute; right:6px; top:50%; translate:0 -50%; width:34px; height:34px; border:0; background:none;
  color:inherit; font-size:20px; cursor:pointer; }

/* --- nav --------------------------------------------------------------------- */
.nav{ position:sticky; top:0; z-index:50; height:var(--nav-h); background:rgb(var(--ink-rgb) / .86);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line); transition:translate .35s var(--ease); }
.nav.is-tucked{ translate:0 -101%; }
.nav__in{ height:100%; display:flex; align-items:center; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; min-width:0; text-decoration:none; margin-right:auto; }
.brand__logo{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; }
.brand__txt{ display:flex; flex-direction:column; min-width:0; }
/* brandAssets.logoWide (2026-10-15, opt-in): a wide wordmark logo stands alone at a readable height; the name stays for screen readers */
.brand--wide .brand__logo{ width:auto; height:30px; max-width:150px; border-radius:0; object-fit:contain; background:none; padding:0; }
.brand--wide .brand__txt{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
footer .brand--wide .brand__logo{ height:44px; max-width:220px; }
@media (min-width:900px){ .brand--wide .brand__logo{ height:40px; max-width:200px; } footer .brand--wide .brand__logo{ height:52px; max-width:260px; } }
.brand__name{ font:var(--d-weight) 18px/1.05 var(--serif); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand__sub{ font:600 11px/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); }
.nav__links{ display:none; }
.nav__cta{ display:flex; align-items:center; gap:8px; }
.nav__tel{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--brand); color:var(--on-brand); text-decoration:none; }
.nav__tel svg{ width:19px; height:19px; }
.nav__tel span,.nav__book{ display:none; }
.nav__progress{ position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:var(--brand); transform-origin:0 50%; scale:var(--p,0) 1; }
/* the language switch (site.alternates): the page's own language marked, the other a link. Drawn in currentColor so it
   reads on a clear nav over a photograph as it does on the page's ground */
.langs{ display:inline-flex; align-items:center; flex:none; height:36px; padding:0 3px; border:1px solid color-mix(in srgb, currentColor 34%, transparent); border-radius:999px; }
.langs a{ display:grid; place-items:center; min-width:32px; height:28px; padding:0 7px; border-radius:999px; text-decoration:none; font:700 12px/1 var(--sans); letter-spacing:.06em; opacity:.72; }
.langs a:hover{ opacity:1; }
.langs a.is-on{ opacity:1; background:color-mix(in srgb, currentColor 16%, transparent); }
.nav:has(.langs) .brand__sub{ display:none; }
@media (min-width:1000px){ .nav:has(.langs) .brand__sub{ display:block; } }
.burger{ position:relative; width:44px; height:44px; border:1px solid var(--line-2); border-radius:50%; background:transparent; cursor:pointer; }
.burger i{ position:absolute; left:13px; right:13px; height:2px; background:currentColor; border-radius:2px; transition:translate .3s var(--ease), rotate .3s var(--ease); }
.burger i:first-child{ top:17px; } .burger i:last-child{ top:25px; }
.burger.is-open i:first-child{ translate:0 4px; rotate:45deg; }
.burger.is-open i:last-child{ translate:0 -4px; rotate:-45deg; }
@media (min-width:1000px){
  .nav__links{ display:flex; gap:26px; }
  .nav__links a{ text-decoration:none; font:600 15px/1 var(--sans); color:var(--fg-2); }
  .nav__links a:hover,.nav__links a.is-here{ color:var(--fg); }
  .nav__tel{ width:auto; height:auto; background:none; color:var(--fg); gap:8px; display:flex; align-items:center; font:700 15px/1 var(--sans); }
  .nav__tel svg{ color:var(--brand-lift); }
  .nav__tel span,.nav__book{ display:inline-flex; }
  .burger{ display:none; }
}

/* --- drawer ------------------------------------------------------------------ */
.drawer{ position:fixed; inset:var(--drawer-top, var(--nav-h)) 0 0; z-index:49; display:flex; flex-direction:column; justify-content:space-between;
  gap:24px; padding:24px var(--gut) calc(24px + env(safe-area-inset-bottom)); background:var(--ink); overflow:auto;
  opacity:0; visibility:hidden; translate:0 -12px; transition:opacity .3s, translate .35s var(--ease), visibility 0s .35s; }
.drawer.is-open{ opacity:1; visibility:visible; translate:0 0; transition:opacity .3s, translate .35s var(--ease); }
.drawer nav{ display:flex; flex-direction:column; }
.drawer nav a{ display:flex; align-items:baseline; gap:14px; padding:14px 0; border-bottom:1px solid var(--line);
  text-decoration:none; font:var(--d-weight) 30px/1.1 var(--serif); text-transform:var(--d-case); letter-spacing:var(--d-track); }
.drawer nav a span{ font:600 12px/1 var(--sans); color:var(--brand-lift); letter-spacing:.1em; }
.drawer__end{ display:grid; gap:10px; }

/* --- the dock: a phone's call · WhatsApp · book bar ------------------------------ */
.dock{ position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:45;
  display:flex; gap:8px; padding:8px; border-radius:22px;
  background:rgb(var(--ink-rgb) / .9); -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid var(--line-2); box-shadow:0 12px 40px -12px var(--shade);
  translate:0 140%; transition:translate .45s var(--spring); }
.dock.is-on{ translate:0 0; }
.dock__btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; border-radius:15px;
  background:var(--ink-3); color:var(--fg); text-decoration:none; font:700 15px/1 var(--sans); }
.dock__btn svg{ width:19px; height:19px; }
.dock__btn--main{ flex:1.5; background:var(--brand); color:var(--on-brand); }
@media (min-width:900px){ .dock{ display:none; } }
/* contact.waFloat: WhatsApp's own green, in the corner; on a phone it shows on the first screen only, then the dock
   carries WhatsApp (app.js marks it .is-past), so it never sits over the page */
.wa-float{ position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:44; display:grid; place-items:center;
  width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; box-shadow:0 10px 28px -8px rgb(0 0 0 / .45); }
.wa-float svg{ width:32px; height:32px; }
.wa-float:focus-visible{ outline:3px solid #fff; outline-offset:3px; box-shadow:0 0 0 6px #128C7E; }
.dock__btn--wa svg{ color:#25D366; }
@media (max-width:379px){ .dock__btn--wa{ flex:0 0 52px; } .dock__btn--wa span{ display:none; } }
@media (max-width:899px){ .wa-float{ transition:opacity .3s, scale .3s var(--spring); }
  .wa-float.is-past{ opacity:0; scale:.6; visibility:hidden; pointer-events:none; transition:opacity .3s, scale .3s, visibility 0s .3s; } }
@media (min-width:900px){ .wa-float{ right:24px; bottom:24px; width:62px; height:62px; } }

/* --- sections ------------------------------------------------------------------ */
.section{ padding:var(--sec) 0; position:relative; }
.head{ margin-bottom:32px; }
@media (min-width:900px){ .head{ margin-bottom:56px; } }

/* proof band */
.figs{ padding:48px 0; border-block:1px solid var(--line); }
.figs__statement{ margin:0 0 28px; font:var(--d-weight) clamp(26px,6.4vw,44px)/1.12 var(--serif); letter-spacing:var(--d-track);
  text-transform:var(--d-case); font-style:var(--d-style); text-wrap:balance; max-width:22ch; }
.figs__statement em,.figs__statement i{ font-style:var(--d-style); color:var(--brand-lift); }
.figs__list{ margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:22px 16px; }
.fig{ display:flex; flex-direction:column-reverse; gap:6px; }
.fig dd{ margin:0; font:var(--d-weight) clamp(34px,9vw,56px)/.95 var(--serif); letter-spacing:-.02em; color:var(--fg); }
.fig dt{ font:500 14px/1.35 var(--sans); color:var(--fg-2); }
@media (min-width:900px){ .figs__in{ display:grid; grid-template-columns:1.1fr 1.4fr; gap:64px; align-items:end; }
  .figs__statement{ margin:0; } .figs__list{ grid-template-columns:repeat(3,1fr); } }

/* services */
.svc__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.svc__item{ position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:6px 16px; align-items:start;
  padding:22px 0; border-bottom:1px solid var(--line); }
.svc__n{ font:700 13px/1.9 var(--sans); color:var(--brand-lift); letter-spacing:.06em; }
.svc__name{ margin:0; font:var(--d-weight) clamp(24px,6vw,34px)/1.05 var(--serif); letter-spacing:var(--d-track); text-transform:var(--d-case); font-style:var(--d-style); }
.svc__title{ margin:6px 0 0; font-weight:650; color:var(--fg); }
.svc__text{ margin:6px 0 0; color:var(--fg-2); font-size:16px; max-width:60ch; }
.svc__price{ margin:10px 0 0; font-weight:800; color:var(--brand-lift); }
.svc__go{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1.5px solid var(--line-2); color:var(--fg);
  transition:background-color .2s, color .2s, border-color .2s; }
.svc__go::after{ content:""; position:absolute; inset:0; }
.svc__go svg{ width:19px; height:19px; }
.svc__item:hover .svc__go{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }

/* passes */
.passes__list{ list-style:none; margin:0 calc(var(--gut) * -1); padding:4px var(--gut) 12px; display:grid; grid-auto-flow:column;
  grid-auto-columns:min(74vw, 280px); gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.passes__list::-webkit-scrollbar{ display:none; }
.pass{ scroll-snap-align:start; position:relative; display:flex; flex-direction:column; gap:6px; min-height:190px; padding:22px;
  border-radius:var(--r); background:var(--ink-2); border:1px solid var(--line); overflow:hidden; }
.pass__stamp{ align-self:flex-start; margin-bottom:auto; padding:6px 10px; border:2px solid currentColor; border-radius:6px; rotate:-6deg;
  color:var(--brand-lift); font:900 13px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; }
.pass__name{ margin-top:22px; font:var(--d-weight) 34px/1 var(--serif); letter-spacing:var(--d-track); text-transform:var(--d-case); font-style:var(--d-style); }
.pass__meta{ font:600 14px/1.35 var(--sans); color:var(--fg-2); }
.pass__note{ font-size:14.5px; line-height:1.45; color:var(--fg); }
.pass__first{ position:absolute; top:20px; right:18px; font:700 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); }
.passes__more{ margin:20px 0 0; }
@media (min-width:900px){ .passes__list{ margin:0; padding:0; grid-auto-flow:row; grid-template-columns:repeat(4,1fr); overflow:visible; } }

/* offer */
.offer__card{ position:relative; padding:32px 24px; border-radius:calc(var(--r) * 1.4); background:var(--hero-ink); color:var(--hero-fg); overflow:hidden; }
.offer__card .label{ color:var(--hero-accent-lift); }
.offer__title i{ color:var(--hero-accent-lift); }
.offer__text{ margin:14px 0 0; color:var(--hero-fg-2); font-size:17px; max-width:52ch; }
.offer__items{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.offer__items li{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:rgb(var(--hero-fg-rgb) / .08);
  font:650 14.5px/1 var(--sans); }
.offer__items svg{ width:16px; height:16px; color:var(--hero-accent-lift); }
.offer__note{ margin:18px 0 0; font-size:14px; color:var(--hero-fg-3); }
.offer__go{ margin-top:24px; }
@media (min-width:900px){ .offer__card{ padding:56px; } }

/* steps */
.steps__list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:s; }
.step{ position:relative; padding:24px 22px 24px 76px; border-radius:var(--r); background:var(--ink-2); border:1px solid var(--line); }
.step__n{ position:absolute; left:22px; top:22px; display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--brand); color:var(--on-brand); font:800 14px/1 var(--sans); }
.step__title{ margin:0; font:var(--d-weight) 22px/1.15 var(--serif); letter-spacing:var(--d-track); text-transform:var(--d-case); font-style:var(--d-style); }
.step p{ margin:6px 0 0; color:var(--fg-2); font-size:16px; }
@media (min-width:900px){ .steps__list{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
  .step{ padding:76px 24px 28px; } .step__n{ top:24px; left:24px; } }

/* reviews */
.quotes{ margin:0 calc(var(--gut) * -1); padding:4px var(--gut) 12px; display:grid; grid-auto-flow:column; grid-auto-columns:min(84vw, 360px);
  gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.quotes::-webkit-scrollbar{ display:none; }
.quote,.score{ scroll-snap-align:start; margin:0; display:flex; flex-direction:column; gap:14px; padding:24px; border-radius:var(--r);
  background:var(--ink-2); border:1px solid var(--line); }
.quote__stars{ color:var(--accent-lift); letter-spacing:.12em; font-size:15px; }
.quote blockquote{ margin:0; flex:1; }
.quote blockquote p{ margin:0; font-size:17px; line-height:1.55; }
.quote figcaption{ display:flex; align-items:center; gap:12px; }
.quote figcaption > span:last-child{ display:flex; flex-direction:column; }
.quote figcaption small{ color:var(--fg-3); font-size:13.5px; }
.quote__av{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--brand-mist); color:var(--brand-lift); font:800 16px/1 var(--sans); }
.score{ text-decoration:none; background:var(--brand); color:var(--on-brand); border-color:transparent; justify-content:space-between; }
.score__n{ font:var(--d-weight) 72px/.9 var(--serif); letter-spacing:-.03em; }
.score__t{ font:600 17px/1.35 var(--sans); }
.score__l{ display:flex; align-items:center; gap:8px; font:700 14px/1 var(--sans); }
.score__l svg{ width:17px; height:17px; }
@media (min-width:900px){ .quotes{ margin:0; padding:0; grid-auto-flow:row; grid-template-columns:repeat(3,1fr); overflow:visible; } }

/* areas */
.areas__body{ display:grid; gap:28px; }
.areas__places{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.areas__places li{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-radius:999px; background:var(--ink-2); border:1px solid var(--line);
  font:650 16px/1 var(--sans); }
.areas__places svg{ width:17px; height:17px; color:var(--brand-lift); }
.areas__centres ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.areas__centres li{ display:flex; flex-direction:column; gap:2px; padding:16px 18px; border-left:4px solid var(--brand); background:var(--ink-2); border-radius:0 var(--r) var(--r) 0; }
.areas__centres b{ font:var(--d-weight) 20px/1.2 var(--serif); }
.areas__centres span{ color:var(--fg-2); font-size:15px; }
.areas__addr address{ font-style:normal; font-size:19px; font-weight:600; margin-bottom:16px; }
@media (min-width:900px){ .areas__in{ display:grid; grid-template-columns:1fr 1.2fr; gap:64px; align-items:start; } .areas .head{ margin:0; } }

/* gallery */
.shots{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.shot{ padding:0; border:0; background:var(--ink-2); border-radius:calc(var(--r) * .7); overflow:hidden; cursor:zoom-in; aspect-ratio:1; }
.shot img{ width:100%; height:100%; object-fit:cover; transition:scale .6s var(--ease); }
.shot:hover img{ scale:1.05; }
@media (min-width:900px){ .shots{ grid-template-columns:repeat(4,1fr); gap:12px; } .shots--three{ grid-template-columns:repeat(3,1fr); } }

/* prices (2026-10-16): a rate card of the business's own prices, grouped; figures large, units and words small */
.prices__card{ padding:4px 18px 8px; border-radius:var(--r); background:var(--ink-2); border:1px solid var(--line); }
.prices__group{ padding:18px 0 4px; }
.prices__group + .prices__group{ border-top:1px solid var(--line-2); }
.prices__gt{ margin:0 0 2px; font:700 12.5px/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); }
.prices__list{ list-style:none; margin:0; padding:0; }
.prices__row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; padding:13px 0; }
.prices__row + .prices__row{ border-top:1px solid var(--line); }
.prices__name{ flex:1 1 11em; min-width:0; margin:0; }
.prices__name b{ display:block; font-weight:700; font-size:17px; line-height:1.3; }
.prices__name span{ display:block; margin-top:3px; font-size:14.5px; line-height:1.45; color:var(--fg-2); }
.prices__price{ margin:0 0 0 auto; font:800 27px/1 var(--serif); letter-spacing:-.02em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.prices__price small{ font:650 14px/1 var(--sans); letter-spacing:0; color:var(--fg-2); }
.prices__price--ask{ font:700 15px/1.3 var(--sans); letter-spacing:0; color:var(--fg-2); }
.prices__go{ flex:0 0 100%; display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:4px; color:var(--fg); font:700 15px/1.2 var(--sans); text-underline-offset:4px; }
.prices__go svg{ width:16px; height:16px; }
.prices__note{ margin:6px 0 12px; font-size:14px; line-height:1.5; color:var(--fg-3); }
@media (min-width:900px){ .prices__in{ display:grid; grid-template-columns:1fr 1.25fr; gap:64px; align-items:start; } .prices__card{ padding:6px 28px 12px; } }

/* video (2026-10-16): the business's own clips in one grid, the first large; every frame 4:5, the clip cut to fill it */
.vids__grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vid{ position:relative; margin:0; overflow:hidden; aspect-ratio:4 / 5; border-radius:var(--r); background:var(--ink-3); isolation:isolate; }
.vid--lead{ grid-column:1 / -1; }
.vid__still,.vid video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vid video{ opacity:0; transition:opacity .3s; }
.vid.is-ready video{ opacity:1; }
.vid__cap{ position:absolute; inset:auto 0 0; z-index:1; padding:40px 12px 11px; background:linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / .7)); color:#fff;
  font:500 13px/1.3 var(--sans); pointer-events:none; }
.vid__cap b{ display:block; font-weight:700; font-size:14px; }
.vid__cap span{ display:block; margin-top:2px; opacity:.86; }
.vid--lead .vid__cap{ padding:64px 18px 16px; font-size:14.5px; }
.vid--lead .vid__cap b{ font-size:17px; }
.vid__btn{ position:absolute; top:8px; right:8px; z-index:2; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%;
  background:rgb(0 0 0 / .46); color:#fff; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .2s; }
.vid__btn:hover{ background:rgb(0 0 0 / .66); }
.vid__btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.vid__btn i{ width:13px; height:15px; background:currentColor; clip-path:polygon(0 0, 100% 50%, 0 100%); translate:2px 0; }
.vid__btn[aria-pressed="true"] i{ width:12px; height:14px; clip-path:none; background:linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px, currentColor 8px); translate:0 0; }
html:not(.app) .vid__btn{ display:none; }
@media (min-width:900px){
  .vids__grid{ grid-template-columns:repeat(4, 1fr); gap:14px; }
  .vid--lead{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
  /* three clips: one row of three, all the same shape */
  .vids__grid:has(> .vid:nth-child(3):last-child){ grid-template-columns:repeat(3, 1fr); }
  .vids__grid:has(> .vid:nth-child(3):last-child) .vid--lead{ grid-column:auto; grid-row:auto; aspect-ratio:4 / 5; }
  .vid__btn{ top:12px; right:12px; }
}

/* faq */
.qas{ border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 0; border:0; background:none;
  text-align:left; cursor:pointer; font:700 18px/1.35 var(--sans); }
.qa__ic{ position:relative; flex:none; width:32px; height:32px; border-radius:50%; background:var(--ink-3); }
.qa__ic::before,.qa__ic::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; margin:-1px 0 0 -6px; background:currentColor; transition:rotate .3s var(--ease); }
.qa__ic::after{ rotate:90deg; }
.qa.is-open .qa__ic::after{ rotate:0deg; }
.qa__a{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
html:not(.app) .qa__a{ max-height:none; }
.qa__a p{ margin:0 0 22px; color:var(--fg-2); max-width:62ch; }
@media (min-width:900px){ .faq__in{ display:grid; grid-template-columns:1fr 1.4fr; gap:64px; align-items:start; } }

/* contact */
.closing__in{ display:grid; gap:36px; }
.ways{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:10px; }
.way{ display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--r); background:var(--ink-2); border:1px solid var(--line);
  text-decoration:none; transition:border-color .2s; }
a.way:hover{ border-color:var(--brand); }
.way svg{ width:22px; height:22px; color:var(--brand-lift); }
.way span{ display:flex; flex-direction:column; min-width:0; font-size:16.5px; overflow-wrap:anywhere; }
.way b{ font:600 12.5px/1.4 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); }
.quoteform{ padding:24px 20px; border-radius:calc(var(--r) * 1.3); background:var(--ink-2); border:1px solid var(--line); }
.quoteform__title{ margin:0 0 18px; font:var(--d-weight) 26px/1.1 var(--serif); letter-spacing:var(--d-track); text-transform:var(--d-case); font-style:var(--d-style); }
.form__grid{ display:grid; gap:14px; margin-bottom:18px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font:650 14px/1.2 var(--sans); color:var(--fg-2); }
.field input,.field select,.field textarea{ width:100%; min-height:52px; padding:13px 15px; border-radius:calc(var(--r) * .7); border:1.5px solid var(--line-2);
  background:var(--ink); font-size:16px; transition:border-color .2s; }
.field textarea{ min-height:96px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--brand-lift); }
.field .is-upper{ text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.quoteform__note{ margin:14px 0 0; font-size:13.5px; color:var(--fg-3); }
.callcard{ display:flex; flex-direction:column; gap:16px; }
.callcard .quoteform__title,.callcard .quoteform__note{ margin:0; }
.callcard__num{ display:flex; align-items:center; gap:14px; color:var(--fg); text-decoration:none;
  font:var(--d-weight) clamp(30px,7vw,46px)/1 var(--serif); letter-spacing:var(--d-track); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.callcard__num svg{ flex:none; width:32px; height:32px; color:var(--brand-lift); }
.callcard__num:hover span{ text-decoration:underline; text-underline-offset:6px; }
.form__ok{ display:none; margin:14px 0 0; padding:14px 16px; border-radius:var(--r); background:var(--brand-mist); font-weight:600; }
@media (min-width:600px){ .form__grid{ grid-template-columns:1fr 1fr; } .field--full{ grid-column:1 / -1; } }
@media (min-width:900px){ .closing__in{ grid-template-columns:1fr 1.1fr; gap:72px; align-items:start; } .quoteform{ padding:36px; } }

/* footer */
.footer{ padding:56px 0 calc(110px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--ink-2); }
.footer__grid{ display:grid; gap:32px; }
.footer__about p{ color:var(--fg-2); max-width:44ch; font-size:15.5px; }
.footer__h{ margin:0 0 12px; font:700 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); }
.footer__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.footer__col a,.footer__col span{ text-decoration:none; color:var(--fg-2); font-size:15.5px; overflow-wrap:anywhere; }
.footer__col a:hover{ color:var(--fg); }
.socials{ display:flex; gap:8px; }
.socials a{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2); }
.socials svg{ width:18px; height:18px; }
.footer__base{ margin-top:40px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 24px; font-size:13.5px; color:var(--fg-3); }
@media (min-width:900px){ .footer{ padding-bottom:56px; } .footer__grid{ grid-template-columns:1.6fr repeat(3,1fr); } }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:56px 12px; background:rgb(0 0 0 / .92);
  opacity:0; visibility:hidden; transition:opacity .25s, visibility 0s .25s; }
.lightbox.is-open{ opacity:1; visibility:visible; transition:opacity .25s; }
.lightbox img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; }
.lightbox button{ position:absolute; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; border:0;
  background:rgb(255 255 255 / .12); color:#fff; cursor:pointer; }
.lightbox button svg{ width:22px; height:22px; }
.lightbox__close{ top:12px; right:12px; }
.lightbox__nav--prev{ left:12px; bottom:16px; } .lightbox__nav--next{ right:12px; bottom:16px; }
.lightbox__count{ position:absolute; bottom:30px; left:50%; translate:-50% 0; color:#fff; font:600 14px/1 var(--sans); }

/* --- arrival ------------------------------------------------------------------ */
html.app .reveal{ opacity:0; translate:0 22px; transition:opacity .7s var(--ease), translate .7s var(--ease); transition-delay:var(--d,0ms); }
html.app .reveal.is-in{ opacity:1; translate:0 0; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  html.js .reveal{ opacity:1; translate:none; transition:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* --- the trip (2026-10-09, lesson-journey first): the journey map and the steps under it.
   A layout opts in with its own steps.html (#trip, .trip__hold, .journey); app.js drives it.
   On a phone the map holds at the top of the screen (sticky) while the steps go by
   underneath; app.js moves the car from step to step. From 900px the map holds beside
   the steps. Without .app (no JS) everything is drawn and the car is at the flag. */
.trip{ position:relative; display:grid; gap:18px; }
.trip__hold{ position:sticky; top:10px; z-index:2; }
.trip__hold::before{ content:""; position:absolute; left:-4px; right:-4px; bottom:100%; height:10px; background:var(--ink); }
.trip__hold::after{ content:""; position:absolute; left:-4px; right:-4px; top:100%; height:34px; background:linear-gradient(var(--ink), rgb(var(--ink-rgb) / 0)); pointer-events:none; }
.journey{ position:relative; margin:0; aspect-ratio:360 / 260; border-radius:var(--r); background:var(--ink-2); border:1px solid var(--line);
  overflow:hidden; box-shadow:0 1px 0 var(--line), 0 22px 30px -22px rgb(0 0 0 / .45); }
.journey__map{ position:absolute; inset:0; width:100%; height:100%; color:var(--line-2); }
.journey__verge{ fill:none; stroke:rgb(var(--brand-rgb) / .16); stroke-width:34; stroke-linecap:round; }
.journey__road{ fill:none; stroke:var(--hero-ink); stroke-width:20; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; }
.journey__dash{ fill:none; stroke:var(--ink); stroke-width:1.6; stroke-dasharray:6 7; opacity:.9; }
.journey__done{ fill:none; stroke:var(--hero-brand-lift); stroke-width:4; stroke-linecap:round; stroke-dasharray:var(--done,1) 2; }
.journey__car{ translate:330px 34px; rotate:-100deg; }
.journey__body{ fill:#fff; stroke:var(--hero-ink); stroke-width:1.4; }
.journey__roof{ fill:var(--brand); }
.journey__lamp{ fill:var(--ring, #D4202A); }
.journey__start{ position:absolute; left:12.8%; top:82%; width:22%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; background:var(--brand); border:4px solid var(--ink); box-shadow:0 0 0 2px var(--brand), 0 14px 26px -12px rgb(0 0 0 / .5); }
.journey__start img{ width:100%; height:100%; object-fit:cover; }
.journey__l{ display:grid; place-items:center; width:58%; aspect-ratio:1; border-radius:4px; background:#fff; color:var(--ring, #D4202A); font:900 clamp(22px,7vw,40px)/1 var(--sans); }
.journey__flag{ position:absolute; left:91.7%; top:13%; width:30px; height:22px; translate:-12% -100%; border-radius:2px; transform-origin:0 100%;
  background:conic-gradient(var(--hero-ink) 25%, #fff 0 50%, var(--hero-ink) 0 75%, #fff 0) 0 0 / 10px 10px; box-shadow:0 0 0 2px var(--hero-ink); }
.journey__flag::after{ content:""; position:absolute; left:-3px; top:-2px; width:3px; height:40px; background:var(--hero-ink); border-radius:2px; }
.journey__tag{ position:absolute; padding:6px 10px 5px; border-radius:999px; background:var(--ink); border:1px solid var(--line-2);
  font:700 12px/1 var(--sans); white-space:nowrap; box-shadow:0 6px 16px -10px rgb(0 0 0 / .4); transition:opacity .3s, scale .45s var(--spring); }
.journey__tag--a{ left:24%; top:86%; }
.journey__tag--b{ left:49%; top:56%; translate:-50% 0; }
.journey__tag--c{ right:13%; top:6%; background:var(--brand); color:var(--on-brand); border-color:var(--brand); }
.journey__burst{ position:absolute; left:91.7%; top:10%; width:0; height:0; }
.journey__burst i{ position:absolute; left:0; top:0; width:7px; height:7px; border-radius:2px; opacity:0; background:var(--sign-yellow, #FFD200); }
.journey__burst i:nth-child(3n+1){ background:var(--brand-lift); } .journey__burst i:nth-child(3n+2){ background:var(--ring, #D4202A); border-radius:50%; }
.app .journey__road{ stroke-dashoffset:1; }
.app .journey.is-in .journey__road{ animation:draw 1.3s .1s var(--ease) forwards; }
.app .journey__tag--b:not(.is-on),.app .journey__tag--c:not(.is-on){ opacity:0; scale:.6; }
.journey.is-there .journey__flag{ animation:wave 1.2s var(--ease) 2; }
.journey.is-there .journey__tag--c{ box-shadow:0 0 0 6px rgb(var(--brand-rgb) / .22), 0 10px 20px -10px rgb(0 0 0 / .5); }
.journey.is-there .journey__burst i{ animation:burst .9s var(--ease) forwards; }
.journey__burst i:nth-child(1){ --x:-34px; --y:-18px; } .journey__burst i:nth-child(2){ --x:-26px; --y:20px; }
.journey__burst i:nth-child(3){ --x:-8px; --y:30px; }   .journey__burst i:nth-child(4){ --x:-40px; --y:4px; }
.journey__burst i:nth-child(5){ --x:-16px; --y:-26px; } .journey__burst i:nth-child(6){ --x:14px; --y:26px; }
.journey__burst i:nth-child(7){ --x:-30px; --y:32px; }  .journey__burst i:nth-child(8){ --x:6px; --y:-22px; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes wave{ 0%,100%{ rotate:0deg; } 30%{ rotate:-9deg; } 65%{ rotate:6deg; } }
@keyframes burst{ 0%{ opacity:1; translate:0 0; scale:1; } 100%{ opacity:0; translate:var(--x) var(--y); scale:.4; rotate:180deg; } }

.trip .steps__list{ padding-bottom:8vh; }
body.trip-held .nav{ translate:0 -101%; }
@media (min-width:900px){
  .trip{ grid-template-columns:1fr 1.15fr; gap:56px; align-items:start; }
  .trip__hold{ grid-column:2; grid-row:1; top:calc(var(--nav-h) + 24px); }
  .trip__hold::before,.trip__hold::after{ display:none; }
  .trip .steps__list{ grid-column:1; grid-row:1; grid-template-columns:1fr; padding-block:4vh 22vh; }
  .journey__tag{ font-size:14px; padding:8px 13px 7px; }
}
@media (prefers-reduced-motion:reduce){ .app .journey__road{ stroke-dashoffset:0; } }

/* The selected trade designs carry the business identity in the hero, without cropping logos. */
.lesson-journey .identity,.garage-apex .identity{display:flex;align-items:center;gap:18px;min-width:0;margin-bottom:28px;}
.identity__logo{flex:none;width:80px;height:80px;object-fit:contain;background:#fff;border-radius:12px;padding:6px;}
.identity__copy{min-width:0;}
.identity__name{margin:0;font:800 clamp(24px,5vw,42px)/1.06 var(--sans);letter-spacing:-.035em;overflow-wrap:anywhere;text-wrap:balance;}
.identity__place{margin:7px 0 0;font:600 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);}
.lesson-journey .brand__logo,.garage-apex .brand__logo{object-fit:contain;border-radius:6px;background:#fff;padding:3px;}
.lesson-journey .brand__name,.garage-apex .brand__name{white-space:normal;overflow:visible;font-size:clamp(15px,4vw,20px);line-height:1.08;}
.lesson-journey .nav .brand__sub,.garage-apex .nav .brand__sub{font-size:10px;letter-spacing:.04em;}
.garage-apex .identity{color:var(--hero-fg);border-left:3px solid var(--hero-brand-display);padding-left:18px;}
.garage-apex .identity__place{color:var(--hero-fg-2);}
@media(min-width:900px){.identity__logo{width:96px;height:96px;}.identity__name{font-size:42px;}}

.skip-link{position:fixed;left:16px;top:12px;z-index:100;translate:0 -180%;padding:12px 18px;background:var(--fg);color:var(--ink);font-weight:700;border-radius:6px;}
.skip-link:focus{translate:0 0;}

/* socials: icons at the nav's right edge and a section of two cards (opt-in: contact.socialProminent, section "socials") */
.nav__soc{ display:flex; gap:6px; }
.nav__soc a{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid color-mix(in srgb, currentColor 34%, transparent); color:inherit; }
.nav__soc svg{ width:18px; height:18px; }
@media (max-width:420px){ .nav__soc a{ width:36px; height:36px; } .nav__soc{ gap:4px; } .nav__cta{ gap:5px; } }
.soc__cards{ display:grid; gap:12px; grid-template-columns:1fr; max-width:720px; margin-inline:auto; }
@media (min-width:600px){ .soc__cards{ grid-template-columns:1fr 1fr; } }
.soc__card{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:26px 18px; border-radius:var(--r-btn, 14px); background:var(--card, #fff); border:1px solid var(--line-2); text-decoration:none; color:var(--fg); text-align:center; }
.soc__card svg{ width:34px; height:34px; color:var(--brand-lift, var(--brand)); }
.soc__name{ font:700 20px/1.1 var(--sans); }
.soc__handle{ font:500 15px/1.2 var(--sans); opacity:.75; }
.nav:has(.nav__soc) .brand__sub{ display:none; }
@media (min-width:1000px){ .nav:has(.nav__soc) .brand__sub{ display:block; } }
.nav:has(.nav__soc) .nav__links a,.nav:has(.nav__soc) .nav__tel span,.dock[data-always] .dock__btn span{ white-space:nowrap; }
.dock[data-always] .dock__btn{ gap:6px; padding-inline:6px; }
@media (min-width:900px) and (max-width:1279px){ .nav:has(.nav__soc) .nav__tel span{ display:none; } .nav:has(.nav__soc) .nav__tel{ width:40px; height:40px; justify-content:center; } .nav:has(.nav__soc) .nav__links{ gap:18px; } }

/* Optional supporting documents: readable notices, terms and other short pages. */
.document__in{max-width:780px;}
.document__back{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:650;text-underline-offset:4px;}
.document__back svg{width:18px;height:18px;rotate:180deg;}
.document__head{margin-top:32px;padding-bottom:28px;border-bottom:1px solid var(--line);}
.document__head h1{font:750 clamp(36px,5vw,58px)/1.12 var(--sans);letter-spacing:-.04em;margin:0;}
.document__head .lede{margin-top:16px;}
.document__updated{font-size:13px;color:var(--fg-3);margin:16px 0 0;}
.document__section{padding:28px 0;border-bottom:1px solid var(--line);}
.document__section h2{font:700 23px/1.3 var(--sans);letter-spacing:-.02em;margin:0 0 14px;}
.document__section p,.document__section li{color:var(--fg-2);font-size:16px;line-height:1.75;}
.document__section p{margin:12px 0 0;}
.document__links{padding-left:20px;margin:18px 0 0;}
.document__links li{margin-top:8px;}
.document__links a{color:var(--brand-display,var(--brand-lift));text-underline-offset:4px;}
.document__in>.btn{margin-top:32px;}

/* --- showcase: one kind of job in its own section, photos in labelled rows ---------------- */
.showcase__group{ margin-top:28px; }
.showcase__group:first-of-type{ margin-top:0; }
.showcase__tag{ display:inline-block; margin:0 0 12px; padding:6px 14px; border-radius:999px; border:1.5px solid var(--line-2);
  font:700 12.5px/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-2); }
.showcase__tag--after{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.showcase__row{ display:grid; grid-auto-flow:column; grid-auto-columns:68vw; gap:10px; margin:0 calc(var(--gut) * -1); padding:0 var(--gut) 6px;
  list-style:none; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gut); scrollbar-width:none; }
.showcase__row::-webkit-scrollbar{ display:none; }
.showcase__shot{ min-width:0; aspect-ratio:4 / 5; border-radius:var(--r); overflow:hidden; background:var(--ink-2); scroll-snap-align:start; }
.showcase__shot img{ width:100%; height:100%; object-fit:cover; }
.showcase__cta{ margin:28px 0 0; }
@media (min-width:900px){
  .showcase__row{ grid-auto-flow:row; grid-template-columns:repeat(5,minmax(0,1fr)); margin:0; padding:0; overflow:visible; }
}

/* Electric Circuit: Course layout adapted for electrical enquiries and client colour tokens. */
:root{
  --r:6px;
  --r-btn:8px;
  --d-weight:800;
  --d-case:none;
  --d-style:normal;
  --d-track:-.035em;
  --slab:var(--ink-2);
  --slate:var(--hero-ink);
  --slate-2:var(--hero-ink-2);
  --slate-3:var(--hero-ink-3);
  --chalk:var(--hero-fg);
  --mist:var(--hero-fg-2);
  --acc:var(--brand-display, var(--brand-lift));
  --acc-d:var(--go, var(--hero-brand-display, var(--hero-brand-lift)));   /* --go: the readable action colour on a brand-deep dark */
  --rating-color:var(--acc-d);
  --joint:rgb(var(--hero-fg-rgb) / .34);
  --wd:79%;
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l3 6.3 6.8.9-5 4.8 1.3 6.8L12 17.7 5.9 21l1.3-6.8-5-4.8 6.8-.9z'/%3E%3C/svg%3E");
}
body{ font-size:16.5px; line-height:1.55; }
::selection{ background:var(--fg); color:var(--ink); }

/* --- type ---------------------------------------------------------------------------- */
.d-xl,.d-lg,.d-md{ font-stretch:var(--wd); line-height:.95; }
.d-lg{ font-size:clamp(38px,10.4vw,76px); }
.d-xl i,.d-lg i,.d-md i{ color:var(--acc); }
.label{ display:inline-flex; align-items:center; gap:9px; margin-bottom:16px; font:650 14.5px/1.2 var(--sans); letter-spacing:0; text-transform:none; color:var(--fg-2); }
.label::before{ content:""; flex:none; width:15px; height:8px; border-radius:1.5px; background:var(--acc); }
.lede{ font-size:clamp(16.5px,1.4vw,19px); line-height:1.55; }
.btn{ font-weight:700; letter-spacing:-.005em; }

/* five stars, filled to the score */
.stars{ position:relative; display:inline-block; flex:none; width:75px; height:15px; background:rgb(var(--hero-fg-rgb) / .28);
  -webkit-mask:var(--star) 0 50% / 15px 15px repeat-x; mask:var(--star) 0 50% / 15px 15px repeat-x; }
.stars::before{ content:""; position:absolute; inset:0 auto 0 0; width:var(--pct, 100%); background:var(--rating-color); }

/* --- nav: clear over the photograph, stone once the hero has gone ---------------------- */
.nav{ background:rgb(var(--ink-rgb) / .92); transition:translate .35s var(--ease), background-color .3s, color .3s, border-color .3s; }
.brand__logo{ width:42px; height:42px; object-fit:contain; border-radius:0; background:transparent; padding:0; }
.brand__name{ white-space:normal; overflow:visible; font:800 clamp(16px,4.3vw,20px)/1.04 var(--serif); font-stretch:84%; letter-spacing:-.025em; }
.brand__sub{ font:550 11.5px/1.25 var(--sans); letter-spacing:0; text-transform:none; }
.burger{ border-radius:var(--r-btn); }
.nav__tel{ border-radius:var(--r-btn); }
html.js .nav:not(.is-solid):not(:has(.burger.is-open)){ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom-color:transparent; color:var(--chalk); }
html.js .nav:not(.is-solid):not(:has(.burger.is-open)) .brand__sub{ color:rgb(var(--hero-fg-rgb) / .8); }
html.js .nav:not(.is-solid):not(:has(.burger.is-open)) .burger{ border-color:rgb(var(--hero-fg-rgb) / .45); }
html.js .nav:not(.is-solid):not(:has(.burger.is-open)) .nav__progress{ opacity:0; }
html.js .nav.is-glass:not(.is-solid):not(:has(.burger.is-open)){ background:rgb(var(--hero-ink-rgb) / .78); -webkit-backdrop-filter:saturate(1.3) blur(14px); backdrop-filter:saturate(1.3) blur(14px); border-bottom-color:rgb(var(--hero-fg-rgb) / .1); }
@media (min-width:1000px){
  .nav__links a{ font-weight:600; font-size:15px; }
  html.js .nav:not(.is-solid) .nav__links a,html.js .nav:not(.is-solid) .nav__tel{ color:rgb(var(--hero-fg-rgb) / .88); }
  html.js .nav:not(.is-solid) .nav__tel svg{ color:var(--chalk); }
}
.drawer nav a{ font-stretch:var(--wd); font-size:34px; letter-spacing:-.03em; }
.drawer nav a span{ color:var(--fg-3); }
.dock{ border-radius:12px; background:rgb(var(--hero-ink-rgb) / .94); border-color:rgb(var(--hero-fg-rgb) / .12); }
.dock__btn{ border-radius:8px; background:var(--slate-3); color:var(--chalk); }
.dock__btn--main{ background:var(--brand); color:var(--on-brand); }

/* --- hero ------------------------------------------------------------------------------ */
.hero{ position:relative; isolation:isolate; display:flex; flex-direction:column; min-height:100svh; margin-top:calc(var(--nav-h) * -1); padding-top:var(--nav-h);
  background:var(--slate); color:var(--chalk); overflow:hidden; --t0:2.4s; }
/* the preview notice sits above the nav: the first screen is the hero less the notice (app.js measures it) */
body:has(.pv) .hero{ min-height:calc(100svh - var(--pv-h, 50px)); }
@media (min-width:600px){ body:has(.pv) .hero{ min-height:calc(100svh - var(--pv-h, 34px)); } }
.hero__bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; background:var(--slate); }
.hero__bg img{ width:100%; height:100%; object-fit:cover; scale:calc(1.03 + var(--hs, 0) * .14); transform-origin:50% 60%; }
/* hero.slides: a photograph for a word of the roll, faded in over the first as the word changes (app.js adds them) */
.hero__bg .hero__slide{ position:absolute; inset:0; opacity:0; transition:opacity .9s ease; }
.hero__bg .hero__slide.is-on{ opacity:1; }
.hero__bg::after{ content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgb(var(--hero-ink-rgb) / .66) 0, rgb(var(--hero-ink-rgb) / .16) 20%, rgb(var(--hero-ink-rgb) / .06) 34%, rgb(var(--hero-ink-rgb) / .56) 58%, rgb(var(--hero-ink-rgb) / .92) 100%); }
/* Alternate bands reveal the client's own photograph. */
.lay{ position:absolute; inset:0; z-index:1; display:grid; grid-template-rows:repeat(9, 1fr); pointer-events:none; --cols:3; }
.lay i{ position:relative; overflow:hidden; }
.lay i::before{ content:""; position:absolute; inset:0 -1px; background:var(--slate); }
.lay i::after{ content:""; position:absolute; inset:0; opacity:0; border-top:1px solid var(--joint);
  background:none; }

.lay i:nth-child(1){ --n:8; } .lay i:nth-child(2){ --n:7; } .lay i:nth-child(3){ --n:6; } .lay i:nth-child(4){ --n:5; } .lay i:nth-child(5){ --n:4; }
.lay i:nth-child(6){ --n:3; } .lay i:nth-child(7){ --n:2; } .lay i:nth-child(8){ --n:1; } .lay i:nth-child(9){ --n:0; }
html:not(.js) .lay i::before{ display:none; }
html.js .lay i::before{ animation:lay-l .5s calc(var(--t0) + var(--n) * 78ms) ease-out forwards; }
html.js .lay i:nth-child(even)::before{ animation-name:lay-r; }
html.js .hero--photo .lay i::after{ animation:joints 1.5s calc(var(--t0) + var(--n) * 78ms) ease-out forwards; }
.hero:not(.hero--photo) .lay i::before{ display:none; }
.hero:not(.hero--photo) .lay i::after{ opacity:0; }
html.js .hero:not(.hero--photo) .lay i::after{ animation:jointsin .7s calc(var(--t0) + var(--n) * 78ms) ease-out backwards; }
@keyframes lay-l{ to{ translate:-101% 0; } }
@keyframes lay-r{ to{ translate:101% 0; } }
@keyframes joints{ 0%{ opacity:0; } 22%,58%{ opacity:1; } 100%{ opacity:0; } }
@keyframes jointsin{ from{ opacity:0; } }

.hero__in{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; padding-block:28px 22px; translate:0 calc(var(--hs, 0) * -44px); }
.hero__copy{ min-width:0; }
.rate{ display:inline-flex; align-items:center; gap:9px; margin:0 0 16px; padding:7px 13px 7px 11px; border-radius:99px; text-decoration:none; color:var(--chalk);
  background:rgb(var(--hero-ink-rgb) / .58); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgb(var(--hero-fg-rgb) / .18); font:600 13.5px/1 var(--sans); }
.rate b{ font-weight:800; font-size:15px; }
.hero__title{ margin:0; font:800 clamp(46px,13.8vw,136px)/.9 var(--serif); font-stretch:var(--wd); letter-spacing:-.034em; color:var(--chalk); }
.hero__title .ln{ display:block; overflow:hidden; padding:.04em 0 .12em; margin-bottom:-.16em; }
.hero__title .ln > span{ display:inline-block; }
.hero__title i{ font-style:normal; display:inline-block; background:linear-gradient(var(--brand), var(--brand)) 0 96% / 100% .085em no-repeat; padding-bottom:.02em; }
.hero__title .ln:nth-child(2){ --li:1; } .hero__title .ln:nth-child(3){ --li:2; } .hero__title .ln:nth-child(4){ --li:3; }
/* the roll: the marked word's letters leave upward one by one and the next word's come up from under */
.rw{ display:inline-block; white-space:nowrap; }
.rl{ display:inline-block; transition:translate .46s cubic-bezier(.2,.8,.2,1), opacity .3s ease; transition-delay:calc(var(--c) * 26ms); }
.roll.is-out .rl{ translate:0 -.42em; opacity:0; transition-duration:.24s, .2s; transition-delay:calc(var(--c) * 15ms); }
.roll.is-pre .rl{ translate:0 .5em; opacity:0; transition:none; }
.hero__lead{ margin:18px 0 0; max-width:44ch; font-size:16.5px; line-height:1.5; color:rgb(var(--hero-fg-rgb) / .88); text-wrap:pretty; }
.hero__lead i,.hero__lead em{ font-style:normal; color:var(--chalk); font-weight:650; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.btn--ghost{ background:rgb(var(--hero-ink-rgb) / .38); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-color:rgb(var(--hero-fg-rgb) / .42); color:var(--chalk); }
.btn--ghost:hover{ border-color:var(--chalk); }
.hero__review{ display:none; }
/* the opening, in one order: the courses, the headline's lines, then the rest */
html.js .hero__title .ln > span{ animation:rise 1s calc(var(--t0) + .42s + var(--li, 0) * .1s) cubic-bezier(.16,1,.3,1) backwards; }
html.js .rate,html.js .hero__lead,html.js .hero__actions,html.js .hero__review{ animation:arrive .8s calc(var(--t0) + .86s) var(--ease) backwards; }
html.js .hero__lead{ animation-delay:calc(var(--t0) + .96s); }
html.js .hero__actions{ animation-delay:calc(var(--t0) + 1.06s); }
html.js .tape{ animation:tapein .8s calc(var(--t0) + .9s) var(--ease) backwards; }
@keyframes rise{ from{ translate:0 112%; } }
@keyframes arrive{ from{ opacity:0; translate:0 14px; } }
@keyframes tapein{ from{ translate:0 100%; } }

/* the tape: the services between the marks, running; app.js loops it and the scroll adds speed */
.tape{ position:relative; overflow:hidden; white-space:nowrap; background:rgb(var(--hero-ink-rgb) / .74); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid rgb(var(--hero-fg-rgb) / .16); }
.tape__run{ display:inline-flex; align-items:center; height:54px; will-change:translate; font:750 19px/1 var(--serif); font-stretch:82%; letter-spacing:-.015em; color:var(--chalk);
  background:repeating-linear-gradient(90deg, rgb(var(--hero-fg-rgb) / .46) 0 1px, transparent 1px 8px) 0 0 / auto 5px no-repeat,
    repeating-linear-gradient(90deg, rgb(var(--hero-fg-rgb) / .85) 0 1px, transparent 1px 40px) 0 0 / auto 10px no-repeat; }
.tape__run,.tape__unit{ gap:20px; }
.tape__run.is-live{ gap:0; }
.tape__unit{ display:inline-flex; align-items:center; justify-content:space-between; flex:none; padding-right:20px; }
.tape__run b{ font-weight:inherit; padding-top:6px; }
.tape__run i{ flex:none; width:9px; height:9px; margin-top:6px; border-radius:1.5px; background:var(--brand); box-shadow:0 0 0 1px rgb(var(--hero-fg-rgb) / .25); }

.specs-band{ background:var(--slate); color:var(--chalk); border-top:1px solid rgb(var(--hero-fg-rgb) / .08); }
.specs{ margin:0; padding:14px 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:0 24px; }
.specs div{ padding:8px 0; }
.specs dt{ font:550 13px/1.3 var(--sans); color:var(--mist); }
.specs dd{ margin:2px 0 0; font:750 16.5px/1.25 var(--sans); }

@media (min-width:900px){
  .hero__in{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:56px; padding-block:48px 44px; }
  .hero__copy{ max-width:900px; }
  .hero__title{ font-size:clamp(84px,9vw,132px); letter-spacing:-.03em; word-spacing:.04em; }
  .hero__title .ln{ margin-bottom:-.13em; }
  .rate{ margin-bottom:22px; padding:9px 15px 9px 13px; font-size:15px; }
  .rate b{ font-size:17px; }
  .brand__logo{ width:48px; height:48px; }
  .brand__name{ font-size:22px; }
  .hero__lead{ font-size:19px; max-width:48ch; }
  .lay{ --cols:7; }
  html.js .lay i::before{ animation-timing-function:ease-out; animation-duration:.6s; }
  .tape__run{ height:64px; font-size:23px; }
}
@media (min-width:1100px){
  .hero__review{ display:block; flex:none; width:330px; margin:0; padding:22px 22px 20px; border-radius:var(--r); background:rgb(var(--hero-ink-rgb) / .62);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgb(var(--hero-fg-rgb) / .16); }
  .hero__review blockquote{ margin:12px 0 0; }
  .hero__review blockquote p{ margin:0; font-size:16.5px; line-height:1.5; color:var(--chalk); }
  .hero__review figcaption{ margin-top:12px; font:600 13.5px/1.3 var(--sans); color:rgb(var(--hero-fg-rgb) / .74); }
}

/* Electrical quick quote: services, property, postcode and short job details. */
.qq{ padding-top:60px; }
.qq__in{ display:grid; gap:4px; }
.electric-quote{ display:grid; gap:28px; padding:20px 16px 22px; border-radius:var(--r); background:var(--slab); box-shadow:0 0 0 1px var(--line); }
.electric-quote__step{ min-width:0; min-inline-size:0; margin:0; padding:0; border:0; }
.electric-quote__label{ display:flex; align-items:center; gap:10px; width:100%; margin:0 0 12px; padding:0; font:700 17.5px/1.2 var(--sans); letter-spacing:-.01em; color:var(--fg); }
.electric-quote__label b{ display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:4px; background:var(--ink-3); color:var(--fg-2); font:800 14px/1 var(--sans); }
.electric-quote__step.is-done > .electric-quote__label b{ background:var(--fg); color:var(--ink); }
.electric-quote__label small{ margin-left:auto; font:600 13px/1.2 var(--sans); color:var(--fg-3); text-align:right; }
.jobs__grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.job:last-child:nth-child(odd){ grid-column:1 / -1; }
.job input{ position:absolute; opacity:0; }
.job__in{ position:relative; display:flex; align-items:center; gap:10px; min-height:64px; height:100%; padding:8px; border-radius:var(--r); cursor:pointer; background:var(--ink); border:1.5px solid transparent; transition:border-color .2s, background-color .2s; }
.job__symbol{ display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:4px; background:var(--brand-mist); color:var(--acc); }
.job__symbol svg{ width:30px; height:30px; }
.job__name{ min-width:0; font:700 15.5px/1.12 var(--sans); font-stretch:88%; letter-spacing:-.012em; overflow-wrap:break-word; }
.job__tick{ position:absolute; left:8px; top:50%; translate:0 -50%; display:grid; place-items:center; width:42px; height:42px; border-radius:4px; background:var(--fg); color:var(--ink); opacity:0; transition:opacity .2s; }
.job__tick svg{ width:20px; height:20px; }
.job input:checked + .job__in{ background:var(--slab); border-color:var(--fg); }
.job input:checked + .job__in .job__tick{ opacity:1; }
.job input:focus-visible + .job__in{ outline:2px solid var(--fg); outline-offset:3px; }
.property__choices{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.property__choices label{ position:relative; }
.property__choices input{ position:absolute; opacity:0; }
.property__choices span{ display:grid; place-items:center; min-height:48px; border:1.5px solid var(--line-2); border-radius:var(--r); background:var(--ink); color:var(--fg); font-weight:700; cursor:pointer; }
.property__choices input:checked + span{ background:var(--fg); color:var(--ink); border-color:var(--fg); }
.property__choices input:focus-visible + span{ outline:2px solid var(--fg); outline-offset:3px; }
.electric-quote__field{ display:block; margin:18px 0 8px; font-weight:700; }
.post{ width:100%; min-height:56px; padding:0 16px; border-radius:var(--r); border:1.5px solid var(--line-2); background:var(--ink); color:var(--fg); font:800 20px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; }
.post::placeholder{ font-weight:600; letter-spacing:0; text-transform:none; color:var(--fg-3); }
.post:focus,.electric-details:focus{ outline:2px solid var(--fg); outline-offset:2px; }
.electric-details{ width:100%; min-height:104px; resize:vertical; padding:12px 14px; border:1.5px solid var(--line-2); border-radius:var(--r); background:var(--ink); color:var(--fg); font:500 16px/1.5 var(--sans); }
.electric-details::placeholder{ color:var(--fg-3); }
.electric-quote__hint{ margin:8px 0 14px; font-size:13px; line-height:1.45; color:var(--fg-3); }
.electric-quote__wa{ margin-top:10px; }
.electric-quote__wa svg{ color:var(--acc); }
.electric-quote__more{ display:flex; align-items:center; justify-content:center; min-height:44px; margin-top:8px; color:var(--fg); font:700 15px/1.3 var(--sans); text-underline-offset:4px; }
.electric-quote__note{ margin:8px 0 0; text-align:center; font-size:13px; line-height:1.45; color:var(--fg-3); }
.electric-quote__status{ display:none; margin:12px 0 0; padding:12px 14px; border-radius:var(--r); background:var(--ink); font-size:14.5px; font-weight:600; }
.electric-quote__status.is-on{ display:block; }
.electric-quote__fallback{ grid-column:1 / -1; }
@media (min-width:900px){
  .qq{ padding-top:104px; }
  .qq__in{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:72px; align-items:start; }
  .qq__head{ position:sticky; top:calc(var(--nav-h) + 48px); }
  .electric-quote{ grid-template-columns:1fr 1fr; gap:30px 28px; padding:30px 28px; }
  .electric-quote .jobs{ grid-column:1 / -1; }
  .jobs__grid{ grid-template-columns:repeat(3,1fr); }
  .job:last-child:nth-child(odd){ grid-column:auto; }
}

/* --- statement ------------------------------------------------------------------------- */
.figs{ border:0; padding:56px 0; }
.figs__statement{ font:800 clamp(34px,9.6vw,78px)/.97 var(--serif); font-stretch:var(--wd); letter-spacing:-.04em; max-width:17ch; }
.figs__statement em,.figs__statement i{ color:var(--acc); }
.figs__statement .w{ color:rgb(var(--fg-rgb) / .2); transition:color .35s ease; }
.figs__statement .w.is-lit{ color:var(--fg); }
.figs__statement i .w.is-lit,.figs__statement em .w.is-lit{ color:var(--acc); }
.figs__list{ margin-top:36px; }
.fig{ padding:2px 0 2px 14px; border-left:2px solid var(--fg); }
.fig dd{ font-stretch:var(--wd); letter-spacing:-.045em; }
@media (min-width:900px){ .figs{ padding:96px 0; } .figs__list{ margin-top:0; } }

/* --- reversed bands (slate): the tokens turn over, so every shared rule follows ---------- */
.ba,.reviews,.footer{ background:var(--slate); color:var(--chalk); --fg:var(--hero-fg); --fg-rgb:var(--hero-fg-rgb); --fg-2:var(--hero-fg-2); --fg-3:var(--hero-fg-3);
  --ink-2:var(--hero-ink-2); --ink-3:var(--hero-ink-3); --line:rgb(var(--hero-fg-rgb) / .12); --line-2:rgb(var(--hero-fg-rgb) / .24); --acc:var(--acc-d); }

/* --- services: slabs that stack ---------------------------------------------------------- */
.stack{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.slab{ position:sticky; top:calc(var(--nav-h) + 10px + var(--i) * 9px); }
.slab__in{ display:grid; overflow:hidden; border-radius:var(--r); background:var(--slab); box-shadow:0 0 0 1px var(--line), 0 -16px 30px -24px rgb(var(--fg-rgb) / .45);
  transform-origin:50% 0; scale:calc(1 - var(--k, 0) * .045); filter:brightness(calc(1 - var(--k, 0) * .07)); }
.slab__vis{ position:relative; aspect-ratio:16 / 9; overflow:hidden; background:var(--ink-2); }
.slab__vis img{ width:100%; height:100%; object-fit:cover; }
.slab__vis .sw{ position:absolute; inset:0; }
.slab:not(.slab--photo) .slab__vis{ aspect-ratio:16 / 6; }
.slab__main{ padding:20px 18px 22px; }
.slab__name{ margin:0; font:800 clamp(30px,8.8vw,48px)/.95 var(--serif); font-stretch:var(--wd); letter-spacing:-.04em; overflow-wrap:anywhere; }
.slab__title{ margin:10px 0 0; font-weight:650; font-size:17px; line-height:1.35; }
.slab__text{ margin:6px 0 0; color:var(--fg-2); font-size:16px; max-width:54ch; }
.slab__price{ margin:10px 0 0; font-weight:800; }
.slab__go{ display:inline-flex; align-items:center; gap:10px; min-height:46px; margin-top:16px; padding:0 18px; border-radius:var(--r-btn); background:var(--fg); color:var(--ink);
  text-decoration:none; font:700 15px/1 var(--sans); transition:scale .15s var(--ease); }
.slab__go:active{ scale:.97; }
.slab__go svg{ width:17px; height:17px; transition:translate .25s var(--ease); }
.slab__go:hover svg{ translate:3px 0; }
@media (min-width:900px){
  .stack{ gap:18px; }
  .slab{ top:calc(var(--nav-h) + 20px + var(--i) * 12px); }
  .slab__in{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); min-height:340px; }
  .slab__vis,.slab:not(.slab--photo) .slab__vis{ aspect-ratio:auto; min-height:340px; }
  .slab__main{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:40px 44px; }
  .slab__name{ font-size:clamp(44px,4.6vw,68px); }
}

/* --- reviews: the score, then the customers' words ---------------------------------------- */
.rv__head{ display:grid; gap:26px; }
.score{ flex-direction:row; align-items:center; justify-content:flex-start; gap:16px; padding:0; border:0; border-radius:0; background:none; color:var(--chalk); text-decoration:none; }
.score__n{ font:800 clamp(96px,28vw,176px)/.78 var(--serif); font-stretch:76%; letter-spacing:-.06em; }
.score__side{ display:grid; gap:9px; justify-items:start; }
.score .stars{ width:115px; height:23px; -webkit-mask-size:23px 23px; mask-size:23px 23px; }
.score__t{ font:650 17px/1.3 var(--sans); }
.score__l{ font:600 14.5px/1 var(--sans); color:var(--mist); text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgb(var(--hero-fg-rgb) / .35); }
.quote{ padding:22px 20px; border:0; border-radius:var(--r); background:var(--slate-2); }
.quote__stars{ color:var(--rating-color); letter-spacing:.1em; font-size:15px; }
.quote blockquote p{ font-size:17px; line-height:1.5; color:var(--chalk); }
.quote__av{ border-radius:6px; background:var(--chalk); color:var(--slate); }
.quote figcaption small{ color:var(--mist); }
@media (min-width:900px){
  .rv__head{ grid-template-columns:minmax(0, 1fr) auto; align-items:end; gap:56px; }
  .quotes{ display:block; columns:3; column-gap:16px; }
  .quote{ break-inside:avoid; margin-bottom:16px; }
}

/* --- gallery: a rail to swipe, a wall on a desk ------------------------------------------- */
.shots{ display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:74vw; gap:10px; margin:0 calc(var(--gut) * -1); padding:0 var(--gut) 8px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.shots::-webkit-scrollbar{ display:none; }
.shot{ aspect-ratio:4 / 5; scroll-snap-align:center; border-radius:var(--r); }
@media (min-width:900px){
  .shots{ grid-auto-flow:row dense; grid-template-columns:repeat(4, 1fr); grid-auto-columns:auto; gap:12px; margin:0; padding:0; overflow:visible; }
  .shot{ aspect-ratio:1; }
  .shot:first-child{ grid-column:span 2; grid-row:span 2; }
}
/* gallery.carousel (2026-10-12): the photographs as same-size tiles on a band of deeper stone from edge to edge of the
   screen, faded at both ends. As it comes (no JS, or reduced motion): rows you scroll sideways. app.js deals the tiles
   into lanes that drift opposite ways and loop (translate only), to drag, slowed by a hover; a tap opens the lightbox. */
.reel{ --tile:clamp(150px,14.5vw,228px); --gap:clamp(8px,.9vw,12px); margin-top:clamp(26px,3.4vw,44px); padding:clamp(14px,1.6vw,22px) var(--gap);
  display:grid; grid-auto-flow:column; grid-auto-columns:var(--tile); gap:var(--gap); overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; background:var(--ink-3);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.reel[data-rows="2"]{ grid-template-rows:repeat(2, auto); }
.reel::-webkit-scrollbar{ display:none; }
.reel .reel__item{ grid-column:auto; grid-row:auto; flex:none; width:var(--tile); aspect-ratio:3 / 4; border-radius:var(--r); }
.reel__item img{ pointer-events:none; user-select:none; -webkit-user-drag:none; }
.reel__item:focus-visible{ outline:2px solid var(--fg); outline-offset:-2px; }
.reel.is-driven{ display:flex; flex-direction:column; align-items:flex-start; padding-inline:0; overflow:hidden; touch-action:pan-y; }
.reel__track{ display:flex; gap:var(--gap); width:max-content; padding-inline:calc(var(--gap) / 2); will-change:translate; }
.reel.is-dragging,.reel.is-dragging .reel__item{ cursor:grabbing; }
.reel.is-dragging .reel__item img{ scale:1; }

/* A three-stage electrical circuit connects the enquiry to completed work. */
.electrical-path{ display:grid; gap:24px; }
.electrical-path__diagram{ position:relative; margin:0; aspect-ratio:360 / 220; border-radius:var(--r); background:var(--slab); box-shadow:0 0 0 1px var(--line); }
.electrical-path__diagram svg{ width:100%; height:100%; }
.electrical-path__base{ stroke:var(--ink-4); stroke-width:12; stroke-linejoin:round; }
.electrical-path__line{ stroke:var(--acc); stroke-width:3; stroke-linejoin:round; }
.electrical-path__diagram circle{ fill:var(--slab); stroke:var(--fg); stroke-width:2; }
.electrical-path__check{ stroke:var(--fg); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.electrical-path__tag{ position:absolute; padding:7px 9px; background:var(--slab); color:var(--fg); font:700 clamp(10px,2.8vw,14px)/1.25 var(--sans); text-align:center; white-space:nowrap; }
.electrical-path__tag--a{ left:12.8%; top:83%; translate:-50% 0; }
.electrical-path__tag--b{ left:50%; top:9%; translate:-50% 0; }
.electrical-path__tag--c{ right:5%; top:83%; }
.step{ border:0; border-radius:var(--r); background:var(--slab); box-shadow:0 0 0 1px var(--line); }
.step__n{ border-radius:4px; background:var(--fg); color:var(--ink); }
.step__title{ font-stretch:84%; font-size:24px; letter-spacing:-.03em; }
.service-diagram{ display:grid; place-items:center; width:100%; height:100%; background:var(--brand-mist); color:var(--acc); }
.service-diagram svg{ width:min(86%,360px); height:100%; }
.service-diagram > svg circle{ fill:var(--slab); stroke:var(--acc); stroke-width:3; }
.service-diagram{ position:relative; }
.service-diagram__mark{ position:absolute; left:50%; top:50%; translate:-50% -50%; width:clamp(58px,18%,88px); aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:var(--slab); border:3px solid var(--acc); color:var(--acc); }
.service-diagram .service-diagram__mark svg{ width:62%; height:62%; }
.reviews__empty{ margin:0; padding:24px; border:1px solid var(--line-2); color:var(--mist); }
@media (min-width:900px){
  .electrical-path{ grid-template-columns:1fr 1.15fr; gap:56px; align-items:start; }
  .electrical-path__diagram{ grid-column:2; grid-row:1; position:sticky; top:calc(var(--nav-h) + 24px); }
  .electrical-path .steps__list{ grid-column:1; grid-row:1; grid-template-columns:1fr; }
  .electrical-path__tag{ font-size:14px; }
}

/* --- the rest of the page ------------------------------------------------------------------- */
.areas__places li{ border-radius:4px; background:var(--slab); }
.areas__places svg{ color:var(--acc); }
.areas__centres li{ background:var(--slab); border-left-color:var(--fg); border-radius:0 var(--r) var(--r) 0; }
.qa__q{ font-weight:700; letter-spacing:-.01em; }
.qa__ic{ border-radius:4px; transition:background-color .2s, color .2s; }
.qa.is-open .qa__ic{ background:var(--fg); color:var(--ink); }
.way{ background:var(--slab); }
.way svg{ color:var(--acc); }
.way b{ font:600 13px/1.4 var(--sans); letter-spacing:0; text-transform:none; }
.quoteform{ background:var(--slab); box-shadow:0 0 0 1px var(--line), 0 34px 60px -44px rgb(var(--fg-rgb) / .5); border:0; border-radius:var(--r); }
.quoteform__title{ font-stretch:84%; font-size:30px; letter-spacing:-.035em; }
.field input,.field select,.field textarea{ background:var(--ink); border-radius:var(--r); }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--fg); }
.pass{ background:var(--slab); }
.offer__card{ border-radius:var(--r); }
.offer__items li{ border-radius:4px; }

/* --- footer --------------------------------------------------------------------------------- */
.footer{ border-top:0; }
.footer__h{ font:600 13.5px/1 var(--sans); letter-spacing:0; text-transform:none; }
.socials a{ border-radius:var(--r-btn); }
.giant{ margin:48px 0 0; line-height:.8; overflow:hidden; }
.giant span{ display:inline-block; white-space:normal; padding:0 .04em .06em 0; font:800 16vw/.86 var(--serif); font-stretch:76%; letter-spacing:-.05em; color:var(--chalk); }
.app .giant span{ white-space:nowrap; }
@media (min-width:900px){ .giant{ margin-top:72px; } }

@media (prefers-reduced-motion:reduce){
  .lay i::before{ display:none; }
  html.js .hero__title .ln > span,html.js .rate,html.js .hero__lead,html.js .hero__actions,html.js .hero__review,html.js .tape,html.js .hero .lay i::after{ animation:none; }
  .hero__bg img{ scale:1.03; }
  .hero__in{ translate:none; }
}

.hero__kicker{ display:inline-flex; margin:0 0 18px; max-width:100%; padding:8px 12px; border:1px solid rgb(var(--hero-fg-rgb) / .4); border-radius:var(--r); background:rgb(var(--hero-ink-rgb) / .68); color:var(--chalk); font:650 13px/1.4 var(--sans); }
/* The main action is usable from the first paint, including while the photo loads. */
html.js .hero__actions{ animation:none; }
.btn,.burger,.nav__tel,.socials a,.lb__close,.lb__prev,.lb__next{ min-width:44px; min-height:44px; }
.pv button{ min-width:44px; min-height:44px; }

/* trades-100 (2026-10-13): --go exists only when theme.dark is the brand's own deep shade and the brand would vanish on it
   (build.mjs); everywhere else these fall back to the brand, as before. */
.hero .btn--brand, .dock__btn--main{ background:var(--go, var(--brand)); color:var(--on-go, var(--on-brand)); }
.hero__title i{ background-image:linear-gradient(var(--go, var(--brand)), var(--go, var(--brand))); }
.tape__run i{ background:var(--go, var(--brand)); }
/* a swipe that starts on the reviews row moves the page: the row scrolls sideways only (its waiting cards sit a few px low) */
.quotes{ overflow-y:hidden; overscroll-behavior-x:contain; }
.quotes:focus-visible{ outline:2px solid var(--acc); outline-offset:4px; }