/* =============================================================================
   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; }
}

/* Gleam (clean-gleam, 2026-10-17): an established local cleaning company, phone first. Black for the header, the hero and a
   few reversed bands (the logo's own black), a very light page with white cards, the firm's colour as a fill with dark text
   (never as small text on white), chrome silver for small marks. Saira 800 extended (the logo's squared lettering) for
   headings, Manrope to read; both served from the layout. Motion is small and once: things arrive as they enter, the hero
   opens once and one gleam crosses its photograph. Nothing follows the scroll, nothing is pinned, no scroll handler. */
@font-face{ font-family:'Gleam Saira'; font-style:normal; font-weight:800; font-stretch:50% 125%; font-display:swap; src:url('../assets/fonts/gleam-saira-800-f44ae5df2b.woff2') format('woff2'); }
@font-face{ font-family:'Gleam Sans'; font-style:normal; font-weight:200 800; font-display:swap; src:url('../assets/fonts/gleam-manrope-c8eafee863.woff2') format('woff2'); }

:root{
  --r:16px;
  --r-btn:12px;
  --d-weight:800;
  --d-case:none;
  --d-style:normal;
  --d-track:-.012em;
  --nav-h:64px;
  --sec:64px;
  --night:var(--hero-ink);
  --night-2:color-mix(in srgb, var(--hero-ink) 92%, #fff);
  --night-3:color-mix(in srgb, var(--hero-ink) 86%, #fff);
  --night-line:rgb(255 255 255 / .12);
  --snow:var(--hero-fg);
  --snow-2:rgb(var(--hero-fg-rgb) / .78);
  --snow-3:rgb(var(--hero-fg-rgb) / .66);
  --card:#FFFFFF;
  --lime:var(--brand);
  --on-lime:var(--on-brand);
  --lime-t:var(--brand-lift);
  --chrome:linear-gradient(160deg, #FFFFFF 0%, #DCE0E3 34%, #8F979E 52%, #C9CED2 70%, #F2F4F5 100%);
  --shadow-1:0 1px 2px rgb(0 0 0 / .06), 0 8px 22px -14px rgb(0 0 0 / .32);
  --shadow-2:0 2px 6px rgb(0 0 0 / .07), 0 26px 50px -28px rgb(0 0 0 / .45);
  --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");
  --spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.4 9.6L24 12l-9.6 2.4L12 24l-2.4-9.6L0 12l9.6-2.4Z'/%3E%3C/svg%3E");
  /* drawn line icons for .sym[data-symbol] (masks: painted in currentColor-free tokens, so any ground works) */
  --ic-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 4.6 5.8v5.6c0 4.6 3.1 8.3 7.4 9.8 4.3-1.5 7.4-5.2 7.4-9.8V5.8Z'/%3E%3Cpath d='m8.7 12.1 2.3 2.3 4.4-4.6'/%3E%3C/svg%3E");
  --ic-leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 19.5C4.5 10 10 4.5 20 4.5c0 10-5.5 15.5-14 15.5'/%3E%3Cpath d='M4.5 19.5c3.2-4.4 6.4-7.2 10.5-9.4'/%3E%3C/svg%3E");
  --ic-tag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M14.6 8.3a2.6 2.6 0 0 0-4.6 1.7v6.3M8.6 12.6h4.6M8.6 16.3h6.8'/%3E%3C/svg%3E");
  --ic-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4M9 15l2 2 4-4'/%3E%3C/svg%3E");
  --ic-parts:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3.5' width='16' height='17' rx='2'/%3E%3Cpath d='M4 8h16'/%3E%3Crect x='7.5' y='11' width='9' height='6.5' rx='1'/%3E%3Cpath d='M7.5 5.8h.01M10.5 5.8h.01'/%3E%3C/svg%3E");
  --ic-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.7 5.6 6.1.8-4.5 4.2 1.2 6.1L12 16.8l-5.5 2.9 1.2-6.1-4.5-4.2 6.1-.8Z'/%3E%3C/svg%3E");
  --ic-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2s-7-5.7-7-11.2a7 7 0 0 1 14 0c0 5.5-7 11.2-7 11.2Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
  --ic-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 11 12 4l8.2 7'/%3E%3Cpath d='M6 9.6V20h12V9.6M10 20v-5.5h4V20'/%3E%3C/svg%3E");
  --ic-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
@media (min-width:900px){ :root{ --nav-h:80px; --sec:104px; } }

body{ background:var(--ink); color:var(--fg); font:400 16.5px/1.6 var(--sans); }
::selection{ background:var(--lime); color:var(--on-lime); }
:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; }

/* --- type -------------------------------------------------------------------------------- */
.d-lg{ font-family:var(--serif); font-weight:800; font-stretch:106%; font-size:clamp(29px,7.6vw,52px); line-height:1.04; letter-spacing:-.012em; }
/* the marked words: a lime highlighter under dark type on the light page, lime type on a black band */
.d-lg i{ font-style:normal; color:inherit; padding:0 .05em; margin:0 -.05em;
  background:linear-gradient(transparent 60%, rgb(var(--brand-rgb) / .9) 60%, rgb(var(--brand-rgb) / .9) 92%, transparent 92%);
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.label{ display:inline-flex; align-items:center; gap:9px; margin:0 0 14px; font:800 12px/1.2 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-2); }
.label::before{ content:""; flex:none; width:11px; height:11px; background:var(--lime-t); -webkit-mask:var(--spark) center / contain no-repeat; mask:var(--spark) center / contain no-repeat; }
.lede{ font-size:clamp(16px,1.3vw,18.5px); line-height:1.6; color:var(--fg-2); }
.mini{ margin:0 0 12px; font:800 12px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-2); }
.head{ margin-bottom:28px; max-width:720px; }
@media (min-width:900px){ .head{ margin-bottom:48px; } }
.section{ padding:var(--sec) 0; }

/* reversed bands: the page's tokens re-pointed at the night, so every rule keeps reading the same names */
.hero__grid,.ba,.reviews,.footer,.drawer,.included,.where{ --fg:var(--snow); --fg-2:var(--snow-2); --fg-3:var(--snow-3); --line:var(--night-line); --line-2:rgb(255 255 255 / .22); --lime-t:var(--lime); }
.ba .d-lg i,.reviews .d-lg i{ background:none; color:var(--lime); }

/* --- buttons ---------------------------------------------------------------------------------- */
.btn{ min-height:54px; border-radius:var(--r-btn); font:800 16px/1 var(--sans); letter-spacing:-.005em; }
.btn--lg{ min-height:56px; font-size:16.5px; }
.btn--brand{ background:var(--lime); color:var(--on-lime); box-shadow:inset 0 -2px 0 rgb(0 0 0 / .14); }
.btn--brand:hover{ background:color-mix(in srgb, var(--lime) 86%, #fff); }
.btn--line{ border-color:var(--line-2); color:var(--fg); }
.btn--wa{ border-color:rgb(255 255 255 / .34); color:var(--snow); background:rgb(255 255 255 / .04); }
.btn--wa:hover{ border-color:var(--snow); }
.btn--wa svg{ color:#25D366; }
.btn span{ min-width:0; overflow-wrap:anywhere; }

/* stars filled to the score */
.stars{ position:relative; display:inline-block; flex:none; width:75px; height:15px; background:rgb(255 255 255 / .24);
  -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(--lime); }
.stars--lg{ width:110px; height:22px; -webkit-mask-size:22px 22px; mask-size:22px 22px; }

/* drawn icons: a black disc with the mark in lime (inverted on a black band) */
.sym{ position:relative; display:inline-grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%; background:var(--night); }
.sym::before{ content:""; width:54%; height:54%; background:var(--lime); -webkit-mask:var(--sym, var(--ic-check)) center / contain no-repeat; mask:var(--sym, var(--ic-check)) center / contain no-repeat; }
.sym--lg{ width:46px; height:46px; }
.sym--xs{ width:22px; height:22px; }
.sym[data-symbol="shield"]{ --sym:var(--ic-shield); } .sym[data-symbol="leaf"]{ --sym:var(--ic-leaf); }
.sym[data-symbol="tag"]{ --sym:var(--ic-tag); } .sym[data-symbol="calendar"]{ --sym:var(--ic-calendar); }
.sym[data-symbol="parts"]{ --sym:var(--ic-parts); } .sym[data-symbol="star"]{ --sym:var(--ic-star); }
.sym[data-symbol="pin"]{ --sym:var(--ic-pin); } .sym[data-symbol="home"]{ --sym:var(--ic-home); }
.sym[data-symbol="check"]{ --sym:var(--ic-check); }

/* --- nav: solid black from the start ------------------------------------------------------------ */
.nav{ height:var(--nav-h); background:var(--night); color:var(--snow); border-bottom:1px solid var(--night-line);
  -webkit-backdrop-filter:none; backdrop-filter:none; }
.nav__progress{ display:none; }
.nav__in{ gap:10px; }
.nav .brand{ transition:opacity .35s ease; }
.nav.is-handoff .brand{ opacity:0; pointer-events:none; }
.brand--wide .brand__logo{ display:block; width:118px; height:50px; max-width:none; object-fit:contain; object-position:left center; border-radius:0; }
.brand__logo{ width:44px; height:44px; object-fit:contain; border-radius:8px; }
.brand__name{ font:800 16px/1.1 var(--serif); font-stretch:104%; color:var(--snow); }
.brand__sub{ color:var(--snow-3); }
.nav__tel{ width:44px; height:44px; background:var(--lime); color:var(--on-lime); }
.burger{ color:var(--snow); border-color:rgb(255 255 255 / .3); border-radius:50%; }
@media (min-width:900px){ .brand--wide .brand__logo{ width:156px; height:66px; } }
@media (min-width:1000px){
  .nav__links{ gap:clamp(16px,1.9vw,28px); margin-inline:auto; }
  .nav__links a{ color:rgb(var(--hero-fg-rgb) / .8); font:700 15px/1 var(--sans); padding:8px 0; border-bottom:2px solid transparent; }
  .nav__links a:hover{ color:var(--snow); border-bottom-color:var(--lime); }
  .brand{ margin-right:0; }
  .nav__tel{ width:44px; height:44px; padding:0; background:transparent; color:var(--snow); border:1px solid rgb(255 255 255 / .26); border-radius:50%; justify-content:center; }
  .nav__tel svg{ color:var(--lime); }
  .nav__tel span{ display:none; }
  .nav__book{ min-height:46px; padding:0 20px; font-size:15px; }
}
@media (min-width:1240px){
  .nav__tel{ width:auto; height:auto; border:0; border-radius:0; gap:9px; font:800 16px/1 var(--sans); }
  .nav__tel span{ display:inline; }
}

/* drawer */
.drawer{ background:var(--night); color:var(--snow); }
.drawer nav a{ font:800 26px/1.1 var(--serif); font-stretch:106%; letter-spacing:-.01em; border-bottom-color:var(--night-line); }
.drawer nav a span{ color:var(--lime); }

/* --- hero ------------------------------------------------------------------------------------- */
.hero{ position:relative; background:var(--night); color:var(--snow);
  --h1:min(46px, calc((100vw - 2 * var(--gut)) / 8.9)); }
.hero__grid{ display:grid; grid-template-columns:minmax(0,1fr); }
.hero__media{ grid-area:1 / 1; position:relative; margin:0; height:clamp(224px, 52svh, 520px); overflow:hidden; background:var(--night-2); }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{ content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgb(var(--hero-ink-rgb) / .3) 0%, rgb(var(--hero-ink-rgb) / 0) 20%, rgb(var(--hero-ink-rgb) / 0) 36%, rgb(var(--hero-ink-rgb) / .66) 68%, var(--night) 100%); }
/* the gleam: one band of light across the photograph, once, when it is in */
.hero__gleam{ position:absolute; inset:-10% auto -10% 0; z-index:1; width:60%; pointer-events:none; translate:-120% 0; rotate:12deg;
  background:linear-gradient(90deg, transparent 0, rgb(255 255 255 / .1) 38%, rgb(255 255 255 / .26) 50%, rgb(255 255 255 / .1) 62%, transparent 100%); }
.hero__copy{ grid-area:1 / 1; align-self:end; position:relative; z-index:3; min-width:0; padding:0 var(--gut) 12px; }
.hero__kicker{ display:flex; align-items:center; gap:8px; margin:0; font:800 11.5px/1.3 var(--sans); letter-spacing:.15em; text-transform:uppercase; color:var(--snow); }
.hero__kicker::before{ content:""; flex:none; width:11px; height:11px; background:var(--lime); -webkit-mask:var(--spark) center / contain no-repeat; mask:var(--spark) center / contain no-repeat; }
.hero__title{ margin:8px 0 0; font:800 calc(var(--h1) * var(--fit, 1))/.98 var(--serif); font-stretch:116%; text-transform:uppercase; letter-spacing:-.004em; text-wrap:nowrap; }
.hero__title .ln{ display:block; overflow:hidden; padding:.02em 0 .05em; margin-bottom:-.05em; }
.hero__title .ln > span{ display:inline-block; white-space:nowrap; }
.hero__title i{ font-style:normal; color:var(--lime); }
.hero__panel{ grid-area:2 / 1; display:grid; gap:12px; padding:12px var(--gut) 22px; min-width:0; }
.hero__lead{ margin:0; color:var(--snow-2); font-size:15.5px; line-height:1.5; }
.stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.stats:empty{ display:none; }
.stat{ display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0; min-height:60px; padding:9px 12px; border-radius:14px; text-decoration:none; }
.stat small{ font:800 10.5px/1.2 var(--sans); letter-spacing:.12em; text-transform:uppercase; }
.stat b{ font:800 21px/1 var(--serif); font-stretch:108%; letter-spacing:-.01em; }
.stat--price{ background:var(--lime); color:var(--on-lime); box-shadow:inset 0 -2px 0 rgb(0 0 0 / .12); }
.stat--score{ background:var(--night-2); color:var(--snow); box-shadow:inset 0 0 0 1px var(--night-line); }
.stat--score small{ font-weight:650; font-size:12.5px; letter-spacing:0; text-transform:none; color:var(--snow-2); }
.stat__top{ display:flex; align-items:center; gap:8px; }
.stat--score .stars{ width:70px; height:14px; -webkit-mask-size:14px 14px; mask-size:14px 14px; }
.hero__actions{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.hero__actions .btn{ min-width:0; padding-inline:12px; }
.hero--plain .hero__copy{ grid-area:1 / 1; padding-top:28px; }
/* the promises: a white strip under the hero */
.promises{ background:var(--card); color:var(--fg); border-bottom:1px solid var(--line); }
.promises__list{ list-style:none; margin:0 auto; padding:16px 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 14px; }
.promise{ display:flex; align-items:center; gap:10px; min-width:0; font:750 14px/1.25 var(--sans); color:var(--fg); }
.promise span{ min-width:0; }

@media (min-width:900px){
  .hero{ --h1:clamp(44px, calc((min(100vw - 80px, 1200px) - 56px) * .54 / 8.9), 72px); }
  .hero__grid{ width:min(100% - 2 * var(--gut), var(--wrap)); margin-inline:auto; padding:56px 0 64px;
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); grid-template-rows:1fr auto auto 1fr; column-gap:56px; }
  .hero__media{ grid-area:1 / 2 / 5 / 3; align-self:center; height:auto; aspect-ratio:4 / 5; max-height:min(72svh, 680px); border-radius:22px;
    box-shadow:0 0 0 1px var(--night-line), 0 40px 80px -40px rgb(0 0 0 / .9); }
  .hero__media::after{ background:linear-gradient(180deg, transparent 62%, rgb(var(--hero-ink-rgb) / .32)); }
  .hero__copy{ grid-area:2 / 1; align-self:end; padding:0; }
  .hero__kicker{ font-size:13px; }
  .hero__title{ margin-top:16px; }
  .hero__panel{ grid-area:3 / 1; align-self:start; gap:18px; padding:22px 0 0; }
  .hero__lead{ font-size:18px; max-width:46ch; }
  .stats,.hero__actions{ max-width:540px; gap:12px; }
  .stat{ min-height:70px; padding:12px 16px; }
  .stat b{ font-size:25px; }
  .promises__list{ grid-template-columns:repeat(4,minmax(0,1fr)); padding:22px 0; gap:0; }
  .promise{ font-size:15.5px; padding:0 18px; justify-content:center; }
  .promise + .promise{ border-left:1px solid var(--line); }
  .promise .sym{ width:44px; height:44px; }
}

/* --- services as photo tiles --------------------------------------------------------------------- */
.svc{ background:var(--ink); }
.tiles{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.tile{ display:flex; min-width:0; }
.tile:nth-child(even){ --d:90ms; }
.tile__go{ position:relative; display:flex; flex-direction:column; width:100%; min-width:0; border-radius:var(--r); overflow:hidden; isolation:isolate;
  background:var(--night); color:var(--snow); text-decoration:none; box-shadow:var(--shadow-1); transition:translate .3s var(--ease), box-shadow .3s; }
.tile__go:hover{ translate:0 -3px; box-shadow:var(--shadow-2); }
.tile__media{ position:relative; display:block; aspect-ratio:1; overflow:hidden; background:var(--night-2); }
.tile__media img{ width:100%; height:100%; object-fit:cover; transition:scale .6s var(--ease); }
.tile__go:hover .tile__media img{ scale:1.045; }
.tile__media--art{ display:grid; place-items:center;
  background:radial-gradient(70% 60% at 30% 22%, rgb(255 255 255 / .16), transparent 70%), radial-gradient(60% 60% at 80% 100%, rgb(var(--brand-rgb) / .2), transparent 70%), var(--night-2); }
.tile__art{ display:grid; place-items:center; width:46%; aspect-ratio:1; border-radius:50%; background:var(--night); box-shadow:0 0 0 2px rgb(255 255 255 / .14), 0 18px 30px -16px rgb(0 0 0 / .8); color:var(--lime); }
.tile__art svg{ width:56%; height:56%; }
.tile__bar{ flex:1; display:flex; flex-direction:column; gap:6px; min-width:0; padding:11px 12px 12px; border-top:2px solid var(--lime); }
.tile__name{ font:800 15px/1.2 var(--sans); overflow-wrap:break-word; }
.tile__text{ display:none; }
.tile__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
.tile__price{ min-width:0; font:800 14.5px/1.15 var(--sans); color:var(--lime); }
.tile__price--ask{ color:var(--snow-2); font-weight:700; font-size:13.5px; }
.tile__arrow{ flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--lime); color:var(--on-lime); transition:translate .25s var(--ease); }
.tile__arrow svg{ width:15px; height:15px; }
.tile__go:hover .tile__arrow{ translate:3px 0; }
@media (min-width:900px){
  .tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
  .tile:nth-child(even){ --d:0ms; } .tile:nth-child(3n+2){ --d:90ms; } .tile:nth-child(3n){ --d:180ms; }
  .tile__media{ aspect-ratio:4 / 3; }
  .tile__bar{ padding:18px 20px 20px; gap:8px; }
  .tile__name{ font:800 21px/1.15 var(--serif); font-stretch:106%; }
  .tile__text{ display:block; color:var(--snow-2); font-size:15px; line-height:1.5; }
  .tile__price{ font-size:16px; }
  .tile__arrow{ width:36px; height:36px; }
}
/* a lone last tile runs the full width: its photo keeps the column above it, the name and its words beside it */
@media (max-width:899px){
  .tile:last-child:nth-child(odd){ grid-column:1 / -1; }
  .tile:last-child:nth-child(odd) .tile__go{ flex-direction:row; }
  .tile:last-child:nth-child(odd) .tile__media{ flex:none; width:calc(50% - 6px); }
  .tile:last-child:nth-child(odd) .tile__bar{ border-top:0; border-left:2px solid var(--lime); padding:14px; }
  .tile:last-child:nth-child(odd) .tile__text{ display:block; color:var(--snow-2); font-size:13.5px; line-height:1.45; }
}
@media (min-width:900px){
  .tile:last-child:nth-child(3n+1){ grid-column:1 / -1; }
  .tile:last-child:nth-child(3n+1) .tile__go{ flex-direction:row; }
  .tile:last-child:nth-child(3n+1) .tile__media{ flex:none; width:calc((100% - 40px) / 3); aspect-ratio:16 / 10; }
  .tile:last-child:nth-child(3n+1) .tile__bar{ border-top:0; border-left:2px solid var(--lime); padding:24px 28px; }
}

/* --- prices ------------------------------------------------------------------------------------------ */
.prices{ background:var(--card); }
.prices__grid{ display:grid; gap:16px; }
.plist{ min-width:0; border-radius:18px; background:var(--ink); border:1px solid var(--line); padding:2px 16px 14px; }
.plist__gt{ display:flex; align-items:center; gap:10px; margin:18px 0 4px; font:800 12px/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-2); }
.plist__gt::after{ content:""; flex:1; height:1px; background:var(--line-2); }
.plist__rows{ list-style:none; margin:0; padding:0; }
.plist__rows li + li .prow{ border-top:1px solid var(--line); }
.prow{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:10px; min-height:58px; padding:9px 0; color:inherit; text-decoration:none; }
.prow__name{ min-width:0; }
.prow__name b{ display:block; font-weight:800; font-size:16px; line-height:1.25; overflow-wrap:anywhere; }
.prow__name span{ display:block; margin-top:2px; font-size:13.5px; line-height:1.35; color:var(--fg-2); }
.prow__price{ font:800 16.5px/1 var(--serif); font-stretch:104%; white-space:nowrap; padding:8px 10px; border-radius:9px; background:var(--lime); color:var(--on-lime); font-variant-numeric:tabular-nums; }
.prow__price--ask{ background:transparent; color:var(--fg-2); font:700 14px/1.3 var(--sans); white-space:normal; padding:0; }
.prow__go{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line-2); color:var(--fg); transition:background-color .2s, color .2s, border-color .2s; }
.prow__go svg{ width:15px; height:15px; }
a.prow:hover .prow__go{ background:var(--night); border-color:var(--night); color:var(--lime); }
div.prow{ grid-template-columns:minmax(0,1fr) auto; }
.plist__note{ margin:14px 0 0; font-size:14px; line-height:1.5; color:var(--fg-2); }
.included{ min-width:0; border-radius:18px; background:var(--night); color:var(--snow); padding:24px 20px; }
.included__t{ margin:0 0 16px; font:800 22px/1.1 var(--serif); font-stretch:106%; }
.included__list{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:13px; }
.included__list li{ display:flex; align-items:flex-start; gap:12px; font-size:15.5px; line-height:1.45; }
.included__list .sym{ width:24px; height:24px; background:var(--lime); }
.included__list .sym::before{ background:var(--on-lime); }
@media (min-width:900px){
  .prices__grid{ grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr); gap:28px; align-items:start; }
  .plist{ padding:6px 28px 22px; }
  .prow__price{ font-size:18px; padding:9px 12px; }
  .included{ padding:34px 32px; }
}

/* --- before / after ------------------------------------------------------------------------------- */
.ba{ background:var(--night); color:var(--snow); }
.ba__in{ display:grid; gap:24px; }
.ba .head{ margin-bottom:0; }
.ba__go{ display:none; margin-top:26px; }
.ba__list{ display:grid; gap:22px; min-width:0; }
.ba__pair{ margin:0; min-width:0; }
.ba__frame{ position:relative; overflow:hidden; aspect-ratio:var(--ratio, 1); border-radius:18px; background:var(--night-2);
  box-shadow:0 0 0 1px var(--night-line), 0 30px 60px -36px rgb(0 0 0 / .9);
  touch-action:pan-y; -webkit-user-select:none; user-select:none; cursor:ew-resize; }
.ba__frame:has(.ba__range:focus-visible){ outline:2px solid var(--lime); outline-offset:3px; }
@media (max-width:899px){ .ba__frame{ max-height:min(70svh, 560px); } }
.ba__img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; pointer-events:none; }
.ba__img--before{ clip-path:inset(0 calc(100% - var(--x)) 0 0); }
.ba__frame--split .ba__img{ width:200%; }
.ba__frame--split .ba__img--after{ left:-100%; }
.ba__frame--split .ba__img--before{ clip-path:inset(0 calc(100% - var(--x) / 2) 0 0); }
.ba__tag{ position:absolute; top:12px; z-index:2; padding:7px 11px 6px; border-radius:8px; font:800 11.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; transition:opacity .25s; pointer-events:none; }
.ba__tag--before{ left:12px; background:rgb(var(--hero-ink-rgb) / .84); color:var(--snow); box-shadow:0 0 0 1px rgb(255 255 255 / .2); }
.ba__tag--after{ right:12px; background:var(--lime); color:var(--on-lime); }
.ba__frame.is-after .ba__tag--before,.ba__frame.is-before .ba__tag--after{ opacity:0; }
.ba__handle{ position:absolute; top:0; bottom:0; left:var(--x); z-index:2; width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 0 1px rgb(0 0 0 / .2); pointer-events:none; }
.ba__handle i{ position:absolute; left:50%; top:50%; translate:-50% -50%; width:48px; height:48px; border-radius:50%; background:var(--lime);
  box-shadow:0 0 0 3px #fff, 0 10px 24px rgb(0 0 0 / .45); transition:scale .2s var(--ease); }
.ba__handle i::before,.ba__handle i::after{ content:""; position:absolute; top:50%; width:8px; height:8px; margin-top:-4px; border:solid var(--on-lime); border-width:0 0 2.5px 2.5px; }
.ba__handle i::before{ left:12px; rotate:45deg; }
.ba__handle i::after{ right:12px; rotate:-135deg; }
.ba__frame.is-drag .ba__handle i{ scale:1.1; }
.ba__range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; pointer-events:none; }
.ba__cap{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; margin-top:14px; font-size:15px; color:var(--snow-2); }
.ba__cap b{ font:800 16px/1.3 var(--sans); color:var(--snow); }
.ba__hint{ margin-left:auto; font-style:normal; font-size:13.5px; color:var(--snow-3); }
@media (min-width:900px){
  .ba__in{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center; gap:72px; }
  .ba__go{ display:inline-flex; }
  .ba__list{ width:100%; max-width:560px; justify-self:end; }
}

/* --- why choose us ---------------------------------------------------------------------------------- */
.why{ background:var(--ink); }
.why__list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.why__item{ display:flex; align-items:center; gap:14px; min-width:0; padding:14px 16px; border-radius:14px; background:var(--card); border:1px solid var(--line); box-shadow:0 1px 2px rgb(0 0 0 / .04); }
.why__txt{ min-width:0; }
.why__txt b{ display:block; font:800 16px/1.25 var(--sans); }
.why__txt span{ display:block; margin-top:2px; color:var(--fg-2); font-size:14.5px; line-height:1.45; }
@media (min-width:700px){ .why__list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){
  .why__list{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .why__item{ flex-direction:column; align-items:flex-start; gap:18px; padding:26px; }
  .why__item:nth-child(3n+2){ --d:90ms; } .why__item:nth-child(3n){ --d:180ms; }
  .why__txt b{ font:800 20px/1.2 var(--serif); font-stretch:104%; }
  .why__txt span{ font-size:15.5px; margin-top:6px; }
}

/* --- who and where ------------------------------------------------------------------------------------ */
.areas{ background:var(--card); }
.gw__body{ display:grid; gap:16px; min-width:0; }
.sectors{ min-width:0; }
.sectors__list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.sectors__list li{ display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:8px 14px 8px 8px; border-radius:999px; background:var(--ink); border:1px solid var(--line); font:700 14.5px/1.2 var(--sans); }
.sectors__list li span{ min-width:0; }
.where{ position:relative; display:grid; justify-items:start; gap:6px; min-width:0; padding:22px 20px; border-radius:18px; background:var(--night); color:var(--snow); overflow:hidden; }
.where::after{ content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%; background:radial-gradient(closest-side, rgb(var(--brand-rgb) / .22), transparent); pointer-events:none; }
.where .sym{ margin-bottom:8px; background:var(--lime); }
.where .sym::before{ background:var(--on-lime); }
.where .mini{ margin:0; color:var(--snow-2); }
.where__places{ list-style:none; margin:2px 0 0; padding:0; display:grid; gap:2px; font:800 22px/1.2 var(--serif); font-stretch:104%; }
.where__note{ margin:8px 0 0; color:var(--snow-2); font-size:15px; line-height:1.5; }
.where__go{ display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:4px; color:var(--lime); font:800 15.5px/1.2 var(--sans); text-decoration:none; }
.where__go svg{ width:17px; height:17px; transition:translate .25s var(--ease); }
.where__go:hover svg{ translate:3px 0; }
@media (min-width:900px){
  .gw__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:64px; align-items:start; }
  .areas .head{ margin:0; }
  .gw__body{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:24px; align-items:start; }
  .where{ padding:30px 28px; }
}

/* --- reviews -------------------------------------------------------------------------------------------- */
.reviews{ background:var(--night); color:var(--snow); }
.rv__top{ display:grid; gap:18px; margin-bottom:26px; }
.reviews .head{ margin-bottom:0; }
.score{ display:flex; flex-direction:row; align-items:center; gap:16px; justify-self:start; max-width:100%; padding:14px 18px; border-radius:16px; background:var(--night-2);
  box-shadow:inset 0 0 0 1px var(--night-line); color:var(--snow); text-decoration:none; }
.score__n{ font:800 54px/.9 var(--serif); font-stretch:108%; color:var(--lime); letter-spacing:-.02em; }
.score__side{ display:grid; gap:5px; min-width:0; }
.score__t{ font:800 15.5px/1.25 var(--sans); }
.score__l{ display:inline-flex; align-items:center; gap:7px; font:700 13.5px/1.2 var(--sans); color:var(--snow-2); }
.score__l svg{ width:15px; height:15px; }
.quotes{ display:grid; grid-auto-flow:column; grid-auto-columns:min(84%, 340px); gap:12px; margin:0; padding:2px var(--gut) 12px;
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gut); scrollbar-width:none; }
.quotes::-webkit-scrollbar{ display:none; }
.quotes:focus-visible{ outline-offset:-2px; }
.quote{ scroll-snap-align:start; margin:0; display:flex; flex-direction:column; gap:14px; min-width:0; padding:20px; border-radius:16px; background:var(--night-2); border:0; box-shadow:inset 0 0 0 1px var(--night-line); }
.quote__stars{ color:var(--lime); letter-spacing:.14em; font-size:15px; line-height:1; }
.quote blockquote{ margin:0; flex:1; }
.quote blockquote p{ margin:0; font-size:16px; line-height:1.55; color:var(--snow); }
.quote figcaption{ display:flex; align-items:center; gap:12px; }
.quote figcaption > span:last-child{ display:flex; flex-direction:column; }
.quote figcaption small{ color:var(--snow-3); font-size:13.5px; }
.quote__av{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--lime); color:var(--on-lime); font:800 16px/1 var(--sans); flex:none; }
@media (min-width:900px){
  .rv__top{ grid-template-columns:minmax(0,1fr) auto; align-items:end; margin-bottom:44px; }
  .score{ padding:18px 24px; }
  .score__n{ font-size:68px; }
  .quotes{ width:min(100% - 2 * var(--gut), var(--wrap)); margin-inline:auto; padding:0; grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; overflow:visible; }
  .quote{ padding:26px; }
}

/* --- gallery ---------------------------------------------------------------------------------------- */
.gallery{ background:var(--ink); }
.shots{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; grid-auto-flow:dense; }
.shot{ position:relative; display:block; min-width:0; aspect-ratio:1; padding:0; border:0; border-radius:10px; overflow:hidden; background:var(--ink-3); cursor:zoom-in; }
.shot--wide{ grid-column:span 2; aspect-ratio:auto; }
.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(6,minmax(0,1fr)); gap:10px; } .shot{ border-radius:12px; } }

/* --- the quote ------------------------------------------------------------------------------------- */
.qt{ background:var(--ink); }
.qt__in{ display:grid; gap:18px; min-width:0; }
.qt .head{ margin-bottom:6px; }
.qform{ min-width:0; padding:18px 16px 20px; border-radius:20px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-1); }
.qform__t{ margin:0 0 16px; font:800 22px/1.1 var(--serif); font-stretch:106%; }
.qstep{ min-width:0; margin:0 0 20px; padding:0; border:0; }
.qstep__t{ float:left; width:100%; display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:0; font:800 16.5px/1.25 var(--sans); }
.qstep__t b{ display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; background:var(--night); color:var(--lime); font:800 13px/1 var(--sans); }
.qstep__t span{ min-width:0; }
.qstep__t small{ margin-left:auto; font:650 13px/1.2 var(--sans); color:var(--fg-3); white-space:nowrap; }
.qjobs,.qsizes,.qfields{ clear:both; }
.qjobs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.qjob{ position:relative; display:flex; min-width:0; }
.qjob input,.qsize input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.qjob__in{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; width:100%; min-width:0; min-height:58px; padding:10px 10px 11px; border-radius:12px;
  border:1.5px solid var(--line-2); background:var(--card); cursor:pointer; transition:border-color .2s, background-color .2s; }
.qjob__ic{ display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:9px; background:var(--ink); color:var(--fg); transition:background-color .2s, color .2s; }
.qjob__ic svg{ width:22px; height:22px; }
.qjob__name{ min-width:0; font:750 14px/1.2 var(--sans); overflow-wrap:break-word; }
.qjob__tick{ position:absolute; top:6px; right:6px; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--lime); color:var(--on-lime);
  opacity:0; scale:.5; transition:opacity .2s, scale .25s var(--spring); }
.qjob__tick svg{ width:12px; height:12px; stroke-width:3; }
.qjob__in:hover{ border-color:var(--fg-3); }
.qjob input:checked + .qjob__in{ border-color:var(--night); background:color-mix(in srgb, var(--lime) 16%, var(--card)); }
.qjob input:checked + .qjob__in .qjob__ic{ background:var(--night); color:var(--lime); }
.qjob input:checked + .qjob__in .qjob__tick{ opacity:1; scale:1; }
.qjob input:focus-visible + .qjob__in,.qsize input:focus-visible + span{ outline:2px solid var(--fg); outline-offset:2px; }
.qjob.is-flash .qjob__in{ animation:flash 1.1s var(--ease) 1; }
@keyframes flash{ 0%{ box-shadow:0 0 0 0 rgb(var(--brand-rgb) / .9); } 100%{ box-shadow:0 0 0 12px rgb(var(--brand-rgb) / 0); } }
.qsizes{ display:flex; flex-wrap:wrap; gap:8px; }
.qsize{ position:relative; display:flex; max-width:100%; }
.qsize span{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px 8px; min-height:46px; padding:8px 14px; border-radius:999px; border:1.5px solid var(--line-2); background:var(--card);
  font:750 14.5px/1.2 var(--sans); cursor:pointer; transition:background-color .2s, color .2s, border-color .2s; }
.qsize small{ font:800 13px/1.2 var(--sans); color:var(--fg-2); }
.qsize input:checked + span{ background:var(--night); border-color:var(--night); color:var(--snow); }
.qsize input:checked + span small{ color:var(--lime); }
.qfields{ display:grid; gap:12px; }
.qform .field label{ font:750 14px/1.2 var(--sans); color:var(--fg); }
.qform .field label small{ font-weight:600; color:var(--fg-3); }
.qform .field input,.qform .field textarea{ border-radius:12px; border:1.5px solid var(--line-2); background:var(--card); font-size:16px; }
.qform .field input:focus,.qform .field textarea:focus{ border-color:var(--fg); }
#qPostcode{ text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
#qPostcode::placeholder{ text-transform:none; letter-spacing:0; font-weight:400; }
.qform__send{ margin-top:4px; }
.qform__send svg{ width:21px; height:21px; }
.qform__note{ margin:12px 0 0; font-size:13.5px; line-height:1.5; color:var(--fg-3); }
.qform__status{ display:none; margin:12px 0 0; padding:12px 14px; border-radius:12px; background:color-mix(in srgb, var(--lime) 22%, var(--card)); font-weight:700; font-size:15px; }
.qform__status.is-on{ display:block; }
.qways{ min-width:0; }
.qways__list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.qways .way{ display:flex; align-items:center; gap:14px; min-width:0; padding:14px 16px; border-radius:14px; background:var(--card); border:1px solid var(--line); text-decoration:none; color:var(--fg); }
.qways a.way:hover{ border-color:var(--fg); }
.qways .way svg{ flex:none; width:40px; height:40px; padding:10px; border-radius:50%; background:var(--night); color:var(--lime); }
.qways .way span{ display:flex; flex-direction:column; min-width:0; font-size:clamp(13.5px,4vw,16px); letter-spacing:-.01em; font-weight:700; overflow-wrap:anywhere; }
.qways .way b{ font:800 11.5px/1.4 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); }
@media (min-width:600px){ .qfields{ grid-template-columns:1fr 1fr; } .qform .field--full{ grid-column:1 / -1; } }
@media (min-width:900px){
  .qt__in{ grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); grid-template-areas:"head head" "form ways"; gap:24px 32px; align-items:start; }
  .qt__head{ grid-area:head; margin-bottom:12px; }
  .qform{ grid-area:form; padding:32px; }
  .qways{ grid-area:ways; }
  .qways .way span{ font-size:15px; }
  .qjobs{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* --- FAQ ----------------------------------------------------------------------------------------------- */
.faq{ background:var(--card); }
.qa__q{ font:800 17px/1.35 var(--sans); padding:18px 0; color:var(--fg); }
.qa__ic{ background:var(--night); color:var(--lime); }
.qa__a p{ color:var(--fg-2); }

/* --- footer ------------------------------------------------------------------------------------------- */
.footer{ padding:52px 0 calc(110px + env(safe-area-inset-bottom)); background:var(--night); color:var(--snow); border-top:0; }
.footer__top{ display:grid; gap:18px; justify-items:start; padding-bottom:30px; border-bottom:1px solid var(--night-line); }
.brand--foot.brand--wide .brand__logo{ width:170px; height:72px; }
.footer__blurb{ margin:0; max-width:52ch; color:var(--snow-2); font-size:15.5px; }
.footer__acts{ display:flex; flex-wrap:wrap; gap:10px; }
.footer__acts .btn--line{ border-color:rgb(255 255 255 / .3); color:var(--snow); }
.footer__acts .btn--line svg{ color:var(--lime); }
/* social (2026-10-17): the firm's own pages as plain pills under the actions */
.footer__soc{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.footer__soc a{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:999px; border:1px solid rgb(255 255 255 / .22); color:var(--snow); text-decoration:none; font-weight:600; font-size:15px; }
.footer__soc a:hover{ border-color:var(--lime); }
.footer__soc svg{ width:18px; height:18px; color:var(--lime); }
.footer__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; padding-top:30px; }
.footer__col:last-child{ grid-column:1 / -1; }
@media (min-width:900px){ .footer__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } .footer__col:last-child{ grid-column:auto; } }
.footer__h{ margin:0 0 12px; font:800 12px/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--lime); }
.footer__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.footer__col a,.footer__col span{ color:var(--snow-2); font-size:15px; text-decoration:none; overflow-wrap:anywhere; }
.footer__col a:hover{ color:var(--snow); }
.footer__base{ display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:34px; padding-top:20px; border-top:1px solid var(--night-line); font-size:13.5px; color:var(--snow-3); }
@media (min-width:900px){
  .footer{ padding-bottom:56px; }
  .footer__top{ grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:32px; }
}

/* --- dock ---------------------------------------------------------------------------------------------- */
.dock{ background:rgb(var(--hero-ink-rgb) / .94); border-color:var(--night-line); border-radius:18px; }
.dock__btn{ min-width:0; border-radius:12px; background:var(--night-3); color:var(--snow); gap:7px; font-size:14.5px; white-space:nowrap; }
.dock__btn--wa svg{ color:#25D366; }
.dock__btn--main{ background:var(--lime); color:var(--on-lime); }

/* --- the opening, once (html.js only; reduced motion finishes it at once) ------------------------------- */
@keyframes gl-rise{ from{ translate:0 108%; } to{ translate:0 0; } }
@keyframes gl-up{ from{ opacity:0; translate:0 12px; } to{ opacity:1; translate:0 0; } }
@keyframes gl-settle{ from{ scale:1.07; } to{ scale:1; } }
@keyframes gl-gleam{ from{ translate:-120% 0; } to{ translate:260% 0; } }
html.js .hero__title .ln > span{ animation:gl-rise .9s cubic-bezier(.2,.8,.2,1) both; }
html.js .hero__title .ln:nth-child(2) > span{ animation-delay:.1s; }
html.js .hero__title .ln:nth-child(3) > span{ animation-delay:.2s; }
html.js .hero__kicker{ animation:gl-up .6s .05s var(--ease) both; }
html.js .hero__panel > *{ animation:gl-up .6s var(--ease) both; }
html.js .hero__panel > :nth-child(1){ animation-delay:.25s; }
html.js .hero__panel > :nth-child(2){ animation-delay:.33s; }
html.js .hero__panel > :nth-child(3){ animation-delay:.41s; }
html.js .hero.is-ready .hero__media img{ animation:gl-settle 1.6s cubic-bezier(.2,.7,.2,1) both; }
html.js .hero.is-ready .hero__gleam{ animation:gl-gleam 1.5s .35s cubic-bezier(.45,0,.25,1) both; }

/* the wide logo carries the name for screen readers only: never cut with an ellipsis */
.brand--wide .brand__name{ text-overflow:clip; white-space:normal; }