/* REVL ARTIFACT SHELL: studio page round 2, concept N, Club.
   One idea: the reel, the name huge on its bottom edge, then a wide centred sign-up form.
   Black ground, the four colours, colour from the photographs. No boxes where space will do. */

:root{
  --g:51px;            /* side gutter, matches the header wordmark x */
  --max:1338px;
  --sec:168px;         /* section rhythm */
  --form:880px;
}

.wrap{width:min(100% - var(--g)*2, var(--max));margin-inline:auto}
.h2{font-size:44px;color:var(--white);margin:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:4px;border:1px solid var(--line);font-family:var(--fmono);font-weight:700;font-size:15px;letter-spacing:-.02em;text-transform:uppercase;color:var(--white);text-decoration:none;white-space:nowrap;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.btn:hover{border-color:var(--grey)}
.btn-primary{background:var(--white);border-color:var(--white);color:var(--midblack)}
.btn-primary:hover{background:var(--grey);border-color:var(--grey)}
.btn-primary[aria-disabled="true"]{background:var(--panel2);border-color:transparent;color:var(--dim);cursor:default}
.btn-wallet{background:var(--midblack);border-color:var(--line);color:var(--white);font-family:var(--disp);font-weight:500;text-transform:none;font-size:19px;letter-spacing:0}
.btn-wallet:hover{border-color:var(--grey)}
.btn-text{font-family:var(--fmono);font-weight:400;font-size:14px;letter-spacing:-.02em;text-transform:uppercase;color:var(--dim);padding:8px 2px;text-decoration:none}
.btn-text:hover{color:var(--white)}
.btn-sm{height:38px;padding:0 16px;font-size:13px}
:focus-visible{outline:2px solid var(--white);outline-offset:3px}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;max-height:1100px;overflow:hidden;background:var(--ground)}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero-still{display:none}
.hero-scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,var(--scrim-top) 0,rgba(0,0,0,0) 190px),
    linear-gradient(to top,var(--ground) 0,rgba(0,0,0,.72) 16%,rgba(0,0,0,0) 46%)}
.hero-name{position:absolute;left:var(--g);right:var(--g);bottom:0;margin:0;color:var(--white);white-space:nowrap;font-size:15.2vw;line-height:1.05;transform:translateY(.02em);
  opacity:0;animation:nameIn 1.1s cubic-bezier(.2,.7,.2,1) .15s forwards}
.hero-name span{display:inline}
@keyframes nameIn{from{opacity:0;transform:translateY(.08em)}to{opacity:1;transform:translateY(.02em)}}
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .hero-still{display:block}
  .hero-name{opacity:1}
}

/* ---------- intro + form ---------- */
.claim{padding:var(--sec) var(--g) var(--sec)}
.intro{max-width:800px;margin:0 auto;text-align:center;font-size:26px;line-height:1.5;color:var(--grey)}
.form{max-width:var(--form);margin:120px auto 0;scroll-margin-top:40px}
.form-title{font-size:44px;color:var(--white);text-align:center;margin:0}

.steps{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.steps li{font-family:var(--fmono);font-weight:400;font-size:13px;letter-spacing:-.02em;text-transform:uppercase;color:var(--dim);padding-bottom:12px;position:relative}
.steps li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line2);border-radius:2px}
.steps li.is-done{color:var(--grey)}
.steps li.is-done::after{background:var(--dim)}
.steps li.is-on{color:var(--white);font-weight:700}
.steps li.is-on::after{background:var(--white)}

.offer{display:flex;align-items:baseline;gap:20px;margin:40px 0 0;padding:22px 26px;border-radius:6px;background:var(--panel)}
.offer-name{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:21px;line-height:1.05;color:var(--white);white-space:nowrap}
.offer-terms{color:var(--dim);font-size:17px;flex:1;min-width:0}
.offer-price{font-family:var(--disp);font-weight:700;font-size:21px;line-height:1.05;color:var(--white);white-space:nowrap}
.carry{margin:14px 26px 0;font-family:var(--fmono);font-weight:400;font-size:13px;letter-spacing:-.02em;text-transform:uppercase;color:var(--beige);display:flex;gap:18px;flex-wrap:wrap}

.stage{margin-top:44px}
.stage.enter{animation:stepIn .35s ease both}
@keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.step-head{margin:0 0 28px}
.step-title{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:28px;line-height:1.05;color:var(--white);margin:0;outline:none}
.step-line{margin:10px 0 0;color:var(--dim);font-size:17px}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.field{display:flex;flex-direction:column;gap:9px;min-width:0}
.field.full{grid-column:1/-1}
.fields.pay{grid-template-columns:2fr 1fr 1fr}
.fields.pay .field[data-f="card"]{grid-column:auto}
.field label{font-family:var(--fmono);font-weight:400;font-size:12px;letter-spacing:-.02em;text-transform:uppercase;color:var(--dim)}
.box{position:relative;display:flex;align-items:center;height:56px;border-radius:4px;background:var(--panel);border:1px solid transparent;transition:border-color .2s ease}
.box:focus-within{border-color:var(--dim)}
.box input{flex:1;min-width:0;height:100%;background:transparent;border:0;outline:none;padding:0 18px;font-size:18px;color:var(--white)}
.box input::placeholder{color:rgba(212,212,211,.32)}
.box .pre{padding-left:18px;color:var(--dim);font-size:18px}
.box .pre + input{padding-left:10px}
.hint{font-size:15px;color:var(--dim)}
.err{font-size:15px;color:var(--white)}
.field.has-err .box{border-color:var(--white)}
.field.has-err label{color:var(--white)}

.consent{display:flex;align-items:flex-start;gap:14px;margin-top:28px;cursor:pointer;color:var(--grey);font-size:17px;line-height:1.4;max-width:620px}
.consent input{position:absolute;opacity:0;width:1px;height:1px}
.tick{flex:none;width:22px;height:22px;border-radius:4px;border:1px solid var(--line);display:grid;place-items:center;margin-top:1px;transition:background-color .15s ease,border-color .15s ease}
.tick svg{width:13px;height:13px;opacity:0;color:var(--midblack)}
.consent input:checked + .tick{background:var(--white);border-color:var(--white)}
.consent input:checked + .tick svg{opacity:1}
.consent input:focus-visible + .tick{outline:2px solid var(--white);outline-offset:3px}
.consent.has-err .tick{border-color:var(--white)}
.consent-err{margin:10px 0 0 36px}

.actions{margin-top:36px;display:flex;flex-direction:column;align-items:stretch;gap:14px}
.actions .btn{height:58px;font-size:16px}
.actions .btn-text{align-self:center}

.or{display:flex;align-items:center;gap:18px;margin:30px 0;font-family:var(--fmono);font-weight:400;font-size:12px;letter-spacing:-.02em;text-transform:uppercase;color:var(--dim)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line2)}
.btn-wallet{width:100%;height:58px}

/* first session rows */
.sessions{list-style:none;margin:0 -20px;padding:0;display:grid;gap:4px}
.sess{display:grid;grid-template-columns:20px 110px 92px minmax(0,1fr) minmax(0,1fr) 110px;align-items:center;gap:20px;width:100%;text-align:left;padding:14px 20px;border-radius:6px;border:1px solid transparent;transition:background-color .15s ease,border-color .15s ease}
.sess:hover{background:var(--panel)}
.sess[aria-checked="true"]{border-color:var(--white);background:var(--panel2)}
.radio{width:20px;height:20px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}
.radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--white);opacity:0}
.sess[aria-checked="true"] .radio{border-color:var(--white)}
.sess[aria-checked="true"] .radio::after{opacity:1}
.sess-day{font-family:var(--fmono);font-weight:400;font-size:13px;letter-spacing:-.02em;text-transform:uppercase;color:var(--grey)}
.sess-time{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--white);white-space:nowrap}
.sess-name{color:var(--white);font-size:17px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sess-coach{color:var(--dim);font-size:16px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sess-note{font-family:var(--fmono);font-weight:400;font-size:12px;letter-spacing:-.02em;text-transform:uppercase;color:var(--beige);white-space:nowrap;text-align:right}

/* done */
.booked{display:grid;grid-template-columns:1.2fr 1fr;gap:28px 48px;padding:30px 32px;border-radius:6px;background:var(--panel)}
.booked .cls{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:30px;line-height:1.05;color:var(--white);margin:0 0 10px}
.booked .when{margin:0;display:flex;gap:18px;color:var(--white);font-size:18px}
.booked .coach{margin:6px 0 0;color:var(--dim);font-size:17px}
.booked .addr{margin:0;color:var(--grey);font-size:17px;line-height:1.5}
.app{margin-top:36px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.app p{margin:0;color:var(--grey);font-size:17px}
.app div{display:flex;gap:12px}

/* ---------- classes ---------- */
.classes{padding-top:24px;padding-bottom:var(--sec)}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.sec-copy p{margin:0;max-width:520px;color:var(--grey);font-size:18px;line-height:1.5}
.sec-copy .block{margin-top:16px;font-weight:400;font-size:13px;color:var(--beige);line-height:1.3}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{margin:0}
.card-photo{position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--panel)}
.card-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-photo img{transform:scale(1.03)}
.card-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0));pointer-events:none}
.card-name{position:absolute;left:26px;bottom:20px;z-index:1;margin:0;font-size:56px;color:var(--white)}
.card figcaption{padding:20px 4px 0}
.card .line{margin:0;color:var(--grey);font-size:17px}
.card .meta{margin-top:10px;display:flex;justify-content:space-between;gap:16px;font-family:var(--fmono);font-weight:400;font-size:12px;letter-spacing:-.02em;text-transform:uppercase;color:var(--dim)}
.card .meta span:last-child{color:var(--beige);white-space:nowrap}

/* ---------- timetable ---------- */
.tt{display:grid;grid-template-columns:300px 1fr;gap:64px;padding-bottom:var(--sec);scroll-margin-top:24px}
.tt-side{position:sticky;top:40px;align-self:start}
.filters{margin-top:32px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.filt{font-family:var(--fmono);font-weight:400;font-size:14px;letter-spacing:-.02em;text-transform:uppercase;color:var(--dim);padding:8px 0;display:flex;align-items:center;gap:12px}
.filt::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--white);opacity:0;transition:opacity .15s ease}
.filt:hover{color:var(--grey)}
.filt[aria-pressed="true"]{color:var(--white);font-weight:700}
.filt[aria-pressed="true"]::before{opacity:1}

.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px;border-radius:6px;text-align:left;color:var(--dim);transition:background-color .15s ease,color .15s ease}
.day:hover{color:var(--grey);background:var(--panel)}
.day b{font-family:var(--disp);font-weight:700;font-size:20px;line-height:1;text-transform:uppercase;color:inherit}
.day span{font-family:var(--fmono);font-weight:400;font-size:12px;letter-spacing:-.02em;text-transform:uppercase}
.day[aria-selected="true"]{background:var(--panel2);color:var(--white)}
.day[aria-disabled="true"]{opacity:.35;cursor:default}
.day[aria-disabled="true"]:hover{background:none;color:var(--dim)}

.day-panel{margin-top:22px}
.day-note{margin:0 0 10px 16px;font-family:var(--fmono);font-weight:400;font-size:12px;letter-spacing:-.02em;text-transform:uppercase;color:var(--beige)}
.rows{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:104px 210px minmax(0,1fr) auto auto;align-items:center;gap:20px;min-height:58px;padding:6px 8px 6px 16px;border-radius:6px;transition:background-color .15s ease}
.row:hover{background:var(--panel)}
.row-time{font-family:var(--disp);font-weight:700;font-size:18px;color:var(--white);white-space:nowrap}
.row-name{color:var(--white);font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-coach{color:var(--dim);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-note{font-family:var(--fmono);font-weight:400;font-size:12px;letter-spacing:-.02em;text-transform:uppercase;color:var(--beige);white-space:nowrap;text-align:right}

/* ---------- studio info + instagram ---------- */
.studio{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:88px;padding-bottom:var(--sec);align-items:stretch}
.info{display:flex;flex-direction:column;align-items:flex-start}
.addr-big{margin:36px 0 0;font-family:var(--disp);font-weight:500;font-size:30px;line-height:1.15;color:var(--white)}
.contact{margin:28px 0 0;display:grid;gap:8px}
.contact a{font-size:19px;color:var(--grey);text-decoration:none;width:max-content}
.contact a:hover{color:var(--white)}
.info .btns{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap}
.first{margin:auto 0 0;padding:56px 0 0;list-style:none;display:grid;gap:6px}
.first li{color:var(--dim);font-size:16px}

.insta-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.insta-head a.handle{font-family:var(--fmono);font-weight:400;font-size:14px;letter-spacing:-.02em;text-transform:uppercase;color:var(--grey);text-decoration:none}
.insta-head a.handle:hover{color:var(--white)}
.grid9{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tile{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:4px;background:var(--panel)}
.tile img{width:100%;height:100%;object-fit:cover;transition:opacity .2s ease}
.tile:hover img{opacity:.85}
.tile svg{position:absolute;top:12px;right:12px;width:16px;height:16px;color:var(--white)}

/* ---------- footer ---------- */
.foot{padding:40px 0 48px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;color:var(--dim);font-size:15px}
.foot nav{display:flex;gap:28px;flex-wrap:wrap}
.foot a{text-decoration:none;color:var(--dim)}
.foot a:hover{color:var(--white)}
.foot .meta{display:flex;gap:28px}

/* ---------- phone dock ---------- */
.dock{display:none}

/* ---------- laptop heights ---------- */
@media (min-width:900px) and (max-height:820px){
  :root{--sec:136px}
  .form{margin-top:96px}
}

/* ---------- tablet / phone ---------- */
@media (max-width:1180px){
  .tt{grid-template-columns:220px 1fr;gap:40px}
  .studio{gap:56px}
}
@media (max-width:1024px){
  :root{--g:20px;--sec:112px}
  .hero{max-height:none}
  .sec-head{grid-template-columns:1fr;gap:20px}
  .tt{grid-template-columns:1fr;gap:28px}
  .tt-side{position:static;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
  .filters{margin:0;flex-direction:row;gap:20px}
  .studio{grid-template-columns:1fr;gap:72px}
}
@media (max-width:720px){
  :root{--sec:96px}
  .h2,.form-title{font-size:34px}
  .hero{height:88svh;min-height:520px}
  .hero-media{object-position:58% 50%}
  .hero-name{font-size:25vw;line-height:1.05;white-space:normal}
  .hero-name span{display:block}
  .intro{font-size:21px;text-align:left}
  .form{margin-top:72px}
  .form-title{text-align:left}
  .steps li{font-size:11px}
  .offer{flex-wrap:wrap;padding:18px 18px;gap:6px 14px}
  .offer-name{flex:1}
  .offer-terms{order:3;flex-basis:100%;font-size:15px}
  .fields{grid-template-columns:1fr 1fr;gap:18px 12px}
  .field:not(.half){grid-column:1/-1}
  .fields.pay{grid-template-columns:1fr 1fr}
  .fields.pay .field[data-f="card"]{grid-column:1/-1}
  .consent{font-size:16px}
  .sessions{margin:0 -12px}
  .sess{grid-template-columns:20px 74px minmax(0,1fr) auto;grid-template-areas:"r time name note" "r day coach note";gap:3px 12px;padding:12px}
  .sess .radio{grid-area:r}
  .sess-day{grid-area:day;font-size:11px;color:var(--dim)}
  .sess-time{grid-area:time;font-size:16px}
  .sess-name{grid-area:name;font-size:16px}
  .sess-coach{grid-area:coach;font-size:14px}
  .sess-note{grid-area:note;font-size:11px}
  .booked{grid-template-columns:1fr;padding:24px 20px}
  .app{flex-direction:column;align-items:stretch}
  .app div .btn{flex:1}
  .cards{grid-template-columns:1fr;gap:40px}
  .card-photo{aspect-ratio:4/3}
  .card-photo img{object-position:50% 30%}
  .card-name{font-size:44px;left:20px;bottom:16px}
  .tt-side{flex-direction:column;align-items:flex-start}
  .filters{gap:18px}
  .days{gap:2px;margin-inline:-6px}
  .day{padding:10px 0;align-items:center;gap:5px}
  .day b{font-size:16px}
  .day span{font-size:10px}
  .day-note{margin-left:0}
  .row{grid-template-columns:76px minmax(0,1fr) auto;grid-template-areas:"t n b" "t c b";gap:2px 14px;padding:10px 0;min-height:0}
  .row:hover{background:none}
  .row-time{grid-area:t;font-size:16px;align-self:start;padding-top:2px}
  .row-name{grid-area:n;font-size:17px}
  .row-coach{grid-area:c;font-size:15px}
  .row-note{display:none}
  .row .btn{grid-area:b}
  .row.has-note .row-coach::after{content:attr(data-note);margin-left:10px;font-family:var(--fmono);font-size:11px;letter-spacing:-.02em;text-transform:uppercase;color:var(--beige)}
  .addr-big{font-size:26px;margin-top:28px}
  .first{padding-top:44px}
  .grid9{gap:4px}
  .tile svg{top:8px;right:8px;width:13px;height:13px}
  .foot{flex-direction:column;align-items:flex-start;padding-bottom:110px}
  .foot nav{gap:12px 22px}
  .dock{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--ground) 60%,rgba(0,0,0,0));transform:translateY(110%);visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s}
  .dock.is-on{transform:none;visibility:visible;transition:transform .3s ease,visibility 0s}
  .dock .btn{width:100%;height:54px}
}

/* touch screens keep no stuck hover fills */
@media (hover:none){
  .sess:hover,.row:hover,.day:hover{background:none}
  .sess[aria-checked="true"]{background:var(--panel2)}
  .day[aria-selected="true"]{background:var(--panel2)}
  .card:hover .card-photo img{transform:none}
}
/* a program picked: the days it runs light up white (Macca, 2 Oct: "Wed and Fri should be white") */
.day.is-on{color:var(--white)}

/* the intro sits up under the hero (Macca, 2 Oct: "move this text up") */
.claim{padding-top:calc(var(--sec) * .4)}

/* live test: errors from the studio system, and a timetable that did not load */
.flow-err{margin:16px 0 0;color:var(--white);font-size:16px}
.live-fail{margin:0 0 18px;color:var(--white);font-size:16px}
.btn[disabled]{opacity:.6;cursor:default}