/* =============================================================
   Coach Gari — design system
   White / #1540E8 / Manrope

   Shared across the three routes (A, B, C). Anything that lives
   on a single route stays inline in that route's <style> block.
   Do not merge with studio-mt.css — that is a separate identity.
   ============================================================= */

/* Manrope, served from here rather than Google Fonts: the stylesheet on
   fonts.googleapis.com blocked the first paint (~300 ms on a phone, Lighthouse
   2026-09-30) and cost two extra connections. One variable file per subset;
   latin is preloaded by each page, latin-ext only loads if a character needs it.
   Licence: assets/fonts/OFL.txt. The unicode ranges are Google's own subsets. */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/manrope-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/manrope-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --accent:#1540E8;
  --accent-dark:#0F32BE;
  --accent-tint:#E9EDFD;
  --accent-pale:#F3F5FE;
  --black:#0A0A0B;
  --grey-text:#6C6C78;
  --grey-bg:#F4F4F6;
  --line:#E6E6EA;
  --white:#FFFFFF;
  --maxw:1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* anchor targets land below the sticky header; --nav-h follows the real header height (site.js, ResizeObserver) */
:root{--nav-h:78px;}
section[id],header[id],article[id]{scroll-margin-top:calc(var(--nav-h) + 20px);}
body{
  margin:0;background:#fff;color:var(--black);
  font-family:"Manrope",system-ui,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
/* 28px a side is 17% of a 320px screen. Giving 10px of it back to the line is
   what lets the hero lead hold two lines there at a size that still reads as
   larger than the grey paragraph under it. */
@media(max-width:360px){.wrap{padding:0 18px;}}
a{color:inherit;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.038em;line-height:1.04;}
/* The 2.5rem floor was too big for the narrowest phones: at 320px each half of
   the hero title wrapped again, giving four lines. The largest size that still
   fits two lines tracks the line width almost exactly (12.5vw - 8px, the offset
   being the wrap's side padding), so the floor follows it below ~390px and stays
   at 2.5rem above — nothing changes at 390px and wider. Calibrated against the
   28px padding; under 360px the wrap gives 10px a side back, so there the title
   has more room than this asks for. */
h1{font-size:clamp(min(2.5rem,12.5vw - 8px),5.4vw,4rem);}
h2{font-size:clamp(2rem,3.9vw,3.05rem);}
h3{font-size:clamp(1.4rem,2.2vw,1.8rem);letter-spacing:-.03em;}
h4{font-size:1.08rem;letter-spacing:-.02em;line-height:1.3;}
p{margin:0 0 1em;}
.sub{color:var(--grey-text);font-size:1.09rem;font-weight:500;max-width:60ch;}
.center{text-align:center;}
.center .sub{margin-left:auto;margin-right:auto;}
/* A heading and the line under it sat flush in six places — the gap existed only
   where a block happened to set one, giving 0, 12, 18 or 20px around the page.
   This is the floor, at the 18px the tuned blocks already use; those blocks keep
   winning on specificity, so nothing that was deliberate moves. */
:is(h1,h2,h3) + .sub,
:is(h1,h2,h3) + .sp-sub{margin-top:18px;}

.badge{
  display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-tint);
  padding:8px 15px;border-radius:7px;margin-bottom:22px;
}
.badge.dark{color:#fff;background:var(--black);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;text-decoration:none;
  font-weight:700;font-size:16px;padding:17px 30px;border-radius:9px;border:1.5px solid transparent;
  font-family:inherit;cursor:pointer;transition:background .15s ease,border-color .15s ease;
}
.btn-accent{background:var(--accent);color:#fff;}
.btn-accent:hover{background:var(--accent-dark);}
.btn-dark{background:var(--black);color:#fff;}
.btn-dark:hover{background:#26262B;}
.btn-line{border-color:var(--line);color:var(--black);background:#fff;}
.btn-line:hover{border-color:var(--black);}
.btn-soft{background:var(--grey-bg);color:var(--black);}
.btn-soft:hover{background:#E9E9ED;}
.btn-sm{padding:12px 22px;font-size:14.5px;}
.btn-full{width:100%;}
/* A button whose feature is switched off: still in the layout and still legible,
   plainly not clickable. No pointer-events:none — that would swallow the title
   attribute explaining why, and the missing href already makes it follow nothing. */
.is-off{opacity:.45;cursor:default;}
.is-off:hover{background:inherit;border-color:inherit;}

/* Document-page footer, shared by legal, privacy and collab. It lived in
   legal.css, which collab does not load; a site-wide footer is not a legal-page
   element. The top rule gives it an edge on collab, whose body is already grey. */
.doc-foot{background:var(--grey-bg);border-top:1px solid var(--line);padding:28px 0 36px;text-align:center;font-size:13.5px;color:var(--grey-text);}
.doc-foot p{margin:0 0 6px;}
.doc-foot p:last-child{margin-bottom:0;}
.doc-foot a{color:var(--black);text-decoration:none;font-weight:600;}
.doc-foot a:hover{color:var(--accent);}

/* The footer on a standalone page carries the wordmark and the bottom bar, not the
   three link columns: those are home-page anchors, a newsletter form and a Support
   dialog that do not exist there. Without .f-top above it the 70px opening padding
   and the wordmark's own 64px stacked into 134px of empty grey. */
footer.f-slim{padding-top:0;}
footer.f-slim .wordmark{margin-top:40px;}

.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;}
.nav-in{display:flex;align-items:center;gap:38px;height:78px;transition:height .35s cubic-bezier(.2,.7,.2,1);}
/* scrolled state (site.js toggles .scrolled from an IntersectionObserver sentinel; no scroll listener) */
.nav.scrolled{background:rgba(255,255,255,.84);border-bottom-color:rgba(230,230,234,.75);box-shadow:0 1px 0 rgba(10,10,11,.02);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);}
.nav.scrolled .nav-in{height:66px;}
.logo{font-size:1.3rem;font-weight:800;letter-spacing:-.045em;text-decoration:none;white-space:nowrap;}
/* The brand is written "Coach Gari." in one colour. The full stop used to be
   set in accent blue; it is part of the name, not an ornament. */
.logo i{color:inherit;font-style:normal;}
.nav-links{display:flex;gap:28px;font-size:14px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;margin-left:auto;}
/* tonal navigation: the current section is near-black, the others soft grey; hover only shifts tone (site.js marks .is-active from an observer) */
.nav-links a{text-decoration:none;color:var(--grey-text);transition:color .28s ease;}
.nav-links a.is-active{color:var(--black);}
/* hover: every link dims, the current section included; only the one under the pointer is black */
.nav-links:hover a,.nav-links:focus-within a{color:#B4B4BE;}
.nav-links:hover a:hover,.nav-links:focus-within a:focus-visible{color:var(--black);}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:20px;}
.nav-right .plain{font-size:14px;font-weight:700;text-transform:uppercase;text-decoration:none;}

/* 86px of white below the hero, then 84px of grey before the first badge, put
   185px between the last hero line and the section that follows. The bottom
   padding comes down to 48; the top of the band that follows the hero to 60,
   giving 123px. Both are scoped: the rest of the page keeps its rhythm. */
.hero{padding:92px 0 48px;}
.hero-brand{font-size:clamp(1.05rem,2.3vw,1.4rem);font-weight:800;letter-spacing:-.025em;line-height:1.15;margin-bottom:22px;color:var(--black);}
.hero-brand span{color:var(--accent);}
.hero h1{margin-bottom:20px;}
/* Two lines, not three: 22ch broke the lead into three lines at every width.
   30ch holds it to two, and below ~375px the floor follows the line width
   (5.5vw - 2px) so it keeps holding down to 320px — min() pins it under the old
   1.06rem so nothing changes from 375px up. `balance` evens the two lines. */
.hero-lead{font-size:clamp(min(1.06rem,5.5vw - 2px),2.6vw,1.55rem);font-weight:700;letter-spacing:-.025em;line-height:1.2;max-width:30ch;text-wrap:balance;margin:0 auto 16px;color:var(--black);}
/* Headings that carry a hard break for narrow screens and want none once there is
   room. Both users fit on one line well before 760px — the hero from 680, the live
   sessions title from 700 — but the break is held until 760, where each has over
   100px to spare, so a different font rasteriser cannot push either onto two. */
@media(min-width:760px){.br-wide{display:none;}}
/* Follows the lead down on the narrowest screens. Left fixed, the grey
   paragraph would sit at 18.9px under a 15.6px bold lead — bigger than the line
   it supports. min() keeps it untouched from 360px up. */
.hero .sub{font-size:min(1.18rem,5.9vw - 2px);max-width:54ch;}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:38px;}
.hero-meta{margin-top:28px;font-size:14.5px;font-weight:600;color:var(--grey-text);}
@media(max-width:640px){.hero{padding:56px 0;}.hero-cta .btn{width:100%;}}

.band{background:var(--grey-bg);padding:84px 0;}
.band.tight{padding-top:0;}
.band.white{background:#fff;}
@media(max-width:720px){.band{padding:56px 0;}}
/* guarded above the band's own mobile breakpoint, so a phone keeps its 56px */
@media(min-width:721px){.hero + .band{padding-top:60px;}}

/* products (routes B & C) */
.shop{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px;text-align:left;}
.item{background:#fff;border-radius:20px;padding:34px 28px;display:flex;flex-direction:column;
  box-shadow:0 2px 3px rgba(10,10,11,.03);}
.item.feat{outline:2px solid var(--accent);}
.item .tagline{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--grey-text);margin-bottom:16px;}
.item.feat .tagline{color:var(--accent);}
.price{font-size:2.1rem;font-weight:800;letter-spacing:-.04em;line-height:1;margin:18px 0 4px;}
.price small{font-size:.95rem;font-weight:700;color:var(--grey-text);letter-spacing:-.01em;}
.price.enquire{font-size:1.25rem;color:var(--grey-text);letter-spacing:-.02em;}
.catalogue-wait{grid-column:1/-1;color:var(--grey-text);font-size:15px;font-weight:500;text-align:center;padding:30px 0;}
/* What a crawler — and anyone whose JavaScript has not arrived yet — reads in place of the
   live cards. Replaced by site.js the moment the catalogue loads, so it is styled to be
   readable rather than to imitate a card it will never become. */
.catalogue-fallback{grid-column:1/-1;max-width:760px;margin:0 auto;text-align:left;}
.catalogue-fallback p{color:var(--grey-text);font-size:15.5px;line-height:1.62;margin:0 0 16px;}
.catalogue-fallback b{color:var(--black);font-weight:800;}
.catalogue-fallback a{color:var(--accent);font-weight:700;white-space:nowrap;}
.catalogue-fallback .catalogue-wait{text-align:left;padding:8px 0 0;font-size:14px;}
.item p{font-size:15px;color:var(--grey-text);font-weight:500;margin:14px 0 0;}
.item ul{list-style:none;padding:0;margin:22px 0 0;}
.item li{font-size:14.5px;font-weight:600;padding:9px 0;border-top:1px solid var(--line);display:flex;gap:10px;}
.item li b{color:var(--accent);font-weight:800;flex:0 0 auto;}
.item .buy{margin-top:auto;padding-top:26px;}
@media(max-width:1040px){.shop{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.shop{grid-template-columns:1fr;}}

/* big feature card (all routes) */
.bigcard{background:#fff;border-radius:26px;padding:56px 52px;box-shadow:0 2px 3px rgba(10,10,11,.03);}
.bigcard-media{margin-top:44px;border-radius:16px;overflow:hidden;background:#5E311C;aspect-ratio:21/9;}
.bigcard-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%;}
.media-movement{aspect-ratio:2/1;}
.media-movement img{object-position:38% 55%;}   /* the lunge + the raised arm, not the machines */
/* Book a session: the strength photo (personal training) beside the intro, the picker below */
/* Same grid, gap and corners as About just above it, and outside the white card:
   inside, the card's padding pushed the photo 40px in from About's and the two
   pictures stood out of line, at two sizes (CG-065). */
.book-intro{display:grid;grid-template-columns:.85fr 1.15fr;gap:58px;align-items:center;margin-bottom:44px;}
.book-media{border-radius:22px;overflow:hidden;background:#5E311C;aspect-ratio:4/5;}
.book-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;}   /* face + the raised dumbbell */
@media(max-width:860px){.book-intro{grid-template-columns:1fr;gap:32px;}.media-movement{aspect-ratio:4/3;}.media-movement img{object-position:35% 50%;}}
.triplet{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:52px;}
.tri{padding:26px 30px 0 0;border-top:2px solid var(--line);}
.tri:first-child{border-top-color:var(--black);}
.tri .ti{font-size:21px;margin-bottom:14px;display:block;}
.tri h3{font-size:1.08rem;letter-spacing:-.02em;line-height:1.3;}
.tri p{font-size:15.5px;color:var(--grey-text);margin:9px 0 0;font-weight:500;}
@media(max-width:860px){
  .bigcard{padding:36px 24px;border-radius:20px;}
  .bigcard-media{aspect-ratio:4/3;}
  .triplet{grid-template-columns:1fr;}.tri{padding-right:0;}
}

/* pale block (all routes) */
.pale{background:var(--accent-pale);border-radius:26px;padding:56px 52px;}
.pale-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
.pale-media{border-radius:18px;overflow:hidden;background:#5E311C;aspect-ratio:4/5;}
.pale-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 10%;}
@media(max-width:860px){.pale{padding:36px 24px;}.pale-grid{grid-template-columns:1fr;gap:32px;}}

/* about (all routes) */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:58px;align-items:center;}
.about-photo{border-radius:22px;overflow:hidden;background:#5E311C;aspect-ratio:4/5;}
.about-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%;}   /* the smile stays in frame */
/* the Zimbabwe Bird: one cultural signature next to the origin story — monochrome, small, static; not a logo */
/* The Zimbabwe bird marks each section heading. It is authored in its own gold
   (#ffd200) — the greyscale filter that used to sit here threw that away. */
.sec-title{display:flex;align-items:flex-start;gap:14px;}
.center .sec-title{justify-content:center;}
/* Sized in em so it holds its proportion against every heading it marks — the
   section titles run to ~50px, the About one is smaller. .8em puts it at the
   cap height; the margin drops its centre onto the cap's centre line. */
.zw-bird{flex:0 0 auto;height:.8em;width:auto;margin-top:.12em;}
.facts{list-style:none;padding:0;margin:28px 0 0;}
.facts li{padding:14px 0;border-top:1px solid var(--line);font-size:16px;font-weight:600;display:flex;gap:13px;}
.facts li span{color:var(--accent);font-weight:800;flex:0 0 auto;}
@media(max-width:860px){.about{grid-template-columns:1fr;gap:32px;}}

/* dark strip (routes A & C) */
.strip{background:var(--black);color:#fff;border-radius:20px;padding:40px 44px;
  display:flex;align-items:center;gap:30px;flex-wrap:wrap;}
.strip h3{color:#fff;flex:1;min-width:270px;}
.strip p{color:#A5A5B2;font-size:15.5px;font-weight:500;margin:8px 0 0;max-width:56ch;}
.strip .btn{background:#fff;color:var(--black);}
.strip .btn:hover{background:#E9E9ED;}
@media(max-width:640px){.strip{padding:30px 24px;}.strip .btn{width:100%;}}

/* work together: padel + corporate (route C) */
.together{position:relative;isolation:isolate;overflow:hidden;background:#fff;border-radius:26px;padding:64px 56px 48px;
  box-shadow:0 2px 3px rgba(10,10,11,.03);}
.together::before{content:"";position:absolute;inset:-40% -20% auto auto;width:70%;aspect-ratio:1;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,var(--accent-tint),rgba(233,237,253,0) 72%);
  opacity:0;transform:translate3d(6%,4%,0);transition:opacity 1.4s ease,transform 2.2s cubic-bezier(.2,.7,.2,1);}
.together.in::before{opacity:1;transform:none;}
.together .sub{margin-top:18px;}
.ways{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;margin-top:40px;}
.way{padding:30px 0 6px;border-top:1px solid var(--line);display:flex;flex-direction:column;}
.way-eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;}
.way h3{font-size:clamp(1.35rem,2vw,1.65rem);}
.way p{font-size:15.5px;color:var(--grey-text);font-weight:500;margin:12px 0 0;max-width:46ch;}
.way .way-cred{font-size:14px;font-weight:700;color:var(--black);margin-top:14px;}
.way-cta{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:26px;font-weight:700;font-size:15.5px;text-decoration:none;
  color:var(--black);transition:color .2s ease;}
/* tonal focus: while one panel is hovered, its sibling recedes (colour only, no movement) */
.way h3,.way .way-cred{transition:color .3s ease;}
.way{transition:opacity .3s ease;}
.ways:hover .way:not(:hover){opacity:.62;}
.ways:hover .way:not(:hover) h3{color:var(--grey-text);}
.way-cta span{display:inline-block;transition:transform .25s cubic-bezier(.2,.7,.2,1);}
.way:hover .way-cta,.way-cta:focus-visible{color:var(--accent);}
.way:hover .way-cta span,.way-cta:focus-visible span{transform:translateX(4px);}
@media(max-width:860px){.together{padding:40px 24px 28px;border-radius:20px;}.ways{grid-template-columns:1fr;gap:0;margin-top:28px;}.way{padding:26px 0 4px;}.way-cta{padding-top:20px;margin-bottom:22px;}}

/* enquiry form (routes B & C) */
/* The card is white on a white page, so its top padding reads as page space, not
   as the card breathing — which is what made the run from the closing line to the
   first field feel long. 40px at the top, 52 kept below where the submit button
   needs the room. With the tighter margin above: 86px down to 74px. */
.enquiry{background:#fff;border-radius:26px;padding:40px 48px 52px;max-width:760px;margin:34px auto 0;
  text-align:left;box-shadow:0 2px 3px rgba(10,10,11,.03);}
.field{margin-bottom:20px;}
.field label{display:block;font-size:12.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--grey-text);margin-bottom:9px;}
.field input,.field select,.field textarea,.field .cs-trigger{width:100%;padding:16px 18px;font-family:inherit;
  font-size:16px;font-weight:500;border:1.5px solid var(--line);border-radius:9px;background:#fff;color:var(--black);}
/* searchable country dropdown (enhanced from the plain input) */
.cs{position:relative;}
.cs-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;cursor:pointer;}
.cs-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.cs-trigger[aria-expanded=true]{border-color:var(--accent);}
.cs-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cs-value.ph{color:#9A9AA6;font-weight:500;}
.cs-chev{flex:0 0 auto;width:10px;height:10px;border-right:2px solid var(--grey-text);border-bottom:2px solid var(--grey-text);transform:translateY(-3px) rotate(45deg);transition:transform .2s ease;}
.cs-trigger[aria-expanded=true] .cs-chev{transform:translateY(2px) rotate(225deg);}
.cs-pop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;background:#fff;border:1.5px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(10,10,11,.10);padding:8px;}
.cs-pop[hidden]{display:none;}
.cs-search{width:100%;padding:12px 14px;font-family:inherit;font-size:15px;font-weight:500;border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--black);}
.cs-search:focus{outline:none;border-color:var(--accent);}
.cs-list{list-style:none;margin:6px 0 0;padding:0;max-height:240px;overflow:auto;overscroll-behavior:contain;}
.cs-list li{padding:10px 12px;border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;color:var(--black);}
.cs-list li.active,.cs-list li:hover{background:var(--accent-pale);}
.cs-list li.on{color:var(--accent);font-weight:700;}
.cs-list li.cs-empty{color:var(--grey-text);cursor:default;}
.field textarea{min-height:110px;resize:vertical;}
.form-hint{margin:8px 0 0;font-size:13.5px;color:var(--grey-text);font-weight:500;line-height:1.5;}
/* A hint that belongs to a field sits inside it and needs no space below. One that stands
   between two rows — the note under City / Country — is a direct child of the form, and
   without a bottom margin the next row's label lands on top of it. Same 20px as .field, so
   the note keeps the form's rhythm instead of inventing its own. */
.enquiry form > .form-hint{margin:0 0 20px;}
.form-hint[hidden]{display:none;}
.field label .opt{font-weight:600;letter-spacing:0;text-transform:none;color:var(--grey-text);margin-left:6px;}
.field input[type=file]{padding:12px 14px;font-size:14.5px;cursor:pointer;}
.field input[type=file]::file-selector-button{font:inherit;font-weight:700;font-size:13.5px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--black);margin-right:12px;cursor:pointer;}
.media-list{list-style:none;padding:0;margin:8px 0 0;font-size:13.5px;color:var(--grey-text);}
.media-list li{display:flex;justify-content:space-between;gap:12px;padding:4px 0;}
.media-list li b{font-weight:600;color:var(--black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.media-list li.err{color:#B00020;}
.field input:user-invalid{border-color:#B00020;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.two.one{grid-template-columns:1fr;}
.form-status{margin:16px 0 0;font-size:14.5px;font-weight:600;}
.form-status.err{color:#B00020;}
.form-status.ok{color:var(--accent);}
/* secondary contact — under the form's main action */
.form-alt{margin:28px 0 0;padding-top:22px;border-top:1px solid var(--line);text-align:center;}
.form-alt-label{margin:0 0 12px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--grey-text);}
.form-alt-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
.alt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;color:var(--black);font-size:14px;font-weight:700;text-decoration:none;
  transition:border-color .15s ease,color .15s ease;}
.alt-btn:hover,.alt-btn:focus-visible{border-color:var(--black);}
.alt-btn .alt-ico{width:16px;height:16px;flex:0 0 16px;color:var(--grey-text);transition:color .15s ease;}
.alt-btn:hover .alt-ico,.alt-btn:focus-visible .alt-ico{color:var(--accent);}
@media(max-width:480px){.form-alt-actions{flex-direction:column;}.alt-btn{width:100%;}}
/* booking flow */
.bk{margin-top:34px;text-align:left;}
.bk-step{margin-top:26px;}
.bk-step[hidden]{display:none;}
/* booking steps and footer headings are h3 (they sit under an h2) with the h4 look */
.bk-step h3,.bk-tour h3{font-size:1.08rem;letter-spacing:-.02em;line-height:1.3;}
.bk-step h3{margin-bottom:12px;}
.bk-services{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.bk-service{text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px 18px;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;gap:6px;}
.bk-service b{font-size:16px;}
.bk-service span{font-size:14px;color:var(--grey-text);font-weight:500;}
.bk-service.on{border-color:var(--accent);outline:2px solid var(--accent);}
.bk-tour{margin-top:18px;background:var(--accent-pale);border-radius:14px;padding:16px 18px;}
.bk-tour h3{margin-bottom:8px;}
.bk-tourstop{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-top:1px solid #C6D0F2;font-size:14.5px;}
.bk-tourstop:first-of-type{border-top:0;}
.bk-tourstop span,.bk-tourstop em{color:var(--grey-text);font-weight:500;font-style:normal;}
.bk-date{padding:14px 16px;font-family:inherit;font-size:16px;font-weight:600;border:1.5px solid var(--line);border-radius:9px;background:#fff;color:var(--black);}
.bk-note{font-size:14.5px;color:var(--grey-text);font-weight:500;margin:10px 0 0;}
.bk-slots{display:flex;flex-wrap:wrap;gap:10px;}
.bk-slot{font-family:inherit;font-weight:700;font-size:14.5px;padding:11px 16px;border-radius:9px;border:1.5px solid var(--line);background:#fff;cursor:pointer;}
.bk-slot.tour{border-style:dashed;}
.bk-slot.on,.bk-slot:hover{border-color:var(--accent);}
.bk-slot.on{background:var(--accent);color:#fff;}
.bk-summary{font-size:15.5px;line-height:1.5;margin:0 0 16px;}
.bk-form{max-width:640px;}
.bk-done{background:#fff;border-radius:16px;padding:22px 24px;box-shadow:0 2px 3px rgba(10,10,11,.03);}
.bk-done:empty{display:none;}
.bk-checkout{margin-top:18px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:16px;}
.bk-checkout-mount{min-height:120px;}
.bk-checkout-cancel{margin-top:12px;font:inherit;font-size:14px;font-weight:700;color:var(--grey-text);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.bk-checkout-cancel:hover{color:var(--black);}
.bk-status{margin:14px 0 0;font-size:14.5px;font-weight:600;min-height:1.2em;}
.bk-status.err{color:#B00020;}
.bk-status.ok{color:var(--accent);}
/* honeypot — off-screen, never shown to people, never focusable */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
@media(max-width:640px){.enquiry{padding:32px 22px;}.two{grid-template-columns:1fr;}}

.close{padding:96px 0;text-align:center;}
/* A centred line that would otherwise run to three lines at the shared 60ch. 76ch
   holds these to two — the threshold measured 72ch for both, so this keeps margin
   for a different font rasteriser — and `balance` stops the second line being a
   stub. Still well inside the 1144px the wrap offers. Below about 860px the wrap
   is not wide enough and they take three; that needs shorter copy, not CSS. */
.sub-wide{max-width:76ch;text-wrap:balance;}

/* big footer (routes B & C) */
footer{background:var(--grey-bg);padding:70px 0 0;overflow:hidden;}
/* editorial footer: two tight link columns on the left, the signup as a card on the right */
.f-top{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(170px,.8fr) minmax(300px,1.5fr);gap:40px 56px;align-items:start;}
.f-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 28px 28px;justify-self:end;width:100%;max-width:460px;}
.f-card h3,.f-card h4{margin-bottom:10px;}
.f-top h3,.f-top h4{font-size:14px;font-weight:800;letter-spacing:-.01em;line-height:1.3;color:var(--black);margin-bottom:18px;}
.f-top ul{list-style:none;padding:0;margin:0;}
.f-top li{padding:6px 0;font-size:16px;font-weight:600;}
.f-top a{text-decoration:none;color:var(--grey-text);transition:color .25s ease;}
.f-top a:hover,.f-top a:focus-visible{color:var(--black);}
.f-news-copy{font-size:15.5px;color:var(--grey-text);font-weight:500;margin:0;}
/* Book a session: first in the offer column, lightly accented (black, arrow) */
.f-top a.f-lead{color:var(--black);font-weight:500;display:inline-flex;align-items:center;gap:6px;}
.f-top a.f-lead span{display:inline-block;transition:transform .25s cubic-bezier(.2,.7,.2,1);}
.f-top a.f-lead:hover span,.f-top a.f-lead:focus-visible span{transform:translateX(3px);}
/* Support Coach Gari: a distinct, discreet CTA (design-system button), not a list link */
/* Trim the left inset so the mark sits closer to the button's edge; the right
   side keeps the full padding, which is what shifts the label left with it. */
.f-support-cta{margin-top:16px;padding-left:15px;}
.f-news{display:flex;gap:10px;margin-top:16px;}
.f-news input{flex:1;min-width:0;padding:15px 18px;border:1.5px solid var(--line);border-radius:9px;
  font-family:inherit;font-size:14.5px;background:#fff;}
.f-news button{width:52px;height:52px;flex:0 0 auto;border:0;border-radius:50%;
  background:var(--black);color:#fff;font-size:19px;cursor:pointer;}
/* The wordmark is a watermark: the brand again, at 15% on grey, which no one is meant
   to read. The text lives in CSS, not in the page, so a screen reader does not say the
   name a second time and an audit does not score a logotype as body text (Lighthouse,
   2026-09-30: 1.27:1). The empty div keeps the layout; aria-hidden stays as a belt. */
.wordmark{margin-top:64px;font-size:clamp(3.4rem,12vw,9.5rem);font-weight:800;letter-spacing:-.055em;
  line-height:.85;color:var(--accent);opacity:.15;user-select:none;text-align:center;}
.wordmark::before{content:"Coach Gari.";}
.f-bot{border-top:1px solid var(--line);padding:22px 0 30px;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;gap:16px 22px;
  font-size:14px;color:var(--grey-text);font-weight:500;}
.f-bot-l,.f-bot-c,.f-bot-r{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;}
.f-bot-l{justify-self:start;}
.f-bot-c{justify-self:center;}
.f-bot-r{justify-self:end;}
@media(max-width:820px){
  .f-bot{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .f-bot-l,.f-bot-c,.f-bot-r{justify-self:center;justify-content:center;}
}
.f-bot a{text-decoration:none;}
.f-legal a{color:var(--black);font-weight:600;}
.f-legal a:hover{color:var(--accent);}
/* discreet staff door: the © reads as plain text, links to /admin */
.f-door{color:inherit;text-decoration:none;cursor:text;}
.f-door:hover{color:inherit;}
/* social icons live in the bottom bar, next to the name and mentions */
.f-social{display:inline-flex;align-items:center;gap:14px;}
.f-social a{display:inline-flex;color:var(--grey-text);transition:color .2s ease;}
.f-social a:hover,.f-social a:focus-visible{color:var(--accent);}
.credit{display:flex;align-items:center;gap:9px;}
.credit a{font-weight:700;color:var(--black);text-decoration:none;border-bottom:1.5px solid var(--accent);padding-bottom:1px;}

/* back-to-proposal button */
.f-back{white-space:nowrap;}

/* Oolala (Oo) social follow */
.oo-follow{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--black);}
.oo-follow img{width:20px;height:20px;display:block;}
.oo-follow:hover{color:var(--accent);}

@media(max-width:900px){.f-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;}.f-card{grid-column:1 / -1;justify-self:stretch;max-width:none;}}
@media(max-width:560px){.f-top{grid-template-columns:minmax(0,1fr);gap:30px;}}

/* reveal on scroll: once, on entering the viewport (site.js). One block per section, not per paragraph. */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
/* staggered sequence inside one revealed block: heading, then copy, then the panels */
.reveal-seq>*{opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1);}
.reveal-seq.in>*{opacity:1;transform:none;}
.reveal-seq.in>:nth-child(2){transition-delay:.06s;}
.reveal-seq.in>:nth-child(3){transition-delay:.14s;}
.reveal-seq>.ways{opacity:1;transform:none;transition:none;}   /* the grid itself is static; its two panels stagger in */
.reveal-seq .way{opacity:0;transform:translateY(12px);transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1);}
.reveal-seq.in .way{opacity:1;transform:none;transition-delay:.26s;}
.reveal-seq.in .way:nth-child(2){transition-delay:.38s;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,.reveal-seq>*,.reveal-seq .way{opacity:1;transform:none;transition:none;}
  .together::before{opacity:1;transform:none;transition:none;}
  .nav,.nav-in,.way-cta span,.nav-links a,.way,.way h3,.way .way-cred,.f-top a{transition:none;}
}

.bk-terms{font-size:13px;color:var(--grey-text);margin:10px 0 0;}
.bk-terms a{color:var(--black);}
/* ---- booking picker: families → optional child choice → availability (progressive disclosure) ---- */
.bk-level{overflow:hidden;}
.bk-services{display:flex;flex-wrap:wrap;gap:12px;}
.bk-service{flex:1 1 220px;max-width:calc((100% - 24px) / 3);min-width:0;max-height:160px;box-sizing:border-box;
  transition:opacity .26s cubic-bezier(.2,.7,.2,1),flex-basis .32s cubic-bezier(.2,.7,.2,1),max-width .32s cubic-bezier(.2,.7,.2,1),max-height .32s cubic-bezier(.2,.7,.2,1),padding .32s cubic-bezier(.2,.7,.2,1),border-color .2s;}
.bk-service b,.bk-service span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bk-service.bk-out{opacity:0;flex-basis:0;max-width:0;max-height:0;padding:0;border-width:0;overflow:hidden;pointer-events:none;}
.bk-service[hidden]{display:none;}
.bk-service.ctx{border-color:var(--accent);outline:2px solid var(--accent);}
.bk-service:focus-visible,.bk-back:focus-visible,.bk-retry:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.bk-children{margin-top:12px;transition:opacity .3s cubic-bezier(.2,.7,.2,1),transform .3s cubic-bezier(.2,.7,.2,1);}
.bk-children.bk-enter{opacity:0;transform:translateX(26px);}
.bk-children .bk-services{gap:12px;}
.bk-back{display:inline-block;margin-top:12px;padding:6px 0;background:none;border:0;font-family:inherit;font-weight:700;font-size:14.5px;color:var(--accent);cursor:pointer;}
.bk-error{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.bk-error p{margin:0;font-size:14.5px;font-weight:500;color:#B3261E;}
.bk-retry{font-family:inherit;font-weight:700;font-size:14.5px;padding:9px 14px;border-radius:9px;border:1.5px solid var(--line);background:#fff;cursor:pointer;}
@media(max-width:719px){.bk-service{max-width:100%;flex-basis:100%;} .bk-service.bk-out{flex-basis:0;max-width:0;}}
@media(prefers-reduced-motion:reduce){
  .bk-service,.bk-children{transition:none;}
  .bk-children.bk-enter{opacity:1;transform:none;}
}

/* ---- Support Coach Gari: a compact dialog, subordinate to the coaching CTAs ---- */
.sp{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;}
.sp[hidden]{display:none;}
.sp-back{position:absolute;inset:0;background:rgba(10,10,11,.45);}
.sp-box{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 40px);overflow:auto;background:#fff;border-radius:20px;padding:28px 26px 24px;box-shadow:0 30px 80px rgba(10,10,11,.25);}
.sp-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:var(--accent-pale);font-size:20px;line-height:1;cursor:pointer;color:var(--black);}
.sp-box h3{font-size:22px;margin:0 32px 6px 0;display:flex;align-items:center;gap:9px;}
/* the heart marks Support wherever it is offered: the footer
   call to action, the box itself. An emoji, so it keeps the platform's own artwork —
   sized in em so it follows whatever type it sits next to, and never squeezed by flex. */
/* Drawn, not typed. This was a colour emoji, which sat wrong next to a set of
   monochrome stroked icons and rendered differently on every platform. An inline
   SVG on currentColor matches the form's WhatsApp and email marks — same 1.8
   stroke — takes the button's colour on hover, and needs no baseline hack: the
   flex row centres a box cleanly, which is what an emoji glyph never was. */
/* margin-bottom nudges it up by half, onto the cap-height centre: a flex row
   centres boxes against the line box, which sits lower than the capitals. */
.sup-ico{flex:none;width:17px;height:17px;margin-right:.4em;margin-bottom:2px;}
.sp-box h3 .sup-ico{margin-right:0;width:19px;height:19px;}
.sp-sub{margin:0 0 18px;font-size:14.5px;color:var(--grey-text);font-weight:500;line-height:1.5;}
.sp-amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px;}
.sp-amt{font-family:inherit;font-weight:700;font-size:14.5px;padding:12px 6px;border-radius:10px;border:1.5px solid var(--line);background:#fff;cursor:pointer;color:var(--black);}
.sp-amt.on{border-color:var(--accent);background:var(--accent);color:#fff;}
.sp-amt:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.sp-form .field{margin-bottom:16px;}
.sp-form .field[hidden]{display:none;}
.sp-hint{margin:8px 0 0;font-size:13.5px;font-weight:500;color:#B3261E;line-height:1.5;}
.sp-hint[hidden]{display:none;}
.sp-amounts[hidden]{display:none;}
.sp-terms{font-size:13px;color:var(--grey-text);margin:10px 0 0;text-align:center;}
.sp-terms a{color:var(--black);}
.sp-status{margin:10px 0 0;font-size:14px;font-weight:500;color:var(--grey-text);min-height:1.2em;}
.sp-status.err{color:#B3261E;}
.sp-checkout[hidden],.sp-done[hidden]{display:none;}
.sp-cancel{margin-top:10px;background:none;border:0;font-family:inherit;font-weight:700;font-size:14px;color:var(--grey-text);cursor:pointer;}
.sp-done h4{font-size:20px;margin:0 0 8px;}
.sp-done p{margin:0;font-size:15px;color:var(--grey-text);font-weight:500;line-height:1.5;}
body.sp-open{overflow:hidden;}
@media(max-width:480px){.sp-amounts{grid-template-columns:repeat(2,1fr);}}