/* =========================================================
   EVOLVE FITNESS CHICAGO
   Bold / minimal. Black, white, and red.
   ========================================================= */

:root{
  --bk:#000000;
  --wh:#ffffff;
  --yl:#ff3b30;          /* accent (bright red). Always carries BLACK text */
  --err:#d42b1a;         /* validation only, never decorative */
  --g1:#f2f2f2;          /* neutral light, deliberately not warm */
  --g2:#d6d6d6;
  --g3:#8c8c8c;
  --g4:#1a1a1a;

  --shell:1280px;
  --navh:76px;
  --fd:"Archivo Black", "Arial Black", system-ui, sans-serif;
  --fb:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fm:"Permanent Marker", cursive;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--wh);
  color:var(--bk);
  font-family:var(--fb);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
ul,ol{ list-style:none; margin:0; padding:0; }

/* keep anchor targets clear of the fixed bar */
section[id], div[id]{ scroll-margin-top:calc(var(--navh) + 24px); }

.shell{ width:min(100% - 48px, var(--shell)); margin-inline:auto; }

/* ---------- type ---------- */
/* capped so the longest hero line ("Lose the commute.") stays on one line
   inside the copy column rather than wrapping */
.xl{
  font-family:var(--fd); font-weight:400;
  font-size:clamp(2.3rem, 5.4vw, 4.9rem);
  line-height:.94; letter-spacing:-.035em;
  text-transform:uppercase; margin:0;
}
.lg{
  font-family:var(--fd); font-weight:400;
  font-size:clamp(1.75rem, 4.6vw, 3.9rem);
  line-height:.98; letter-spacing:-.03em;
  text-transform:uppercase; margin:0 0 34px;
}
.lbl{
  display:flex; align-items:center; gap:12px;
  font-size:.72rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bk);
  margin:0 0 26px;
}
.lbl i{
  font-style:normal; background:var(--yl); color:var(--bk); font-weight:700;
  padding:4px 9px; letter-spacing:.05em;
}
.lbl--on{ color:var(--wh); }
.intro{ max-width:52ch; color:var(--g3); font-size:1.05rem; margin:0; }

/* hand drawn underline, used once */
.u{ position:relative; display:inline-block; color:var(--yl); }
.u::after{
  content:""; position:absolute; left:-1%; right:-1%; bottom:-.08em; height:.14em;
  background:var(--yl);
  clip-path:polygon(0 42%,7% 8%,19% 61%,31% 16%,44% 66%,57% 12%,69% 58%,81% 14%,92% 60%,100% 30%,100% 100%,0 100%);
}

.mark{ font-family:var(--fm); font-size:clamp(1.4rem,3vw,2.1rem); color:var(--bk); margin:0 0 14px; transform:rotate(-2deg); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--yl); color:var(--bk);
  font-family:var(--fb); font-weight:700; font-size:.95rem;
  letter-spacing:.02em; text-decoration:none; border:none; cursor:pointer;
  padding:19px 34px; border-radius:0;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover{ background:var(--bk); color:var(--wh); transform:translateY(-2px); }
.btn--sm{ padding:12px 20px; font-size:.82rem; }
.btn--full{ width:100%; padding:21px 24px; font-size:1rem; }
.btn--lg{ padding:24px 46px; font-size:1.05rem; }
.btn--lg:hover{ background:var(--wh); color:var(--bk); }

/* =========================================================
   NAV
   ========================================================= */
/* Solid dark bar for the whole page. It used to fade in over the hero, which
   left white nav text sitting on white sections mid scroll. */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--bk);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.nav.stuck{ border-bottom-color:#2a2a2a; box-shadow:0 6px 24px rgba(0,0,0,.28); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; gap:28px; height:var(--navh); }

/* Evolve wordmark, set to match the studio kit and wall: light weight,
   wide tracking, secondary line beneath. */
.logo{ display:block; text-decoration:none; line-height:1; flex:0 0 auto; }
.logo__m{
  display:block; font-family:var(--fb); font-weight:300;
  font-size:1.34rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--wh); margin-right:-.26em;
}
.logo__s{
  display:block; font-family:var(--fb); font-weight:400;
  font-size:.52rem; letter-spacing:.36em; text-transform:uppercase;
  color:var(--yl); margin-top:6px; margin-right:-.36em;
}

.nav__menu{ display:flex; gap:32px; margin-left:auto; margin-right:8px; }
.nav__menu a{
  font-size:.86rem; font-weight:500; text-decoration:none;
  color:var(--wh); opacity:.8; transition:color .2s ease, opacity .2s ease;
}
.nav__menu a:hover{ opacity:1; color:var(--yl); }

/* =========================================================
   HERO
   ========================================================= */
/* Content is centred in the space BELOW the fixed bar. The photo still runs
   full bleed from y:0, so the top padding carries the nav height on top of
   the gap. That leaves --heroPad of clear space above and below the content,
   which is what reads as equal on screen.
   The form no longer lives here, so the hero is a single column with the
   trust bar pinned to the bottom of the viewport. Column flex plus
   `flex:1` on the copy block keeps the headline optically centred in the
   space that is left once the trust bar has taken its height. */
.hero{
  --heroPad:72px;
  position:relative; background:var(--bk);
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:calc(var(--navh) + var(--heroPad));
  padding-bottom:36px;
}
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.78;
}
.hero__veil{
  position:absolute; inset:0;
  background:linear-gradient(102deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.7) 38%, rgba(0,0,0,.15) 100%);
}
.hero__in{
  position:relative; z-index:2;
  flex:1 0 auto; display:flex; align-items:center;
  width:min(100% - 48px, var(--shell));
  padding-bottom:var(--heroPad);
}
/* Wide enough that the longest headline line ("Lose the commute.") still sets
   on one line once `.xl` reaches its 4.9rem cap. `.hero__sub` keeps its own
   narrower measure, so only the headline and the CTA row use the extra room. */
.hero__copy{ color:var(--wh); width:100%; max-width:920px; }

.tag{
  display:inline-block; font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--wh); border-left:3px solid var(--yl);
  padding-left:11px; margin:0 0 26px;
}
.hero .xl{ color:var(--wh); }
.hero__sub{ max-width:52ch; color:rgba(255,255,255,.76); font-size:1.1rem; margin:30px 0 34px; }
.hero__sub b{ color:var(--yl); font-weight:700; }

.hero__act{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 22px; }
.hero__note{
  font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
}

/* Trust bar. Sits on the fold line so the four figures are the last thing
   read before the first scroll. */
.trust{
  position:relative; z-index:2; flex:0 0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  border-top:1px solid rgba(255,255,255,.2); padding-top:26px;
}
.trust__i b{
  display:block; font-family:var(--fd); color:var(--yl);
  font-size:clamp(1.4rem,2.4vw,2rem); line-height:1; letter-spacing:-.03em;
}
.trust__i span{
  display:block; margin-top:8px;
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
}

/* ---------- form ---------- */
.bookwrap{ position:relative; }
/* The stamp hangs off the card corner. Its lower edge has to clear the
   card top padding, or it sits on top of the last word of the heading,
   which is exactly what -19px was doing on desktop. */
.stamp{
  position:absolute; top:-33px; right:-20px; z-index:3;
  font-family:var(--fm); font-size:1.25rem; color:var(--bk);
  background:var(--yl); width:66px; height:66px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transform:rotate(-13deg);
}
.book{ position:relative; background:var(--wh); padding:38px 34px 30px; }
.book__t{ font-family:var(--fd); font-size:1.5rem; line-height:1.02; text-transform:uppercase; letter-spacing:-.02em; margin:0 0 8px; }
.book__s{ font-size:.88rem; color:var(--g3); margin:0 0 18px; }

/* ---------- two step form ----------
   Both steps are in the DOM from the start and the inactive one is toggled
   with the `hidden` attribute, so it is out of the tab order and out of the
   accessibility tree rather than just visually gone. */
.book__step{
  font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bk); margin:0 0 20px; padding-bottom:10px;
  border-bottom:2px solid var(--g1); position:relative;
}
/* the rule doubles as the progress track */
.book__step::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px;
  background:var(--yl); width:50%; transition:width .28s ease;
}
.book[data-at="2"] .book__step::after{ width:100%; }

.step{ border:0; margin:0; padding:0; min-width:0; }
.step[hidden]{ display:none; }

/* =========================================================
   HUBSPOT EMBED CARD
   =========================================================
   Keyed off body[data-page="hsembed"], which index.html carries and
   index-custom-form.html does not, so the backup keeps the taller card
   its own markup was built for. This is every bit of the form's height
   that is actually ours to take back. The field boxes, the gaps between
   them and the button all live inside HubSpot's cross origin iframe,
   where no rule below (or anywhere else in this file) can reach them.
   Those are changed in the HubSpot form editor, not here. */
[data-page="hsembed"] .book{ padding:26px 22px 18px; }
[data-page="hsembed"] .book__t{ margin-bottom:2px; }
/* HubSpot ships the iframe with its own padding baked in. Pulling the
   wrapper in reclaims some of it without clipping, because the iframe
   height is still whatever HubSpot posts back. */
[data-page="hsembed"] .hs-form-frame{ display:block; margin:-10px -6px -12px; }
/* The card above is 12px shorter at the top than the live one, so the stamp
   has to climb by the same amount or it lands on the heading again. */
[data-page="hsembed"] .stamp{ top:-45px; }

/* Honeypot. Positioned off screen rather than display:none, because plenty
   of bots skip fields that are not rendered but happily fill one that is. */
.hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

/* Submission failure. Empty by default, so it takes no space until main.js
   puts a message in it. */
.book__err{
  margin:12px 0 0; font-size:.82rem; line-height:1.45; font-weight:600;
  color:var(--err);
}
.book__err:empty{ display:none; }

.book__back{
  display:block; width:100%; margin-top:12px; padding:8px;
  background:none; border:0; cursor:pointer;
  font-family:var(--fb); font-size:.76rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--g3);
}
.book__back:hover{ color:var(--bk); }

/* visually hidden, still announced */
.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.f{ display:flex; flex-direction:column; margin-bottom:15px; }
.f label{ font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:7px; }
.f input, .f select{
  font-family:var(--fb); font-size:.98rem; color:var(--bk);
  background:var(--g1); border:2px solid var(--g1); border-radius:0;
  padding:14px 15px; width:100%; appearance:none;
  transition:border-color .16s ease, background .16s ease;
}
.f input::placeholder{ color:#a5a5a5; }
.f input:focus, .f select:focus{ outline:none; background:var(--wh); border-color:var(--bk); }
.f.bad input, .f.bad select{ border-color:var(--err); background:#fdf3f2; }

.sel{ position:relative; }
.sel::after{
  content:""; position:absolute; right:16px; top:44%; pointer-events:none;
  width:8px; height:8px; border-right:2.4px solid var(--bk); border-bottom:2.4px solid var(--bk);
  transform:translateY(-50%) rotate(45deg);
}
.e{ font-size:.75rem; color:var(--err); font-weight:600; margin-top:5px; }
.e:empty{ display:none; }
.book__fine{ font-size:.72rem; color:var(--g3); text-align:center; margin:13px 0 0; line-height:1.5; }
/* Step 1 is where the reassurance is worth paying for in height. By step 2
   the visitor has already committed, the line has been read once, and it
   only pushes the submit button further down the screen. */
.book[data-at="2"] .book__fine{ display:none; }

/* The inline success card that used to live here is gone: a successful
   submit redirects to thank-you.html instead. */

/* =========================================================
   MARQUEE
   ========================================================= */
.mq{ background:var(--yl); color:var(--bk); overflow:hidden; padding:15px 0; }
.mq__t{ display:flex; width:max-content; animation:mq 42s linear infinite; }
.mq:hover .mq__t{ animation-play-state:paused; }
.mq__i{
  display:inline-flex; align-items:center; gap:26px; padding:0 26px;
  white-space:nowrap; font-family:var(--fd); font-size:.94rem;
  letter-spacing:.02em; text-transform:uppercase;
}
.mq__i::after{ content:""; width:7px; height:7px; background:var(--bk); }
@keyframes mq{ to{ transform:translateX(-50%); } }

/* =========================================================
   SECTIONS
   ========================================================= */
.sec{ padding:130px 0; }

.cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:2px solid var(--bk); }
.col{ padding:34px 32px 40px 0; border-right:1px solid var(--g2); }
.col:last-child{ border-right:none; }
.col:not(:first-child){ padding-left:32px; }
.col b{ display:block; font-family:var(--fd); font-size:1.16rem; text-transform:uppercase; line-height:1.1; letter-spacing:-.015em; margin-bottom:12px; }
.col p{ margin:0; color:var(--g3); font-size:.95rem; }

/* quote band. Was one narrow 19ch column that ran eight lines deep and left
   the right half of the section empty. Now a two part statement. */
.say{ background:var(--bk); color:var(--wh); padding:96px 0; }
.say__in{
  display:grid; grid-template-columns:1.5fr 1fr;
  gap:56px; align-items:end;
}
.say__q{
  font-family:var(--fd); text-transform:uppercase;
  font-size:clamp(1.5rem,3.3vw,2.75rem); line-height:1.04; letter-spacing:-.028em;
  margin:0;
}
.say__sub{
  margin:0; font-size:1.02rem; line-height:1.6;
  color:rgba(255,255,255,.62);
  border-left:3px solid var(--yl); padding-left:20px;
}

/* method */
/* stretch, so the photo column ends exactly level with step 3 instead of
   running past it on its own fixed ratio */
.split{ display:grid; grid-template-columns:1fr .82fr; gap:70px; align-items:stretch; }
.steps{ display:grid; gap:0; }
.steps li{ display:grid; grid-template-columns:76px 1fr; gap:22px; padding:30px 0; border-top:1px solid var(--g2); }
.steps li:last-child{ border-bottom:1px solid var(--g2); }
.steps span{
  font-family:var(--fd); font-size:1.6rem; line-height:1; color:var(--bk);
  background:var(--yl); width:54px; height:54px;
  display:flex; align-items:center; justify-content:center;
}
.steps b{ display:block; font-family:var(--fd); font-size:1.2rem; text-transform:uppercase; letter-spacing:-.015em; margin-bottom:9px; }
.steps p{ margin:0; color:var(--g3); font-size:.95rem; }
.split__img{ margin:0; min-height:0; }
.split__img img{ width:100%; height:100%; object-fit:cover; }

/* =========================================================
   WHAT IS INCLUDED
   ========================================================= */
/* The price panel and the six items are one block with 2px gutters, so the
   single figure reads as the cost of the whole set rather than of the first
   item next to it. */
.incl{ background:var(--bk); color:var(--wh); }
.incl .lg{ color:var(--wh); }

.stack{ display:grid; grid-template-columns:340px 1fr; gap:2px; align-items:stretch; }

.price{
  background:var(--yl); color:var(--bk);
  padding:34px 30px 30px;
  display:flex; flex-direction:column;
}
.price__lbl{ font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(0,0,0,.62); }
.price__n{
  display:block; font-family:var(--fd); font-size:clamp(3.4rem,6vw,4.6rem);
  line-height:.88; letter-spacing:-.04em; margin:14px 0 6px;
}
.price__per{ font-size:.82rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(0,0,0,.66); }
.price__p{ font-size:.9rem; line-height:1.5; color:rgba(0,0,0,.74); margin:20px 0 auto; padding-bottom:26px; }
.price .btn{ background:var(--bk); color:var(--wh); }
.price .btn:hover{ background:var(--wh); color:var(--bk); }

.stack__l{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; }
.stack__l li{ background:var(--g4); padding:26px 24px; }
.stack__l b{
  display:block; font-family:var(--fd); font-size:1rem; line-height:1.15;
  text-transform:uppercase; letter-spacing:-.012em; margin-bottom:9px;
}
/* the tick is decorative, so it is drawn rather than added as text content */
.stack__l b::before{
  content:""; display:inline-block; vertical-align:middle;
  width:9px; height:9px; margin-right:10px; background:var(--yl);
}
.stack__l span{ display:block; font-size:.9rem; line-height:1.5; color:var(--g3); }

/* =========================================================
   TEAM
   ========================================================= */
.team{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:52px; }

/* NOTE ON THE IMAGE HEIGHT
   This used to be `display:flex; flex-direction:column` on .mem with
   `aspect-ratio` on the img. That silently does nothing: in a COLUMN flex
   container the image's height is resolved before its width is known, so
   aspect-ratio has no width to work from and the browser falls back to the
   file's intrinsic 1000x1000. The tiles rendered full height no matter what
   ratio was set.
   The frame below states an explicit height in px and the image is taken out
   of flow to fill it. Nothing about it depends on flex, grid stretch, or
   intrinsic size, so the height is exactly what is written here. */
.mem{ background:var(--g4); }
.mem__pic{
  position:relative;
  height:186px;
  overflow:hidden;
  background:var(--bk);
}
.mem__pic img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 25%;
  filter:grayscale(1) contrast(1.08);
  transition:filter .4s ease, transform .5s ease;
}
.mem:hover .mem__pic img{ filter:grayscale(0) contrast(1); transform:scale(1.05); }

/* caption sits under the image, not over it */
.mem__x{ padding:16px 16px 20px; color:var(--wh); }
.mem__x b{ display:block; font-family:var(--fd); font-size:.94rem; text-transform:uppercase; letter-spacing:-.01em; line-height:1.15; }
.mem__x span{ display:block; font-size:.74rem; color:var(--g3); margin-top:6px; line-height:1.45; }
/* Only four coach online, so the tiles get the room the old eight tile grid
   could not give them and the faces are large enough to read. */
.team--four .mem__pic{ height:320px; }
.team--four .mem__x{ padding:20px 20px 24px; }
.team--four .mem__x b{ font-size:1.06rem; }
.team--four .mem__x span{ font-size:.8rem; }

/* All ten coaches shown together. aspect-ratio keeps the crop square at any
   column count instead of the fixed pixel height above, which only reads as
   square at the one width it was tuned for. This works here because .mem
   is a plain block, not the old flex-column container the note above
   warns about. */
.team--all .mem__pic{ height:auto; aspect-ratio:1/1; }
.team--all{ grid-template-columns:repeat(5,1fr); }

/* Credentials are stated at roster level until the per coach mapping is
   supplied. See the note in the markup. */
.creds{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:26px 0 0;
}
.creds b{
  font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--g3); margin-right:6px;
}
.creds span{
  font-size:.76rem; font-weight:600; letter-spacing:.04em;
  border:1px solid var(--g2); padding:8px 14px;
}

/* =========================================================
   PROOF
   ========================================================= */
.proof{ background:var(--bk); color:var(--wh); }
.proof .lg{ color:var(--wh); }

/* 3 column grid. The headline result occupies a 2x2 block and the two short
   quotes stack in the remaining column, so nothing is left empty. */
.qs{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.q{
  margin:0; background:var(--g4); padding:24px 22px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:background .25s ease;
}
.q:hover{ background:var(--yl); }
.q:hover blockquote{ color:var(--bk); }
.q blockquote{ margin:0 0 14px; font-size:.96rem; line-height:1.42; }
.q figcaption{ font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--g3); }
.q:hover figcaption{ color:rgba(0,0,0,.7); }

.q--big{
  grid-column:1 / 3; grid-row:1 / 3;
  background:var(--yl); color:var(--bk); padding:44px 40px;
}
.q--big:hover{ background:var(--yl); }
.q--big:hover blockquote{ color:var(--bk); }
.q--big blockquote{
  margin:0 0 20px; font-family:var(--fd); text-transform:uppercase;
  font-size:clamp(1.3rem,2.7vw,2.2rem); line-height:1.05; letter-spacing:-.028em;
}
.q--big figcaption{ color:rgba(0,0,0,.65); font-size:.74rem; }

/* the reviews are public, so the page says where to go and check them */
.revlinks{ display:flex; flex-wrap:wrap; gap:14px 30px; margin:32px 0 0; }
.revlinks a{
  font-size:.82rem; font-weight:700; letter-spacing:.04em;
  text-decoration:none; color:var(--wh);
  border-bottom:2px solid var(--yl); padding-bottom:3px;
}
.revlinks a:hover{ color:var(--yl); }

/* =========================================================
   STUDIO
   ========================================================= */
/* moving single row reel.
   Each tile carries its own right margin rather than using flex gap, so the
   duplicated track is exactly twice one set and translateX(-50%) loops with
   no drift. */
.reel{ overflow:hidden; background:var(--bk); margin-top:52px; }
.reel__t{ display:flex; width:max-content; animation:reel 64s linear infinite; }
.reel:hover .reel__t{ animation-play-state:paused; }
.reel__t img{
  flex:0 0 auto; width:238px; height:238px;
  object-fit:cover; margin-right:2px;
  transition:transform .5s ease, filter .4s ease;
}
.reel__t img:hover{ transform:scale(1.06); filter:brightness(1.08); }
@keyframes reel{ to{ transform:translateX(-50%); } }

.reel__cap{ margin-top:16px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.reel__cap span{ color:var(--g3); }

/* =========================================================
   RISK REVERSAL
   ========================================================= */
/* Proposed guarantee. Deleting the matching section in the markup leaves
   nothing else depending on these rules. */
.rr{ background:var(--bk); color:var(--wh); padding:104px 0; }
.rr .mark{ color:var(--yl); }
/* the cap goes on the line, not on the shell. Narrowing `.shell` itself would
   centre the block and break the left edge every other section sits on. */
.rr__q{
  font-family:var(--fd); text-transform:uppercase;
  font-size:clamp(1.5rem,3.4vw,2.9rem); line-height:1.04; letter-spacing:-.03em;
  margin:0 0 24px; max-width:19ch;
}
.rr__s{
  margin:0; font-size:1.02rem; line-height:1.6; max-width:56ch;
  color:rgba(255,255,255,.62);
  border-left:3px solid var(--yl); padding-left:20px;
}

/* =========================================================
   FAQ
   ========================================================= */
.faqsec{ background:var(--g1); }
.faq{ border-top:2px solid var(--bk); max-width:900px; }
.qa{ border-bottom:1px solid var(--g2); }
.qa summary{
  cursor:pointer; list-style:none; position:relative;
  padding:24px 52px 24px 0;
  font-family:var(--fd); font-size:1.02rem; text-transform:uppercase;
  letter-spacing:-.012em; line-height:1.24;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ opacity:.55; }
.qa summary::before,
.qa summary::after{
  content:""; position:absolute; right:8px; top:50%; background:var(--bk);
  transition:transform .25s ease, opacity .25s ease;
}
.qa summary::before{ width:16px; height:2.5px; margin-top:-1px; }
.qa summary::after{ width:2.5px; height:16px; margin-top:-8px; right:14.75px; }
.qa[open] summary::after{ transform:rotate(90deg); opacity:0; }
.qa__b{ padding:0 60px 26px 0; }
.qa__b p{ margin:0; color:var(--g3); font-size:.98rem; }

/* =========================================================
   CLOSE
   ========================================================= */
/* Solid accent-red close, and the only form on the page sits in it. Every
   CTA above scrolls here, so the argument and the fields are in one view. */
.end{ background:var(--yl); padding:130px 0; }
.end__in{
  display:grid; grid-template-columns:1fr 440px; gap:64px; align-items:center;
}
.end .mark{ color:var(--bk); }
.end .xl{ color:var(--bk); margin-bottom:26px; }
.end__sub{ max-width:44ch; font-size:1.05rem; line-height:1.6; color:rgba(0,0,0,.74); margin:0 0 26px; }
.end__pts{ display:flex; flex-wrap:wrap; gap:10px; }
.end__pts li{
  font-size:.76rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--bk);
  border:1px solid rgba(0,0,0,.32); padding:9px 15px;
}
/* black on the white card, so the submit is not the same red as the section */
.end .book .btn{ background:var(--bk); color:var(--wh); }
.end .book .btn:hover{ background:var(--g4); color:var(--wh); transform:translateY(-2px); }
/* and the stamp inverts for the same reason: an accent disc on an
   accent-colored section only exists where it happens to overlap the white card */
.end .stamp{ background:var(--bk); color:var(--yl); }

/* =========================================================
   THANK YOU PAGE
   ========================================================= */
/* Reuses .hero__bg and .hero__veil, so this needs its own positioning
   context. Not full viewport height: the job here is to confirm and then
   get out of the way of the coach tiles. */
.ty{
  position:relative; background:var(--bk); color:var(--wh);
  padding:calc(var(--navh) + 92px) 0 92px;
}
/* No max-width here. `.shell` is margin-inline:auto, so narrowing it centres
   the block and pulls it off the left edge every other section sits on. The
   measure goes on the children instead. */
.ty__in{ position:relative; z-index:2; }
/* wider than the old tick was, because the dumbbell's 64x32 viewBox is half
   as tall as it is wide and would otherwise read as undersized */
.ty__mark{ display:block; width:82px; color:var(--yl); margin:0 auto 26px; }
/* the eyebrow's left accent bar reads as off centre once the block is
   centred, so it becomes plain yellow text here instead */
.ty .tag{ border-left:0; padding-left:0; color:var(--yl); }
.ty .xl{ color:var(--wh); margin-bottom:26px; }
.ty__sub{
  font-size:1.1rem; line-height:1.6; color:rgba(255,255,255,.76);
  margin:0 auto; max-width:52ch;
}
.ty__sub b{ color:var(--yl); font-weight:700; }

/* Left as a plain block so the `hidden` attribute keeps working without an
   override. main.js unhides it only for a goal it recognises. */
.ty__goal{ position:relative; margin:34px auto 0; padding-top:28px; max-width:52ch; }
.ty__goal::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:44px; height:3px; background:var(--yl);
}
.ty__goal span{
  display:block; font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55);
}
.ty__goal b{
  display:block; margin-top:7px; font-family:var(--fd);
  font-size:1.15rem; text-transform:uppercase; letter-spacing:-.015em;
}

/* The coach section runs dark like the band above it. The .mem tiles are
   already --g4, so they still separate from a black ground the way the
   proof quotes do on the landing page. */
.coaches--ty{ background:var(--bk); color:var(--wh); }
.coaches--ty .lg{ color:var(--wh); }
.coaches--ty .creds b{ color:rgba(255,255,255,.55); }
.coaches--ty .creds span{ border-color:rgba(255,255,255,.25); }

/* Centring helper for the thank you page. Everything at page level centres;
   the tile captions stay left aligned, because a five line comma list set
   ragged on both edges is markedly harder to read. */
.ctr{ text-align:center; }
.ctr .lbl{ justify-content:center; }
.ctr .intro{ margin-inline:auto; }
.ctr .creds{ justify-content:center; }
.ctr .mem__x{ text-align:left; }

/* =========================================================
   FOOTER
   ========================================================= */
.ft{ background:var(--bk); color:var(--wh); padding:46px 0; border-top:1px solid var(--g4); }
.ft__in{ display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; }
.ft__addr{ font-size:.84rem; color:var(--g3); margin:0; line-height:1.6; }
.ft__mail{ font-size:.86rem; font-weight:600; text-decoration:none; color:var(--wh); border-bottom:2px solid var(--yl); }
.ft__mail:hover{ color:var(--yl); }

/* =========================================================
   MOBILE DOCK
   ========================================================= */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  display:none; text-align:center; text-decoration:none;
  background:var(--yl); color:var(--bk);
  font-weight:700; font-size:.95rem;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  transform:translateY(110%); transition:transform .3s ease;
}
.dock.on{ transform:translateY(0); }

/* =========================================================
   REVEAL
   ========================================================= */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.rv.in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  /* same rule, smaller gap. Padding stays balanced via --heroPad. */
  .hero{ --heroPad:56px; min-height:0; }
  .split{ grid-template-columns:1fr; gap:44px; }
  .split__img{ order:-1; margin:0; }
  .split__img img{ aspect-ratio:16/9; height:auto; }
  .team{ grid-template-columns:repeat(3,1fr); }
  .mem__pic{ height:196px; }
  .team--four{ grid-template-columns:repeat(2,1fr); }
  .team--four .mem__pic{ height:300px; }
  .team--all{ grid-template-columns:repeat(4,1fr); }
  /* price panel above the six items rather than beside them */
  .stack{ grid-template-columns:1fr; }
  .say__in{ grid-template-columns:1fr; gap:26px; align-items:start; }
  /* 2 columns: the big quote spans the full width and the two short
     quotes sit beneath it side by side */
  .qs{ grid-template-columns:repeat(2,1fr); }
  .q--big{ grid-column:1 / -1; grid-row:auto; }
  .end__in{ grid-template-columns:1fr; gap:44px; }
  .bookwrap{ max-width:480px; }
  .nav__menu{ display:none; }
}

@media (max-width:760px){
  .shell{ width:min(100% - 32px, var(--shell)); }
  .hero__in{ width:min(100% - 32px, var(--shell)); }
  .sec{ padding:82px 0; }
  .say{ padding:74px 0; }
  .cols{ grid-template-columns:1fr; }
  .col{ padding:26px 0; border-right:none; border-bottom:1px solid var(--g2); }
  .col:not(:first-child){ padding-left:0; }
  .col:last-child{ border-bottom:none; }
  .team{ grid-template-columns:repeat(2,1fr); }
  .mem__pic{ height:140px; }
  .team--four .mem__pic{ height:210px; }
  .team--all{ grid-template-columns:repeat(3,1fr); }
  .stack__l{ grid-template-columns:1fr; }
  /* four numbers stay on one line as 2x2 rather than shrinking to nothing */
  .trust{ grid-template-columns:repeat(2,1fr); gap:22px 18px; }
  .qs{ grid-template-columns:1fr; }
  .q--big{ padding:30px 24px; }
  .reel__t img{ width:150px; height:150px; }
  .reel__t{ animation-duration:44s; }
  .rr{ padding:78px 0; }
  .ft__in{ flex-direction:column; align-items:flex-start; gap:18px; }
  .end{ padding:88px 0; }
  /* the card goes full width down here, so the stamp's negative offset would
     hang past the gutter and get clipped by body overflow-x */
  .stamp{ top:-30px; right:4px; }
  /* same 12px climb as the desktop rule above, for the same reason */
  [data-page="hsembed"] .stamp{ top:-42px; }
  .dock{ display:block; }
  body{ padding-bottom:60px; }
  /* the padding above only exists to clear the sticky dock, and the thank
     you page has no dock */
  body[data-page="thankyou"]{ padding-bottom:0; }
  .steps li{ grid-template-columns:52px 1fr; gap:14px; }
  .steps span{ width:44px; height:44px; font-size:1.25rem; }
  .book{ padding:30px 24px 26px; }

  /* let section headings wrap to the available width instead of holding
     the desktop line breaks, which overflowed on narrow screens */
  .lg br{ display:none; }

  /* stop the logo and CTA colliding in the bar */
  .nav__in{ gap:14px; }
  .logo__m{ font-size:1.05rem; letter-spacing:.19em; margin-right:-.19em; }
  .logo__s{ font-size:.46rem; letter-spacing:.27em; margin-right:-.27em; }
  .btn--sm{ padding:11px 15px; font-size:.75rem; }
}

@media (max-width:430px){
  /* the sticky dock already carries the CTA down here */
  .nav .btn--sm{ display:none; }
  .end__pts li{ font-size:.72rem; padding:8px 12px; }
  .btn--lg{ padding:20px 26px; font-size:.95rem; }
  .mem__pic{ height:118px; }
  .team--four .mem__pic{ height:172px; }
  .team--all{ grid-template-columns:repeat(2,1fr); }
  .reel__t img{ width:126px; height:126px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .rv{ opacity:1; transform:none; }
  /* stop the loops outright rather than letting them snap to the end frame,
     and let the reel be swiped through by hand instead */
  .reel__t, .mq__t{ animation:none !important; transform:none !important; }
  .reel{ overflow-x:auto; }
}