/* ==========================================================================
   BLOCK — one-page site template, layout 4. For gyms.
   Drawn from a family of UK independent sites (a 24/7 gym, a coffee bar): bone paper
   and near-black bands in turn, one poster face in capitals, square buttons, a small
   kicker in the brand colour, membership cards, a closing band in the brand colour.

   Built on Grid's skeleton — the base below is Grid's stylesheet, so the nav, drawer,
   form, lightbox and timetable keep every fix made there — and the BLOCK section at
   the end sets the look. DO NOT EDIT PER CLIENT: colour comes from css/brand.css.
   Best on "ground": "warm" or "light", with "dark" naming the band colour.
   ========================================================================== */

/* ==========================================================================
   GRID — one-page site template, layout 2 of 2.
   Ported from Limitless Lab variation 1. Split hero with a stack of photo cards,
   heavy sans display, announcement bar, marquee and stat band.

   Chosen over Floodlight when a client's photographs are good but not big: the
   largest card here is 44vw, where Floodlight stretches one image across 100vw.

   DO NOT EDIT PER CLIENT. Colour comes from css/brand.css, which loads after this
   file; every colour below is a token so light and dark grounds both work.
   ========================================================================== */

:root{
  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 32px; --pill: 999px;
  --wrap: 1200px;
  --gut: clamp(20px, 5vw, 48px);
  --sect: clamp(64px, 8vw, 108px);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Colour fallbacks only — css/brand.css loads after this file and replaces
     every one of them, including in light mode. */
  --brand:#37A65A; --brand-rgb:55 166 90; --brand-lift:#4FC275; --brand-deep:#1E6B39;
  --accent:#37A65A; --accent-rgb:55 166 90; --accent-lift:#6FD693;
  --accent-mist:rgb(var(--accent-rgb) / .16); --on-brand:#04170B;
  --ink:#07090A; --ink-2:#0C1012; --ink-3:#12171A; --ink-4:#191F22; --ink-rgb:7 9 10;
  --fg:#F1F5F3; --fg-2:#A7B1AD; --fg-3:#6C7873; --fg-rgb:241 245 243;
  --line:rgb(var(--fg-rgb) / .085); --line-2:rgb(var(--fg-rgb) / .16);
  --shade:rgba(0,0,0,.95);
  --serif:'Archivo','Helvetica Neue',Arial,sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.03;
  margin:0;
}
p{ margin:0; }
::selection{ background:var(--brand); color:var(--on-brand); }
:focus-visible{ outline:2px solid var(--brand-lift); outline-offset:3px; border-radius:6px; }

/* --- layout helpers ------------------------------------------------------ */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--sect); position:relative; }
.center{ text-align:center; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- eyebrow / pill badges ---------------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 11px;
  border:1px solid var(--line-2);
  border-radius:var(--pill);
  background:rgb(var(--fg-rgb) / .03);
  font-size:12.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--fg-2);
  backdrop-filter:blur(8px);
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 4px rgb(var(--brand-rgb) / .12);
  animation:pulseDot 2.4s var(--ease) infinite;
}
@keyframes pulseDot{
  0%,100%{ box-shadow:0 0 0 3px rgb(var(--brand-rgb) / .12); }
  50%    { box-shadow:0 0 0 8px rgb(var(--brand-rgb) / 0); }
}
.eyebrow--green{ border-color:rgb(var(--brand-rgb) / .42); background:rgb(var(--brand-rgb) / .10); color:var(--accent-lift); }

/* --- headings ------------------------------------------------------------ */
.h-xl{ font-size:clamp(38px, 6.6vw, 74px); }
.h-lg{ font-size:clamp(32px, 5vw, 58px); }
.h-md{ font-size:clamp(24px, 3.2vw, 38px); }
.h-sm{ font-size:clamp(19px, 2vw, 23px); letter-spacing:-.02em; }
.tint{ color:var(--brand); }
.lede{
  font-size:clamp(16px, 1.45vw, 19px);
  color:var(--fg-2);
  line-height:1.65;
  max-width:58ch;
}
.section-head{ max-width:760px; margin-inline:auto; }
.section-head .eyebrow{ margin-bottom:22px; }
.section-head h2{ margin-bottom:18px; }
.section-head .lede{ margin-inline:auto; }

/* --- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px;
  border-radius:var(--pill);
  font-family:var(--serif);
  font-size:15px; font-weight:700; letter-spacing:-.01em;
  white-space:nowrap;
  transition:transform .25s var(--ease), background-color .25s var(--ease),
             box-shadow .3s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn svg{ width:17px; height:17px; flex:none; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--primary{
  background:var(--brand);
  color:var(--on-brand);                       /* dark ink on green = 6:1 contrast */
  box-shadow:0 6px 24px -8px rgb(var(--brand-rgb) / .30), inset 0 1px 0 rgb(var(--fg-rgb) / .22);
}
.btn--primary:hover{ background:var(--brand-lift); box-shadow:0 14px 38px -10px rgb(var(--brand-rgb) / .30); }

.btn--ghost{
  background:rgb(var(--fg-rgb) / .045);
  border:1px solid var(--line-2);
  color:var(--fg);
}
.btn--ghost:hover{ background:rgb(var(--fg-rgb) / .09); border-color:rgb(var(--fg-rgb) / .28); }

.btn--wa{
  background:rgb(var(--fg-rgb) / .045);
  border:1px solid var(--line-2);
  color:var(--fg);
}
.btn--wa svg{ color:#25D366; }
.btn--wa:hover{ background:rgba(37,211,102,.12); border-color:rgba(37,211,102,.45); }

.btn--sm{ padding:11px 18px; font-size:13.5px; }
.btn--lg{ padding:18px 32px; font-size:16.5px; }
.btn--block{ width:100%; }

.textlink{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:600; font-size:14.5px; color:var(--brand-lift);
  transition:gap .25s var(--ease), color .25s var(--ease);
}
.textlink:hover{ gap:12px; color:var(--accent-lift); }

/* --- ambient background art ---------------------------------------------- */
.glow{
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  filter:blur(90px); opacity:.5;
  background:radial-gradient(circle, rgb(var(--brand-rgb) / .30) 0%, transparent 68%);
}
.grid-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgb(var(--fg-rgb) / .028) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--fg-rgb) / .028) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 80%);
}

/* ==========================================================================
   ANNOUNCEMENT BAR + NAV
   ========================================================================== */
.topbar{
  background:linear-gradient(90deg, var(--brand-deep), var(--brand) 55%, var(--brand-deep));
  color:var(--on-brand);
  font-size:13px; font-weight:600; letter-spacing:.01em;
  text-align:center; padding:9px var(--gut);
  position:relative; z-index:60;
}
.topbar a{ text-decoration:underline; text-underline-offset:3px; font-weight:700; }
.topbar .tb-sep{ opacity:.55; padding-inline:7px; }

.nav{
  position:sticky; top:0; z-index:50;
  background:rgb(var(--ink-rgb) / .72);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--line); background:rgb(var(--ink-rgb) / .9); }
.nav__in{
  display:flex; align-items:center; gap:15px;
  height:72px;
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
}
.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.brand img{ height:40px; width:auto; max-width:120px; object-fit:contain; }  /* a wide mark keeps its shape (2026-09-30: was forced to 40x40) */
@media (max-width:420px){ .brand img{ max-width:84px; } }
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--serif); font-weight:900; font-size:16px; letter-spacing:-.02em; white-space:nowrap; }
.brand__sub{ font-size:9.5px; font-weight:700; letter-spacing:.34em; color:var(--brand); margin-top:3px; }

.nav__links{ display:flex; align-items:center; gap:4px; }
.nav__links a{
  padding:8px 11px; border-radius:var(--pill); white-space:nowrap;
  font-size:14px; font-weight:500; color:var(--fg-2);
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.nav__links a:hover{ color:var(--fg); background:rgb(var(--fg-rgb) / .055); }
.nav__cta{ display:flex; align-items:center; gap:10px; }

.burger{ display:none; width:42px; height:42px; border:1px solid var(--line-2); border-radius:12px; align-items:center; justify-content:center; }
.burger span{ display:block; width:17px; height:1.8px; background:var(--fg); border-radius:2px; position:relative; transition:.3s var(--ease); }
.burger span::before,.burger span::after{ content:''; position:absolute; left:0; width:17px; height:1.8px; background:var(--fg); border-radius:2px; transition:.3s var(--ease); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger.is-open span{ background:transparent; }
.burger.is-open span::before{ top:0; transform:rotate(45deg); }
.burger.is-open span::after{ top:0; transform:rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:45;
  background:rgb(var(--ink-rgb) / .97);
  backdrop-filter:blur(20px);
  padding:104px var(--gut) 40px;
  display:flex; flex-direction:column; gap:6px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .3s var(--ease), transform .35s var(--ease), visibility .3s;
}
.drawer.is-open{ opacity:1; visibility:visible; transform:none; }
.drawer a{
  font-family:var(--serif); font-size:26px; font-weight:700; letter-spacing:-.025em;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.drawer .btn{ margin-top:26px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:relative; padding-top:clamp(52px,7vw,84px); padding-bottom:clamp(48px,6vw,72px); overflow:hidden; }
.hero .glow--a{ width:760px; height:760px; top:-320px; left:-180px; }
.hero .glow--b{ width:560px; height:560px; top:-140px; right:-200px; opacity:.34; }
.hero__in{ position:relative; z-index:1; display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(34px,5vw,72px); align-items:center; }
.hero h1{ margin:24px 0 22px; }
.hero h1 i,.hero h1 em{ font-style:normal; color:var(--accent-lift); }
.h-lg i,.h-lg em,.h-md i,.h-md em{ font-style:normal; color:var(--accent-lift); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 26px; }

.trustrow{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; }
.trustrow__item{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--fg-2); font-weight:500; }
.trustrow__item svg{ width:16px; height:16px; color:var(--brand); flex:none; }

/* photo stack */
.stack{ position:relative; aspect-ratio:1/1.08; }
.stack__main{
  position:absolute; inset:0;
  border-radius:var(--r-xl);
  overflow:hidden;
  border:1px solid var(--line-2);
  box-shadow:0 44px 90px -34px var(--shade), 0 0 0 1px rgb(var(--brand-rgb) / .10);
}
.stack__main img{ width:100%; height:100%; object-fit:cover; object-position:50% 34%; }
.stack__main::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgb(var(--ink-rgb) / .82) 0%, rgb(var(--ink-rgb) / .12) 42%, transparent 68%);
}
.stack__badge{
  position:absolute; z-index:3; top:18px; right:18px;
  display:flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:var(--pill);
  background:rgb(var(--ink-rgb) / .66);
  border:1px solid var(--line-2);
  backdrop-filter:blur(14px);
  font-size:13px; font-weight:600;
}
.stack__badge .stars{ color:var(--brand); letter-spacing:1px; font-size:12px; }
.stack__chip{
  position:absolute; z-index:3; left:18px; right:auto; bottom:18px; max-width:74%;
  display:flex; align-items:center; gap:13px;
  padding:14px 16px; border-radius:var(--r);
  background:rgb(var(--ink-rgb) / .78);
  border:1px solid var(--line-2);
  backdrop-filter:blur(16px);
}
.stack__chip > .ic{
  width:38px; height:38px; flex:none; border-radius:11px;
  background:rgb(var(--brand-rgb) / .16); border:1px solid rgb(var(--brand-rgb) / .34);
  display:grid; place-items:center; color:var(--brand);
}
.stack__chip > .ic svg{ width:18px; height:18px; }
.stack__chip strong{ display:block; font-size:14px; font-weight:700; letter-spacing:-.01em; }
.stack__chip > span:last-child > span{ display:block; font-size:12.5px; color:var(--fg-2); }
.stack__float{
  position:absolute; z-index:2; width:34%; aspect-ratio:3/4;
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line-2);
  box-shadow:0 26px 52px -22px var(--shade);
}
.stack__float img{ width:100%; height:100%; object-fit:cover; }
.stack__float--tl{ top:-26px; left:-38px; animation:bobA 7s ease-in-out infinite; }
.stack__float--br{ bottom:-30px; right:-34px; width:30%; animation:bobB 8.5s ease-in-out infinite; }
@keyframes bobA{ 0%,100%{ transform:translateY(0) rotate(-3.5deg);} 50%{ transform:translateY(-12px) rotate(-3.5deg);} }
@keyframes bobB{ 0%,100%{ transform:translateY(0) rotate(3deg);} 50%{ transform:translateY(-14px) rotate(3deg);} }

/* ==========================================================================
   PHOTO MARQUEE  (Fastlane's logo wall → real session photography)
   ========================================================================== */
.marquee{ position:relative; padding-block:clamp(28px,4vw,44px); overflow:hidden; }
.marquee__track{ display:flex; gap:14px; width:max-content; animation:slide 62s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.marquee__cell{
  width:clamp(150px,17vw,214px); aspect-ratio:3/4; flex:none;
  border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  filter:grayscale(.34) brightness(.86);
  transition:filter .45s var(--ease), transform .45s var(--ease);
}
.marquee__cell img{ width:100%; height:100%; object-fit:cover; }
.marquee__cell:hover{ filter:none; transform:translateY(-6px) scale(1.02); }
.marquee::before,.marquee::after{
  content:''; position:absolute; top:0; bottom:0; width:clamp(60px,12vw,190px); z-index:2; pointer-events:none;
}
.marquee::before{ left:0;  background:linear-gradient(90deg, var(--ink), transparent); }
.marquee::after{  right:0; background:linear-gradient(270deg, var(--ink), transparent); }

/* credentials bar */
.creds{ border-block:1px solid var(--line); background:var(--ink-2); }
.creds__in{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 34px; padding-block:24px; }
.creds__item{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--fg-2); letter-spacing:.01em; }
.creds__item svg{ width:17px; height:17px; color:var(--brand); flex:none; }

/* ==========================================================================
   PROGRAMME CARDS
   ========================================================================== */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:20px; margin-top:clamp(38px,5vw,58px);
}
.card{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--ink-3), var(--ink-2));
  overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{ transform:translateY(-6px); border-color:rgb(var(--brand-rgb) / .36); box-shadow:0 30px 60px -34px var(--shade); }
.card__media{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.card__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 46%; transition:transform .7s var(--ease); }
.card:hover .card__media img{ transform:scale(1.05); }
.card__media::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, var(--ink-3) 2%, rgb(var(--ink-rgb) / .18) 55%, transparent); }
.card__tag{
  position:absolute; z-index:2; top:14px; left:14px;
  padding:6px 12px; border-radius:var(--pill);
  background:rgb(var(--ink-rgb) / .72); border:1px solid var(--line-2); backdrop-filter:blur(10px);
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-lift);
}
.card__body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; gap:13px; }
.card__body h3{ font-size:21px; }
.card__body p{ font-size:14.5px; color:var(--fg-2); line-height:1.6; }
.card__meta{ display:flex; align-items:baseline; gap:8px; padding-top:2px; }
.card__price{ font-family:var(--serif); font-size:23px; font-weight:800; color:var(--brand); letter-spacing:-.02em; }
.card__per{ font-size:12.5px; color:var(--fg-3); }
.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.ticks li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--fg-2); }
.ticks li svg{ width:15px; height:15px; color:var(--brand); flex:none; margin-top:4px; }
.card .textlink{ margin-top:auto; padding-top:6px; }

/* ==========================================================================
   HOW IT WORKS — alternating numbered steps
   ========================================================================== */
.steps{ display:grid; gap:clamp(52px,7vw,96px); margin-top:clamp(44px,6vw,72px); }
.step{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; }
.step:nth-child(even) .step__media{ order:-1; }
.step__num{
  font-family:var(--serif); font-size:clamp(52px,7vw,86px); font-weight:900;
  line-height:.85; letter-spacing:-.05em;
  background:linear-gradient(180deg, var(--brand) 8%, rgb(var(--brand-rgb) / .14) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:14px;
}
.step h3{ font-size:clamp(23px,2.8vw,32px); margin-bottom:14px; }
.step p{ font-size:15.5px; color:var(--fg-2); line-height:1.68; max-width:46ch; }
.step__media{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); aspect-ratio:4/3;
  box-shadow:0 34px 70px -40px var(--shade);
}
.step__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 36%; }
.step__media::after{ content:''; position:absolute; inset:0; background:linear-gradient(140deg, transparent 46%, rgb(var(--brand-rgb) / .12)); }

/* ==========================================================================
   STATS BAND
   ========================================================================== */
.stats{ border-block:1px solid var(--line); background:linear-gradient(180deg, var(--ink-2), var(--ink)); }
.stats__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:34px 20px; padding-block:clamp(44px,6vw,64px); }
.stat{ text-align:center; }
.stat__n{ font-family:var(--serif); font-size:clamp(36px,5vw,54px); font-weight:900; letter-spacing:-.04em; color:var(--brand); line-height:1; }
.stat__l{ margin-top:9px; font-size:13px; color:var(--fg-2); letter-spacing:.04em; }

/* ==========================================================================
   BENTO — why parents choose the Lab
   ========================================================================== */
.bento{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  margin-top:clamp(38px,5vw,58px);
}
.tile{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--ink-3), var(--ink-2));
  padding:26px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:10px;
  min-height:216px;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.tile:hover{ border-color:rgb(var(--brand-rgb) / .34); transform:translateY(-4px); }
.tile h3{ font-size:19px; }
.tile p{ font-size:14px; color:var(--fg-2); line-height:1.6; }
.tile__ic{
  width:42px; height:42px; border-radius:12px; margin-bottom:auto;
  background:rgb(var(--brand-rgb) / .14); border:1px solid rgb(var(--brand-rgb) / .3);
  display:grid; place-items:center; color:var(--brand);
}
.tile__ic svg{ width:20px; height:20px; }
.tile--wide{ grid-column:span 2; }
.tile--tall{ grid-row:span 2; min-height:452px; }
.tile--photo{ padding:0; border:1px solid var(--line); }
.tile--photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 46%; transition:transform .8s var(--ease); }
.tile--wide.tile--photo{ min-height:290px; }
.tile--photo:hover img{ transform:scale(1.05); }
.tile--photo .tile__cap{
  position:relative; z-index:2; margin-top:auto; padding:26px;
  background:linear-gradient(to top, rgb(var(--ink-rgb) / .98) 46%, rgb(var(--ink-rgb) / .86) 74%, rgb(var(--ink-rgb) / .10) 100%);
  text-shadow:0 1px 12px rgb(var(--ink-rgb) / .85);
}
.tile--photo .tile__cap h3{ margin-bottom:6px; }

/* ==========================================================================
   PRICING / TIMETABLE
   ========================================================================== */
/* --- what we offer: three short notes under the timetable ---------------- */
.offers{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px; }
.offer{
  border:1px solid var(--line); border-radius:var(--r); padding:24px;
  background:linear-gradient(180deg, var(--ink-3), var(--ink-2));
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.offer:hover{ border-color:rgb(var(--brand-rgb) / .34); transform:translateY(-3px); }
.offer b{ display:block; font-family:var(--serif); font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--brand); margin-bottom:8px; }
.offer p{ font-size:14.5px; color:var(--fg-2); line-height:1.6; }

/* timetable */
.timetable{ margin-top:clamp(34px,4vw,48px); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--ink-2); }
.timetable__head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  padding:20px 24px; border-bottom:1px solid var(--line); background:var(--ink-3);
}
.timetable__head h3{ font-size:18px; }
.tt-scroll{ overflow-x:auto; }
table.tt{ width:100%; border-collapse:collapse; min-width:620px; }
table.tt th,table.tt td{ padding:15px 24px; text-align:left; font-size:14.5px; border-bottom:1px solid var(--line); }
table.tt th{ font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--fg-3); background:rgb(var(--fg-rgb) / .018); }
table.tt tr:last-child td{ border-bottom:0; }
table.tt td:first-child{ font-family:var(--serif); font-weight:700; letter-spacing:-.01em; }
table.tt tbody tr{ transition:background-color .25s var(--ease); }
table.tt tbody tr:hover{ background:rgb(var(--brand-rgb) / .05); }
.chip{
  display:inline-block; padding:4px 11px; border-radius:var(--pill);
  background:rgb(var(--brand-rgb) / .14); border:1px solid rgb(var(--brand-rgb) / .3);
  font-size:12px; font-weight:600; color:var(--accent-lift); white-space:nowrap;
}
.chip--muted{ background:rgb(var(--fg-rgb) / .05); border-color:var(--line-2); color:var(--fg-2); }

/* ==========================================================================
   GALLERY + LIGHTBOX
   ========================================================================== */
.gallery{
  columns:4 220px; column-gap:16px; margin-top:clamp(38px,5vw,56px);
}
.gallery figure{
  break-inside:avoid; margin:0 0 16px;
  border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  position:relative; cursor:zoom-in;
  transition:transform .45s var(--ease), border-color .45s var(--ease);
}
.gallery figure:hover{ transform:translateY(-5px); border-color:rgb(var(--brand-rgb) / .4); }
.gallery img{ width:100%; height:auto; }
.gallery figure::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgb(var(--ink-rgb) / .5), transparent 45%);
  opacity:0; transition:opacity .4s var(--ease);
}
.gallery figure:hover::after{ opacity:1; }

.lightbox{
  position:fixed; inset:0; z-index:90;
  background:rgb(var(--ink-rgb) / .95); backdrop-filter:blur(10px);
  display:grid; place-items:center; padding:clamp(16px,4vw,48px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:100%; max-height:86vh; border-radius:var(--r); box-shadow:0 40px 90px -30px #000; }
.lightbox__close,.lightbox__nav{
  position:absolute; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--line-2); background:rgb(var(--fg-rgb) / .06);
  display:grid; place-items:center; color:var(--fg);
  transition:background-color .25s var(--ease), transform .25s var(--ease);
}
.lightbox__close:hover,.lightbox__nav:hover{ background:rgb(var(--fg-rgb) / .14); transform:scale(1.06); }
.lightbox__close{ top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px); }
.lightbox__nav svg,.lightbox__close svg{ width:19px; height:19px; }
.lightbox__nav--prev{ left:clamp(10px,2.5vw,28px); top:50%; transform:translateY(-50%); }
.lightbox__nav--next{ right:clamp(10px,2.5vw,28px); top:50%; transform:translateY(-50%); }
.lightbox__nav--prev:hover{ transform:translateY(-50%) scale(1.06); }
.lightbox__nav--next:hover{ transform:translateY(-50%) scale(1.06); }
.lightbox__count{ position:absolute; bottom:clamp(14px,3vw,28px); left:50%; transform:translateX(-50%); font-size:13px; color:var(--fg-2); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.quotes{ position:relative; overflow:hidden; }
.quotes__rail{
  display:flex; gap:18px; margin-top:clamp(38px,5vw,54px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-inline:var(--gut); padding-bottom:10px;
  scrollbar-width:none;
}
.quotes__rail::-webkit-scrollbar{ display:none; }
.quote{
  flex:none; width:min(370px,84vw); scroll-snap-align:center;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--ink-3), var(--ink-2));
  padding:26px 26px 24px;
  display:flex; flex-direction:column; gap:16px;
  transition:border-color .4s var(--ease);
}
.quote:hover{ border-color:rgb(var(--brand-rgb) / .3); }
.quote__stars{ color:var(--brand); letter-spacing:2px; font-size:14px; }
.quote p{ font-size:15.5px; line-height:1.66; color:var(--fg); }
.quote__who{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:4px; }
.quote__who > .quote__av{
  width:40px; height:40px; border-radius:50%; flex:none;
  background:rgb(var(--brand-rgb) / .16); border:1px solid rgb(var(--brand-rgb) / .32);
  display:grid; place-items:center;
  font-family:var(--serif); font-weight:800; font-size:14px; color:var(--accent-lift);
}
.quote__who b{ display:block; font-size:14px; }
.quote__who > span:last-child > span{ display:block; font-size:12.5px; color:var(--fg-3); }
.rail-nav{ display:flex; justify-content:center; gap:10px; margin-top:26px; }
.rail-nav button{
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line-2); background:rgb(var(--fg-rgb) / .045);
  display:grid; place-items:center;
  transition:background-color .25s var(--ease), border-color .25s var(--ease);
}
.rail-nav button:hover{ background:rgb(var(--brand-rgb) / .16); border-color:rgb(var(--brand-rgb) / .4); }
.rail-nav svg{ width:17px; height:17px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ max-width:840px; margin:clamp(38px,5vw,54px) auto 0; display:grid; gap:12px; }
.qa{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--ink-2); overflow:hidden;
  transition:border-color .35s var(--ease), background-color .35s var(--ease);
}
.qa.is-open{ border-color:rgb(var(--brand-rgb) / .36); background:var(--ink-3); }
.qa__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 22px; text-align:left;
  font-family:var(--serif); font-size:16.5px; font-weight:700; letter-spacing:-.015em;
}
.qa__ic{
  width:26px; height:26px; flex:none; border-radius:50%;
  border:1px solid var(--line-2); display:grid; place-items:center;
  transition:transform .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
}
.qa__ic svg{ width:12px; height:12px; }
.qa.is-open .qa__ic{ transform:rotate(45deg); background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.qa__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease); }
.qa.is-open .qa__a{ grid-template-rows:1fr; }
.qa__a > div{ overflow:hidden; }
.qa__a p{ padding:0 22px 22px; font-size:15px; color:var(--fg-2); line-height:1.68; max-width:66ch; }

/* ==========================================================================
   BOOKING / CONTACT
   ========================================================================== */
.book{ position:relative; overflow:hidden; }
.book .glow--d{ width:900px; height:640px; bottom:-320px; left:50%; transform:translateX(-50%); opacity:.36; }
.book__in{ position:relative; z-index:1; display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(30px,4.5vw,60px); align-items:start; }
.book h2{ margin-bottom:18px; }

.contacts{ display:grid; gap:12px; margin-top:30px; }
.contact{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--ink-2);
  transition:border-color .3s var(--ease), transform .3s var(--ease), background-color .3s var(--ease);
}
.contact:hover{ border-color:rgb(var(--brand-rgb) / .4); transform:translateX(4px); background:var(--ink-3); }
.contact > .contact__ic{
  width:42px; height:42px; flex:none; border-radius:12px;
  background:rgb(var(--brand-rgb) / .14); border:1px solid rgb(var(--brand-rgb) / .3);
  display:grid; place-items:center; color:var(--brand);
}
.contact > .contact__ic svg{ width:19px; height:19px; }
.contact b{ display:block; font-size:14.5px; }
.contact > span:last-child > span{ display:block; font-size:13px; color:var(--fg-2); }

.form{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--ink-3), var(--ink-2));
  padding:clamp(24px,3vw,34px);
  box-shadow:0 36px 80px -46px var(--shade);
}
.form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field--full{ grid-column:1/-1; }
.field label{ font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3); }
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:rgb(var(--fg-rgb) / .035); color:var(--fg);
  font-family:var(--sans); font-size:15px;
  transition:border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea{ resize:vertical; min-height:104px; }
.field input::placeholder,.field textarea::placeholder{ color:var(--fg-3); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--brand);
  background:rgb(var(--brand-rgb) / .06);
  box-shadow:0 0 0 3px rgb(var(--brand-rgb) / .16);
}
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A7B1AD' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:15px; padding-right:40px;
}
.field select option{ background:var(--ink-3); color:var(--fg); }
.form__foot{ margin-top:20px; display:grid; gap:14px; }
.form__note{ font-size:12.5px; color:var(--fg-3); line-height:1.55; }
.form__ok{
  display:none; padding:15px 18px; border-radius:var(--r-sm);
  background:rgb(var(--brand-rgb) / .13); border:1px solid rgb(var(--brand-rgb) / .4);
  font-size:14.5px; color:var(--accent-lift);
}
.form.is-sent .form__ok{ display:block; }

/* ==========================================================================
   FOOTER + STICKY MOBILE BAR
   ========================================================================== */
.footer{ border-top:1px solid var(--line); background:var(--ink-2); padding-block:clamp(48px,6vw,72px) 30px; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:38px 26px; }
.footer__about p{ font-size:14px; color:var(--fg-2); line-height:1.65; margin-top:18px; max-width:34ch; }
.footer .brand{ margin-right:0; }
.footer h4{ font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-3); margin-bottom:16px; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.footer li a,.footer li span{ font-size:14px; color:var(--fg-2); transition:color .2s var(--ease); }
.footer li a:hover{ color:var(--brand-lift); }
.socials{ display:flex; gap:10px; margin-top:18px; }
.socials a{
  width:38px; height:38px; border-radius:11px;
  border:1px solid var(--line-2); background:rgb(var(--fg-rgb) / .04);
  display:grid; place-items:center; color:var(--fg-2);
  transition:.28s var(--ease);
}
.socials a:hover{ background:rgb(var(--brand-rgb) / .16); border-color:rgb(var(--brand-rgb) / .42); color:var(--accent-lift); transform:translateY(-2px); }
.socials svg{ width:17px; height:17px; }
.footer__bar{
  margin-top:clamp(38px,5vw,56px); padding-top:24px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; align-items:center;
  font-size:12.5px; color:var(--fg-3);
}
.footer__bar nav{ display:flex; flex-wrap:wrap; gap:20px; }
.safeguard{
  margin-top:22px; padding:14px 16px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:rgb(var(--fg-rgb) / .02);
  font-size:12.5px; color:var(--fg-3); line-height:1.6;
}

.mobilebar{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  display:none; gap:10px; padding:11px var(--gut) calc(11px + env(safe-area-inset-bottom));
  background:rgb(var(--ink-rgb) / .92); backdrop-filter:blur(18px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .4s var(--ease);
}
.mobilebar.is-up{ transform:none; }
.mobilebar .btn{ flex:1; padding-block:13px; }

/* ==========================================================================
   SCROLL REVEAL — the original build's signature motion, preserved
   (rise 26px, fade in from a 5px blur over 760ms, cascading stagger)
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(26px); filter:blur(5px); }
.reveal.is-in{
  opacity:1; transform:none; filter:blur(0);
  transition:opacity .76s var(--ease), transform .76s var(--ease), filter .76s var(--ease);
  transition-delay:var(--d, 0ms);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .hero__in{ grid-template-columns:1fr; gap:52px; }
  .stack{ max-width:460px; margin-inline:auto; aspect-ratio:4/5; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .tile--tall{ grid-row:span 1; min-height:300px; }
  .book__in{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__about{ grid-column:1/-1; }
  .gallery{ columns:3 200px; }
}
@media (max-width:1180px){
  /* socials plus six links plus two buttons is too much — drop the phone button */
  .nav__cta .btn--ghost{ display:none; }
}
@media (max-width:860px){
  .nav__links{ display:none; }
  .nav__cta .btn--ghost{ display:none; }
  .burger{ display:flex; }
  .step{ grid-template-columns:1fr; gap:26px; }
  .step:nth-child(even) .step__media{ order:0; }
  .mobilebar{ display:flex; }
  body{ padding-bottom:74px; }
  .gallery{ columns:2 150px; column-gap:12px; }
  .gallery figure{ margin-bottom:12px; }
}
@media (max-width:860px){
  /* the announcement bar has to stay on one line or it eats the fold */
  .topbar .tb-lg{ display:none; }
}
@media (max-width:620px){
  .topbar .tb-md{ display:none; }
  .hero__actions .btn{ flex:1 1 100%; }
  .stack__float--tl{ top:-16px; left:-14px; width:36%; }
  .stack__float--br{ bottom:-16px; right:-12px; width:32%; }
  .bento{ grid-template-columns:1fr; }
  .tile--wide{ grid-column:span 1; }
  .form__grid{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .topbar span:nth-of-type(2), .topbar .opt{ display:none; }
  table.tt th,table.tt td{ padding:13px 16px; }
}

@media (max-width:560px){
  /* the wordmark wrapped to two lines and crowded the CTA — logo mark is enough */
  .nav__in{ height:64px; gap:12px; }
  .brand__txt{ display:none; }
  .nav__cta .btn--primary{ padding:12px 17px; font-size:13.5px; }
  .footer .brand__txt{ display:flex; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; filter:none; }
  .marquee__track{ animation:none; }
}

@media print{
  .nav,.mobilebar,.marquee,.topbar,.lightbox{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* ==========================================================================
   MEET THE TEAM
   ========================================================================== */
.team{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:20px; margin-top:clamp(38px,5vw,58px);
}
.mate{
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg, var(--ink-3), var(--ink-2));
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.mate:hover{ transform:translateY(-6px); border-color:rgb(var(--brand-rgb) / .36); box-shadow:0 30px 60px -34px var(--shade); }
.mate__pic{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.mate__pic img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.mate:hover .mate__pic img{ transform:scale(1.04); }
.mate__pic::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgb(var(--ink-rgb) / .6) 0%, rgb(var(--ink-rgb) / .06) 40%, transparent 62%);
}
.mate__body{ padding:20px 22px 24px; }
.mate__name{ font-family:var(--serif); font-size:21px; font-weight:800; letter-spacing:-.02em; color:var(--brand); }
.mate__role{ margin-top:6px; font-size:14.5px; font-style:italic; color:var(--fg-2); }

/* the third slot — an honest placeholder, not a broken card */
.mate--soon{ border-style:dashed; border-color:rgb(var(--brand-rgb) / .3); background:rgb(var(--brand-rgb) / .03); }
.mate--soon:hover{ transform:translateY(-6px); border-color:rgb(var(--brand-rgb) / .5); }
.mate--soon .mate__pic{
  display:grid; place-items:center;
  background:radial-gradient(ellipse 70% 60% at 50% 45%, rgb(var(--brand-rgb) / .12), transparent 70%);
}
.mate--soon .mate__pic::after{ display:none; }
.mate__soon{ display:grid; place-items:center; gap:16px; text-align:center; padding:20px; }
.mate__ring{
  width:88px; height:88px; border-radius:50%;
  border:1px dashed rgb(var(--brand-rgb) / .55);
  display:grid; place-items:center; position:relative;
}
.mate__ring img{ width:50px; height:50px; opacity:.45; }
.mate__ring span{
  position:absolute; right:-6px; bottom:-6px; width:26px; height:26px; border-radius:50%;
  background:var(--brand); color:var(--on-brand); display:grid; place-items:center; font-size:16px; font-weight:700; line-height:1;
}
.mate__soon p{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-lift); }

@media (max-width:860px){ .team{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .team{ grid-template-columns:1fr; } }

/* ==========================================================================
   SOCIAL LINKS IN THE NAV (top right)
   ========================================================================== */
.navsoc{ display:flex; align-items:center; gap:7px; margin-left:4px; }
.navsoc a{
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line-2); background:rgb(var(--fg-rgb) / .04);
  display:grid; place-items:center; color:var(--fg-2);
  transition:background-color .25s var(--ease), border-color .25s var(--ease),
             color .25s var(--ease), transform .25s var(--ease);
}
.navsoc a:hover{
  background:var(--brand); border-color:var(--brand); color:var(--on-brand);
  transform:translateY(-2px);
}
.navsoc svg{ width:15px; height:15px; }

/* in the mobile drawer, larger and left-aligned under the CTA */
.navsoc--drawer{ display:none; gap:10px; margin-top:26px; }
.navsoc--drawer a{ width:46px; height:46px; }
.navsoc--drawer svg{ width:19px; height:19px; }

@media (max-width:860px){
  .nav__cta .navsoc{ display:none; }   /* no room beside the burger */
  .navsoc--drawer{ display:flex; }
}



/* the section still uses the old wrapper classes for its glow and footnote */
.showreel{ position:relative; overflow:hidden; }
.showreel .glow--c{ width:820px; height:620px; top:12%; left:50%; transform:translateX(-50%); opacity:.3; }
.showreel__meta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px;
  margin-top:24px; font-size:13px; color:var(--fg-3);
}
.showreel__meta b{ color:var(--fg-2); font-weight:600; }

/* ==========================================================================
   AERIAL STAGE — three drone passes, one frame, played back to back
   ========================================================================== */
.stage{
  position:relative; z-index:1; margin-top:clamp(38px,5vw,56px);
  aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--r-xl); border:1px solid var(--line-2); background:var(--ink-3);
  box-shadow:0 50px 110px -46px var(--shade), 0 0 0 1px rgb(var(--brand-rgb) / .09);
}
.stage video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity .7s var(--ease);
}
.stage video.is-on{ opacity:1; }
.stage::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgb(var(--ink-rgb) / .86) 0%, rgb(var(--ink-rgb) / .18) 28%, transparent 48%);
}
.stage__bar{
  position:absolute; z-index:3; left:0; right:0; bottom:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.6vw,20px); padding:clamp(16px,2vw,26px);
}
.stage__bar button{ text-align:left; display:grid; gap:9px; }
.stage__bar i{ display:block; height:3px; border-radius:2px; background:rgb(var(--fg-rgb) / .22); overflow:hidden; }
.stage__bar s{
  display:block; height:100%; width:var(--p,0%); background:var(--brand);
  text-decoration:none; border-radius:2px; transition:width .2s linear;
}
.stage__bar button:not(.is-on) s{ width:0; }
.stage__bar b{
  font-family:var(--serif); font-size:13.5px; font-weight:700; letter-spacing:-.01em;
  color:var(--fg-3); transition:color .3s var(--ease);
}
.stage__bar button.is-on b{ color:var(--fg); }
.stage__bar button:hover b{ color:var(--accent-lift); }

@media (max-width:700px){
  .stage{ aspect-ratio:4/3; border-radius:var(--r-lg); }
  .stage__bar{ gap:8px; padding:14px; }
  .stage__bar b{ font-size:11px; }
}

/* ==========================================================================
   DESIGN REVIEW — 2026-09-26
   Classes the partials use that never had a rule, and the bugs that only show
   at phone width. Found by screenshotting every site at 1440 and 390px and
   running axe-core on each; see PROMPT-design-review.md. Every colour is a
   token, so every ground still works.
   ========================================================================== */

/* Headings break as a block instead of leaving one word on the last line. */
h1,h2,h3{ text-wrap:balance; }
.lede,.card__body p,.step p,.quote p{ text-wrap:pretty; }

/* --- burger: the markup is three <i>; the old rules styled a <span>, so on a
       phone the menu button was an empty box ---------------------------------- */
.burger{ flex-direction:column; gap:5px; width:44px; height:44px; }
.burger i{ display:block; width:17px; height:1.8px; border-radius:2px; background:var(--fg);
  transition:transform .3s var(--ease), opacity .2s var(--ease); }
.burger.is-open i:nth-child(1){ transform:translateY(6.8px) rotate(45deg); }
.burger.is-open i:nth-child(2){ opacity:0; }
.burger.is-open i:nth-child(3){ transform:translateY(-6.8px) rotate(-45deg); }
.drawer .navsoc{ display:flex; gap:10px; margin-top:26px; }
.drawer .navsoc a{ width:46px; height:46px; }

/* --- the brand: small coloured text uses the contrast-checked tone, and a
       business with no mark keeps its name on a phone ------------------------- */
.brand__sub{ color:var(--brand-lift); }
@media (max-width:560px){ .brand--text .brand__txt{ display:flex; } }

/* --- hero photo stack. Below 1080px it gets auto side margins, which makes a
       grid item shrink to its content — and every child is absolutely
       positioned, so it shrank to nothing and the chip and badge spilled over the
       copy. It needs a width. ------------------------------------------------- */
@media (max-width:1080px){ .stack{ width:100%; } }

/* --- the manifesto line had no rule at all and rendered as 16px body text --- */
.creds-band{ text-align:center; }
.creds-band .eyebrow{ margin-bottom:26px; }
.claim{
  font-family:var(--serif); font-weight:700; color:var(--fg);
  font-size:clamp(25px,3.1vw,40px); line-height:1.18; letter-spacing:-.03em;
  max-width:30ch; margin-inline:auto; text-wrap:balance;
}
.claim i,.claim em{ font-style:normal; color:var(--accent-lift); }

/* --- how it works: the number, title and text sit together beside the
       photograph (they were three loose grid children, so the title landed in
       one column and its text in the other) ------------------------------------ */
.step__body{ min-width:0; }
.step__num{ margin-bottom:16px; }
/* Alternate the photograph left and right. The old rule moved the media first on
   even steps, which only alternated while the media came second in the markup. */
@media (min-width:861px){
  .step:nth-child(even) .step__media{ order:1; }
}

/* --- services: the tick and arrow icons now render; give them room ---------- */
.card .textlink{ min-height:44px; }
.card .textlink svg{ width:16px; height:16px; }

/* --- team: one or two people are centred, not stranded in a 3-column grid --- */
.team:has(> .mate:only-child){ grid-template-columns:minmax(0,340px); justify-content:center; }
.team:has(> .mate:nth-child(2):last-child){ grid-template-columns:repeat(2,minmax(0,320px)); justify-content:center; }
@media (max-width:560px){ .team:has(> .mate:nth-child(2):last-child){ grid-template-columns:1fr; } }

/* --- timetable: the status column, the notes under it, and a phone --------- */
.state{
  display:inline-block; padding:4px 11px; border-radius:var(--pill); white-space:nowrap;
  font-size:12.5px; font-weight:600; color:var(--fg);
  background:rgb(var(--brand-rgb) / .12); border:1px solid rgb(var(--brand-rgb) / .28);
}
.state--wait{ background:rgb(var(--fg-rgb) / .05); border-color:var(--line-2); color:var(--fg-2); }
.state:empty{ display:none; }
.chip{ color:var(--fg); }
table.tt th{ color:var(--fg-2); }
.tt-scroll:focus-visible{ outline-offset:-3px; }
@media (max-width:860px){ .offers{ grid-template-columns:1fr; } }

/* --- gallery: the partial renders <button class="shot">; the rules were
       written for <figure>, so each photo sat in an unstyled button ----------- */
.gallery .shot{
  display:block; width:100%; padding:0; margin:0 0 16px; break-inside:avoid;
  position:relative; overflow:hidden; cursor:zoom-in;
  border-radius:var(--r); border:1px solid var(--line); background:var(--ink-2);
}
.gallery .shot img{ width:100%; height:auto; transition:transform .6s var(--ease); }
.gallery .shot:hover img{ transform:scale(1.03); }
@media (max-width:860px){ .gallery .shot{ margin-bottom:12px; } }

/* --- reviews: in line with the page, centred when there are only one or two,
       and the source on its own line under the name --------------------------- */
.quotes__rail{ max-width:var(--wrap); margin-inline:auto; justify-content:safe center; }
.quotes__rail:focus-visible{ outline-offset:-3px; }
.quote__who > span > span{ display:block; margin-top:2px; font-size:12.5px; color:var(--fg-2); }

/* --- contact: the enquiry form is <form class="bookform">, and Grid never had a
       rule for it. The first ten skins each drew their own card; the next eight
       only added a border, so on those the labels and fields sat flush against
       the edge. The card, as Rally has it. ------------------------------------ */
.bookform{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--ink-2), var(--ink-3));
  padding:clamp(22px,3vw,34px);
  box-shadow:0 36px 80px -52px var(--shade);
}
.bookform .field input,.bookform .field select,.bookform .field textarea{ background:var(--ink); }

/* --- contact: button row and field labels ---------------------------------- */
.form__end{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.form__note{ margin-top:14px; }
.form__ok{ margin-top:14px; }
.field label{ color:var(--fg-2); }
@media (max-width:620px){ .form__end .btn{ flex:1 1 100%; } }

/* --- the phone bar: the script sets is-on, the rule said is-up, so the bar
       never came up ----------------------------------------------------------- */
.mobilebar.is-on{ transform:none; }

/* --- footer: the column titles and the base line had no rules; the copyright
       and the area ran together as one sentence --------------------------------- */
.footer__h{ font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-3); margin-bottom:16px; }
.footer__base{
  margin-top:clamp(38px,5vw,56px); padding-top:24px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  font-size:12.5px; color:var(--fg-3);
}
.socials a{ width:44px; height:44px; }

/* --- announcement bar (no client uses it yet; it must not render unstyled) -- */
.announce{ background:var(--brand-deep); color:#fff; font-size:13px; font-weight:600; padding:9px 0; }
.announce__in{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; text-align:center; }
.announce a{ text-decoration:underline; text-underline-offset:3px; }

/* --- lightbox buttons sit above the photograph ------------------------------ */
.lightbox__close,.lightbox__nav{ z-index:2; }

/* Four balanced columns of nine square photographs come out 3+3+3+0 — a gallery
   with a hole down its right side. Under a dozen photographs, three columns. */
.gallery:not(:has(> .shot:nth-child(12))){ columns:3 240px; }
@media (max-width:860px){ .gallery:not(:has(> .shot:nth-child(12))){ columns:2 150px; } }

/* --- narrow phones --------------------------------------------------------
   A grid track sized 1fr cannot shrink below its widest unbreakable child, and a
   button is white-space:nowrap. So "Or message us on WhatsApp" at 16px made the
   whole contact column wider than a 360px phone, and the heading and form were
   cut off on the right — hidden, not scrolled, because body clips overflow-x.
   Let the columns shrink and let long button labels wrap. */
.book__in > *,.hero__in > *{ min-width:0; }
.btn{ max-width:100%; }
@media (max-width:620px){
  .form__end .btn,.hero__actions .btn,.mobilebar .btn{ white-space:normal; text-align:center; line-height:1.2; min-width:0; }
}

/* --- tablets ------------------------------------------------------------------
   Between 860 and about 960px the full navigation did not fit: six links, the
   main button and the socials ran off the right edge on Silver Spirit, Friends Of
   Sporting and Captains. A tablet gets the menu button instead. */
@media (max-width:1024px){
  .nav__links{ display:none; }
  .nav__cta .btn--ghost{ display:none; }
  .nav__cta .navsoc{ display:none; }
  .burger{ display:flex; }
}

/* --- visit: where to find us ---------------------------------------------- */
.visit__grid{ display:grid; gap:clamp(18px,2.4vw,28px); max-width:760px; margin-inline:auto; }
.visit__grid--map{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); max-width:none; }
.visit__card{ display:flex; flex-direction:column; gap:22px; padding:clamp(22px,3vw,34px); border:1px solid var(--line-2); border-radius:var(--r-lg); background:rgb(var(--fg-rgb) / .03); }
.visit__place{ display:flex; gap:16px; align-items:flex-start; }
.visit__place h3{ margin:0 0 4px; }
.visit__place p{ color:var(--fg-2); margin:0; }
.visit__ic{ flex:none; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:var(--brand); color:var(--on-brand); }
.visit__ic svg{ width:22px; height:22px; }
.visit__when{ margin:0; display:grid; border-top:1px solid var(--line-2); }
.visit__when > div{ display:grid; grid-template-columns:minmax(92px,auto) 1fr; gap:14px; padding:12px 0; border-bottom:1px solid var(--line-2); }
.visit__when dt{ font-weight:700; }
.visit__when dd{ margin:0; color:var(--fg-2); }
.visit__when dd span{ display:block; font-size:.9em; color:var(--fg-3); }
.visit__notes{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.visit__notes li{ display:flex; gap:10px; align-items:flex-start; color:var(--fg-2); }
.visit__notes svg{ flex:none; width:18px; height:18px; margin-top:3px; color:var(--brand-lift); }
.visit__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; }
.visit__map{ margin:0; display:flex; flex-direction:column; gap:10px; min-height:380px; }
.visit__map iframe{ flex:1; width:100%; min-height:360px; border:1px solid var(--line-2); border-radius:var(--r-lg); background:rgb(var(--fg-rgb) / .05); }
.visit__map figcaption{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--fg-3); }
.visit__map figcaption a{ text-decoration:underline; text-underline-offset:3px; color:var(--fg-2); }
.visit__lead{ margin-top:18px; max-width:60ch; color:var(--fg-2); }
@media (max-width:860px){ .visit__grid--map{ grid-template-columns:1fr; } .visit__map{ min-height:0; } .visit__map iframe{ min-height:300px; } }

/* steps without photographs: a row of three cards instead of the alternating split */
.steps:not(:has(.step__media)){ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(16px,2vw,24px); }
.steps:not(:has(.step__media)) .step{ grid-template-columns:1fr; align-items:start; padding:clamp(24px,3vw,34px); border:1px solid var(--line-2); background:rgb(var(--fg-rgb) / .03); }
.steps:not(:has(.step__media)) .step__num{ font-size:clamp(44px,4.4vw,60px); }


/* ==========================================================================
   BLOCK — the look
   ========================================================================== */
:root{
  --r-sm:0; --r:0; --r-lg:0; --r-xl:0; --pill:0;
  --wrap:1240px;
  --sect:clamp(72px,9vw,120px);
  /* the page's own paper and ink, kept so a card can be paper inside a dark band */
  --paper:var(--ink); --paper-2:var(--ink-2); --paper-fg:var(--fg); --paper-fg-2:var(--fg-2); --paper-line:var(--line-2);
  --notch:14px;
}
body{ background:var(--ink); }
h1,h2,h3,h4{ letter-spacing:0; }

/* bands: dark (the hero's token set) and brand */
.band-dark,.footer{
  --ink:var(--hero-ink); --ink-2:var(--hero-ink-2); --ink-3:var(--hero-ink-3); --ink-rgb:var(--hero-ink-rgb);
  --fg:var(--hero-fg); --fg-rgb:var(--hero-fg-rgb); --fg-2:var(--hero-fg-2); --fg-3:var(--hero-fg-3);
  --brand-lift:var(--hero-brand-lift); --accent-lift:var(--hero-accent-lift);
  --line:rgb(var(--hero-fg-rgb) / .1); --line-2:rgb(var(--hero-fg-rgb) / .2);
  background:var(--hero-ink); color:var(--fg);
}
.band-brand{
  --fg:var(--on-brand); --fg-2:var(--on-brand); --fg-3:var(--on-brand); --brand-lift:var(--on-brand);
  background:var(--brand); color:var(--on-brand);
}

/* type */
.display{ font-family:var(--serif); font-weight:400; text-transform:uppercase; line-height:.9; letter-spacing:.002em; margin:0; }
.display i{ font-style:normal; color:var(--brand-lift); }
.display--xxl{ font-size:clamp(60px,11.5vw,168px); }
.display--xl{ font-size:clamp(54px,8.2vw,116px); }
.display--lg{ font-size:clamp(44px,6vw,88px); }
.display--md{ font-size:clamp(34px,4vw,56px); }
.display--sm{ font-size:clamp(22px,2vw,28px); line-height:1; }
.kicker{ display:block; margin-bottom:18px; font-family:var(--sans); font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-lift); }
.lede{ color:var(--fg-2); font-size:clamp(16px,1.3vw,18px); line-height:1.6; }

/* the Grid partials this layout keeps (steps, team, reviews, video) speak the same voice */
.h-xl,.h-lg,.h-md{ font-family:var(--serif); font-weight:400; text-transform:uppercase; line-height:.92; }
.h-lg{ font-size:clamp(44px,6vw,88px); }
.h-lg i,.h-xl i,.h-md i{ font-style:normal; color:var(--brand-lift); }
.h-sm{ font-family:var(--serif); font-weight:400; text-transform:uppercase; letter-spacing:0; font-size:clamp(22px,2vw,28px); }
.eyebrow{ padding:0; border:0; background:none; backdrop-filter:none; font-size:11.5px; font-weight:800; letter-spacing:.16em; color:var(--brand-lift); }
.eyebrow .dot{ display:none; }
.section-head.center{ text-align:left; margin-inline:0; max-width:900px; }
.section-head.center .lede{ margin-inline:0; }

/* buttons: square, small capitals */
.btn{ border-radius:0; font-family:var(--sans); font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; padding:17px 24px; box-shadow:none; }
.btn:hover{ transform:none; }
.btn--primary{ background:var(--brand); color:var(--on-brand); border:0; }
.btn--primary:hover{ background:var(--brand-deep); color:#fff; }
.band-dark .btn--primary{ border:1px solid var(--hero-action-border); }
.band-brand .btn--primary{ background:var(--paper); color:var(--paper-fg); }
.btn--dark{ background:var(--fg); color:var(--ink); }
.btn--ghost{ border:1.5px solid var(--line-2); background:transparent; }
.textlink{ display:inline-flex; align-items:center; gap:8px; padding:4px 0; border-bottom:2px solid currentColor; font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--fg); }
.textlink svg{ width:15px; height:15px; }
.textlink:hover{ color:var(--brand-lift); }

/* nav: paper, a rule under it */
.nav,.nav.is-stuck{ background:var(--ink); border-bottom:1px solid var(--line-2); box-shadow:none; backdrop-filter:none; }
.nav__links a{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.brand__name{ font-family:var(--serif); font-weight:400; text-transform:uppercase; letter-spacing:.02em; }
.burger{ border-radius:0; }
.drawer a{ font-family:var(--serif); text-transform:uppercase; }

/* --- hero ------------------------------------------------------------------ */
.hero{ padding:clamp(48px,6vw,88px) 0 clamp(56px,7vw,96px); overflow:hidden; }
.hero__in{ display:grid; grid-template-columns:1fr 1.02fr; gap:clamp(36px,5vw,72px); align-items:center; }
.hero__copy .lede{ margin-top:26px; max-width:44ch; }
.hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:34px; }
.hero__facts{ list-style:none; margin:40px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 0; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-2); }
.hero__facts li{ display:flex; align-items:center; }
.hero__facts li + li::before{ content:'/'; margin:0 14px; color:var(--brand-lift); }
.hero__facts svg{ display:none; }
.hero__media{ position:relative; margin:0; }
.hero__tag{ position:absolute; z-index:2; top:-14px; left:18px; display:inline-flex; align-items:center; gap:8px; padding:8px 13px; background:var(--brand); color:var(--on-brand); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.hero__tag::before{ content:''; width:7px; height:7px; background:currentColor; }
.hero__frame{ aspect-ratio:4/3.3; overflow:hidden; clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%); }
.hero__frame img{ width:100%; height:100%; object-fit:cover; }
.hero__strip{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; padding:15px 18px; background:var(--brand); color:var(--on-brand); font-size:13.5px; }
.hero__strip b{ font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }

/* --- the band of disciplines ------------------------------------------------ */
.band{ overflow:hidden; border-bottom:1px solid var(--line-2); padding:16px 0; background:var(--ink); }
.band__track{ display:flex; width:max-content; animation:blockMarq 46s linear infinite; }
.band__track span{ display:flex; align-items:center; gap:clamp(28px,3vw,52px); padding-right:clamp(28px,3vw,52px); font-family:var(--serif); font-size:clamp(28px,3.4vw,46px); line-height:1; text-transform:uppercase; color:var(--fg-3); white-space:nowrap; }
.band__track span::after{ content:''; width:8px; height:8px; border-radius:50%; background:var(--brand); }
@keyframes blockMarq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .band__track{ animation:none; } }

/* --- section heads ------------------------------------------------------------ */
.head3{ display:grid; grid-template-columns:1fr 1.7fr 1fr; gap:24px 40px; align-items:end; margin-bottom:clamp(40px,5vw,64px); }
.head3 .kicker{ align-self:start; margin-top:14px; }
.head3 .lede{ font-size:15.5px; }
.head2{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px 48px; margin-bottom:clamp(36px,4vw,56px); }
.head2 .lede{ max-width:36ch; font-size:15.5px; }

/* --- services as zones --------------------------------------------------------- */
.zones{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(20px,2vw,28px); }
.zone{ display:flex; flex-direction:column; align-items:flex-start; border-top:2px solid var(--fg); padding-top:0; }
.zone__media{ width:100%; aspect-ratio:4/4.9; overflow:hidden; clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%); }
.zone__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.zone:hover .zone__media img{ transform:scale(1.035); }
.zone h3{ margin:20px 0 8px; }
.zone__meta{ font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-lift); margin-bottom:8px; }
.zone > p{ font-size:14.5px; line-height:1.55; color:var(--fg-2); }
.tags{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.tags li{ padding:5px 8px; border:1px solid var(--line-2); font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-2); }
.zone .textlink{ margin-top:18px; }

/* --- the statement band ------------------------------------------------------------ */
.statement__in{ display:grid; gap:clamp(36px,5vw,72px); align-items:center; }
.statement__in--photo{ grid-template-columns:1fr 1.05fr; }
.statement__text{ font-size:clamp(40px,5.2vw,76px); }
.figures{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:22px 28px; margin:44px 0 0; }
.figures div{ border-top:1px solid var(--line-2); padding-top:14px; }
.figures dt{ font-family:var(--serif); font-size:clamp(36px,3.6vw,52px); line-height:1; color:var(--brand-lift); }
.figures dd{ margin:8px 0 0; font-size:13px; line-height:1.45; color:var(--fg-2); }
.statement__media{ margin:0; aspect-ratio:1/1.02; overflow:hidden; clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch)); }
.statement__media img{ width:100%; height:100%; object-fit:cover; }

/* --- prices ------------------------------------------------------------------------ */
.plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:3px; }
.plan{ position:relative; display:flex; flex-direction:column; min-height:290px; padding:26px 24px 22px; background:var(--paper); color:var(--paper-fg);
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%); }
.plan h3{ font-size:clamp(26px,2.3vw,34px); }
.plan__price{ margin-top:16px; font-size:21px; font-weight:800; }
.plan__price span{ font-weight:600; }
.plan__text{ margin-top:10px; font-size:13.5px; color:var(--paper-fg-2); }
.plan__cta{ margin-top:auto; padding-top:16px; border-top:1px solid var(--paper-line); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.plan--featured{ background:var(--brand); color:var(--on-brand); }
.plan--featured .plan__text{ color:var(--on-brand); }
.plan--featured .plan__cta{ border-color:rgb(0 0 0 / .18); }
.plans__note{ margin-top:22px; font-size:13px; color:var(--fg-2); }

/* --- timetable: a ruled board ----------------------------------------------------- */
.timetable{ border-radius:0; border:0; border-top:2px solid var(--fg); background:transparent; box-shadow:none; }
.timetable__head{ padding-inline:0; }
.timetable .chip{ border-radius:0; }
table.tt th{ font-size:10.5px; letter-spacing:.14em; }
table.tt td{ font-family:var(--sans); }
table.tt td:first-child{ font-family:var(--sans); font-weight:700; letter-spacing:0; }
.state{ border-radius:0; }
.offer{ border-radius:0; }

/* --- the work (gallery) ------------------------------------------------------------ */
.work{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(36px,5vw,72px); align-items:start; }
.work__head{ position:sticky; top:110px; }
.work__head .lede{ margin-top:22px; }
.mosaic{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-flow:dense; gap:10px; }
.mosaic .shot{ aspect-ratio:1; overflow:hidden; border-radius:0; padding:0; display:block; }
.mosaic .shot:first-child{ grid-column:span 2; grid-row:span 2; }
.mosaic .shot img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.mosaic .shot:hover img{ transform:scale(1.04); }

/* --- visit: ruled rows ------------------------------------------------------------- */
.visit__in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:start; }
.visit__in .lede{ margin-top:22px; }
.visit__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; margin-top:30px; }
.rows{ margin:0; border-top:2px solid var(--fg); }
.rows > div{ display:grid; grid-template-columns:130px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--line-2); }
.rows dt{ font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); padding-top:3px; }
.rows dd{ margin:0; font-size:15px; line-height:1.5; }
.rows dd span{ display:block; font-size:13.5px; color:var(--fg-2); }

/* --- FAQ, split ---------------------------------------------------------------------- */
.faqsplit{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,5vw,80px); align-items:start; }
.faqsplit .lede{ margin-top:22px; }
.faqsplit .faq{ max-width:none; margin:0; border-top:1px solid var(--line-2); }
.qa{ border:0; border-bottom:1px solid var(--line-2); border-radius:0; background:transparent; }
.qa__q{ padding:20px 0; font-family:var(--serif); font-size:clamp(20px,2.1vw,30px); font-weight:400; text-transform:uppercase; line-height:1.05; text-align:left; }
.qa__ic{ color:var(--brand-lift); border:0; background:none; }
.qa__a p{ padding:0 0 20px; color:var(--fg-2); }

/* --- the closing band ---------------------------------------------------------------- */
.closing{ padding:clamp(76px,10vw,128px) 0; text-align:center; }
.closing__in{ display:flex; flex-direction:column; align-items:center; }
.closing .lede{ margin:24px auto 0; max-width:52ch; }
.closing__ways{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:34px; }
.way{ display:flex; align-items:center; gap:12px; padding:13px 18px; background:var(--paper); color:var(--paper-fg); text-align:left; font-size:14px; line-height:1.3; }
.way svg{ width:18px; height:18px; flex:none; color:var(--brand); }
.way b{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-fg-2); }
a.way:hover{ background:var(--hero-ink); color:var(--hero-fg); }

/* --- the form, on paper ---------------------------------------------------------------- */
.book{ background:var(--ink); }
.book .glow{ display:none; }
.book__in{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(36px,5vw,72px); align-items:start; }
.book__in .lede{ margin-top:18px; font-size:15px; }
.bookform{ border-radius:0; border:0; border-top:2px solid var(--fg); background:transparent; box-shadow:none; padding:28px 0 0; }
.field input,.field select,.field textarea{ border-radius:0; }

/* --- footer ---------------------------------------------------------------------------- */
.footer{ border-top:0; }
.footer__h{ font-size:10.5px; letter-spacing:.14em; }
.socials a{ border-radius:0; }

/* --- responsive ------------------------------------------------------------------------ */
@media (max-width:1080px){
  .hero__in,.statement__in--photo,.work,.visit__in,.faqsplit,.book__in{ grid-template-columns:1fr; }
  .head3{ grid-template-columns:1fr; }
  .head3 .kicker{ margin:0 0 -8px; }
  .work__head{ position:static; }
}
@media (max-width:620px){
  .mosaic{ grid-template-columns:repeat(2,1fr); }
  .rows > div{ grid-template-columns:96px 1fr; }
  .plan{ min-height:0; }
  .plan__cta{ margin-top:22px; }
}

/* --- steps (Grid's partial): flat, square, the number in the poster face ---------------- */
.step__media{ border-radius:0; border:0; box-shadow:none; background:var(--ink-2); }
.step__media::after{ display:none; }
.step__num{ font-family:var(--serif); font-weight:400; background:none; -webkit-text-fill-color:currentColor; color:var(--brand-lift); }
.plans{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }


/* ==========================================================================
   BLOCK — finished (2026-10-01). The hero as a first screen on every device,
   and the motion that makes it feel built rather than assembled. Studied from
   tt-fitness-hub.vercel.app (outreach/gyms/GOAL-POLISH.md): the promise rising
   letter by letter, a bar drawn under it, photographs that turn, and sections
   that arrive as you reach them.

   The rules of the motion:
   · it only runs once app.js has marked the page (html.js) and the display font
     has loaded (html.is-go), so letters never swap face mid-flight;
   · it uses `translate`, never `transform`, so a skin's own rotations survive;
   · without JS, or with reduced motion, the page is the same page, standing still.
   ========================================================================== */
:root{
  --navh:72px;
  --bandh:clamp(64px,6vw,82px);
  --pvh:0px;
  --fx-ease:cubic-bezier(.22,1,.36,1);       /* TT's letter curve */
  --fx-out:cubic-bezier(.55,.06,.68,.19);
  --fx-io:cubic-bezier(.76,0,.24,1);
  --slide:6.2s;                              /* one photograph, one word */
}
@media (max-width:560px){ :root{ --navh:64px; } }

/* a section with no kicker still renders the span (head3 keeps its grid column);
   a skin that draws the kicker as a plate (ironworks) drew an empty box */
.kicker:empty{ visibility:hidden; border:0; padding:0; }

/* --- the preview notice: a slim line above the nav, never over the hero ---- */
.pv{ position:relative; z-index:60; display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:34px; padding:6px 48px; background:#0E0E0E; color:#F2F2F2; text-align:center;
  font:500 12.5px/1.35 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; letter-spacing:0; text-transform:none; }
.pv b{ font-weight:700; color:#fff; }
.pv button{ position:absolute; right:8px; top:50%; translate:0 -50%; width:30px; height:30px; border:0; border-radius:6px;
  background:rgba(255,255,255,.1); color:#fff; font:400 19px/1 sans-serif; cursor:pointer; }
.pv button:hover{ background:rgba(255,255,255,.22); }
.pv button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
body:has(.pv){ --pvh:34px; }
@media print{ .pv{ display:none; } }

/* --- the nav: tucks away on the way down, comes back on the way up, and a hairline
       in the brand colour shows how far down the page you are ------------------- */
.nav{ transition:translate .45s var(--fx-ease), border-color .3s var(--ease), background-color .3s var(--ease); }
.nav.is-tucked{ translate:0 -102%; }
.nav__progress{ position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:var(--brand); transform-origin:0 50%; transform:scaleX(var(--p,0)); pointer-events:none; }
.nav__links a{ position:relative; }
.nav__links a::after{ content:''; position:absolute; left:11px; right:11px; bottom:3px; height:2px; background:var(--brand); transform:scaleX(0); transform-origin:0 50%; transition:transform .4s var(--fx-ease); }
.nav__links a:hover::after,.nav__links a.is-here::after{ transform:scaleX(1); }
.nav__links a.is-here{ color:var(--fg); }

/* --- buttons: the fill sweeps across, the arrow on a text link nudges --------- */
.btn--primary{ position:relative; isolation:isolate; overflow:hidden; }
.btn--primary::before{ content:''; position:absolute; inset:0; z-index:-1; background:var(--brand-deep);
  transform:scaleX(0); transform-origin:100% 50%; transition:transform .5s var(--fx-io); }
.btn--primary:hover{ background:var(--brand); }
.btn--primary:hover::before{ transform:scaleX(1); transform-origin:0 50%; }
.textlink{ background:linear-gradient(var(--brand-lift),var(--brand-lift)) 0 100%/0 2px no-repeat; transition:background-size .45s var(--fx-ease), color .25s var(--ease); }
.textlink:hover{ background-size:100% 2px; }

/* ==========================================================================
   THE HERO
   ========================================================================== */
.hero{ display:flex; align-items:center;
  min-height:clamp(540px, calc(100svh - var(--navh) - var(--bandh) - var(--pvh)), 980px);
  padding:clamp(36px,5.5svh,80px) 0 clamp(40px,6svh,84px); }
.hero__in{ grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:clamp(36px,5vw,84px); }
.hero__copy{ position:relative; z-index:2; }

/* the headline: as large as the column and the screen's height allow; app.js then
   sets --fit so the longest line fills the column and the lines break where the
   gym wrote them */
.hero .hero__title{ --hl:clamp(50px, min(7.8vw, 12.8svh), 124px); font-size:calc(var(--hl) * var(--fit, 1)); }
.hero__kicker + .hero__title{ margin-top:0; }
.hero__copy .lede{ margin-top:clamp(18px,2.6svh,28px); }
.hero__actions{ margin-top:clamp(22px,3.4svh,36px); }
.hero__facts{ margin-top:clamp(24px,4.4svh,48px); }

/* the split headline (built by app.js): a line, a mask per word, the word or its
   letters rising inside it. The masks reach past the line box so a tight
   line-height or a descender is never cut. */
.hl{ display:block; position:relative; }
.hl__line{ display:block; }
.hl.is-fit .hl__line{ white-space:nowrap; }
.hl__m{ display:inline-block; overflow:hidden; vertical-align:top; padding:.14em .06em .16em; margin:-.14em -.06em -.16em; }
.hl__txt,.hl__c{ display:inline-block; }
.hl__mark{ font-style:normal; }
.hl--bar{ padding-bottom:.2em; }
.hl__bar{ position:absolute; left:0; top:100%; width:0; height:max(3px,.045em); margin-top:-.12em; background:var(--fg);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .7s var(--fx-ease); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* the facts under the buttons: a brand square before each, so a wrapped line never
   starts with a stray separator */
.hero__facts{ gap:8px 22px; }
.hero__facts li::before,.hero__facts li + li::before{ content:''; flex:none; width:6px; height:6px; margin:0 10px 0 0; background:var(--brand-lift); }

/* --- the photographs --------------------------------------------------------- */
.hero__media{ position:relative; }
.hero .hero__frame{ position:relative; isolation:isolate; overflow:hidden; aspect-ratio:auto;
  height:clamp(320px, calc(100svh - var(--navh) - var(--bandh) - var(--pvh) - 210px), 640px); touch-action:pan-y; }
.hero__slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.09);
  transition:opacity 1.1s ease, transform 0s linear 1.1s; }
.hero__slide.is-on{ opacity:1; transform:scale(1); transition:opacity 1.1s ease, transform calc(var(--slide) + 1.4s) linear; }
/* a curtain in the brand colour crosses the frame as the page opens */
.hero__frame::before{ content:''; position:absolute; inset:0; z-index:3; background:var(--brand); transform:scaleY(0); pointer-events:none; }

/* the tag: a status light that breathes */
.hero__tag i{ display:block; width:7px; height:7px; background:currentColor; animation:tagPulse 1.8s ease-in-out infinite; }
.hero__tag::before{ display:none; }
@keyframes tagPulse{ 0%,100%{ box-shadow:0 0 0 0 rgb(var(--hero-fg-rgb) / .55); } 50%{ box-shadow:0 0 0 6px rgb(var(--hero-fg-rgb) / 0); } }

/* the strip: the chip on the left, the photograph controls on the right */
.hero__strip{ align-items:center; justify-content:space-between; gap:10px 20px; min-height:56px; }
.hero__strip--bare{ padding-block:0; }
.hero__strip--bare:not(:has(.hero__ctrl)){ display:none; }
.hero__chip{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; min-width:0; flex:1 1 260px; }
.hero__chip b{ font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.hero__chip > span{ font-size:13.5px; line-height:1.4; }
.hero__ctrl{ display:flex; align-items:center; gap:4px; margin-left:auto; flex:none; }
.hero__segs{ display:flex; gap:6px; margin-right:8px; }
.hero__seg{ display:grid; align-items:center; width:30px; height:30px; padding:0; }
.hero__seg i{ display:block; height:3px; background:rgb(0 0 0 / .22); position:relative; overflow:hidden; }
.hero__seg i::after{ content:''; position:absolute; inset:0; background:currentColor; transform:scaleX(0); transform-origin:0 50%; }
.hero__seg.is-done i::after,.hero__seg.is-on i::after{ transform:scaleX(1); }
.hero__arrow{ display:grid; place-items:center; width:36px; height:36px; border:1.5px solid currentColor; border-radius:50%; opacity:.85; transition:opacity .2s, background-color .25s, color .25s; }
.hero__arrow:hover{ opacity:1; background:var(--on-brand); color:var(--brand); }
.hero__arrow svg{ width:16px; height:16px; }
.hero__seg:focus-visible,.hero__arrow:focus-visible{ outline:2px solid var(--on-brand); outline-offset:2px; }

/* ==========================================================================
   MOTION — the hero as the page opens
   ========================================================================== */
.js .hero .fx{ opacity:0; }
.js .hero__title{ visibility:hidden; }
.is-go .hero__title{ visibility:visible; }
/* html.js is set by a line in <head>, before the first paint; html.app by app.js.
   If the script never arrives, or the font never answers, nothing stays hidden. */
.js:not(.is-go) .hero .fx,.js:not(.is-go) .hero__title{ animation:fxSafety 0s linear 2.6s forwards; }
.js:not(.app) .reveal{ animation:fxSafety 0s linear 1.5s forwards; }
html:not(.js) .reveal{ opacity:1; translate:none; }
@keyframes fxSafety{ to{ opacity:1; visibility:visible; translate:none; } }

.is-go .hero .fx{ animation:fxUp .95s var(--fx-ease) var(--fd, .5s) both; }
.is-go .hero .hero__kicker{ --fd:.04s; }
.is-go .hero .hero__copy .lede{ --fd:.52s; }
.is-go .hero .hero__actions{ --fd:.64s; }
.is-go .hero .hero__facts{ --fd:.78s; }
.is-go .hero .hero__media{ animation:none; opacity:1; }
.is-go .hero__frame::before{ animation:curtain 1.05s var(--fx-io) both; }
.is-go .hero.is-opening .hero__slide.is-on{ animation:slideIn 2.4s var(--fx-ease) backwards; }
.is-go .hero__tag{ animation:fxUp .7s var(--fx-ease) .95s both; }
.is-go .hero__strip{ animation:fxUp .8s var(--fx-ease) .75s both; }
.is-go .hl__txt{ animation:hlRise 1s var(--fx-ease) var(--d, 0s) both; }
.is-go .hl__c{ animation:hlChar .72s var(--fx-ease) var(--d, 0s) both; }
.is-go .hl__mark.is-out .hl__c{ animation:hlCharOut .5s var(--fx-out) var(--o, 0s) both; }
.is-go .hl__bar{ transform:scaleX(1); transition-delay:var(--bd, .9s); }
.is-go .hl__bar.is-out{ transform:scaleX(0); transform-origin:100% 50%; transition-duration:.42s; transition-delay:0s; }

@keyframes fxUp{ from{ opacity:0; translate:0 22px; } to{ opacity:1; translate:0 0; } }
@keyframes hlRise{ from{ translate:0 108%; } to{ translate:0 0; } }
@keyframes hlChar{ from{ opacity:0; translate:0 1em; } to{ opacity:1; translate:0 0; } }
@keyframes hlCharOut{ from{ opacity:1; translate:0 0; } to{ opacity:0; translate:0 -1em; } }
@keyframes curtain{
  0%  { transform:scaleY(0); transform-origin:50% 100%; }
  44% { transform:scaleY(1); transform-origin:50% 100%; }
  56% { transform:scaleY(1); transform-origin:50% 0; }
  100%{ transform:scaleY(0); transform-origin:50% 0; }
}
@keyframes slideIn{ 0%,21%{ opacity:0; transform:scale(1.24); } 22%{ opacity:1; transform:scale(1.2); } 100%{ opacity:1; transform:scale(1); } }

/* the photograph controls fill as the photograph is shown; hovering holds it */
.is-go .hero__seg.is-on i::after{ animation:segFill var(--slide) linear both; }
.hero__media:hover .hero__seg.is-on i::after,.hero__media.is-paused .hero__seg.is-on i::after{ animation-play-state:paused; }
@keyframes segFill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* ==========================================================================
   MOTION — the rest of the page, as you reach it
   ========================================================================== */
.reveal{ transform:none; filter:none; translate:0 28px; }
.reveal.is-in{ translate:0 0; transition:opacity .8s var(--fx-ease), translate .9s var(--fx-ease); transition-delay:var(--d, 0ms); }
/* headings: each word rises out of its own mask */
.reveal .hl__txt{ translate:0 108%; }
.reveal.is-in .hl__txt{ translate:0 0; transition:translate 1s var(--fx-ease); transition-delay:var(--w, 0s); }
/* the closing line rises letter by letter, like the hero's promise */
.reveal .hl__c{ opacity:0; translate:0 1em; }
.reveal.is-in .hl__c{ opacity:1; translate:0 0; transition:opacity .7s var(--fx-ease), translate .8s var(--fx-ease); transition-delay:var(--w, 0s); }
/* photographs: a curtain in the brand colour, the picture settling beneath it
   (html.app: only once app.js is running, or a blocked script would leave them covered) */
.zone__media,.statement__media,.step__media{ position:relative; }
:is(.zone__media,.statement__media,.step__media)::before{ content:''; position:absolute; inset:0; z-index:2; background:var(--brand); transform:scaleY(0); transform-origin:50% 0; pointer-events:none; }
.app .reveal:not(.is-in) :is(.zone__media,.step__media)::before,.app .statement__media.reveal:not(.is-in)::before{ transform:scaleY(1); }
.app .reveal.is-in :is(.zone__media,.step__media)::before,.app .statement__media.reveal.is-in::before{ transform:scaleY(0); transition:transform 1s var(--fx-io); transition-delay:calc(var(--d, 0ms) + .15s); }
.app .reveal :is(.zone__media,.step__media) img,.app .statement__media.reveal img{ scale:1.16; }
.app .reveal.is-in :is(.zone__media,.step__media) img,.app .statement__media.reveal.is-in img{ scale:1; transition:scale 1.6s var(--fx-ease), transform .6s var(--ease); transition-delay:calc(var(--d, 0ms) + .2s), 0s; }
/* the figures underline themselves */
.figures div{ position:relative; border-top-color:transparent; }
.figures div::before{ content:''; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--line-2); transform-origin:0 50%; }
.app .reveal:not(.is-in) .figures div::before{ transform:scaleX(0); }
.app .reveal.is-in .figures div::before{ transform:scaleX(1); transition:transform 1.1s var(--fx-ease); transition-delay:calc(.25s + var(--i, 0) * .12s); }
.app .reveal .figures div{ opacity:0; translate:0 14px; }
.app .reveal.is-in .figures div{ opacity:1; translate:0 0; transition:opacity .7s var(--fx-ease), translate .8s var(--fx-ease); transition-delay:calc(.3s + var(--i, 0) * .12s); }
/* the price cards lift to meet the pointer */
.plan{ transition:translate .4s var(--fx-ease), box-shadow .4s var(--fx-ease), opacity .8s var(--fx-ease); }
.plan.is-in:hover{ translate:0 -6px; box-shadow:0 26px 50px -30px rgb(0 0 0 / .55); transition-delay:0s; }

/* the marquee: driven by app.js so it answers the scroll; the CSS loop is the fallback */
.band.is-driven .band__track{ animation:none; will-change:transform; }

@media (prefers-reduced-motion:reduce){
  .js .hero .fx,.js .hero__title{ opacity:1; visibility:visible; animation:none !important; }
  .reveal,.reveal .hl__txt,.reveal .hl__c,.app .reveal .figures div{ opacity:1; translate:none; }
  :is(.zone__media,.statement__media,.step__media,.hero__frame)::before{ display:none; }
  .app .reveal :is(.zone__media,.step__media) img,.app .statement__media.reveal img{ scale:1; }
  .app .reveal .figures div::before{ transform:none; }
  .hero__slide,.hero__slide.is-on{ transform:none; transition:opacity .4s ease; }
  .hero__tag i{ animation:none; }
  .nav.is-tucked{ translate:none; }
}

/* ==========================================================================
   THE HERO ON EVERY SCREEN
   ========================================================================== */
/* short laptop screens (1280×720, 1366×768): everything moves up a notch */
@media (min-width:1081px) and (max-height:820px){
  .hero{ padding-block:28px 34px; }
  .hero__copy .lede{ font-size:16px; line-height:1.5; max-width:46ch; }
  .hero__facts{ font-size:10.5px; }
}
/* big screens: the hero is a full first screen, the photograph tall */
@media (min-width:1600px) and (min-height:950px){
  :root{ --wrap:1360px; }
}