/* ==========================================================================
   Coach K - Ryan Kharouf, CAT(c)
   Montreal - Gym Studio 8860 / Therapy Studio 8854 St-Laurent
   --------------------------------------------------------------------------
   ONE-LINE BRAND SWITCH: change --tape below to re-skin the whole site.
   ========================================================================== */

:root{
  /* Colour */
  --ink:      #0F1114;   /* page background - gym rubber charcoal */
  --slab:     #171A1F;   /* raised panel */
  --slab-2:   #1E222A;   /* input / hover panel */
  --line:     #2A2F37;   /* hairline */
  --line-hi:  #3B424E;   /* hairline hover */
  --bone:     #F3F0EA;   /* athletic tape off-white - text + light sections */
  --bone-dim: #D8D4CC;
  --mute:     #98A0AC;   /* secondary text on dark */
  --mute-2:   #626A76;   /* tertiary */
  /* Sampled off the live site, not guessed: 30,899 px at 97.9% of the flat
     red in the hero block. #B8240A carries white at 6.4:1 and reads on bone
     at 5.6:1, so one red covers fills and light sections both. It only makes
     3:1 on ink, which is what --tape-lite is for. */
  --tape:     #B8240A;   /* ACCENT - the brand red */
  --tape-hov: #9C1E08;   /* fill hover - deepens, since white rides on it */
  --tape-lite:#EE4B30;   /* lifted for red text on the dark sections */
  --tape-glow:rgba(184,36,10,.14);
  --flag:     #E0533D;   /* errors only */

  /* Surface tokens. Components read these and never name a tone directly, so
     the same card works on ink or on bone. Sections set them, once, below. */
  --surface:   #0F1114;
  --surface-2: #171A1F;
  --rule:      #2A2F37;
  --rule-hi:   #3B424E;
  --txt:       #F3F0EA;
  --txt-mute:  #98A0AC;
  --txt-dim:   #626A76;
  --kicker:    #626A76;

  /* Type */
  --display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --body:    'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Space */
  --gut: clamp(20px, 5vw, 40px);
  --sec: clamp(64px, 9vw, 128px);
  --max: 1200px;

  --r:  4px;
  --r2: 10px;

  color-scheme: dark;
}

/* --------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}

:focus-visible{
  outline:2px solid var(--tape);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--tape);color:#FFFFFF;padding:12px 20px;font-weight:700;
}
.skip:focus{left:0}

/* ------------------------------------------------------------ typography -- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  font-stretch:118%;
  text-transform:uppercase;
  letter-spacing:-.015em;
  line-height:.95;
  margin:0;
}

h2{font-size:clamp(2rem, 5.2vw, 3.75rem)}
h3{font-size:clamp(1.35rem, 2.4vw, 1.75rem);font-stretch:110%}
h4{font-size:1.05rem;font-stretch:105%;letter-spacing:.01em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

/* Eyebrow: condensed + tracked. Used to name the section, never to decorate. */
.eyebrow{
  font-family:var(--display);
  font-weight:700;
  font-stretch:80%;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--kicker);
  margin:0 0 14px;
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{
  content:"";
  width:26px;height:2px;
  background:var(--tape);
  flex:none;
}
/* Kicker grey is set for the light band. On the dark sections it drops to
   3.5:1, so lift it there. */
.sec-ink .eyebrow,.sec-slab .eyebrow,.hero .eyebrow{color:#8C94A0}

.lede{
  font-size:clamp(1.02rem, 1.7vw, 1.22rem);
  color:var(--mute);
  max-width:60ch;
  line-height:1.6;
}

/* ------------------------------------------------------------- layout ---- */
.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
}

section{padding-block:var(--sec)}
.sec-ink{background:var(--ink)}
/* Where two dark bands meet, a hairline keeps the seam from reading as one
   giant slab of dead space. */
.sec-ink + .sec-ink{border-top:1px solid rgba(255,255,255,.05)}
.sec-slab{
  background:var(--slab);
  --surface:#171A1F;
  --surface-2:#1E222A;
}
/* Light section. background is declared outright so iOS dark mode cannot punch
   through it, and the surface tokens flip with it so every card, rule and line
   of secondary text inside comes along without its own override. */
.sec-bone{
  background:var(--bone);
  color:#15181C;
  --surface:   #FFFFFF;
  --surface-2: #FAF8F4;
  --rule:      #DFDAD1;
  --rule-hi:   #C9C4BA;
  --txt:       #15181C;
  --txt-mute:  #5A626C;
  --txt-dim:   #6E6659;
  --kicker:    #6E6659;
}
.sec-bone h2,.sec-bone h3,.sec-bone h4{color:#0F1114}
.sec-bone .lede{color:#4C5560}

h2 em,h3 em{font-style:normal;color:var(--tape-lite)}
.sec-bone h2 em,.sec-bone h3 em{color:var(--tape)}

.head{max-width:64ch;margin-bottom:clamp(38px,5vw,64px)}
.head.center{margin-inline:auto;text-align:center}
.head.center .eyebrow{justify-content:center}
.head.center .lede{margin-inline:auto}
.head h2 + .lede{margin-top:20px}

/* ------------------------------------------------------------ buttons ---- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--display);
  font-weight:800;
  font-stretch:90%;
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  padding:15px 26px;
  border:1px solid transparent;
  border-radius:var(--r);
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:15px;height:15px;flex:none}

.btn-fill{background:var(--tape);color:#FFFFFF;border-color:var(--tape)}
.btn-fill:hover{background:var(--tape-hov);border-color:var(--tape-hov)}

.btn-line{background:transparent;color:var(--bone);border-color:var(--line-hi)}
.btn-line:hover{border-color:var(--tape);color:var(--tape)}

.sec-bone .btn-line{color:#15181C;border-color:#C9C4BA}
.sec-bone .btn-line:hover{border-color:var(--tape);color:var(--tape)}

.btn-lg{padding:18px 34px;font-size:1rem}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ============================================================== HEADER ==== */
.hdr{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}
.hdr.stuck{
  background:rgba(15,17,20,.92);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--line);
}
.hdr-in{
  display:flex;
  align-items:center;
  gap:clamp(16px,3vw,40px);
  height:76px;
}
.brand{flex:none;display:flex;align-items:center}
.brand img{height:34px;width:auto;max-width:170px;object-fit:contain}
.brand .brand-txt{
  font-family:var(--display);
  font-weight:800;font-stretch:118%;
  font-size:1.65rem;text-transform:uppercase;letter-spacing:-.02em;
}
.brand .brand-txt b{color:var(--tape)}

.nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav a:not(.btn){
  font-size:.82rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.11em;
  color:var(--bone-dim);
  padding:6px 0;
  position:relative;
  transition:color .18s ease;
}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--tape);transition:right .22s ease;
}
.nav a:not(.btn):hover{color:var(--bone)}
.nav a:not(.btn):hover::after,
.nav a:not(.btn)[aria-current="page"]::after{right:0}
.nav a:not(.btn)[aria-current="page"]{color:var(--bone)}

.hdr-tel{
  display:flex;align-items:center;gap:11px;
  color:var(--bone);
  white-space:nowrap;
  transition:opacity .2s ease;
}
.hdr-tel:hover{opacity:.85}
/* Icon sits in a subtle ring so it reads as a considered element. */
.tel-ico{
  flex:none;display:grid;place-items:center;
  width:40px;height:40px;border-radius:50%;
  border:2px solid rgba(238,75,48,.55);
  color:var(--tape-lite);
  transition:border-color .2s ease,background .2s ease;
}
.hdr-tel:hover .tel-ico{border-color:var(--tape);background:rgba(184,36,10,.12)}
.tel-ico svg{width:16px;height:16px}
.tel-txt{
  display:flex;flex-direction:column;line-height:1.15;
  font-family:var(--display);font-weight:700;font-stretch:90%;
  font-size:.98rem;letter-spacing:.02em;
}
.tel-txt small{
  font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);margin-bottom:1px;
}
/* The in-menu copy only exists for the mobile drawer. Nothing was hiding it
   above 900px, so the number rendered twice in the desktop header. */
.hdr-tel.in-menu{display:none}

.burger{
  display:none;
  margin-left:auto;
  width:44px;height:44px;
  background:none;border:1px solid var(--line-hi);border-radius:var(--r);
  cursor:pointer;
  align-items:center;justify-content:center;
}
.burger span{
  display:block;width:18px;height:2px;background:var(--bone);position:relative;
  transition:background .2s ease;
}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--bone);
  transition:transform .25s ease, top .2s ease;
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:900px){
  .nav,.hdr-tel{display:none}
  .burger{display:flex}
  .hdr-in{height:66px}

  .nav.open{
    display:flex;
    position:fixed;
    inset:66px 0 auto 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--ink);
    border-bottom:1px solid var(--line);
    padding:8px var(--gut) 24px;
  }
  .nav.open a:not(.btn){
    font-family:var(--display);
    font-size:1.35rem;font-weight:800;font-stretch:110%;
    letter-spacing:0;
    padding:16px 0;
    border-bottom:1px solid var(--line);
  }
  .nav.open a:not(.btn)::after{display:none}
  .nav.open .btn{margin-top:22px;justify-content:center}
  .hdr-tel.in-menu{display:flex;justify-content:center;margin-top:18px}
}

/* ============================================ HERO - video parallax ======= */
.hero{
  position:relative;
  padding-block:clamp(90px,12vh,128px);
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#0A0C0E;
  isolation:isolate;
}
.hero-media{
  position:absolute;
  top:-12%;left:0;
  width:100%;height:124%;
  z-index:-2;
  background:#0A0C0E;
  will-change:transform;
}
.hero-media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 28%;
}
/* Vimeo hands back a fixed 16:9 frame, so cover has to be done by hand. The
   two min-* pairs are mutually exclusive by construction - whichever axis is
   short binds, the other stays slack, and the ratio never breaks. */
.hero-vid{
  position:absolute;
  top:50%;left:50%;
  /* Source is 1080x1920 (portrait 9:16). To cover a landscape viewport the
     frame has to be sized off WIDTH - height = width * 16/9 - so it overflows
     top and bottom and fills side to side with no letterbox. */
  width:100vw;height:177.78vw;   /* 100 * 16/9 */
  min-width:56.25vh;min-height:100vh;   /* and cover tall/narrow too */
  min-width:56.25svh;min-height:100svh;
  transform:translate(-50%,-50%);
  border:0;
  pointer-events:none;
  object-fit:cover;   /* a <video> needs this to fill; an iframe did not */
}
/* Legibility scrim. Bottom-weighted so the video stays visible up top. */
.hero::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,12,14,.72) 0%, rgba(10,12,14,.18) 34%, rgba(10,12,14,.55) 68%, rgba(15,17,20,.96) 100%),
    linear-gradient(90deg, rgba(10,12,14,.62) 0%, rgba(10,12,14,0) 62%);
}

.hero-in{
  width:100%;
  padding-bottom:clamp(72px,11vh,132px);
  padding-top:140px;
}

/* --- Signature: the pair. BE (hollow) / FEEL (hollow) + BETTER (solid). --- */
.pair{margin:0 0 26px}
.pair-row{
  display:block;
  font-family:var(--display);
  font-weight:800;
  font-stretch:125%;
  text-transform:uppercase;
  line-height:.88;
  letter-spacing:-.035em;
  color:var(--bone);
}
/* The live site runs the second line roughly two thirds bigger than the first
   and puts the red on one word. Same idea, kept fluid. */
.pair .up{font-size:clamp(2rem, 6.2vw, 4.3rem)}
.pair .down{font-size:clamp(3.9rem, 12.2vw, 8.6rem);margin-top:.18em}
.pair em{font-style:normal;color:var(--tape)}

.hero-in{text-align:center}
.hero .lede{max-width:52ch;margin-inline:auto;color:var(--bone-dim);margin-bottom:34px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center}

.scroll-cue{
  position:absolute;
  right:var(--gut);
  bottom:clamp(72px,11vh,132px);
  display:flex;align-items:center;gap:12px;
  font-family:var(--display);
  font-weight:700;font-stretch:80%;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.24em;
  color:var(--mute);
}
.scroll-cue i{
  display:block;width:1px;height:54px;background:var(--line-hi);position:relative;overflow:hidden;
}
.scroll-cue i::after{
  content:"";position:absolute;top:-54px;left:0;width:1px;height:54px;background:var(--tape);
  animation:cue 2.4s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes cue{0%{top:-54px}55%,100%{top:54px}}
@media (max-width:900px){.scroll-cue{display:none}}
@media (prefers-reduced-motion:reduce){.scroll-cue i::after{animation:none;top:0}}

/* ------------------------------------------------- page banner (inner) --- */
.banner{
  position:relative;
  display:flex;align-items:flex-end;
  min-height:clamp(360px,52vh,520px);
  overflow:hidden;
  background:#0A0C0E;
  isolation:isolate;
}
.banner-media{position:absolute;top:-12%;left:0;width:100%;height:124%;z-index:-2;will-change:transform}
.banner-media img{width:100%;height:100%;object-fit:cover;object-position:center 26%}
.banner::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,12,14,.78) 0%,rgba(10,12,14,.34) 45%,rgba(15,17,20,.94) 100%);
}
.banner-in{width:100%;padding-block:clamp(44px,7vh,72px);padding-top:150px}
.banner h1{
  font-family:var(--display);font-weight:800;font-stretch:125%;
  text-transform:uppercase;line-height:.9;letter-spacing:-.03em;
  font-size:clamp(2.6rem,7.5vw,5.5rem);
  margin:0;
}
.crumb{
  display:flex;gap:10px;align-items:center;
  font-size:.76rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--mute);margin-bottom:16px;
}
.crumb a:hover{color:var(--tape)}
.crumb span{color:var(--mute-2)}

/* ============================================== split cards (home) ======== */
/* Two full-bleed panels, edge to edge, no gap, no radius. The section drops
   its own vertical padding so the panels fill the band. */
.split-sec{padding-block:0}
.split{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
}
.split-card{
  position:relative;
  min-height:min(72vh,640px);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,6vw,96px) clamp(32px,5vw,88px);
  overflow:hidden;
  isolation:isolate;
}
.split-card img{
  position:absolute;inset:0;z-index:-3;
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1);
  transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
/* Base darkening so the white type reads over any photo. */
.split-card::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg,rgba(12,14,17,.55) 0%,rgba(12,14,17,.72) 100%);
  transition:opacity .45s ease;
}
/* The red wash - invisible until hover, then fades up over the photo. */
.split-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(184,36,10,.62) 0%,rgba(140,18,8,.9) 100%);
  opacity:0;
  transition:opacity .45s ease;
}
.split-card:hover img,.split-card:focus-within img{transform:scale(1.06);filter:grayscale(.4)}
.split-card:hover::after,.split-card:focus-within::after{opacity:1}

.split-card .tag{
  font-family:var(--display);font-weight:800;font-stretch:80%;
  font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tape-lite);margin-bottom:14px;
  transition:color .3s ease;
}
.split-card:hover .tag,.split-card:focus-within .tag{color:#fff}
/* Explicit white - was inheriting a dark token and vanishing on the photo. */
.split-card h3{
  color:#fff;
  font-size:clamp(1.9rem,3.4vw,2.9rem);
  margin-bottom:16px;
  text-shadow:0 2px 20px rgba(0,0,0,.35);
}
.split-card p{color:rgba(255,255,255,.9);max-width:40ch;margin-bottom:26px}
.split-card .btn{align-self:flex-start}
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .split-card{min-height:min(56vh,460px)}
}

/* ============================================== service icon grid ========= */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(36px,4.4vw,62px) clamp(28px,3.6vw,56px);
}
.svc{display:flex;gap:18px;align-items:flex-start}
.svc-body{min-width:0}
.svc-body h4{margin:0;letter-spacing:-.01em}
.svc-body h4::after{
  content:"";display:block;
  width:74px;height:2px;background:var(--tape);
  margin:12px 0 14px;
}
.svc-body p{margin:0;color:var(--txt-mute);font-size:.94rem;max-width:34ch}
@media (max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* Drawn for this site and inlined as a sprite. currentColor means one rule
   retones the whole set, and there is nothing left to 404. */
.sprite{display:none}
.ico{
  width:40px;height:40px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  color:var(--txt);
}

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

/* ============================================== service list cards ======== */
.grid-4{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
  border-radius:var(--r2);
  overflow:hidden;
}
.grid-4 .cell{display:flex;flex-direction:column}
.grid-4 .cell ul{margin-top:14px}
.grid-4 .cell li{
  color:var(--txt-mute);font-size:.94rem;
  padding-left:18px;position:relative;
}
.grid-4 .cell li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:6px;height:1px;background:var(--tape);
}
.grid-4 .cell .btn{margin-top:auto;align-self:flex-start;padding-inline:0;border:0}
.grid-4 .cell .btn-line{color:var(--tape-lite)}
.grid-4 .cell .btn-line:hover{color:#FF7A62;border:0}
@media (max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr)}}

/* =============================================== booking service cards ==== */
/* Three separate cards on the cream, no enclosing grey box. White cards, a
   red top-edge that grows on hover, an icon badge, and a lift. Reads as a set
   of choices rather than one flat slab. */
.book-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,1.8vw,24px);
}
.book-card{
  position:relative;
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid #E7E2D9;
  border-radius:16px;
  padding:clamp(26px,2.4vw,36px);
  overflow:hidden;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.book-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--tape);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.book-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px -22px rgba(20,15,10,.4);
  border-color:#D8D2C7;
}
.book-card:hover::before{transform:scaleX(1)}
.book-ico{
  display:grid;place-items:center;
  width:52px;height:52px;
  border-radius:12px;
  background:#F5F1EA;
  margin-bottom:18px;
  transition:background .28s ease;
}
.book-ico .ico{width:26px;height:26px;color:#15181C}
.book-card:hover .book-ico{background:var(--tape)}
.book-card:hover .book-ico .ico{color:#fff}
.book-card h4{color:#15181C;margin-bottom:16px}
.book-card ul{margin:0 0 24px;list-style:none;padding:0;display:grid;gap:9px}
.book-card li{
  color:#5A626C;font-size:.95rem;
  padding-left:20px;position:relative;
}
.book-card li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:2px;border-radius:2px;background:var(--tape);
}
.book-link{
  margin-top:auto;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-weight:800;font-stretch:80%;
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tape);
  transition:gap .25s ease,color .2s ease;
}
.book-link svg{width:15px;height:15px}
.book-card:hover .book-link{gap:13px}
.book-link:hover{color:var(--tape-hov)}
@media (max-width:760px){.book-grid{grid-template-columns:1fr;gap:14px}}

/* ================================================ about approach grid ===== */
/* Four points, open on the cream - no grey box, real breathing room. 2x2 with
   generous gaps, icon in a soft badge, matching the clean service layout. */
.approach-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(32px,4vw,56px) clamp(40px,5vw,80px);
  margin-top:clamp(12px,2vw,24px);
}
.approach{display:flex;flex-direction:column;align-items:flex-start}
.approach-ico{
  display:grid;place-items:center;
  width:54px;height:54px;border-radius:14px;
  background:rgba(184,36,10,.09);
  margin-bottom:18px;
}
.approach-ico .ico{width:28px;height:28px;color:var(--tape)}
.approach h4{color:#15181C;margin-bottom:10px}
.approach h4::after{
  content:"";display:block;
  width:52px;height:2px;background:var(--tape);
  margin:12px 0 0;
}
.approach p{color:#5A626C;font-size:.96rem;margin:12px 0 0;max-width:38ch}
@media (max-width:680px){.approach-grid{grid-template-columns:1fr;gap:32px}}
@media (max-width:560px){.grid-4{grid-template-columns:1fr}}

/* ================================================ about split ============= */
.about-split{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
.about-photo{position:relative}
.about-photo img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--r2);
}
/* Credential chip - the one fact that separates this from a gym site. */
.cred{
  position:absolute;
  left:-12px;bottom:26px;
  background:var(--tape);
  color:#FFFFFF;
  padding:14px 20px;
  border-radius:var(--r);
  font-family:var(--display);
  font-weight:800;font-stretch:95%;
  text-transform:uppercase;letter-spacing:.06em;
  line-height:1.15;
  font-size:.9rem;
  max-width:220px;
}
.cred small{
  display:block;font-size:.68rem;font-stretch:80%;letter-spacing:.18em;opacity:.75;margin-bottom:3px;
}
@media (max-width:880px){
  .about-split{grid-template-columns:1fr}
  .about-photo{order:-1}
  .about-photo img{aspect-ratio:3/2}
  .cred{left:auto;right:14px;bottom:14px}
}

.stats{
  display:flex;flex-wrap:wrap;gap:0;
  border-top:1px solid var(--line);
  margin-top:32px;
}
.stat{
  padding:22px 30px 22px 0;
  border-right:1px solid var(--rule);
  padding-right:30px;
  margin-right:30px;
}
.stat:last-child{border-right:0;margin-right:0;padding-right:0}
.stat b{
  display:block;
  font-family:var(--display);font-weight:800;font-stretch:118%;
  font-size:1.5rem;line-height:1.1;text-transform:uppercase;
}
.stat span{font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;color:var(--txt-mute)}

/* ================================================ gallery ================= */
.slider{position:relative}
/* Horizontal photo track: shows 4 at a time on desktop, snaps as you scroll or
   swipe, arrows step it. Falls back to plain scroll if JS is off. */
.gallery{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 3 * 2px) / 4);
  gap:2px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.gallery::-webkit-scrollbar{display:none}
.gallery a{
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
  background:var(--slab-2);
  display:block;
  scroll-snap-align:start;
}
.gallery img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.gallery a:hover img{transform:scale(1.07)}

.slider-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(15,17,20,.72);color:var(--bone);
  border:1px solid rgba(255,255,255,.16);
  cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .2s ease,opacity .2s ease;
}
.slider-nav:hover{background:var(--tape)}
.slider-nav svg{width:20px;height:20px}
.slider-nav.prev{left:14px}
.slider-nav.next{right:14px}
.slider-nav[hidden]{display:none}
@media (max-width:900px){
  .gallery{grid-auto-columns:calc((100% - 2px) / 2)}
  .slider-nav{display:none}
}
@media (max-width:520px){
  .gallery{grid-auto-columns:calc((100% - 2px) / 1.5)}
}

/* ================================================ prices ================= */
.price-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,2.6vw,32px);
}
.price-card{
  background:#FFFFFF;
  border:1px solid #E3DFD7;
  border-radius:var(--r2);
  padding:clamp(26px,3vw,38px);
}
.price-card h3{color:#0F1114;margin-bottom:4px}
.price-card .where{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--tape);font-weight:700;margin-bottom:22px;
}
.price-card li{
  display:flex;align-items:baseline;gap:12px;
  padding:13px 0;
  border-bottom:1px dashed #DCD7CE;
  color:#3A4149;
}
.price-card li:last-child{border-bottom:0;padding-bottom:0}
.price-card li .dots{flex:1 1 auto;border-bottom:1px dotted #CFC9BF;transform:translateY(-4px)}
.price-card li b{
  font-family:var(--display);font-weight:800;font-stretch:105%;
  font-size:1.15rem;color:#0F1114;white-space:nowrap;
}
.price-note{
  margin-top:clamp(24px,3vw,36px);
  font-size:.86rem;color:var(--mute);
  display:flex;gap:10px;align-items:flex-start;
}
.price-note b{color:var(--bone)}
@media (max-width:760px){.price-grid{grid-template-columns:1fr}}

/* ============================================== BOOKING FORM ============= */
.book-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:2px;
  max-width:960px;            /* was full-width - rein it in and centre it */
  margin-inline:auto;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r2);
  overflow:hidden;
}
.book-main{background:var(--slab);padding:clamp(24px,2.6vw,36px)}
.book-side{background:var(--slab-2);padding:clamp(24px,2.4vw,30px)}
@media (max-width:940px){.book-shell{grid-template-columns:1fr;max-width:600px}}

/* Track switch - gym vs therapy is the real split in this business, so the
   form starts there and everything downstream re-tunes. */
.track{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  margin-bottom:30px;
}
.track input{position:absolute;opacity:0;pointer-events:none}
.track label{
  background:var(--slab-2);
  padding:20px 22px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.track label b{
  display:block;
  font-family:var(--display);font-weight:800;font-stretch:115%;
  font-size:1.22rem;text-transform:uppercase;letter-spacing:-.01em;
  line-height:1.1;
}
.track label span{
  display:block;font-size:.76rem;color:var(--mute);
  text-transform:uppercase;letter-spacing:.11em;margin-top:5px;
}
.track label:hover{background:#252A33}
.track input:checked + label{background:var(--tape);color:#FFFFFF}
.track input:checked + label span{color:rgba(4,35,40,.72)}
.track input:focus-visible + label{outline:2px solid var(--tape);outline-offset:-2px}

.field{margin-bottom:18px}
.field > label,.legend{
  display:block;
  font-family:var(--display);font-weight:700;font-stretch:82%;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--mute);
  margin-bottom:9px;
}
.legend .req,.field > label .req{color:var(--tape-lite);margin-left:3px}

.inp{
  width:100%;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:14px 15px;
  color:var(--bone);
  transition:border-color .18s ease, background .18s ease;
  -webkit-appearance:none;appearance:none;
}
.inp::placeholder{color:var(--mute-2)}
.inp:hover{border-color:var(--line-hi)}
.inp:focus{border-color:var(--tape);outline:none;background:#0B0D10}
select.inp{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2398A0AC' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:11px;
  padding-right:40px;
}
textarea.inp{resize:vertical;min-height:104px;line-height:1.55}
.inp[aria-invalid="true"]{border-color:var(--flag)}
/* Force the native pickers to render dark on iOS */
input[type="date"].inp,input[type="time"].inp{color-scheme:dark;min-height:50px}
input[type="date"].inp::-webkit-date-and-time-value{text-align:left}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}

/* Preferred-slot picker */
.slots{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:16px;
  background:rgba(0,0,0,.16);
}
.slot{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  align-items:center;
}
@media (max-width:600px){
  .slot{grid-template-columns:1fr}
}
.slot-hint{
  display:flex;gap:9px;align-items:flex-start;
  margin-top:14px;font-size:.82rem;color:var(--mute);
}
.slot-hint svg{width:14px;height:14px;flex:none;margin-top:4px;color:var(--tape-lite)}

/* Checkbox */
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;user-select:none}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{
  flex:none;width:20px;height:20px;margin-top:2px;
  border:1px solid var(--line-hi);border-radius:3px;
  background:var(--ink);
  display:grid;place-items:center;
  transition:background .16s ease, border-color .16s ease;
}
.check .box svg{width:11px;height:11px;color:#FFFFFF;opacity:0;transition:opacity .14s ease}
.check input:checked + .box{background:var(--tape);border-color:var(--tape)}
.check input:checked + .box svg{opacity:1}
.check input:focus-visible + .box{outline:2px solid var(--tape);outline-offset:2px}
.check .txt{font-size:.94rem;color:var(--bone-dim)}
.check .txt small{display:block;color:var(--mute);font-size:.82rem}

.reveal{display:none;margin-top:18px}
.reveal.on{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Honeypot */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.err{
  color:var(--flag);
  font-size:.8rem;
  margin-top:7px;
  display:none;
}
.err.on{display:block}

.form-foot{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;
  margin-top:30px;padding-top:26px;border-top:1px solid var(--line);
}
.form-foot .fine{font-size:.8rem;color:var(--mute-2);max-width:36ch}

.form-msg{
  display:none;
  margin-top:22px;
  padding:16px 18px;
  border-radius:var(--r);
  border:1px solid var(--line);
  font-size:.94rem;
}
.form-msg.on{display:block}
.form-msg.ok{border-color:var(--tape);background:var(--tape-glow);color:var(--bone)}
.form-msg.bad{border-color:var(--flag);background:rgba(224,83,61,.1);color:#F2B3A8}

/* Side rail */
.book-side h4{margin-bottom:6px}
.rail{padding:20px 0;border-bottom:1px solid var(--line)}
.rail:first-of-type{padding-top:0}
.rail:last-of-type{border-bottom:0;padding-bottom:0}
.rail .k{
  font-family:var(--display);font-weight:700;font-stretch:82%;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--tape);margin-bottom:8px;
}
.rail .v{font-size:.92rem;color:var(--bone-dim);line-height:1.6}
.rail .v a:hover{color:var(--tape)}
.rail .v em{color:var(--mute);font-style:normal;font-size:.84rem}

/* ================================================ contact / map ========== */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,64px);
  align-items:start;
}
@media (max-width:880px){.contact-grid{grid-template-columns:1fr}}

.info{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r2);overflow:hidden}
/* Homepage runs the map as its own band, so the info sits three across there
   rather than stacked beside it. */
.info-3{grid-template-columns:repeat(3,1fr);gap:1px}
@media (max-width:880px){.info-3{grid-template-columns:1fr;gap:2px}}
.map-band{position:relative;line-height:0;background:var(--bone-dim);padding-block:0}
.map-band iframe{
  width:100%;height:clamp(340px,44vh,520px);border:0;display:block;
  filter:grayscale(.85) contrast(1.02);
}
.info-row{background:var(--surface);padding:26px 28px;display:flex;gap:18px}
.info-row .ir-ico{
  flex:none;width:44px;height:44px;border-radius:50%;
  border:2px solid var(--tape);
  display:grid;place-items:center;
  color:var(--tape);
}
.info-row .ir-ico svg{width:19px;height:19px;stroke-width:2.2}
.info-row h4{margin-bottom:6px}
.info-row p{color:var(--txt-mute);font-size:.94rem;margin:0}
.info-row p b{color:var(--txt);font-weight:600}
.info-row a:hover{color:var(--tape)}


/* ================================================ CTA strip ============== */
.strip{
  position:relative;
  background:var(--tape);
  color:#FFFFFF;
  padding-block:clamp(48px,6vw,72px);
  overflow:hidden;
}
.strip-in{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.strip h2{color:#FFFFFF;max-width:16ch}
.strip p{color:rgba(255,255,255,.82);max-width:40ch;margin-top:12px}
.strip .btn-fill{background:#0F1114;border-color:#0F1114;color:var(--bone)}
.strip .btn-fill:hover{background:#000;border-color:#000}

/* ================================================ footer ================= */
.ftr{background:#0A0C0E;border-top:1px solid var(--line);padding-block:clamp(44px,5vw,64px)}
.ftr-top{
  display:flex;flex-wrap:wrap;gap:32px;
  align-items:center;justify-content:space-between;
  padding-bottom:30px;border-bottom:1px solid var(--line);
}
.ftr-logo img{height:46px;width:auto}
.ftr-logo .brand-txt{font-family:var(--display);font-weight:800;font-stretch:118%;font-size:1.5rem;text-transform:uppercase}
.ftr-logo .brand-txt b{color:var(--tape)}
.ftr-nav{display:flex;flex-wrap:wrap;gap:24px}
.ftr-nav a{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--mute)}
.ftr-nav a:hover{color:var(--tape)}
.ftr-bot{
  display:flex;flex-wrap:wrap;gap:18px;
  align-items:center;justify-content:space-between;
  padding-top:26px;
  font-size:.8rem;color:var(--mute-2);
}
.ftr-credit{display:inline-block;margin-left:6px}
.ftr-credit a{color:var(--mute);border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.ftr-credit a:hover{color:var(--tape-lite);border-bottom-color:var(--tape-lite)}
.social{display:flex;gap:10px}
.social a{
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);
  display:grid;place-items:center;
  color:var(--mute);
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.social a svg{width:16px;height:16px}
.social a:hover{border-color:var(--tape);color:var(--tape);background:var(--tape-glow)}

/* ================================================ legal page ============= */
.legal{max-width:76ch}
.legal h1{font-size:clamp(2rem, 5.2vw, 3.75rem);margin-bottom:10px}
.legal h2{margin-bottom:10px}
.legal h3{
  font-size:1.12rem;font-stretch:105%;
  margin:44px 0 12px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.legal h3:first-of-type{margin-top:34px}
.legal p{color:var(--mute)}
.legal .updated{font-size:.8rem;color:var(--mute-2);text-transform:uppercase;letter-spacing:.14em}

/* ================================================ thank you ============== */
.done{min-height:78vh;display:grid;place-items:center;text-align:center;padding-top:120px}
.done .mark{
  width:76px;height:76px;border-radius:50%;
  border:2px solid var(--tape);color:var(--tape);
  display:grid;place-items:center;margin:0 auto 28px;
}
.done .mark svg{width:30px;height:30px}
.done .lede{margin-inline:auto;margin-bottom:30px}

/* ================================================ scroll reveal ========== */
.rise{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  .hero-media,.banner-media{transform:none!important}
  .split-card img,.gallery img{transition:none}
}