/* 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, the section round (4 Oct). Five compact layouts of the same content.
   Each keeps under about 560px tall on a laptop; nothing is written on the photo. ---------- */
.os-rail{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:40px}
.os-rail .k{margin-right:10px}
.os-rail button{font-family:var(--fmono);font-size:12px;letter-spacing:-.02em;text-transform:uppercase;color:var(--grey);border:1px solid var(--line);border-radius:4px;padding:7px 10px;background:none;cursor:pointer}
.os-rail button b{color:var(--white)}
.os-rail button[aria-pressed="true"]{background:var(--white);border-color:var(--white);color:var(--midblack)}
.os-rail button[aria-pressed="true"] b{color:var(--midblack)}
.os-title{margin:0;font-size:44px;line-height:1;color:var(--white)}
.os-p{margin:0;font-size:19px;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}

/* 1 Centred: heading, words and button centred like Training program, a letterbox of the studio under */
.os1{display:flex;flex-direction:column;align-items:center;text-align:center}
.os1-text{margin-top:32px;max-width:760px;display:grid;gap:18px}
.os1 .os-btn{align-self:center;margin-top:36px}
.os1 .os-ph{width:100%;max-width:1100px;aspect-ratio:7/2;margin-top:56px}

/* 2 Card: the photo and the words side by side inside the page width, the words centred on the photo */
.os2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:center}
.os2 .os-ph{aspect-ratio:16/10}
.os2-text{display:flex;flex-direction:column;gap:20px}
.os2-text .os-p:first-of-type{margin-top:12px}
.os2 .os-btn{margin-top:16px}

/* 3 Row: one ruled row, three columns: photo, heading with the first paragraph, the second with the button */
.os3{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr);gap:48px;padding:40px 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);align-items:start}
.os3 .os-ph{aspect-ratio:4/3}
.os3-a,.os3-b{display:flex;flex-direction:column;gap:22px}
.os3-b{height:100%;justify-content:space-between}

/* 4 Aside: a small upright photo beside the words, the two paragraphs side by side like a magazine aside */
.os4{display:grid;grid-template-columns:320px minmax(0,1fr);gap:64px;align-items:end}
.os4 .os-ph{aspect-ratio:4/5}
.os4-text{display:flex;flex-direction:column}
.os4-cols{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.os4 .os-btn{margin-top:36px}

/* 5 Pair: the words on the left, the studio's two photos as squares on the right, 2px apart */
.os5{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}
.os5-text{display:flex;flex-direction:column;gap:20px}
.os5-text .os-p:first-of-type{margin-top:12px}
.os5 .os-btn{margin-top:16px}
.os5-ph{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.os5-ph .os-ph{aspect-ratio:1}

@media (min-width:900px) and (max-height:820px){
  .os1 .os-ph{max-width:960px}
  .os-title{font-size:40px}
}
@media (max-width:1024px){
  .os2,.os5{gap:44px}
  .os3{grid-template-columns:1fr 1fr;gap:32px}
  .os3 .os-ph{grid-column:1/-1;aspect-ratio:16/9}
  .os4{grid-template-columns:240px minmax(0,1fr);gap:40px}
}
@media (max-width:720px){
  .os-title{font-size:34px}
  .os-p{font-size:18px}
  .os2,.os4,.os5{grid-template-columns:1fr;gap:28px}
  .os2 .os-ph,.os4 .os-ph{aspect-ratio:3/2;order:-1}
  .os3{grid-template-columns:1fr;gap:24px;padding:28px 0}
  .os3 .os-ph{aspect-ratio:3/2}
  .os4-cols{grid-template-columns:1fr;gap:18px;margin-top:20px}
  .os5-ph{order:-1}
  .os1{align-items:flex-start;text-align:left}
  .os1 .os-btn{align-self:flex-start}
  .os1 .os-ph{aspect-ratio:3/2;margin-top:40px}
}

/* ---------- Our studios, round two (4 Oct): 1 to 5 simple, 6 to 10 with every studio ---------- */
.os-rail-gap{margin-left:14px}
.os-soon{margin-left:10px;color:var(--beige);white-space:nowrap}

/* 1 Words: no photo, everything centred and small */
.os-s1{display:flex;flex-direction:column;align-items:center;text-align:center}
.os-s1-t{margin-top:28px;max-width:720px;display:grid;gap:16px}
.os-s1 .os-btn{align-self:center;margin-top:32px}
/* 2 Ledger: heading and button on the left, the two paragraphs on the right */
.os-s2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:88px;align-items:start}
.os-s2-a{display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.os-s2-b{display:grid;gap:18px;max-width:640px;padding-top:6px}
/* 3 Thumb: a small photo, the words, the button, one line */
.os-s3{display:grid;grid-template-columns:260px minmax(0,1fr) auto;gap:48px;align-items:center}
.os-s3 .os-ph{aspect-ratio:4/3}
.os-s3-t{display:grid;gap:12px;max-width:760px}
.os-s3-t .os-title{font-size:32px;margin-bottom:4px}
.os-s3-t .os-p{font-size:17px}
/* 4 Band: one ruled band, heading | words | button */
.os-s4{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:56px;align-items:center;padding:36px 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.os-s4 .os-title{font-size:32px;white-space:nowrap}
.os-s4-t{display:grid;gap:10px;max-width:720px}
.os-s4-t .os-p{font-size:16px}
/* 5 Big link: the heading itself is the way in, the words small under it */
.os-s5-h{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-bottom:28px;border-bottom:1px solid var(--line2);color:var(--white);text-decoration:none}
.os-s5-h .disp{font-size:clamp(56px,8vw,120px);line-height:.9}
.os-s5-h .sq{width:64px;height:64px}
.os-s5-h .sq svg{width:22px;height:19px}
.os-s5-h:hover .sq{background:var(--white);border-color:var(--white);color:var(--midblack)}
.os-s5-t{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:48px}
.os-s5-t .os-p{font-size:17px}

/* the compact roll: name, suburb, arrow, hairlines (Roll call, small) */
.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)}

/* 6 Columns: words left, every studio in four state columns right */
.os-c6{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:72px;align-items:start}
.os-c6-a,.os-c7-a,.os-c9-a,.os-c10-a{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.os-c6-a .os-p,.os-c7-a .os-p,.os-c9-a .os-p,.os-c10-a .os-p{font-size:17px}
.os-c6-a .os-btn,.os-c7-a .os-btn,.os-c9-a .os-btn,.os-c10-a .os-btn{margin-top:14px}
.os-c6-b{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding-top:6px}
.os-col ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.os-nm{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:19px;line-height:1.05;color:var(--white);text-decoration:none}
.os-nm:hover{text-decoration:underline;text-underline-offset:4px}
.os-col .os-soon{display:block;margin:4px 0 0}

/* 7 Tabs: the four states as the timetable's day tabs, the state's studios as a compact roll */
.os-c7{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.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)}

/* 8 Name line: every studio name in one running line per state, words and button above */
.os-c8{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 72px}
.os-c8-a{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.os-c8-b{display:grid;gap:14px}
.os-c8-b .os-p{font-size:17px}
.os-c8-names{grid-column:1/-1;margin-top:44px;border-top:1px solid var(--line2)}
.os-line{margin:0;padding:16px 0;border-bottom:1px solid var(--line2);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0}
.os-line .k{width:56px;flex:none}
.os-ln{font-size:28px;line-height:1.1;color:var(--white);text-decoration:none}
.os-ln:hover{color:var(--grey)}
.os-sl{margin:0 14px;color:var(--dim);font-family:var(--disp);font-size:24px}

/* 9 States: four state rows that open to their studios, like the programs */
.os-c9{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.os-c9-b{border-bottom:1px solid var(--line2)}
.os-acc-h{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto 38px;align-items:center;gap:18px;padding:18px 0;border:0;border-top:1px solid var(--line2);background:none;color:var(--white);cursor:pointer;text-align:left}
.os-acc-h .disp{font-size:30px;line-height:1}
.os-acc-h[aria-expanded="true"] .sq{background:var(--white);border-color:var(--white);color:var(--midblack)}
.os-acc-h[aria-expanded="true"] .v{opacity:0}
.os-acc-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.7,.2,1)}
.os-acc.is-open .os-acc-p{grid-template-rows:1fr}
.os-acc-p > div{overflow:hidden;min-height:0}
.os-acc-p .os-roll{margin:0 0 18px 0;border-bottom:0}
.os-acc-p .os-rn{font-size:22px}

/* 10 Nearest: a search that answers with the nearest studios as a compact roll */
.os-c10{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.os-find{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:22px}
.os-find .box{width:100%}
.os-go{flex:none;width:56px;height:100%;display:grid;place-items:center;color:var(--dim);background:none;border:0;cursor:pointer}
.os-go:hover{color:var(--white)}
.os-go svg{width:15px;height:13px}
.os-loc{background:none;border:0;cursor:pointer}

@media (max-width:1180px){ .os-c6-b{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:1024px){
  .os-c6,.os-c7,.os-c9,.os-c10,.os-s2{gap:48px}
  .os-s3{grid-template-columns:200px minmax(0,1fr)}
  .os-s3 .os-btn{grid-column:2}
}
@media (max-width:720px){
  .os-rail-gap{margin-left:0;flex-basis:100%}
  .os-s1{align-items:flex-start;text-align:left}
  .os-s1 .os-btn{align-self:flex-start}
  .os-s2,.os-c6,.os-c7,.os-c8,.os-c9,.os-c10{grid-template-columns:1fr;gap:28px}
  .os-s3{grid-template-columns:1fr;gap:22px}
  .os-s3 .os-ph{aspect-ratio:3/2}
  .os-s3 .os-btn{grid-column:auto;justify-self:start}
  .os-s4{grid-template-columns:1fr;gap:18px}
  .os-s5-t{grid-template-columns:1fr;gap:16px}
  .os-s5-h .sq{width:48px;height:48px}
  .os-c6-b{grid-template-columns:1fr 1fr;gap:24px}
  .os-c8-names{margin-top:8px}
  .os-ln{font-size:22px}
  .os-sl{margin:0 10px;font-size:18px}
  .os-line .k{width:100%;margin-bottom:6px}
  .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}
}
@media (prefers-reduced-motion:reduce){ .os-acc-p{transition:none} }

.os-pair{white-space:nowrap}  /* a slash stays with the name before it */

/* ---------- Home, 4 Oct (Macca, third note) ----------
   Training program: the heading bigger, the text wider (first paragraph one line, second two at 1440),
   and pulled closer to the photos so it reads as their heading. */
.tp-title{font-size:72px}
.tp-says{max-width:1240px;gap:22px;margin-top:32px}
.tp-says .say{font-size:27px;line-height:1.3;max-width:none}
.cards-x{margin-top:56px}
@media (min-width:900px) and (max-height:820px){ .tp-title{font-size:64px} .tp-says .say{font-size:25px} .cards-x{margin-top:48px} }
@media (max-width:1024px){ .tp-title{font-size:56px} .tp-says .say{font-size:24px} }
@media (max-width:720px){ .tp-title{font-size:40px} .tp-says .say{font-size:21px} .cards-x{margin-top:40px} }

/* Our studios 7A / 7B: the left column level with the right when NSW (six studios) is open */
.os-7x{align-items:start}
.os-7x .os-c7-a{gap:18px}
.os-7x .os-ph{width:100%;aspect-ratio:12/5}
.os-7x .os-c7-a .os-p{font-size:16px;line-height:1.5}
.os-7x .os-btn{margin-top:6px}
.os-7x .os-c7-a .os-title{margin-bottom:4px}
@media (max-width:720px){ .os-7x .os-ph{aspect-ratio:3/2} }

/* 4 Oct: the button moved under the studio list, so the photo takes its room (taller, less cropped) */
.os-7x .os-ph{aspect-ratio:7/5}
.os-7btn{margin-top:28px}
@media (max-width:720px){ .os-7x .os-ph{aspect-ratio:3/2} }