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

/* =============================================================================
   JOURNEY (lesson-journey), 2026-10-09 — driving schools; Joseph's pick, Signpost and
   Route together. The hero is the UK direction sign over the business's photograph
   (Overpass, the highway face); the page reads in Fraunces with the promise in italic
   on warm paper; the steps are the journey map, driven by the scroll. Sign yellow and
   the roundels' red ring are the two fixed colours (they are the signs', not the
   brand's). Appended after shared/trade.
   ========================================================================== */
/* Same brand typography, served locally to avoid the Google stylesheet round trip. */
/* 2026-10-10 (v2): the files carry only what the page sets: Fraunces 500 to 800 at one optical size (40),
   Overpass 400 to 900. 188 kB of fonts became about 110 kB; the originals are in archive/designs/journey-v1-2026-10-10/. */
@font-face{font-family:'Journey Overpass';font-style:normal;font-weight:400 900;font-display:swap;src:url('../assets/fonts/overpass-normal-latin-98ed8ee429.woff2') format('woff2');}
@font-face{font-family:'Journey Fraunces';font-style:normal;font-weight:500 800;font-display:swap;src:url('../assets/fonts/fraunces-normal-latin-ec7e75aa39.woff2') format('woff2');}
@font-face{font-family:'Journey Fraunces';font-style:italic;font-weight:500 800;font-display:swap;src:url('../assets/fonts/fraunces-italic-latin-6ea941fb90.woff2') format('woff2');}
/* Optional calm, enquiry-focused presentation. Existing Journey pages keep their signage. */
.journey--clean{--serif:var(--sans);--d-weight:700;--d-track:-.035em;--r:12px;--r-btn:8px;--sec:80px;}
.journey--clean .label{letter-spacing:.06em;}
.journey--clean .label::before{display:none;}
.journey--clean .d-lg{font-size:clamp(30px,3.5vw,44px);}
.journey--clean .d-md{font-size:clamp(23px,2.2vw,30px);line-height:1.2;}
.journey--clean .nav__links{gap:18px;}
.journey--clean .nav__links a{font-size:14px;white-space:nowrap;}
.journey--clean .nav__book{white-space:nowrap;}
.journey--clean .hero--simple{padding:40px 0 32px;background:var(--ink);}
.simple-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px 48px;align-items:center;}
.simple-hero__copy{min-width:0;}
.simple-hero__kicker{margin:0 0 18px;color:var(--brand-display);font-size:13px;font-weight:700;line-height:1.5;}
.simple-hero__title{margin:0;font:750 clamp(34px,3.6vw,52px)/1.08 var(--sans);letter-spacing:-.045em;text-wrap:balance;}
.simple-hero__lead{margin:22px 0 0;color:var(--fg-2);font-size:18px;line-height:1.65;max-width:58ch;}
.simple-hero__availability{margin:16px 0 0;font-size:15px;line-height:1.6;color:var(--fg-2);}
.simple-hero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.simple-hero__actions .btn{font-size:15px;padding-inline:18px;white-space:nowrap;}
.simple-hero__photo{margin:0;overflow:hidden;border-radius:var(--r);aspect-ratio:6 / 5;background:var(--ink-2);}
.simple-hero__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--focus,center);}
.simple-hero__coverage{grid-column:1 / -1;border-top:1px solid var(--line);padding-top:20px;color:var(--fg-2);font-size:14px;line-height:1.7;}
.simple-hero__coverage summary{cursor:pointer;font-weight:650;color:var(--fg);}
.simple-hero__coverage summary span{margin-left:14px;font-weight:500;text-decoration:underline;text-underline-offset:4px;color:var(--fg-2);}
.simple-hero__coverage p{margin:16px 0 0;max-width:100ch;}
.hero--text .simple-hero{grid-template-columns:minmax(0,780px);}
.hero--text .simple-hero__title{font-size:clamp(36px,4.5vw,64px);}
.journey--clean .lessons{background:var(--ink);}
.journey--clean .lessons__in{grid-template-columns:1fr;gap:0;}
.journey--clean .lessons__list{border-top:1px solid var(--line);}
.journey--clean .lesson{grid-template-columns:minmax(0,1fr) auto;gap:12px 36px;padding:30px 0;border-bottom:1px solid var(--line);align-items:center;}
.journey--clean .lesson__n,.journey--clean .lesson__type{display:none;}
.journey--clean .lesson__body .lede{max-width:66ch;margin-top:12px;}
.journey--clean .lesson>.btn{grid-column:2;grid-row:1;margin:0;white-space:nowrap;}
.journey--clean .school{background:var(--ink-2);color:var(--fg);border:0;}
.journey--clean .school__in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;}
.journey--clean .school .label,.journey--clean .school__paragraph{color:var(--fg-2);}
.journey--clean .school__head .d-lg{font-size:clamp(32px,3.6vw,46px);max-width:18ch;}
.journey--clean .school__statement{font-size:26px;line-height:1.4;}
.journey--clean .school__paragraph{font-size:17px;line-height:1.7;}
.journey--clean .school__logo{width:120px;height:120px;background:#FFF;border:1px solid var(--line);}
.journey--clean .school__facts{margin-block:24px;border-color:var(--line);}
.journey--clean .school__facts div{padding:12px 0;border-color:var(--line);}
.journey--clean .school__facts dt{color:var(--fg-2);}
.journey--clean .school .school__link{color:var(--brand-display);}
.journey--clean .socialbtn{background:var(--brand);border-color:var(--brand);color:var(--on-brand);}
.journey--clean .offer{padding-top:16px;}
.journey--clean .offer__card{border:1px solid var(--line);border-radius:var(--r);background:var(--ink-2);color:var(--fg);padding:36px;}
.journey--clean .offer__card .label,.journey--clean .offer__note{color:var(--fg-2);}
.journey--clean .offer__text{color:var(--fg-2);}
.journey--clean .offer__text:empty{display:none;}
.offer__promotions{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:28px;}
.promotion{padding-top:24px;border-top:1px solid var(--line);}
.promotion__value{margin:0 0 12px;color:var(--brand-display);font:750 clamp(32px,3.4vw,44px)/1.1 var(--sans);letter-spacing:-.04em;}
.promotion h3{margin:0;font-size:19px;line-height:1.4;}
.promotion>p:last-child{margin:8px 0 0;font-size:16px;line-height:1.65;color:var(--fg-2);}
/* the offer on Journey's own night card reads like the school and test bands (2026-10-13, DWP: the
   marked word, the values and the action were navy on navy) */
:not(.journey--clean)>main .offer__card .label{color:var(--hero-fg-2);}
:not(.journey--clean)>main .offer__card .label::before{background:var(--hero-brand-display);box-shadow:0 0 0 4px rgb(var(--hero-fg-rgb) / .12);}
:not(.journey--clean)>main .offer__card .d-lg i{color:var(--hero-brand-display);}
:not(.journey--clean)>main .offer__card .promotion{border-top-color:rgb(var(--hero-fg-rgb) / .2);}
:not(.journey--clean)>main .offer__card .promotion__value{color:var(--hero-brand-display);}
:not(.journey--clean)>main .offer__card .promotion>p:last-child{color:var(--hero-fg-2);}
:not(.journey--clean)>main .offer__card .btn--brand{background:var(--hero-fg);color:var(--hero-ink);}
.journey--clean .quotes{overflow-y:hidden;}
.journey--clean .areas__in{grid-template-columns:1fr;gap:28px;}
.journey--clean .areas__places{gap:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));}
.journey--clean .areas__places li{border:0;border-radius:0;background:none;color:var(--fg);box-shadow:none;padding:12px 4px;font-size:15px;font-weight:600;gap:8px;}
.journey--clean .areas__places svg{flex-shrink:0;color:var(--brand-display);}
.journey--clean .closing{background:var(--ink-2);}
.journey--clean .quoteform{background:var(--ink);border:1px solid var(--line);box-shadow:none;}
.quoteform__privacy{font-size:13px;line-height:1.8;color:var(--fg-2);margin:12px 0 0;}
.quoteform__privacy a{text-underline-offset:3px;}
.quoteform__privacy span{margin:0 5px;}
@media(min-width:1000px) and (max-width:1399px){
 .journey--clean .nav__tel span{display:none;}
 .journey--clean .nav__tel{width:36px;height:36px;justify-content:center;}
 .journey--clean .nav__links{gap:12px;}
 .journey--clean .nav__links a{font-size:13px;}
 .journey--clean .nav .brand__name{font-size:17px;}
}
@media(prefers-color-scheme:dark){
 .journey--clean{--ink:#091B32;--ink-2:#102640;--ink-3:#18314F;--ink-rgb:9 27 50;--fg:#EFF4FC;--fg-2:#C0CDDE;--fg-3:#A3B6CC;--fg-rgb:239 244 252;--line:#30445F;--line-2:#49617E;--brand-display:#A1C7FF;--brand-lift:#A1C7FF;--brand-mist:#1D3555;--card:#102640;--input:#0C2039;--shade:rgb(0 0 0 / .35);}
}
:root{
  --r:18px;
  --r-btn:12px;
  --d-weight:620;
  --d-track:-.03em;
  --sign-yellow:#FFD200;
  --ring:#D4202A;
  --junction:#1F4FA8;
}
.d-xl i,.d-lg i,.d-md i,.figs__statement em{ font-style:italic; font-weight:540; }
.label{ display:inline-flex; align-items:center; gap:10px; font:700 12px/1.3 var(--sans); letter-spacing:.14em; color:var(--fg-2); }
.label::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px var(--brand-mist); }
.d-xl i,.d-lg i,.d-md i{ color:var(--brand-display, var(--brand-lift)); }
.btn{ font-weight:800; }
.brand__name{ font-weight:650; font-size:20px; letter-spacing:-.02em; }
.brand__name::after{ content:"."; color:var(--brand-lift); }

/* --- hero: the sign ------------------------------------------------------------------ */
.hero{ padding:14px 0 40px; background:linear-gradient(var(--ink-2), var(--ink)); }
.hero__in{ display:grid; gap:0; }
.hero__photo{ margin:0; border-radius:var(--r) var(--r) 0 0; overflow:hidden; aspect-ratio:16 / 10.5; background:var(--ink-3); }
.hero__photo img{ width:100%; height:100%; object-fit:cover; animation:zoomout 1.6s var(--ease) both; }
@keyframes zoomout{ from{ scale:1.12; } }
.sign{ position:relative; z-index:1; margin:-34px 10px 0; padding:22px 20px 18px; border-radius:16px; background:var(--brand); color:var(--on-brand);
  box-shadow:inset 0 0 0 3px var(--on-brand), inset 0 0 0 6px var(--brand), 0 24px 40px -18px rgb(var(--brand-rgb) / .7);
  animation:sign .8s .15s var(--spring) both; }
.sign--alone{ margin:8px 0 0; }
@keyframes sign{ from{ opacity:0; translate:0 40px; } }
.sign__kicker{ display:flex; align-items:center; gap:10px; margin:0 0 12px; font:700 13px/1.3 var(--sans); letter-spacing:.04em; }
.sign__route{ padding:4px 8px 2px; border-radius:5px; background:var(--sign-yellow); color:#111; font:900 15px/1.1 var(--sans); flex:none; }
.hero__title{ margin:0; font:900 clamp(50px,14.5vw,108px)/.92 var(--sans); letter-spacing:-.035em; text-wrap:balance; }
.hero__title i{ font-style:normal; color:var(--sign-emphasis,var(--sign-yellow)); display:inline-block; transition:opacity .28s, translate .32s var(--ease); }
.hero__title i.is-out{ opacity:0; translate:.4em 0; }
.hero__title i.is-in{ opacity:0; translate:-.4em 0; transition:none; }
.sign__dest{ list-style:none; margin:16px 0 0; padding:14px 0 0; border-top:2px solid rgb(255 255 255 / .9); display:grid; gap:8px; }
.sign__dest li{ display:flex; align-items:center; gap:12px; font:800 22px/1.1 var(--sans); }
.sign__arrow{ position:relative; flex:none; width:30px; height:30px; }
.sign__arrow::before{ content:""; position:absolute; inset:0; background:currentColor;
  clip-path:polygon(0 38%,58% 38%,58% 12%,100% 50%,58% 88%,58% 62%,0 62%); animation:nudge 2.4s var(--ease) infinite; }
.sign__dest li:nth-child(odd) .sign__arrow::before{ rotate:-90deg; }
.sign__dest li:nth-child(even) .sign__arrow::before{ rotate:-45deg; }
@keyframes nudge{ 0%,70%,100%{ translate:0 0; } 80%{ translate:3px -3px; } }
/* hero.places (opt-in): a few destinations two across, then the link to every area */
.sign__dest--more{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; }
.sign__more{ grid-column:1 / -1; }
.sign__more a{ color:inherit; font:700 16px/1.3 var(--sans); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.sign__more a:hover{ text-decoration-color:var(--sign-emphasis,var(--sign-yellow)); }
.hero__avail{ margin:12px 0 0; font:650 16px/1.5 var(--sans); color:var(--fg); max-width:46ch; }
.hero__copy{ padding-top:24px; }
.hero__lead{ margin:0; font-size:18px; line-height:1.55; color:var(--fg-2); max-width:46ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.roundels{ list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.roundel{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.roundel b{ display:grid; place-items:center; width:min(92px, 25vw); aspect-ratio:1; border-radius:50%; background:#fff; color:#111;
  border:clamp(7px,2.2vw,10px) solid var(--ring); font:900 clamp(17px,5vw,24px)/1 var(--sans); letter-spacing:-.04em;
  box-shadow:0 8px 18px -10px rgb(0 0 0 / .4); animation:pop .6s var(--spring) both; }
.roundel:nth-child(2) b{ animation-delay:.12s; } .roundel:nth-child(3) b{ animation-delay:.24s; }
@keyframes pop{ from{ scale:.4; opacity:0; } }
.roundel span{ font:600 13px/1.3 var(--sans); color:var(--fg-2); }
@media (min-width:900px){
  .hero{ padding:48px 0 80px; }
  .hero__in{ grid-template-columns:1.1fr 1fr; grid-template-rows:auto auto; column-gap:56px; }
  .hero__photo{ grid-column:2; grid-row:1 / span 2; border-radius:var(--r); aspect-ratio:auto; height:100%; min-height:560px; }
  .sign{ grid-column:1; grid-row:1; margin:0; align-self:end; padding:30px 30px 24px; }
  .hero__copy{ grid-column:1; grid-row:2; }
}

.steps__list{ gap:12px; }
.step{ padding:22px 20px 22px 74px; background:var(--ink); border:2px solid var(--line); transition:border-color .3s, opacity .3s, box-shadow .3s; }
.step__n{ left:18px; top:20px; border-radius:6px; width:auto; min-width:40px; height:36px; padding:2px 8px 0; background:var(--junction); color:#fff;
  font:800 15px/1 var(--sans); box-shadow:inset 0 0 0 2px #fff, 0 0 0 1px var(--junction); transition:background-color .3s; }
.step__title{ font-size:23px; font-weight:620; }
.app .trip.is-live .step{ opacity:.55; }
.app .trip.is-live .step.is-done{ opacity:1; }
.app .trip.is-live .step.is-here{ opacity:1; border-color:var(--brand); box-shadow:0 18px 30px -22px rgb(var(--brand-rgb) / .8); }
.step.is-done .step__n{ background:var(--brand); box-shadow:inset 0 0 0 2px var(--on-brand), 0 0 0 1px var(--brand); color:var(--on-brand); }
@media (max-width:899px){
  .steps__list{ gap:14px; }
  .step{ padding-block:26px; }
}
@media (min-width:900px){
  .steps__list{ gap:16px; }
  .step{ padding:28px 28px 28px 86px; }
  .step__n{ left:24px; top:26px; }
}
@media (prefers-reduced-motion:reduce){
  .app .trip.is-live .step{ opacity:1; }
}

/* --- the page under it ------------------------------------------------------------- */
.figs__list{ display:none; }
.figs{ padding:56px 0; border:0; background:var(--hero-ink); color:var(--hero-fg); }
.figs__statement{ margin:0; max-width:24ch; }
.figs__statement em{ color:var(--sign-yellow); }

.pass{ background:var(--ink); border:2px solid var(--line-2); box-shadow:0 14px 30px -22px rgb(0 0 0 / .5); }
.pass__stamp{ border:0; rotate:0deg; padding:0; display:grid; place-items:center; width:54px; height:54px; border-radius:50%;
  background:#fff; border:7px solid var(--ring); color:#111; font-size:0; }
.pass__stamp::before{ content:""; width:20px; height:11px; border-left:4px solid var(--brand); border-bottom:4px solid var(--brand); rotate:-45deg; translate:0 -3px; }
.pass__name{ font-size:38px; font-weight:600; }
.pass__first{ color:#111; background:var(--sign-yellow); padding:5px 8px 3px; border-radius:5px; }

.score{ background:var(--brand); box-shadow:inset 0 0 0 3px var(--on-brand), inset 0 0 0 6px var(--brand); }
.score__n{ font-weight:600; }
.quote{ background:var(--ink); border:2px solid var(--line); }
.quote blockquote p{ font:500 20px/1.42 var(--serif); letter-spacing:-.01em; }
.areas__places li{ background:var(--brand); color:var(--on-brand); border:0; border-radius:10px; font:800 18px/1.2 var(--sans);
  box-shadow:inset 0 0 0 2px var(--on-brand), inset 0 0 0 4px var(--brand); padding:14px 18px; }
.areas__places svg{ color:var(--sign-yellow); }
.areas__centres li{ background:var(--ink); border:2px solid var(--line); border-left:8px solid var(--brand); }
.quoteform{ background:var(--ink); border:2px solid var(--line); box-shadow:0 30px 60px -40px rgb(0 0 0 / .4); }
.qa__q{ font-weight:800; }
.footer{ background:var(--hero-ink); color:var(--hero-fg); border:0; }
.footer .footer__about p,.footer .footer__col a,.footer .footer__col span{ color:var(--hero-fg-2); }
.footer .footer__h,.footer .footer__base{ color:var(--hero-fg-3); border-color:rgb(var(--hero-fg-rgb) / .14); }
.footer .socials a{ border-color:rgb(var(--hero-fg-rgb) / .25); }

/* Individual school identity and a fuller, factual introduction. */
.lesson-journey .identity{grid-column:1 / -1;grid-row:1;}
.lesson-journey .brand__name::after{content:none;}
.school{background:var(--hero-ink);color:var(--hero-fg);border-block:6px solid var(--brand);}
.school__in{display:grid;gap:32px;}
.school .label{color:var(--hero-fg-2);}
.school .label::before{background:var(--hero-brand-display);}
.school .d-lg i{color:var(--hero-brand-display);}
.school__head .d-lg{font-size:clamp(40px,9vw,68px);max-width:16ch;}
.school__logo{width:140px;height:140px;object-fit:contain;padding:12px;border-radius:14px;background:#fff;margin-top:30px;}
.school__statement{margin:0;font:550 clamp(24px,5.5vw,32px)/1.25 var(--serif);letter-spacing:-.025em;}
.school__statement em{color:var(--hero-brand-display);}
.school__paragraph{margin:20px 0 0;color:var(--hero-fg-2);max-width:58ch;}
.school__facts{display:grid;gap:0;margin:30px 0;border-top:1px solid rgb(var(--hero-fg-rgb) / .2);}
.school__facts div{padding:16px 0;border-bottom:1px solid rgb(var(--hero-fg-rgb) / .2);display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;}
.school__facts dt{font:600 12px/1.5 var(--sans);color:var(--hero-fg-2);text-transform:uppercase;letter-spacing:.07em;}
.school__facts dd{margin:0;font-weight:700;}
.school__link{display:inline-flex;gap:12px;align-items:center;font-weight:700;text-underline-offset:6px;}
.school__link svg{width:20px;height:20px;}
.lessons{background:var(--ink-2);}
.lessons__in{display:grid;gap:32px;}
.lessons__list{list-style:none;margin:0;padding:0;border-top:2px solid var(--line-2);}
.lesson{padding:30px 0;display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;border-bottom:2px solid var(--line-2);}
.lesson__n{font:800 14px/1.4 var(--sans);color:var(--brand-lift);padding-top:4px;}
.lesson__type{margin:0 0 12px;font:700 12px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--fg-2);}
.lesson>.btn{grid-column:2;justify-self:start;margin-top:8px;}
.lesson-note{background:var(--ink);border:2px solid var(--line);border-top:6px solid var(--brand);border-radius:var(--r);padding:28px 24px;align-self:start;}
.lesson-note__lead{color:var(--fg-2);margin:18px 0;}
.lesson-note__list{list-style:none;counter-reset:prepare;padding:0;margin:24px 0;}
.lesson-note__list li{counter-increment:prepare;padding:18px 0 18px 34px;position:relative;border-top:1px solid var(--line);}
.lesson-note__list li::before{content:counter(prepare,decimal-leading-zero);position:absolute;left:0;top:20px;font:800 12px/1.3 var(--sans);color:var(--brand-lift);}
.lesson-note__list p{margin:7px 0 0;font-size:15px;color:var(--fg-2);}
@media(min-width:900px){
 .hero__photo{grid-row:2 / span 2;}.sign{grid-row:2;}.hero__copy{grid-row:3;}
 .school__in{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:90px;}
 .lessons__in{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:64px;}
 .lesson{padding-block:40px;}
}
@media(min-width:900px){
 .hero--plain .hero__copy{grid-column:2;grid-row:2;align-self:center;padding-top:0;}
 .hero--plain .sign{align-self:center;}
}

/* Mobile refinement, 2026-10-10. Keep the signpost identity and native scrolling. */
.hero__title{line-height:1.02;overflow-wrap:break-word;}
.sign{animation:none;box-shadow:inset 0 0 0 3px var(--on-brand),inset 0 0 0 6px var(--brand),0 16px 32px -24px var(--shade);}
.hero__photo img,.roundel b,.sign__arrow::before{animation:none;}
html:not(.app) .lesson-journey .burger,
html:not(.app) .lesson-journey #enquiry[action=""]{display:none;}
.app .trip.is-live .step{opacity:1;}
.step p{color:var(--fg-2);}
.step.is-here .step__n{background:var(--brand);color:var(--on-brand);box-shadow:inset 0 0 0 2px var(--on-brand);}
.d-lg{line-height:1.12;}
.d-md{line-height:1.18;}
.learning{background:var(--ink-2);border-top:1px solid var(--line);}
.learning__in{display:grid;gap:32px;}
.learning__head{margin:0;}
.learning__link{margin-top:24px;}
.learning__list{list-style:none;margin:0;padding:0;}
.learning__item{display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px;padding:28px 0;border-bottom:1px solid var(--line-2);}
.learning__item:first-child{padding-top:0;}
.learning__n{font:800 13px/1.5 var(--sans);color:var(--brand-lift);padding-top:6px;}
.lesson-word{display:inline-block;vertical-align:baseline;}
.lesson-word__text{display:inline-block;}
@keyframes lessonWord{from{opacity:0;translate:0 14px;}to{opacity:1;translate:0 0;}}
@media(prefers-reduced-motion:no-preference){
 html.app .lesson-journey .reveal{transition-duration:.65s;translate:0 16px;}
 html.app .lesson-journey .reveal.is-in{translate:0 0;}
 .reveal.is-in .lesson-word__text{animation:lessonWord .7s var(--ease) both;animation-delay:var(--word-delay,0ms);}
}
@media(min-width:900px){
 .hero__title{font-size:clamp(50px,5.8vw,88px);}
 .learning__in{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:80px;align-items:start;}
 .learning__head{position:sticky;top:calc(var(--nav-h) + 32px);}
 .learning__item{padding:36px 0;}
 .lesson-note{position:sticky;top:calc(var(--nav-h) + 24px);}
 .hero__photo{min-height:480px;}
 /* a landscape photograph is shown whole, at its own shape, beside the sign: the tall panel cropped its sides away */
 .hero__photo.hero__photo--wide{height:auto;min-height:0;aspect-ratio:var(--ratio,3 / 2);align-self:start;}
}
@media(prefers-reduced-motion:reduce){
 .lesson-word__text{animation:none;}
 .journey__flag,.journey__burst i{animation:none!important;}
 .trip__hold,.learning__head,.lesson-note{position:static;}
}

/* Longer learner guides: generous editorial rows and a quiet skills grid. */
.first-lesson,.lesson-plan{background:var(--ink);border-top:1px solid var(--line);}
.guide-links{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 40px;}
.guide-links a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid var(--line-2);border-radius:var(--r-btn);font:700 14px/1.4 var(--sans);text-decoration:none;}
.guide-links a:hover{border-color:var(--brand);background:var(--brand-mist);}
.guide-number{font:800 13px/1.5 var(--sans);color:var(--brand-lift);}
.guide-eyebrow{font:700 12px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);margin:0 0 12px;}
.first-lesson__list,.skills__list,.readiness__list,.lesson-plan__list{list-style:none;padding:0;margin:0;}
.first-lesson__item{display:grid;grid-template-columns:48px minmax(0,1fr);gap:20px;border-top:1px solid var(--line-2);padding:36px 0;}
.first-lesson__item>.guide-number{padding-top:3px;}
.first-lesson__item .lede{max-width:66ch;}
.guide-note{margin:18px 0 0;padding-left:16px;border-left:3px solid var(--brand);font:650 16px/1.6 var(--sans);max-width:64ch;}
.skills{background:var(--ink-2);border-block:1px solid var(--line);}
.skills__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;}
.skill{padding:32px 0 36px;border-top:1px solid var(--line-2);}
.skill .guide-number{display:block;margin-bottom:20px;}
.skill .d-md{max-width:22ch;}
.skill__prompt{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line);color:var(--fg-2);font-size:15px;line-height:1.6;}
.skill__prompt b{display:block;color:var(--fg);font-size:12px;margin-bottom:6px;letter-spacing:.03em;}
.readiness{background:var(--ink);}
.readiness__in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:80px;align-items:start;}
.readiness__head{position:sticky;top:calc(var(--nav-h) + 32px);margin:0;}
.readiness__link{margin-top:26px;}
.readiness__item,.lesson-plan__item{display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px;padding:30px 0;border-top:1px solid var(--line-2);}
.readiness__item>.guide-number,.lesson-plan__item>.guide-number{padding-top:6px;}
.guide-resources{padding:28px;border:1px solid var(--line-2);border-left:4px solid var(--brand);margin-top:28px;background:var(--ink-2);border-radius:var(--r);}
.guide-resources>p:not(.label){color:var(--fg-2);font-size:16px;line-height:1.65;margin:18px 0;}
.guide-resources ul{list-style:none;margin:0;padding:0;}
.guide-resources li+li{border-top:1px solid var(--line);}
.guide-resources a{display:flex;gap:18px;justify-content:space-between;align-items:center;min-height:48px;padding:10px 0;font-size:15px;font-weight:700;text-underline-offset:4px;}
.guide-resources svg{width:18px;height:18px;flex:none;}
.lesson-plan__in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:64px;align-items:start;}
.plan-message{position:sticky;top:calc(var(--nav-h) + 24px);border:1px solid var(--line-2);border-top:5px solid var(--brand);border-radius:var(--r);padding:32px;background:var(--ink-2);}
.plan-message .d-md{margin-top:20px;}
.plan-message__copy{font:550 19px/1.7 var(--serif);margin:24px 0;padding:20px 0;border-block:1px solid var(--line-2);}
.plan-message__note{font-size:15px;line-height:1.65;color:var(--fg-2);margin:0 0 24px;}
@media(prefers-reduced-motion:reduce){.readiness__head,.plan-message{position:static;}}

/* =============================================================================
   JOURNEY v2, 2026-10-10 (Joseph: a first screen that impresses on a phone, text that
   changes like TT Fitness's "Built for …" but about driving, keep the car to its goal).
   The sign comes alive: a matrix panel at its foot, "Next stop", rolls through a
   learner's stops letter by letter while a car drives the line under the word to the
   chequered flag. The school's own headline stays put. One load sequence brings the
   first screen in; nothing here runs under reduced motion, and without JS the panel
   shows its first stop. Motion is translate / scale / opacity only.
   The previous design is kept whole in archive/designs/journey-v1-2026-10-10/.
   ========================================================================== */
:root{
  --vms-bg:#0B0C0A;
  --vms-fg:#fff;
  --vms-word:var(--sign-yellow);
  --vms-line:var(--vms-word);
}
.sign{ overflow:hidden; }
.sign::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:linear-gradient(105deg, rgb(255 255 255 / 0) 38%, rgb(255 255 255 / .3) 50%, rgb(255 255 255 / 0) 62%); translate:-110% 0; }
.vms{ position:relative; margin-top:16px; padding:13px 14px 12px; border-radius:11px; background:var(--vms-bg); color:var(--vms-fg);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .12); }
.vms__label{ display:flex; align-items:center; gap:8px; margin:0; font:700 12.5px/1 var(--sans); letter-spacing:.03em; color:rgb(255 255 255 / .7); }
.vms__label::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--vms-line); }
.vms__word{ position:relative; margin:8px 0 0; height:1.04em; overflow:hidden; white-space:nowrap; color:var(--vms-word);
  font:900 var(--vms-size, clamp(24px,7.6vw,38px))/1.04 var(--sans); letter-spacing:.005em; text-transform:uppercase; }
.vms__now{ position:absolute; left:0; top:0; display:block; white-space:nowrap; }
.vms__ch{ display:inline-block; }
.vms__now.is-in .vms__ch{ animation:vmsIn .58s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i) * 24ms + 270ms); }
.vms__now.is-out .vms__ch{ animation:vmsOut .32s cubic-bezier(.6,.05,.9,.4) both; animation-delay:calc(var(--i) * 15ms); }
@keyframes vmsIn{ from{ translate:0 108%; opacity:0; } }
@keyframes vmsOut{ to{ translate:0 -108%; opacity:.1; } }
.vms__road{ display:flex; align-items:center; gap:9px; height:18px; margin-top:12px; }
.vms__l{ flex:none; display:grid; place-items:center; width:16px; height:16px; margin-right:8px; padding-top:1px; border-radius:2.5px; background:#fff; color:var(--ring); font:900 12px/1 var(--sans); }
.vms__track{ position:relative; flex:1; height:2px; display:flex; align-items:center; justify-content:space-between;
  background:repeating-linear-gradient(90deg, rgb(255 255 255 / .38) 0 7px, rgb(255 255 255 / 0) 7px 13px); }
.vms__done{ position:absolute; left:0; top:0; width:100%; height:2px; background:var(--vms-line); transform-origin:0 50%; scale:var(--p,0) 1;
  transition:scale .9s cubic-bezier(.5,0,.2,1); }
.vms__stop{ position:relative; z-index:1; width:6px; height:6px; border-radius:50%; background:var(--vms-bg); box-shadow:0 0 0 1.5px rgb(255 255 255 / .6);
  transition:background-color .25s .55s, box-shadow .25s .55s; }
.vms__stop.is-done{ background:var(--vms-line); box-shadow:0 0 0 1.5px var(--vms-line); }
.vms__car{ position:absolute; left:0; top:50%; z-index:2; width:28px; height:15px; margin:-7.5px 0 0 -14px; translate:var(--x,3px) 0;
  transition:translate .9s cubic-bezier(.5,0,.2,1), opacity .22s; }
.vms__car svg{ display:block; width:100%; height:100%; overflow:visible; }
.vms__car-body{ fill:#fff; stroke:var(--vms-bg); stroke-width:1.6; }
.vms__car-roof{ fill:var(--brand); }
.vms__car-lamp{ fill:var(--ring); }
.vms__flag{ position:relative; flex:none; width:15px; height:11px; margin:-6px 1px 0 10px; border-radius:1.5px; transform-origin:0 100%;
  background:conic-gradient(#fff 25%, var(--vms-bg) 0 50%, #fff 0 75%, var(--vms-bg) 0) 0 0 / 7.5px 5.5px; box-shadow:0 0 0 1.5px #fff; }
.vms__flag::before{ content:""; position:absolute; left:-3px; top:-1.5px; width:2px; height:19px; border-radius:1px; background:#fff; }
.vms.is-jump .vms__car,.vms.is-jump .vms__done,.vms.is-jump .vms__stop{ transition:none; }
.vms.is-there .vms__flag{ animation:wave 1.1s var(--ease) 2; }

/* the road band: the school's name, lessons and places painted along the tarmac */
.roadband{ position:relative; overflow:hidden; padding:17px 0 15px; background:var(--hero-ink); color:var(--hero-fg); }
.roadband::before,.roadband::after{ content:""; position:absolute; left:0; right:0; height:2px; background:rgb(var(--hero-fg-rgb) / .9); }
.roadband::before{ top:6px; } .roadband::after{ bottom:6px; }
.roadband__row{ display:flex; width:max-content; translate:var(--rb,0px) 0; }
.roadband__row span{ display:flex; align-items:center; white-space:nowrap; font:900 clamp(21px,6vw,32px)/1 var(--sans); letter-spacing:.012em; text-transform:uppercase; }
.roadband__row span::after{ content:""; width:38px; height:5px; margin-inline:20px; border-radius:1px; background:var(--vms-line); }

@media (prefers-reduced-motion:no-preference){
  .lesson-journey .identity{ animation:jIn .55s var(--ease) both; }
  .hero__photo img{ animation:jZoom 1.5s var(--ease) both; }
  .sign{ animation:jSign .7s .06s cubic-bezier(.2,.9,.25,1.06) both; }
  .sign::after{ animation:jSheen 1.15s .75s cubic-bezier(.3,.1,.3,1) both; }
  .sign__kicker{ animation:jUp .6s .16s var(--ease) both; }
  .hero__title{ animation:jUp .65s .22s var(--ease) both; }
  .sign__dest{ animation:jUp .6s .3s var(--ease) both; }
  .vms{ animation:jIn .6s .42s var(--ease) both; }
  .vms__label::before{ animation:vmsLamp 2.5s 1.4s ease-in-out infinite; }
  .hero__actions .btn{ animation:jIn .55s .5s var(--ease) both; }
  .hero__actions .btn + .btn{ animation-delay:.58s; }
  .hero__lead{ animation:jIn .55s .62s var(--ease) both; }
  .hero .roundel b{ animation:pop .6s .7s var(--spring) both; }
  .hero .roundel:nth-child(2) b{ animation-delay:.8s; } .hero .roundel:nth-child(3) b{ animation-delay:.9s; }
}
@keyframes jIn{ from{ opacity:0; translate:0 14px; } }
@keyframes jUp{ from{ translate:0 12px; } }
@keyframes jSign{ from{ opacity:0; translate:0 28px; scale:.985; } }
@keyframes jZoom{ from{ scale:1.1; } }
@keyframes jSheen{ 0%{ opacity:1; translate:-110% 0; } 100%{ opacity:1; translate:110% 0; } }
@keyframes vmsLamp{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@media (min-width:900px){
  .vms{ margin-top:22px; padding:18px 20px 17px; border-radius:13px; }
  .vms__label{ font-size:14px; }
  .vms__word{ font-size:var(--vms-size, clamp(34px,3.6vw,52px)); margin-top:10px; }
  .vms__road{ margin-top:16px; }
  .roadband{ padding:22px 0 20px; }
  .roadband::before{ top:8px; } .roadband::after{ bottom:8px; }
  .roadband__row span{ font-size:38px; }
  .roadband__row span::after{ width:56px; height:6px; margin-inline:30px; }
}

/* --- v2: section headings rise out of a mask, word by word (the same word spans the
   earlier fade used; app.js wraps them) ------------------------------------------------- */
.lesson-word{ overflow:hidden; vertical-align:bottom; padding:.1em .07em .17em; margin:-.1em -.07em -.17em; }
@media (prefers-reduced-motion:no-preference){
  html.app .lesson-journey .reveal .lesson-word__text{ translate:0 115%; }
  html.app .lesson-journey .reveal.is-in .lesson-word__text{ translate:0 0; animation:wordRise .9s cubic-bezier(.16,1,.3,1) both; animation-delay:var(--word-delay,0ms); }
}
@keyframes wordRise{ from{ translate:0 115%; } to{ translate:0 0; } }

/* --- v2: the route. A list whose stops are numbered junctions on a road down the side;
   app.js fills each stretch of road as it scrolls past the reading line and turns the
   junction the brand's colour. Without .is-live (no JS, reduced motion) it is all drawn. -- */
.route{ list-style:none; margin:0; padding:0; counter-reset:route; }
.route__stop{ position:relative; display:grid; grid-template-columns:32px minmax(0,1fr); column-gap:16px; counter-increment:route; }
.route__stop:not(:last-child)::before,.route__stop:not(:last-child)::after{ content:""; position:absolute; top:34px; bottom:2px; }
.route__stop:not(:last-child)::before{ left:15px; width:2px; background:repeating-linear-gradient(180deg, var(--line-2) 0 8px, rgb(0 0 0 / 0) 8px 15px); }
.route__stop:not(:last-child)::after{ left:14px; width:4px; border-radius:2px; background:var(--brand); transform-origin:50% 0; scale:1 var(--seg,1); }
.route__n{ position:relative; z-index:1; display:grid; place-items:center; width:32px; height:32px; padding-top:1px; border-radius:6px;
  background:var(--brand); color:var(--on-brand); font:800 14px/1 var(--sans); box-shadow:inset 0 0 0 2px var(--on-brand), 0 0 0 1px var(--brand);
  transition:background-color .35s, color .35s, box-shadow .35s; }
.route__n::before{ content:counter(route); }
.route.is-live .route__stop:not(.is-passed) .route__n{ background:var(--junction); color:#fff; box-shadow:inset 0 0 0 2px #fff, 0 0 0 1px var(--junction); }
.route__stop--end{ counter-increment:none; }
.route__n--flag{ background:conic-gradient(var(--hero-ink) 25%, #fff 0 50%, var(--hero-ink) 0 75%, #fff 0) 0 0 / 16px 16px !important; box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--hero-ink) !important; border-radius:4px; transform-origin:0 100%; }
.route__n--flag::before{ content:none; }
.route.is-live .route__stop--end.is-passed .route__n--flag{ animation:wave 1.1s var(--ease) 2; }

/* --- v2: the learner guide, chapters on the route -------------------------------------- */
.guide{ background:var(--ink); border-top:1px solid var(--line); }
.chapter{ padding-bottom:48px; scroll-margin-top:calc(var(--nav-h) + 16px); }
.chapter:last-child{ padding-bottom:0; }
.chapter__kicker{ margin:6px 0 10px; font:700 13.5px/1.4 var(--sans); letter-spacing:.01em; color:var(--fg-2); }
.chapter__lead{ margin:12px 0 0; max-width:56ch; color:var(--fg-2); font-size:16px; line-height:1.62; }
.rows{ margin-top:22px; border-top:2px solid var(--fg); }
.row{ border-bottom:1px solid var(--line-2); }
.row summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px; padding:14px 0; cursor:pointer;
  font:750 17px/1.3 var(--sans); -webkit-tap-highlight-color:transparent; }
.row summary::-webkit-details-marker{ display:none; }
.row summary small{ display:block; margin-bottom:4px; font:600 12.5px/1.3 var(--sans); color:var(--fg-2); }
.row summary i{ position:relative; flex:none; width:32px; height:32px; border-radius:50%; background:var(--ink-3); transition:background-color .25s, color .25s; }
.row summary i::before,.row summary i::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; margin:-1px 0 0 -6px; background:currentColor; transition:rotate .3s var(--ease); }
.row summary i::after{ rotate:90deg; }
.row[open] summary i{ background:var(--brand); color:var(--on-brand); }
.row[open] summary i::after{ rotate:0deg; }
.row__a{ padding:0 0 22px; }
.row__a p{ margin:0; max-width:64ch; color:var(--fg-2); font-size:16px; line-height:1.68; }
.row__a .row__note{ margin-top:14px; padding-left:14px; border-left:3px solid var(--brand); color:var(--fg); font-weight:600; line-height:1.55; }
.row__note b{ display:block; margin-bottom:3px; font-size:12.5px; font-weight:700; color:var(--fg-2); }
.row[open] .row__a{ animation:rowOpen .45s var(--ease); }
@keyframes rowOpen{ from{ opacity:0; translate:0 -8px; } }
.chapter__link{ margin-top:22px; }
.chapter .guide-resources,.chapter .plan-message{ position:static; margin-top:26px; }

/* --- v2: test day, on the tarmac ----------------------------------------------------- */
.testday{ background:var(--hero-ink); color:var(--hero-fg); }
.testday .label{ color:var(--hero-fg-2); }
.testday .label::before{ background:var(--hero-brand-display); box-shadow:0 0 0 4px rgb(var(--hero-fg-rgb) / .12); }
.testday .d-lg i{ color:var(--hero-brand-display); }
.testday .lede{ color:var(--hero-fg-2); }
.testday__facts{ margin:0 0 40px; max-width:460px; }
.testday .roundel b{ width:min(104px,27vw); font-size:clamp(22px,6.6vw,30px); border-width:clamp(8px,2.4vw,11px); animation:none; }
.testday .roundel span{ max-width:15ch; font-size:13.5px; color:var(--hero-fg-2); }
html.app .testday__facts.reveal .roundel b{ scale:.5; opacity:0; }
html.app .testday__facts.reveal.is-in .roundel b{ scale:1; opacity:1; animation:pop .65s var(--spring) both; animation-delay:.1s; }
html.app .testday__facts.reveal.is-in .roundel:nth-child(2) b{ animation-delay:.22s; }
html.app .testday__facts.reveal.is-in .roundel:nth-child(3) b{ animation-delay:.34s; }
.testday__in{ display:grid; gap:40px; }
.stage{ padding-bottom:28px; }
.stage:last-child{ padding-bottom:0; }
.stage__title{ margin:4px 0 0; font:800 19px/1.25 var(--sans); letter-spacing:-.01em; }
.stage p{ margin:6px 0 0; max-width:54ch; color:var(--hero-fg-2); font-size:16px; line-height:1.6; }
.testday .route__stop:not(:last-child)::before{ background:repeating-linear-gradient(180deg, rgb(var(--hero-fg-rgb) / .34) 0 8px, rgb(0 0 0 / 0) 8px 15px); }
.testday .route__stop:not(:last-child)::after{ background:var(--hero-brand-display); }
.testday__source{ margin:22px 0 0 48px; font-size:14px; line-height:1.5; color:var(--hero-fg-2); }
.testday__source a{ color:var(--hero-fg); text-underline-offset:4px; }
.testbook{ margin:28px 0 0; padding:22px; border-radius:20px; background:rgb(var(--hero-fg-rgb) / .08); border:2px solid var(--hero-brand-display); display:grid; gap:16px; }
.testbook__flag{ display:none; }
.testbook__title{ margin:0 0 6px; font-size:clamp(20px,5vw,26px); line-height:1.15; color:var(--hero-fg); }
.testbook__txt p{ margin:0; font-size:15px; line-height:1.5; color:var(--hero-fg-2); }
.testbook__btn{ justify-self:start; }
.theory{ align-self:start; padding:26px 22px; border-radius:var(--r); background:rgb(var(--hero-fg-rgb) / .07); border:1px solid rgb(var(--hero-fg-rgb) / .16); }
.theory__title{ margin:0; font:800 21px/1.2 var(--sans); letter-spacing:-.01em; }
.theory__text{ margin:8px 0 0; color:var(--hero-fg-2); font-size:16px; line-height:1.6; }
.plates{ list-style:none; margin:20px 0 22px; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.plate{ padding:13px 13px 11px; border-radius:8px; background:var(--junction); color:#fff; box-shadow:inset 0 0 0 2px #fff, 0 0 0 1px var(--junction); }
.plate b{ display:block; font:900 28px/1 var(--sans); letter-spacing:-.02em; }
.plate span{ display:block; margin-top:6px; font:600 13px/1.3 var(--sans); }
@media (prefers-reduced-motion:reduce){
  html.app .testday__facts.reveal .roundel b{ scale:1; opacity:1; animation:none; }
}
@media (min-width:900px){
  .route__stop{ grid-template-columns:40px minmax(0,1fr); column-gap:28px; }
  .route__n{ width:40px; height:40px; font-size:16px; }
  .route__stop:not(:last-child)::before{ left:19px; top:42px; }
  .route__stop:not(:last-child)::after{ left:18px; top:42px; }
  .chapter{ padding-bottom:88px; }
  .chapter__in{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.1fr); column-gap:72px; align-items:start; }
  .chapter__head{ position:sticky; top:calc(var(--nav-h) + 32px); }
  .chapter__in > :not(.chapter__head){ grid-column:2; }
  .rows{ margin-top:6px; }
  .row summary{ font-size:19px; min-height:68px; }
  .testday__facts{ margin-bottom:64px; max-width:520px; gap:24px; }
  .testday .roundel b{ width:128px; font-size:38px; border-width:13px; }
  .testday .roundel span{ font-size:15px; }
  .testday__in{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:80px; }
  .stage{ padding-bottom:40px; }
  .stage__title{ margin-top:7px; font-size:23px; }
  .stage p{ font-size:17px; }
  .testday__source{ margin-left:68px; }
  .theory{ position:sticky; top:calc(var(--nav-h) + 32px); padding:34px 32px; }
  .plate b{ font-size:34px; }
}
@media (prefers-reduced-motion:reduce){ .chapter__head,.theory{ position:static; } }

/* --- v2: the statement reads itself with the scroll (app.js marks the words) ------------- */
.school__statement.is-live .lit{ opacity:.26; transition:opacity .4s var(--ease); }
.school__statement.is-live .lit.is-lit{ opacity:1; }

/* The shared script writes --hs on <html> every scroll frame while the hero leaves (Apex reads it).
   Journey does not: registered as non-inheriting, that write no longer restyles the whole page. */
@property --hs{ syntax:'<number>'; inherits:false; initial-value:0; }

/* Double-check pass, 2026-10-10: the place under the name in the dark footer was 3.07:1 (axe); now the footer's own secondary tone. */
.footer .brand__sub{ color:var(--hero-fg-2); }

/* Looked at again, 2026-10-10. A roundel whose value is a word ("Manual", "Pre 17") is set smaller so it
   stays inside the ring. The form's selects are drawn like its inputs in every browser (Safari showed
   its own small control), with a caret made of the page's own tone. */
.roundels .roundel--long b{ font-size:clamp(12.5px,3.5vw,14.5px); letter-spacing:-.03em; }
@media (min-width:900px){ .roundels .roundel--long b{ font-size:16px; } }
.lesson-journey .field select{ -webkit-appearance:none; appearance:none; padding-right:44px; color:var(--fg); background-color:var(--ink);
  background-image:linear-gradient(45deg, rgb(0 0 0 / 0) 50%, var(--fg-2) 50%), linear-gradient(135deg, var(--fg-2) 50%, rgb(0 0 0 / 0) 50%);
  background-position:calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; }
.socialbtn{ margin-top:14px; gap:10px; } .socialbtn svg{ width:20px; height:20px; flex:none; }
.testbook__btn{ background:#fff; color:#021A44; box-shadow:0 8px 24px rgb(0 0 0 / .35); }
/* Facebook's pressed blue: white on #1877F2 is 4.23:1, under AA (2026-10-13) */
.socialbtn{ background:#166FE5; border-color:#166FE5; color:#fff; }
.fbpill{ display:inline-flex; align-items:center; gap:10px; margin-top:14px; padding:10px 18px 10px 12px; min-height:44px; border-radius:999px; background:#166FE5; color:#fff; font-weight:700; font-size:15px; text-decoration:none; box-shadow:0 6px 18px rgb(24 119 242 / .35); }
.fbpill svg{ width:22px; height:22px; flex:none; }
.gallery__more{ margin:28px 0 0; text-align:center; }
.gallery__more .socialbtn{ margin:0; display:inline-flex; align-items:center; justify-content:center; }