/* Pulse Training Co — website
   Clean editorial system: one continuous light ground, hairline-separated sections,
   the brand-book type + restraint. No alternating color blocks. */
:root{--nav-h:72px;--edge:clamp(22px,5vw,72px);--maxw:1180px;--ground:#faf7f2;--card:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv11"}
img{display:block;max-width:100%}
/* The `hidden` attribute is set by the UA stylesheet at almost no specificity,
   so any class that sets `display` silently beats it. Every script here toggles
   `hidden` to show and hide things; this makes that mean what it says. */
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
::selection{background:var(--ember);color:#fff}

/* ---- type utilities (from the brand book) ---- */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-50);margin:0}
.eyebrow.on-dark{color:rgba(255,255,255,.6)}
.ember{color:var(--ember)}
.dhead{font-family:var(--cond);font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-.005em;margin:0;color:inherit}
.lede{font-size:clamp(18px,1.55vw,23px);line-height:1.5;color:var(--ink);margin:0;font-weight:400}
.body{font-size:16px;line-height:1.64;color:var(--ink-70);margin:0}
.body b{color:var(--ink);font-weight:600}
.serif{font-family:var(--serif);font-style:italic}
.stmt{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(26px,3.6vw,46px);line-height:1.26;letter-spacing:-.01em;margin:0}

/* ---- layout + section rhythm ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--edge);width:100%}
.sec{padding:clamp(58px,9vh,116px) 0;border-top:1px solid var(--line)}
.sec.tight{padding:clamp(40px,6vh,72px) 0}
.shead{display:flex;align-items:baseline;gap:20px;margin-bottom:clamp(30px,5vh,56px);flex-wrap:wrap}
.shead .no{font-family:var(--cond);font-weight:900;font-size:15px;letter-spacing:.02em;color:var(--ember)}
.shead .lbl{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-70)}
.shead .rt{margin-left:auto;font-size:13.5px;line-height:1.5;color:var(--ink-50);max-width:44ch;text-align:right}
.grid{display:grid;gap:clamp(28px,4vw,56px)}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.lead-col{max-width:60ch}

/* ---- nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:70;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--edge);color:#fff;mix-blend-mode:difference;pointer-events:none}
.nav a,.nav .links{pointer-events:auto}
.nav .brand{display:flex;align-items:center;gap:11px;color:#fff}
.nav .brand svg{width:23px;height:22px;color:currentColor}
.nav .brand .wm{font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:18px;letter-spacing:.01em}
.nav .links{display:flex;align-items:center;gap:26px}
/* Buttons as well as links. Sign out has to be a button because signing out is
   a POST, and while the selector only reached <a> it was the one item in any
   nav on the site rendering as plain body text. No public page has a button in
   its nav, so this changes nothing outside the admin. */
.nav .links a,.nav .links button{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#fff}
.nav .navlink{opacity:.6;transition:opacity .15s}
.nav .navlink:hover,.nav .navlink.active{opacity:1}
.nav .navcta{border:1.5px solid currentColor;border-radius:999px;padding:9px 17px;transition:opacity .2s}
.nav .navcta:hover{opacity:.65}
/* There used to be a .nav.solid here, a dark bar for the pages sitting on the
   light ground with no hero behind them — waiver and admin. The reasoning was
   that the difference blend had nothing to work against. It does: cream and
   white both invert to legible ink, which is what the public pages already rely
   on once you scroll past the hero. What the dark bar actually did was make two
   pages look like a different product, and one of them is a page clients are
   sent to by email. One nav, everywhere. */
/* A button that has to read as a link, because signing out is a POST. */
.linkish{background:none;border:0;padding:0;font-family:inherit;cursor:pointer}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-weight:600;font-size:15px;line-height:1;padding:15px 26px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:background .2s var(--ease),color .2s,border-color .2s,transform .2s}
.btn.sm{padding:11px 19px;font-size:13.5px}
.btn-primary{background:var(--ember);color:#fff;border-color:var(--ember)}
.btn-primary:hover{background:transparent;color:var(--ember)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--ground)}
.btn-onink{background:var(--bone);color:var(--ink)}
.btn-onink:hover{background:#fff}
.btn-ghost{background:transparent;color:var(--ember);border-color:var(--ember)}
.btn-ghost:hover{background:var(--ember);color:#fff}
.hero .btn-primary:hover{background:#fff;color:#000;border-color:#fff;mix-blend-mode:difference}
.hero .btn-ghost:hover{background:transparent;color:#fff;border-color:#fff;mix-blend-mode:difference}
.tlink{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border-bottom:1.5px solid var(--ink);padding-bottom:5px;transition:color .2s,border-color .2s}
.tlink:hover{color:var(--ember);border-color:var(--ember)}

/* ---- hero (solid ink, display-led) ---- */
.hero{position:relative;min-height:min(84vh,760px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);color:#f7f3ec;padding:calc(var(--nav-h) + 40px) 0 clamp(30px,4.5vw,52px)}
.hero .wrap{position:relative}
.hero .eyebrow{color:rgba(247,243,236,.68);margin-bottom:clamp(16px,2vw,24px)}
.hero-h{font-family:var(--cond);font-weight:900;text-transform:uppercase;line-height:.83;letter-spacing:-.012em;margin:0;font-size:clamp(60px,11.4vw,172px)}
.hero-sub{margin:clamp(22px,2.6vw,32px) 0 0;max-width:46ch;color:rgba(247,243,236,.86);font-size:clamp(17px,1.5vw,21px);line-height:1.55}
.hero-cta{display:flex;gap:12px;margin-top:clamp(26px,3vw,38px);flex-wrap:wrap}
.hero-rail{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:clamp(34px,5.5vw,62px)}
.hero-rail .meta{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,243,236,.6)}
.hero-rail .seal{width:clamp(74px,8vw,104px);aspect-ratio:1/1;flex:none;opacity:.92}
.hero-rail .seal svg{width:100%;height:100%}

/* ---- who band (compact home version) ---- */
.whoband{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);align-items:center}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wchip{display:flex;align-items:center;justify-content:center;text-align:center;border:1.5px solid var(--ink);border-radius:999px;padding:15px 18px;font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:17px;letter-spacing:.02em;color:var(--ink);transition:background .2s var(--ease),color .2s}
.wchip:hover{background:var(--ink);color:var(--ground)}

/* ---- eval steps (in the closing CTA) ---- */
.ctagrid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,76px);align-items:end}
.evalsteps{border-top:2px solid var(--ink)}
.evalstep{display:flex;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
.evalstep .n{font-family:var(--cond);font-weight:900;color:var(--ember);font-size:17px;min-width:26px;padding-top:2px}
.evalstep .t{font-weight:600;font-size:15.5px}
.evalstep .d{font-size:14px;line-height:1.5;color:var(--ink-70);margin:3px 0 0}
.evalnote{margin:16px 0 0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50)}

/* ---- standard band (solid ink) ---- */
.photoband{position:relative;background:var(--ink);padding:clamp(58px,8vw,104px) 0}
.photoband .inner{display:flex;align-items:flex-end}
.photoband .eyebrow{color:rgba(247,243,236,.78);margin-bottom:14px}
.photoband .line{color:#f7f3ec;font-family:var(--serif);font-style:italic;font-size:clamp(24px,3.4vw,44px);line-height:1.22;margin:0;max-width:22ch}
.photoband + .sec{border-top:0}

/* ---- pillars ---- */
.pillar{border-top:2px solid var(--ink);padding-top:20px;transition:border-color .35s var(--ease),transform .35s var(--ease)}
.pillar:hover{border-color:var(--ember);transform:translateY(-3px)}
.pillar .idx{font-family:var(--cond);font-weight:900;font-size:19px;color:var(--ember);letter-spacing:.02em}
.pillar h3{margin:11px 0 11px;font-size:clamp(20px,1.9vw,26px);font-weight:700;letter-spacing:-.01em}
.pillar p{margin:0;font-size:15.5px;line-height:1.58;color:var(--ink-70)}

/* ---- who we train ---- */
.who-list{display:flex;flex-direction:column}
.who-list .row{display:flex;align-items:baseline;gap:18px;padding:17px 0;border-top:1px solid var(--line)}
.who-list .row:last-child{border-bottom:1px solid var(--line)}
.who-list .row .k{font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:19px;min-width:34px;color:var(--ink)}
.who-list .row p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink-70)}

/* ---- values (Option G ledger) ---- */
.vled{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,5vw,72px);border-bottom:1px solid var(--line)}
.vrow{border-top:1px solid var(--line);padding:22px 0}
.vnm{font-family:var(--sans);font-weight:600;font-size:22px;line-height:1.05;letter-spacing:-.015em;text-transform:uppercase;margin:0 0 8px}
.vnm .in{color:var(--ember)}
.vdef{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-70);max-width:44ch}

/* ---- coach (about) ---- */
.coach{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,4.5vw,72px);align-items:stretch}
.coach .cname{font-size:clamp(32px,4vw,52px);margin:12px 0 0}
.coach .crole{margin:12px 0 0;color:var(--ember)}
.coach .cred{margin:0;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.55;color:var(--ink-70);max-width:44ch}
.coach .portrait{height:100%;min-height:100%;overflow:hidden;border-radius:14px;background:var(--bone)}
.coach .portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:url(#duo-ink) contrast(1.02)}
.cstory{display:flex;flex-direction:column;gap:clamp(14px,1.5vw,20px)}
.cstory .body{max-width:60ch}
.cstory .cred{margin-top:4px}
.coach .pullquote{margin:auto 0 0;padding-top:24px;border-top:2px solid var(--ink);font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,27px);line-height:1.32;color:var(--ink)}

/* ---- steps (how it works) ---- */
.steps{display:flex;flex-direction:column}
.step{display:flex;gap:22px;padding:22px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .n{font-family:var(--cond);font-weight:900;font-size:24px;color:var(--ember);min-width:40px}
.step h4{margin:0 0 6px;font-size:18px;font-weight:600}
.step p{margin:0;font-size:15px;color:var(--ink-70);line-height:1.55;max-width:56ch}

/* ---- offer cards ---- */
.offer{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:12px;height:100%}
.offer .tag{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ember)}
.offer .k{font-family:var(--cond);font-weight:900;font-size:23px;text-transform:uppercase;letter-spacing:.01em}
.offer p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-70)}
.offer ul{margin:2px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.offer li{font-size:14px;color:var(--ink-70);display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.offer li::before{content:"";width:6px;height:6px;margin-top:6px;border-radius:50%;background:var(--ember);flex:none}

/* ---- offer lead (start-here block) ---- */
.offer-lead{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(24px,3vw,52px);background:var(--ink);color:var(--bone);border-radius:14px;padding:clamp(26px,3vw,40px);margin-bottom:clamp(20px,2.4vw,30px)}
.offer-lead .tag{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ember)}
.offer-lead .k{font-family:var(--cond);font-weight:900;font-size:clamp(26px,3vw,40px);text-transform:uppercase;letter-spacing:.01em;line-height:1;margin:14px 0 14px}
.offer-lead p{margin:0;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.78);max-width:52ch}
.offer-lead ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.offer-lead li{font-size:14.5px;color:rgba(255,255,255,.8);display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.offer-lead li::before{content:"";width:6px;height:6px;margin-top:6px;border-radius:50%;background:var(--ember);flex:none}
.offer-lead .ol-side{display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.offer-lead .ol-note{margin:0;padding-top:15px;border-top:1px solid var(--line-ink);font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* ---- session type gate ---- */
.stype{margin-bottom:clamp(22px,2.6vw,32px)}
.stype .sh{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);margin-bottom:14px}
.stypegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sopt{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;gap:7px;border:1.5px solid var(--line);border-radius:12px;padding:16px;cursor:pointer;background:var(--card);transition:border-color .18s,background .18s,opacity .18s}
.sopt input{position:absolute;opacity:0;width:0;height:0}
.sopt .st-k{font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:18px;letter-spacing:.01em;color:var(--ink);line-height:1}
.sopt .st-d{font-size:12.5px;line-height:1.4;color:var(--ink-50);min-height:2.8em}
.sopt:hover:not(.lock){border-color:var(--ink)}
.sopt:has(input:checked){border-color:var(--ember);background:var(--ember-tint)}
.sopt:has(input:checked) .st-d{color:var(--ink-70)}
.sopt.lock{opacity:.45;cursor:not-allowed;background:transparent}
.gatetoggle{display:inline-flex;align-items:center;gap:10px;margin-top:15px;font-size:13.5px;color:var(--ink-70);cursor:pointer}
.gatetoggle input{width:16px;height:16px;accent-color:var(--ember);cursor:pointer}

/* ---- booking calendar ---- */
.booker{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,3vw,44px);align-items:start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,2.4vw,32px)}
.cal .cal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal .cal-top .mo{font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:19px;letter-spacing:.01em}
.cal .nav-btn{width:34px;height:34px;border-radius:999px;border:1px solid var(--line);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .15s,border-color .15s}
.cal .nav-btn:hover{background:var(--bone);border-color:var(--ink-30)}
.cal .dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal .dow span{text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-50);padding:4px 0}
.cal .days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .day{aspect-ratio:1/1;border:0;background:transparent;border-radius:10px;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.cal .day:hover:not(.off):not(.sel){background:var(--bone)}
.cal .day.off{color:var(--ink-30);cursor:default;opacity:.5}
.cal .day.sel{background:var(--ink);color:var(--ground)}
.cal .day .dot{width:4px;height:4px;border-radius:50%;background:var(--ember);position:absolute;transform:translateY(13px)}
.slots{display:flex;flex-direction:column}
.slots .sh{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);margin-bottom:14px}
.slots .picked{font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:17px;margin-bottom:16px;color:var(--ink)}
.slotgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.slot{border:1px solid var(--line);background:transparent;border-radius:9px;padding:12px 10px;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.slot:hover{border-color:var(--ink)}
.slot.sel{background:var(--ember);color:#fff;border-color:var(--ember)}
.booker .confirm-note{margin-top:18px;font-size:13px;color:var(--ink-50);line-height:1.5}

/* ---- form ---- */
.form{display:grid;gap:20px;max-width:860px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-weight:700;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-50)}
.field label .req{color:var(--ember)}
.input{font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:9px;padding:13px 14px;width:100%;transition:border-color .15s,box-shadow .15s}
.input::placeholder{color:var(--ink-30)}
.input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(49,47,47,.08)}
textarea.input{min-height:110px;resize:vertical}
/* Says why a request could not be sent. Ember when something went wrong,
   muted when it is only redirecting someone to the right session type. */
.form-msg{margin:14px 0 0;font-size:13.5px;line-height:1.5;max-width:56ch;color:var(--ember)}
.form-msg.calm{color:var(--ink-50)}
.input.wrong{border-color:var(--ember)}
/* The terms that used to live in a signed service agreement. They sit directly
   above the button because pressing it is what accepts them, and they are set
   quieter than the form without being grey-on-grey: this is the small print,
   but it is small print somebody is actually meant to read. */
.terms{border-top:1px solid var(--line);padding-top:22px}
.terms-head{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-50);margin-bottom:14px}
.terms-list{margin:0;padding:0;list-style:none;display:grid;gap:9px;max-width:62ch}
.terms-list li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.55;color:var(--ink-70)}
/* An em dash rather than a bullet. The list is four statements, not a count. */
.terms-list li::before{content:"—";position:absolute;left:0;color:var(--ink-30)}
.terms-list b{color:var(--ink);font-weight:700}
.terms-foot{margin:16px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-50)}
/* ---- waiver page ---- */
/* The document is shown in full, in its own bounded, scrollable panel. Bounded
   so the signing form is reachable without a minute of scrolling; complete
   because this is the text being agreed to and it is legal evidence. */
.doc{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:26px 28px;max-height:56vh;overflow-y:auto;font-size:14.5px;line-height:1.65;color:var(--ink-70)}
.doc h1{font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:22px;line-height:1.15;color:var(--ink);margin:0 0 6px}
.doc h2{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ink-50);margin:0 0 22px}
.doc h3{font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:15px;color:var(--ink);margin:26px 0 8px}
.doc p{margin:0 0 12px}
.doc ul{margin:0 0 12px;padding-left:20px}
.doc li{margin:0 0 5px}
.doc strong{color:var(--ink);font-weight:700}
.doc hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.doc .sig{color:var(--ink-30)}
.consent{display:grid;gap:14px}
.consent-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--card)}
.consent-row p{margin:0;font-size:14px;color:var(--ink-70);flex:1 1 260px;line-height:1.45}
.agree{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--ink-70);cursor:pointer}
.agree input{margin-top:3px;width:18px;height:18px;accent-color:var(--ember);flex:none}
.legal{font-size:12.5px;color:var(--ink-30);line-height:1.55;margin:0}
.choices{display:flex;flex-wrap:wrap;gap:9px}
.choice{border:1px solid var(--line);border-radius:999px;padding:10px 17px;font-size:13.5px;font-weight:600;color:var(--ink-70);cursor:pointer;transition:background .15s,color .15s,border-color .15s;position:relative}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice:has(input:checked){background:var(--ink);color:var(--ground);border-color:var(--ink)}

/* ---- request queue (admin) ---- */
/* Not a public surface. Same type and colour as everything else, but tuned for
   reading twenty rows quickly rather than for persuading anyone. */
.tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:26px}
.tab{background:none;border:0;padding:0 0 13px;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-30);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}
.tab:hover{color:var(--ink-70)}
.tab.is-on{color:var(--ink);border-bottom-color:var(--ember)}

.req{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-bottom:12px}
.req-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.req-when{font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:21px;letter-spacing:.01em;line-height:1.1;color:var(--ink)}
.req-svc{margin-top:5px;font-size:13.5px;color:var(--ink-50)}
.req-chips{display:flex;gap:7px;flex-wrap:wrap}

/* Status at a glance. Ember is the only loud colour, and it is spent on the
   one thing that is genuinely missing rather than on decoration. */
.chip{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-50);background:var(--bone-3);white-space:nowrap}
.chip.ok{color:var(--blue);background:var(--blue-tint);border-color:var(--blue-tint)}
.chip.warn{color:var(--ember-deep);background:var(--ember-tint);border-color:var(--ember-tint)}
.chip.pending{color:var(--ink);background:transparent;border-color:var(--ink-30)}
.chip.confirmed{color:var(--ground);background:var(--ink);border-color:var(--ink)}
.chip.declined,.chip.cancelled{color:var(--ink-30);background:transparent}
/* Completed is the only status the seal counts, so it is the only one that
   earns a colour of its own rather than a shade of the others. */
.chip.completed{color:var(--blue);background:var(--blue-tint);border-color:var(--blue)}
.chip.no_show{color:var(--ink-30);background:transparent;border-style:dashed}

.req-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 26px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.req-grid .wide{grid-column:1/-1}
.req-grid .k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-30);margin-bottom:5px}
.req-grid .v{display:block;font-size:15px;line-height:1.5;color:var(--ink)}
.req-grid .v a{color:var(--ink-70);border-bottom:1px solid var(--line)}
.req-grid .v a:hover{color:var(--ember);border-color:var(--ember)}

.req-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.req-age{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-30)}
/* The one question a finished session still owes an answer to. It sits above
   the footer rather than inside the decide panel because it is not a decision
   about the future, and it should be answerable without opening anything. */
.req-close{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:2px solid var(--ink)}
.req-close-q{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);margin-right:2px}
.req-close .form-msg{margin:0;font-size:13px}

.req-decide{margin-top:20px;padding-top:20px;border-top:2px solid var(--ink)}
.req-decide .frow{gap:16px}
.req-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.req-actions .form-msg{margin:0;font-size:13px}
.hint{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-30)}

/* ---- final CTA ---- */
.bigcta .eyebrow{color:var(--blue)}
.bigcta .btn-primary:hover{background:transparent;color:var(--ember);border-color:var(--ember)}
.bigcta .dhead{font-size:clamp(40px,7vw,96px)}
.bigcta .lede{margin:20px 0 0;max-width:42ch}
.bigcta .btn{margin-top:32px}
.evalstep .n{color:var(--ember)}

/* ---- footer (the single dark bookend) ---- */
.foot{background:var(--ink);color:var(--bone);padding:clamp(60px,8vh,104px) 0 40px;margin-top:clamp(58px,9vh,116px)}
.foot a{color:rgba(255,255,255,.72);transition:color .18s var(--ease)}
.foot a:hover{color:var(--ember)}
.foot .big{font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:clamp(46px,8vw,116px);line-height:.82;letter-spacing:-.01em}
.foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;border-top:1px solid var(--line-ink);padding-top:34px;margin-top:48px}
.foot .k{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:13px}
.foot .col p,.foot .col a{display:block;font-size:14px;line-height:1.85;color:rgba(255,255,255,.74);margin:0}
.foot .btm{display:flex;justify-content:space-between;margin-top:42px;font-size:12px;color:rgba(255,255,255,.5);letter-spacing:.02em}
.foot a:hover,.foot .col a:hover,.foot .btm a:hover{color:var(--ember)}

/* ---- page header (about / train sub-pages) ---- */
.phead{padding-top:calc(var(--nav-h) + clamp(46px,10vh,110px));padding-bottom:clamp(40px,7vh,84px)}
.phead .eyebrow{margin-bottom:20px}
.phead h1{font-size:clamp(46px,8vw,116px)}
.phead .lede{margin:26px 0 0;max-width:52ch}

/* ---- reveal ---- */
.rise{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rise.in{opacity:1;transform:none}
.grid .rise:nth-child(2){transition-delay:.09s}
.grid .rise:nth-child(3){transition-delay:.18s}
.mrule{width:54px;height:2px;background:var(--ember);margin-bottom:clamp(22px,3vw,30px)}

/* ---- responsive ---- */
@media(max-width:560px){.chips{grid-template-columns:1fr}.shead .rt{text-align:left}}
@media(prefers-reduced-motion:reduce){.rise{transition:none}}
@media(max-width:900px){
  .g2,.g3,.vled,.booker,.frow,.whoband,.ctagrid,.coach,.offer-lead,.req-grid{grid-template-columns:1fr}
  .tabs{gap:18px}
  .stypegrid{grid-template-columns:1fr 1fr}
  .coach .portrait{aspect-ratio:4/5;height:auto;min-height:0}
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 72px)}
  .hero-rail .seal{width:68px}
  .foot .cols{grid-template-columns:1fr 1fr}
  .nav .links .navlink{display:none}
  .shead .rt{margin-left:0;text-align:left}
}