/* ==========================================================================
   JUST TREY PERSONAL TRAINING — Design system
   Single stylesheet. No framework, no build step, no external requests.
 
   COLOUR RULES THAT MATTER
   1. White text on brand blue #6CB4D6 measures 2.3:1 and FAILS WCAG AA.
      Black on that blue measures 8.58:1. So blue is only ever a BACKGROUND
      for black text, or a FOREGROUND on black. On light surfaces, text uses
      --blue-ink (#2B6480).
   2. Light sections are warm "paper", not #FFFFFF. Pure white against
      near-black is 19.7:1, which reads as glare. Paper gives 13.1:1 —
      still ~3x the AA floor, far easier on the eye.
   3. --white is reserved for TEXT on dark sections. Never a page background.
   ========================================================================== */
 
/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --black:      #0D0A0A;
  --charcoal:   #171313;
  --white:      #ffffff;   /* TEXT on dark only */
  --blue:       #6CB4D6;   /* Champ Blue */
  --blue-deep:  #4E93B4;
  --blue-ink:   #2B6480;   /* AA-safe blue on light surfaces */
  --grey:       #A8A8A8;
 
  /* Light surfaces */
  --paper:        #F4F1EC;
  --paper-raised: #FAF8F5;
  --paper-sunken: #E9E4DC;
  --blue-wash:    #E7EFF3;
  --ink:          #2B2724;
  --ink-soft:     #544E48;
 
  --line-dark:  #2E2A2A;
  --line-light: #D8D2C9;
 
  /* Buttons that invert against their surface */
  --btn-solid-bg:       #2B2724;
  --btn-solid-fg:       #F4F1EC;
  --btn-solid-bg-hover: #0D0A0A;
 
  /* Feedback */
  --ok:  #2E7D53;
  --err: #B3241C;
 
  /* Spacing */
  --s1:.25rem; --s2:.5rem; --s3:1rem; --s4:1.5rem;
  --s5:2rem;   --s6:3rem;  --s7:4rem; --s8:5rem;
 
  --radius: 3px;
  --content: 1200px;
  --gutter: 20px;
  --section: 72px;
  --header-h: 62px;
  --bar-h: 64px;
 
  --display: "Bebas Neue","Anton","Oswald",Haettenschweiler,"Arial Narrow Bold",Impact,sans-serif;
  --body: "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 
  --t-fast: 150ms cubic-bezier(.2,.6,.3,1);
  --t-base: 300ms cubic-bezier(.2,.6,.3,1);
}
 
@media (min-width:1024px){
  :root{ --gutter:40px; --section:104px; --header-h:78px; }
}
 
/* Automatic dark mode. Delete this block to force light mode permanently. */
@media (prefers-color-scheme: dark){
  :root{
    --paper:        #17191B;
    --paper-raised: #1F2225;
    --paper-sunken: #101214;
    --blue-wash:    #14242C;
    --ink:          #E4E1DC;
    --ink-soft:     #AFABA5;
    --blue-ink:     #7FC2E2;
    --line-light:   #32373B;
    --btn-solid-bg:       #E4E1DC;
    --btn-solid-fg:       #17191B;
    --btn-solid-bg-hover: #FFFFFF;
    --ok:  #8FD9AE;
    --err: #FF8A82;
  }
  .hero__media img,.pair img{ filter:brightness(.88) contrast(1.02); }
  .btn--primary{ background:var(--blue-deep); }
  .btn--primary:hover{ background:var(--blue); }
}
 
/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
 
body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px));
}
@media (min-width:1024px){ body{ font-size:18px; padding-bottom:0; } }
 
img,picture,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
 
h1,h2,h3,h4{
  font-family:var(--display); font-weight:400;
  text-transform:uppercase; letter-spacing:.015em;
  margin:0 0 var(--s3); text-wrap:balance;
}
/* Skew echoes the italic athletic lettering in the logo */
h1,h2{ transform:skewX(-7deg); transform-origin:left; }
h1{ font-size:clamp(2.5rem,11.5vw,5.4rem); line-height:.92; }
h2{ font-size:clamp(2rem,8vw,3.7rem); line-height:.96; }
h3{ font-size:clamp(1.35rem,5vw,1.85rem); line-height:1.05; }
h4{ font-size:1.12rem; line-height:1.15; }
 
p{ margin:0 0 var(--s3); max-width:64ch; }
ul,ol{ margin:0 0 var(--s3); padding-left:1.15em; }
li{ margin-bottom:var(--s2); }
a{ color:inherit; text-underline-offset:3px; }
 
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:var(--radius); }
::selection{ background:var(--blue); color:var(--black); }
 
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.skip-link{
  position:absolute; top:0; left:0; transform:translateY(-120%);
  background:var(--blue); color:var(--black);
  padding:var(--s3) var(--s4); font-weight:700; z-index:200;
}
.skip-link:focus{ transform:translateY(0); }
 
/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--content); margin-inline:auto; padding-inline:var(--gutter); }
 
.section{ padding-block:var(--section); position:relative; }
.section--tight{ padding-block:calc(var(--section)*.62); }
.section--dark{ background:var(--black); color:var(--white); }
.section--paper{ background:var(--paper); }
.section--sunken{ background:var(--paper-sunken); }
.section--wash{ background:var(--blue-wash); }
.section--dark p{ color:#D5D5D5; }
 
.section-head{ margin-bottom:var(--s6); }
.section-head p{ color:var(--ink-soft); }
.section--dark .section-head p{ color:var(--grey); }
 
.eyebrow{
  font-family:var(--body); font-size:.72rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--blue-ink); margin:0 0 var(--s3);
  display:flex; align-items:center; gap:var(--s3);
}
.section--dark .eyebrow{ color:var(--blue); }
.eyebrow::after{ content:""; flex:1; height:1px; background:currentColor; opacity:.45; max-width:110px; }
 
/* The /// divider from the brand artwork */
.brand-rule{ display:flex; align-items:center; gap:var(--s3); margin:var(--s5) 0; color:var(--blue); }
.brand-rule::before,.brand-rule::after{ content:""; flex:1; height:2px; background:currentColor; }
.brand-rule span{ font-family:var(--display); font-size:1.3rem; letter-spacing:.1em; transform:skewX(-14deg); }
 
/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:56px; padding:0 var(--s5);
  font-family:var(--display); font-size:1.3rem; letter-spacing:.05em;
  text-transform:uppercase; text-decoration:none;
  border:2px solid transparent; border-radius:var(--radius);
  cursor:pointer; width:100%; text-align:center;
  transition:background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
@media (min-width:640px){ .btn{ width:auto; } }
 
.btn--primary{ background:var(--blue); color:var(--black); }
.btn--primary:hover{ background:var(--blue-deep); }
 
/* Solid fill that flips with the colour scheme. Replaces an outline style
   that rendered at 1.23:1 on dark cards — effectively invisible. */
.btn--solid{ background:var(--btn-solid-bg); color:var(--btn-solid-fg); }
.btn--solid:hover{ background:var(--btn-solid-bg-hover); }
 
.btn--ghost{ background:transparent; color:currentColor; border-color:currentColor; }
.btn--ghost:hover{ background:currentColor; }
.section--dark .btn--ghost:hover{ color:var(--black); }
.section:not(.section--dark) .btn--ghost:hover{ color:var(--paper); }
 
.btn--small{ min-height:46px; font-size:1.05rem; padding-inline:var(--s4); }
 
.btn-row{ display:flex; flex-direction:column; gap:var(--s3); margin-top:var(--s5); }
@media (min-width:640px){ .btn-row{ flex-direction:row; flex-wrap:wrap; align-items:center; } }
 
.link-arrow{
  display:inline-flex; align-items:center; gap:var(--s2); min-height:44px;
  font-weight:700; font-size:.92rem; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none;
  color:var(--blue-ink); border-bottom:2px solid var(--blue); padding-bottom:2px;
}
.section--dark .link-arrow{ color:var(--blue); }
.link-arrow svg{ width:15px; height:15px; transition:transform var(--t-fast); }
.link-arrow:hover svg{ transform:translateX(4px); }
 
.link-inline{ color:var(--blue-ink); font-weight:600; }
.section--dark .link-inline{ color:var(--blue); }
 
/* --------------------------------------------------------------------------
   5. HEADER — auto-hiding
   Retracts on scroll down, returns on scroll up. Never hides near the top,
   while the menu is open, or while focus is inside it.
   -------------------------------------------------------------------------- */
.header{
  position:sticky; top:0; z-index:100;
  background:var(--black); color:var(--white);
  border-bottom:1px solid var(--line-dark);
  transition:transform var(--t-base),box-shadow var(--t-base);
}
.header[data-stuck="true"]{ box-shadow:0 6px 24px rgba(0,0,0,.45); }
.header[data-hidden="true"]{ transform:translateY(-100%); }
@media (prefers-reduced-motion:reduce){
  .header{ transition:none; }
  .header[data-hidden="true"]{ transform:none; }
}
 
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); height:var(--header-h); }
 
/* Wordmark rebuilt in type: white slab, skewed, blue offset shadow */
.wordmark{
  font-family:var(--display); font-size:1.6rem; letter-spacing:.05em;
  text-transform:uppercase; text-decoration:none; color:var(--white);
  transform:skewX(-9deg); display:inline-block; line-height:1;
  text-shadow:2px 2px 0 var(--blue);
}
@media (min-width:1024px){ .wordmark{ font-size:2rem; } }
.wordmark small{
  display:block; font-family:var(--body); font-size:.5rem; font-weight:700;
  letter-spacing:.34em; color:var(--blue); text-shadow:none; margin-top:2px;
}
 
.nav-desktop{ display:none; }
@media (min-width:1024px){
  .nav-desktop{ display:flex; align-items:center; gap:var(--s4); }
  .nav-desktop a{
    font-size:.78rem; font-weight:700; letter-spacing:.13em;
    text-transform:uppercase; text-decoration:none; color:#CFCFCF;
    padding-block:var(--s2); transition:color var(--t-fast);
  }
  .nav-desktop a:hover,.nav-desktop a[aria-current="page"]{ color:var(--white); }
  .nav-desktop a[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--blue); }
}
.header__cta{ display:none; }
@media (min-width:1024px){ .header__cta{ display:inline-flex; } }
 
.menu-toggle{
  display:inline-flex; align-items:center; gap:var(--s2);
  min-width:48px; min-height:48px; padding:0 var(--s2);
  background:none; border:0; color:var(--white);
  font-family:var(--body); font-size:.76rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
}
@media (min-width:1024px){ .menu-toggle{ display:none; } }
.menu-toggle__bars{ position:relative; width:22px; height:14px; }
.menu-toggle__bars span{ position:absolute; left:0; width:100%; height:2px; background:currentColor; transition:transform var(--t-fast),opacity var(--t-fast); }
.menu-toggle__bars span:nth-child(1){ top:0; }
.menu-toggle__bars span:nth-child(2){ top:6px; }
.menu-toggle__bars span:nth-child(3){ top:12px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
 
.menu{
  position:fixed; inset:var(--header-h) 0 0 0; z-index:99;
  background:var(--black); color:var(--white); overflow-y:auto; display:none;
  padding:var(--s5) var(--gutter) calc(var(--s8) + env(safe-area-inset-bottom,0px));
}
.menu[data-open="true"]{ display:block; }
@media (min-width:1024px){ .menu{ display:none !important; } }
.menu__list{ list-style:none; margin:0 0 var(--s5); padding:0; }
.menu__list li{ margin:0; border-bottom:1px solid var(--line-dark); }
.menu__list a{
  display:block; padding:var(--s4) 0; font-family:var(--display);
  font-size:1.7rem; text-transform:uppercase; text-decoration:none;
  color:var(--white); transform:skewX(-7deg);
}
.menu__list a:hover{ color:var(--blue); }
.menu__actions{ display:flex; flex-direction:column; gap:var(--s3); }
 
/* --------------------------------------------------------------------------
   6. STICKY MOBILE BAR
   -------------------------------------------------------------------------- */
.actionbar{
  position:fixed; left:0; right:0; bottom:0; z-index:98;
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--black); border-top:1px solid var(--line-dark);
  padding-bottom:env(safe-area-inset-bottom,0px);
  transition:transform var(--t-base);
}
.actionbar[data-hidden="true"]{ transform:translateY(120%); }
.actionbar a{
  display:flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:var(--bar-h); font-family:var(--display); font-size:1.12rem;
  letter-spacing:.05em; text-transform:uppercase; text-decoration:none; color:var(--white);
}
.actionbar a svg{ width:18px; height:18px; flex:none; }
.actionbar a + a{ background:var(--blue); color:var(--black); }
@media (min-width:1024px){ .actionbar{ display:none; } }
 
/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero{ background:var(--black); color:var(--white); position:relative; padding-block:var(--s7) 0; overflow:hidden; }
.hero__grid{ display:grid; gap:var(--s6); }
.hero h1{ margin-bottom:var(--s4); }
.hero h1 .hey{ display:block; font-size:.5em; letter-spacing:.03em; color:var(--blue); margin-bottom:.16em; }
.hero__lead{ font-size:1.05rem; color:#D9D9D9; max-width:46ch; }
.hero__where{ font-size:.76rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--grey); margin-bottom:var(--s5); }
.hero__media{ position:relative; margin-inline:calc(var(--gutter)*-1); }
.hero__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.hero__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,rgba(13,10,10,.9) 0%,rgba(13,10,10,0) 55%);
}
@media (min-width:1024px){
  .hero{ padding-block:var(--s8) 0; }
  .hero__grid{ grid-template-columns:55fr 45fr; align-items:center; gap:var(--s7); }
  .hero__media{ margin-inline:0; }
  .hero__media img{ border-radius:var(--radius); }
  .hero__lead{ font-size:1.15rem; }
}
 
/* Service strip — BOXING | KETTLEBELLS | PERSONAL TRAINING */
.strip{ background:var(--charcoal); border-top:1px solid var(--line-dark); color:var(--white); }
.strip__list{ list-style:none; margin:0; padding:var(--s4) 0; display:grid; gap:var(--s4); text-align:center; }
.strip__list li{ margin:0; display:flex; flex-direction:column; align-items:center; gap:var(--s2); }
.strip__list svg{ width:38px; height:38px; color:var(--white); }
.strip__list span{ font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--blue); }
@media (min-width:640px){ .strip__list{ grid-template-columns:repeat(4,1fr); } }
 
/* --------------------------------------------------------------------------
   8. TRUST BAR — credentials
   -------------------------------------------------------------------------- */
.trustbar{ background:var(--charcoal); color:var(--white); border-top:1px solid var(--line-dark); }
.trustbar__list{ list-style:none; margin:0; padding:var(--s5) 0; display:grid; gap:var(--s3); }
.trustbar__list li{ margin:0; display:flex; align-items:center; gap:var(--s3); font-size:.88rem; color:#D5D5D5; }
.trustbar__list svg{ width:22px; height:22px; flex:none; color:var(--blue); }
@media (min-width:768px){ .trustbar__list{ grid-template-columns:repeat(2,1fr); gap:var(--s4); } }
@media (min-width:1024px){ .trustbar__list{ grid-template-columns:repeat(4,1fr); } }
 
/* --------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */
.grid{ display:grid; gap:var(--s3); }
@media (min-width:768px){ .grid{ gap:var(--s4); } }
@media (min-width:768px){ .grid--2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:768px){ .grid--3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .grid--3{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:640px){ .grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .grid--4{ grid-template-columns:repeat(4,1fr); } }
 
.card{
  position:relative; display:flex; flex-direction:column; height:100%;
  padding:var(--s4); background:var(--paper-raised);
  border:1px solid var(--line-light); border-radius:var(--radius);
  transition:border-color var(--t-fast);
}
@media (min-width:1024px){ .card{ padding:var(--s5); } }
.card::before{ content:""; position:absolute; top:-1px; left:-1px; width:46px; height:4px; background:var(--blue); transition:width var(--t-base); }
.card:hover,.card:focus-within{ border-color:var(--ink); }
.card:hover::before,.card:focus-within::before{ width:92px; }
.card h3{ margin-bottom:var(--s2); }
.card p{ color:var(--ink-soft); margin-bottom:var(--s3); }
.card__meta{ margin-top:auto; font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.card__icon{ width:34px; height:34px; color:var(--blue-ink); margin-bottom:var(--s3); }
 
.section--dark .card{ background:var(--charcoal); border-color:var(--line-dark); color:var(--white); }
.section--dark .card p{ color:#C9C9C9; }
.section--dark .card:hover{ border-color:var(--white); }
.section--dark .card__meta{ color:var(--grey); }
.section--dark .card__icon{ color:var(--blue); }
 
.card--link a::after{ content:""; position:absolute; inset:0; }
 
.step__num{ display:block; font-family:var(--display); font-size:3rem; line-height:.8; color:var(--blue-ink); margin-bottom:var(--s2); transform:skewX(-9deg); }
.section--dark .step__num{ color:var(--blue); }
 
/* --------------------------------------------------------------------------
   10. PRICING
   -------------------------------------------------------------------------- */
.price-card--feature{ border-color:var(--blue-ink); border-width:2px; }
.section--dark .price-card--feature{ border-color:var(--blue); }
.price-badge{
  position:absolute; top:0; right:var(--s4); transform:translateY(-50%);
  background:var(--blue); color:var(--black);
  font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--radius);
}
.price-card__amount{ font-family:var(--display); font-size:2.7rem; line-height:1; margin-bottom:var(--s1); transform:skewX(-7deg); transform-origin:left; }
.price-card__unit{ font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:var(--s4); }
.section--dark .price-card__unit{ color:var(--grey); }
.price-card__total{ font-size:.92rem; font-weight:600; margin-bottom:var(--s4); }
.price-card ul{ list-style:none; padding:0; margin-bottom:var(--s4); }
.price-card li{ display:flex; gap:var(--s2); font-size:.93rem; }
.price-card li svg{ width:16px; height:16px; color:var(--blue-ink); flex:none; margin-top:.3em; }
.section--dark .price-card li svg{ color:var(--blue); }
.price-card .btn{ margin-top:auto; }
 
.note{
  display:flex; gap:var(--s3); align-items:flex-start;
  padding:var(--s4); margin-top:var(--s5);
  border:1px solid var(--line-light); border-left:4px solid var(--blue);
  border-radius:var(--radius); background:var(--blue-wash);
}
.section--dark .note{ background:var(--charcoal); border-color:var(--line-dark); border-left-color:var(--blue); }
.note svg{ width:20px; height:20px; flex:none; color:var(--blue-ink); margin-top:.2em; }
.section--dark .note svg{ color:var(--blue); }
.note p{ margin:0; font-size:.93rem; }
 
/* --------------------------------------------------------------------------
   11. REVIEWS
   -------------------------------------------------------------------------- */
.rating-strip{ text-align:center; margin-bottom:var(--s6); }
.rating-strip__stars{ display:flex; justify-content:center; gap:5px; margin-bottom:var(--s3); color:var(--blue); }
.rating-strip__stars svg{ width:28px; height:28px; }
.rating-strip__line{ font-family:var(--display); font-size:clamp(1.6rem,5vw,2.4rem); letter-spacing:.02em; text-transform:uppercase; margin:0 0 var(--s3); transform:skewX(-7deg); }
.rating-strip a{ display:inline-flex; align-items:center; gap:var(--s2); min-height:44px; font-weight:700; font-size:.88rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--blue-ink); border-bottom:2px solid var(--blue); }
.section--dark .rating-strip a{ color:var(--blue); }
.rating-strip a svg{ width:14px; height:14px; }
 
.review{ display:flex; flex-direction:column; gap:var(--s3); }
.review__stars{ display:flex; gap:3px; color:var(--blue-ink); }
.section--dark .review__stars{ color:var(--blue); }
.review__stars svg{ width:16px; height:16px; }
.review h3{ font-size:1.15rem; }
.review p{ flex:1; }
.review__by{ font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:0; }
.section--dark .review__by{ color:var(--grey); }
.review__src{ color:var(--blue-ink); text-decoration:none; }
.section--dark .review__src{ color:var(--blue); }
.review__src:hover{ text-decoration:underline; }
.disclaimer{ font-size:.82rem; color:var(--ink-soft); margin-top:var(--s5); max-width:none; }
.section--dark .disclaimer{ color:var(--grey); }
 
/* --------------------------------------------------------------------------
   12. COVERAGE MAP
   Inline SVG. No tiles, no API key, no third-party script, no cookie banner.
   Pin positions projected from real coordinates.
   -------------------------------------------------------------------------- */
.map{ display:grid; gap:var(--s5); }
@media (min-width:1024px){ .map{ grid-template-columns:1.45fr 1fr; gap:var(--s6); align-items:start; } }
 
.map__frame{
  position:relative; border:1px solid var(--line-dark); border-radius:var(--radius);
  background:linear-gradient(160deg,#10161A 0%,#0D1114 60%,#0D0A0A 100%); overflow:hidden;
}
.section:not(.section--dark) .map__frame{
  border-color:var(--line-light);
  background:linear-gradient(160deg,#EDF3F6 0%,#E9EFF2 60%,var(--paper-sunken) 100%);
}
.map__svg{ width:100%; height:auto; display:block; touch-action:manipulation; }
 
.map__grid line{ stroke:var(--blue); stroke-width:.5; opacity:.05; }
.map__zone{ fill:var(--blue); fill-opacity:.09; stroke:var(--blue); stroke-width:1.5; stroke-dasharray:7 6; stroke-opacity:.5; }
.map__thames{ stroke:var(--blue); stroke-width:9; stroke-opacity:.28; stroke-linecap:round; stroke-linejoin:round; }
.map__river-label{ fill:var(--blue); opacity:.45; font:700 11px/1 var(--body); letter-spacing:.28em; }
.map__central circle{ fill:var(--grey); opacity:.55; }
.map__central text{ fill:var(--grey); opacity:.65; font:700 10px/1 var(--body); letter-spacing:.18em; }
.section:not(.section--dark) .map__central circle,
.section:not(.section--dark) .map__central text{ fill:var(--ink-soft); opacity:.7; }
 
.pin{ cursor:pointer; }
.pin__halo{ fill:var(--blue); opacity:0; transition:opacity var(--t-fast); }
.pin__plate{ fill:var(--black); fill-opacity:.82; stroke:var(--line-dark); stroke-width:1; transition:fill-opacity var(--t-fast),stroke var(--t-fast); }
.section:not(.section--dark) .pin__plate{ fill:var(--paper-raised); fill-opacity:.94; stroke:var(--line-light); }
.pin__dot{ fill:var(--blue); stroke:var(--black); stroke-width:2.5; transition:r var(--t-fast); }
.section:not(.section--dark) .pin__dot{ stroke:var(--paper); }
.pin__label{ fill:var(--white); font:700 15px/1 var(--body); letter-spacing:.04em; pointer-events:none; }
.section:not(.section--dark) .pin__label{ fill:var(--ink); }
.pin:hover .pin__halo,.pin:focus-visible .pin__halo,.pin[data-active="true"] .pin__halo{ opacity:.22; }
.pin:hover .pin__dot,.pin:focus-visible .pin__dot{ r:9.5; }
.pin[data-active="true"] .pin__dot{ r:10.5; fill:var(--white); }
.section:not(.section--dark) .pin[data-active="true"] .pin__dot{ fill:var(--blue-ink); }
.pin:hover .pin__plate,.pin:focus-visible .pin__plate,.pin[data-active="true"] .pin__plate{ fill-opacity:.96; stroke:var(--blue); }
.pin:focus{ outline:none; }
.pin:focus-visible .pin__dot{ stroke:var(--blue); stroke-width:3; }
@media (prefers-reduced-motion:reduce){ .pin__halo,.pin__dot{ transition:none; } }
 
/* Pulse until first interaction, to signal the map is tappable */
@media (prefers-reduced-motion:no-preference){
  .map:not([data-touched="true"]) .pin__dot{ animation:pinPulse 2.8s ease-in-out infinite; }
  .map:not([data-touched="true"]) .pin:nth-of-type(2n) .pin__dot{ animation-delay:.5s; }
  .map:not([data-touched="true"]) .pin:nth-of-type(3n) .pin__dot{ animation-delay:1s; }
}
@keyframes pinPulse{ 0%,100%{ r:7.5 } 50%{ r:9 } }
 
.map__aside{ display:flex; flex-direction:column; gap:var(--s4); }
.map__hint{ font-size:.85rem; color:var(--grey); margin:0; }
.section:not(.section--dark) .map__hint{ color:var(--ink-soft); }
 
.chips{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); grid-template-columns:repeat(2,1fr); }
.chip{
  display:flex; align-items:center; gap:var(--s2); width:100%; min-height:48px;
  padding:var(--s2) var(--s3); font:600 .92rem/1.2 var(--body); text-align:left;
  color:inherit; background:transparent; border:1px solid var(--line-dark);
  border-radius:var(--radius); cursor:pointer;
  transition:border-color var(--t-fast),background-color var(--t-fast);
}
.section:not(.section--dark) .chip{ border-color:var(--line-light); }
.chip svg{ width:15px; height:15px; flex:none; color:var(--blue); }
.section:not(.section--dark) .chip svg{ color:var(--blue-ink); }
.chip:hover{ border-color:var(--blue); }
.chip[aria-pressed="true"]{ border-color:var(--blue); background:rgba(108,180,214,.12); }
 
.map__panel{
  border:1px solid var(--line-dark); border-left:4px solid var(--blue);
  border-radius:var(--radius); padding:var(--s4); background:var(--charcoal);
}
.section:not(.section--dark) .map__panel{ background:var(--paper-raised); border-color:var(--line-light); border-left-color:var(--blue-ink); }
.map__panel h3{ margin-bottom:var(--s1); }
.map__panel .region{ font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--blue); margin-bottom:var(--s3); }
.section:not(.section--dark) .map__panel .region{ color:var(--blue-ink); }
.map__panel p{ font-size:.95rem; margin-bottom:var(--s4); }
.map__panel .btn{ width:100%; }
@media (min-width:640px){ .map__panel .btn{ width:auto; } }
 
/* --------------------------------------------------------------------------
   13. VALUES LADDER
   One continuous rail with nodes, replacing loose triangle glyphs that sat at
   a different visual weight to the lettering.
   -------------------------------------------------------------------------- */
.ladder{ --rail:2px; position:relative; list-style:none; margin:0 auto; padding:0; max-width:640px; text-align:center; }
.ladder::before{
  content:""; position:absolute; top:.35em; bottom:.35em; left:50%;
  width:var(--rail); margin-left:calc(var(--rail)/-2); border-radius:var(--rail);
  background:linear-gradient(to bottom,transparent 0,var(--blue) 8%,var(--blue) 92%,transparent 100%);
  opacity:.5;
}
.ladder li{ position:relative; margin:0; padding-block:var(--s3); }
.ladder__word{
  position:relative; display:inline-block; padding-inline:var(--s5);
  background:var(--black); font-family:var(--display);
  font-size:clamp(1.9rem,8.5vw,3.6rem); line-height:1; transform:skewX(-7deg);
}
.ladder li + li::before{
  content:""; position:absolute; top:calc(var(--s3)*-1 - 1px); left:50%;
  width:9px; height:9px; margin-left:-4.5px;
  transform:translateY(-50%) rotate(45deg);
  background:var(--blue); border-radius:1px;
}
.ladder__goal{ padding-top:var(--s4); }
.ladder__goal .ladder__word{ color:var(--blue); font-size:clamp(2.2rem,10vw,4.4rem); }
 
@media (prefers-reduced-motion:no-preference){
  .js .ladder li{ opacity:0; transform:translateY(12px); transition:opacity .45s ease,transform .45s ease; }
  .js .ladder[data-visible="true"] li{ opacity:1; transform:none; }
  .js .ladder[data-visible="true"] li:nth-child(1){ transition-delay:0ms; }
  .js .ladder[data-visible="true"] li:nth-child(2){ transition-delay:90ms; }
  .js .ladder[data-visible="true"] li:nth-child(3){ transition-delay:180ms; }
  .js .ladder[data-visible="true"] li:nth-child(4){ transition-delay:270ms; }
  .js .ladder[data-visible="true"] li:nth-child(5){ transition-delay:360ms; }
}
 
/* --------------------------------------------------------------------------
   14. MEDIA PAIRS / QUOTES / CONTACT LIST
   -------------------------------------------------------------------------- */
.pair{ display:grid; gap:var(--s5); align-items:center; }
@media (min-width:1024px){ .pair{ grid-template-columns:42fr 58fr; gap:var(--s7); } }
@media (min-width:1024px){ .pair--flip > *:first-child{ order:2; } }
.pair img{ border-radius:var(--radius); width:100%; object-fit:cover; }
 
.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); }
.contact-list li{ margin:0; display:flex; align-items:center; gap:var(--s4); padding-bottom:var(--s3); border-bottom:1px solid var(--line-dark); }
.section:not(.section--dark) .contact-list li{ border-bottom-color:var(--line-light); }
.contact-list .ico{
  flex:none; width:46px; height:38px; display:grid; place-items:center;
  border:1px solid currentColor; color:var(--blue); transform:skewX(-14deg);
}
.contact-list .ico svg{ width:19px; height:19px; transform:skewX(14deg); }
.contact-list a,.contact-list span{ font-weight:600; letter-spacing:.06em; text-decoration:none; word-break:break-word; }
.contact-list a:hover{ color:var(--blue); }
.section:not(.section--dark) .contact-list .ico{ color:var(--blue-ink); }
.section:not(.section--dark) .contact-list a:hover{ color:var(--blue-ink); }
 
/* --------------------------------------------------------------------------
   15. FORMS
   -------------------------------------------------------------------------- */
.form{ max-width:620px; }
.field{ margin-bottom:var(--s4); }
.field label{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:var(--s2); }
.field .opt{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--grey); }
.field .hint{ font-size:.84rem; color:var(--grey); font-weight:400; letter-spacing:0; text-transform:none; margin-top:var(--s1); }
.input,.select,.textarea{
  width:100%; min-height:52px; padding:var(--s3);
  font:inherit; font-size:16px;            /* 16px stops iOS zooming on focus */
  color:var(--ink); background:var(--paper-raised);
  border:2px solid var(--line-light); border-radius:var(--radius);
  transition:border-color var(--t-fast);
}
.textarea{ min-height:110px; resize:vertical; }
.section--dark .input,.section--dark .select,.section--dark .textarea{
  background:var(--charcoal); color:var(--white); border-color:var(--line-dark);
}
.input:focus,.select:focus,.textarea:focus{ border-color:var(--blue); }
.input[aria-invalid="true"]{ border-color:var(--err); }
.error{ display:none; margin-top:var(--s2); font-size:.88rem; font-weight:600; color:var(--err); }
.error[data-show="true"]{ display:block; }
 
/* Honeypot — offscreen, not display:none, which better bots skip */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
 
.status-panel{
  margin-top:var(--s4); padding:var(--s4);
  border:1px solid var(--line-dark); border-left:4px solid var(--blue);
  border-radius:var(--radius); background:var(--charcoal);
}
.section:not(.section--dark) .status-panel{ background:var(--blue-wash); border-color:var(--line-light); border-left-color:var(--blue-ink); }
.status-panel[hidden]{ display:none; }
.status-panel[data-state="ok"]{ border-left-color:var(--ok); }
.status-panel[data-state="error"]{ border-left-color:var(--err); }
.status-panel h3{ margin-bottom:var(--s2); }
.status-panel p:last-child{ margin-bottom:0; }
.btn[aria-busy="true"]{ opacity:.65; pointer-events:none; }
 
/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq{ max-width:840px; }
.faq__item{ border-bottom:1px solid var(--line-light); }
.section--dark .faq__item{ border-bottom-color:var(--line-dark); }
.faq__trigger{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  width:100%; min-height:64px; padding:var(--s4) 0;
  background:none; border:0; text-align:left;
  font-family:var(--body); font-size:1.02rem; font-weight:600; color:inherit; cursor:pointer;
}
.faq__icon{ position:relative; width:18px; height:18px; flex:none; color:var(--blue-ink); }
.section--dark .faq__icon{ color:var(--blue); }
.faq__icon::before,.faq__icon::after{ content:""; position:absolute; background:currentColor; transition:transform var(--t-fast),opacity var(--t-fast); }
.faq__icon::before{ top:8px; left:0; width:18px; height:2px; }
.faq__icon::after{ left:8px; top:0; width:2px; height:18px; }
.faq__trigger[aria-expanded="true"] .faq__icon::after{ transform:rotate(90deg); opacity:0; }
.faq__panel{ padding-bottom:var(--s4); }
.faq__panel[hidden]{ display:none; }
.faq__panel p:last-child{ margin-bottom:0; }
 
/* --------------------------------------------------------------------------
   17. PAGE HEAD / PROSE / FOOTER / 404
   -------------------------------------------------------------------------- */
.cta-block{ text-align:left; }
@media (min-width:1024px){
  .cta-block{ text-align:center; }
  .cta-block p{ margin-inline:auto; }
  .cta-block .btn-row{ justify-content:center; }
  .cta-block .eyebrow{ justify-content:center; }
}
 
.pagehead{ background:var(--black); color:var(--white); padding-block:var(--s7); }
.pagehead p{ max-width:58ch; color:#D9D9D9; font-size:1.05rem; }
.breadcrumbs{ font-size:.8rem; color:var(--grey); margin-bottom:var(--s4); }
.breadcrumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--s2); padding:0; margin:0; }
.breadcrumbs li{ margin:0; }
.breadcrumbs li + li::before{ content:"/"; margin-right:var(--s2); opacity:.5; }
.breadcrumbs a{ color:var(--grey); }
.breadcrumbs a:hover{ color:var(--white); }
 
.prose h3{ margin-top:var(--s6); }
.prose h3:first-child{ margin-top:0; }
.prose h2{ font-size:1.5rem; line-height:1.1; margin-top:var(--s6); transform:none; scroll-margin-top:var(--s4); }
.toc{ background:var(--paper-raised); border:1px solid var(--line-light); border-radius:var(--radius); padding:var(--s4); margin-bottom:var(--s6); }
.toc h2{ font-family:var(--body); font-size:.74rem; letter-spacing:.2em; margin:0 0 var(--s3); color:var(--ink-soft); text-transform:uppercase; }
.toc ol{ margin:0; padding-left:1.3em; }
@media (min-width:700px){ .toc ol{ columns:2; column-gap:var(--s5); } }
.toc li{ margin-bottom:var(--s1); font-size:.94rem; }
.key{ background:var(--paper-raised); border:1px solid var(--line-light); border-left:4px solid var(--blue);border-radius:var(--radius); padding:var(--s4); margin:var(--s4) 0; }
.key p:last-child{ margin-bottom:0; }
.key strong{ color:var(--blue-ink); }
.tbl-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; margin:var(--s4) 0; font-size:.92rem; }
th,td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line-light); vertical-align:top; }
th{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:700;}
.contact-box{ background:var(--paper-raised); border:1px solid var(--line-light); border-radius:var(--radius); padding:var(--s4); margin-top:var(--s5); }
.contact-box p:last-child{ margin-bottom:0; }
 
.footer{ background:var(--black); color:var(--white); padding-block:var(--s7) var(--s5); }
.footer__grid{ display:grid; gap:var(--s5); }
@media (min-width:768px){ .footer__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .footer__grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s6); } }
.footer h2{ font-family:var(--body); font-size:.82rem; font-weight:700; letter-spacing:.2em; color:var(--blue); margin-bottom:var(--s3); transform:none; }
.footer ul{ list-style:none; padding:0; margin:0; }
.footer li{ margin-bottom:var(--s2); }
.footer a{ color:#CBCBCB; text-decoration:none; font-size:.93rem; display:inline-block; min-height:32px; }
.footer a:hover{ color:var(--white); text-decoration:underline; }
.footer__tag{ color:var(--grey); font-size:.9rem; max-width:34ch; }
.footer__bottom{
  margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:space-between;
  font-size:.82rem; color:var(--grey);
}
.footer__bottom p{ margin:0; max-width:none; }
 
.error-page{ text-align:center; padding-block:var(--s8); }
.error-page h1{ color:var(--blue); transform:skewX(-7deg); }
.error-page p{ margin-inline:auto; }
.error-page .eyebrow{ justify-content:center; }
 
/* --------------------------------------------------------------------------
   18. MOTION / PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{ opacity:0; transform:translateY(18px); transition:opacity var(--t-base),transform var(--t-base); }
  .js .reveal[data-visible="true"]{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
@media print{
  .header,.actionbar,.menu,.btn,.footer{ display:none !important; }
  body{ padding-bottom:0; color:#000; background:#fff; }
  .section--dark,.hero,.pagehead{ background:#fff !important; color:#000 !important; }
  h1,h2,.wordmark,.ladder__word{ transform:none !important; text-shadow:none !important; }
}
 


/* V2 group, school and corporate quotation callout */
.group-quote{
  margin-top:var(--s6); padding:clamp(1.5rem,4vw,3rem);
  background:var(--blue-wash); color:var(--ink);
  border:1px solid var(--line-light); border-left:6px solid var(--blue-ink);
  border-radius:var(--radius);
}
.group-quote h2{ max-width:18ch; }
.group-quote ul{ columns:1; margin-block:var(--s4); }
.group-quote li{ break-inside:avoid; }
.group-quote .btn{ margin-top:var(--s3); }
.section--dark .group-quote{ background:var(--charcoal); color:var(--white); border-color:var(--line-dark); border-left-color:var(--blue); }
.section--dark .group-quote p{ color:#D5D5D5; }
@media (min-width:768px){ .group-quote ul{ columns:2; column-gap:var(--s6); } }