/* ===========================================================
   Common Ground Pilates — Studio Hub
   Design system: Fraunces / Inter · paper + terracotta + sage
   =========================================================== */
:root{
  --paper:#efeae0;
  --paper-2:#e6dfd1;
  --cream:#f6f1e6;
  --ink:#1a1816;
  --ink-soft:#3a342c;
  --ink-mute:#7a7064;
  --terracotta:#c2543d;
  --terracotta-2:#a64a3a;
  /* the studio's real brand green, pulled from the live commongroundpilates.net
     Squarespace palette (darkAccent = hsl(106.15,5.31%,51.96%)) */
  --sage:#818b7e;
  --sage-2:#69706a;
  --gold:#d4a85f;
  --plum:#5a3142;
  --rule:rgba(26,24,22,.12);
  --rule-2:rgba(26,24,22,.06);
  /* surfaces: instead of white, a beige a touch darker than the page so cards
     + buttons read as warm surfaces (was #fff everywhere) */
  --surface:#e7e0d0;
  --surface-2:#ded5c2;   /* a notch darker, for things that must differ from --surface */
}
*{box-sizing:border-box}
/* cross-document view transitions — smooths the homepage <-> hub navigation
   so there's no shutter. Progressive enhancement; no SEO impact. */
@view-transition{ navigation: auto; }
/* scroll-behavior NOT smooth — Lenis is the single smooth-scroll engine. Two
   smooth systems fight and snap on scroll-back. */
html{background:#f4efe6}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body{margin:0;background:transparent;color:var(--ink);font-family:"Inter",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(26,24,22,.18);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
[hidden]{display:none !important}

/* ---- top nav ---- */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;justify-content:space-between;align-items:center;gap:clamp(14px,2vw,32px);
  padding:clamp(13px,1.7vw,18px) clamp(18px,3.6vw,44px);
  background:rgba(239,234,224,.88);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:.3s;
}
.topnav.scrolled{
  border-color:var(--rule);
  background:rgba(239,234,224,.88);
}
.topnav .brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.topnav .brand-icon{height:clamp(30px,2.6vw,38px);width:auto;display:block}
.topnav .brand-name{
  font:400 clamp(16px,1.4vw,19px)/1.1 "Fraunces";letter-spacing:-.01em;color:var(--ink);
  white-space:nowrap;
}
.topnav .brand-name em{font-style:italic;color:var(--terracotta-2)}
@media (max-width:560px){
  .topnav .brand-name{white-space:normal;text-align:center;line-height:1.02;font-size:15px}
  .topnav .brand-name em{display:block}
}
.topnav .mark{width:32px;height:32px;border:1.4px solid currentColor;border-radius:50%;
  display:grid;place-items:center;font-family:"Fraunces";font-style:italic;font-size:17px;font-weight:500}
.topnav .name{font:500 10px/1.3 "Inter";letter-spacing:.24em;text-transform:uppercase}
.topnav .name b{font-weight:600;display:block;font-size:12px;letter-spacing:.18em}
.topnav .links{display:flex;gap:clamp(14px,1.8vw,24px)}
.topnav .links a{
  font:500 clamp(10px,.85vw,11px)/1 "Inter";letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;transition:.2s;white-space:nowrap;
}
.topnav .links a:hover{color:var(--terracotta)}
.topnav .book{
  padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--paper);
  font:500 11px/1 "Inter";letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;border:0;cursor:pointer;transition:.2s
}
.topnav .book:hover{background:var(--terracotta)}


/* ---- hero-wrap: full-bleed tinted photo + bottom-fading blur ---- */
.hero-wrap{
  position:relative;
  isolation:isolate;
  /* clip the off-stage / peeking cards HORIZONTALLY (no right-edge bleed) but
     let the event-card lighting/shadow spill DOWN into the sections below */
  overflow-x:clip;
  overflow-y:visible;
  z-index:2;
  /* exactly one viewport tall: starts at the nav's bottom edge, ends at the
     viewport bottom. --nav-h is measured + set by studio-hub.js. */
  min-height:100svh;
  padding:var(--nav-h, 70px) 0 0;
  display:grid;
  /* breadcrumb · hero (fills middle) · reviews strip — the hero flexes to
     fill the space between the nav and the reviews. The column is pinned to
     the container width so the wide reviews track can't blow the grid out. */
  grid-template-columns:minmax(0, 1fr);
  grid-template-rows:auto 1fr auto;
}
/* the "Live schedule below" pill is removed for a cleaner header */
.hero .open-pill{display:none}
/* "there's more below" cue — studio pages only, injected by studio-hub.js */
.scroll-cue{
  position:fixed;left:50%;bottom:clamp(16px,2.4vh,28px);
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  z-index:60;pointer-events:none;
  opacity:0;animation:sc-in .6s ease .9s forwards;
}
.scroll-cue .sc-label{
  font:600 9px/1 "Inter";letter-spacing:.28em;text-transform:uppercase;color:var(--ink-mute);
}
.scroll-cue .sc-arrow{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  color:var(--terracotta);background:rgba(255,255,255,.7);
  border:1px solid var(--rule);backdrop-filter:blur(4px);
  box-shadow:0 6px 16px -8px rgba(26,24,22,.4);
  animation:sc-bob 1.8s ease-in-out infinite;
}
.scroll-cue.gone{animation:none;opacity:0;transform:translate(-50%,12px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
@keyframes sc-in{to{opacity:1}}
@keyframes sc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){
  .scroll-cue{animation:none;opacity:1}
  .scroll-cue .sc-arrow{animation:none}
}
/* Header photo removed — the hero now reads on the global topo/mesh background
   only (the studio photos washed out the text). Backdrop kept in the DOM for the
   arrival transition cover but not painted as a static background. */
.hero-backdrop{ display:none; }
/* the photo — a real studio photo is set inline per page (background-image
   directly on the element, so the path resolves against the HTML doc).
   This gradient is the fallback if the photo is missing.
   Kept deliberately low-key: half-opacity so it reads as a soft tinted
   wash behind the hero, never competing with the content. */
.hb-photo{
  position:absolute;inset:0;
  opacity:1;
  background-image:
    linear-gradient(0deg, rgba(244,239,230,.5), rgba(244,239,230,.5)),
    linear-gradient(135deg, rgba(194,84,61,.85) 0%, rgba(90,49,66,.9) 60%, rgba(58,52,44,1) 100%);
  background-size:cover;
  background-position:center 35%;
  background-repeat:no-repeat;
}
.hb-photo::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 60% at 20% 25%, rgba(255,236,200,.55) 0%, transparent 55%),
    radial-gradient(60% 50% at 80% 75%, rgba(0,0,0,.35) 0%, transparent 65%);
}
.hb-photo::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 6px, transparent 6px 14px);
  mix-blend-mode:multiply;opacity:.4;
}
/* warm tint that intensifies toward bottom, fading to body bg — carries a
   light veil even at the top so the photo stays a quiet background. */
.hb-tint{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(244,239,230,.08) 0%,
    rgba(244,239,230,.15) 30%,
    rgba(244,239,230,.25) 70%,
    rgba(244,239,230,.35) 100%);
}
/* progressive blur — backdrop-filter masked to fade in from middle to
   bottom, layered in bands so the blur ramps smoothly. */
.hb-blur-1, .hb-blur-2, .hb-blur-3{
  position:absolute;left:0;right:0;
  pointer-events:none;
}
.hb-blur-1{
  top:35%;bottom:0;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, black 30%);
  mask-image:linear-gradient(180deg, transparent 0%, black 30%);
}
.hb-blur-2{
  top:55%;bottom:0;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, black 40%);
  mask-image:linear-gradient(180deg, transparent 0%, black 40%);
}
.hb-blur-3{
  top:75%;bottom:0;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, black 50%);
  mask-image:linear-gradient(180deg, transparent 0%, black 50%);
}
/* gentle vignette so the section menu pops a touch */
.hb-vignette{
  position:absolute;inset:0;
  background:radial-gradient(70% 60% at 50% 30%, transparent 0%, rgba(26,24,22,.18) 100%);
  mix-blend-mode:multiply;
}
.hb-tag{
  display:none;
}

/* ---- breadcrumb ---- */
.crumbs{
  position:relative;z-index:3;
  padding:2px 56px 0;font:500 11px/1.4 "Inter";letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mute);display:flex;gap:10px;align-items:center;
  /* full width so it left-aligns with the hero (West Adams) instead of the
     grid auto-margins shrinking + centering it */
  width:100%;max-width:1480px;margin:0 auto;justify-content:flex-start
}
.crumbs a{color:var(--ink-mute);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs b{color:var(--ink);font-weight:500}
.crumbs .sep{opacity:.5}
/* hero text needs to read well on the photo at the top portion */
.hero-wrap .crumbs{color:var(--ink-soft)}
.hero-wrap .crumbs a{color:var(--ink-soft)}
.hero-wrap .crumbs b{color:var(--ink)}

/* ---- arrival transition cover ----
   shown only when we land here from a homepage studio card. It exactly
   overlays the hero with the same photo + dark scrim the card zoomed into,
   so there's no snap on page load; the JS timeline then settles it away
   to reveal the (already soft/tinted) hub hero. */
.arrival-cover{display:none}
.cgp-arriving .arrival-cover{
  display:block;position:fixed;inset:0;z-index:9500;overflow:hidden;
  background:var(--ink);
}
.arrival-cover .ac-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 35%;
  will-change:opacity,filter,transform;
}
.arrival-cover .ac-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(28,26,23,.46) 0%, rgba(28,26,23,.06) 34%,
    rgba(28,26,23,.18) 62%, rgba(28,26,23,.8) 100%);
}
/* while arriving, the hub content starts hidden so the timeline can write
   it in around the landing deck. The DESTINATION BACKGROUND (hero photo +
   mesh + topo) is hidden too — otherwise it sits statically behind the
   spinning deck and the arrival never reads as travelling INTO the hero.
   The spin plays over continuous paper (like the homepage); the timeline
   reveals the real backdrop as the chosen card lands. */
.cgp-arriving .crumbs > *,
.cgp-arriving .hero .left > *,
.cgp-arriving .hero .right > *,
.cgp-arriving .hb-tag,
.cgp-arriving .hero-backdrop,
.cgp-arriving .mesh,
.cgp-arriving .topo{opacity:0}
@media (prefers-reduced-motion:reduce){
  .arrival-cover,#trans-layer{display:none!important}
  .cgp-arriving .crumbs > *,
  .cgp-arriving .hero .left > *,
  .cgp-arriving .hero .right > *,
  .cgp-arriving .hb-tag,
  .cgp-arriving .hero-backdrop,
  .cgp-arriving .mesh,
  .cgp-arriving .topo{opacity:1}
}

/* ---- SPIN/STACK arrival deck (ported from the homepage transition) ----
   On arrival from a homepage studio card we reconstruct the full fan deck as
   a freeze-frame, then play the press -> 360 spin -> stack -> thrust-zoom and
   LAND the chosen card exactly on this page's real hero. The deck lives in
   #trans-layer (fixed, above everything); the real hero writes in underneath
   so the final frame is the actual hero DOM — no second element, no snap. */
#trans-layer{position:fixed;inset:0;pointer-events:none;z-index:9000;perspective:1600px}
.cgp-transitioning{cursor:progress}
.speed-ribbon{
  position:absolute;left:-30%;height:2px;width:160%;
  background:linear-gradient(90deg,transparent 0%,var(--terracotta,#c2543d) 30%,var(--terracotta,#c2543d) 70%,transparent 100%);
  transform-origin:center;opacity:0;filter:blur(.5px);
}
.speed-ribbon.sage{background:linear-gradient(90deg,transparent 0%,#6b8773 30%,#6b8773 70%,transparent 100%)}
.speed-ribbon.gold{background:linear-gradient(90deg,transparent 0%,#d4a85f 30%,#d4a85f 70%,transparent 100%)}
.ghost{
  position:absolute;background:var(--paper,#f4efe6);
  border:1px solid var(--ink,#1c1a17);border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 30px 60px -20px rgba(26,24,22,.4),0 8px 20px rgba(26,24,22,.14);
  will-change:transform,top,left,width,height,border-radius,filter;
  transform-style:preserve-3d;backface-visibility:hidden;
}
.ghost .photo{flex:1;position:relative;overflow:hidden;background:var(--paper-2,#ece5d8)}
.ghost .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.ghost .ph-tag{
  position:absolute;top:12px;left:12px;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft,#4a463f);
  background:rgba(244,239,230,.86);padding:5px 8px;border-radius:3px;
}
.ghost .meta{background:var(--paper,#f4efe6);border-top:1px solid var(--ink,#1c1a17);padding:13px 16px 15px}
.ghost .meta .code{display:none}
.ghost .meta .nm{font-family:"Marcellus",Georgia,serif;font-size:23px;line-height:1;color:var(--ink,#1c1a17)}
.ghost .meta .city{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent,#c2543d);margin-top:6px}
.ghost-deck{position:absolute;transform-style:preserve-3d;will-change:transform,top,left}
.ghost-deck .ghost{transform-style:preserve-3d;backface-visibility:visible}
.ghost-deck .ghost.back-card{filter:brightness(.92) contrast(.96)}
.ghost-grad{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(28,26,23,.46) 0%,rgba(28,26,23,.06) 34%,rgba(28,26,23,.18) 62%,rgba(28,26,23,.8) 100%);
}

/* ---- HERO ---- */
.hero{
  position:relative;z-index:3;
  max-width:1480px;margin:0 auto;padding:12px 56px 20px;
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  /* fills the 1fr row of hero-wrap (nav-bottom → viewport-bottom) */
  min-height:0;align-self:stretch;
}
.hero .left{display:flex;flex-direction:column;gap:24px}
.hero .eyebrow{font:500 11px/1.4 "Inter";letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);
  display:flex;gap:10px;align-items:center}
.hero .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--terracotta)}
.hero h1{font-family:"Fraunces";font-weight:300;font-size:clamp(64px,7.4vw,124px);
  line-height:.92;letter-spacing:-.035em;margin:0;color:var(--ink)}
.hero h1 b{font-style:italic;font-weight:400;color:var(--terracotta-2)}
.hero .where{font:500 13px/1.6 "Inter";color:var(--ink-soft);display:flex;flex-direction:column;gap:2px}
.hero .where strong{font:400 italic 22px/1.3 "Fraunces";color:var(--ink);font-weight:400;letter-spacing:-.01em}
.hero .where a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
.hero .where a:hover{border-color:var(--terracotta)}
.hero .open-pill{display:none}
.hero .open-pill .pulse{width:8px;height:8px;border-radius:50%;background:var(--sage-2)}

/* schedule card — the transactional element in the hero */
.sched-card{
  background:transparent;border:1px solid var(--rule);border-radius:14px;padding:18px;
  box-shadow:0 18px 40px -20px rgba(26,24,22,.15);
}
.sched-card .label{font:500 10px/1 "Inter";letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);display:flex;justify-content:space-between}
.sched-card .label .see-all{color:var(--terracotta);text-decoration:none}
.sched-card .label .see-all:hover{text-decoration:underline}
.sched-card .next-list{margin-top:12px;display:flex;flex-direction:column}
.sched-card .next-list .row{
  display:grid;grid-template-columns:80px 1fr auto;gap:12px;align-items:center;
  padding:12px 0;border-top:1px solid var(--rule-2)
}
.sched-card .next-list .row:first-child{border-top:0}
.sched-card .next-list .empty{padding:14px 0;font:400 13px/1.4 "Inter";color:var(--ink-mute)}
.sched-card .time{font:400 italic 22px/1 "Fraunces";color:var(--ink);letter-spacing:-.01em}
.sched-card .time small{display:block;font:500 10px/1 "Inter";letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin-top:4px;font-style:normal}
.sched-card .cls-nm{font:500 13px/1.2 "Inter"}
.sched-card .cls-nm small{display:block;font:400 12px/1.3 "Inter";color:var(--ink-mute);margin-top:3px;letter-spacing:0;text-transform:none}
.sched-card .book-btn{
  padding:8px 14px;border-radius:999px;background:var(--ink);color:var(--paper);
  font:500 10px/1 "Inter";letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;transition:.2s;white-space:nowrap
}
.sched-card .book-btn:hover{background:var(--terracotta)}
.sched-card .book-btn.full{background:transparent;color:var(--ink-mute);border:1px dashed var(--ink-mute)}
.sched-card .book-btn.full:hover{background:transparent}

.hero-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;appearance:none;
  padding:11px 18px;border-radius:999px;border:1px solid var(--ink);background:transparent;color:var(--ink);
  font:500 11px/1 "Inter";letter-spacing:.18em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:.2s;
  white-space:nowrap}
.pill.cta{background:var(--ink);color:var(--paper)}
.pill.cta:hover{background:var(--terracotta);border-color:var(--terracotta)}
.pill.outline:hover{background:rgba(0,0,0,.05)}
/* ClassPass — stands out from the plain outline pills (terracotta accent) */
.pill.cp{border-color:var(--terracotta);color:var(--terracotta);background:rgba(194,84,61,.08);font-weight:700}
.pill.cp:hover{background:var(--terracotta);border-color:var(--terracotta);color:#fff}

/* hero right column */
.hero .right{position:relative}

/* ---- section menu ---- */
.section-menu{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  height:100%;min-height:580px;
}
.sec-card{
  position:relative;border-radius:14px;overflow:hidden;
  border:1px solid var(--rule);background:transparent;
  text-decoration:none;color:inherit;
  display:flex;flex-direction:column;
  cursor:pointer;will-change:transform;
  box-shadow:0 8px 20px -12px rgba(26,24,22,.18);
  transition:transform .4s cubic-bezier(.22,.85,.25,1), box-shadow .3s, filter .25s;
}
.sec-card.t1{transform:rotate(-1.2deg)}
.sec-card.t2{transform:rotate(.8deg)}
.sec-card.t3{transform:rotate(-.6deg)}
.sec-card.t4{transform:rotate(1deg)}
.sec-card.t5{transform:rotate(-.9deg)}
.sec-card.t6{transform:rotate(.5deg)}
.sec-card:hover{
  transform:rotate(0) translateY(-8px) scale(1.04);
  box-shadow:0 30px 50px -20px rgba(26,24,22,.3), 0 8px 16px rgba(26,24,22,.1);
  z-index:5;
}
.section-menu:hover .sec-card:not(:hover){
  filter:brightness(.93) saturate(.9);
  transform:scale(.97);
}
.sec-pic{
  flex:1;position:relative;overflow:hidden;min-height:140px;
}
.sec-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sec-pic::before{content:"";position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 6px, transparent 6px 14px);
  mix-blend-mode:multiply;opacity:.5;
}
.sec-pic::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(60% 50% at 30% 30%, rgba(255,236,200,.35) 0%, transparent 65%);
}
.sec-pic .ph-mark{
  position:absolute;top:10px;left:10px;z-index:2;
  padding:4px 8px;border-radius:3px;background:rgba(255,255,255,.85);
  font:500 9px/1 "Inter";letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)
}
.sec-pic .badge{
  position:absolute;top:10px;right:10px;z-index:2;
  padding:4px 8px;border-radius:999px;
  background:rgba(255,255,255,.9);
  font:500 9px/1 "Inter";letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);
}
/* per-section: rendered 3D illustration on a neutral panel bg, cover-fit */
.sec-card .sec-pic{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.sec-card.sec-schedule .sec-pic{background-color:#d9904c;background-image:url("../img/cards/schedule.png")}
.sec-card.sec-teachers .sec-pic{background-color:#6e8a73;background-image:url("../img/cards/teachers.png")}
.sec-card.sec-pricing  .sec-pic{background-color:#cf836c;background-image:url("../img/cards/pricing.png")}
.sec-card.sec-events   .sec-pic{background-color:#a73f2a;background-image:url("../img/cards/events.png")}
.sec-card.sec-visiting .sec-pic{background-color:#033c4d;background-image:url("../img/cards/visiting.png")}
.sec-card.sec-related  .sec-pic{background-color:#cca15c;background-image:url("../img/cards/related.png")}
.sec-card .sec-pic::before,
.sec-card .sec-pic::after{display:none}
.sec-card .sec-pic .ph-mark,
.sec-card .sec-pic .badge{display:none}
.sec-meta{
  padding:12px 14px;background:transparent;
  display:flex;justify-content:space-between;align-items:flex-end;gap:10px;
  border-top:1px solid var(--rule-2);
}
.sec-meta .left-m{display:flex;flex-direction:column;gap:4px}
.sec-meta small{font:500 9px/1 "Inter";letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
.sec-meta strong{font:400 italic 22px/1 "Fraunces";letter-spacing:-.015em;color:var(--ink);font-weight:400}
.sec-meta .arr{
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--rule);display:grid;place-items:center;color:var(--ink-soft);
  transition:.25s;flex-shrink:0;font-size:14px;
}
.sec-card:hover .arr{
  background:var(--terracotta);border-color:var(--terracotta);color:#fff;
  transform:rotate(-45deg);
}

/* ---- body layout: sticky sidebar + sections ---- */
.body-wrap{
  max-width:1480px;margin:0 auto;padding:20px 28px 0;
  display:grid;grid-template-columns:180px 1fr;gap:48px;
}
.sidenav{position:sticky;top:96px;align-self:start;
  display:flex;flex-direction:column;gap:4px;
  font:500 11px/1.4 "Inter";letter-spacing:.18em;text-transform:uppercase;
}
.sidenav .label{color:var(--ink-mute);margin-bottom:8px}
.sidenav a{
  color:var(--ink-soft);text-decoration:none;padding:8px 0 8px 14px;
  position:relative;display:flex;align-items:center;gap:8px;
  border-left:2px solid transparent;transition:.2s
}
.sidenav a:hover{color:var(--ink)}
.sidenav a .num{font-family:"Fraunces";font-style:italic;font-size:13px;font-weight:500;letter-spacing:0;color:var(--ink-mute);text-transform:none}
.sidenav a.active{color:var(--terracotta);border-left-color:var(--terracotta)}
.sidenav a.active .num{color:var(--terracotta)}
.sidenav .util{
  margin-top:24px;padding-top:18px;border-top:1px solid var(--rule);
  display:flex;flex-direction:column;gap:8px;
  font:500 10px/1.4 "Inter";letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)
}
.sidenav .util a{padding:0;border:0}

.body-main{display:flex;flex-direction:column;gap:26px;padding-bottom:48px}
section[id]{scroll-margin-top:96px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;
  border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:24px;gap:24px;flex-wrap:wrap}
.section-head h2{font:300 italic clamp(38px,4.4vw,68px)/1 "Fraunces";letter-spacing:-.025em;margin:0;color:var(--ink)}
.section-head h2 small{display:block;font:500 11px/1 "Inter";letter-spacing:.26em;text-transform:uppercase;color:var(--ink-mute);font-style:normal;margin-bottom:6px}
.section-head .meta{font:400 14px/1.5 "Inter";color:var(--ink-soft);max-width:340px;text-align:right}

/* ---- schedule ---- */
/* site.css applies section{padding:clamp(90px,12vh,160px) 0} to every section —
   strip that off the studio body sections + the hero bottom so the page is
   compact (the body-main gap handles separation) */
/* hero-wrap padding is set in its own rule (top = --nav-h, bottom = 0) to
   override the global section{padding:clamp(90px..)} */
.body-main > section{padding-top:0;padding-bottom:0}

.sched-combo{display:grid;grid-template-columns:1.45fr 1fr;gap:24px;align-items:start}

/* all section-head meta paragraphs removed — headers stay compact */
.section-head .meta{display:none}
/* pricing: drop the per-card checkout footnotes + the little tier eyebrows */
.price-card .checkout-tag{display:none}
.price-card .tier-tag{display:none}
.price-note{display:none}

/* remove the on-page heading eyebrows (the little uppercase kickers) — the
   numbered eyebrows in the sidenav stay */
.section-head h2 small,
#visiting.in-rail .section-head h2 small,
.teach-rail .rail-head .lbl,
.s3-head .lbl{display:none}

/* desktop: the "Schedule." header sits ONLY over the left column; the teacher
   rail moves up to start at the top of the section, so the carousel begins
   at the schedule's height (not pushed below the big heading) */
@media (min-width:1101px){
  #schedule{display:grid;grid-template-columns:1.45fr 1fr;column-gap:24px;align-items:start;
    /* row 1 = heading's own height ONLY. Without this the tall teacher rail
       (spanning both rows) inflates row 1 and shoves the schedule panel down,
       breaking its alignment with the teacher carousel. */
    grid-template-rows:min-content 1fr}
  #schedule > .section-head{grid-column:1;grid-row:1;margin-bottom:4px}
  #schedule > .sched-combo{display:contents}
  .sched-combo > .sched-list{grid-column:1;grid-row:2}
  .sched-combo > .teach-rail{grid-column:2;grid-row:1 / span 2}
}
/* fully transparent — the page background shows straight through. The ONLY
   chrome is a glossy window border (light edge + inner highlight + soft drop) */
.sched-list{
  background:transparent;
  border:1px solid rgba(255,255,255,.55);border-radius:16px;
  /* overflow VISIBLE on purpose: chip hover-shadows must bleed past the panel
     edge instead of being clipped into a sharp line. Children are all
     transparent-bg so nothing pokes the rounded corners. */
  overflow:visible;
  box-shadow:0 14px 44px -26px rgba(26,24,22,.32), inset 0 1px 0 rgba(255,255,255,.6);
}
.sched-list .embed-head{border-radius:16px 16px 0 0}
.sched-list .embed-head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:14px 18px;background:var(--paper-2);border-bottom:1px solid var(--rule);
}
.sched-list .embed-head .dow{font:500 11px/1 "Inter";letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft)}
.sched-list .embed-head .summary{font:500 10px/1 "Inter";letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.sched-list-foot{padding:14px 18px;background:transparent;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  font:500 11px/1 "Inter";letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.sched-list-foot a{color:var(--terracotta);text-decoration:none}
.sched-list-foot a:hover{text-decoration:underline}

/* ---- 3-day schedule list (live from Momence) ---- */
.sched-3day{display:flex;flex-direction:column}
.s3-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:14px 18px;
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,.45);
}
.s3-head .lbl{font:500 10px/1.4 "Inter";letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
.s3-head .ttl{font:400 italic 22px/1 "Fraunces";letter-spacing:-.01em;color:var(--ink);margin-top:3px}
.s3-head a{font:500 10px/1 "Inter";letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta);text-decoration:none;white-space:nowrap}
.s3-head a:hover{text-decoration:underline}
/* prev / today / next paging lives in the schedule's top header bar */
.s3-head.has-pager{align-items:center}
.s3-head .s3-pager{border-top:0;background:transparent;padding:0;gap:6px;flex:0 0 auto;margin:0}
.s3-head .s3-pager-label{display:none}
.s3-head .s3-pager-btn{width:30px;height:30px;font-size:13px}
.s3-head .s3-pager-today{width:auto;height:30px;padding:0 13px}

/* "Updated X ago" + manual refresh — calm, low-contrast, no idle flash */
.s3-status{display:flex;align-items:center;gap:7px;margin-top:6px}
.s3-stamp{
  font:500 9px/1 "Inter";letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mute);opacity:.55;
}
/* one gentle pulse after a manual refresh, then settle — no strobing */
.s3-status.pulse .s3-stamp{animation:s3-pulse 1.1s ease-out 1}
@keyframes s3-pulse{0%{opacity:.55}20%{opacity:1}100%{opacity:.55}}
.s3-refresh{
  appearance:none;-webkit-appearance:none;border:0;background:transparent;
  cursor:pointer;color:var(--ink-soft);opacity:.45;font-size:13px;line-height:1;
  padding:1px 2px;border-radius:50%;
  transition:opacity .2s, transform .5s cubic-bezier(.16,1,.3,1);
}
.s3-refresh:hover{opacity:.9}
.s3-refresh:disabled{opacity:.25;cursor:default}
.s3-status.loading .s3-refresh{animation:s3-spin .8s linear infinite}
@keyframes s3-spin{to{transform:rotate(360deg)}}
.s3-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.s3-loading{grid-column:1 / -1;padding:44px 18px;text-align:center;font:400 14px/1.5 "Inter";color:var(--ink-mute)}
.s3-day{border-left:1px solid var(--rule-2);display:flex;flex-direction:column}
.s3-day:first-child{border-left:0}
.s3-day.today{background:rgba(194,84,61,.06)}
.s3-dh{padding:10px 10px 8px;text-align:center;border-bottom:1px solid var(--rule-2)}
.s3-dh .dow{display:block;font:500 10px/1 "Inter";letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.s3-dh .dnum{display:block;font:400 italic 18px/1.2 "Fraunces";color:var(--ink);margin-top:3px}
.s3-day.today .s3-dh .dow,.s3-day.today .s3-dh .dnum{color:var(--terracotta)}
.s3-list{padding:8px;display:flex;flex-direction:column;gap:6px}
.s3-class{
  display:grid;grid-template-columns:auto 1fr;column-gap:7px;row-gap:1px;align-items:baseline;
  padding:7px 8px;border-radius:8px;
  background:rgba(246,241,230,.7);
  border:1px solid var(--rule-2);border-left:3px solid var(--sage-2);
  box-shadow:0 1px 2px -1px rgba(26,24,22,.12),inset 0 1px 0 rgba(255,255,255,.5);
  text-decoration:none;color:inherit;
  transition:background .15s, box-shadow .15s, transform .15s;
}
.s3-class:hover{background:rgba(246,241,230,.95);box-shadow:0 6px 14px -6px rgba(26,24,22,.22);transform:translateX(2px)}
.s3-class.soon{border-left-color:var(--terracotta-2);background:rgba(244,232,226,.74)}
.s3-class.full{border-left-color:var(--ink-mute);opacity:.7}
.s3-time{grid-column:1;grid-row:1;font:600 11px/1.35 "Inter";color:var(--ink);white-space:nowrap}
.s3-nm{grid-column:2;grid-row:1;font:500 12px/1.3 "Inter";color:var(--ink);text-wrap:balance}
/* subtext spans the WHOLE row (under both time + title), not just the title col */
.s3-sub{grid-column:1 / -1;grid-row:2;display:block;font:400 11px/1.3 "Inter";color:var(--ink-mute);margin-top:1px}
.s3-empty{padding:22px 8px;text-align:center;font:400 12px/1.4 "Inter";color:var(--ink-mute)}

/* staggered load-in: schedule chips + hero next-classes rows fade up one
   by one as the live data arrives (JS adds .in, then removes both classes
   once the cascade settles so normal hover transitions take back over). */
.s3-class.load-in,
.sched-card .next-list .row.load-in{
  opacity:0;transform:translateY(8px);
  transition:opacity .5s cubic-bezier(.22,.85,.25,1), transform .5s cubic-bezier(.22,.85,.25,1);
}
.s3-class.load-in.in,
.sched-card .next-list .row.load-in.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .s3-class.load-in,
  .sched-card .next-list .row.load-in{opacity:1;transform:none;transition:none}
}

/* ---- teacher rail ---- */
/* transparent, like the events carousel — cards float, no white box */
.teach-rail{background:transparent;border:0;border-radius:0;overflow:visible;align-self:start;perspective:1400px;container-type:inline-size}
.teach-rail .rail-head{padding:4px 2px 14px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.teach-rail .rail-head .lbl{font:500 11px/1 "Inter";letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
/* Teachers header matches the "Schedule." heading size */
.teach-rail .rail-head .ttl{font:300 italic clamp(38px,4.4vw,68px)/1 "Fraunces";letter-spacing:-.025em;color:var(--ink);margin-top:4px}
.teach-rail .rail-head .hint{font:500 10px/1 "Inter";letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
/* sort filter — Recent / A–Z */
.teach-filter{display:flex;gap:2px;background:var(--paper-2);border-radius:999px;padding:2px;flex-shrink:0}
.teach-filter .tf-btn{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font:500 9px/1 "Inter";letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-mute);padding:6px 9px;border-radius:999px;transition:background .2s,color .2s;
}
.teach-filter .tf-btn.active{background:transparent;color:var(--ink);box-shadow:0 1px 3px rgba(26,24,22,.12)}
/* capped to 4 cards (2 rows), scrolls for the rest — hidden scrollbar */
.teach-grid-2{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  padding:2px 0 0;
  overflow-y:auto;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior:contain;
}
/* when the rail itself gets narrow (cramped tablet column or phone), drop to
   one teacher per row so cards never go skinny / clip — keyed to the rail's
   own width, not the viewport */
@container (max-width:400px){
  .teach-grid-2{grid-template-columns:1fr}
}
.teach-grid-2::-webkit-scrollbar{display:none;width:0;height:0}
/* desktop: cards keep their natural 3:4 aspect (never stretched). Only whole
   rows that fully fit the rail height are shown; they center in the space. */
@media (min-width:1101px){
  .teach-grid-2{grid-auto-rows:max-content;align-content:center}
}
.teach-grid-2 .teach-loading{
  grid-column:1 / -1;padding:28px 8px;text-align:center;
  font:400 13px/1.5 "Inter";color:var(--ink-mute);
}
.teach-card{
  appearance:none;background:transparent;border:1px solid var(--rule);border-radius:12px;
  overflow:hidden;text-align:left;cursor:pointer;padding:0;
  display:flex;flex-direction:column;
  will-change:transform,box-shadow;
  box-shadow:0 4px 12px -4px rgba(26,24,22,.12);
  transform-style:preserve-3d;
  transition:box-shadow .35s;
  position:relative;
}
.teach-card .t-photo{
  aspect-ratio:3/4;position:relative;overflow:hidden;background:var(--paper-2);
}
.teach-card .t-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.teach-card .t-photo .ph-tag{
  position:absolute;top:10px;left:10px;z-index:2;
  padding:3px 8px;border-radius:3px;background:rgba(255,255,255,.85);
  font:500 9px/1 "Inter";letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)
}
.teach-card .t-meta{padding:10px 12px 14px}
.teach-card .t-name{font:400 italic 22px/1 "Fraunces";letter-spacing:-.015em;color:var(--ink);font-weight:400}
.teach-card .t-role{font:500 9px/1.3 "Inter";letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta);margin-top:6px}
.teach-card .t-cta{
  margin-top:8px;font:500 10px/1 "Inter";letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-mute);display:flex;align-items:center;gap:6px;transition:color .25s
}
.teach-card:hover .t-cta{color:var(--terracotta)}
.teach-card .t-cta .arr{display:inline-block}
/* no hover motion on teacher cards — the coverflow already handles all motion */
.teach-coverflow .teach-card,
.teach-coverflow .teach-card *{will-change:auto}
.teach-coverflow .teach-card:hover .t-cta{color:var(--ink-mute)}

/* ---- teacher modal ---- */
.t-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;perspective:1800px}
.t-modal.open{display:flex}
.t-modal-backdrop{position:absolute;inset:0;background:rgba(20,18,16,.7);backdrop-filter:blur(10px);cursor:pointer}
.t-modal-card{
  position:relative;width:min(960px,92vw);max-height:92vh;
  background:transparent;border-radius:18px;overflow:hidden;
  display:grid;grid-template-columns:1.05fr 1fr;
  box-shadow:0 50px 100px -20px rgba(0,0,0,.5);
  transform-origin:0 0;will-change:transform,opacity;
}
.t-modal-photo{position:relative;overflow:hidden;min-height:520px;background:var(--paper-2)}
.t-modal-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.t-modal-photo .ph-tag{position:absolute;top:18px;left:18px;z-index:2;
  padding:5px 12px;border-radius:4px;background:rgba(255,255,255,.85);
  font:500 10px/1 "Inter";letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.t-modal-body{padding:48px 44px 44px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.t-modal-eyebrow{font:500 11px/1 "Inter";letter-spacing:.26em;text-transform:uppercase;color:var(--ink-mute);display:flex;gap:10px;align-items:center}
.t-modal-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--terracotta)}
.t-modal-name{font:300 italic clamp(48px,5vw,72px)/.95 "Fraunces";letter-spacing:-.03em;color:var(--ink);margin:0}
.t-modal-role{font:500 11px/1.3 "Inter";letter-spacing:.22em;text-transform:uppercase;color:var(--terracotta);margin-top:-4px}
.t-modal-bio{font:400 15px/1.65 "Inter";color:var(--ink-soft);margin:8px 0 4px}
.t-modal-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.t-modal-chips .chip{font:500 10px/1 "Inter";letter-spacing:.18em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--rule);border-radius:3px;color:var(--ink-mute)}
.t-modal-foot{margin-top:auto;padding-top:14px;display:flex;gap:8px;flex-wrap:wrap}

/* in-modal filtered schedule — that teacher's upcoming classes */
.t-modal-sched{display:none;margin-top:auto;padding-top:14px}
.t-modal.sched-open .t-modal-bio,
.t-modal.sched-open .t-modal-chips,
.t-modal.sched-open .t-modal-foot{display:none}
.t-modal.sched-open .t-modal-sched{display:block}
.t-modal-sched-back{
  appearance:none;border:0;background:transparent;cursor:pointer;padding:0;
  font:500 10px/1 "Inter";letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);
  display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;transition:color .2s;
}
.t-modal-sched-back:hover{color:var(--ink)}
.t-modal-sched-head .lbl{font:500 10px/1 "Inter";letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
.t-modal-sched-head .t-modal-sched-title{
  display:block;font:400 italic 22px/1.15 "Fraunces";color:var(--ink);margin:5px 0 12px;
}
.t-modal-sched-list{
  display:flex;flex-direction:column;gap:7px;
  max-height:46vh;overflow-y:auto;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.t-modal-sched-list::-webkit-scrollbar{display:none}
.tm-class{
  display:flex;gap:11px;align-items:flex-start;
  padding:9px 11px;border-radius:9px;background:var(--cream);
  border-left:3px solid var(--sage-2);text-decoration:none;color:inherit;
  transition:background .15s,box-shadow .15s,transform .15s;
}
.tm-class:hover{background:transparent;box-shadow:0 6px 14px -6px rgba(26,24,22,.25);transform:translateX(2px)}
.tm-class.soon{border-left-color:var(--terracotta-2)}
.tm-class.full{border-left-color:var(--ink-mute);opacity:.72}
.tm-when{font:600 11px/1.4 "Inter";color:var(--ink);white-space:nowrap;flex-shrink:0;min-width:78px}
.tm-when small{display:block;font:500 10px/1.35 "Inter";color:var(--ink-mute)}
.tm-info{font:500 12.5px/1.3 "Inter";color:var(--ink)}
.tm-info small{display:block;font:400 11px/1.35 "Inter";color:var(--ink-mute);margin-top:2px}
.tm-empty{padding:20px 4px;font:400 13px/1.5 "Inter";color:var(--ink-mute)}
.t-modal-close{
  position:absolute;top:16px;right:16px;z-index:5;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.95);border:1px solid var(--rule);
  font:500 22px/1 "Inter";color:var(--ink);cursor:pointer;
  display:grid;place-items:center;transition:.2s
}
.t-modal-close:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:rotate(90deg)}

/* ---- pricing ---- */
/* even 2-col grid (New client special is the same size as the others) */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.price-card{background:transparent;border:1px solid var(--rule);border-radius:14px;padding:18px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.price-card.featured{border:2px solid var(--terracotta);background:transparent}
.price-card .tier-tag{font:500 10px/1 "Inter";letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
.price-card.featured .tier-tag{color:var(--terracotta)}
.price-card h3{font:400 italic 28px/1 "Fraunces";letter-spacing:-.015em;margin:6px 0 4px;color:var(--ink)}
.price-card .blurb{font:400 13px/1.45 "Inter";color:var(--ink-soft);margin:0 0 14px}
.pack-row{
  display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
  padding:12px 0;border-top:1px solid var(--rule-2);
  text-decoration:none;color:inherit;cursor:pointer;
  position:relative;transition:padding .2s;
}
.pack-row:first-of-type{border-top:0}
.pack-row::before{
  content:"";position:absolute;left:-18px;right:-18px;top:0;bottom:0;
  background:transparent;transition:.25s;z-index:0;
}
.pack-row:hover::before{background:var(--cream);left:-12px;right:-12px}
.pack-row > *{position:relative;z-index:1}
.pack-row .pack-nm{font:500 14px/1.3 "Inter";color:var(--ink)}
.pack-row .pack-nm small{display:block;font:400 12px/1.3 "Inter";color:var(--ink-mute);margin-top:2px;letter-spacing:0;text-transform:none}
.pack-row .pack-price{font:400 italic 24px/1 "Fraunces";color:var(--ink);letter-spacing:-.01em;transition:color .2s}
.price-card.featured .pack-row .pack-price{color:var(--terracotta)}
.pack-row .pack-go{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--rule);
  display:grid;place-items:center;color:var(--ink-soft);font-size:13px;flex-shrink:0;
  transition:.25s;
}
.pack-row:hover .pack-go{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateX(2px)}
.price-card.featured .pack-row:hover .pack-go{background:var(--terracotta);border-color:var(--terracotta)}

.price-card .checkout-tag{
  display:none;align-items:center;gap:6px;
  margin-top:14px;padding:10px 12px;
  background:var(--paper);border-radius:8px;
  font:500 10px/1.3 "Inter";letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);
}
.price-card .checkout-tag svg{width:14px;height:14px;color:var(--terracotta);flex-shrink:0}
.price-card .checkout-tag b{font-weight:500;color:var(--ink-soft)}

/* info on the left, terracotta action button on the right (not a full-width bar) */
.price-card.featured .feature-cta{
  display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:auto;
}
.price-card.featured .fc-info{display:flex;flex-direction:column;gap:5px;min-width:0}
.price-card.featured .fc-eyebrow{font:500 10px/1 "Inter";letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
.price-card.featured .fc-line{font:400 italic 24px/1 "Fraunces";letter-spacing:-.015em;color:var(--ink)}
.price-card.featured .feature-btn{
  display:inline-flex;align-items:center;gap:14px;flex-shrink:0;
  padding:14px 20px;border-radius:12px;background:var(--terracotta);color:#fff;
  text-decoration:none;transition:.25s;
}
.price-card.featured .feature-btn:hover{background:var(--ink)}
.price-card.featured .feature-btn .price-big{font:300 italic 32px/1 "Fraunces";letter-spacing:-.025em;color:#fff;flex-shrink:0}
.price-card.featured .feature-btn .price-big small{display:block;font:500 9px/1 "Inter";letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7);font-style:normal;margin-bottom:4px}
.price-card.featured .feature-btn .arr-big{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);
  display:grid;place-items:center;color:#fff;font-size:17px;transition:.25s;flex-shrink:0
}
.price-card.featured .feature-btn:hover .arr-big{background:transparent;color:var(--ink);transform:translateX(2px)}

.price-privates{margin-top:18px;padding:22px 24px}
.price-note{display:none}
/* one-on-one / duets — online booking coming soon, request in studio for now */
.price-soon .soon-cta{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px dashed var(--rule);border-radius:12px;background:rgba(28,26,23,.02)}
.price-soon .soon-badge{font:600 10px/1.2 "Inter";letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta)}
.price-soon .soon-sub{font:400 13px/1.45 "Inter";color:var(--ink-soft)}
.price-note svg{flex-shrink:0}
.price-note strong{color:var(--ink);font-weight:500}
.price-note a{margin-left:auto;color:var(--terracotta);text-decoration:none;font-weight:500;letter-spacing:.04em}

/* ---- events ---- */
.event-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.event-card{
  background:transparent;border:1px solid var(--rule);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .4s cubic-bezier(.22,.85,.25,1), box-shadow .35s;
  box-shadow:0 6px 18px -8px rgba(26,24,22,.12);text-decoration:none;color:inherit
}
.event-card:hover{transform:translateY(-6px);box-shadow:0 30px 50px -16px rgba(26,24,22,.25), 0 8px 16px rgba(26,24,22,.08)}
.event-photo{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.event-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.event-tag{
  position:absolute;top:14px;right:14px;z-index:2;
  background:rgba(20,18,16,.85);color:#fff;padding:5px 10px;border-radius:999px;
  font:500 10px/1 "Inter";letter-spacing:.22em;text-transform:uppercase
}
.event-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.event-body h3{font:400 italic 26px/1.1 "Fraunces";letter-spacing:-.015em;margin:0;color:var(--ink)}
.event-body .desc{font:400 14px/1.55 "Inter";color:var(--ink-soft);margin:0;flex:1}
.event-foot{display:flex;align-items:center;gap:12px;border-top:1px solid var(--rule-2);padding-top:14px}
.event-foot .when{font:500 11px/1.3 "Inter";letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);flex:1}
.event-inquiry{margin-top:18px;padding:18px;border:1px dashed var(--ink-mute);border-radius:12px;
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.event-inquiry .ei-lbl{font:500 11px/1 "Inter";letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:6px}
.event-inquiry .ei-ttl{font:400 italic 22px/1.2 "Fraunces";letter-spacing:-.01em}

/* ---- visiting ---- */
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.visit-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.5);box-shadow:0 10px 30px -20px rgba(26,24,22,.28),inset 0 1px 0 rgba(255,255,255,.5);border-radius:16px;padding:26px 24px 24px;display:flex;flex-direction:column;gap:13px;position:relative;overflow:hidden}
.visit-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rule)}
.visit-card.urgent{background:#f3eee3;border-color:rgba(194,84,61,.4)}
.visit-card.urgent::before{width:6px;
  background:linear-gradient(180deg,#d6634b 0%,var(--terracotta) 45%,var(--terracotta-2) 100%);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.35),2px 0 6px -2px rgba(166,74,58,.55)}
.visit-card .tag{align-self:flex-start;font:600 10px/1 "Inter";letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);background:rgba(26,24,22,.045);border:1px solid var(--rule);padding:6px 11px;border-radius:999px}
.visit-card.urgent .tag{color:var(--terracotta);background:rgba(194,84,61,.08);border-color:rgba(194,84,61,.25)}
.visit-card h3{font:400 italic clamp(22px,2.1vw,27px)/1.05 "Fraunces";letter-spacing:-.015em;margin:0;color:var(--ink)}
.visit-card p{font:400 14px/1.6 "Inter";color:var(--ink-soft);margin:0}
.visit-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.visit-card li{position:relative;padding-left:20px;font:400 13.5px/1.5 "Inter";color:var(--ink-soft)}
.visit-card li::before{content:"";position:absolute;left:3px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--terracotta);opacity:.75}
.visit-card li strong{color:var(--ink)}
/* hours as a clean day → time ledger instead of one cramped line */
.visit-card .hours-list{display:flex;flex-direction:column;margin:0;padding:0}
.visit-card .hours-list > div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0;border-bottom:1px solid var(--rule-2)}
.visit-card .hours-list > div:last-child{border-bottom:0}
.visit-card .hours-list dt{font:500 10.5px/1 "Inter";letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin:0}
.visit-card .hours-list dd{font:500 13px/1 "Inter";color:var(--ink);margin:0;white-space:nowrap}
.visit-card .hours-note{font:400 12px/1.5 "Inter";color:var(--ink-mute);margin:8px 0 0}

/* "How to prepare" → continuously-cycling 3D coverflow (prep-carousel.js turns
   the .visit-grid into this; cards are wider and one is always centered). */
.visit-grid.prep-carousel{display:block;position:relative;perspective:1500px;padding:6px 0 2px}
.prep-carousel .prep-track{position:relative;width:100%;min-height:clamp(330px,40vh,380px);transform-style:preserve-3d}
.prep-carousel .visit-card{
  position:absolute;top:50%;left:50%;width:clamp(300px,40vw,460px);
  height:clamp(330px,40vh,380px);margin:0;
  justify-content:center;/* short cards center their copy instead of sitting top-heavy */
  transform-origin:center center;backface-visibility:hidden;
  box-shadow:0 24px 60px -30px rgba(28,26,23,.5);
  transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .7s ease,filter .7s ease;
}
/* a hairline under the title gives each card the same designed structure */
.prep-carousel .visit-card h3{padding-bottom:11px;border-bottom:1px solid var(--rule-2)}
.prep-carousel .prep-dots{display:flex;justify-content:center;gap:9px;margin-top:24px}
.prep-carousel .prep-dots button{
  width:8px;height:8px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:var(--rule);transition:background .3s ease,transform .3s ease;
}
.prep-carousel .prep-dots button.on{background:var(--terracotta);transform:scale(1.3)}

/* ---- related studios ---- */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rel-card{background:transparent;border:1px solid var(--rule);border-radius:12px;overflow:hidden;
  text-decoration:none;color:inherit;transition:.2s;display:flex;flex-direction:column}
.rel-card:hover{transform:translateY(-4px);box-shadow:0 18px 30px -12px rgba(26,24,22,.18)}
.rel-card .pic{aspect-ratio:1.6;position:relative;overflow:hidden;background:var(--paper-2)}
.rel-card .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rel-card .body{padding:14px 16px}
.rel-card .nm{font:400 italic 28px/1 "Fraunces";letter-spacing:-.02em;color:var(--ink)}
.rel-card .nm b{font-style:normal;font-weight:300}
.rel-card .where{font:500 11px/1 "Inter";letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta);margin-top:6px}
.rel-card .dist{font:400 13px/1.4 "Inter";color:var(--ink-mute);margin-top:6px}

/* ---- footer ---- */
footer.page-foot{background:var(--ink);color:var(--paper);padding:64px 28px;margin-top:48px}
.foot-wrap{max-width:1480px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.foot-wrap h4{font:300 italic 36px/1 "Fraunces";letter-spacing:-.025em;margin:0 0 12px;color:var(--paper)}
.foot-wrap p{font:400 14px/1.6 "Inter";color:rgba(246,241,230,.7);margin:0 0 14px;max-width:340px}
.foot-wrap small{display:block;font:500 10px/1 "Inter";letter-spacing:.22em;text-transform:uppercase;color:rgba(246,241,230,.55);margin-bottom:8px}
.foot-wrap a{color:var(--paper);text-decoration:none;display:block;padding:4px 0;font:400 14px/1.4 "Inter"}
.foot-wrap a:hover{color:var(--gold)}
.foot-wrap a.foot-site{font:500 11px/1 "Inter";letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.foot-legal{max-width:1480px;margin:32px auto 0;padding-top:24px;border-top:1px solid rgba(246,241,230,.15);
  display:flex;justify-content:space-between;font:400 12px/1.4 "Inter";color:rgba(246,241,230,.55);flex-wrap:wrap;gap:12px}
.foot-legal a{color:inherit}

/* ===========================================================
   HERO EVENTS RAIL (#events-carousel)
   FocusRail-style 3D rail living in the hero right column.
   Center card full size; side cards rotated in 3D, slightly
   scaled, lightly dimmed (still clearly visible). Drag to
   scroll continuously, snap on release. GSAP-driven.
   =========================================================== */
.hero-events{
  display:flex;flex-direction:column;gap:14px;
  height:100%;justify-content:center;
}
.hero-events .he-eyebrow{
  font:500 11px/1.4 "Inter";letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-soft);display:flex;gap:10px;align-items:center;
}
.hero-events .he-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--terracotta)}

#events-carousel{position:relative;outline:none}

/* the 3D stage */
.ec-rail{
  position:relative;
  min-height:340px; /* fallback — JS sets exact height from card size */
  perspective:1400px;
  cursor:grab;
  touch-action:pan-y; /* keep vertical page scroll alive on touch */
  user-select:none;-webkit-user-select:none;
}
.ec-rail.dragging{cursor:grabbing}

/* cards — JS drives transform/opacity/filter every frame */
.ec-card{
  position:absolute;top:50%;left:50%;
  /* 4:5 — Instagram/LinkedIn portrait standard (1080x1350). Flyers are
     generated at this exact ratio so the same asset works on socials.
     SIZE BY WIDTH, derive height from the ratio: the card stays locked to 4:5
     at EVERY viewport, so the flyer image can never crop. The width is the
     smaller of 92% of the rail and the vertical budget (56vh) mapped through
     the ratio — so on short/skinny screens the flyer SHRINKS, never crops. */
  width:clamp(190px, min(92%, calc(min(56vh, 520px) * 0.8)), 416px);
  height:auto;
  aspect-ratio:4/5;
  border-radius:16px;overflow:hidden;
  background:var(--paper-2);
  box-shadow:0 24px 48px -18px rgba(26,24,22,.45),0 4px 14px rgba(26,24,22,.15);
  border-top:1px solid rgba(255,255,255,.35);
  will-change:transform,opacity,filter;
  transform-style:preserve-3d;
}
/* hover pop happens on the WHOLE card, tweened in JS (events-carousel.js)
   — it lifts, grows, tilts and jumps to the front layer */
.ec-card{cursor:pointer}

/* live Book-now overlay — sits in the flyer's protected corner */
.ec-book{
  position:absolute;right:5.5%;bottom:4%;z-index:4;
  background:var(--ink);color:var(--cream);
  padding:clamp(8px,1vw,12px) clamp(14px,1.6vw,22px);border-radius:999px;
  font:600 clamp(9px,.8vw,12px)/1 "Inter";letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;
  transition:background .2s,transform .25s cubic-bezier(.16,1,.3,1);
}
.ec-book:hover{background:var(--terracotta);transform:translateY(-2px)}

/* past events — clearly done: muted, dimmed, not clickable, no book overlay */
.ec-card.is-past{cursor:default}
.ec-card.is-past .ec-img{filter:saturate(.4) brightness(.82)}
.ec-card.is-past::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,18,16,.18) 0%,rgba(20,18,16,.32) 100%);
}
/* the PAST chip reads as a state, not a category — sits top-LEFT */
.ec-card.is-past .ec-tag{
  left:12px;right:auto;
  background:rgba(20,18,16,.62);
  letter-spacing:.26em;
}


/* flyers are generated at the card's exact 4:5 ratio — straight cover */
.ec-card .ec-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:1;
  pointer-events:none;
}
/* lighting layers, like the FocusRail reference */
.ec-card::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,transparent 38%);
}
.ec-tag{
  position:absolute;top:12px;right:12px;z-index:3;
  background:rgba(20,18,16,.82);color:#fff;padding:5px 10px;border-radius:999px;
  font:500 9px/1 "Inter";letter-spacing:.22em;text-transform:uppercase;
}

/* low-key side arrows — barely-there until you need them */
.ec-side{
  position:absolute;top:50%;transform:translateY(-50%);z-index:120;
  width:44px;height:64px;border:0;background:transparent;
  color:var(--ink-soft);opacity:.28;font-size:30px;line-height:1;
  cursor:pointer;display:grid;place-items:center;
  transition:opacity .25s,transform .25s cubic-bezier(.16,1,.3,1);
  padding:0;
}
.ec-side-prev{left:-10px}
.ec-side-next{right:-10px}
.ec-side:hover{opacity:.85}
.ec-side-prev:hover{transform:translateY(-50%) translateX(-2px)}
.ec-side-next:hover{transform:translateY(-50%) translateX(2px)}
.ec-side:disabled{opacity:.08;cursor:default;transform:translateY(-50%);animation:none}
/* idle: the arrows flash softly every few seconds, staggered, to hint
   the rail moves. The hint rests while you're already interacting. */
.ec-side-prev{animation:ec-side-hint-l 7s ease-in-out 2s infinite}
.ec-side-next{animation:ec-side-hint-r 7s ease-in-out 5.5s infinite}
#events-carousel:hover .ec-side{animation:none}
@keyframes ec-side-hint-l{
  0%,88%,100%{opacity:.28;transform:translateY(-50%) translateX(0)}
  92%{opacity:.75;transform:translateY(-50%) translateX(-4px)}
  96%{opacity:.4;transform:translateY(-50%) translateX(0)}
}
@keyframes ec-side-hint-r{
  0%,88%,100%{opacity:.28;transform:translateY(-50%) translateX(0)}
  92%{opacity:.75;transform:translateY(-50%) translateX(4px)}
  96%{opacity:.4;transform:translateY(-50%) translateX(0)}
}

/* drag cue — a floaty whispered suggestion that trails the cursor.
   No chrome: italic serif word with chevrons that breathe outward,
   the whole thing gently bobbing. */
.ec-cue{
  position:absolute;z-index:130;pointer-events:none;
  display:flex;align-items:center;gap:9px;
  transform:translate(-50%,-180%);
  font:italic 400 17px/1 "Fraunces";color:var(--ink);
  letter-spacing:.02em;white-space:nowrap;
  text-shadow:0 0 10px rgba(246,241,230,.95),0 0 26px rgba(246,241,230,.85),0 1px 3px rgba(246,241,230,.9);
  opacity:0;transition:opacity .45s cubic-bezier(.16,1,.3,1);
  animation:ec-cue-bob 2.6s ease-in-out infinite;
}
.ec-cue.show{opacity:.92}
.ec-cue .ch{
  font-style:normal;font-family:"Inter";font-size:13px;color:var(--ink-soft);
  transition:opacity .3s;
}
.ec-cue .ch.l{animation:ec-cue-l 1.5s ease-in-out infinite}
.ec-cue .ch.r{animation:ec-cue-r 1.5s ease-in-out infinite}
@keyframes ec-cue-bob{0%,100%{margin-top:0}50%{margin-top:-4px}}
@keyframes ec-cue-l{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(-5px);opacity:1}}
@keyframes ec-cue-r{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(5px);opacity:1}}

/* ── event detail modal ── */
.ecm-overlay{
  position:fixed;inset:0;z-index:9600;
  display:grid;place-items:center;padding:24px;
  background:rgba(26,24,22,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .32s cubic-bezier(.16,1,.3,1);
}
.ecm-overlay.open{opacity:1}
.ecm-panel{
  position:relative;
  display:grid;grid-template-columns:minmax(280px,440px) 1fr;
  width:min(880px,94vw);max-height:90vh;
  background:var(--cream);border-radius:18px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.5);
  transform:translateY(18px) scale(.97);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.ecm-overlay.open .ecm-panel{transform:translateY(0) scale(1)}
.ecm-photo{background:var(--paper-2);min-height:0}
.ecm-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ecm-body{
  padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:14px;
  justify-content:center;min-width:0;
}
.ecm-tag{
  align-self:flex-start;
  background:rgba(20,18,16,.85);color:#fff;padding:6px 12px;border-radius:999px;
  font:500 10px/1 "Inter";letter-spacing:.22em;text-transform:uppercase;
}
.ecm-title{
  font:400 italic clamp(26px,2.6vw,38px)/1.1 "Fraunces";letter-spacing:-.015em;
  margin:0;color:var(--ink);
}
.ecm-when{font:500 12px/1.4 "Inter";letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta-2)}
.ecm-loc{font:500 11px/1.4 "Inter";letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
.ecm-brand{
  font:600 10px/1.4 "Inter";letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);
  padding-top:10px;border-top:1px solid var(--rule);
}
.ecm-book{align-self:flex-start;margin-top:8px}
.ecm-close{
  position:absolute;top:14px;right:14px;
  width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(246,241,230,.92);color:var(--ink);
  font-size:22px;line-height:1;display:grid;place-items:center;
  transition:.2s;
}
.ecm-close:hover{background:var(--ink);color:#fff}
@media (max-width:700px){
  .ecm-panel{grid-template-columns:1fr;overflow-y:auto}
  .ecm-photo{aspect-ratio:4/5;max-height:48vh}
}

/* studios popup styles moved to assets/css/studios-popup.css (shared with index) */

/* ── ClassPass scaffold ── */
.classpass-block{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;
  background:var(--paper);border:1px solid var(--rule);border-radius:10px;
  font:500 11px/1.3 "Inter";letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  margin-top:18px;
}
.classpass-block a{
  margin-left:auto;
  padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--paper);
  font:500 11px/1 "Inter";letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;border:0;cursor:pointer;transition:.2s;white-space:nowrap;
}
.classpass-block a:hover{background:var(--terracotta)}

/* ── teacher one-on-one button ── */
.t-book-private{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:6px;
  padding:7px 13px;border-radius:999px;
  background:transparent;border:1px solid var(--rule);color:var(--ink-soft);
  font:500 10px/1 "Inter";letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;transition:.2s;white-space:nowrap;
}
.t-book-private:hover{background:var(--terracotta);border-color:var(--terracotta);color:#fff}
/* in the modal footer */
.t-modal-foot .t-modal-private{
  text-decoration:none;
}

/* ── teacher cross-location schedule label ── */
.tm-loc-label{
  display:inline-block;
  margin-left:6px;
  padding:2px 7px;border-radius:3px;
  background:var(--paper-2);
  font:500 9px/1 "Inter";letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);
  vertical-align:middle;
}

/* ── schedule paging arrows ── */
.s3-pager{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  border-top:1px solid var(--rule-2);
  background:var(--paper);
}
.s3-pager-btn{
  width:32px;height:32px;border-radius:50%;
  background:transparent;border:1px solid var(--rule);
  display:grid;place-items:center;cursor:pointer;
  font-size:14px;color:var(--ink-soft);transition:.2s;
}
.s3-pager-btn:hover:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink)}
.s3-pager-btn:disabled{opacity:.35;cursor:default}
.s3-pager-label{
  font:500 11px/1 "Inter";letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);
  flex:1;text-align:center;
}
.s3-pager-today{
  width:auto;border-radius:999px;padding:0 14px;height:32px;
  font:500 10px/1 "Inter";letter-spacing:.18em;text-transform:uppercase;
}
.s3-pager-cal{display:grid;place-items:center}
.s3-pager-cal.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* calendar day-picker popover */
.s3cal-pop{
  z-index:9000;width:280px;background:transparent;border:1px solid var(--rule);
  border-radius:14px;box-shadow:0 24px 60px -20px rgba(26,24,22,.4);padding:14px;
}
.s3cal-pop.sheet{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,320px)}
.s3cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.s3cal-ttl{font:500 13px/1 "Inter";color:var(--ink)}
.s3cal-nav{width:28px;height:28px;border-radius:50%;border:1px solid var(--rule);background:transparent;cursor:pointer;color:var(--ink-soft);font-size:15px;display:grid;place-items:center}
.s3cal-nav:hover:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink)}
.s3cal-nav:disabled{opacity:.3;cursor:default}
.s3cal-dows{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.s3cal-dows span{text-align:center;font:600 9px/1 "Inter";letter-spacing:.06em;color:var(--ink-mute);padding:4px 0}
.s3cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.s3cal-day{aspect-ratio:1;border:0;background:transparent;border-radius:8px;cursor:pointer;font:500 12px/1 "Inter";color:var(--ink);display:grid;place-items:center}
.s3cal-day:hover:not(:disabled){background:var(--paper-2)}
.s3cal-day.past{opacity:.3;cursor:default}
.s3cal-day.today{box-shadow:inset 0 0 0 1px var(--terracotta);color:var(--terracotta)}
.s3cal-day.sel{background:var(--ink);color:#fff}

/* schedule scroll area: scrollable but the scrollbar stays invisible —
   prev/today/next paging is the visible navigation */
.s3-grid{scrollbar-width:none;-ms-overflow-style:none}
.s3-grid::-webkit-scrollbar{display:none;width:0;height:0}

/* teacher paging — prev / page-count / next, in the rail header, stacked
   under the Recent / A–Z toggle (top-right) */
.teach-rail .rail-head{align-items:flex-start}
.rail-actions{display:flex;flex-direction:column;align-items:flex-end;gap:9px;flex-shrink:0}
.teach-pager{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
}
.teach-pager .tp-btn{
  width:28px;height:28px;border-radius:50%;
  background:transparent;border:1px solid var(--rule);
  display:grid;place-items:center;cursor:pointer;
  font-size:12px;color:var(--ink-soft);transition:.2s;
}
.teach-pager .tp-btn:hover:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink)}
.teach-pager .tp-btn:disabled{opacity:.3;cursor:default}
.teach-pager .tp-label{
  font:500 10px/1 "Inter";letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);
  min-width:40px;text-align:center;
}

/* skinnier than the roomy desktop two-column combo: stack so the live
   3-day schedule keeps full width (third day never clipped by the teacher
   rail) and the teachers sit full-width below it */
@media (max-width:1100px){
  .sched-combo{grid-template-columns:1fr;gap:20px}
}

/* teachers are an events-style coverflow on EVERY viewport — one card
   centered, neighbours peeking + blurred, drag to advance. The card keeps
   its real aspect and shrinks with the column; it is never cropped (the JS
   sizes the stage to the card). */
.teach-coverflow{
  display:block;position:relative;overflow:visible;
  perspective:1300px;padding:0;margin:0;min-height:0;
  touch-action:pan-y;cursor:grab;
  -webkit-user-select:none;user-select:none;
}
.teach-coverflow .cf-card,
.teach-coverflow .teach-card{-webkit-user-select:none;user-select:none}
.teach-coverflow:active{cursor:grabbing}
/* no entry animation: cards snap into place on first paint, transition only
   kicks in for drag / advance afterwards */
.teach-coverflow.cf-initing .teach-card,
.teach-coverflow.cf-initing .cf-card{transition:none !important}
/* while actively dragging: no transition so the cards track the pointer 1:1
   (the transition is what made the drag feel laggy / jittery). The release snap
   re-enables it. */
.teach-coverflow.cf-dragging .teach-card,
.teach-coverflow.cf-dragging .cf-card{transition:none !important}
.teach-coverflow .teach-card{
  position:absolute;top:50%;left:50%;margin:0;
  width:clamp(220px, 80%, 300px);
  transform-origin:center center;backface-visibility:hidden;will-change:transform,filter;
  box-shadow:0 26px 60px -28px rgba(28,26,23,.6);
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .55s ease,filter .55s ease;
}
.teach-coverflow .tc-side{
  position:absolute;top:50%;transform:translateY(-50%);z-index:600;
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.86);border:1px solid var(--rule);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  color:var(--ink);font-size:21px;line-height:1;
  display:grid;place-items:center;box-shadow:0 6px 16px -8px rgba(26,24,22,.4);
  transition:background .2s,color .2s;
}
.teach-coverflow .tc-side:hover:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink)}
.teach-coverflow .tc-prev{left:2px}
.teach-coverflow .tc-next{right:2px}
.teach-coverflow .tc-side:disabled{opacity:.22;cursor:default}

/* generic coverflow card (the "How to prepare" flyer cards use this so they
   ride the exact same engine as the teacher carousel) */
.teach-coverflow .cf-card{
  position:absolute;top:50%;left:50%;margin:0;
  width:clamp(240px, 86%, 340px);
  transform-origin:center center;backface-visibility:hidden;will-change:transform,filter;
  box-shadow:0 26px 60px -28px rgba(28,26,23,.6);
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .55s ease,filter .55s ease;
}
/* uniform flyer size — every prep card the same height, copy TOP-aligned so the
   header sits in the same place on every card */
.teach-coverflow .visit-card.cf-card{height:clamp(330px,42vh,380px);justify-content:flex-start;gap:15px}

/* right column stacks: teacher carousel on top, "How to prepare" under it —
   kept compact, minimal vertical whitespace */
.teach-rail{display:flex;flex-direction:column;gap:10px}
.teach-rail .rail-head{padding:0 2px 6px}
#visiting.in-rail{margin:0;padding:0;width:100%}
#visiting.in-rail .section-head{margin:0 0 0}
#visiting.in-rail .section-head h2{font:400 italic clamp(22px,2vw,26px)/1 "Fraunces";letter-spacing:-.015em;margin:0;color:var(--ink)}
#visiting.in-rail .section-head h2 small{display:none}
#visiting.in-rail .section-head .meta{display:none}
/* keep the prep flyer cards inside the narrow column */
#visiting.in-rail .prep-carousel .visit-card{width:min(86%,360px)}

/* ---- responsive ---- */
/* iPad and up: keep the hero two-column — copy beside the events rail,
   both flexing to the space they have */
@media (min-width:768px) and (max-width:1100px){
  .hero{grid-template-columns:1fr 1fr;gap:28px;align-items:center}
  .hero h1{font-size:clamp(44px,6vw,72px)}
  .ec-card{width:clamp(200px,58%,330px)}
}
@media (max-width:767px){
  .hero{grid-template-columns:1fr;gap:32px;min-height:auto}
  /* compact pills that wrap, not full-width stacked blocks */
  .hero-actions{flex-direction:row;flex-wrap:wrap;width:auto;gap:7px}
  .hero-actions .pill{width:auto;padding:9px 14px;font-size:10px;letter-spacing:.14em}
  .ec-rail{min-height:300px}
  .ec-card{width:clamp(230px,62%,380px)}
  .body-wrap{grid-template-columns:1fr;gap:0}
  .sidenav{display:none}
  .sched-combo{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .event-grid,.visit-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr 1fr}
  .foot-wrap{grid-template-columns:1fr 1fr}
  .t-modal-card{grid-template-columns:1fr;max-height:88vh;overflow-y:auto}
  .t-modal-photo{min-height:280px;aspect-ratio:3/2}
  .t-modal-body{padding:28px 24px}
}
@media (max-width:700px){
  /* nav links + Book now flex-shrink and stay visible at every width — the
     header-3 port (nav.css/nav.js) replaced the hamburger, so no hide here. */
  .section-menu{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .section-head .meta{text-align:left}
  .s3-grid{grid-template-columns:1fr}
  .s3-day{border-left:0;border-top:1px solid var(--rule-2)}
  .s3-day:first-child{border-top:0}
}

/* ===========================================================
   Preview-mode banner — appears when a Preview flag is on
   (set from the upgrade menu on /case-study). Lets the visitor
   exit preview from any page.
   =========================================================== */
.cgp-preview-banner{
  position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:9998;
  display:flex;align-items:center;gap:14px;
  padding:10px 12px 10px 16px;border-radius:999px;
  background:rgba(26,24,22,.92);color:var(--paper);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 14px 36px -12px rgba(26,24,22,.5);
  font:400 13px/1.3 "Inter",system-ui,sans-serif;
  max-width:calc(100vw - 28px);
}
.cgp-preview-banner .cpb-dot{
  width:8px;height:8px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px rgba(212,168,95,.2);
  animation:cpb-pulse 1.8s ease-in-out infinite;
}
@keyframes cpb-pulse{50%{box-shadow:0 0 0 8px rgba(212,168,95,.05)}}
.cgp-preview-banner .cpb-lbl{
  font:500 12px/1.3 "Inter";letter-spacing:.04em;color:rgba(246,241,230,.95);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cgp-preview-banner .cpb-exit{
  appearance:none;border:0;background:rgba(246,241,230,.15);color:var(--paper);
  font:500 10px/1 "Inter";letter-spacing:.18em;text-transform:uppercase;
  padding:8px 12px;border-radius:999px;cursor:pointer;
}
.cgp-preview-banner .cpb-exit:hover{background:rgba(246,241,230,.28)}
@media (max-width:520px){
  .cgp-preview-banner{flex-direction:column;border-radius:14px;padding:12px 16px;gap:8px;text-align:center}
  .cgp-preview-banner .cpb-lbl{white-space:normal}
}

/* === GLASS SURFACES — all formerly-white cards/buttons match the schedule:
   transparent fill, glossy light border, soft drop + inset highlight === */
.price-card, .teach-card, .rel-card, .t-modal-card, .s3cal-pop, .event-card,
.s3-pager-btn, .s3-pager-cal, .s3cal-nav, .teach-pager .tp-btn,
.teach-coverflow .tc-side{
  background:transparent;
  border-color:rgba(255,255,255,.5);
  box-shadow:0 10px 30px -20px rgba(26,24,22,.28), inset 0 1px 0 rgba(255,255,255,.5);
}

/* glass fill (~6%) on every glass surface */
.price-card, .teach-card, .rel-card, .t-modal-card, .s3cal-pop, .event-card,
.s3-pager-btn, .s3-pager-cal, .s3cal-nav, .teach-pager .tp-btn, .teach-coverflow .tc-side,
.sched-list, .s3-head, .visit-card{
  background:rgba(255,255,255,.06);
}
/* frost (backdrop-filter) ONLY on the big, static, centered surfaces.
   backdrop-filter on moving / clipped / screen-edge elements (coverflow cards,
   pricing near the edge, the prep cards that peek off-screen) flickers a black
   fade in Chrome — so those keep the fill + glossy border, no blur. */
.sched-list, .s3-head, .t-modal-card, .s3cal-pop{
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}

/* ===== MEMBER REVIEWS — slim auto-sliding strip pinned to the hero bottom,
   cards expand on hover ===== */
/* in-flow bottom row of the hero grid — the hero fills the space above it */
.reviews-wrap{
  position:relative;z-index:6;
  padding:0 0 14px;overflow:visible;align-self:end;
}
.rv-head{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px}
.rv-head .rv-stars{color:var(--terracotta);letter-spacing:2px;font-size:11px}
.rv-head .rv-title{font:500 9px/1 "Inter";letter-spacing:.26em;text-transform:uppercase;color:var(--ink-mute)}
/* headroom ABOVE the track so a hover-expanded card (and its drop-shadow) grow
   UP into the masked box instead of being clipped by it. The mask only fades
   the LEFT/RIGHT edges; vertically it's fully opaque, so the padded area renders
   the lifted card + shadow normally. */
.rv-marquee{width:100%;overflow:visible;
  /* headroom on ALL sides so a hover-expanded card AND its drop-shadow live
     inside the masked box (the mask clips to this box). Negative margins cancel
     the layout shift; pointer-events:none keeps the empty padded area from
     stealing hover/clicks from the hero above and the section below. */
  padding:160px 0 130px;margin:-160px 0 -130px;pointer-events:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.rv-track{display:flex;align-items:flex-end;gap:12px;width:max-content;padding:0 16px;
  pointer-events:auto;
  animation:rv-scroll 80s linear infinite;will-change:transform}
.reviews-wrap:hover .rv-track{animation-play-state:paused}
@keyframes rv-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* wide enough for ~2 sentences; name+stars top-left, date top-right, review
   text below. Grows to the full review on hover. */
.rv-card{
  flex:0 0 clamp(300px,30vw,420px);
  background:rgba(246,241,230,.85);
  border:1px solid rgba(255,255,255,.5);border-radius:13px;
  box-shadow:0 8px 22px -16px rgba(26,24,22,.32),inset 0 1px 0 rgba(255,255,255,.55);
  padding:11px 16px 13px;display:flex;flex-direction:column;gap:4px;
  height:108px;overflow:hidden;
  transition:height .4s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1),box-shadow .3s;
}
.rv-card:hover{
  height:210px;transform:translateY(-8px);
  box-shadow:0 22px 50px -22px rgba(26,24,22,.45),inset 0 1px 0 rgba(255,255,255,.65);
}
.rv-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.rv-id{display:flex;flex-direction:column;gap:3px;min-width:0}
.rv-name{font:600 13px/1.1 "Inter";color:var(--ink)}
.rv-card-stars{color:var(--terracotta);letter-spacing:1.5px;font-size:10px}
.rv-rt{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;text-align:right;max-width:48%}
.rv-rclass{font:500 10px/1.25 "Inter";color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.rv-date{font:400 10.5px/1.2 "Inter";letter-spacing:.03em;color:var(--ink-mute);white-space:nowrap}
.rv-quote{font:400 12.5px/1.5 "Inter";color:var(--ink-soft);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rv-card:hover .rv-quote{-webkit-line-clamp:9}
@media (prefers-reduced-motion:reduce){ .rv-track{animation:none} }

/* prep ("how to prepare") + teacher cards read as warm BEIGE, not low-opacity
   gray — higher-opacity beige fill instead of the 6% white glass fill */
.visit-card,
.teach-coverflow .teach-card{ background:#f3eee3 }

/* ===========================================================
   FOOTER LEGAL LINKS  (Privacy · Studio Policies · SMS)
   added 2026-06-22 — Tier-1 content port. Lives in the
   .foot-legal / .foot-bot fine-print bar; never a grid column.
   =========================================================== */
.foot-legal-links{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.foot-legal-links a{color:inherit;text-decoration:none;transition:color .25s}
.foot-legal-links a:hover{color:var(--gold)}
/* index.html uses footer.site .foot-bot — same treatment */
.foot-bot .foot-legal-links a:hover{color:var(--cream)}

/* ===========================================================
   LOCATION PAGE — SEO body + per-location FAQ
   added 2026-06-22 — sits inside .body-main, inherits section
   rhythm + .section-head. Momence still owns roster/schedule.
   =========================================================== */
.loc-about .about-lede{
  font:300 clamp(19px,2vw,25px)/1.55 "Fraunces";letter-spacing:-.01em;
  color:var(--ink-soft);max-width:60ch;margin:0 0 8px}
.loc-about .about-lede em{font-style:italic;color:var(--terracotta-2)}
.loc-about p{font:400 clamp(15px,1.05vw,17px)/1.7 "Inter";color:var(--ink-soft);max-width:64ch;margin:18px 0 0}
.offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:30px}
.offer-card{background:#f3eee3;border:1px solid var(--rule);border-radius:14px;padding:22px 22px 24px}
.offer-card h4{font:500 clamp(16px,1.25vw,19px)/1.2 "Fraunces";letter-spacing:-.01em;margin:0 0 8px;color:var(--ink)}
.offer-card p{font:400 14px/1.6 "Inter";color:var(--ink-mute);margin:0;max-width:none}

.loc-faq .faq-list{margin-top:26px;border-top:1px solid var(--rule)}
.loc-faq details{border-bottom:1px solid var(--rule)}
.loc-faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 4px;font:500 clamp(16px,1.3vw,19px)/1.35 "Fraunces";letter-spacing:-.01em;color:var(--ink);
  transition:color .25s}
.loc-faq summary::-webkit-details-marker{display:none}
.loc-faq summary:hover{color:var(--terracotta)}
.loc-faq summary .faq-x{flex:none;width:18px;height:18px;position:relative;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.loc-faq summary .faq-x::before,.loc-faq summary .faq-x::after{
  content:"";position:absolute;background:var(--terracotta);border-radius:2px}
.loc-faq summary .faq-x::before{top:8px;left:0;width:18px;height:2px}
.loc-faq summary .faq-x::after{top:0;left:8px;width:2px;height:18px;transition:opacity .3s}
.loc-faq details[open] summary .faq-x{transform:rotate(90deg)}
.loc-faq details[open] summary .faq-x::after{opacity:0}
.loc-faq .faq-a{padding:0 4px 22px;max-width:66ch}
.loc-faq .faq-a p{font:400 clamp(14px,1vw,16px)/1.7 "Inter";color:var(--ink-soft);margin:0 0 12px}
.loc-faq .faq-a p:last-child{margin-bottom:0}
.loc-faq .faq-a a{color:var(--terracotta);text-decoration:none}
.loc-faq .faq-a a:hover{text-decoration:underline}