/* REVL website redesign, round 1, direction A: CLUB. The studio page, grown into the whole site.
   Every page opens the way the locked studio page does (the frame full bleed, the name on its
   bottom edge, the centred calm intro) and is built from that page's own pieces: the 44px section
   title, the classes cards (4:5, square, 2px gap, name and days on the photo, the line under it),
   the timetable's compact rows, the studio info column. Tokens only, from shared/base.css and
   shared/ui.css. No new hex values: scrims are the ground token mixed toward transparent. */

:root{
  --side:max(var(--g), calc((100% - var(--max)) / 2)); /* the wrap's edge, as padding */
  --ease:cubic-bezier(.2,.7,.2,1);
  --k85:color-mix(in srgb,var(--ground) 85%,transparent);
  --k78:color-mix(in srgb,var(--ground) 78%,transparent);
  --k55:color-mix(in srgb,var(--ground) 55%,transparent);
  --rule:inset 0 1px 0 var(--line2);
}

/* ================= hero: the studio page's ================= */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;max-height:1100px;overflow:hidden;background:var(--ground)}
.hero-frame{position:absolute;left:0;right:0;top:0;bottom:var(--under,0px);overflow:hidden}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 45%)}
.hero-still{display:none}
.hero-photo{opacity:0;animation:frameIn 1.2s ease .05s forwards}
@keyframes frameIn{to{opacity:1}}

/* the film: the studio page's scrims, the bottom one raised to carry two lines */
.hero--film .hero-scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,var(--scrim-top) 0,transparent 190px),
    linear-gradient(to top,var(--ground) 0,var(--k85) 31%,transparent 66%)}

/* a photo: it ends above the name and fades to black, so nothing in the picture sits behind a word */
.hero--photo .hero-scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,var(--scrim-top) 0,transparent 190px),
    linear-gradient(to top,var(--ground) 0,var(--k55) 14%,transparent 34%)}

.hero-name{position:absolute;left:var(--g);right:var(--g);bottom:0;margin:0;color:var(--white);font-size:100px;line-height:.98;transform:translateY(.02em);
  opacity:0;animation:nameIn 1.1s var(--ease) .15s forwards}
.hero-name .ln{display:block;width:max-content;white-space:nowrap}
.hero-name .tm{font-size:.3em;vertical-align:top;position:relative;top:.22em;margin-left:.06em;letter-spacing:0}
@keyframes nameIn{from{opacity:0;transform:translateY(.08em)}to{opacity:1;transform:translateY(.02em)}}

/* ================= intro: the studio page's claim line ================= */
.lede{padding:calc(var(--sec) * .4) var(--g) var(--sec)}
.intro{max-width:800px;margin:0 auto;text-align:center;font-size:26px;line-height:1.5;color:var(--grey)}

/* ================= two-sided: a title column and a statement column ================= */
.pair{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:88px}
.pair-side{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:40px}
.pair-side .btn{margin-bottom:6px}
.says{display:grid;gap:34px}
.say{margin:0;font-family:var(--disp);font-weight:400;font-size:32px;line-height:1.22;letter-spacing:0;color:var(--white);max-width:760px}
.btn-under{display:none!important;margin-top:44px}

/* ================= the program cards: the studio page's locked classes section (AB) ================= */
.cards-a{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:96px}
.pc{display:block;color:inherit;text-decoration:none}
.pc .card-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--panel)}
.pc .card-photo img{width:100%;height:100%;object-fit:cover;object-position:var(--x,50%) var(--y,40%);transform:scale(var(--s,1));transform-origin:50% 0}
.pc .card-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(to top,var(--k78),transparent);pointer-events:none}
.pc .card-name{position:absolute;left:26px;bottom:38px;z-index:1;margin:0;font-size:56px;color:var(--white)}
.pc .card-days{position:absolute;left:26px;bottom:22px;z-index:1;margin:0;font-size:13px;color:var(--beige)}
.pc .ux{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:18px 26px 0}
.pc .ux p{margin:0;font-size:17px;line-height:1.3;color:var(--grey);padding-top:9px}

/* the square arrow: a real button for each link, and the only thing that wakes on hover */
.sq{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:4px;border:1px solid var(--line);color:var(--white);transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.sq svg{width:15px;height:13px}
.pc:hover .sq,.pc:focus-visible .sq{background:var(--white);border-color:var(--white);color:var(--midblack)}
.pc:focus-visible{outline:none}
.pc:focus-visible .card-photo{outline:2px solid var(--white);outline-offset:3px}

/* ================= photo to the page edge, words on black beside it ================= */
.edge{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:88px;padding-right:var(--side)}
.edge.is-flip{grid-template-columns:minmax(0,2fr) minmax(0,3fr);padding-right:0;padding-left:var(--side)}
.edge.is-flip .edge-photo{order:2}
.edge-photo{margin:0;position:relative;min-height:100%;aspect-ratio:var(--ar,5/4);overflow:hidden;background:var(--panel)}
.edge-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.edge-copy{display:flex;flex-direction:column;align-items:flex-start;padding:4px 0 6px}
.edge-copy .body{margin-top:36px;display:grid;gap:22px;max-width:470px}
.edge-copy .body p{margin:0;font-size:20px;line-height:1.5;color:var(--grey)}
.edge-copy .btn{margin-top:48px}
.edge-copy .gap{flex:1;min-height:44px}

/* ================= the app ================= */
.app-a{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:88px;align-items:center}
.app-title{margin:0;font-size:64px;line-height:.98;color:var(--white);max-width:640px}
.app-line{margin:28px 0 0;font-size:20px;line-height:1.5;color:var(--grey);max-width:470px}
.badges{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap}
.badges a{display:block;border-radius:4px;transition:opacity .2s ease}
.badges img{width:168px;height:48px}
.badges a:hover{opacity:.8}
.phone{margin:0;display:flex;justify-content:center}
.phone img{height:min(660px,80vh);width:auto}

/* ================= Programs: the big head, each program as a full section ================= */
.big-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap}
.big{margin:0;font-size:96px;line-height:.9;color:var(--white)}
.jump{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.jump .btn{gap:12px}
.jump .btn span{color:var(--beige);font-weight:400}

.prog{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:calc(100% / 12);align-items:start;scroll-margin-top:24px}
.prog + .prog{margin-top:var(--sec)}
.prog.is-flip{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.prog.is-flip .prog-photo{order:2}
.prog-photo{margin:0;position:sticky;top:40px;aspect-ratio:4/5;overflow:hidden;background:var(--panel)}
.prog-photo img{width:100%;height:100%;object-fit:cover;object-position:50% var(--y,40%)}
.prog-copy{padding-top:4px}
.prog-no{margin:0;font-size:13px;color:var(--beige)}
.prog-name{margin:18px 0 0;font-size:96px;line-height:.9;color:var(--white)}
.prog-line{margin:18px 0 0;font-family:var(--disp);font-weight:500;font-size:24px;line-height:1.2;color:var(--white)}
.prog-about{margin:28px 0 0;font-size:19px;line-height:1.55;color:var(--grey);max-width:600px}

/* the timetable's compact rows, ruled top and bottom of the list and between rows */
.rows-a{list-style:none;margin:44px 0 0;padding:0;box-shadow:var(--rule),inset 0 -1px 0 var(--line2)}
.rows-a li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding:20px 0 21px}
.rows-a li + li{box-shadow:var(--rule)}
.rows-a .lab{font-size:13px;color:var(--beige);padding-top:4px;line-height:1.3}
.rows-a p{margin:0;font-size:16px;line-height:1.55;color:var(--grey)}

/* ================= First timers ================= */
.steps-a{list-style:none;margin:44px 0 0;padding:0;box-shadow:var(--rule),inset 0 -1px 0 var(--line2)}
.steps-a li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:start;padding:24px 0}
.steps-a li + li{box-shadow:var(--rule)}
.steps-a .n{font-family:var(--disp);font-weight:700;font-size:28px;line-height:1;color:var(--white)}
.steps-a .t{margin:0;font-family:var(--disp);font-weight:500;font-size:26px;line-height:1.1;color:var(--white)}
.steps-a .badges{margin-top:20px}
.start-a{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:88px;align-items:center}

/* ================= footer ================= */
.foot-a{margin-top:var(--sec)}
.foot-a .meta,.foot-a .social{display:flex;gap:28px;flex-wrap:wrap}
.foot-a .right{display:flex;gap:28px 56px;flex-wrap:wrap}

/* ================= section rhythm ================= */
.sec{padding-top:var(--sec)}

/* ================= one-way fade as a section arrives ================= */
.js-r [data-r]{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s var(--ease)}
.js-r [data-r].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .hero-still{display:block}
  .hero-name,.hero-photo{opacity:1;animation:none}
  .js-r [data-r]{opacity:1;transform:none}
}

/* ================= laptop heights ================= */
@media (min-width:900px) and (max-height:820px){
  .intro{font-size:24px}
  .say{font-size:28px}
  .says{gap:28px}
  .cards-a{margin-top:72px}
  .big,.prog-name{font-size:84px}
  .app-title{font-size:56px}
  .phone img{height:min(600px,84vh)}
}

/* ================= tablet ================= */
@media (max-width:1180px){
  .pair,.edge,.app-a,.start-a{gap:56px}
  .say{font-size:27px}
  .pc .card-name{font-size:44px;bottom:36px}
  .prog-name,.big{font-size:76px}
  .rows-a li{grid-template-columns:130px minmax(0,1fr)}
}
@media (max-width:1024px){
  .hero{max-height:none}
  .pair{grid-template-columns:1fr;gap:36px}
  .pair-side .btn{display:none}
  .pair .btn-under{display:inline-flex!important}
  .edge,.edge.is-flip{grid-template-columns:1fr;gap:48px;padding-inline:0}
  .edge.is-flip .edge-photo{order:0}
  .edge-photo{min-height:0;aspect-ratio:3/2}
  .edge-copy{padding-inline:var(--g)}
  .edge-copy .body,.edge-copy .says{margin-top:28px}
  .edge-copy .gap{display:none}
  .app-a,.start-a{grid-template-columns:1fr}
  .prog,.prog.is-flip{grid-template-columns:1fr;row-gap:40px}
  .prog.is-flip .prog-photo{order:0}
  .prog-photo{position:relative;top:0;aspect-ratio:4/3}
}

/* ================= phone ================= */
@media (max-width:720px){
  .hero{height:88svh;min-height:520px}
  .hero-name{line-height:1}
  .intro{font-size:21px;text-align:left}
  .lede{padding-top:calc(var(--sec) * .45)}
  .say{font-size:24px;line-height:1.25}
  .says{gap:24px}
  .cards-a{grid-template-columns:1fr;gap:40px;margin-top:64px}
  .pc .card-photo{aspect-ratio:4/3}
  .pc .card-photo::after{height:60%}
  .pc .card-photo img{object-position:var(--xp,50%) var(--yp,35%);transform:none}
  .pc .card-name{font-size:44px;left:20px;bottom:33px}
  .pc .card-days{left:20px;bottom:18px}
  .pc .ux{padding:16px 20px 0}
  .edge-copy .body p{font-size:18px}
  .app-title{font-size:40px;line-height:1}
  .app-line{font-size:18px}
  .badges{gap:10px}
  .badges img{width:134px;height:auto}
  .phone img{height:auto;width:min(78%,300px)}
  .big,.prog-name{font-size:56px}
  .big-head{flex-direction:column;align-items:flex-start}
  .big-head .big{font-size:40px;line-height:.95}
  .jump{margin:0}
  .prog-line{font-size:21px}
  .prog-about{font-size:17px}
  .rows-a li{grid-template-columns:1fr;gap:8px;padding:18px 0}
  .rows-a .lab{padding-top:0}
  .steps-a li{grid-template-columns:52px minmax(0,1fr);padding:20px 0}
  .steps-a .n{font-size:22px;padding-top:1px}
  .steps-a .t{font-size:21px}
  .foot-a .right{flex-direction:column;gap:18px}
}
@media (hover:none){
  .pc:hover .sq{background:none;border-color:var(--line);color:var(--white)}
}

/* ---------- Home, 4 Oct (Macca): Training program as a heading with its text under it, then the
   programs, which open in place. A panel opens under the row on a laptop, under its card on a phone.
   Nothing dims; the open card's square turns White and its + becomes a -. ---------- */
.tp-title{margin:0;font-size:44px;line-height:1;color:var(--white)}
.tp-says{margin-top:40px;max-width:900px}
.cards-x{margin-top:88px}
button.pc{display:block;width:100%;padding:0;text-align:left;font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.pc .card-photo{display:block}
.pc .card-name,.pc .card-days{display:block}
.pc .ux-line{margin:0;font-size:17px;line-height:1.3;color:var(--grey);padding-top:9px}
.sq-x svg{width:14px;height:14px}
.sq-x .v{transition:opacity .2s ease}
.pc[aria-expanded="true"] .sq{background:var(--white);border-color:var(--white);color:var(--midblack)}
.pc[aria-expanded="true"] .sq-x .v{opacity:0}

.pd{grid-column:1/-1;order:4;display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1)}
.pd.is-open{grid-template-rows:1fr}
.pd-in{overflow:hidden;min-height:0}
.pd-body{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:88px;padding:64px 0 40px;opacity:0;transition:opacity .3s ease}
.pd.is-open .pd-body{opacity:1;transition-delay:.12s}
.pd-head p{margin:0}
.pd-no{color:var(--beige)}
.pd-name{margin:14px 0 0;font-size:40px;line-height:.95;color:var(--white)}
.pd-line{margin-top:18px!important;font-size:19px;color:var(--grey)}
.pd-days{margin-top:10px!important;font-size:13px;color:var(--beige)}
.pd-about{margin:0;font-size:21px;line-height:1.45;color:var(--white);max-width:720px;padding-right:72px}
.pd-rows{list-style:none;margin:36px 0 0;padding:0;border-bottom:1px solid var(--line2)}
.pd-rows li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding:20px 0;border-top:1px solid var(--line2)}
.pd-rows li .k{padding-top:4px}
.pd-rows li span:last-child{font-size:17px;line-height:1.5;color:var(--grey)}
.pd-close{position:absolute;top:64px;right:0;cursor:pointer;background:none}
.pd-close svg{width:12px;height:12px}
.pd-close:hover{border-color:var(--grey)}
@media (min-width:900px) and (max-height:820px){ .cards-x{margin-top:72px} .pd-body{padding-top:48px} .pd-close{top:48px} }
@media (max-width:1024px){ .pd-body{gap:48px} }
@media (max-width:720px){
  .tp-title{font-size:34px}
  .tp-says{margin-top:28px}
  .cards-x{margin-top:56px;gap:0}
  .cards-x .pc{margin-top:40px}
  .cards-x .pc:first-child{margin-top:0}
  .pd{order:0}
  .pd-body{grid-template-columns:1fr;gap:24px;padding:32px 0 8px}
  .pd-head{display:none}   /* on a phone the panel sits right under its own card, which already names it */
  .pd-name{font-size:32px}
  .pd-about{font-size:18px;padding-right:0}
  .pd-rows{margin-top:24px}
  .pd-rows li{grid-template-columns:1fr;gap:8px;padding:16px 0}
  .pd-close{display:none}   /* the card's own - closes it, right above */
  .pd-body{padding-top:28px}
}
@media (prefers-reduced-motion:reduce){ .pd,.pd-body{transition:none} }

/* ---------- Home, 4 Oct (Macca, second note) ----------
   Training program centred; the program photos bigger (the row runs edge to edge of the screen, the
   2px gaps kept, about 8% larger at 1440); the open panel: the name with its paragraph under it on
   the left, the three sessions on the right, the close square at the panel's top right. */
.tp{text-align:center}
.tp-says{margin-inline:auto;max-width:860px}
.tp-says .say{margin-inline:auto}
/* Macca, 4 Oct: edge to edge was too big, "like half way between": the row now reaches halfway from
   the page edge to the screen edge (about 462px a photo at 1440, between 445 and 479) */
.cards-x{--half:calc((100vw - min(100vw - 2 * var(--g), var(--max))) / 4);margin-inline:calc(var(--half) * -1);text-align:left}
.pd-body{padding-inline:var(--half);grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:96px;padding-top:72px}
.pd-name{font-size:56px;margin-top:14px}
.pd-head .pd-about{margin-top:28px;padding-right:0;font-size:20px;line-height:1.5;color:var(--grey);max-width:560px}
.pd-rows{margin-top:0}
.pd-main{padding-top:4px;padding-right:64px}
.pd-close{top:72px;right:var(--half)}
@media (min-width:900px) and (max-height:820px){ .pd-body{padding-top:56px} .pd-close{top:56px} }
@media (max-width:1024px){ .pd-body{gap:56px} .pd-name{font-size:44px} }
@media (max-width:720px){
  .tp{text-align:left}
  .tp-says .say{margin-inline:0}
  .cards-x{margin-inline:0}
  .pd-body{grid-template-columns:1fr;padding-inline:0;padding-top:28px;gap:24px}
  .pd-head{display:block}
  .pd-head .pd-no,.pd-head .pd-name{display:none}   /* the card right above names it */
  .pd-head .pd-about{margin-top:0;font-size:18px;color:var(--white)}
  .pd-main{padding-right:0}
}

/* ---------- Our studios, LOCKED 4 Oct as 7B (Macca: "7b 2 photo"). The round's ten layouts and
   their rail were removed with their markup; they are in git history before a1638204. ---------- */
.os-title{margin:0;font-size:44px;line-height:1;color:var(--white)}
.os-p{margin:0;font-size:16px;line-height:1.5;color:var(--grey)}
.os-btn{align-self:flex-start}
.os-ph{margin:0;position:relative;overflow:hidden;background:var(--panel)}
.os-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.os-soon{margin-left:10px;color:var(--beige);white-space:nowrap}
.os-pair{white-space:nowrap}  /* a slash stays with the name before it */

/* the left: heading, two paragraphs, the photo, sized to end level with the right when NSW is open */
.os-c7{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.os-c7-a{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.os-c7-a .os-title{margin-bottom:4px}
.os-c7-a .os-ph{width:100%;aspect-ratio:7/5}
@media (min-width:721px){ .os-c7-a .os-ph{aspect-ratio:auto;height:360px} }  /* app.js sets the real height */

/* the right: the four states as the timetable's day tabs, the state's studios as a compact roll */
.os-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:18px}
.os-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 14px;border-radius:6px;color:var(--dim);background:none;border:0;cursor:pointer;text-align:left}
.os-tabs b{font-family:var(--disp);font-size:20px;line-height:1;color:inherit}
.os-tabs span{font-family:var(--fmono);font-size:12px;letter-spacing:-.02em}
.os-tabs button:hover{color:var(--grey);background:var(--panel)}
.os-tabs button[aria-selected="true"]{background:var(--panel2);color:var(--white)}
.os-roll{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line2)}
.os-roll li a{display:grid;grid-template-columns:minmax(0,1fr) auto auto 38px;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line2);color:inherit;text-decoration:none}
.os-rn{font-size:26px;line-height:1;color:var(--white)}
.os-rs{font-size:15px;color:var(--dim);white-space:nowrap}
.os-roll .os-soon{margin:0}
.os-roll li a:hover .sq{background:var(--white);border-color:var(--white);color:var(--midblack)}
.os-7btn{margin-top:28px}

@media (min-width:900px) and (max-height:820px){ .os-title{font-size:40px} }
@media (max-width:1024px){ .os-c7{gap:48px} }
@media (max-width:720px){
  .os-title{font-size:34px}
  .os-c7{grid-template-columns:1fr;gap:28px}
  .os-c7-a .os-ph{aspect-ratio:3/2}
  .os-tabs b{font-size:16px}
  .os-tabs button{padding:10px}
  .os-roll li a{grid-template-columns:minmax(0,1fr) auto 38px}
  .os-roll .os-rs{display:none}
  .os-rn{font-size:22px}
}

/* =====================================================================================================
   Home, 4 Oct (Macca: "big inconsistencies in text sizing ... get it a bit more consistent, like our
   studios and training programs, the main header, and the Book your next class"). One scale for the
   whole page, every size below read from it:
     hero title (fitted, about 84 at 1440) > section heading 64 > card heading 44 > list name 26,
     lead text 24, body 18, small 15, mono label 14.
   Every section heading is one size (Training program was 72, Our studios 44, the app 64). Body text
   is one font at two sizes (it was five sizes in two fonts). Lead text holds about 70 characters a
   line. Alignment stays as the advisor rule has it: a section with two real sides is left aligned,
   a one-column section is centred.
   ===================================================================================================== */
:root{
  --t-h2:64px; --t-h3:44px; --t-h4:26px;
  --t-lede:24px; --t-body:18px; --t-small:15px; --t-label:14px;
  --soft:color-mix(in srgb,var(--grey) 72%,transparent); /* small text that must still read: between grey and dim */
}
@media (min-width:900px) and (max-height:820px){ :root{ --t-h2:56px; --t-h3:40px; --t-lede:22px } }
@media (max-width:1024px){ :root{ --t-h2:52px; --t-h3:38px; --t-lede:22px } }
@media (max-width:720px){ :root{ --t-h2:38px; --t-h3:34px; --t-h4:22px; --t-lede:20px; --t-body:17px; --t-label:13px } }

/* Training program sits close above its photos (Macca, 4 Oct, third note) */
.cards-x{margin-top:56px}
@media (min-width:900px) and (max-height:820px){ .cards-x{margin-top:48px} }
@media (max-width:720px){ .cards-x{margin-top:40px} }

/* section headings: one size */
.tp-title,.os-title,.app-title{font-size:var(--t-h2);line-height:.98}
/* card headings: the program names on the photos and in the open panel */
.pc .card-name,.pd-name{font-size:var(--t-h3);line-height:.95}
.pc .card-name{bottom:38px}
/* list names */
.os-rn{font-size:var(--t-h4)}

/* lead text: the intro and Training program's two paragraphs, same font, size, colour and measure */
.intro{font-size:var(--t-lede);line-height:1.5;max-width:820px}
.tp-says{max-width:820px;gap:20px;margin-top:28px}
.tp-says .say{font-family:var(--fut);font-size:var(--t-lede);line-height:1.5;color:var(--grey);max-width:none}

/* body: everything else that is a sentence */
.os-p,.os-c7-a .os-p,.app-line,.pc .ux-line,.pd-head .pd-about,.pd-rows li span:last-child{font-size:var(--t-body);line-height:1.5}
.pc .ux-line{line-height:1.35;padding-top:8px}

/* small and labels: a size up, and the small grey text off the faint end */
.os-rs{font-size:var(--t-small);color:var(--soft)}
.k,.pc .card-days{font-size:var(--t-label)}
.pc .card-days{bottom:20px}
.os-tabs span{font-size:13px}
.os-tabs button{color:var(--soft)}
.os-tabs button:hover,.os-tabs button[aria-selected="true"]{color:var(--white)}

/* the app section's words */
.app-title{max-width:680px}
.app-line{margin-top:24px}

/* ---------- Home, 4 Oct (Macca, notes on the type pass) ---------- */

/* Find and join REVL in the header is the button: White, Mid Black words, the site's button shape */
.site-hdr .join{height:48px;padding:0 22px;gap:10px;border:0;border-radius:4px;background:var(--white);color:var(--midblack);font-size:15px;letter-spacing:-.3px;line-height:1;transition:background-color .2s ease}
.site-hdr .join:hover{background:var(--grey)}
@media (max-width:1024px){
  .site-hdr .join{display:flex;height:38px;padding:0 14px;font-size:13px;margin:8px 20px 0 auto}  /* centred on the menu glyph */
  .site-hdr .burger{margin-left:0}
}
@media (max-width:420px){ .site-hdr .join svg{display:none} .site-hdr .join{padding:0 12px} }

/* the program photos lean in a touch on hover ("it zooms in slightly", which Macca likes) */
.pc .card-photo img{transition:transform .6s var(--ease)}
.pc:hover .card-photo img{transform:scale(calc(var(--s,1) * 1.04))}
@media (hover:none),(prefers-reduced-motion:reduce){ .pc:hover .card-photo img{transform:scale(var(--s,1))} }

/* Book your next class sits on the phone's middle again ("needs to be down centered with the phone") */
.app-a{align-items:center}


/* =====================================================================================================
   Programs, 4 Oct: Home's locked type scale carried across (Macca on Home: "big inconsistencies in
   text sizing"). Section headings one size (The training model was 44, 3 Goal-based programs and each
   program's name 96); the training model's statement and each program's line at lead size in Futura
   (they were 32 and 24 in the heading font); the about text and the session rows at body size (19, 16);
   labels at 14. The page title in the photo comes down from about 161 to about 120, still the biggest
   thing on the page but no longer double Home's.
   ===================================================================================================== */
[data-page="programs"] .pair .h2,[data-page="programs"] .big,[data-page="programs"] .prog-name{font-size:var(--t-h2);line-height:.98}
[data-page="programs"] .prog-name{margin-top:14px}
[data-page="programs"] .pair .say{font-family:var(--fut);font-size:var(--t-lede);line-height:1.5;color:var(--grey);max-width:680px}
[data-page="programs"] .prog-line{font-family:var(--fut);font-weight:400;font-size:var(--t-lede);line-height:1.4;color:var(--white);margin-top:16px}
[data-page="programs"] .prog-about{font-size:var(--t-body);line-height:1.5;margin-top:20px}
[data-page="programs"] .rows-a p{font-size:var(--t-body);line-height:1.5}
[data-page="programs"] .prog-no,[data-page="programs"] .rows-a .lab,[data-page="programs"] .jump .btn{font-size:var(--t-label)}
[data-page="programs"] .rows-a .lab{padding-top:3px}
[data-page="programs"] .big-head{align-items:flex-end}

/* Programs, 4 Oct (Macca: "the training model looks a bit funny. can you do header and paragraphs
   stacked"): the heading on one line, the paragraph under it, set like the 13-week block's head below */
[data-page="programs"] .pair{grid-template-columns:1fr;gap:24px}
[data-page="programs"] .pair .say{max-width:820px}
/* Macca, 4 Oct: "centred", like REVL Program on Home (left on a phone, as Home's is) */
[data-page="programs"] .pair{text-align:center;justify-items:center}
[data-page="programs"] .pair-side{align-items:center}
@media (max-width:720px){ [data-page="programs"] .pair{text-align:left;justify-items:start} [data-page="programs"] .pair-side{align-items:flex-start} }

/* ---------- Programs top, LOCKED 4 Oct as "Like Home": the photo in black and white, full, the film's
   scrim, the title bottom left ---------- */
.ph-bw .hero-media{filter:grayscale(1) contrast(1.06)}
.hero.ph2 .hero-scrim{background:none}
.hero.ph2 .hero-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--scrim-top) 0,transparent 190px),linear-gradient(to top,var(--ground) 0,var(--k85) 24%,transparent 58%)}
/* with the title off the bottom, the bottom fade only has to hand the photo to the black below */
.hero.ph2 .hero-frame::after{background:linear-gradient(to bottom,var(--scrim-top) 0,transparent 190px),linear-gradient(to top,var(--ground) 0,var(--k78) 12%,transparent 38%)}
/* Macca, 4 Oct: PROGRAMS "up more on the photo. not at the bottom more in the middle on the left": the
   title on the frame's middle, over the dark shelves on the left, which a soft left scrim keeps dark */
.hero.ph2 .hero-name{top:50%;bottom:auto;margin-top:-.5em;z-index:2}
.hero.ph2 .hero-frame::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to right,var(--k78) 0,var(--k55) 22%,transparent 50%)}
.hero.ph2 .hero-frame::after{z-index:1}

/* =====================================================================================================
   First timers, 4 Oct: Home's locked type scale and Programs' top carried across. Section headings one
   size (What to expect was 44, Get started 96); What to expect's three lines at lead size in Futura
   (were 32 in the heading font), stacked under the heading with the button, the block centred on the
   photo beside it (the gap that pushed the lines to the photo's foot is gone); the steps at list size.
   ===================================================================================================== */
[data-page="first-timers"] .edge .h2,[data-page="first-timers"] .start-a .big{font-size:var(--t-h2);line-height:.98}
[data-page="first-timers"] .edge-copy{justify-content:center}
[data-page="first-timers"] .edge-copy .gap{display:none}
[data-page="first-timers"] .edge-copy .says{margin-top:28px;gap:14px}
[data-page="first-timers"] .edge-copy .say{font-family:var(--fut);font-size:var(--t-lede);line-height:1.45;color:var(--grey);max-width:520px}
[data-page="first-timers"] .edge-copy .btn{margin-top:36px}
[data-page="first-timers"] .steps-a .t{font-size:var(--t-h4);line-height:1.15}
[data-page="first-timers"] .steps-a .n{font-size:var(--t-h4)}
/* the title bottom left on the photo, the film's scrim under it (First timers) */
.hero.ph-low .hero-scrim{background:linear-gradient(to bottom,var(--scrim-top) 0,transparent 190px),linear-gradient(to top,var(--ground) 0,var(--k85) 26%,transparent 60%)}

/* Home, 4 Oct: the title on the middle left of the film (as Programs'), a soft left scrim behind it,
   the bottom fade shortened since nothing sits on it now */
.hero.hero-mid .hero-name{top:50%;bottom:auto;margin-top:-.98em;z-index:2}
.hero--film.hero-mid .hero-scrim{background:linear-gradient(to bottom,var(--scrim-top) 0,transparent 190px),linear-gradient(to right,var(--k78) 0,var(--k55) 24%,transparent 55%),linear-gradient(to top,var(--ground) 0,var(--k78) 12%,transparent 38%)}
@media (max-width:720px){ .hero.hero-mid .hero-name{margin-top:-1.5em} }