/* ============================================================
   REVL Franchise Experience — design system
   Tokens, fonts and photo treatment ported verbatim from the
   leadership deck (active/franchise-recruitment-deck/build/index.html)
   so this reads as the same REVL artifact. Vertical scroll, not slides.
   ============================================================ */

@font-face{ font-family:'Acier'; src:url('assets/fonts/AcierTextSolid.otf') format('opentype'); font-display:block; }
@font-face{ font-family:'Acier Out'; src:url('assets/fonts/AcierTextOutline.otf') format('opentype'); font-display:block; }

:root{
  --black:#0A0A0A; --black2:#070707; --panel:#14181a; --panel2:#1A1E1E;
  --white:#FFFFFF; --off:#E8E8E6; --warm:#CCCABB; --grey:#9a9a93;
  --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.06);
  /* Official style guide v1.0: Beige is the accent. The token name stays
     --ember so this is a pure recolour of the locked v3 page. */
  --ember:#CCCABB;
  /* Official style guide v1.0 names, shared with the funnel pages so the two
     projects stay one system. Mid Black is the only text colour allowed to
     sit ON beige. --field is the form input fill. */
  --midblack:#1A1E1E; --chalk:#D3D4D3; --beige:#CCCABB; --field:#141819;
  --maxw:1180px;
  --gutter:clamp(24px,7vw,120px);
  --sectionpad:clamp(96px,13vh,176px);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--black); color:var(--off); font-family:'Manrope',sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:rgba(204,202,187,.3); color:var(--white); }

/* ---------- running header + progress ---------- */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; background:rgba(255,255,255,.07); z-index:80; }
.progress span{ display:block; height:100%; width:0; background:var(--ember); transition:width .2s linear; }
.hdr{ position:fixed; top:0; left:0; right:0; z-index:70; display:flex; justify-content:space-between; align-items:center;
  padding:18px 28px; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,10,.85), rgba(10,10,10,0)); }
.hdr img{ height:15px; opacity:.95; }
.hdr .meta{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--warm); opacity:.85; }
.hdr .meta b{ color:var(--white); font-weight:700; }

/* ---------- section shell ---------- */
section.section{ position:relative; padding:var(--sectionpad) var(--gutter); }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; position:relative; z-index:2; }
.kicker{ font-size:11.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--warm); opacity:.85; margin-bottom:22px; }
.divider{ height:1px; background:var(--line2); }

/* type */
h1,h2{ font-family:'Acier',sans-serif; text-transform:uppercase; color:var(--white); line-height:.96; letter-spacing:.005em; font-weight:400; text-wrap:balance; overflow-wrap:break-word; }
h1{ font-size:clamp(46px,8vw,116px); }
h2{ font-size:clamp(30px,4.8vw,64px); }
h3{ font-family:'Acier',sans-serif; text-transform:uppercase; color:var(--white); font-size:clamp(19px,2.2vw,28px); line-height:1; letter-spacing:.01em; font-weight:400; text-wrap:balance; }
.lead{ font-size:clamp(16px,1.55vw,20px); line-height:1.6; font-weight:300; color:var(--off); max-width:60ch; text-wrap:pretty; }
.lead.wide{ max-width:92ch; }
.lead.mt{ margin-top:28px; }
.lead strong{ font-weight:700; color:var(--white); }
.small{ font-size:13px; line-height:1.6; color:var(--warm); font-weight:400; }
.flag{ font-size:11px; color:var(--grey); opacity:.7; font-style:italic; margin-top:10px; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.d1{ transition-delay:.07s; } .d2{ transition-delay:.15s; } .d3{ transition-delay:.25s; } .d4{ transition-delay:.35s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* full-bleed photo + scrim */
.bleed{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.bleed img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08) brightness(.55); }
.scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.35) 40%, rgba(10,10,10,.92) 100%); }
/* hero: anchor the dark on the left so the headline always reads crisp over the photo,
   and let more of the real gym shot breathe on the right */
#hero .scrim{ background:
  linear-gradient(90deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.6) 38%, rgba(10,10,10,.18) 72%, rgba(10,10,10,.05) 100%),
  linear-gradient(180deg, rgba(10,10,10,.4) 0%, rgba(10,10,10,.2) 42%, rgba(10,10,10,.9) 100%); }

/* ---------- hero ---------- */
#hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:clamp(72px,11vh,120px); }
#hero .wordmark{ height:30px; margin-bottom:26px; }
#hero .enquiry-note{ font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--warm); margin-bottom:22px; display:inline-flex; align-items:center; gap:10px; }
#hero .enquiry-note::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--ember); }
#hero h1{ margin-bottom:18px; }
#hero .sub{ font-size:clamp(15px,1.7vw,21px); color:var(--off); font-weight:300; letter-spacing:.01em; max-width:46ch; }
.scrollcue{ margin-top:40px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--warm); opacity:.7; display:inline-flex; align-items:center; gap:13px; }
/* animated scroll cue: three stacked chevrons pulse in sequence top-to-bottom.
   Direction with nothing moving. Pure CSS, flat (no glow), stilled for
   reduced-motion. */
.cue{ position:relative; width:11px; height:32px; flex:0 0 auto; color:var(--ember); }
.cue-chev{ position:absolute; left:50%; width:10px; line-height:0; transform:translateX(-50%);
  opacity:.14; animation:cuePulse 2.1s ease-in-out infinite; }
.cue-chev:nth-child(1){ top:3px; }
.cue-chev:nth-child(2){ top:12px; animation-delay:.26s; }
.cue-chev:nth-child(3){ top:21px; animation-delay:.52s; }
.cue-chev svg{ display:block; width:100%; height:auto; }
@keyframes cuePulse{
  0%,15%{ opacity:.14; }
  32%{ opacity:.8; }
  60%,100%{ opacity:.14; }
}
@media (prefers-reduced-motion:reduce){
  .cue-chev{ animation:none; opacity:.35; }
  .cue-chev:nth-child(3){ opacity:.65; }
}

/* statement + split */
.statement h2{ max-width:18ch; }
.split{ display:grid; grid-template-columns:1.2fr .8fr; gap:52px; align-items:center; }
.portrait{ aspect-ratio:4/5; border:1px solid var(--line); overflow:hidden; max-height:64vh; }
.portrait img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(.74); }

/* ---------- centered section variant (mix up the left-aligned rhythm) ---------- */
.centered .wrap{ text-align:center; }
.centered .lead{ margin-inline:auto; max-width:64ch; }

/* ---------- scale proof stat band ---------- */
.stats{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0; margin-top:54px; }
.stat{ text-align:center; padding:6px clamp(26px,5vw,68px); }
.stat .v{ font-family:'Acier',sans-serif; font-size:clamp(46px,6.6vw,86px); color:var(--white); line-height:.9; font-variant-numeric:tabular-nums; }
.stat .l{ font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--warm); margin-top:14px; }
.stat-div{ width:1px; height:60px; flex:0 0 auto; background:linear-gradient(transparent, rgba(255,255,255,.16), transparent); }

/* ---------- offerings / streams ---------- */
.offerings{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:38px; background:var(--line2); border:1px solid var(--line2); }
.offer{ background:var(--black); padding:22px 24px; }
.offer .n{ font-family:'Acier Out'; font-size:12px; color:var(--warm); opacity:.6; }
.offer .t{ font-size:14.5px; color:var(--white); font-weight:600; margin-top:10px; line-height:1.3; }
/* Move / Sweat / Perform: the signature three-stream system, as the centerpiece */
.streams{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:38px; }
.stream{ border:1px solid var(--line); border-radius:6px; padding:30px 26px; min-height:230px; display:flex; flex-direction:column; background:rgba(255,255,255,.012); }
.stream.on{ border-color:rgba(204,202,187,.4); background:linear-gradient(180deg, rgba(204,202,187,.06), rgba(255,255,255,.008)); }
.stream .sn{ font-family:'Acier Out',sans-serif; font-size:13px; color:var(--warm); opacity:.55; }
.stream .sh{ font-family:'Acier',sans-serif; font-size:clamp(32px,3.6vw,48px); color:var(--white); text-transform:uppercase; margin:auto 0 14px; line-height:.9; }
.stream .sd{ font-size:14px; color:var(--warm); line-height:1.5; }
.subhead{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--warm); opacity:.8; margin:48px 0 18px; }

/* ---------- video placeholder ---------- */
.video-ph{ position:relative; aspect-ratio:16/9; border:1px solid var(--line); border-radius:6px; overflow:hidden; margin-top:30px; background:var(--panel); cursor:pointer; width:100%; display:block; text-align:left; color:inherit; }
.video-ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(.42); transition:filter .4s, transform 6s ease; }
.video-ph:hover img{ filter:grayscale(1) contrast(1.08) brightness(.5); transform:scale(1.03); }
.video-ph .vph-grad{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,.2), rgba(10,10,10,.7)); }
.video-ph .vph-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:66px; height:66px; border-radius:50%; border:1px solid rgba(255,255,255,.55); display:grid; place-items:center; background:rgba(10,10,10,.35); backdrop-filter:blur(3px); transition:border-color .2s, background .2s; }
.video-ph:hover .vph-play{ border-color:var(--white); background:rgba(204,202,187,.25); }
.video-ph .vph-play::after{ content:''; width:0; height:0; border-left:16px solid var(--white); border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:4px; }
.video-ph .vph-meta{ position:absolute; left:18px; bottom:16px; right:18px; display:flex; justify-content:space-between; align-items:flex-end; gap:14px; }
.video-ph .vph-title{ font-size:14px; color:var(--white); font-weight:600; letter-spacing:.01em; }
.video-ph .vph-label{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--warm); border:1px solid var(--line); border-radius:2px; padding:4px 8px; background:rgba(10,10,10,.4); white-space:nowrap; }
.video-ph .vph-time{ position:absolute; top:14px; right:14px; font-size:10.5px; letter-spacing:.1em; color:var(--off); background:rgba(10,10,10,.55); border:1px solid var(--line); border-radius:2px; padding:4px 8px; font-variant-numeric:tabular-nums; opacity:0; transition:opacity .2s; }
.video-ph.playing .vph-time{ opacity:1; }
.video-ph.playing .vph-play{ background:rgba(204,202,187,.5); border-color:var(--ember); }
.video-ph.playing .vph-play::after{ border:none; width:14px; height:14px; margin:0; background:linear-gradient(90deg, var(--white) 0 38%, transparent 38% 62%, var(--white) 62% 100%); }

/* ---------- territory map ---------- */
.territory-wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; margin-top:36px; align-items:start; }
.territory-map{ position:relative; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--panel); aspect-ratio:16/10; }
.territory-map img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(.4); }
.territory-map .tm-grad{ position:absolute; inset:0; background:radial-gradient(circle at 60% 45%, rgba(204,202,187,.08), transparent 55%); }
.regions{ display:flex; flex-direction:column; gap:8px; }
.region{ display:flex; justify-content:space-between; align-items:center; gap:14px; border:1px solid var(--line); border-radius:4px; padding:14px 16px; background:rgba(255,255,255,.012); text-align:left; transition:border-color .18s, background .18s; }
.region:hover{ border-color:rgba(204,202,187,.5); background:rgba(204,202,187,.05); }
.region .rn{ font-size:14px; color:var(--white); font-weight:600; }
.region .rs{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--warm); }
.region.open .rs{ color:var(--ember); }
.region.active{ border-color:var(--ember); background:rgba(204,202,187,.08); }
.region .rmore{ font-size:11.5px; color:var(--grey); margin-top:4px; display:none; }
.region.active .rmore{ display:block; color:var(--off); }

/* ---------- format cards ---------- */
.formats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; }
.format-card{ border:1px solid var(--line); border-radius:5px; padding:24px 22px; background:rgba(255,255,255,.012); cursor:pointer; transition:border-color .2s, background .2s; display:flex; flex-direction:column; }
.format-card:hover{ border-color:rgba(255,255,255,.3); }
.format-card.open{ border-color:rgba(204,202,187,.45); background:linear-gradient(180deg, rgba(204,202,187,.05), rgba(255,255,255,.008)); }
.format-card .fnum{ font-family:'Acier Out'; font-size:12px; color:var(--warm); opacity:.6; }
.format-card .fname{ font-family:'Acier',sans-serif; font-size:26px; color:var(--white); text-transform:uppercase; margin:12px 0 6px; line-height:1; }
.format-card .fsize{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ember); }
.format-card .fdesc{ font-size:13px; color:var(--off); line-height:1.5; margin-top:14px; }
.format-card .fdetail{ max-height:0; overflow:hidden; transition:max-height .35s ease, margin .35s ease; }
.format-card.open .fdetail{ max-height:320px; margin-top:14px; }
.format-card .fdetail ul{ list-style:none; }
.format-card .fdetail li{ font-size:12.5px; color:var(--warm); padding:6px 0; border-bottom:1px solid var(--line2); }
.format-card .fdetail li:last-child{ border-bottom:none; }
.format-card .fmore{ margin-top:auto; padding-top:16px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--warm); opacity:.8; }
.format-card.open .fmore{ color:var(--ember); }

/* ---------- format comparison table ---------- */
.format-table-wrap{ margin-top:38px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.format-table{ width:100%; min-width:660px; border:1px solid var(--line); border-radius:8px; overflow:hidden; border-collapse:collapse; }
.format-table th, .format-table td{ text-align:left; padding:16px 20px; border-bottom:1px solid var(--line2); font-size:13.5px; color:var(--off); vertical-align:top; }
.format-table thead th{ background:rgba(255,255,255,.02); }
.format-table thead .nm{ font-family:'Acier',sans-serif; font-size:22px; color:var(--white); text-transform:uppercase; }
.format-table thead .sz{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ember); display:block; margin-top:6px; }
.format-table tbody th{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--warm); font-weight:400; width:168px; }
.format-table td:first-child, .format-table th:first-child{ border-right:1px solid var(--line2); }
.format-table tr:last-child td, .format-table tr:last-child th{ border-bottom:none; }
.format-table .feat{ background:rgba(204,202,187,.05); }

/* ---------- key numbers + ROI ---------- */
.numbers-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:36px; }
.numcard{ border:1px solid var(--line); border-radius:5px; padding:22px 20px; }
.numcard .v{ font-family:'Acier',sans-serif; font-size:clamp(30px,3.6vw,44px); color:var(--white); line-height:.9; }
.numcard .l{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--warm); margin-top:12px; }
.numcard .note{ font-size:10px; color:var(--grey); margin-top:6px; font-style:italic; }
.roi{ border:1px solid var(--line); border-radius:6px; padding:26px 26px; margin-top:24px; background:var(--panel); }
.roi .roi-head{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:12px; }
.roi h3{ font-size:20px; }
.roi .roi-tag{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ember); border:1px solid rgba(204,202,187,.4); border-radius:2px; padding:4px 9px; }
.roi .roi-controls{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.roi-opt{ border:1px solid var(--line); border-radius:3px; padding:11px 16px; font-size:13px; color:var(--off); background:rgba(255,255,255,.015); transition:border-color .18s, color .18s, background .18s; }
.roi-opt:hover{ border-color:rgba(255,255,255,.35); }
.roi-opt.on{ border-color:var(--ember); color:var(--white); background:rgba(204,202,187,.1); }
.roi-out{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px; }
.roi-metric .rv{ font-family:'Acier',sans-serif; font-size:clamp(24px,3vw,34px); color:var(--ember); line-height:.9; }
.roi-metric .rl{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--warm); margin-top:10px; }

/* ---------- what building a REVL includes (replaces the ROI box) ---------- */
.num-includes{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--warm); opacity:.85; margin:46px 0 18px; }
.includes-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line2); border:1px solid var(--line2); border-radius:6px; overflow:hidden; }
.includes-grid .inc{ background:var(--black); padding:18px 20px; font-size:13.5px; color:var(--off); display:flex; gap:12px; align-items:flex-start; line-height:1.4; }
.includes-grid .inc::before{ content:''; flex:0 0 auto; width:5px; height:10px; margin-top:2px; border-right:1px solid var(--ember); border-bottom:1px solid var(--ember); transform:rotate(45deg); }

/* ---------- support pillars ---------- */
.pillars{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:36px; }
.pillar{ border:1px solid var(--line); border-radius:5px; padding:24px 24px; }
.pillar .pn{ font-family:'Acier Out'; font-size:12px; color:var(--warm); opacity:.6; }
.pillar .ph{ font-family:'Acier',sans-serif; font-size:21px; color:var(--white); text-transform:uppercase; margin:10px 0 14px; line-height:1; }
.pillar .chips{ display:flex; flex-wrap:wrap; gap:7px; }
.pillar .chip{ font-size:11.5px; color:var(--off); border:1px solid var(--line); border-radius:2px; padding:6px 10px; letter-spacing:.02em; }

/* merged partnership + academy: the four support pillars beside the Academy film */
.support-split{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:stretch; margin-top:36px; }
.support-list{ display:flex; flex-direction:column; gap:14px; }
.support-list .sr{ border:1px solid var(--line); border-radius:6px; padding:17px 19px; }
.support-list .sr .h{ font-family:'Acier',sans-serif; font-size:18px; color:var(--white); text-transform:uppercase; line-height:1; }
.support-list .sr .d{ font-size:12.5px; color:var(--warm); margin-top:8px; line-height:1.5; }
.support-split .video-ph{ margin-top:0; aspect-ratio:auto; min-height:340px; }

/* ---------- launch process ---------- */
.process{ margin-top:38px; }
.pstage{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ember); margin:26px 0 14px; }
.psteps{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pstep{ border:1px solid var(--line); border-radius:4px; padding:18px 18px; }
.pstep .pw{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ember); }
.pstep .pt{ font-size:14px; color:var(--white); font-weight:600; margin:9px 0 8px; line-height:1.25; }
.pstep .pd{ font-size:12px; color:var(--grey); line-height:1.5; }
.psteps.two{ grid-template-columns:repeat(2,1fr); }

/* ---------- horizontal connected timeline (the path) ---------- */
.pathline{ position:relative; margin-top:50px; }
.pl-track{ display:grid; grid-template-columns:repeat(6,1fr); position:relative; }
/* connector line: span exactly from the first dot's centre to the last dot's
   centre (dots sit half a dot in from each column start, so 6.5px + 5/6 wide) */
.pl-track::before{ content:''; position:absolute; top:6px; left:6.5px; width:calc(500%/6); height:1px; background:var(--line); }
.pl-node{ text-align:left; padding-right:18px; position:relative; }
.pl-dot{ width:13px; height:13px; border-radius:50%; border:1px solid var(--ember); background:var(--black); position:relative; z-index:2; margin-bottom:18px; }
.pl-dot.fill{ background:rgba(204,202,187,.4); }
.pl-w{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ember); }
.pl-t{ font-size:13.5px; color:var(--white); font-weight:600; margin:8px 0 6px; line-height:1.2; }
.pl-d{ font-size:11.5px; color:var(--grey); line-height:1.45; }

/* ---------- proof / someone like you ---------- */
.proof-card{ border:1px solid var(--line); border-radius:6px; padding:30px 30px; margin-top:34px; background:rgba(255,255,255,.012); }
.proof-card .pl{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ember); margin-bottom:16px; }
.proof-card .pq{ font-size:clamp(18px,2.2vw,26px); color:var(--white); font-weight:300; line-height:1.4; font-family:'Manrope',sans-serif; }
.proof-card .pa{ font-size:12.5px; color:var(--warm); margin-top:18px; letter-spacing:.04em; }

/* ---------- CTA ---------- */
#book{ background:var(--black2); }
.cta-card{ border:1px solid rgba(204,202,187,.35); border-radius:8px; padding:clamp(32px,5vw,56px); margin:34px auto 0; max-width:780px; text-align:center; background:linear-gradient(180deg, rgba(204,202,187,.06), rgba(255,255,255,.008)); }
.cta-card .cl{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ember); margin-bottom:18px; }
.cta-card h2{ margin-bottom:18px; font-size:clamp(24px,3vw,38px); }
.cta-card .lead{ max-width:52ch; margin-inline:auto; }
.cta-btn{ display:inline-flex; align-items:center; gap:12px; background:var(--ember); color:var(--midblack); border:none; border-radius:3px; padding:17px 30px; font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-top:14px; transition:transform .15s, filter .15s; }
.cta-btn:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.cta-btn::after{ content:'\2192'; }
.cta-sub{ font-size:13px; color:var(--warm); margin-top:18px; }

/* ---------- footer ---------- */
.foot{ padding:46px var(--gutter) 60px; border-top:1px solid var(--line2); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; }
.foot img{ height:14px; opacity:.8; }
.foot .ft{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); }

/* ============================================================
   LIVE PROFILING PANEL  (the "see it working" proof)
   ============================================================ */
.profile-toggle{ position:fixed; bottom:20px; right:20px; z-index:90; display:inline-flex; align-items:center; gap:10px;
  background:rgba(20,24,26,.92); border:1px solid var(--line); border-radius:40px; padding:11px 17px 11px 14px;
  color:var(--off); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; backdrop-filter:blur(8px);
  transition:border-color .2s, transform .2s; }
.profile-toggle:hover{ border-color:rgba(255,255,255,.35); transform:translateY(-1px); }
.profile-toggle .pt-dot{ width:8px; height:8px; border-radius:50%; background:var(--ember); position:relative; animation:pp-breathe 2.6s ease-in-out infinite; }
@keyframes pp-breathe{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .profile-toggle .pt-dot{ animation:none; opacity:1; } }
.profile-toggle .pt-score{ color:var(--white); font-weight:700; font-variant-numeric:tabular-nums; }

.profile-panel{ position:fixed; bottom:20px; right:20px; z-index:91; width:min(360px, calc(100vw - 40px)); max-height:min(78vh, 640px); overflow-y:auto;
  background:rgba(20,24,26,.97); border:1px solid var(--line); border-radius:10px; backdrop-filter:blur(12px);
  transform:translateY(12px) scale(.98); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; box-shadow:0 24px 60px rgba(10,10,10,.5); }
.profile-panel.open{ opacity:1; transform:none; pointer-events:auto; }
.pp-head{ display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(20,24,26,.98); }
.pp-head .pp-t{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--white); font-weight:700; }
.pp-head .pp-x{ background:none; border:none; color:var(--warm); font-size:18px; line-height:1; padding:2px 6px; }
.pp-head .pp-x:hover{ color:var(--white); }
.pp-body{ padding:18px; }
.pp-section{ margin-bottom:20px; }
.pp-lab{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--warm); opacity:.8; margin-bottom:10px; }
.pp-intro{ font-size:12px; color:var(--warm); line-height:1.55; }
.pp-avatar{ font-family:'Acier',sans-serif; font-size:24px; color:var(--white); text-transform:uppercase; line-height:1; }
.pp-avatar.unknown{ color:var(--grey); }
.pp-conf{ height:5px; background:rgba(255,255,255,.08); border-radius:3px; margin-top:10px; overflow:hidden; }
.pp-conf span{ display:block; height:100%; background:var(--warm); border-radius:3px; transition:width .4s; }
.pp-conf-n{ font-size:10.5px; color:var(--grey); margin-top:6px; }
.pp-score-row{ display:flex; align-items:baseline; gap:12px; }
.pp-score{ font-family:'Acier',sans-serif; font-size:50px; color:var(--ember); line-height:.8; font-variant-numeric:tabular-nums; }
.pp-score-max{ font-size:14px; color:var(--grey); }
.pp-score-state{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--warm); margin-left:auto; align-self:flex-end; }
.pp-scorebar{ height:8px; background:rgba(255,255,255,.08); border-radius:4px; margin-top:12px; position:relative; overflow:visible; }
.pp-scorebar .fill{ display:block; height:100%; background:var(--ember); border-radius:4px; transition:width .5s; }
.pp-scorebar .thresh{ position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--white); opacity:.5; }
.pp-scorebar .thresh::after{ content:'HOT'; position:absolute; top:-15px; left:50%; transform:translateX(-50%); font-size:8px; letter-spacing:.1em; color:var(--warm); }
.pp-hot{ margin-top:12px; padding:10px 12px; border:1px solid var(--ember); border-radius:4px; background:rgba(204,202,187,.12); font-size:11.5px; color:var(--white); letter-spacing:.04em; display:none; }
.pp-hot.show{ display:block; }
.pp-signals{ list-style:none; }
.pp-signals li{ font-size:12px; color:var(--off); padding:7px 0; border-bottom:1px solid var(--line2); display:flex; justify-content:space-between; gap:12px; }
.pp-signals li:last-child{ border-bottom:none; }
.pp-signals .sv{ color:var(--warm); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pp-aff{ display:flex; flex-direction:column; gap:8px; }
.pp-affrow{ display:flex; align-items:center; gap:10px; font-size:11px; color:var(--warm); }
.pp-affrow .an{ width:92px; flex:0 0 auto; }
.pp-affrow .at{ flex:1; height:6px; background:rgba(255,255,255,.07); border-radius:3px; overflow:hidden; }
.pp-affrow .af{ display:block; height:100%; background:var(--grey); border-radius:3px; transition:width .4s; }
.pp-affrow.lead .af{ background:var(--ember); }
.pp-affrow.lead .an{ color:var(--white); }
.pp-next{ border:1px dashed var(--line); border-radius:4px; padding:13px 15px; font-size:12.5px; color:var(--off); line-height:1.45; }
.pp-next b{ color:var(--ember); }
.pp-foot{ display:flex; justify-content:space-between; align-items:center; padding-top:6px; }
.pp-reset{ background:none; border:1px solid var(--line); border-radius:3px; color:var(--warm); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:7px 12px; }
.pp-reset:hover{ border-color:var(--white); color:var(--white); }
.pp-note{ font-size:9.5px; color:var(--grey); font-style:italic; }

/* ---------- booking modal ---------- */
.bk-overlay{ position:fixed; inset:0; z-index:100; background:rgba(7,7,7,.82); display:none; align-items:center; justify-content:center; padding:20px; }
.bk-overlay.open{ display:flex; }
.bk-modal{ position:relative; width:min(440px,100%); max-height:min(88vh,700px); overflow-y:auto; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:36px 32px 26px; }
.bk-x{ position:absolute; top:14px; right:16px; background:none; border:none; color:var(--warm); font-size:20px; line-height:1; padding:4px 6px; }
.bk-x:hover{ color:var(--white); }
.bk-kicker{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ember); margin-bottom:14px; }
.bk-modal h3{ font-size:clamp(24px,3vw,32px); margin-bottom:12px; }
.bk-lead{ font-size:13.5px; color:var(--warm); line-height:1.55; margin-bottom:22px; }
.bk-field{ display:block; margin-bottom:14px; }
.bk-field span{ display:block; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--warm); opacity:.8; margin-bottom:7px; }
.bk-field input{ width:100%; background:var(--black2); border:1px solid var(--line2); border-radius:4px; padding:13px 14px; font-family:inherit; font-size:14px; color:var(--white); outline:none; transition:border-color .15s; }
.bk-field input::placeholder{ color:var(--grey); opacity:.7; }
.bk-field input:focus{ border-color:rgba(204,202,187,.6); }
.bk-field input.err{ border-color:rgba(196,90,90,.7); }
.bk-lab{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--warm); opacity:.8; margin:20px 0 10px; }
.bk-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.bk-month{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--white); font-weight:700; }
.bk-nav{ background:var(--black2); border:1px solid var(--line2); border-radius:3px; color:var(--off); width:30px; height:30px; font-size:16px; line-height:1; transition:border-color .15s,color .15s; }
.bk-nav:hover:not([disabled]){ border-color:var(--line); color:var(--white); }
.bk-nav[disabled]{ opacity:.3; cursor:default; }
.bk-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px; }
.bk-dow span{ text-align:center; font-size:9px; letter-spacing:.1em; color:var(--grey); text-transform:uppercase; padding:4px 0; }
.bk-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.bk-day{ height:38px; display:flex; align-items:center; justify-content:center; font-size:12.5px; color:var(--grey); border-radius:3px; border:1px solid transparent; background:none; font-variant-numeric:tabular-nums; }
.bk-day.pad{ visibility:hidden; }
.bk-day.dis{ opacity:.35; cursor:default; }
.bk-day.av{ color:var(--white); background:var(--black2); border-color:var(--line2); cursor:pointer; transition:border-color .15s; }
.bk-day.av:hover{ border-color:var(--ember); }
.bk-day.on{ background:var(--ember); border-color:var(--ember); color:var(--midblack); font-weight:700; }
.bk-slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.bk-slot{ background:var(--black2); border:1px solid var(--line2); border-radius:3px; padding:11px 0; font-size:12.5px; color:var(--off); text-align:center; transition:border-color .15s,color .15s; }
.bk-slot:hover{ border-color:var(--ember); color:var(--white); }
.bk-slotline{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; color:var(--off); margin-bottom:20px; padding:12px 14px; background:var(--black2); border:1px solid var(--line2); border-radius:4px; }
.bk-change{ background:none; border:none; color:var(--ember); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; flex:0 0 auto; }
.bk-change:hover{ text-decoration:underline; }
.bk-submit{ display:block; width:100%; margin-top:24px; background:var(--ember); color:var(--midblack); border:none; border-radius:3px; padding:16px; font-size:13.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; transition:filter .15s; }
.bk-submit:hover{ filter:brightness(1.08); }
.bk-note{ margin-top:14px; font-size:11px; color:var(--grey); text-align:center; font-style:italic; }
.bk-done{ text-align:center; padding:10px 0 6px; }
.bk-check{ display:block; width:14px; height:26px; border-right:2px solid var(--ember); border-bottom:2px solid var(--ember); transform:rotate(45deg); margin:6px auto 26px; }
.bk-done .bk-lead{ margin-bottom:26px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:880px){
  .split{ grid-template-columns:1fr; gap:26px; } .portrait{ max-width:340px; max-height:46vh; }
  .territory-wrap{ grid-template-columns:1fr; gap:24px; }
  .formats{ grid-template-columns:1fr; } .format-card.open .fdetail{ max-height:420px; }
  .numbers-grid{ grid-template-columns:1fr 1fr; } .roi-out{ grid-template-columns:1fr; gap:18px; }
  .includes-grid{ grid-template-columns:1fr 1fr; }
  .pillars{ grid-template-columns:1fr; } .offerings{ grid-template-columns:1fr; }
  .support-split{ grid-template-columns:1fr; } .support-split .video-ph{ aspect-ratio:16/9; min-height:0; }
  .psteps{ grid-template-columns:1fr 1fr; }
  .pl-track{ grid-template-columns:repeat(3,1fr); gap:28px 0; } .pl-track::before{ display:none; }
  .hdr .meta{ font-size:9px; letter-spacing:.14em; }
}
@media(max-width:600px){
  :root{ --gutter:20px; --sectionpad:clamp(72px,10vh,110px); }
  .hdr{ padding:14px 16px; } .hdr img{ height:13px; }
  #hero .wordmark{ height:24px; } #hero h1{ font-size:38px; }
  .stats{ flex-direction:column; gap:30px; } .stat-div{ display:none; }
  .numbers-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .includes-grid{ grid-template-columns:1fr; }
  .psteps{ grid-template-columns:1fr; }
  .pl-track{ grid-template-columns:1fr; gap:22px; }
  .streams{ grid-template-columns:1fr; }
  .video-ph .vph-play{ width:54px; height:54px; }
  .profile-panel{ width:calc(100vw - 28px); right:14px; bottom:14px; max-height:82vh; }
  .profile-toggle{ right:14px; bottom:14px; }
}

/* ============================================================
   V2 ADDITIONS  (full borders or none, never a one-sided accent)
   ============================================================ */

/* ----- interactive territory explorer ----- */
#tx-root{ display:block; margin-top:34px; }
.tx{ margin-top:36px; }
.tx-crumb{ display:flex; align-items:center; gap:9px; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--warm); margin-bottom:22px; flex-wrap:wrap; }
.tx-crumb button{ background:none; border:none; color:var(--warm); font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; padding:0; }
.tx-crumb button:hover{ color:var(--white); }
.tx-crumb .sep{ opacity:.45; }
.tx-crumb .cur{ color:var(--ember); }
.tx-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.tx-card{ border:1px solid var(--line); border-radius:5px; padding:20px 18px; background:rgba(255,255,255,.012); cursor:pointer; transition:border-color .18s, background .18s; text-align:left; }
.tx-card:hover{ border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.02); }
.tx-card .tc-name{ font-size:16px; color:var(--white); font-weight:700; line-height:1.2; }
.tx-card .tc-meta{ font-size:11.5px; color:var(--grey); margin-top:9px; letter-spacing:.03em; }
.tx-card .tc-open{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ember); margin-top:13px; }
.tx-list{ display:flex; flex-direction:column; gap:14px; }
.tx-territory{ border:1px solid var(--line); border-radius:5px; padding:20px 22px; background:rgba(255,255,255,.012); }
.tx-terr-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.tx-terr-name{ font-size:18px; color:var(--white); font-weight:700; }
.tx-terr-status{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px; border:1px solid var(--line); border-radius:3px; color:var(--warm); white-space:nowrap; }
.tx-terr-status.open{ color:var(--ember); border-color:rgba(204,202,187,.4); }
.tx-terr-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; align-items:center; }
.tx-demo-toggle{ background:none; border:1px solid var(--line); border-radius:3px; color:var(--off); font-size:12px; letter-spacing:.05em; padding:10px 15px; cursor:pointer; transition:border-color .18s, color .18s; }
.tx-demo-toggle:hover{ border-color:var(--white); color:var(--white); }
.tx-demo{ max-height:0; overflow:hidden; transition:max-height .38s ease, margin .38s ease; }
.tx-territory.open .tx-demo{ max-height:420px; margin-top:18px; }
.tx-demo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line2); border:1px solid var(--line2); border-radius:4px; overflow:hidden; }
.tx-demo-row{ background:var(--black); padding:13px 14px; }
.tx-demo-row .dl{ font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--warm); opacity:.85; }
.tx-demo-row .dv{ font-size:15px; color:var(--white); font-weight:600; margin-top:6px; line-height:1.1; }
.tx-fit{ font-size:12.5px; color:var(--warm); margin-top:14px; line-height:1.5; }
.tx-register{ background:var(--ember); color:var(--midblack); border:none; border-radius:3px; padding:11px 20px; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:filter .15s, transform .15s; }
.tx-register:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.tx-register:disabled{ background:var(--panel2); color:var(--warm); cursor:default; transform:none; }
.tx-flag{ font-size:11px; color:var(--grey); opacity:.75; font-style:italic; margin-top:20px; }

/* ----- avatar rails: full-bleed horizontal slides, deck-style edge arrows ----- */
.rail-section{ padding:0; }                 /* full-bleed: the slide carries its own gutter */
.rail{ position:relative; overflow:hidden; }
.rail-viewport{ overflow:hidden; }
.rail-track{ display:flex; transition:transform .55s cubic-bezier(.5,.05,.2,1); will-change:transform; }
.rail-slide{ flex:0 0 100%; min-width:100%; min-height:clamp(520px,84svh,900px); display:flex; align-items:center; }
.rail-inner{ width:100%; max-width:var(--maxw); margin-inline:auto; padding:96px var(--gutter) 112px; }
.rail-slide .rs-kick{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--warm); margin-bottom:18px; }
.rail-slide .rs-kick b{ color:var(--ember); font-weight:700; }
.rail-slide h3{ font-size:clamp(26px,4vw,52px); margin-bottom:18px; max-width:20ch; }
.rail-slide .rs-body{ font-size:clamp(16px,1.55vw,20px); line-height:1.6; font-weight:300; color:var(--off); max-width:60ch; text-wrap:pretty; }
.rail-slide .rs-body strong{ color:var(--white); font-weight:700; }
.rail-slide .rs-points{ list-style:none; margin-top:22px; max-width:60ch; }
.rail-slide .rs-points li{ font-size:14px; color:var(--warm); padding:11px 0; border-bottom:1px solid var(--line2); }
.rail-slide .rs-points li:last-child{ border-bottom:none; }
.rail-slide .rs-cta{ display:inline-flex; align-items:center; gap:10px; margin-top:28px; background:var(--ember); color:var(--midblack); border:none; border-radius:3px; padding:15px 26px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:filter .15s, transform .15s; }
.rail-slide .rs-cta::after{ content:'\2192'; }
.rail-slide .rs-cta:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.rail-slide .rs-cta:disabled{ background:var(--panel2); color:var(--warm); transform:none; }
.rail-proof{ border:1px solid var(--line); border-radius:6px; padding:24px; background:rgba(255,255,255,.012); max-width:60ch; }
.rail-proof .rp-label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ember); margin-bottom:13px; }
.rail-proof .rp-q{ font-size:clamp(17px,1.9vw,22px); color:var(--white); font-weight:300; line-height:1.45; }
.rail-proof .rp-a{ font-size:12px; color:var(--warm); margin-top:15px; }
/* screen-edge arrows, only on screen while the rail is */
.rail-edge{ position:absolute; top:50%; transform:translateY(-50%); z-index:20; width:52px; height:52px; border-radius:50%; border:1px solid var(--line); background:rgba(10,10,10,.5); color:var(--off); font-size:22px; cursor:pointer; display:grid; place-items:center; backdrop-filter:blur(6px); transition:border-color .18s, color .18s, opacity .18s; }
.rail-edge:hover{ border-color:var(--white); color:var(--white); }
.rail-edge:disabled{ opacity:.16; cursor:default; }
.rail-edge.prev{ left:18px; } .rail-edge.next{ right:18px; }
.rail-foot{ position:absolute; bottom:30px; left:0; right:0; display:flex; justify-content:center; align-items:center; gap:16px; z-index:20; pointer-events:none; }
.rail-foot .rn-dots{ display:flex; gap:8px; pointer-events:auto; }
.rail-foot .rn-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.25); border:none; padding:0; cursor:pointer; transition:background .2s, transform .2s; }
.rail-foot .rn-dot.on{ background:var(--ember); transform:scale(1.3); }
.rail-foot .rn-count{ font-size:11px; letter-spacing:.16em; color:var(--warm); font-variant-numeric:tabular-nums; pointer-events:auto; }
@media (prefers-reduced-motion:reduce){ .rail-track{ transition:none; } }

@media(max-width:880px){
  .tx-grid{ grid-template-columns:1fr 1fr; }
  .tx-demo-grid{ grid-template-columns:1fr; }
  .tx-territory.open .tx-demo{ max-height:1200px; }   /* stacked demo grid is far taller; don't clip the fit line */
  .rail-edge{ width:42px; height:42px; font-size:18px; }
  .rail-edge.prev{ left:8px; } .rail-edge.next{ right:8px; }
}
@media(max-width:600px){
  .tx-grid{ grid-template-columns:1fr; }
  .tx-terr-head{ flex-direction:column; gap:10px; }
  .rail-slide{ min-height:clamp(480px,80svh,720px); }
  .rail-inner{ padding:84px var(--gutter) 92px; }
  .rail-edge{ display:none; }   /* mobile: swipe + dots */
  .rail-foot{ bottom:22px; }
}

/* ----- territory intent (soft framing: see my area / compare) ----- */
.tx-intent{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.tx-int-btn{ border:1px solid var(--line); border-radius:3px; padding:11px 18px; font-size:13px; color:var(--off); background:rgba(255,255,255,.015); transition:border-color .18s, color .18s, background .18s; }
.tx-int-btn:hover{ border-color:rgba(255,255,255,.35); }
.tx-int-btn.on{ border-color:var(--ember); color:var(--white); background:rgba(204,202,187,.1); }

/* ----- ROI configurator (inputs that quietly discriminate) ----- */
.roi-config{ margin-top:24px; padding-top:22px; border-top:1px solid var(--line2); display:flex; flex-direction:column; gap:18px; }
.roi-config .cfg-q{ font-size:12.5px; color:var(--warm); letter-spacing:.03em; margin-bottom:10px; }
.roi-config .cfg-opts{ display:flex; gap:10px; flex-wrap:wrap; }
.roi-config .cfg-echo{ font-size:12.5px; color:var(--off); font-style:italic; line-height:1.5; min-height:1.2em; }

/* ----- objection deck (which question they open is the signal) ----- */
.qdeck{ display:flex; flex-direction:column; gap:12px; margin-top:34px; }
.qcard{ border:1px solid var(--line); border-radius:5px; background:rgba(255,255,255,.012); overflow:hidden; transition:border-color .2s; }
.qcard.open{ border-color:rgba(204,202,187,.45); background:linear-gradient(180deg, rgba(204,202,187,.05), rgba(255,255,255,.008)); }
.qhead{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:18px; background:none; border:none; text-align:left; padding:20px 22px; color:var(--white); }
.qhead .qq{ font-size:15px; font-weight:600; line-height:1.4; }
.qhead .qx{ font-family:'Acier Out'; font-size:22px; line-height:1; color:var(--warm); flex:0 0 auto; transition:transform .28s ease, color .2s; }
.qcard.open .qhead .qx{ transform:rotate(45deg); color:var(--ember); }
.qbody{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.qcard.open .qbody{ max-height:360px; }
.qbody p{ font-size:13.5px; color:var(--warm); line-height:1.65; padding:0 22px 22px; max-width:74ch; }

/* ----- live profile: territory interest tracker ----- */
.pp-terr{ display:flex; flex-direction:column; gap:9px; }
.pp-terr-row{ display:flex; justify-content:space-between; gap:12px; font-size:12px; }
.pp-terr-row .ptl{ color:var(--warm); white-space:nowrap; }
.pp-terr-row .ptv{ color:var(--off); text-align:right; }
.pp-terr-row.reg .ptv{ color:var(--ember); }

/* ----- format swipe carousel (mobile) -----
   app.js builds these cards from the desktop table, so there is one source of
   truth; CSS just hides the table and shows the carousel on phones. */
.fmt-cards{ display:none; }
.fmt-track{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); -webkit-overflow-scrolling:touch; margin:0 calc(-1 * var(--gutter)); padding:2px var(--gutter) 8px; }
.fmt-track::-webkit-scrollbar{ height:0; }
.fmt-card{ flex:0 0 80%; scroll-snap-align:start; border:1px solid var(--line); border-radius:10px; padding:22px 20px; background:rgba(255,255,255,.012); }
.fmt-card.feat{ border-color:rgba(204,202,187,.55); background:linear-gradient(180deg, rgba(204,202,187,.07), rgba(255,255,255,.008)); }
.fmt-card .fc-top{ display:flex; justify-content:space-between; align-items:center; }
.fmt-card .fc-n{ font-family:'Acier Out'; font-size:12px; color:var(--warm); opacity:.6; }
.fmt-card .fc-sz{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--warm); }
.fmt-card.feat .fc-sz{ color:var(--ember); }
.fmt-card .fc-name{ font-family:'Acier',sans-serif; font-size:30px; color:var(--white); text-transform:uppercase; line-height:1; margin:14px 0 8px; }
.fmt-card .fc-ess{ font-size:13.5px; color:var(--off); font-weight:500; }
.fmt-card.feat .fc-ess{ color:var(--white); }
.fmt-card .fc-specs{ margin-top:16px; border-top:1px solid var(--line2); }
.fmt-card .fc-row{ padding:10px 0; border-bottom:1px solid var(--line2); }
.fmt-card .fc-row:last-child{ border-bottom:none; }
.fmt-card .fc-row dt{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--warm); opacity:.8; }
.fmt-card .fc-row dd{ font-size:13.5px; color:var(--off); margin-top:4px; }
.fmt-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; }
.fmt-dots{ display:flex; gap:7px; }
.fmt-dots i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.22); display:block; transition:background .2s, transform .2s; }
.fmt-dots i.on{ background:var(--ember); transform:scale(1.25); }
.fmt-hint{ font-size:11px; letter-spacing:.04em; color:var(--warm); opacity:.8; }

/* ============================================================
   MOBILE POLISH  (phones — layered after the base responsive
   blocks so these win on the cascade; desktop stays untouched)
   ============================================================ */
@media(max-width:600px){

  /* ---- format comparison: the table side-scrolls below 660px, so on phones
         hide it and show the swipe carousel (built from the table by app.js) ---- */
  .format-table-wrap{ overflow-x:visible; }
  .format-table{ display:none; }
  .fmt-cards{ display:block; }

  /* ---- the path: rebuild the collapsed grid as a true vertical timeline,
         with a connecting spine the dots sit on (it reads as a journey, not
         a row of loose circles). ---- */
  .pathline{ margin-top:40px; }
  .pl-track{ grid-template-columns:1fr; gap:0; position:relative; }
  .pl-track::before{ display:block; content:''; left:6px; top:6px; bottom:6px; right:auto; width:1px; height:auto;
    background:linear-gradient(180deg,transparent,var(--line) 5%,var(--line) 95%,transparent); }
  .pl-node{ position:relative; padding:0 0 28px 30px; }
  .pl-node:last-child{ padding-bottom:0; }
  .pl-dot{ position:absolute; left:0; top:3px; margin-bottom:0; }

  /* ---- streams: tighten the tall, half-empty Move/Sweat/Perform cards ---- */
  .stream{ min-height:0; padding:24px 22px; }
  .stream .sh{ margin:16px 0 12px; }

  /* ---- accordion: headroom so a long answer never clips on a narrow column ---- */
  .qcard.open .qbody{ max-height:600px; }
}

/* ============================================================
   PAGE ONE: the enquiry form.
   Ported from the funnel pages (active/franchise-funnel-concept/shared.css)
   so the two projects stay one system. Runs on the OFFICIAL palette:
   Mid Black / Chalk White / Beige. Flat controls only, appearance:none
   with a drawn caret, never a native 3D select.
   ============================================================ */
.gate{ border:1px solid rgba(211,212,211,.22); background:var(--midblack); padding:clamp(26px,4.5vw,50px); margin-top:44px; }
.gate .unlocks{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px 26px; margin:0 0 6px; max-width:760px; }
.gate .unlocks span{ display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--chalk); line-height:1.45; }
.gate .unlocks span::before{ content:''; flex:0 0 auto; width:5px; height:10px; margin-top:3px; border-right:1px solid var(--beige); border-bottom:1px solid var(--beige); transform:rotate(45deg); }

.form{ margin-top:34px; }
.frow{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:14px; }
.frow.three{ grid-template-columns:repeat(3,1fr); }
.ffield{ display:block; }
.ffield span{ display:block; font-size:14px; letter-spacing:0; text-transform:none; font-weight:500; color:var(--chalk); opacity:1; margin-bottom:8px; }
.ffield input, .ffield select{ width:100%; background:var(--field); border:1px solid rgba(211,212,211,.34); border-radius:0; padding:15px 16px; font-family:inherit; font-size:17px; font-weight:400; color:var(--white); outline:none; transition:border-color .15s, background .15s; appearance:none; -webkit-appearance:none; }
.ffield select{ background-image:linear-gradient(45deg, transparent 50%, var(--chalk) 50%), linear-gradient(135deg, var(--chalk) 50%, transparent 50%);
  background-position:calc(100% - 21px) 52%, calc(100% - 16px) 52%; background-size:5px 5px; background-repeat:no-repeat; padding-right:44px; }
.ffield input::placeholder{ color:rgba(211,212,211,.45); opacity:1; }
.ffield input:focus, .ffield select:focus{ border-color:var(--chalk); }
.ffield input.err, .ffield select.err{ border-color:var(--beige); background:rgba(204,202,187,.06); }

.flab{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--beige); margin:30px 0 12px; padding-bottom:8px; border-bottom:1px solid rgba(211,212,211,.22); }
.form > .flab:first-child{ margin-top:0; }

.sorter{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.sorter.err{ outline:1px solid var(--beige); outline-offset:6px; }
.sopt{ text-align:left; background:var(--field); border:1px solid rgba(211,212,211,.34); border-radius:0; padding:16px 17px; font-size:15.5px; color:var(--chalk); line-height:1.45; transition:border-color .15s, background .15s, color .15s; }
.sopt:hover{ border-color:var(--chalk); }
.sopt.on{ border-color:var(--chalk); background:var(--chalk); color:var(--midblack); font-weight:600; }

.seg{ display:flex; gap:10px; }
.seg button{ flex:1; background:var(--field); border:1px solid rgba(211,212,211,.34); border-radius:0; padding:15px 0; font-size:15px; color:var(--chalk); transition:border-color .15s, color .15s, background .15s; }
.seg button:hover{ border-color:var(--chalk); }
.seg button.on{ border-color:var(--chalk); background:var(--chalk); color:var(--midblack); font-weight:600; }

.form .cta-btn{ width:100%; justify-content:center; margin-top:30px; background:var(--chalk); color:var(--midblack); border-radius:0; font-size:15px; padding:19px 30px; }
.form .cta-btn:hover{ filter:brightness(1.06); }
.form .cta-btn:disabled{ opacity:.7; cursor:default; transform:none; }
.fnote{ margin-top:14px; font-size:12px; color:rgba(211,212,211,.6); text-align:center; }

/* Error message: the palette has no semantic red, so this reads as a full
   bordered beige note, never a one-sided bar and never an invented colour. */
.ferr{ margin-top:18px; border:1px solid var(--beige); background:rgba(204,202,187,.08); color:var(--chalk); padding:12px 14px; font-size:13px; line-height:1.5; }

/* ============================================================
   PAGE TWO: the state band + the inline calendar.
   ============================================================ */
#state .stat .v{ font-size:clamp(30px,4.4vw,56px); }
#state .stat .l{ margin-top:12px; }
#state h2 span{ color:inherit; }

/* Book a call: the section reads left, the calendar sits right, so the
   calendar never floats alone in half an empty row. Mirrors .support-split. */
.book-split{ display:grid; grid-template-columns:1fr minmax(0,460px); gap:clamp(30px,4vw,60px); align-items:start; }
.book-intro .lead{ max-width:44ch; }
.book-expect{ margin-top:34px; display:flex; flex-direction:column; gap:1px; background:var(--line2); border:1px solid var(--line2); }
.book-expect .be{ background:var(--black); padding:15px 18px; font-size:13.5px; color:var(--warm); line-height:1.5; display:flex; gap:13px; align-items:flex-start; }
.book-expect .be::before{ content:''; flex:0 0 auto; width:5px; height:10px; margin-top:4px; border-right:1px solid var(--ember); border-bottom:1px solid var(--ember); transform:rotate(45deg); }

/* The calendar sits open in the page: no overlay, nothing to click first. */
.bk-inline{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:clamp(24px,3.4vw,34px); }
.bk-inline h3{ font-size:clamp(20px,2.4vw,26px); margin-bottom:12px; }
.bk-inline .bk-note{ margin-bottom:0; }
.bk-inline .bk-field:first-of-type{ margin-top:4px; }

@media (max-width:900px){
  .book-split{ grid-template-columns:1fr; }
  .bk-inline{ margin-top:8px; }
}
@media (max-width:820px){
  .frow, .frow.three{ grid-template-columns:1fr; }
  .sorter{ grid-template-columns:1fr; }
  .gate .unlocks{ grid-template-columns:1fr; }
}