/* ============================================================
   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.
   ============================================================ */

/* ============================================================
   TYPE, style guide v2.1 (4.1 P.18), migrated 2026-09-01.
   The faces themselves are declared once in assets/fonts/fonts-v2.css,
   which every page that loads this sheet also loads. Only the role
   tokens live here, so a page can redefine a role without forking a rule.

   Display  Neue Haas Grotesk Display Pro 75 Bold   700, caps, tracking 0
   Body     Futura PT                               400, sentence case
   Caption  PP Fraktion Mono                        caps, tracking -.02em

   WHAT THIS REPLACED. Two @font-face rules pulling AcierTextSolid.otf and
   AcierTextOutline.otf, plus Manrope as the body face, all three retired
   under v2.1 and blocked on write. Acier ran at weight 400 because the OTF
   was drawn heavy; NHG needs an explicit 700 or it renders Roman.

   THE TRACKING SIGN IS THE THING THAT CHANGED MOST. Every kicker, label,
   section mark and button on this sheet used to run in the body face at
   POSITIVE tracking, between .08em and .28em. v2.1 puts all of them in
   Fraktion Mono at MINUS .02em. That is the single most common drift the
   brand source names, and it is why this pass is not a find and replace.
   ============================================================ */
:root{
  --disp:'Neue Haas Grotesk Display Pro','NHaasGroteskDSPro-75Bd','Helvetica Neue',Helvetica,Arial,sans-serif;
  --fut:'Futura PT','Futura','Futura-Medium',Avenir,'Century Gothic',sans-serif;
  --fmono:'PP Fraktion Mono','Fraktion Mono',Menlo,'Courier New',monospace;
}

:root{
  --black:#0A0A0A; --black2:#070707; --panel:#14181a; --panel2:#1A1E1E;
  --white:#FFFFFF; --off:#E8E8E6; --warm:#CCCABB; --grey:#9a9a93;
  /* Hairlines. Were white at 12 and 6 percent, which is why the programme
     band's outer frame read as missing on a phone: at 6 percent white over
     the near-black ground the border is under one value step, so the internal
     gaps survived and the outside edge did not (Macca, 2026-09-01, "it loses
     the outside borders of the boxes"). v2.1 derives every hairline from Grey
     at reduced alpha rather than from white, and the guide's own values are
     visible. 89 rules across this sheet use these two. */
  --line:rgba(212,212,211,.28); --line2:rgba(212,212,211,.14);
  /* 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:var(--fut);
  /* 17px not the 16px default. Futura Book has a markedly smaller x-height
     than Manrope did, so matched px sizes read a size down. 17px is the
     figure the free week page already shipped on for the same reason. */
  font-size:17px;
  -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-family:var(--fmono); font-size:10.5px; letter-spacing:-.02em; line-height:1.1; 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; }
/* The section mark. Was 11.5px Manrope at PLUS .28em, the widest positive
   tracking on the sheet; v2.1 makes it a mono caption at MINUS .02em. Mono
   is wider per character than Manrope was, so losing .3em of tracking costs
   the kicker much less width than the numbers suggest. */
.kicker{ font-family:var(--fmono); font-size:11.5px; letter-spacing:-.02em; line-height:1.1; text-transform:uppercase; color:var(--warm); opacity:.85; margin-bottom:22px; }
.divider{ height:1px; background:var(--line2); }

/* type. Display is NHG Display Pro 75 Bold: 700, caps, tracking 0, and the
   guide's 1.05 leading, which is looser than the .96 Acier was set at. Acier
   was drawn heavy at weight 400; NHG renders Roman unless 700 is asked for,
   so the weight is explicit on every display rule in this sheet. */
h1,h2{ font-family:var(--disp); font-weight:700; text-transform:uppercase; color:var(--white); line-height:1.05; letter-spacing:0; text-wrap:balance; overflow-wrap:break-word; }
/* Sizes came down by a measured 13 percent across every display rule when the
   face changed. NHG Display Pro 75 Bold sets 1.155x wider than Acier did at
   the same px, measured on four real headings on this page (h1 1.117, the
   band's cell name 1.149, .diff-h 1.200, .fmtc-name 1.176). Left at the old
   numbers the h2 fell from three lines to four and RACE DAY PREP broke across
   two, so the band lost its rhythm. This restores the line breaks the layout
   was drawn around. */
h1{ font-size:clamp(40px,7vw,101px); }
h2{ font-size:clamp(26px,4.2vw,55.7px); }
h3{ font-family:var(--disp); font-weight:700; text-transform:uppercase; color:var(--white); font-size:clamp(16.5px,1.9vw,24.4px); line-height:1.05; letter-spacing:0; text-wrap:balance; }
/* Body was Manrope 300. Only the Book (400) and Bold (700) Futura cuts are
   loaded, so a 300 here would have rendered 400 anyway; it is written as 400
   so the file says what actually paints. */
.lead{ font-size:clamp(17px,1.6vw,21px); line-height:1.5; font-weight:400; 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:13.5px; line-height:1.55; color:var(--warm); font-weight:400; }
.flag{ font-size:11.5px; 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-family:var(--fmono); line-height:1.1; font-size:11.5px; letter-spacing:-.02em; text-transform:uppercase; color:var(--warm); margin-bottom:22px; display:inline-flex; align-items:center; gap:10px; }
#hero h1{ margin-bottom:18px; }
#hero .sub{ font-size:clamp(15px,1.7vw,21px); color:var(--off); font-weight:400; letter-spacing:.01em; max-width:46ch; }
.scrollcue{ font-family:var(--fmono); line-height:1.1; margin-top:22px; font-size:11px; letter-spacing:-.02em; 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; }

/* Page one went back to its original composition on 30 Jul: the broadsheet
   opening, the centred model and the letterbox film bands all came out on
   Macca's call ("back to how we originally had it"). The films are 16:9
   again, which is what "the videos are not sized correctly" was about.
   What stayed: the studio model as the comparison table, and the two
   behaviour fixes (the progress bar, and the counters settling on the real
   figures instead of zero). */

/* WHAT IS REVL keeps the original stacked layout, the film just comes down
   to three quarters width on desktop so it stops swallowing the section
   (30 Jul). It stays flush left with the words above it rather than
   centring, because everything else on page one hangs off the left edge.
   Full width below 881px, where three quarters would be too small to
   read. */
@media(min-width:881px){
  #feeling .video-ph{ width:75%; }
}

/* What is REVL, What every studio runs and Become a founder all went centred
   on 30 Jul, joining the mission. .centered puts text-align:center on the
   whole .wrap, so anything inside that is a list, a grid cell or a form
   control has to be handed its alignment back: a centred form label sitting
   above a left aligned input reads as a mistake. */
#feeling .video-ph{ margin-inline:auto; }
/* The heading is held to a measure so it is TWO lines at every size, which is
   what Hal asked for on 2026-09-01 and what the page already showed Josie and
   Macca. It was one line only for Hal, because her browser viewport is 820px
   tall or less, which trips the max-height:820px rule below and drops h2 to
   41px. At 41px the sentence measures 1107px and the wrap box is 1180px, so
   it just fits and the line stops breaking. Nobody could see that by resizing
   width, which is why the three of them disagreed in Slack. 1040px sits under
   the no-wrap width at all three display sizes (1180 at 41px, 1269 at 47px,
   1504 at 55.7px) and above the largest single line, so the break is now true
   by construction and no size step can undo it. */
#feeling h2{ max-width:1040px; margin-inline:auto; }
#runs .offerings{ text-align:left; }
#enquire .gate{ text-align:left; }
/* the unlocks are gone, so the form is the first thing in the gate and does
   not need the 34px that used to separate it from them */
#enquire .gate .form{ margin-top:0; }

/* ---- THE REVL MODEL and BECOME A FOUNDER, brought in (30 Jul) ----
   Both ran well over a screen. The model was 1473px and the form 1281px at
   1440x750, and in each case one element carried most of it: a full width
   16:9 film, and the space around the form controls. Nothing is cut, it is
   all sized down. */

/* these two are the tallest sections on the page, so they also give back
   some of the top and bottom padding the shorter ones can afford */
#model, #enquire{ padding-block:clamp(72px,9vh,120px); }

/* The film here stays FULL width, squaring up with the right edge of the
   Move / Sweat / Perform row above it. It was pulled back to 65% to save
   height and it read as a stub against those three cards, so the height
   comes out of the stream cards and the padding instead. */
#model .stream{ min-height:0; padding:24px 22px; }
#model .stream .sh{ font-size:clamp(22.6px,2.6vw,33.1px); margin:16px 0 12px; }
#model .stream .sd{ font-size:13.5px; }
#model .streams{ margin-top:32px; }
#model h2{ font-size:clamp(24.4px,3.7vw,47px); }

/* the form: every control comes in a notch. The fields stay comfortably
   above the 44px tap target on a phone. */
#enquire .gate{ padding:clamp(22px,3vw,34px); }
#enquire .flab{ margin:22px 0 10px; padding-bottom:7px; }
#enquire .ffield span{ font-size:13px; margin-bottom:6px; }
/* a select draws a shorter line box than an input at the same padding, so
   the four dropdowns came out at 43px against the inputs' 47. min-height
   holds every control on the 44px tap target and squares them up. */
#enquire .ffield input, #enquire .ffield select{ padding:12px 14px; font-size:15px;
  min-height:44px; }
#enquire .frow{ gap:12px; margin-bottom:12px; }
#enquire .sopt{ padding:13px 15px; font-size:14px; }
/* min-height holds the Yes / Not yet pair on the 44px tap target; the
   padding alone left them a pixel short once the type came down */
#enquire .seg button{ padding:12px 0; font-size:14px; min-height:44px; }
#enquire .form .cta-btn{ margin-top:20px; padding:15px 28px; font-size:14px; }
#enquire .fnote{ margin-top:10px; }
/* the submit button and the prototype note are centred by their own rules
   in the form block, so they are left alone here */

/* ---------- scale proof stat band ---------- */
/* FOUR ACROSS, OR TWO AND TWO, NEVER THREE AND ONE.
   This was a wrapping flex row, which meant the four figures stayed on one
   line only because there happened to be room: nothing in the CSS said they
   had to. Whenever the row ran out of width, whatever the cause (a narrow
   window, browser zoom, text-only zoom, a minimum-font-size setting, a font
   that failed to load and fell back wider), flex-wrap would drop ONE figure
   onto a second line and 10,000+ MEMBERS would sit on its own.

   Macca reported exactly that on 2026-09-01 and the sweep could not
   reproduce it: 4 or 2+2 at every width from 360 to 1920 in 5px steps, at
   every zoom ratio, and at 200 percent text-only zoom. Not reproducing it is
   not the same as it being impossible, and the guarantee he asked for is not
   something a wrapping row can make.

   The seven children are stat, rule, stat, rule, stat, rule, stat, so an
   explicit seven-column grid pins them to one line by construction. Below
   the breakpoint the two-by-two grid takes over and the rules are hidden.
   Either way the row can no longer choose its own arrangement. */
.stats{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  justify-content:center; align-items:center; gap:0; margin-top:54px; }
.stats .stat{ min-width:0; }

/* FOUR ACROSS FOR AS LONG AS IT FITS, THEN TWO AND TWO.
   Macca, 2026-09-01: "Can we keep the four next to each other and resize down
   until it gets smaller, and just make sure the spacing is not weird, like
   them really gapped in the middle looks funny."

   The old rule broke to two-by-two at 1299px and the note above it claimed
   tightening the padding "only buys back to 1130px". That was wrong, and it
   was wrong for the same reason the original fault was missed: it was measured
   while the count-up animation still read 0, and "0+" is far narrower than
   "10,000+". Re-measured with the real figures on screen, four across clears
   every width down to 620px with no clipping and no label taking an extra
   line. It reads comfortably to about 800 and only looks cramped by 700, so
   the break is set at 780.

   HOW TO MEASURE THIS BAND, because it has now caught two people out: run the
   browser with prefers-reduced-motion, which app.js honours by leaving the
   final numbers as authored (setupCounters returns early). Do not pin the text
   by hand, the observer overwrites it on the next scroll or resize.

   The two-by-two used 1fr 1fr with justify-items:center, so each figure sat in
   the middle of its own half of a wide container and the pair flew apart with
   a hole down the middle. Content-sized columns centred as a group with a real
   column gap keeps them together at every width. */
@media (max-width:1299px) and (min-width:781px){
  #standard .stat{ padding:6px clamp(8px,1.6vw,68px); }
  /* The floor in the display clamp is what clips, not the padding: at 40px
     minimum, "10,000+" needs 190px and its cell is 188px by 880. Let the
     number keep shrinking with the viewport and four across survives the
     whole band. */
  #standard .stat .v{ font-size:clamp(26px,4.6vw,74.8px); }
  #standard .stat .l{ font-size:10.5px; letter-spacing:-.02em; margin-top:11px; }
}
@media (max-width:780px){
  /* Two and two, held to a measure so the pair cannot fly apart. Auto columns
     alone were not enough: column one sizes to "AVG STUDIO REVENUE YOY" and
     the "8" above it then centres inside that width, which reopened the hole
     down the middle. Capping the block is what actually closes it. */
  #standard .stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    justify-content:center; column-gap:clamp(18px,4vw,34px);
    row-gap:clamp(24px,4vh,38px); align-items:start; justify-items:center;
    max-width:min(100%, 430px); margin-inline:auto; }
  #standard .stat{ padding:0; }
  #standard .stat .v{ font-size:clamp(26.1px,7.4vw,40px); }
  #standard .stat .l{ font-size:10.5px; letter-spacing:-.02em; margin-top:11px; }
  #standard .stat-div{ display:none; }
}
.stat{ text-align:center; padding:6px clamp(26px,5vw,68px); }
.stat .v{ font-family:var(--disp); font-weight:700; letter-spacing:0; font-size:clamp(40px,5.7vw,74.8px); color:var(--white); line-height:.9; font-variant-numeric:tabular-nums; }
.stat .l{ font-family:var(--fmono); line-height:1.1; font-size:11.5px; letter-spacing:-.02em; 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:var(--fmono); letter-spacing:-.02em; line-height:1.1; font-size:12px; color:var(--warm); opacity:.6; }
.offer .t{ font-size:14.5px; color:var(--white); font-weight:700; 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:var(--fmono); letter-spacing:-.02em; line-height:1.1; font-size:13px; color:var(--warm); opacity:.55; }
.stream .sh{ font-family:var(--disp); font-weight:700; letter-spacing:0; font-size:clamp(27.8px,3.1vw,41.8px); 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-family:var(--fmono); line-height:1.1; font-size:11.5px; letter-spacing:-.02em; 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:700; letter-spacing:.01em; }
.video-ph .vph-label{ font-family:var(--fmono); line-height:1.1; font-size:9.5px; letter-spacing:-.02em; 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:700; }
.region .rs{ font-family:var(--fmono); line-height:1.1; font-size:11px; letter-spacing:-.02em; 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:var(--fmono); letter-spacing:-.02em; line-height:1.1; font-size:12px; color:var(--warm); opacity:.6; }
.format-card .fname{ font-family:var(--disp); font-weight:700; letter-spacing:0; font-size:22.6px; color:var(--white); text-transform:uppercase; margin:12px 0 6px; line-height:1; }
.format-card .fsize{ font-family:var(--fmono); line-height:1.1; font-size:12px; letter-spacing:-.02em; 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{ font-family:var(--fmono); line-height:1.1; margin-top:auto; padding-top:16px; font-size:11px; letter-spacing:-.02em; 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:var(--disp); font-weight:700; letter-spacing:0; font-size:19.1px; color:var(--white); text-transform:uppercase; }
.format-table thead .sz{ font-family:var(--fmono); line-height:1.1; font-size:10.5px; letter-spacing:-.02em; text-transform:uppercase; color:var(--ember); display:block; margin-top:6px; }
.format-table tbody th{ font-family:var(--fmono); line-height:1.1; font-size:10.5px; letter-spacing:-.02em; 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:var(--disp); font-weight:700; letter-spacing:0; font-size:clamp(26.1px,3.1vw,38.3px); color:var(--white); line-height:.9; }
.numcard .l{ font-family:var(--fmono); line-height:1.1; font-size:11px; letter-spacing:-.02em; 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:17.4px; }
.roi .roi-tag{ font-family:var(--fmono); line-height:1.1; font-size:10px; letter-spacing:-.02em; 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:var(--disp); font-weight:700; letter-spacing:0; font-size:clamp(20.9px,2.6vw,29.6px); color:var(--ember); line-height:.9; }
.roi-metric .rl{ font-family:var(--fmono); line-height:1.1; font-size:11px; letter-spacing:-.02em; text-transform:uppercase; color:var(--warm); margin-top:10px; }

/* ---------- what building a REVL includes (replaces the ROI box) ---------- */
.num-includes{ font-family:var(--fmono); line-height:1.1; font-size:11.5px; letter-spacing:-.02em; 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:var(--fmono); letter-spacing:-.02em; line-height:1.1; font-size:12px; color:var(--warm); opacity:.6; }
.pillar .ph{ font-family:var(--disp); font-weight:700; letter-spacing:0; font-size:18.3px; 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 + training: the four support pillars beside the
   accreditation film. ("The Academy" is not a REVL name - the real ones are
   Coaches Accreditation and Franchise Induction Training.) */
.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:var(--disp); font-weight:700; letter-spacing:0; font-size:15.7px; 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-family:var(--fmono); line-height:1.1; font-size:12px; letter-spacing:-.02em; 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-family:var(--fmono); line-height:1.1; font-size:10.5px; letter-spacing:-.02em; text-transform:uppercase; color:var(--ember); }
.pstep .pt{ font-size:14px; color:var(--white); font-weight:700; 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-family:var(--fmono); line-height:1.1; font-size:10px; letter-spacing:-.02em; text-transform:uppercase; color:var(--ember); }
.pl-t{ font-size:13.5px; color:var(--white); font-weight:700; 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-family:var(--fmono); line-height:1.1; font-size:11px; letter-spacing:-.02em; text-transform:uppercase; color:var(--ember); margin-bottom:16px; }
.proof-card .pq{ font-size:clamp(18px,2.2vw,26px); color:var(--white); font-weight:400; line-height:1.4; font-family:var(--fut); }
.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-family:var(--fmono); line-height:1.1; font-size:11px; letter-spacing:-.02em; text-transform:uppercase; color:var(--ember); margin-bottom:18px; }
.cta-card h2{ margin-bottom:18px; font-size:clamp(20.9px,2.6vw,33.1px); }
.cta-card .lead{ max-width:52ch; margin-inline:auto; }
.cta-btn{ font-family:var(--fmono); line-height:1.1; 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:400; letter-spacing:-.02em; text-transform:uppercase; margin-top:14px; transition:transform .15s, filter .15s; }
.cta-btn:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.cta-sub{ font-size:13px; color:var(--warm); margin-top:18px; }

/* ---------- footer ---------- */
.foot{ padding:46px var(--gutter) 60px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; }
/* The hairline and the FRANCHISE ENQUIRIES / REVL TRAINING line both came off
   2026-09-01 on Macca's instruction: "remove the line below and this sentence".
   ops/bin/last-line-check.py had already flagged the sentence. The footer is the mark. */
.foot img{ height:14px; opacity:.8; }
.foot .ft{ font-family:var(--fmono); line-height:1.1; font-size:11px; letter-spacing:-.02em; 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;
  font-family:var(--fmono); line-height:1.1; color:var(--off); font-size:11.5px; letter-spacing:-.02em; 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-family:var(--fmono); line-height:1.1; font-size:11px; letter-spacing:-.02em; text-transform:uppercase; color:var(--white); font-weight:400; }
.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-family:var(--fmono); line-height:1.1; font-size:9.5px; letter-spacing:-.02em; 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:var(--disp); font-weight:700; letter-spacing:0; font-size:20.9px; 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:var(--disp); font-weight:700; letter-spacing:0; font-size:43.5px; color:var(--ember); line-height:.8; font-variant-numeric:tabular-nums; }
.pp-score-max{ font-size:14px; color:var(--grey); }
.pp-score-state{ font-family:var(--fmono); line-height:1.1; font-size:10.5px; letter-spacing:-.02em; 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-family:var(--fmono); font-size:8px; letter-spacing:-.02em; 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{ font-family:var(--fmono); line-height:1.1; background:none; border:1px solid var(--line); border-radius:3px; color:var(--warm); font-size:10px; letter-spacing:-.02em; 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-family:var(--fmono); line-height:1.1; font-size:10.5px; letter-spacing:-.02em; text-transform:uppercase; color:var(--ember); margin-bottom:14px; }
.bk-modal h3{ font-size:clamp(20.9px,2.6vw,27.8px); 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{ font-family:var(--fmono); line-height:1.1; display:block; font-size:9.5px; letter-spacing:-.02em; 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; }
/* Same autofill override for the BOOKING form. It uses .bk-field, not
   .ffield, so the rule above does not reach it - and its three inputs carry
   autocomplete="name"/"email"/"tel", so the browser fills them every time
   somebody books a second call. Its own ground is var(--black2), not --field. */
.bk-field input:-webkit-autofill,
.bk-field input:-webkit-autofill:hover,
.bk-field input:-webkit-autofill:focus,
.bk-field input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--white);
  -webkit-box-shadow:0 0 0 1000px var(--black2) inset;
  box-shadow:0 0 0 1000px var(--black2) inset;
  caret-color:var(--white);
  transition:background-color 5000s ease-in-out 0s;
  font-size:14px;
}
.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-family:var(--fmono); line-height:1.1; font-size:9.5px; letter-spacing:-.02em; 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-family:var(--fmono); line-height:1.1; font-size:11.5px; letter-spacing:-.02em; text-transform:uppercase; color:var(--white); font-weight:400; }
.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{ font-family:var(--fmono); line-height:1.1; text-align:center; font-size:9px; letter-spacing:-.02em; 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{ font-family:var(--fmono); line-height:1.1; background:none; border:none; color:var(--ember); font-size:10.5px; letter-spacing:-.02em; text-transform:uppercase; flex:0 0 auto; }
.bk-change:hover{ text-decoration:underline; }
.bk-submit{ font-family:var(--fmono); line-height:1.1; 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:400; letter-spacing:-.02em; 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; }
/* The italic came off 2026-09-01 with the rest of the funnel's type pass. It was a
   FAUX italic: fonts-v2.css declares Futura PT at normal only, so the browser was
   shearing the roman to fake one. Page one carries zero italics, and this was the
   last one on the booking page, so the two now match. */
.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:-.02em; }
}
@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:33.1px; }
  /* the band stacks on a phone, which flips what align-items controls from
     the vertical to the horizontal. #standard and #state both set it to
     flex-start for the desktop row, so without this the figures sit hard
     left on mobile instead of on the centre line. */
  .stats{ flex-direction:column; gap:30px; align-items:center; }
  #standard .stats, #state .stats{ align-items:center; }
  .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{ font-family:var(--fmono); line-height:1.1; display:flex; align-items:center; gap:9px; font-size:11.5px; letter-spacing:-.02em; 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-family:var(--fmono); line-height:1.1; font-size:10.5px; letter-spacing:-.02em; text-transform:uppercase; color:var(--ember); margin-top:13px; }
.tx-list{ display:flex; flex-direction:column; gap:14px; }
/* REVL's regions inside a city are boxes now (concept A, Macca's pick
   2026-08-19), so they use .tx-card like the two levels above them. The
   bare heading rows they replaced are gone. */
/* A territory is a closed row until you open it: name, status, caret. Sydney
   holds eighteen of them, so anything more on show makes the list unreadable. */
.tx-territory{ border:1px solid var(--line); border-radius:5px; background:rgba(255,255,255,.012); overflow:hidden; transition:border-color .18s; }
.tx-territory:hover{ border-color:rgba(255,255,255,.28); }
.tx-terr-head{ display:flex; width:100%; justify-content:space-between; align-items:center; gap:16px;
  background:none; border:0; padding:15px 18px; text-align:left; cursor:pointer; font:inherit; color:inherit; }
.tx-terr-name{ font-size:16px; color:var(--white); font-weight:700; }
.tx-terr-right{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.tx-terr-status{ font-family:var(--fmono); line-height:1.1; font-size:10px; letter-spacing:-.02em; 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-caret{ width:7px; height:7px; border-right:1px solid var(--grey); border-bottom:1px solid var(--grey);
  transform:rotate(45deg); transition:transform .2s; flex:0 0 auto; margin-top:-3px; }
.tx-territory.open .tx-caret{ transform:rotate(-135deg); margin-top:3px; }
.tx-terr-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; align-items:center; }
.tx-demo{ max-height:0; overflow:hidden; transition:max-height .38s ease; }
.tx-demo-in{ padding:2px 18px 16px; }
.tx-territory.open .tx-demo{ max-height:760px; }
.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-family:var(--fmono); line-height:1.1; font-size:9.5px; letter-spacing:-.02em; text-transform:uppercase; color:var(--warm); opacity:.85; }
.tx-demo-row .dv{ font-size:15px; color:var(--white); font-weight:700; 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{ font-family:var(--fmono); line-height:1.1; background:var(--ember); color:var(--midblack); border:none; border-radius:3px; padding:11px 20px; font-size:11.5px; font-weight:400; letter-spacing:-.02em; 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-family:var(--fmono); line-height:1.1; font-size:11px; letter-spacing:-.02em; 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(22.6px,3.5vw,45.2px); margin-bottom:18px; max-width:20ch; }
.rail-slide .rs-body{ font-size:clamp(16px,1.55vw,20px); line-height:1.6; font-weight:400; 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{ font-family:var(--fmono); line-height:1.1; 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:400; letter-spacing:-.02em; 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-family:var(--fmono); line-height:1.1; font-size:11px; letter-spacing:-.02em; 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:400; 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-family:var(--fmono); font-size:11px; letter-spacing:-.02em; 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; }
  /* two columns, not one: six cells divide evenly so no cell is left empty,
     and the open panel is half the height on a phone */
  .tx-demo-grid{ grid-template-columns:repeat(2,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; }
  /* stays a row: it is a name and a status now, not a name over two buttons.
     Stacking it here doubled the height of every one of Sydney's eighteen. */
  .tx-terr-head{ gap:12px; padding:14px 15px; text-align:left; }
  .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:700; line-height:1.4; }
.qhead .qx{ font-family:var(--fmono); letter-spacing:-.02em; line-height:1.1; font-size:22px; 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:var(--fmono); letter-spacing:-.02em; line-height:1.1; font-size:12px; color:var(--warm); opacity:.6; }
.fmt-card .fc-sz{ font-family:var(--fmono); line-height:1.1; font-size:10.5px; letter-spacing:-.02em; text-transform:uppercase; color:var(--warm); }
.fmt-card.feat .fc-sz{ color:var(--ember); }
.fmt-card .fc-name{ font-family:var(--disp); font-weight:700; letter-spacing:0; font-size:26.1px; 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-family:var(--fmono); line-height:1.1; font-size:10px; letter-spacing:-.02em; 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; }
/* The browser paints its own background over anything it pre-fills, which
   left first name, last name and email a different colour to every other
   field (Macca, 2026-09-02, found walking the real form). background alone is
   ignored by Chrome and Safari; a large inset shadow is the only override,
   and the long transition stops the pale flash before it applies. */
.ffield input:-webkit-autofill,
.ffield input:-webkit-autofill:hover,
.ffield input:-webkit-autofill:focus,
.ffield input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--white);
  -webkit-box-shadow:0 0 0 1000px var(--field) inset;
  box-shadow:0 0 0 1000px var(--field) inset;
  caret-color:var(--white);
  transition:background-color 5000s ease-in-out 0s;
  font-size:17px;
}
/* and the same again when the field is flagged, so a pre-filled invalid field
   still shows the error tint rather than reverting to the plain ground */
.ffield input.err:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #191c1c inset;
  box-shadow:0 0 0 1000px #191c1c inset;
}
.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-family:var(--fmono); line-height:1.1; font-size:12px; letter-spacing:-.02em; text-transform:uppercase; font-weight:400; 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; }
.seg.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:700; }

.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:700; }

.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; line-height:1.6; }
/* The collection notice sits under the form. The link reads as a link and
   nothing more: underlined at the same weight, no accent colour, so it stays
   a footnote rather than competing with the submit button above it. */
.fnote a{ color:var(--chalk); text-decoration:underline; text-underline-offset:2px; }
.fnote a:hover{ color:var(--white); }

/* 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; color:var(--beige); font-size:13px; line-height:1.5; }

/* Mission band runs four across, and one label is much longer than the rest,
   so cap the label width and let it wrap instead of stretching its column. */
#standard .stats{ align-items:flex-start; }
#standard .stat{ padding:6px clamp(18px,3.6vw,50px); }
#standard .stat .l{ max-width:14ch; margin-inline:auto; }
#standard .stat-div{ height:52px; margin-top:6px; }

/* On a phone the band goes two by two rather than one under the other:
   Countries and Territories on the first line, the revenue and member
   figures on the second. The dividers are display:none at this width, so
   the four figures are the only grid items and they fall 2x2 on their own.

   This has to sit AFTER the #standard rules above: a media query carries no
   extra specificity, so the same selector earlier in the file would lose to
   them regardless of the breakpoint.

   The figure size comes down with it. At the desktop minimum of 46px,
   "10,000+" is wider than half a 390px screen and would push the band off
   the side. */
@media(max-width:600px){
  #standard .stats{ display:grid; grid-template-columns:repeat(2,auto);
    justify-content:center; column-gap:clamp(20px,7vw,44px);
    row-gap:clamp(26px,4.5vh,34px); align-items:start; justify-items:center; }
  #standard .stat{ padding:0; }
  #standard .stat .v{ font-size:clamp(26.1px,7.8vw,38.3px); }
  #standard .stat .l{ font-size:10.5px; letter-spacing:-.02em; margin-top:11px; }

  /* The pairs, per Macca: the countries and the return on the first line,
     the territories and the members on the second. Done with order rather
     than by moving the markup, so the desktop row keeps reading
     7 / 75+ / +84% / 10,000+ from left to right.
     The stats are nth-child 1,3,5,7; the even children are the dividers,
     which are display:none at this width. */
  #standard .stat:nth-child(1){ order:1; }   /* 7 countries */
  #standard .stat:nth-child(5){ order:2; }   /* +84% return */
  #standard .stat:nth-child(3){ order:3; }   /* 85+ territories */
  #standard .stat:nth-child(7){ order:4; }   /* 10,000+ members */
}

/* ============================================================
   PAGE TWO hero: the nameplate.
   Their state on a plate over a REVL shopfront, like the sign is up.
   Centred deliberately, because page one is left aligned the whole way
   and the break is what tells them this is a different page.
   ============================================================ */
/* The plate sits low in the frame rather than dead centre. The shopfront photo
   scrims to near black over its bottom third, so centring the content left a
   long dead run of black under the scroll cue that read as a gap twice its real
   size. Sitting the content down into that dark area fills it and brings the
   founder story up to meet it. Horizontal centring, which is what marks this
   page as the one after the form, is untouched. */
#hero.nameplate{ justify-content:flex-end; min-height:90svh; padding-bottom:clamp(52px,7.5vh,96px); }
#hero.nameplate .scrim{ background:
  linear-gradient(180deg, rgba(10,10,10,.52) 0%, rgba(10,10,10,.34) 40%, rgba(10,10,10,.95) 100%); }
.np-wrap{ display:flex; flex-direction:column; align-items:center; text-align:center; }
#hero.nameplate .enquiry-note{ margin-bottom:26px; }
.np-plate{ border:1px solid rgba(211,212,211,.5); background:rgba(10,10,10,.5);
  padding:clamp(24px,3.4vw,40px) clamp(28px,6vw,84px); max-width:100%; }
.np-plate .np-state{ font-family:var(--disp); font-weight:700; letter-spacing:0; text-transform:uppercase; color:var(--white);
  font-size:clamp(22.6px,4.5vw,57.4px); line-height:1; 
  margin-bottom:0; text-wrap:balance; }
/* The plate carries their state's figures, then the growth line, then their
   name over the label between two rules (concept 3 from /hero-plate/). The
   old "your state today" band below the hero is gone, so this is the only
   place those four figures appear. */
.np-figs{ display:flex; flex-wrap:wrap; justify-content:center; margin-top:26px; }
.np-figs .npf{ padding:0 clamp(14px,2.4vw,30px); text-align:center; }
.np-figs .npf + .npf{ border-left:1px solid rgba(211,212,211,.28); }
.np-figs .v{ font-family:var(--disp); font-weight:700; letter-spacing:0; color:var(--white); line-height:1;
  font-size:clamp(16.5px,2.2vw,26.1px); font-variant-numeric:tabular-nums; }
.np-figs .l{ font-family:var(--fmono); line-height:1.1; font-size:9.5px; letter-spacing:-.02em; text-transform:uppercase; color:var(--warm);
  margin-top:9px; }
.np-grow{ margin-top:28px; font-family:var(--disp); font-weight:700; letter-spacing:0; text-transform:uppercase; color:var(--white);
  font-size:clamp(13.1px,1.7vw,20px); line-height:1.15;  text-wrap:balance; }
/* an international enquiry has no state figures, so state.js hides the row
   and the growth line; both stay in the DOM, so this margin still lands */
.np-rule{ height:1px; background:rgba(211,212,211,.28); }
.np-grow + .np-rule{ margin-top:26px; }
.np-id{ padding:14px 0; }
.np-name{ font-family:var(--fmono); line-height:1.1; font-size:11.5px; letter-spacing:-.02em; text-transform:uppercase; color:var(--white);
  font-weight:400; line-height:1.6; }
.np-role{ font-family:var(--fmono); line-height:1.1; font-size:10px; letter-spacing:-.02em; text-transform:uppercase; color:var(--chalk);
  line-height:1.6; opacity:.85; margin-top:2px; }
.np-flag{ margin-top:16px; font-size:10.5px; color:var(--grey); font-style:italic; opacity:.85; }
/* the sub line takes the same treatment as the role line inside the plate:
   small, spaced, upper case. It is a label under a sign, not a paragraph. */
/* px not ch: letter-spacing is not counted in a ch, so a ch based cap breaks
   the line early and orphans the last two words */
.np-sub{ font-family:var(--fmono); line-height:1.1; margin-top:18px; font-size:11px; letter-spacing:-.02em; text-transform:uppercase;
  color:var(--chalk); font-weight:400; line-height:1.9; max-width:min(100%,660px); text-wrap:pretty; }
#hero.nameplate .scrollcue{ margin-top:16px; }

/* The hero already ends on a near black photo, so the founder story does not
   need a full section's worth of padding on top of it as well. */
#founders{ padding-top:clamp(60px,8vh,100px); }

@media (max-width:560px){
  .np-sub{ font-size:10px; letter-spacing:-.02em; }
}

/* The plate is most of a phone screen on its own, so sitting it hard at the
   base leaves the whole top of the frame empty. On a phone it keeps roughly
   the height it always had and only the run of black underneath comes out. */
@media (max-width:620px){
  #hero.nameplate{ padding-bottom:clamp(72px,11vh,110px); }
}

/* two by two on a phone. Grid rather than flex so both rows are the same
   height and the dividers line up, which they do not when a label wraps. */
@media (max-width:620px){
  .np-figs{ display:grid; grid-template-columns:1fr 1fr; }
  .np-figs .npf{ padding:14px 8px; }
  .np-figs .npf + .npf{ border-left:none; }
  .np-figs .npf:nth-child(2n){ border-left:1px solid rgba(211,212,211,.28); }
  .np-figs .npf:nth-child(n+3){ border-top:1px solid rgba(211,212,211,.28); }
}
@media (max-width:560px){
  .np-plate{ padding:22px 18px; }
  .np-name, .np-role{ letter-spacing:-.02em; }
}

/* ============================================================
   PAGE TWO: the state band + the inline calendar.
   ============================================================ */
/* The numbers lead and the sentence lands under them, so the data does the
   talking and the line just names what you are looking at. Top aligned,
   because some labels run to two lines and centring them would drop the
   numbers off a shared baseline. */
#state .stats{ align-items:flex-start; margin-top:34px; }
#state .stat{ padding:6px clamp(16px,3vw,44px); }
#state .stat .v{ font-size:clamp(27.8px,4vw,53.9px); }
#state .stat .l{ margin-top:12px; font-size:10.5px; letter-spacing:-.02em; max-width:15ch; margin-inline:auto; }
#state .stat-div{ height:58px; }
/* the summary line sits under the numbers, deliberately smaller than them */
#state h2{ font-size:clamp(17.4px,2.8vw,33.1px); margin-top:44px; }
#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(17.4px,2.1vw,22.6px); 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; }
}

/* ==========================================================================
   PAGE TWO, chosen section designs (round 2026-07-29). Concept numbers refer
   to /section-concepts/, which is the review page these were picked from.
   ========================================================================== */

/* [hidden] has to beat the display rules below it: the UA sheet's
   [hidden]{display:none} loses to any class selector that sets display. */
[hidden]{ display:none !important; }

/* ---- Founder story, concept 2: story left, film right -------------------
   The film is real, a 42 second cut of REVL's own brand story film, so the
   slot holds a poster button until it is clicked and a <video> after. */
.founder-split{ display:grid; grid-template-columns:1fr 1.06fr; gap:clamp(28px,4vw,54px);
  align-items:center; margin-top:36px; }
.founder-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line2);
  border:1px solid var(--line2); margin-top:32px; }
.founder-facts > div{ background:var(--black); padding:16px 18px; }
.founder-facts .k{ font-family:var(--fmono); line-height:1.1; font-size:10px; letter-spacing:-.02em; text-transform:uppercase; color:var(--grey); }
.founder-facts .v{ font-size:13px; color:var(--off); margin-top:7px; line-height:1.4; }
.film-slot{ position:relative; }
.film-slot .video-ph{ margin-top:0; }
/* the founders shot is lit on a white cyc, so it needs less darkening than a
   gym shot, otherwise it turns to mud */
.film-slot .video-ph img{ filter:grayscale(1) contrast(1.04) brightness(.62); }
.film-slot .video-ph:hover img{ filter:grayscale(1) contrast(1.06) brightness(.7); }
.film-slot video{ display:block; width:100%; aspect-ratio:16/9; border:1px solid var(--line);
  border-radius:6px; background:var(--black2); }

/* ---- Key numbers, concept 3: term sheet --------------------------------- */
.sheet{ margin-top:38px; }
.sheet-row{ display:grid; grid-template-columns:1fr auto; gap:20px; align-items:baseline;
  padding:15px 0; border-top:1px solid var(--line2); }
.sheet-row:first-child{ border-top:none; }
.sheet-row .lab{ font-size:14px; color:var(--warm); line-height:1.4; }
.sheet-row .fig{ font-family:var(--disp); font-weight:700; letter-spacing:0; color:var(--white); line-height:1;
  font-size:clamp(14.8px,1.9vw,22.6px); white-space:nowrap; }
.sheet-includes{ border:1px solid var(--line); border-radius:6px; padding:clamp(20px,2.6vw,28px);
  margin-top:34px; }
.sheet-includes .num-includes{ margin:0 0 16px; }
.sheet-includes .includes-grid{ grid-template-columns:repeat(2,1fr); }

/* ---- A word from other franchisees --------------------------------------
   Concept 1 is the live one, concept 5 is kept as a switchable alternate
   (?voices=2). Both carry the same three real owners. */
.voices-three{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,30px); margin-top:40px; }
.voice{ display:flex; flex-direction:column; }
.voice-port{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:6px;
  aspect-ratio:4/5; }
.voice-port img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.07) brightness(.66); }
.voice-quote{ font-size:14px; line-height:1.6; color:var(--off); font-weight:400; margin-top:22px; }
.voice-name{ font-size:12.5px; color:var(--white); font-weight:700; letter-spacing:.02em; margin-top:16px; }

.voices-band{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line2);
  border:1px solid var(--line2); border-radius:6px; overflow:hidden; margin-top:40px; }
.voice-cell{ position:relative; min-height:440px; display:flex; flex-direction:column;
  justify-content:flex-end; padding:26px; }
.voice-cell .vbg{ position:absolute; inset:0; z-index:0; }
.voice-cell .vbg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(.62); }
.voice-cell .vsc{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,10,10,.28) 0%, rgba(10,10,10,.7) 44%, rgba(10,10,10,.96) 100%); }
.voice-cell .vin{ position:relative; z-index:2; }
.voice-cell .voice-quote{ margin-top:0; font-size:13px; }

/* ---- Pick a time, concept 3: the calendar sits on the studio ------------- */
#book{ position:relative; overflow:hidden; }
/* photo 08 is already a dark frame, so it needs less knocking back than the
   default bleed treatment or the wall disappears entirely */
#book .bleed img{ filter:grayscale(1) contrast(1.12) brightness(.82); }
#book .scrim{ background:
  linear-gradient(90deg, rgba(10,10,10,.95) 0%, rgba(10,10,10,.82) 46%, rgba(10,10,10,.42) 100%),
  linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.3) 40%, rgba(10,10,10,.8) 100%); }
#book .bk-inline{ background:rgba(10,10,10,.9); }

/* ---- How you launch: concept 4 kept as a switchable alternate ----------- */
.stage-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,26px); margin-top:44px; }
.stage-box{ border:1px solid var(--line); border-radius:6px; padding:clamp(20px,2.6vw,28px); }
.stage-head{ display:flex; justify-content:space-between; align-items:center; gap:14px; }
.stage-head .h{ font-family:var(--disp); font-weight:700; letter-spacing:0; font-size:clamp(16.5px,1.9vw,22.6px); color:var(--white);
  text-transform:uppercase; line-height:1; }
.stage-head .tag{ font-family:var(--fmono); line-height:1.1; font-size:9.5px; letter-spacing:-.02em; text-transform:uppercase; color:var(--warm);
  border:1px solid var(--line); border-radius:2px; padding:4px 9px; white-space:nowrap; }
.stage-step{ display:grid; grid-template-columns:82px 1fr; gap:18px; padding:14px 0;
  border-top:1px solid var(--line2); }
.stage-step .wk{ font-family:var(--disp); font-weight:700; letter-spacing:0; font-size:11.3px; color:var(--ember); padding-top:2px; }
.stage-step .t{ font-size:13.5px; color:var(--white); font-weight:700; line-height:1.25; }
.stage-step .d{ font-size:11.5px; color:var(--grey); line-height:1.5; margin-top:6px; }
.stage-note{ border:1px solid var(--line); border-radius:5px; padding:15px 17px; margin-top:24px;
  font-size:12.5px; color:var(--warm); line-height:1.5; }

@media (max-width:900px){
  .founder-split{ grid-template-columns:1fr; }
  .voices-three{ grid-template-columns:1fr; }
  .voices-band{ grid-template-columns:1fr; }
  .voice-cell{ min-height:0; aspect-ratio:16/10; }
  .stage-split{ grid-template-columns:1fr; }
  .sheet-includes .includes-grid{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .founder-facts{ grid-template-columns:1fr; }
  .sheet-row{ grid-template-columns:1fr; gap:6px; }
  .sheet-row .fig{ font-size:17.4px; }
  .stage-step{ grid-template-columns:70px 1fr; gap:12px; }
}

/* ============================================================
   PAGE ONE: the studio model, switched in place.
   /studio-model-2/ concept 05. Three formats behind three buttons, the
   header holding still, and the plan and the studio photograph sharing one
   outline so they read as a single object rather than two loose pictures.
   ============================================================ */
.sm-tabs{ margin-top:32px; display:flex; gap:1px; background:var(--line2); border:1px solid var(--line2); }
.sm-tabs button{ flex:1; background:var(--black); border:0; color:var(--grey); padding:12px 14px;
  font-family:var(--fmono); line-height:1.1; font-size:11.5px; letter-spacing:-.02em; text-transform:uppercase; text-align:center;
  transition:color .2s, background .2s; }
.sm-tabs button .sz{ display:block; margin-top:6px; font-size:10px; letter-spacing:-.02em; opacity:.7; }
.sm-tabs button[aria-selected="true"]{ background:var(--beige); color:var(--midblack); }
.sm-tabs button:hover:not([aria-selected="true"]){ color:var(--white); }

.sm-pane[hidden]{ display:none; }
.sm-facts{ margin-top:26px; padding-bottom:26px; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.6vw,36px); }
.sm-facts .c{ min-width:0; }
.sm-facts .k{ font-family:var(--fmono); line-height:1.1; font-size:9.5px; letter-spacing:-.02em; text-transform:uppercase; color:var(--grey); }
.sm-facts .v{ margin-top:8px; font-size:13px; line-height:1.5; color:var(--off); }

.sm-band{ margin-top:28px; display:grid; grid-template-columns:1.72fr .78fr;
  border:1px solid var(--line); }
/* the page colour under the plan is load bearing: .wrap carries z-index:2, so
   it is a stacking context and isolates the blend. Without a backdrop the
   drawing's black paints as pure black against a page that is not. */
.sm-plan{ position:relative; overflow:hidden; background:var(--black);
  aspect-ratio:16/6.6; padding:clamp(10px,1.6vw,20px); }
.sm-plan img{ width:100%; height:100%; object-fit:contain; display:block; mix-blend-mode:screen; }
.sm-shot{ position:relative; overflow:hidden; border-left:1px solid var(--line); }
.sm-shot img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(.86); }

@media (max-width:880px){
  .sm-facts{ grid-template-columns:1fr 1fr; row-gap:20px; }
  .sm-band{ grid-template-columns:1fr; }
  .sm-shot{ border-left:0; border-top:1px solid var(--line); aspect-ratio:16/10; }
}
@media (max-width:520px){ .sm-facts{ grid-template-columns:1fr; } }

/* ============================================================
   JOSIE FEEDBACK ROUND (2026-08-04). Her Slack notes of 2026-08-03,
   captured at knowledge/raw/notes/josie-feedback-2026-08-03/.
   Full borders or none. Only palette tokens, no new hexes.
   ============================================================ */

/* Hero: bring the two lines closer in size. The note comes up, the
   headline comes down a notch, focus stays on BUILT TO LAST. */
#hero .enquiry-note{ font-size:16.5px; letter-spacing:-.02em; }
#hero h1{ font-size:clamp(36.5px,5.7vw,81.8px); }

/* Mid-page CTAs that jump to the enquiry form. Anchor styled by the
   existing .cta-btn rule; only the link reset and spacing are new. */
a.cta-btn{ text-decoration:none; }
.cta-row{ margin-top:44px; }
.centered .cta-row{ display:flex; justify-content:center; }

/* Award accolades, under the mission stat band. Same 1px-gap grid
   language as .offerings: full outer border, hairline dividers. */
.accolades{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line2); border:1px solid var(--line2); margin-top:52px; }
.accolades .acc{ background:var(--black); padding:20px 22px; }
.accolades .an{ font-size:14px; color:var(--white); font-weight:700; line-height:1.35; }
.accolades .ab{ font-family:var(--fmono); line-height:1.1; font-size:10.5px; letter-spacing:-.02em; text-transform:uppercase;
  color:var(--warm); margin-top:9px; }

/* Sundays: Complete and Race Prep, one full-width strip under the
   three streams. */
.stream-sunday{ margin-top:16px; border:1px solid var(--line); border-radius:6px;
  padding:20px 24px; display:flex; align-items:center; gap:24px; }
.stream-sunday .ss-day{ font-family:var(--disp); font-weight:700; letter-spacing:0; text-transform:uppercase;
  color:var(--warm); font-size:clamp(15.7px,1.7vw,20.9px); line-height:1; flex:0 0 auto; }
.stream-sunday .ss-copy{ font-size:14px; color:var(--warm); line-height:1.5; }
.stream-sunday .ss-copy strong{ color:var(--white); font-weight:700; }

/* The three formats, photographed. Sits above the comparison table. */
.fmt-photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:38px; }
.fp{ margin:0; border:1px solid var(--line); border-radius:6px; overflow:hidden;
  background:var(--black); }
.fp.feat{ border-color:rgba(204,202,187,.45); }
.fp img{ width:100%; aspect-ratio:16/10; object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(.84); }
.fp figcaption{ display:flex; justify-content:space-between; align-items:baseline;
  gap:10px; padding:13px 15px; border-top:1px solid var(--line2); }
.fp .fp-n{ font-family:var(--disp); font-weight:700; letter-spacing:0; text-transform:uppercase; color:var(--white);
  font-size:14.8px; line-height:1; }
.fp .fp-s{ font-family:var(--fmono); line-height:1.1; font-size:10px; letter-spacing:-.02em; text-transform:uppercase; color:var(--warm); }

@media(max-width:880px){
  .fmt-photos{ gap:10px; }
  .fp figcaption{ flex-direction:column; gap:6px; align-items:flex-start; }
}
@media(max-width:600px){
  .accolades{ grid-template-columns:1fr; }
  .fmt-photos{ grid-template-columns:1fr; }
  .fp figcaption{ flex-direction:row; align-items:baseline; }
  .stream-sunday{ flex-direction:column; align-items:flex-start; gap:12px; }
}

/* ============================================================
   THE REVL MODEL, rebuilt (Macca 2026-08-04): concept B's split,
   headline and lead stacked left, film standing full height right,
   plus concept E's one-line band, Sundays as a fourth cell styled
   exactly like the streams. Full borders or none, tokens only.
   ============================================================ */
.model-split{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(28px,4vw,48px); align-items:stretch; }
.model-left{ display:flex; flex-direction:column; justify-content:center; }
#model .model-split .video-ph{ margin-top:0; aspect-ratio:auto; min-height:360px; height:100%; }
/* the class-system label sits between the split and the band (Macca +
   Josie-sourced copy, 2026-08-10); the band gives up its own top margin
   so the label owns the gap */
#model .subhead{ margin:44px 0 16px; }
#model .subhead + .model-band{ margin-top:0; }
/* the label breaks to two lines on phones only (Macca's pick 2026-08-10):
   "Three goal-based programs" over "and Sundays." */
.mbr{ display:none; }
@media(max-width:600px){ .mbr{ display:inline; } }
/* the inverse: Training & Support breaks only where the tag column is
   narrow (desktop); on a phone the stacked row holds it on one line
   (Macca 2026-08-10) */
@media(max-width:600px){ .dbr{ display:none; } }
/* five programs since the team notes 2026-08-13 (was four) */
.model-band{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line2); border:1px solid var(--line2); margin-top:34px; }
.mb-cell{ background:var(--black); padding:22px 22px; min-height:128px; }
.mb-cell .sn{ font-family:var(--fmono); letter-spacing:-.02em; line-height:1.1; font-size:13px; color:var(--warm); opacity:.55; }
.mb-cell .sh{ font-family:var(--disp); font-weight:700; letter-spacing:0; font-size:clamp(18.3px,1.8vw,25.2px); color:var(--white); text-transform:uppercase; margin:12px 0 8px; line-height:.9; }
.mb-cell .sd{ font-size:13px; color:var(--warm); line-height:1.5; }
@media(max-width:880px){
  .model-split{ grid-template-columns:1fr; }
  #model .model-split .video-ph{ aspect-ratio:16/9; min-height:0; height:auto; margin-top:26px; }
  /* ONE PER ROW, NOT TWO PLUS TWO PLUS ONE. There are five programmes, so a
     two-column band always strands the fifth: it ran 2+2+1 with Race Day Prep
     alone across the bottom at every width from 601 to 880. Macca, 2026-09-01:
     "it should never have three on one line and two on one line, it should
     always be either four, if it fits, or two." Five cannot split evenly into
     two columns, so below the five-across breakpoint the band goes one per row
     and no cell is ever left on its own. */
  .model-band{ grid-template-columns:1fr; }
  .mb-cell{ min-height:0; padding:20px 22px; }
}

/* ============================================================
   FORMATS, joined (Macca 2026-08-04): the three photographs move
   INTO the comparison table as its first row, flush in their own
   columns, so photo, name and specs read as one object per format.
   On phones the carousel cards carry the photo at their top edge.
   ============================================================ */
/* inset the photos to the cells' own text padding: each sits clearly in its
   column with real space between neighbours, still one object with the table */
.format-table .ft-photo{ padding:18px 20px 0; border-bottom:1px solid var(--line2); }
.format-table .ft-photo img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.05) brightness(.84); }
.format-table .ft-photorow td:first-child{ border-right:1px solid var(--line2); }
.fmt-card{ overflow:hidden; }
.fmt-card .fc-photo{ width:calc(100% + 40px); margin:-22px -20px 16px; display:block;
  aspect-ratio:16/10; object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(.84); }

/* ============================================================
   THE STUDIO MODEL as format cards (Macca's pick, concept C of
   /formats-concepts/, 2026-08-04): each format one complete card,
   photo to fit-out, no best-for line. Cards stack whole on phones,
   replacing the table + swipe carousel entirely.
   ============================================================ */
.fmt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:38px; }
.fmtc{ border:1px solid var(--line); border-radius:6px; overflow:hidden;
  background:rgba(255,255,255,.012); display:flex; flex-direction:column; }
.fmtc.feat{ border-color:rgba(204,202,187,.45); }
.fmtc img{ width:100%; aspect-ratio:16/10; object-fit:cover;
  /* muted colour, Macca's pick 2026-08-04: the one deliberate exception to
     the grayscale house treatment, format cards only */
  filter:saturate(.68) contrast(1.04) brightness(.88); }
.fmtc-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:16px 18px 0; }
.fmtc-name{ font-family:var(--disp); font-weight:700; letter-spacing:0; text-transform:uppercase; color:var(--white);
  font-size:19.1px; line-height:1; }
.fmtc-size{ font-family:var(--fmono); line-height:1.1; font-size:10.5px; letter-spacing:-.02em; text-transform:uppercase; color:var(--ember); }
.fmtc-specs{ padding:6px 18px 16px; }
.fmtc .srow{ padding:11px 0; border-bottom:1px solid var(--line2); }
.fmtc .srow:last-child{ border-bottom:none; padding-bottom:4px; }
.fmtc .klab{ font-family:var(--fmono); line-height:1.1; font-size:9.5px; letter-spacing:-.02em; text-transform:uppercase; color:var(--grey); }
.fmtc .kval{ font-size:13px; color:var(--off); line-height:1.45; margin-top:5px; }
@media(max-width:880px){ .fmt-grid{ grid-template-columns:1fr; } }

/* ============================================================
   THE SUPPORT NETWORK (2026-08-04): replaces What every studio
   runs. Two designs live while Macca compares: #support is A the
   photo band (default), #support is E the portrait split behind
   ?support=e. Stays in the light variant deliberately: it is the
   emotional answer the light page was missing.
   ============================================================ */
.snw-t{ font-family:var(--fmono); line-height:1.1; font-size:10.5px; letter-spacing:-.02em; text-transform:uppercase; color:var(--ember); margin-top:10px; }
.snw-h{ font-family:var(--disp); font-weight:700; letter-spacing:0; text-transform:uppercase; color:var(--white); font-size:clamp(16.5px,1.7vw,21.8px); line-height:1; margin-top:12px; }
.snw-d{ font-size:13.5px; color:var(--warm); line-height:1.6; margin-top:12px; max-width:44ch; }
.snw-base p{ font-size:14px; color:var(--off); line-height:1.5; }
.snw-base strong{ color:var(--white); font-weight:700; }

#support .snw-split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4vw,48px); align-items:stretch; margin-top:36px; }
#support .snw-shot{ position:relative; border:1px solid var(--line); border-radius:6px; overflow:hidden; min-height:520px; }
#support .snw-shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(.58); }
#support .snw-rows{ display:flex; flex-direction:column; gap:12px; margin-top:26px; }
#support .snw-row{ border:1px solid var(--line); border-radius:6px; padding:17px 20px; display:grid; grid-template-columns:150px 1fr; gap:18px; align-items:start; }
#support .snw-row .snw-t{ margin-top:2px; }
#support .snw-row .snw-h{ font-size:14.8px; margin-top:0; }
#support .snw-row .snw-d{ margin-top:6px; max-width:none; }
#support .snw-base{ margin-top:14px; border:1px solid var(--line); border-radius:6px; padding:14px 20px; }

@media(max-width:880px){
  #support .snw-split{ grid-template-columns:1fr; }
  #support .snw-shot{ min-height:0; aspect-ratio:16/10; }
}
@media(max-width:600px){
  #support .snw-row{ grid-template-columns:1fr; gap:8px; }
}

/* The support CTA lives inside the right column, closing the promise
   stack at the stack's own width (Macca: a loose button under an even
   two-column block read as an orphan). */
#support .cta-row{ margin-top:14px; }
#support .cta-btn{ width:100%; justify-content:center; }

/* A mounted <video> inherits NEITHER size nor fit (playbook lesson: the
   page is perfect until someone presses play, then the intrinsic 1920px
   pushes the layout sideways). Page one's two film slots, sized like the
   posters they replace; the inline aspect-ratio comes from app.js. */
#feeling video, #model .model-split video{
  width:100%; max-width:100%; height:auto; display:block;
  border:1px solid var(--line); border-radius:6px;
  background:var(--black2); object-fit:cover;
}
/* no jump on play (Macca): the player mounts at exactly the poster's
   size, so #feeling's 75 percent desktop width carries over */
@media(min-width:881px){
  #feeling video{ width:75%; margin-inline:auto; }
}

/* Model section photograph (replaces the film slot, Macca 2026-08-04) */
.model-shot{ position:relative; border:1px solid var(--line); border-radius:6px;
  overflow:hidden; min-height:360px; height:100%; }
.model-shot img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 75%;
  /* 75%, up from 40%: Hal, Slack 2026-09-01 12:17, "Pull this image up so there
     is less ceiling", and Macca picked this crop from a lettered round of four
     (40 / 60 / 75 / 90) shot in the real box. The source is 1200x1400 portrait
     sitting in a 611x391 landscape box, so cover hides 322px of it and the only
     question is which 391px band you keep. 75% takes the ceiling right down to
     the light strips. Do not go past this: at 90 the out of focus head at the
     bottom of the frame climbs into the picture. */
  filter:grayscale(1) contrast(1.06) brightness(.62); }
@media(max-width:880px){
  .model-shot{ height:auto; min-height:0; aspect-ratio:16/10; margin-top:26px; }
}

/* Support film: the Loganholme ad in the tall left slot. The button keeps
   the slot's portrait shape; the mounted player copies it exactly. */
#support .video-ph.snw-film{ margin-top:0; aspect-ratio:auto; height:100%; min-height:520px; }
#support .video-ph.snw-film img{ filter:grayscale(1) contrast(1.06) brightness(.55); }
#support video{ width:100%; max-width:100%; height:auto; display:block;
  border:1px solid var(--line); border-radius:6px; background:var(--black2);
  object-fit:cover; }
@media(max-width:880px){
  #support .video-ph.snw-film{ height:auto; min-height:0; aspect-ratio:4/5; }
}

/* No hop on mount: the player inherits the poster button's own top margin */
#feeling video{ margin-top:30px; }

/* ============================================================
   MOBILE PASS (2026-08-04). Phone corrections, appended last on
   purpose: a media query adds no specificity, so these only win
   by sitting after the desktop rules they override.
   ============================================================ */
@media(max-width:600px){
  /* The Josie-round hero sizes are desktop calls. Her clamp() floor (42px)
     silently beat the 38px phone headline set in the 600 block above, and
     her 16.5px note is 330px wide with its tracking, so it wraps to two
     lines at 360 with the dot left hanging. Headline back on its phone
     size, the note scaled to hold one line at 360. */
  #hero h1{ font-size:33.1px; }
  #hero .enquiry-note{ font-size:13px; letter-spacing:-.02em; }

  /* iOS Safari zooms the whole viewport when a focused input or select
     computes under 16px, and it stays zoomed after. The form's 15px is a
     desktop call; phones get the threshold size. Buttons are exempt from
     the zoom, so the sorter and the Yes / Not yet pair stay as they are. */
  #enquire .ffield input, #enquire .ffield select{ font-size:16px; }
}


/* ============================================================
   SHORT SCREENS (2026-09-01). A laptop is as WIDE as a desktop but
   nowhere near as tall, and every type size on this page scales on vw,
   so a 13 inch screen got desktop-sized type in two thirds the height.
   Measured: THE MISSION ran 1041px against a 900px viewport (116%) and
   1006px against a 768px one (131%), so its headline sat at the top of
   the screen and its button below the fold. Macca, 2026-09-01: "the
   mission is at the very top of the screen, the button is on the very,
   very bottom ... if everything was shrunk by maybe 10 percent on that
   screen it would probably be better."

   Keyed on HEIGHT, not width, because height is the thing that is
   short. Gated to min-width 881px so it never touches the phone and
   tablet layouts, which have their own rules and are not cramped.
   ============================================================ */
@media (min-width:881px) and (max-height:1000px){
  :root{ --sectionpad:clamp(56px,7.4vh,112px); }
  h1{ font-size:clamp(38px,6.1vw,86px); }
  h2{ font-size:clamp(24px,3.6vw,47px); }
  #model h2{ font-size:clamp(22px,3.2vw,40px); }
  #state h2, .cta-card h2{ font-size:clamp(19px,2.4vw,30px); }
  .lead{ font-size:clamp(16px,1.45vw,19px); line-height:1.45; }
  .lead.mt{ margin-top:22px; }
  .kicker{ margin-bottom:16px; }
  .stats{ margin-top:36px; }
  .stat .v{ font-size:clamp(34px,4.7vw,60px); }
  .accolades{ margin-top:34px; }
  .cta-row{ margin-top:30px; }
  .model-band{ margin-top:26px; }
  .fmt-grid{ margin-top:28px; }
  .eco-figs.boxed{ margin-top:28px; }
  #hero .sub{ font-size:clamp(14px,1.5vw,18px); }
  .scrollcue{ margin-top:16px; }
}
/* The two-by-two figures cost a row of height, which put THE MISSION back over
   one screen on the laptops that get it: 112% at 1152x720 and 106% at 1280x800.
   Where the screen is both narrow enough for two-by-two and short, the block
   gives that row back. */
@media (min-width:881px) and (max-width:1299px) and (max-height:900px){
  #standard .stats{ gap:16px 8px; margin-top:24px; }
  #standard .stat .v{ font-size:clamp(28px,3.4vw,44px); }
  #standard .stat .l{ margin-top:8px; }
  .accolades{ margin-top:22px; }
  .acc{ padding:14px 16px; }
  .cta-row{ margin-top:20px; }
  .lead.mt{ margin-top:16px; }
  #standard .lead{ font-size:clamp(15px,1.4vw,17.5px); line-height:1.4; }
  :root{ --sectionpad:clamp(38px,4.8vh,74px); }
}
/* Shorter again: a 1366x768 laptop is the tightest common screen. */
@media (min-width:881px) and (max-height:820px){
  :root{ --sectionpad:clamp(44px,6vh,84px); }
  h2{ font-size:clamp(22px,3.2vw,41px); }
  .stats{ margin-top:28px; }
  .accolades{ margin-top:26px; }
  .cta-row{ margin-top:24px; }
  .stat .v{ font-size:clamp(30px,4.2vw,52px); }
}


/* ============================================================
   MOBILE ROUND FOLD (2026-08-10). The section-by-section round
   Macca ran on /mobile-round/: every pick, folded in one block,
   appended LAST because a media query adds no specificity and
   these must beat every earlier 600px rule. Phones only.
   The picks: hero THE ORIGINAL; What is REVL, the model, the
   support network, the studio model, the form and the FAQs all
   SIZED UP; the mission stats as a ruled 2x2 grid with his pair
   order; the class-system label centred in the display face over two lines;
   Training & Support on one line.
   ============================================================ */
@media(max-width:600px){
  /* the shared sized-up scale: section headers 30 to 35 at 390,
     kickers 12.5, leads 17 */
  #feeling h2, #standard h2, #model h2, #support h2, #formats h2,
  #enquire h2, #questions h2{ font-size:clamp(28.7px,7.8vw,33.1px); }
  #feeling .kicker, #standard .kicker, #model .kicker, #support .kicker,
  #formats .kicker, #enquire .kicker{ font-size:12.5px; }
  #feeling .lead, #standard .lead, #model .lead, #support .lead,
  #formats .lead, #enquire .lead{ font-size:17px; }

  /* the mission: stats in a hairline 2x2 grid, Countries and
     Territories on top, +84% and Members below.
     justify-items:stretch, or the base rule's centring
     shrink-wraps the cells into wide bands. */
  #standard .stats{ display:grid; grid-template-columns:1fr 1fr;
    gap:1px; background:var(--line2); border:1px solid var(--line2); margin-top:46px;
    justify-items:stretch; align-items:stretch; }
  #standard .stat{ background:var(--black); padding:24px 8px; }
  #standard .stat .v{ font-size:clamp(27.8px,9.1vw,41.8px); }
  #standard .stat .l{ font-size:11px; }
  #standard .stat:nth-child(1){ order:1; }
  #standard .stat:nth-child(3){ order:2; }
  #standard .stat:nth-child(5){ order:3; }
  #standard .stat:nth-child(7){ order:4; }
  .accolades .an{ font-size:15px; }
  .accolades .ab{ font-size:11px; }
  #standard .cta-btn{ font-size:15px; }

  /* the model band, and the class-system label as a centred display
     sub-headline over two lines (the .mbr break is phone-only).
     26px was drawn for Acier; NHG sets 1.155x wider, hence 22.6. */
  .mb-cell .sh{ font-size:22.6px; }
  .mb-cell .sd{ font-size:14px; }
  #model .subhead{ font-family:var(--disp); font-weight:700; letter-spacing:0; font-size:clamp(16.5px,4.7vw,20px);
    line-height:1.2; color:var(--white); opacity:1;
    text-align:center; }

  /* the support network (Training & Support holds one line via the
     desktop-only .dbr break) */
  #support .snw-row .snw-h{ font-size:16.5px; }
  #support .snw-t{ font-size:11px; }
  #support .snw-row .snw-d{ font-size:14.5px; }
  #support .snw-base p{ font-size:15px; }
  #support .cta-btn{ font-size:15px; }

  /* the studio model cards */
  .fmtc-name{ font-size:20.9px; }
  .fmtc-size{ font-size:11px; }
  .fmtc .klab{ font-size:10px; }
  .fmtc .kval{ font-size:14px; }

  /* the form (inputs and selects already hold 16px above) */
  #enquire .ffield span{ font-size:15px; }
  #enquire .flab{ font-size:13px; }
  #enquire .sopt{ font-size:16px; }
  #enquire .seg button{ font-size:16px; }
  #enquire .form .cta-btn{ font-size:16px; }

  /* the FAQs */
  .qhead .qq{ font-size:16px; }
  .qbody p{ font-size:14.5px; }
}

/* ============================================================
   WEBKIT COLLAPSE FIX (2026-08-11). Found by Macca on his phone:
   a dot on the left and the model photograph missing entirely.

   Both .model-shot and the support film are GRID ITEMS that carry
   an aspect-ratio and hold no in-flow children at all: their only
   child is position:absolute; inset:0. Chromium resolves such a
   box from the ratio and gives it its height. WebKit resolves it
   from content, finds none, and collapses it to its two border
   pixels, which is the dot. Measured at 428 wide on the live page:
   .model-shot 388x243 in Chromium, 3x2 in WebKit; the support film
   388x485 in Chromium, 388x2 in WebKit.

   The fix does not rely on aspect-ratio being honoured. An in-flow
   ::before with a percentage padding-top creates real content
   height (percentage padding resolves against the container's
   WIDTH), which every engine has agreed on for fifteen years. The
   aspect-ratio stays and agrees with it to the pixel. width:100%
   and justify-self also go on, because WebKit was shrink-wrapping
   .model-shot to 3px rather than filling its 388px grid column.

   Phone and tablet only, inside the same 880 breakpoint that
   introduced the aspect-ratio. Desktop is untouched.
   ============================================================ */
@media(max-width:880px){
  .model-shot,
  #support .video-ph.snw-film{ width:100%; justify-self:stretch; }
  .model-shot::before,
  #support .video-ph.snw-film::before{ content:''; display:block; }
  /* 10/16 = 62.5%, and 5/4 = 125%, matching each box's own ratio */
  .model-shot::before{ padding-top:62.5%; }
  #support .video-ph.snw-film::before{ padding-top:125%; }
}

/* ====================== THE REVL DIFFERENCE (5B) ======================
   Team notes 2026-08-13. Desktop is option E, the split (Macca's pick from
   the five-concept round); under 900px the same markup restyles to the
   boxed cells he preferred on the phone. */
/* ============================================================
   BEYOND THE STUDIO (2026-09-01), the section under THE REVL
   DIFFERENCE that carries Hal's Committing to more copy.

   Macca's pick from twenty-one treatments shown on the real page,
   every one carrying identical copy so layout was the only
   variable. The round is recorded in versions/page-one/.

   Centred on the axis, the four properties as boxed cells between
   the two paragraphs, the number small in mono above each name.
   ============================================================ */
.eco-centred{ text-align:center; }
.eco-centred .lead{ margin-inline:auto; }
.eco-figs.boxed{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:38px; }
.eco-figs.boxed .ef{ background:rgba(212,212,211,.05); border-radius:6px; padding:28px 16px; }
.eco-figs .ef-l{ font-family:var(--fmono); font-size:10px; letter-spacing:-.02em;
  line-height:1.1; text-transform:uppercase; color:var(--warm); margin-bottom:12px; }
.eco-figs .ef-v{ font-family:var(--disp); font-weight:700; letter-spacing:0;
  text-transform:uppercase; color:var(--white); font-size:clamp(14px,1.5vw,21px); line-height:1.05; }
@media(max-width:900px){ .eco-figs.boxed{ grid-template-columns:1fr 1fr; } }

/* <picture> is inline by default, so the hero's two-crop swap has to be told
   to fill .bleed the way a bare <img> did. */
.bleed picture{ display:block; width:100%; height:100%; }

.dfe{ display:grid; grid-template-columns:5fr 7fr; gap:56px; align-items:start; }
.dfe-item{ padding:26px 0; border-top:1px solid var(--line2); }
.dfe-item:first-child{ padding-top:6px; border-top:none; }
.diff-h{ font-family:var(--disp); font-weight:700; letter-spacing:0; font-size:clamp(16.5px,1.7vw,22.6px); color:var(--white); text-transform:uppercase; line-height:.95; margin-bottom:12px; }
.diff-d{ font-size:15px; line-height:1.62; color:var(--warm); margin:0; }
@media (max-width:900px){
  .dfe{ grid-template-columns:1fr; gap:10px; }
  .dfe-right{ display:grid; gap:1px; background:var(--line2); border:1px solid var(--line2); margin-top:24px; }
  .dfe-item{ background:var(--black); padding:24px 22px; border-top:none; }
  .dfe-item:first-child{ padding-top:24px; }
}