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

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

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

/* =============================================================================
   COURSE (ground-course), 2026-10-11 — landscapers, driveway and patio installers, fencers.
   Daylight and stone: a pale stone page, white slabs, slate for the hero and the reversed
   bands, the firm's colour on the one action and as small marks only. One family, Bricolage
   Grotesque (width and weight axes only: 78 kB), set tight and heavy at a narrow width. Square corners, like the work.
   The hero is the firm's best finished job, full screen under a clear nav; nine covers lift
   off it a paver at a time, course by course, and the joints fade (CSS; app.js holds it for
   the picture). A measuring tape of the services runs along its foot. The quick quote draws
   the plot to scale. The first before/after holds while the scroll wipes it; the services
   are slabs that stack; the reviews stand on slate under the score; the steps are the shared
   trip as a path across a garden plan. Appended after shared/trade.
   ========================================================================== */
:root{
  --r:6px;
  --r-btn:8px;
  --d-weight:800;
  --d-case:none;
  --d-style:normal;
  --d-track:-.035em;
  --slab:#FFFFFF;
  --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(--hero-brand-display, var(--hero-brand-lift));
  --gold:#F2B33D;
  --joint:rgb(255 255 255 / .34);
  --wd:79%;
  --bond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 .5h16M0 8.5h16M.5 0v8M8.5 8v8' fill='none' stroke='%23000'/%3E%3C/svg%3E");
  --flag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M0 .5h26M0 14.5h26M.5 0v14M17.5 0v14M9.5 14v12' fill='none' stroke='%23000'/%3E%3C/svg%3E");
  --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(255 255 255 / .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(--gold); }

/* --- 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:6px; background:#fff; padding:3px; }
.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:#fff; }
html.js .nav:not(.is-solid):not(:has(.burger.is-open)) .brand__sub{ color:rgb(255 255 255 / .8); }
html.js .nav:not(.is-solid):not(:has(.burger.is-open)) .burger{ border-color:rgb(255 255 255 / .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(255 255 255 / .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(255 255 255 / .88); }
  html.js .nav:not(.is-solid) .nav__tel svg{ color:#fff; }
}
.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(255 255 255 / .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:#fff; 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%); }
/* the laying: one cover a course, drawn back a paver at a time, alternate courses from alternate ends */
.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:linear-gradient(90deg, var(--joint) 0 1px, transparent 1px) 0 0 / calc(100% / var(--cols)) 100%; }
.lay i:nth-child(even)::after{ background-position:calc(50% / (var(--cols) - 1)) 0; }
.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) steps(3, end) 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:.3; }
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:#fff;
  background:rgb(var(--hero-ink-rgb) / .58); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgb(255 255 255 / .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:#fff; }
.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(255 255 255 / .88); text-wrap:pretty; }
.hero__lead i,.hero__lead em{ font-style:normal; color:#fff; 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(255 255 255 / .42); color:#fff; }
.btn--ghost:hover{ border-color:#fff; }
.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(255 255 255 / .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:#fff;
  background:repeating-linear-gradient(90deg, rgb(255 255 255 / .46) 0 1px, transparent 1px 8px) 0 0 / auto 5px no-repeat,
    repeating-linear-gradient(90deg, rgb(255 255 255 / .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(255 255 255 / .25); }

.specs-band{ background:var(--slate); color:var(--chalk); border-top:1px solid rgb(255 255 255 / .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:steps(7, end); 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(255 255 255 / .16); }
  .hero__review blockquote{ margin:12px 0 0; }
  .hero__review blockquote p{ margin:0; font-size:16.5px; line-height:1.5; color:#fff; }
  .hero__review figcaption{ margin-top:12px; font:600 13.5px/1.3 var(--sans); color:rgb(255 255 255 / .74); }
}

/* --- material swatches: each surface drawn as its pattern (build.mjs picks one per service) --- */
.sw{ position:relative; display:block; overflow:hidden; background:#E3E4E0; color:rgb(22 27 30 / .5); }
.sw::before{ content:""; position:absolute; inset:-45%; background:currentColor; -webkit-mask:var(--pat); mask:var(--pat); rotate:var(--rot, 0deg); }
.sw--xl::before{ scale:2.4; }
.sw--block{ --pat:var(--bond) 0 0 / 16px 16px; --rot:45deg; background:#E4D9CE; }
.sw--wall{ --pat:var(--bond) 0 0 / 20px 14px; background:#E6D6CC; }
.sw--slab{ --pat:var(--flag) 0 0 / 26px 26px; background:#E2E3DF; }
.sw--resin{ --pat:radial-gradient(#000 1.1px, transparent 1.6px) 0 0 / 7px 7px, radial-gradient(#000 .9px, transparent 1.4px) 3px 4px / 9px 9px; background:#EBE1C8; }
.sw--tarmac{ --pat:radial-gradient(#000 .8px, transparent 1.2px) 0 0 / 4px 4px, radial-gradient(#000 .7px, transparent 1.1px) 2px 3px / 7px 7px; background:#3B4043; color:rgb(255 255 255 / .34); }
.sw--turf{ --pat:repeating-linear-gradient(82deg, #000 0 1px, transparent 1px 4px), repeating-linear-gradient(98deg, #000 0 1px, transparent 1px 7px); background:#D9E4CC; color:rgb(40 78 34 / .5); }
.sw--fence{ --pat:repeating-linear-gradient(90deg, #000 0 1.5px, transparent 1.5px 9px); background:#E3D7C4; }
.sw--deck{ --pat:repeating-linear-gradient(0deg, #000 0 1.5px, transparent 1.5px 8px), linear-gradient(90deg, #000 0 1.5px, transparent 1.5px) 0 0 / 46px 16px; background:#E0D2BE; }
.sw--plant{ --pat:repeating-radial-gradient(circle at 50% 50%, #000 0 1px, transparent 1px 7px); background:#DBE6D6; color:rgb(40 78 34 / .45); }
.sw--drain{ --pat:repeating-linear-gradient(45deg, #000 0 1px, transparent 1px 6px); background:#DCDAD1; }

/* --- the quick quote: surfaces, the plot to scale, the postcode -------------------------- */
.qq{ padding-top:60px; }
.qq__in{ display:grid; gap:4px; }
.plot{ display:grid; gap:28px; padding:20px 16px 22px; border-radius:var(--r); background:var(--slab); box-shadow:0 0 0 1px var(--line), 0 34px 60px -44px rgb(22 27 30 / .5); }
.plot__step{ min-width:0; min-inline-size:0; margin:0; padding:0; border:0; }
.plot__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); }
.plot__label b{ display:grid; place-items:center; flex:none; width:25px; height:25px; border-radius:4px; background:var(--ink-3); color:var(--fg-2); font:800 13.5px/1 var(--sans);
  transition:background-color .25s, color .25s; }
.plot__step.is-done > .plot__label b{ background:var(--fg); color:var(--ink); }
.plot__label small{ margin-left:auto; font:600 14px/1.2 var(--sans); color:var(--fg-3); text-align:right; font-variant-numeric:tabular-nums; }
.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; pointer-events:none; }
.job__in{ position:relative; display:flex; align-items:center; gap:10px; min-height:64px; height:100%; padding:8px 10px 8px 8px; border-radius:var(--r); cursor:pointer;
  background:var(--ink); border:1.5px solid transparent; transition:border-color .2s, background-color .2s, scale .15s; -webkit-tap-highlight-color:transparent; }
.job__in:active{ scale:.97; }
.job .sw{ flex:none; width:46px; height:46px; border-radius:4px; }
.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:46px; height:46px; border-radius:4px; background:rgb(var(--fg-rgb) / .88); color:#fff; opacity:0; transition:opacity .2s; }
.job__tick svg{ width:20px; height:20px; scale:.4; transition:scale .3s var(--spring); }
.job input:checked + .job__in{ background:var(--slab); border-color:var(--fg); }
.job input:checked + .job__in .job__tick{ opacity:1; }
.job input:checked + .job__in .job__tick svg{ scale:1; }
.job input:focus-visible + .job__in{ outline:2px solid var(--fg); outline-offset:2px; }
/* the plot: one square of the grid is a metre; the sliders draw it */
.plan{ --u:13px; position:relative; display:grid; place-items:center; height:calc(var(--u) * 12 + 48px); border-radius:var(--r); overflow:hidden;
  background:var(--ink) radial-gradient(rgb(var(--fg-rgb) / .26) 1px, transparent 1.4px) 50% 50% / var(--u) var(--u); transition:opacity .25s; }
.plan__plot{ --l:8; --w:4; position:relative; display:grid; place-items:center; width:calc(var(--l) * var(--u)); height:calc(var(--w) * var(--u));
  background:rgb(var(--brand-rgb) / .16); box-shadow:0 0 0 1.5px var(--fg); transition:width .3s var(--ease), height .3s var(--ease); }
.plan__l,.plan__w{ position:absolute; font:700 12.5px/1 var(--sans); color:var(--fg); white-space:nowrap; font-variant-numeric:tabular-nums; }
.plan__l{ left:50%; bottom:100%; translate:-50% -7px; }
.plan__w{ right:100%; top:50%; translate:-8px -50%; }
.plan__a{ font:800 17px/1 var(--serif); font-stretch:84%; letter-spacing:-.02em; white-space:nowrap; transition:opacity .2s; }
.plan__a.is-out{ opacity:0; }
.size__rows{ margin-top:8px; transition:opacity .25s; }
.slide{ display:grid; grid-template-columns:58px minmax(0, 1fr) 48px; align-items:center; gap:10px; min-height:48px; font:650 14.5px/1 var(--sans); color:var(--fg-2); }
.slide output{ text-align:right; font-weight:800; color:var(--fg); font-variant-numeric:tabular-nums; }
.slide input{ -webkit-appearance:none; appearance:none; width:100%; height:44px; margin:0; background:transparent; cursor:pointer; touch-action:pan-y; }
.slide input::-webkit-slider-runnable-track{ height:6px; border-radius:3px; background:linear-gradient(90deg, var(--fg) var(--p, 50%), var(--ink-4) var(--p, 50%)); }
.slide input::-moz-range-track{ height:6px; border-radius:3px; background:var(--ink-4); }
.slide input::-moz-range-progress{ height:6px; border-radius:3px; background:var(--fg); }
.slide input::-webkit-slider-thumb{ -webkit-appearance:none; width:28px; height:28px; margin-top:-11px; border-radius:50%; background:var(--slab); border:2px solid var(--fg); box-shadow:0 2px 8px rgb(0 0 0 / .2); }
.slide input::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:var(--slab); border:2px solid var(--fg); box-shadow:0 2px 8px rgb(0 0 0 / .2); }
.slide input:focus-visible{ outline:2px solid var(--fg); outline-offset:2px; border-radius:6px; }
.unsure{ display:flex; align-items:center; gap:10px; min-height:44px; margin-top:4px; font:600 15px/1.25 var(--sans); cursor:pointer; }
.unsure input{ flex:none; width:22px; height:22px; margin:0; accent-color:var(--fg); }
.size.is-unsure .plan,.size.is-unsure .size__rows{ opacity:.32; }
.post{ width:100%; min-height:56px; margin-bottom:12px; padding:0 16px; border-radius:var(--r); border:1.5px solid var(--line-2); background:var(--ink);
  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{ outline:none; border-color:var(--fg); }
.plot__wa{ margin-top:10px; }
.plot__wa svg{ color:#25D366; }
.plot__more{ display:block; margin-top:14px; text-align:center; color:var(--fg); font:700 15px/1.3 var(--sans); text-underline-offset:4px; }
.plot__note{ margin:10px 0 0; text-align:center; font-size:13.5px; line-height:1.45; color:var(--fg-3); }
.plot__ok{ display:none; margin:10px 0 0; padding:12px 14px; border-radius:var(--r); background:var(--ink); font-size:14.5px; font-weight:600; text-align:center; }
.plot__ok.is-on{ display:block; }
@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); }
  .plot{ grid-template-columns:1fr 1fr; gap:30px 28px; padding:30px 28px; }
  .plot .jobs{ grid-column:1 / -1; }
  .jobs__grid{ grid-template-columns:repeat(3, 1fr); }
  .job:last-child:nth-child(odd){ grid-column:auto; }
  .plan{ --u:14px; }
}

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

/* --- before and after -------------------------------------------------------------------- */
.ba{ padding-bottom:calc(var(--sec) * .8); }
.ba .head{ margin-bottom:22px; }
.ba__pair{ margin:0; }
.ba__frame{ position:relative; overflow:hidden; aspect-ratio:var(--ratio, 4 / 3); max-height:66svh; margin-inline:auto; border-radius:var(--r); background:var(--slate-2);
  touch-action:pan-y; -webkit-user-select:none; user-select:none; cursor:ew-resize; }
.ba__frame:has(.ba__range:focus-visible){ outline:2px solid #fff; outline-offset:3px; }
.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 10px 6px; border-radius:4px; font:700 12.5px/1 var(--sans); transition:opacity .25s; pointer-events:none; }
.ba__tag--before{ left:12px; background:rgb(var(--hero-ink-rgb) / .72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; }
.ba__tag--after{ right:12px; background:#fff; color:var(--slate); }
.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 / .14); pointer-events:none; }
.ba__handle i{ position:absolute; left:50%; top:50%; translate:-50% -50%; width:44px; height:44px; border-radius:50%; background:#fff; box-shadow:0 8px 24px rgb(0 0 0 / .4); 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(--slate); border-width:0 0 2.5px 2.5px; }
.ba__handle i::before{ left:11px; rotate:45deg; }
.ba__handle i::after{ right:11px; rotate:-135deg; }
.ba__frame.is-drag .ba__handle i{ scale:1.12; }
.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:12px; font-size:15px; color:var(--mist); }
.ba__cap b{ font:750 17.5px/1.25 var(--sans); color:var(--chalk); letter-spacing:-.01em; }
.ba__hint{ margin-left:auto; font-style:normal; font-size:13.5px; color:var(--mist); }
.ba__list{ display:grid; gap:22px; margin-top:30px; }
.ba__pin{ padding-block:4px; }
@media (max-width:899px){ .ba__stage .ba__frame{ aspect-ratio:4 / 5; max-height:calc(100svh - 190px); } .app .ba__stage.is-live .ba__pin{ padding-bottom:76px; } }
@media (prefers-reduced-motion:no-preference){
  .app .ba__stage.is-live{ height:220svh; }
  .app .ba__stage.is-live .ba__pin{ position:sticky; top:0; display:grid; align-items:center; height:100svh; }
}
body.ba-held .nav{ translate:0 -101%; }
@media (min-width:900px){
  .ba__list{ grid-template-columns:1fr 1fr; gap:26px; }
  .ba__stage .ba__frame{ max-height:72svh; }
  .ba__stage .ba__pair{ max-width:1000px; margin-inline:auto; }
}

/* --- 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(22 27 30 / .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(--gold); 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; }

/* --- steps: a path across the plan (the shared trip) ---------------------------------------- */
.journey{ border:0; border-radius:var(--r); background:var(--slab); box-shadow:0 0 0 1px var(--line), 0 26px 40px -30px rgb(22 27 30 / .5); }
.journey__map{ color:rgb(var(--fg-rgb) / .07); }
.journey__plot{ fill:none; stroke:rgb(var(--fg-rgb) / .3); stroke-width:1; stroke-dasharray:5 4; }
.journey__verge{ stroke:rgb(var(--fg-rgb) / .055); stroke-width:36; }
.journey__road{ stroke:var(--ink-3); stroke-width:17; stroke-linecap:butt; }
.journey__dash{ stroke:var(--slab); stroke-width:17; stroke-dasharray:1.5 11; stroke-linecap:butt; opacity:1; }
.journey__done{ stroke:var(--acc); stroke-width:2.6; }
.journey__car{ translate:324px 40px; rotate:0deg; }
.journey__body{ fill:var(--fg); stroke:var(--slab); stroke-width:2; }
.journey__halo{ fill:var(--acc); opacity:.24; }
.journey__start{ left:12.8%; top:82.3%; width:19%; border-radius:8px; background:#fff; border:3px solid var(--slab); box-shadow:0 0 0 1.5px var(--fg), 0 14px 24px -12px rgb(22 27 30 / .5); }
.journey__start img{ object-fit:contain; padding:9%; }
.journey__l{ width:auto; background:none; color:var(--fg); font:800 clamp(22px,7vw,38px)/1 var(--serif); }
.journey__flag{ left:90%; top:15.4%; width:2px; height:30px; translate:-50% -100%; border-radius:1px; background:var(--fg); box-shadow:none; transform-origin:50% 100%; }
.journey__flag::after{ left:2px; top:0; width:19px; height:13px; border-radius:0; background:var(--acc); clip-path:polygon(0 0, 100% 50%, 0 100%); }
.journey__tag{ padding:6px 9px 5px; border-radius:4px; background:var(--slab); border:1px solid var(--line-2); color:var(--fg); font:700 12px/1 var(--sans); }
.journey__tag--a{ left:26%; top:89%; }
.journey__tag--b{ left:53%; top:57%; translate:0 0; }
.journey__tag--c{ right:13.5%; top:5%; background:var(--fg); color:var(--ink); border-color:var(--fg); }
.journey.is-there .journey__tag--c{ box-shadow:0 0 0 5px rgb(var(--fg-rgb) / .1); }
.step{ border:0; border-radius:var(--r); background:var(--slab); box-shadow:0 0 0 1px var(--line); transition:box-shadow .3s; }
.step__n{ border-radius:4px; background:var(--ink-3); color:var(--fg-2); transition:background-color .3s, color .3s; }
.step__title{ font-stretch:84%; font-size:24px; letter-spacing:-.03em; }
.trip .step.is-here{ box-shadow:0 0 0 1.5px var(--fg); }
.trip .step.is-here .step__n,.trip .step.is-done .step__n{ background:var(--fg); color:var(--ink); }
html:not(.app) .step__n{ background:var(--fg); color:var(--ink); }

/* --- 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(22 27 30 / .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; }
}