/* Tattva — Direction C "Ribbon"
   MOBILE FIRST. Base styles are the 390px design; min-width queries add desktop.
   Tokens carried unchanged from design/exploration/direction-c-ribbon.html. */

:root{
  --bone:#F7F3EA; --bone-2:#ECE5D6; --navy:#002A77; --navy-2:#001E56;
  --gold:#DC9806; --ink-gold:#8F6200; --pink:#FD81A7; --pink-2:#FFD3E1;
  --ink:#14161A; --muted:#6B6659; --hair:#DDD5C4;
  --ok:#0E7A4B; --warn:#B3261E;
  --ease:cubic-bezier(.22,.61,.36,1);
  --disp:'Archivo',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --pad:20px;
  --sticky-h:0px;

  /* ---------------------------------------------------------------- rhythm
     One vertical scale for the whole public site. Every gap below — section,
     card, CTA, footer — is expressed in these tokens, so a page never invents
     a margin of its own. --section is the distance between two sections;
     --section-lead is the smaller distance used by the FIRST section on a
     page, which already sits under the header bar. */
  --s1:6px; --s2:10px; --s3:16px; --s4:24px; --s5:34px; --s6:48px;
  --section:34px;
  --section-lead:20px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth}
body{background:var(--bone);color:var(--ink);font-family:var(--disp);font-size:16px;
  line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:calc(var(--sticky-h) + env(safe-area-inset-bottom))}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
svg{display:block}
:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:4px}

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-gold)}
.eyebrow--on-navy{color:var(--gold)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--navy);color:#fff;
  padding:10px 16px;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---------------------------------------------------------------- buttons */
.btn[hidden]{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--disp);font-size:15px;font-weight:700;letter-spacing:-.01em;
  padding:14px 22px;min-height:48px;border:1.5px solid transparent;border-radius:999px;
  cursor:pointer;white-space:nowrap;transition:transform .18s var(--ease),background .18s var(--ease)}
.btn:active{transform:scale(.985)}
.btn--primary{background:var(--pink);color:var(--ink)}   /* dark label on pink = 7.65:1 */
.btn--primary:hover{background:#FF95B5}
.btn--ghost{border-color:var(--ink);color:var(--ink);background:none}
.btn--onnavy{border-color:rgba(255,255,255,.55);color:#fff;background:none}
.btn--block{width:100%}
.btn--sm{font-size:13px;padding:9px 15px;min-height:44px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ----------------------------------------------------------------- header */
.bar{display:flex;align-items:center;gap:10px;height:58px;position:relative;z-index:20}
.brand{display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0;overflow:hidden}
.brand img{height:28px;width:auto;flex:0 0 auto}
.brand .wm{font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:.10em;
  color:var(--ink-gold);line-height:1;white-space:nowrap}
.bar .btn{flex:0 0 auto}
nav.desk{display:none}
.menu{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--hair);border-radius:999px;background:none;cursor:pointer}
.menu span{display:block;width:16px;height:9px;border-top:1.6px solid var(--ink);
  border-bottom:1.6px solid var(--ink)}
/* A modal <dialog> is sized by the UA stylesheet (width/height:fit-content,
   max-* calc(100% - 2em - 6px), a border, padding). The panel inside is
   absolutely positioned, so it contributes no size: without the explicit
   box below the dialog collapses to its 6px border and the right-anchored
   panel renders off-screen — the live "burger does nothing" of 2026-09-27. */
.drawer{display:none;position:fixed;inset:0;z-index:40;background:rgba(20,22,26,.45);
  width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden}
.drawer[open]{display:block}
/* html, not body: html{overflow-x:hidden} makes html the scrolling box. */
html:has(.drawer[open]){overflow:hidden}
.drawer .panel{position:absolute;top:0;right:0;bottom:0;width:min(84vw,320px);background:var(--bone);
  padding:18px var(--pad);display:flex;flex-direction:column;gap:4px;
  border-radius:28px 0 0 28px;overflow-y:auto;overscroll-behavior:contain}
.drawer .panel a{padding:15px 0;font-size:19px;font-weight:700;letter-spacing:-.02em;
  border-bottom:1px solid var(--hair)}
.drawer .close{align-self:flex-end;width:44px;height:44px;border:0;background:none;font-size:26px;
  line-height:1;cursor:pointer;color:var(--ink)}

/* -------------------------------------------------------------- the stage */
/* One ribbon per page, in the hero only. It is the brand's motion made
   structural — not a divider repeated between every section. */
.stage{position:relative;overflow:hidden}
/* MOBILE FIRST, and this is the phone rule. On a desktop the hero is two
   columns and the ribbon sweeps under the composition; on a phone the hero
   stacks, so a full-height ribbon lies straight across the price line, the
   body copy and the CTA — worst on an enquiry-only workshop, where a muted
   paragraph sits on the navy band and an outline button on the pink one.
   Confining it to the top of the stage and fading its tail keeps it as brand
   texture behind the poster and the headline, and off everything that has to
   be read. The desktop rule below restores it in full. */
.ribbon{position:absolute;left:0;right:0;top:0;width:100%;height:58%;
  pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 56%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 56%,transparent 100%)}
.ribbon path{fill:none;stroke-linecap:round}
@media (prefers-reduced-motion:no-preference){
  .ribbon path{stroke-dasharray:2600;stroke-dashoffset:2600;animation:draw 1.5s var(--ease) .1s forwards}
  .ribbon path:nth-child(2){animation-delay:.28s}
}
@keyframes draw{to{stroke-dashoffset:0}}

/* ----------------------------------------------------------------- hero */
.hero{position:relative;z-index:2;padding-top:0;padding-bottom:26px}
.hero .slot{margin-bottom:18px}
.hero .eyebrow{margin-bottom:9px}
.hero h1{font-size:clamp(38px,11.5vw,46px);font-weight:800;letter-spacing:-.04em;
  line-height:.95;margin-bottom:6px}
.hero .work{font-size:19px;font-weight:500;color:var(--muted);letter-spacing:-.01em;
  margin-bottom:18px}
.hero .work em{font-style:normal;color:var(--ink)}

/* the fact band — date is the largest thing after the artist */
.facts{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px 18px;
  padding:14px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  margin-bottom:18px}
.bigdate{display:flex;align-items:baseline;gap:7px;flex:0 0 auto}
.bigdate b{font-size:58px;font-weight:800;letter-spacing:-.06em;line-height:.78;
  color:var(--navy);font-variant-numeric:tabular-nums}
.bigdate i{font-style:normal;font-size:13px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--navy);line-height:1.18}
.fmeta{flex:1 1 auto;min-width:0;font-size:13px;color:var(--muted);line-height:1.5;padding-bottom:4px}
.fmeta b{display:block;color:var(--ink);font-weight:700;font-size:14.5px}
.fprice{flex:1 0 100%;padding-top:11px;border-top:1px dotted var(--hair)}
.fprice b{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink-gold);
  margin-right:9px}
.fprice span{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted)}
/* .fprice .fee-note: `.fprice span` (0,1,1) otherwise out-ranks it and the
   price tiers render as 10px uppercase caps. */
.fee-note,.fprice .fee-note{display:block;font-size:12.5px;font-weight:400;letter-spacing:normal;
  text-transform:none;color:var(--muted);margin-top:3px}
/* No price yet. It takes the price's weight and colour but not its size —
   it is a statement, not an amount — and it replaces the old "₹ —", which
   read as a page that had failed to render rather than as a fact nobody has
   supplied. Same specificity trap as .fee-note above: .fprice span (0,1,1)
   would otherwise make it 10px uppercase caps. */
.fprice .fee-tbc{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em;
  text-transform:none;color:var(--ink-gold)}
/* A workshop with Solo and Couple prices: two labelled groups, so the price the
   site charges (pre-register online) and the rate for the day (on the spot) can
   never be read as one list. Each rule out-ranks the generic `.fprice span` /
   `.fprice b` above — the same specificity trap as .fee-note. */
.fprice--options{display:flex;flex-wrap:wrap;gap:14px 30px}
.fprice .fp-group{display:block;font-size:inherit;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--ink)}
.fprice .fp-head{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:5px}
.fprice .fp-row{display:flex;align-items:center;justify-content:space-between;gap:18px;min-width:158px;min-height:34px;padding:0;
  font-size:14.5px;font-weight:600;letter-spacing:normal;text-transform:none;color:var(--ink)}
.fprice .fp-row span{display:inline;font-size:14.5px;font-weight:600;letter-spacing:normal;text-transform:none;color:var(--ink)}
.fprice .fp-row b{display:inline;margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink-gold)}
/* on the spot: information for the day, so quieter than what is charged online */
.fprice .fp-group--spot .fp-head,.fprice .fp-group--spot .fp-row,.fprice .fp-group--spot .fp-row span{color:var(--muted)}
.fprice .fp-group--spot .fp-row b{font-size:16px;font-weight:700;color:var(--muted)}
.fprice--options .fee-note{flex:1 0 100%}
/* the amount in the registration form's payment box */
.pay-amount{margin:2px 0 8px;font-size:14px;color:var(--muted)}
.pay-amount b{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.hero-act{display:flex;flex-direction:column;gap:9px}
.hero-act .note{font-size:12.5px;color:var(--muted);text-align:center}

/* ----------------------------------------------- empty photography frame */
/* A quiet arch of bone with the mark behind it, holding an image position no
   photograph has been supplied for. It used to print the shot brief — an
   internal instruction — as page text in 9.5px gold on bone (4.28:1, under
   AA). It now says nothing at all and is aria-hidden, so there is no label
   and no contrast question; the .lab rules that styled that text are gone. */
.slot{position:relative;background:var(--bone-2);border:1px solid var(--hair);
  border-radius:120px 120px 14px 14px;height:190px;overflow:hidden}
.slot::before{content:"";position:absolute;inset:0;
  background:url('/brand/tattva-mark.png') center 38%/auto 52% no-repeat;opacity:.10}
.slot--wide{border-radius:14px;height:150px}

/* A real supplied photograph filling the same arch shape as the slot it
   replaces — no watermark, no label, the crop is object-fit rather than a
   deliberate design choice. */
.slot--photo{padding:0}
.slot--photo::before{content:none}
.slot--photo img{width:100%;height:100%;object-fit:cover;display:block}
/* The Navratri poster is set in type from top to bottom, so the default centred
   crop lands in the MIDDLE of it and cuts words in half ("…CTOBER"). Anchored near
   the top, the same strip reads "NAVRATRI / COUPLE CHOREOGRAPHY" with both faces.
   Scoped to this one poster: every other workshop is cropped exactly as before. */
.slot--photo img[src*="navratri-couple"]{object-position:50% 0}
/* Badi Mushkil: centred, the 350x190 mobile strip ends on a half-line of the poster's
   own "DATE: 24th October" text. A little higher shows the dancer and stops above it. */
.slot--photo img[src*="badi-mushkil"]{object-position:50% 47%}
/* O Saiyyan: centred, the 350x190 mobile strip starts halfway down the poster's "SEMI-CLASSICAL" line.
   A little higher it reads title, artist, song and the date, with her in frame. */
.slot--photo img[src*="o-saiyyan"]{object-position:50% 40%}
/* Garba Night: centred, the 350x190 mobile strip cuts "POST NAVRATRI" in half. From 38% down it
   holds the whole title, the tagline and the date / time / place strip. */
.slot--photo img[src*="garba-night"]{object-position:50% 38%}
/* A batch that has not started yet, and the anniversary combos (they reuse the .cls card). */
.batches .starts{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-gold);border:1px solid var(--ink-gold);border-radius:999px;padding:2px 8px;white-space:nowrap}
/* On /classes a row with a "Starts …" tag may wrap, so the tag drops to its own line rather than splitting the
   time range. Scoped to the class cards: on /schedule (.day) the tag sits INSIDE the one description span and the
   row already wraps by itself. */
.cls:not(.day) .batches li:has(.starts){flex-wrap:wrap;row-gap:4px}
.cls:not(.day) .batches li:has(.starts) > span:not(.starts):not(.cost){white-space:nowrap}
/* A class-level line under a class name (Beginners' 3-month certification course). */
.class-sum{margin:var(--s2) 0 0;font-weight:600;color:var(--ink-gold)}
/* Rental packages: what you get, what costs extra, and the terms. */
.rate__inc{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:4px;font-size:13.5px}
.rate__inc li{padding-left:16px;position:relative}
.rate__inc li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--ink-gold)}
.rate__note{margin:var(--s2) 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.terms-h{margin:var(--s5) 0 var(--s2);font-size:18px}
.terms{margin:0 0 var(--s4);padding-left:20px;display:grid;gap:6px;font-size:14px;line-height:1.5}
/* The studio tour: a portrait loop, centred and capped so it never fills a phone screen by itself. */
.studio-video{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
.studio-video video{display:block;width:100%;max-width:300px;height:auto;aspect-ratio:9/16;border-radius:18px;background:#14161A;object-fit:cover}
.studio-video figcaption{font-size:12.5px;color:var(--muted)}
.studio-video__btn{font:inherit;font-size:12.5px;font-weight:700;padding:8px 14px;min-height:44px;border-radius:999px;border:1.5px solid var(--navy);background:transparent;color:var(--navy);cursor:pointer}
.combo-parts{margin:var(--s2) 0 0;font-weight:600}
.combo-parts a{color:inherit}
.combo-price{margin:var(--s2) 0 0;font-size:26px;letter-spacing:-.02em}
.combo-price b{font-weight:800}

/* ------------------------------------------------- navy programme section */
/* The curved boundary is Direction C's section transition. It appears where a
   ground genuinely changes — not between every block. */
.navysec{position:relative;background:var(--navy);color:#fff;
  padding:calc(var(--section) + 10px) 0 var(--section);margin-top:var(--section)}
.navysec::before{content:"";position:absolute;left:-14%;right:-14%;top:-26px;height:56px;
  background:var(--navy);border-radius:50% 50% 0 0}
/* A navy section that OPENS a page needs no gap above it — the curve rises
   into the header bar instead. */
.navysec--lead{margin-top:var(--s2)}
.navysec > .wrap{position:relative;z-index:2}
.lede--on-navy{color:var(--bone)}
.lede--on-navy a{color:var(--gold);border-bottom:1px solid rgba(220,152,6,.5)}
.sechead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.sechead h2{font-size:13px;font-weight:800;letter-spacing:.19em;text-transform:uppercase}
.sechead .count{margin-left:auto;font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#A9B6D4}
.navysec .sechead h2{color:#fff}
.navysec a:focus-visible{outline-color:#fff;outline-offset:3px}
.sechead > div .eyebrow{margin-bottom:5px}
.section-link{margin-left:auto;min-height:44px;display:inline-flex;align-items:center;gap:7px;
  color:var(--pink);font-size:13px;font-weight:700;border-bottom:1px solid rgba(253,129,167,.55)}

/* Programme = editorial rows, not cards. (The exploration's card row was its
   weakest element; rows scan far better in a single mobile column.) */
.prog{list-style:none}
.prog li{position:relative}
.prog a{display:grid;grid-template-columns:52px minmax(0,1fr);gap:2px 14px;align-items:start;
  padding:16px 0 16px 12px;border-top:1px solid rgba(255,255,255,.17)}
.pmain,.prog .pmeta,.pact{grid-column:2}
.pdate{grid-row:1}
.prog li:first-child a{border-top:0}
.prog a::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;
  border-radius:2px;background:var(--rule,var(--gold))}
.pdate{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#A9B6D4;line-height:1.3}
.pdate b{display:block;font-size:26px;line-height:.95;letter-spacing:-.03em;color:#fff;
  font-variant-numeric:tabular-nums}
.pname{display:block;font-size:19px;font-weight:800;letter-spacing:-.025em;line-height:1.1;color:#fff}
.pwork{display:block;font-size:14px;color:#C8D2E8;line-height:1.35;margin-top:1px}
.pmeta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px;
  font-size:11.5px;color:#C2CCE4}
.pact{margin-top:9px;font-size:13px;font-weight:700;color:var(--pink);white-space:nowrap}
.chip{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;background:var(--pink);color:var(--ink);padding:3px 8px;
  border-radius:999px}
.chip--quiet{background:rgba(255,255,255,.14);color:#fff}

/* ------------------------------------------------------------ bone blocks */
.block{padding-top:var(--section)}
/* The first section of a page sits under the header, so it takes the smaller
   lead gap instead of a full section gap. Replaces the per-page
   style="padding-top:18px" these templates used to carry. */
.block--lead{padding-top:var(--section-lead)}
.block h1,.block h2{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.1;
  margin-bottom:5px}
.block .lede{font-size:14.5px;color:var(--muted);margin-bottom:var(--s3);max-width:56ch}
/* A page must not end flush against the footer, whatever ground it ends on. */
main > section:last-of-type{padding-bottom:var(--section)}

/* ------------------------------------------------- spacing utilities
   The small, reusable set a template is allowed to reach for. Anything that
   wants more space than these names offer is a component, not a margin. */
.gap-s{margin-top:var(--s3)}
.gap-m{margin-top:var(--s5)}
.gap-l{margin-top:var(--s6)}
/* A call to action that owns its own breathing room, plus the short note that
   belongs to it. Used where a CTA would otherwise be jammed between the
   content above it and the footer below. */
.cta-block{display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  margin-top:var(--s6);text-align:center}
.cta-block .btn{width:100%}
.cta-block__note{font-size:12.5px;color:var(--muted);max-width:52ch;margin:0}
/* An inline CTA inside a section — full width on a phone, a real button on a
   desktop, and always a measured gap before whatever follows it. */
.cta-inline{margin-bottom:var(--s4)}
.cta-inline .btn{width:100%}

/* The homepage is a guide, not a catalogue. Three routes share one visual
   grammar so a first-time visitor only has to make one decision. */
.choose{padding-bottom:10px}
.choose > .eyebrow{margin-bottom:7px}
.choice-list{border-top:1px solid var(--hair);margin-top:22px}
.choice{display:grid;grid-template-columns:40px minmax(0,1fr);gap:3px 12px;
  padding:18px 0;border-bottom:1px solid var(--hair);align-items:start}
.choice__number{grid-row:1 / span 2;width:34px;height:34px;border-radius:50%;display:grid;
  place-items:center;background:var(--navy);color:#fff;font-size:10px;font-weight:800;
  letter-spacing:.08em;font-variant-numeric:tabular-nums}
.choice__copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.choice__copy b{font-size:18px;letter-spacing:-.025em;line-height:1.2;text-wrap:balance}
.choice__copy small{color:var(--muted);font-size:13.5px;line-height:1.45;text-wrap:pretty}
.choice__action{grid-column:2;display:inline-flex;align-items:center;gap:6px;min-height:40px;
  padding-top:5px;color:var(--navy);font-size:13.5px;font-weight:700}
.choice:hover .choice__action{color:var(--ink)}
.choice:hover .choice__number{background:var(--pink);color:var(--ink)}
.choice__number,.choice__action{transition-property:background-color,color,transform;
  transition-duration:160ms;transition-timing-function:var(--ease)}
.choice:active .choice__action{transform:translateX(2px)}

/* class list — one programme per card, in a fixed internal order:
   name → who teaches it → tags → fee → batches → the one action. Every gap
   comes from the rhythm scale, so two cards holding different amounts of
   data still read as the same object. */
.classes{list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.cls{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:16px;
  padding:var(--s3);background:#fff9f0}
.cls h2,.cls h3{font-size:19px;font-weight:800;letter-spacing:-.025em;line-height:1.15;
  text-wrap:balance}
/* The teacher line, always directly under the name. The fee never sits here:
   it is .class-fee, two steps further down. */
.cls .who{font-size:13px;color:var(--muted);margin-top:var(--s1)}
/* a card that opens on a portrait (the teachers page) */
.cls .slot{margin-bottom:var(--s3)}
.cls p + p{margin-top:var(--s2)}
.cls .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s2)}
.class-fee{margin-top:var(--s2);font-size:14px;color:var(--muted)}
.class-fee b{color:var(--ink);font-size:16px}
/* What follows a price's headline — a joining fee, a walk-in rate, a plain
   note. Each is its own line, so a nuanced price is never squeezed into one
   misleading figure. */
.fee-sub{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--muted)}
.tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:5px 9px;border-radius:999px;
  border:1px solid var(--hair);color:var(--muted);background:var(--bone)}
.tag--age{border-color:var(--ink-gold);color:var(--ink-gold)}
.tag--level{border-color:var(--navy);color:var(--navy)}
.batches{list-style:none;display:flex;flex-direction:column;gap:1px;margin-top:var(--s3);
  border-top:1px solid var(--hair);padding-top:var(--s2)}
.batches li{display:flex;align-items:baseline;gap:10px;font-size:13.5px;padding:4px 0}
.batches b{font-weight:700;min-width:58px}
.batches span{color:var(--muted);font-variant-numeric:tabular-nums}
/* A group with its OWN price (Bollywood Beginners): the price drops to a line
   of its own under "Kids  6:00 PM – 7:00 PM", indented (58px label + 10px gap)
   to sit under the time. The has-cost modifier keeps the /schedule rows, which
   share .batches, exactly as they were. */
.batches li.has-cost{flex-wrap:wrap;row-gap:1px}
/* em, not px: at 200% text zoom the label column grows with the text, and the
   price still lines up under the time instead of drifting left of it. */
.batches li.has-cost > b{min-width:4.3em}
.batches .cost{flex:1 0 100%;padding-left:calc(4.3em + 10px);color:var(--ink)}
.batches .cost b{min-width:0;font-weight:700;color:var(--ink)}
/* the price beside a timetable row's class name */
.batches .price{color:var(--ink);font-weight:600}
/* On /schedule the time column gets a fixed width on a PHONE, so a time only ever
   breaks at its dash ("6:00 PM –" over "7:00 PM"). Without it the column shrinks as
   the description grows and a longer description splits "7:00" from "PM" (three
   lines at 390px). From 480px up there is room for the time on one line, as there
   always was. There the time simply never shrinks, so a longer description (it now
   carries a price) wraps instead of squeezing the time. Scoped to .day so the label
   column on /classes is untouched. */
.day .batches li > b{flex:0 0 auto}
@media (max-width:479px){.day .batches li > b{flex:0 0 6em}}
/* the enquiry form: a price under each batch option */
.check .opt-price{display:block;margin-top:2px;font-size:14px;color:var(--muted)}
.check .opt-price b{color:var(--ink)}
/* The class name inside a timetable row is the primary way to reach a class,
   so it carries a full-size target. Vertical padding on an inline link grows
   the hit area without reflowing the row, which keeps the week scannable —
   the links used to be 15px tall. */
.batches a{position:relative;padding:15px 3px;margin:0 -3px;color:var(--navy);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.batches a:hover{color:var(--ink)}
/* margin-top:auto, not a fixed margin: in an equal-height grid row the action
   lands on the card's own baseline instead of leaving a ragged hole under a
   short card. --s4 is the floor, so it never crowds the batch list either. */
.cls .go{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding:var(--s4) 0 9px;
  min-height:44px;font-size:14.5px;font-weight:700;color:var(--navy);
  border-bottom:2px solid var(--pink);align-self:flex-start}
.cls:hover .go{color:var(--ink)}

/* private 1:1 — a distinct premium moment, not another class row */
.private{margin-top:var(--s4);border-radius:22px;background:var(--navy);color:#fff;
  padding:var(--s4) var(--pad)}
.private h1,.private h2{font-size:24px;font-weight:800;letter-spacing:-.03em;margin-bottom:8px}
.private p{font-size:14.5px;color:#C8D2E8;margin-bottom:var(--s3);max-width:52ch}
.private .eyebrow{color:var(--gold);margin-bottom:10px}
/* when the block holds nothing but the 1:1, the section gap is the only gap */
.private:first-child{margin-top:0}

/* one day of the timetable — the same card object as a class, stacked */
.day{margin-bottom:var(--s3)}
.day:last-child{margin-bottom:0}

/* the single action that closes a confirmation page */
.done-act{display:flex;flex-direction:column;gap:9px;margin-top:var(--s4)}

/* rental rate card — a studio's rate sheet, not SaaS pricing tiers. Every
   card carries the same three lines in the same place (package, amount,
   unit), so the eye can compare down the column rather than re-reading each
   card. The amount is baseline-pinned to the bottom of the card so the row
   reads as one price band however long a package name wraps. */
.rates{list-style:none;display:grid;gap:var(--s2);grid-template-columns:minmax(0,1fr);
  margin-top:var(--s3)}
.rate{display:flex;flex-direction:column;gap:var(--s3);min-height:112px;
  padding:var(--s3) var(--s4);border:1px solid var(--hair);border-radius:16px;background:#fff9f0}
.rate__name{font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.25;
  text-wrap:balance}
.rate__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 8px}
.rate__amount{font-size:23px;font-weight:800;letter-spacing:-.03em;color:var(--navy);
  font-variant-numeric:tabular-nums}
.rate__unit{font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--muted)}
/* The complete package is marked, not shouted: the same card, in gold. */
.rate--premium{border-color:var(--gold);background:linear-gradient(180deg,#FFFBF2,#FFF6E6)}
.rate--premium .rate__amount{color:var(--ink-gold)}
.rate--premium .rate__name::after{content:"Complete";display:inline-block;margin-left:8px;
  font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-gold);border:1px solid var(--ink-gold);border-radius:999px;padding:2px 7px;
  vertical-align:2px}

/* a supplied photograph of the room itself */
.studio-shot{margin:0;border:1px solid var(--hair);border-radius:16px;overflow:hidden;
  background:var(--bone-2)}
.studio-shot img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.studio-shot--hero{margin-top:var(--s4);aspect-ratio:4/3}
/* stacked under the table it must not become the loudest thing on the page */
.studio-shot--aside{aspect-ratio:4/3;max-width:520px}
/* table and photograph side by side once there is room for both */
.room{display:grid;gap:var(--s4);margin-top:var(--s3)}

/* ------------------------------------------------------------------ forms */
.form{max-width:560px}
/* A form that is a section in its own right takes the section gap, the same
   as any other section — /private-session used to run its form straight into
   the navy block above it. Pages whose form IS the first thing keep their own
   smaller lead. */
main > section.form{padding-top:var(--section)}
.field{margin-bottom:16px}
.field > label:not(.drop):not(.check),.legend{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.hint{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.45}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],
input[type=time],select,textarea{
  width:100%;font-family:var(--disp);font-size:16px;/* 16px stops iOS zoom-on-focus */
  padding:13px 14px;min-height:50px;border:1.5px solid var(--hair);border-radius:12px;
  background:#fff;color:var(--ink)}
textarea{min-height:96px;resize:vertical}
input[type=radio]:focus-visible,input[type=checkbox]:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
input:focus,select:focus,textarea:focus{border-color:var(--navy);outline:none;
  box-shadow:0 0 0 3px rgba(0,42,119,.16)}
.field--bad input,.field--bad select,.field--bad textarea{border-color:var(--warn)}
.err{display:block;font-size:12.5px;font-weight:600;color:var(--warn);margin-top:6px}
.phone{display:flex;align-items:stretch}
.phone .cc{display:flex;align-items:center;padding:0 12px;font-size:16px;font-weight:700;
  border:1.5px solid var(--hair);border-right:0;border-radius:12px 0 0 12px;
  background:var(--bone-2);color:var(--ink)}
.phone input{border-radius:0 12px 12px 0}
.check{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.45;
  padding:12px;border:1.5px solid var(--hair);border-radius:12px;background:#fff}
.check input{width:22px;height:22px;flex:0 0 auto;margin-top:1px;accent-color:var(--navy)}
fieldset{border:0}
.radios{display:flex;flex-direction:column;gap:8px}
.radios label{display:flex;align-items:center;gap:11px;padding:13px 14px;min-height:50px;
  border:1.5px solid var(--hair);border-radius:12px;background:#fff;font-size:15px;cursor:pointer}
.radios input{width:20px;height:20px;accent-color:var(--navy)}

/* the plain date / start / length fallback (no JavaScript, or the diary cannot be read) */
.rslots{margin-bottom:16px;min-width:0}
.rslots [hidden]{display:none !important}
.rslot{border:1.5px solid var(--hair);border-radius:14px;background:#fff;padding:10px 12px 6px;min-width:0;margin-top:12px}
.rslot.field--bad{border-color:var(--warn)}
.rslot .field{margin-bottom:10px;min-width:0}
.rslot .hint{margin:0 0 6px}
.rslot .err{margin:0 0 8px}
@media (min-width:480px){
  .rslot__fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px}
  .rslot__fields .field:first-child{grid-column:1 / -1}
}
.errsum{border:1.5px solid var(--warn);border-radius:14px;background:#fff;padding:12px 14px;margin:0 0 18px;
  font-size:14px;line-height:1.45}
.errsum:focus{outline:3px solid rgba(0,42,119,.35);outline-offset:2px}
.errsum ul{margin:6px 0 0 18px}
.errsum a{color:var(--warn);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  display:inline-block;min-height:28px;padding:2px 0}
.done-list{list-style:none;margin:0 auto 20px;max-width:42ch;display:flex;flex-direction:column;gap:6px;
  font-size:15px;font-weight:700}
.radios label:has(input:checked){border-color:var(--navy);background:#F4F7FF}

/* upload — a large, obvious target, never a paperclip */
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:100%;min-height:132px;padding:18px;border:2px dashed var(--ink-gold);border-radius:18px;
  background:linear-gradient(180deg,#FFFBF2,#FFF6E6);cursor:pointer;text-align:center}
.drop strong{font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.drop span{font-size:12.5px;color:var(--muted)}
.drop:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,42,119,.16)}
.preview{display:none;margin-top:12px;border:1px solid var(--hair);border-radius:14px;
  overflow:hidden;background:#fff}
.preview.on{display:block}
.preview img{width:100%;max-height:340px;object-fit:contain;background:var(--bone-2)}
.preview .pf{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:12.5px}
.preview .pf .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--muted)}
.linkbtn{background:none;border:0;font:inherit;font-size:12.5px;font-weight:700;
  color:var(--navy);text-decoration:underline;cursor:pointer;padding:6px;min-height:40px}

/* the workshop being registered for, kept visible the whole way through */
.ctx{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;
  background:var(--navy);color:#fff;margin-bottom:20px}
.ctx .cd{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#A9B6D4;line-height:1.3;text-align:center;flex:0 0 auto}
.ctx .cd b{display:block;font-size:22px;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.ctx .cn{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.ctx .cw{display:block;font-size:12.5px;color:#C8D2E8;margin-top:2px}

/* review block before submit */
.review{border:1px solid var(--hair);border-radius:16px;background:#fff;overflow:hidden;
  margin-bottom:16px}
.review dl{display:grid;grid-template-columns:auto 1fr;gap:0}
.review dt{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:11px 0 11px 14px;border-top:1px solid var(--hair)}
.review dd{font-size:14.5px;padding:11px 14px 11px 16px;border-top:1px solid var(--hair);
  text-align:right;font-weight:600;overflow-wrap:anywhere}
.review dt:first-of-type,.review dd:first-of-type{border-top:0}

/* ------------------------------------------------------------ status page */
.status{padding-top:30px;text-align:center}
.status .mark{width:64px;height:64px;margin:0 auto 16px;border-radius:999px;
  background:var(--pink-2);display:flex;align-items:center;justify-content:center}
.status h1{font-size:29px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:10px}
.status .lede{font-size:15px;color:var(--muted);max-width:42ch;margin:0 auto 22px}
.refbox{border:1.5px dashed var(--ink-gold);border-radius:16px;padding:16px;margin-bottom:20px;
  background:#FFFBF2}
.refbox .k{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.refbox .v{font-size:27px;font-weight:800;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  color:var(--ink-gold)}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.pill--pending{background:#FFF0D6;color:#7A5200}
.pill--confirmed{background:#DFF3E8;color:#0B5B38}
.pill--issue{background:#FBE3E1;color:#8C1D18}
.pill--cancelled{background:#EDEAE3;color:#55524B}

/* ---------------------------------------------------------- sticky action */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--navy);
  transform:translateY(110%);transition:transform .3s var(--ease);
  display:flex;align-items:center;gap:12px;
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 26px rgba(0,0,0,.20)}
.sticky.on{transform:translateY(0)}
.sticky .sp{min-width:0;color:#fff}
.sticky .sp b{display:block;font-size:15px;font-weight:800;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky .sp small{display:block;font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:#A9B6D4}
.sticky .btn{margin-left:auto;flex:0 0 auto}

/* ----------------------------------------------------------------- footer
   Compact, not a second homepage. The old footer carried its own class="wrap",
   which out-ranked every `footer{}` rule here (0,1,0 beats 0,0,1) and silently
   cancelled its margin and padding — that is why the site used to end flush
   against it. The .wrap now lives INSIDE .site-footer, so these rules apply. */
.site-footer{margin-top:var(--section);border-top:1px solid var(--hair);
  padding:var(--s5) 0 calc(var(--s5) + env(safe-area-inset-bottom));
  font-size:13px;color:var(--muted);line-height:1.6}
.site-footer__inner{display:flex;flex-direction:column;gap:var(--s3)}
.site-footer__id{display:flex;flex-direction:column;gap:1px}
.site-footer__id strong{font-size:14.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.site-footer__links{display:flex;flex-wrap:wrap;gap:0 var(--s4)}
.site-footer__links a{display:inline-flex;align-items:center;min-height:44px;
  font-size:13px;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--hair);align-self:flex-start}
.site-footer__links a:hover{border-bottom-color:var(--pink)}
.site-footer__note{font-size:11.5px;color:var(--muted)}

.note-tbc{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-gold);border:1px solid var(--ink-gold);
  border-radius:999px;padding:2px 8px;vertical-align:2px}

/* =========================================================== 700px and up */
@media (min-width:700px){
  :root{--pad:36px;--section:52px;--section-lead:30px}
  .bar{height:74px;gap:18px}
  .brand img{height:36px}
  .brand .wm{font-size:21px;letter-spacing:.14em}
  .brand{flex:0 0 auto}
  nav.desk{display:flex;gap:24px;margin-left:auto;font-size:14.5px;font-weight:600}
  nav.desk a{position:relative;padding:14px 0}
  nav.desk a svg{position:absolute;left:0;bottom:6px;width:100%;height:7px;overflow:visible}
  nav.desk a svg path{stroke:var(--pink);stroke-width:2;fill:none;stroke-dasharray:110;
    stroke-dashoffset:110;transition:stroke-dashoffset .5s var(--ease)}
  nav.desk a[aria-current] svg path,nav.desk a:hover svg path{stroke-dashoffset:0}
  .menu{display:none}

  /* the composition is side by side here, so the sweep can run its full height */
  .ribbon{height:100%;-webkit-mask-image:none;mask-image:none}
  .hero{display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:center;
    padding-top:24px;padding-bottom:54px}
  .hero .slot{grid-column:2;grid-row:1/span 2;margin:0;height:auto;aspect-ratio:4/5;
    border-radius:170px 170px 16px 16px}
  .hero .htext{grid-column:1}
  .hero h1{font-size:clamp(52px,7vw,74px)}
  .hero .work{font-size:24px;margin-bottom:26px}
  .bigdate b{font-size:82px}
  .bigdate i{font-size:16px}
  .fmeta{font-size:14px}
  .fprice{flex:0 0 auto;padding-top:0;border-top:0;border-left:1px solid var(--hair);
    padding-left:22px;margin-left:6px}
  .fprice b{font-size:23px;display:block;margin:0}
  .fprice span{display:block}

  .block h1,.block h2{font-size:34px}
  .navysec::before{top:-42px;height:90px;left:-8%;right:-8%}
  /* Desktop is composed, not stretched: the programme keeps a measure and the
     row becomes four real columns instead of one elastic gap. */
  /* the heading shares the programme's measure, so the count sits over the
     last column instead of floating out into empty navy */
  .prog,.navysec .sechead{max-width:1020px}
  .private{padding:var(--s5) var(--pad)}
  table.spec th{width:38%}
  .prog a{grid-template-columns:82px minmax(0,1fr) 230px 110px;gap:26px;align-items:center;
    padding:20px 0 20px 16px}
  .pmain,.prog .pmeta,.pact{grid-column:auto}
  .prog .pmeta{margin-top:0;justify-content:flex-start}
  .pact{margin-top:0;text-align:right;font-size:14px}
  .pdate b{font-size:34px}
  .pname{font-size:24px}
  .classes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .rates{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .rate{padding:var(--s4)}
  .studio-shot--hero{aspect-ratio:16/9}
  /* full-width buttons are a phone affordance; on a desktop they read stretched */
  .cta-block .btn,.cta-inline .btn{width:auto;min-width:280px}
  .choice-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--hair);
    border-radius:18px;background:rgba(255,255,255,.42);overflow:hidden}
  .choice{grid-template-columns:42px minmax(0,1fr);align-content:start;padding:22px;
    border-bottom:0;border-right:1px solid var(--hair);min-height:190px}
  .choice:last-child{border-right:0}
  .choice__action{align-self:end;margin-top:auto}
  .navysec--home{margin-top:calc(var(--section) + 20px)}
  .block > .btn--block{width:auto;min-width:280px}
  .private .btn{width:auto}
  .status{padding-top:var(--section)}
  .sticky{display:none}
  body{padding-bottom:0}
}

/* =========================================================== 900px and up
   Two-column compositions that need real width. At 768 the spec table and the
   footer's two halves were each squeezed into a column too narrow to read, so
   they stay stacked until there is room for both. */
@media (min-width:900px){
  .room{grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:var(--s6);align-items:start}
  .site-footer__inner{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s6)}
  .site-footer__links{margin-left:auto}
  .site-footer__note{flex:1 0 100%;order:3;margin-top:calc(var(--s2) * -1)}
}

/* ========================================================== 1024px and up */
@media (min-width:1024px){
  :root{--pad:44px;--section:60px;--section-lead:34px}
  .hero{grid-template-columns:1fr 400px;gap:56px}
  .classes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rates{grid-template-columns:repeat(3,minmax(0,1fr))}
  .room{grid-template-columns:minmax(0,1fr) minmax(0,420px)}
  .form--wide{max-width:none;display:grid;grid-template-columns:1fr 360px;gap:44px;align-items:start}
  .form--wide .aside{position:sticky;top:24px}
  /* Not from 700px: the tablet hero text column is too narrow for a button
     and the note side by side, and the note collapsed to one word a line. */
  .hero-act{flex-direction:row;align-items:center;gap:16px}
  .hero-act .note{text-align:left}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ------------------------------------------------------ production additions
   New surfaces the prototype did not have: the renter's spec sheet, the UPI
   payment block, and the premium rate card. Tokens and rhythm unchanged. */
.paybox{border:1.5px solid var(--hair);border-radius:16px;padding:16px;background:#fff}
.paybox p{margin-bottom:8px}
.paybox b{font-size:19px;letter-spacing:-.02em}
.paybox code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;
  background:var(--bone-2);padding:2px 7px;border-radius:6px;word-break:break-all}
.paybox img{margin:12px auto;border-radius:12px}
.paybox .btn{margin-top:12px}
.qr-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);text-align:center;margin-top:14px}
.qr-enlarge{display:block;width:100%;max-width:240px;margin:8px auto 0}
.qr-enlarge img{display:block;width:100%;height:auto;margin:0;border:1.5px solid var(--hair)}
.pay-steps{margin:16px 0 4px;padding-left:20px;font-size:13.5px;color:var(--ink);line-height:1.6}
.pay-steps li{margin-bottom:2px}

dl.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:10px 0}
dl.kv dt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);align-self:center}
dl.kv dd{font-size:15px;font-weight:600}

table.spec{width:100%;border-collapse:collapse;font-size:15px}
table.spec th,table.spec td{text-align:left;padding:11px 0;border-bottom:1px solid var(--hair);
  vertical-align:top}
table.spec th{font-weight:600;color:var(--muted);width:44%;padding-right:14px}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:0}

.cls--premium{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
/* NOT .chip — that already exists for the programme list, and redefining it
   here broke the headliner badge. This is its own name. */
.daymark{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;background:var(--pink-2);color:var(--ink);
  padding:2px 8px;border-radius:999px;vertical-align:middle;margin-left:6px}

/* ======================================================= ask for the studio
   PICK A DAY → PICK A TIME → SEND. MOBILE FIRST (390px is the design; the rest adds space).
   One question at a time, big targets, whitespace and type doing the work of hierarchy.
   A visitor meets three ideas only — Available, Another request, Unavailable — and
   the words are always printed: colour never carries the meaning on its own. */
.rq{max-width:1240px;padding-top:4px;padding-bottom:var(--s6)}
.rq__col{max-width:620px;min-width:0}
.rq__aside{display:none}
.rq__head{margin-bottom:var(--s4)}
.rq h1{font-size:32px;font-weight:800;letter-spacing:-.04em;line-height:1.02;margin:0 0 8px}
.rq__lede{font-size:15.5px;color:var(--muted);margin:0;line-height:1.45}
.rq .anchor{position:absolute;width:0;height:0;overflow:hidden}
.journey[hidden]{display:none}

/* progress: three thin segments, the current one gold, the finished ones navy */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none;margin:0 0 var(--s5);padding:0}
.steps{counter-reset:step}
.steps li{counter-increment:step;position:relative;padding-top:12px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:4px;background:var(--hair)}
.steps li span::before{content:counter(step) "  ";font-variant-numeric:tabular-nums}
.steps li.is-done{color:var(--navy)}
.steps li.is-done::before{background:var(--navy)}
.steps li.is-current{color:var(--ink)}
.steps li.is-current::before{background:var(--gold)}

.rq-sec{margin-bottom:var(--s5);min-width:0}
.rq-h{font-size:21px;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:0 0 var(--s3)}

/* 1 — the day: seven big buttons, the chosen one unmistakable */
.days{display:flex;gap:5px;overflow-x:auto;padding:3px 3px 8px;margin:0 -3px;scroll-snap-type:x proximity}
.dbtn{flex:1 1 0;min-width:42px;min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:1.5px solid var(--hair);border-radius:16px;background:#fff;color:var(--ink);font-family:var(--disp);cursor:pointer;scroll-snap-align:start;
  transition:background .15s var(--ease),transform .15s var(--ease)}
.dbtn__w{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.dbtn__n{font-size:25px;font-weight:800;letter-spacing:-.03em;line-height:1}
.dbtn:hover{background:#F2F6FF}
.dbtn[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 10px 22px -10px rgba(0,42,119,.7)}
.dbtn[aria-pressed=true] .dbtn__w{color:#C8D2E8}

/* 2 — the time */
.rq-day{font-family:var(--serif);font-style:italic;font-weight:600;font-size:26px;line-height:1.1;color:var(--navy);margin:-6px 0 var(--s3)}
.lens{margin:0 0 var(--s4);min-width:0}
.lens legend{font-size:14px;font-weight:700;color:var(--muted);margin:0 0 10px;padding:0}
.lens__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.len{position:relative;display:block}
.len input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.len span{display:flex;align-items:center;justify-content:center;min-height:50px;border:1.5px solid var(--hair);border-radius:999px;background:#fff;
  font-size:15px;font-weight:700;color:var(--ink)}
.len input:checked + span{border-color:var(--navy);background:var(--navy);color:#fff}
.len input:focus-visible + span{outline:3px solid var(--navy);outline-offset:2px}
.len-other{margin-top:10px}
.len-other label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:6px}
.rq-fixed{font-size:14.5px;color:var(--muted);margin:0 0 var(--s3)}
.rq-startsfor{font-size:14px;font-weight:700;color:var(--muted);margin:0 0 10px}
.rq-cap{font-size:13px;color:var(--muted);margin:4px 0 0}
.closest{margin:0 0 var(--s4)}
.closest__h{font-size:14px;font-weight:700;color:var(--muted);margin:0 0 8px}
.closest__row{display:flex;flex-wrap:wrap;gap:8px}
.alt{min-height:50px;padding:0 18px;border:1.5px solid var(--navy);border-radius:999px;background:#fff;color:var(--navy);
  font-family:var(--disp);font-size:15px;font-weight:700;cursor:pointer}
.alt:hover{background:#F2F6FF}
.rq-status{font-size:14.5px;color:var(--muted);margin:0 0 var(--s3);line-height:1.5}
.rq-status:empty{display:none}
.rq-status.is-error{color:var(--ink);background:#FFF7E0;border-left:5px solid #C48800;border-radius:12px;padding:12px 14px}
.times{display:flex;flex-direction:column;gap:var(--s4)}
.tgroup__h{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.time{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:60px;padding:6px 4px;
  border:1.5px solid var(--navy);border-radius:16px;background:#fff;color:var(--navy);font-family:var(--disp);cursor:pointer;
  transition:background .15s var(--ease)}
.time__t{font-size:17px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.time small{font-size:11.5px;font-weight:700;line-height:1.2}
.time__to{font-weight:500 !important;color:var(--muted)}
.time--asked .time__to{color:#6F4D00}
.time--asked .time__flag{color:#7A5200;font-weight:800}
.time:hover{background:#F2F6FF}
.time--asked{min-height:78px;border-color:#A67900;background:#FFFBEF;color:#5E4100}
.time--asked:hover{background:#FFF4D6}
.time--off{border-color:var(--hair);background:transparent;color:#716B5D;cursor:not-allowed}
.time--off .time__t{font-weight:700}
.time.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.rq .linkbtn{font-size:14.5px;font-weight:700;color:var(--navy);text-decoration:underline;text-underline-offset:3px;padding:10px 6px;min-height:44px}
.rq-more,.rq-cancel{margin:var(--s2) 0 0}
.rq-more [hidden],.rq-cancel [hidden]{display:none}

/* the chosen time, folded into a summary */
.summary{scroll-margin-top:84px;margin-bottom:var(--s5)}
.summary:focus{outline:none}
.picks{display:flex;flex-direction:column;gap:10px}
.pick{display:block;padding:18px 16px 8px 18px;background:#fff;
  border:1.5px solid var(--hair);border-left:6px solid var(--navy);border-radius:20px}
.pick--backup{border-left-color:var(--gold)}
.pick__body{min-width:0}
.pick__role{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.pick__day{font-family:var(--serif);font-style:italic;font-weight:600;font-size:22px;line-height:1.15;color:var(--ink);margin:0}
.pick__time{font-size:25px;font-weight:800;letter-spacing:-.035em;line-height:1.15;color:var(--navy);margin:4px 0 0}
.pick__act{display:flex;gap:18px;margin:4px 0 0 -6px}
.rq-note{margin:14px 0 0;padding:14px 16px;border-radius:16px;background:#FFF7E0;color:#4F3700;font-size:15px;line-height:1.5}
.rq-slot-err{margin:12px 0 0;padding:12px 14px;border-radius:12px;border:1.5px solid var(--warn);color:var(--warn);font-size:14px;font-weight:600}
.summary__act{margin-top:12px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.summary__act .btn{align-self:stretch}
.summary__act [hidden]{display:none}

/* 3 — the details: only once there is a time to ask for */
.details{margin-top:var(--s2)}
.rq-form:has(.journey:not([hidden])):not(.has-time):not(.is-failed) .details{display:none}
.rq .field{margin-bottom:18px}
.rq .field > label:not(.consent__l){font-size:14.5px;font-weight:700;letter-spacing:0;text-transform:none;margin-bottom:7px}
.rq .opt{font-size:13px;font-weight:500;color:var(--muted);margin-left:5px}
.rq input[type=text],.rq input[type=email],.rq input[type=tel],.rq input[type=date],.rq select,.rq textarea{border-color:#8A8472;border-radius:14px}
.rq .field--soft textarea{min-height:76px}
.more{margin:2px 0 var(--s3)}
.more > summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-size:14.5px;font-weight:700;color:var(--navy);
  text-decoration:underline;text-underline-offset:3px}
.more[open] > summary{margin-bottom:12px}
.consent{margin-bottom:var(--s3)}
.rq .field > label.consent__l{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;font-weight:500;letter-spacing:0;text-transform:none;line-height:1.45;color:var(--ink);cursor:pointer;margin:0}
.consent__l input{width:22px;height:22px;flex:0 0 auto;margin-top:1px;accent-color:var(--navy)}
.rq-submit-note{font-size:14px;font-weight:600;color:var(--warn);margin:0 0 10px}
.rq-agree{font-size:13.5px;line-height:1.45;color:var(--muted);margin:0 0 12px}
.rq .rq-send{min-height:58px;font-size:17px;background:var(--navy);border-color:var(--navy);color:#fff}
.rq .rq-send:hover{background:var(--navy-2)}
.rq-after{text-align:center;font-size:14.5px;color:var(--muted);margin:14px 0 0}

/* the diary cannot be read: only the plain fields and the error line are left */
.journey.is-failed .steps,.journey.is-failed .rq-sec--day,.journey.is-failed .rq-day,.journey.is-failed .lens,
.journey.is-failed .times,.journey.is-failed .rq-more,.journey.is-failed [data-time-h]{display:none}

@media (min-width:520px){
  .rq h1{font-size:38px}
  .tgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dbtn{min-height:84px}
  .dbtn__w{font-size:11.5px}
  .dbtn__n{font-size:30px}
  .lens__row{max-width:440px}
}
@media (min-width:1100px){
  .rq{display:grid;grid-template-columns:minmax(0,620px) minmax(0,1fr);column-gap:80px;align-items:start;padding-top:12px}
  .rq__aside{display:block;position:sticky;top:104px}
  .rq__aside img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:28px}
}
@media (max-width:359px){.lens__row{grid-template-columns:repeat(2,minmax(0,1fr))}.tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (forced-colors:active){
  .dbtn[aria-pressed=true],.time.is-on,.len input:checked + span{border:3px solid Highlight;forced-color-adjust:none;background:Canvas;color:CanvasText}
  .time--off{border-style:dashed}
}

/* sent */
.sent{padding-top:30px;text-align:center}
.sent__mark{width:68px;height:68px;margin:0 auto 20px;border-radius:50%;background:var(--pink-2);display:flex;align-items:center;justify-content:center}
.sent h1{font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1.05;margin:0 0 20px}
.sent__when{margin:0 auto;max-width:420px;padding:20px 18px;background:#fff;border:1.5px solid var(--hair);border-radius:22px}
.sent__when + .sent__when{margin-top:10px}
.sent__role{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.sent__day{font-family:var(--serif);font-style:italic;font-weight:600;font-size:24px;line-height:1.15;margin:0;color:var(--ink)}
.sent__time{font-size:28px;font-weight:800;letter-spacing:-.04em;line-height:1.15;margin:4px 0 0;color:var(--navy)}
.sent__lede{font-size:17px;line-height:1.5;color:var(--ink);max-width:30ch;margin:22px auto 6px}
.sent__note{font-size:14px;color:var(--muted);margin:0 0 12px}
.sent__to{font-size:15px;color:var(--ink);margin:0 0 4px}
.sent__ref{font-size:13.5px;color:var(--muted);margin:0 0 26px}
.sent__act{max-width:420px;margin:0 auto}

/* the studio-rental page's own call to check availability */
.avail-cta{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s4);padding:var(--s4) var(--pad);
  border-radius:20px;background:var(--navy);color:#fff}
.avail-cta h2{font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0;color:#fff}
.avail-cta p{font-size:14.5px;color:#C8D2E8;max-width:52ch;margin:0}
.avail-cta .btn{align-self:flex-start}
@media (min-width:700px){
  .avail-cta{flex-direction:row;align-items:center;justify-content:space-between;padding:var(--s4) var(--s5);gap:var(--s5)}
  .avail-cta .btn{flex:0 0 auto}
}

/* ------------------------------------------------- trial classes (2026-10-13)
   A class with a trial price first asks HOW to start: two big cards. The trial
   page is one form — pick a date, your details, pay, upload the screenshot. */
.choose{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:12px}
.choice{display:flex;flex-direction:column;gap:8px;min-height:44px;padding:20px 18px;border:1.5px solid var(--hair);border-radius:18px;
  background:#fff;color:var(--ink);text-decoration:none;transition:border-color .15s var(--ease),transform .15s var(--ease)}
.choice:hover{border-color:var(--navy);transform:translateY(-1px)}
.choice--trial{border-color:var(--navy);box-shadow:0 14px 30px -18px rgba(0,42,119,.55)}
.choice__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.choice__k{font-size:21px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.choice__price{font-family:var(--serif);font-style:italic;font-weight:700;font-size:28px;line-height:1;color:var(--navy);white-space:nowrap}
.choice__price--free{font-size:22px;color:var(--ink-gold)}
.choice__d{font-size:14.5px;line-height:1.5;color:var(--muted)}
.choice__go{margin-top:4px;font-size:14px;font-weight:800;color:var(--navy)}
@media (min-width:700px){.choose{grid-template-columns:1fr 1fr}}

.cls .trial-tag{margin:var(--s3) 0 0;padding:9px 12px;border-radius:12px;background:var(--pink-2);font-size:13px;line-height:1.4;color:#5B1430}
.cls .trial-tag b{font-weight:800}

.trial .tstep{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;letter-spacing:-.02em;margin:28px 0 12px}
.trial .tstep span{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  background:var(--navy);color:#fff;font-size:14px}
.tgrp{margin:0 0 12px;padding:12px 12px 14px;border:1.5px solid var(--hair);border-radius:16px;background:#fff;min-width:0}
.tgrp legend.tgrp__h{float:left;width:100%;padding:0;margin:0 0 10px}
.tgrp legend + *{clear:both}
.tgrp__h{font-size:15px;color:var(--muted)}
.tgrp__h b{color:var(--ink);font-weight:800}
.tdates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tdate{position:relative;display:block}
.tdate input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tdate > span{display:flex;align-items:center;justify-content:center;min-height:52px;padding:6px;text-align:center;
  border:1.5px solid var(--navy);border-radius:14px;background:#fff;color:var(--navy);font-size:15px;font-weight:800;letter-spacing:-.01em}
.tdate input:checked + span{background:var(--navy);color:#fff}
.tdate input:focus-visible + span{outline:3px solid var(--navy);outline-offset:2px}
.tdate:hover > span{background:#F2F6FF}
.tdate input:checked:hover + span{background:var(--navy-2)}
.trial-agree{font-size:13px;color:var(--muted);margin:6px 0 12px}
.trial-none{font-size:15px;margin:var(--s3) 0}