:root{
  --white:#FFFFFF; --alabaster:#F5F4F0; --cream:#FCF5EC; --warm-grey:#D6D3CA;
  --ink:#0E0E0E; --muted:#6E6A62; --peach:#FFAE84; --pale-peach:#FDE0CC; --burgundy:#5A272A;
  --display:"Cormorant Garamond",Georgia,serif; --body:"Manrope",system-ui,sans-serif;
  --label:"Jost",system-ui,sans-serif; --script:"Pinyon Script",cursive; --wrap:1240px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
/* overflow-x MUST be `clip`, never `hidden`. `hidden` makes the browser compute
   overflow-y:auto, which turns  into a scroll container — and every
   position:sticky descendant then sticks to body's scrollport, which never scrolls
   (the documentElement is what scrolls). That silently killed the sticky filter bar
   AND mc-chrome's global `.a-nav{position:sticky}`. `clip` gives the same
   horizontal-overflow protection without creating a scroll box. */
body{background:var(--white);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;}
.elementor-section{padding:0 !important;}
.elementor-widget-html>.elementor-widget-container{padding:0 !important;margin:0 !important;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 44px;}
.serif{font-family:var(--display);font-weight:300;line-height:1.05;letter-spacing:.004em;}
a{color:inherit;text-decoration:none;}
.peach-rule{width:64px;height:2px;background:var(--peach);}

/* NAV */
/* mc-chrome.php forces `.a-nav{position:sticky !important}` sitewide, but the body
   overflow bug above meant it never actually stuck — so 7/29 added the separate fixed
   `.mc-sticky` peach bar as the real on-scroll nav. Now that sticky works again, leaving
   .a-nav sticky would pin an 89px cream nav *behind* the 70px peach one: two stacked
   headers. .mc-sticky wins (it's the deliberate sitewide design), so .a-nav goes static —
   which is exactly how the page already behaves today. Needs !important + later source
   order to beat mc-chrome's own !important. */
.a-nav{background:var(--cream);border-bottom:1px solid var(--warm-grey);position:static !important;z-index:20;}
.a-nav nav{display:flex;align-items:center;justify-content:space-between;height:88px;}
.a-nav .brand-lockup{display:flex;align-items:center;}
.a-nav .brand-mark{height:48px;width:auto;}
.a-nav .menu{display:flex;gap:22px;align-items:center;}
.a-nav .menu a{font-family:var(--label);text-transform:uppercase;letter-spacing:.22em;font-size:12px;color:var(--ink);transition:color .2s ease;}
.a-nav .menu a:hover{color:var(--burgundy);}
.a-nav .menu a.active{color:var(--burgundy);text-decoration:underline;text-decoration-color:var(--peach);text-decoration-thickness:2px;text-underline-offset:7px;}
.a-nav .menu .pill{background:var(--burgundy);color:#fff;padding:12px 22px;text-decoration:none;border-radius:6px;}
.a-nav .menu .pill:hover{background:#41191d;color:#fff;}

/* HERO */
.cl-hero{background:var(--cream);text-align:center;padding:74px 0 46px;position:relative;overflow:hidden;}
.cl-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;background:url(/wp-content/uploads/brand/mc-monogram-black.svg) no-repeat center 46%;background-size:min(40%,460px);}
.cl-hero .wrap{position:relative;z-index:1;}
.cl-hero .eyebrow{font-family:var(--label);text-transform:uppercase;letter-spacing:.28em;font-size:14px;font-weight:600;color:var(--burgundy);margin-bottom:18px;}
.cl-hero h1{font-family:var(--display);font-weight:300;font-size:clamp(2.6rem,5.4vw,4rem);color:var(--ink);line-height:1.02;}
.cl-hero .peach-rule{margin:22px auto 20px;}
.cl-hero p{max-width:54ch;margin:0 auto;color:#4a463f;font-size:18px;}
/* link across to the season calendar — term dates, closures, performance weeks */
.cl-hero .cal-link{margin-top:24px;}
.cl-hero .cal-link a{display:inline-block;font-family:var(--label);text-transform:uppercase;letter-spacing:.22em;font-size:11.5px;color:var(--burgundy);border-bottom:1px solid var(--peach);padding-bottom:5px;transition:color .2s ease,border-color .2s ease;}
.cl-hero .cal-link a:hover{color:var(--ink);border-color:var(--burgundy);}

/* FILTER BAR + CLASS-PACK PROMO — one sticky unit.
   Both bands travel together under the fixed .mc-sticky nav (70px, z-60). ONE wrapper,
   not two sibling stickies with different `top` values: siblings overlap on iOS Safari
   the moment their heights change (e.g. the filter labels wrapping). z-55 keeps the
   whole unit under the nav so the nav always wins if they ever meet. */
:root{--mc-navh:70px;}
.cl-stickwrap{position:sticky;top:var(--mc-navh);z-index:55;}
.cl-filters{background:var(--pale-peach);border-bottom:1px solid rgba(90,39,42,.14);}
.cl-filters .wrap{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 34px;padding-top:18px;padding-bottom:18px;}
.cl-fgroup{display:flex;flex-direction:column;align-items:flex-start;gap:9px;}
.cl-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.cl-flabel{font-family:var(--label);text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:var(--muted);}
.cl-chip{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--ink);background:transparent;border:1px solid var(--warm-grey);border-radius:40px;padding:8px 16px;cursor:pointer;transition:all .2s ease;}
.cl-chip:hover,.cl-chip:focus{background:rgba(255,255,255,.55);border-color:var(--burgundy);color:var(--burgundy);}
.cl-chip.active{background:var(--burgundy);border-color:var(--burgundy);color:#fff;}
.cl-select{font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--ink);background:#fff;border:1px solid var(--warm-grey);border-radius:40px;padding:9px 34px 9px 16px;cursor:pointer;
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235A272A' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;}
.cl-select:hover{border-color:var(--burgundy);}
.cl-reset{font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--muted);background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:3px;margin-left:auto;margin-bottom:11px;}
.cl-reset:hover{color:var(--burgundy);}

/* Class-pack promo. Sits in the slot the flexible-scheduling banner held until Robin asked for
   that banner to come out (2026-08-24), and deliberately reuses its proven geometry: a burgundy
   band under the peach filter bar on phones so the two read as separate bars, merged into one
   peach row on desktop so the sticky unit stays short.
   The CTA went straight to the Momence checkout for the 10-Class Package on 2026-08-24 (Dan). It
   pointed at #packs first, on the reasoning that there are two packs and the reader should pick;
   the strip now names ONE pack and its price, so sending that reader to a chooser was an extra
   step between a stated offer and buying it. The yoga series still has its own strip in #packs,
   and the utility-bar slide still links to /classes/#packs, so nothing loses its route.
   External link, so target=_blank + rel=noopener + an aria-label that says what it buys. */
.cl-packad{background:var(--burgundy);border-bottom:1px solid rgba(0,0,0,.18);}
/* nowrap: the copy and the Buy Now button share ONE line at every width. With flex-wrap:wrap
   the button dropped to a second line as soon as the copy got long enough (it did the moment the
   strip started naming the pack and its price), which both broke the row and grew the sticky
   unit's height. The text takes the shrink instead — hence min-width:0, without which a flex
   item refuses to shrink below its content and pushes the button out anyway. */
.cl-packad .wrap{display:flex;align-items:center;justify-content:flex-start;gap:12px 24px;padding-top:14px;padding-bottom:14px;flex-wrap:nowrap;}
/* margin:0 is load-bearing. The theme puts a bottom margin on <p>, and align-items:center
   centers the MARGIN box — so the visible text sits above the button's center line. The
   mockup's `*{margin:0}` reset loses to the theme's more specific p selector. */
/* Two stacked lines: the offer (bold) over its terms, both flush left. Costs no extra bar
   height — two lines at 1.3 come to ~40px, still inside the Buy Now button's ~43px, so the
   sticky unit measures the same as it did with a single line. text-align:left is explicit
   because the desktop rule right-ALIGNS the promo block as a whole against the page grid;
   without it the two lines would centre themselves against each other's ragged ends. */
.cl-packtext{margin:0;min-width:0;text-align:left;color:#F3DED3;font-size:15.5px;line-height:1.3;}
.cl-packtext strong,.cl-packtext span{display:block;}
.cl-packtext strong{color:#fff;font-weight:600;}
/* .cl-packcode (chip treatment for a discount code) lived here. Removed 2026-08-24: the TAKE10
   code came out of this bar the same day it went in — per Dan it does not apply to enough of the
   catalog to be advertised as a blanket offer, and a code that fails at checkout costs more trust
   than the discount buys. The strip now states the pack's own terms, which are always true. */
.cl-packcta{flex:none;font-family:var(--label);text-transform:uppercase;letter-spacing:.18em;font-size:11px;background:var(--peach);color:var(--burgundy);border:1px solid var(--peach);border-radius:6px;padding:12px 22px;cursor:pointer;transition:background .2s ease,transform .2s ease,color .2s ease;}
.cl-packcta:hover,.cl-packcta:focus{background:#FFC7A8;border-color:#FFC7A8;color:var(--burgundy);transform:translateX(2px);}
.cl-packcta:focus-visible{outline:2px solid #fff;outline-offset:2px;}
/* Anchor target for the promo. Offset clears BOTH the sticky nav and the sticky filter bar,
   which together sit on top of whatever the jump lands on. */
#packs{scroll-margin-top:calc(var(--mc-navh) + 96px);}

/* Desktop: one row — filters left, pack promo right. The filters are sized to their CONTENT
   (flex:0 0 auto + nowrap) rather than given a fixed 40% as the old banner split did; that
   fixed column is exactly what forced the two selects to stack on top of each other. The promo
   takes whatever is left and right-aligns to the page grid, so the filters keep the content's
   left edge and the CTA keeps its right. Bar height matters — it pins under the 70px nav, and
   every pixel it costs is a pixel of class cards the visitor can't see. */
@media(min-width:981px){
  .cl-stickwrap{display:flex;align-items:stretch;}
  .cl-filters{flex:0 0 auto;min-width:0;display:flex;align-items:center;}
  .cl-filters .wrap{max-width:none;margin:0;width:auto;flex-wrap:nowrap;padding:12px 28px 12px max(44px,calc((100vw - var(--wrap))/2 + 44px));}
  .cl-packad{flex:1 1 auto;min-width:0;display:flex;align-items:center;}
  .cl-packad .wrap{max-width:none;margin:0;width:100%;justify-content:flex-end;padding:10px max(44px,calc((100vw - var(--wrap))/2 + 44px)) 10px 0;}
  /* Desktop reads as ONE peach band: the promo half goes peach, its text flips burgundy to
     stand out, and the CTA + code chip invert. Phones keep the burgundy band, where the
     contrast comes from the band itself. */
  .cl-packad{background:var(--pale-peach);border-bottom:1px solid rgba(90,39,42,.14);}
  .cl-packtext{color:var(--burgundy);}
  .cl-packtext strong{color:#41191d;}
  .cl-packcta{background:var(--burgundy);border-color:var(--burgundy);color:#fff;}
  .cl-packcta:hover,.cl-packcta:focus{background:#41191d;border-color:#41191d;color:#fff;}
  .cl-packcta:focus-visible{outline:2px solid var(--burgundy);outline-offset:2px;}
}

/* SECTIONS */
.cl-sec{padding:56px 0 8px;}
.cl-sec .sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:30px;flex-wrap:wrap;}
.cl-sec .sec-head h2{font-family:var(--display);font-weight:300;font-size:clamp(1.8rem,3vw,2.4rem);color:var(--ink);}
.cl-sec .sec-head .sec-sub{color:var(--muted);font-size:15px;}
.cl-secnote{margin:-16px 0 28px;font-size:14px;color:#57534b;max-width:66ch;line-height:1.5;}
.cl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}

/* 10-CLASS PACK — offer strip under the adult drop-in grid. Momence-hosted checkout;
   price/details are hand-maintained here (the public feed has no memberships endpoint). */
/* Width/alignment mirrors the schedule rows: .mcm-sch is 820px and LEFT-aligned
   (plugin CSS zeroes its auto margins), so the pack must be too or the edges drift. */
.cl-pack{max-width:820px;margin:24px 0 0;background:var(--cream);border:1px solid var(--warm-grey);border-left:4px solid var(--burgundy);border-radius:12px;padding:24px 28px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
/* .cl-pack.pk-lead lived here: the 10-class strip led the schedule from 2026-08-15 and needed a
   bottom gap that .cl-pack (margin-bottom:0, only ever used trailing a grid) does not ship.
   Robin moved both packs BELOW the schedule on 2026-08-24, so they trail a grid again and the
   default margins are correct. Rule removed with the class. */
.cl-pack .pk-body{flex:1 1 340px;}
.cl-pack .pk-name{font-family:var(--display);font-weight:500;font-size:1.35rem;color:var(--ink);line-height:1.15;}
.cl-pack .pk-name b{color:var(--burgundy);font-weight:500;}
.cl-pack .pk-sub{margin-top:6px;font-size:14px;line-height:1.55;color:#57534b;}

/* CLASS CARD */
.cl-card{background:#fff;border:1px solid var(--warm-grey);border-radius:3px;padding:26px 26px 24px;display:flex;flex-direction:column;min-height:250px;transition:transform .2s ease,box-shadow .2s ease;}
.cl-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(90,39,42,.10);}
.cl-card .cl-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:10px;}
.cl-badge{font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--burgundy);background:var(--pale-peach);padding:5px 11px;border-radius:40px;white-space:nowrap;}
.cl-spots{font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:10px;color:#3f7a4f;display:flex;align-items:center;gap:6px;white-space:nowrap;}
.cl-spots .dot{width:6px;height:6px;border-radius:50%;background:#3f7a4f;}
.cl-spots.low{color:#9a5a12;} .cl-spots.low .dot{background:#c07f1e;}
.cl-spots.full{color:#6E6A62;} .cl-spots.full .dot{background:#9a3b3b;}
.cl-spots.info{color:var(--muted);} .cl-spots.info .dot{background:var(--peach);}
.cl-name{font-family:var(--display);font-weight:500;font-size:1.42rem;color:var(--ink);line-height:1.1;margin-bottom:6px;}
.cl-sched{font-size:13.5px;color:#57534b;margin-bottom:14px;}
.cl-cardesc{font-size:14px;line-height:1.55;color:#57534b;margin-bottom:18px;flex-grow:1;}
.cl-teacher{display:flex;align-items:center;gap:9px;margin-top:auto;margin-bottom:18px;}
.cl-teacher img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;}
.cl-teacher .mono{width:34px;height:34px;border-radius:50%;background:var(--pale-peach);display:flex;align-items:center;justify-content:center;flex:none;}
.cl-teacher .mono img{width:20px;height:20px;border-radius:0;opacity:.55;}
.cl-teacher span{font-family:var(--display);font-weight:500;font-size:14px;color:#3a352f;}
.cl-enroll{align-self:flex-start;font-family:var(--label);text-transform:uppercase;letter-spacing:.2em;font-size:11px;background:var(--burgundy);color:#fff;padding:12px 22px;border-radius:6px;transition:background .2s ease,transform .2s ease;}
.cl-enroll:hover{background:#41191d;color:#fff;transform:translateX(2px);}
.cl-enroll.ghost{background:transparent;color:var(--burgundy);border:1px solid var(--burgundy);}
.cl-enroll.ghost:hover{background:var(--burgundy);color:#fff;}

.cl-noresults{display:none;text-align:center;padding:70px 0;color:var(--muted);font-family:var(--display);font-style:italic;font-size:1.4rem;}
.cl-sec.empty{display:none;}

/* footer */
footer{position:relative;overflow:hidden;background:var(--burgundy);color:#e4cfc4;padding:60px 0 40px;margin-top:60px;}
.foot-mono{position:absolute;top:50%;right:-4%;transform:translateY(-50%);width:min(46%,560px);pointer-events:none;z-index:0;opacity:.07;}
.foot-mono img{width:100%;filter:invert(1);}
footer .wrap{position:relative;z-index:1;}
footer .top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;}
footer .fbrand{font-family:var(--display);font-size:22px;letter-spacing:.18em;text-transform:uppercase;color:#fff;}
footer .fbrand small{display:block;font-family:var(--label);font-size:9px;letter-spacing:.36em;color:#c9a99b;margin-top:4px;}
footer .fmenu{display:flex;gap:32px;flex-wrap:wrap;}
footer .fmenu a{font-family:var(--label);text-transform:uppercase;letter-spacing:.22em;font-size:11px;color:#e4cfc4;}
footer .fmenu a:hover{color:var(--peach);}
footer .rule{height:1px;background:rgba(255,174,132,.25);margin:38px 0 18px;}
footer .fine{font-family:var(--label);text-transform:uppercase;letter-spacing:.22em;font-size:10px;color:#b58f80;}

@media(max-width:980px){ .cl-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .cl-grid{grid-template-columns:1fr;} .wrap{padding:0 24px;} .a-nav .menu a:not(.pill){display:none;} .cl-reset{margin-left:0;} }

/* Phones: the sticky unit sits under a 70px nav, so every pixel it costs is a pixel of
   classes the visitor can't see. Drop the "Age"/"Class Type" labels (the <select>s say
   "Any Age"/"All Types" already), put the two selects on one row, and collapse the pack
   promo to a single line. */
@media(max-width:640px){
  .cl-filters .wrap{gap:8px;padding-top:10px;padding-bottom:10px;}
  .cl-fgroup{flex:1 1 0;min-width:0;gap:0;}
  .cl-flabel{display:none;}
  .cl-controls,.cl-select{width:100%;}
  .cl-select{padding:9px 30px 9px 13px;font-size:10.5px;letter-spacing:.06em;}
  .cl-packad .wrap{gap:10px 14px;padding-top:10px;padding-bottom:10px;}
  .cl-packtext{font-size:13px;line-height:1.35;}
  /* Bolder on phones: at 10px uppercase the button competes with the copy for attention,
     and the copy was winning. 600 is a real loaded Jost weight, not a synthesised faux-bold. */
  .cl-packcta{padding:10px 14px;font-size:10px;letter-spacing:.1em;font-weight:600;}
}
/* Very narrow: trim the promo rather than let the button clip. */
@media(max-width:400px){
  .cl-packtext{font-size:12px;}
  .cl-packcta{padding:10px 12px;letter-spacing:.06em;}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto;}}
/* ===== 8pt-grid section rhythm — standardized site-wide ===== */
:root{--section-y:80px;}
@media(max-width:980px){:root{--section-y:64px;}}
@media(max-width:767px){:root{--section-y:48px;}}
.cl-sec{padding:var(--section-y) 0;}
/* ============================================================================
   mc-classes components
   Everything above this line is the /classes/ design system as it already
   existed, extracted from the page it used to live inside. Below are only the
   components the sign-up-type redesign introduces. Same tokens, same scale —
   a reader should not be able to find the seam.
   ============================================================================ */

:root{
  /* RADII — specs/2026-06-30-design-tokens.md s5, "sharp / editorial".
     0 is the DEFAULT, 4px is the MAX and spent sparingly, a pill only where
     something is genuinely pill-shaped. There is no stadium radius in this
     brand; a 40px button is a soft app idiom and reads as another product.
     50% remains legal for a true circle (avatar, status dot). */
  --radius-none:0;
  --radius-sm:2px;
  --radius-md:4px;
  --radius-pill:999px;
  --hairline:#EFEDE7;
}

/* ---- Shared button ------------------------------------------------------- */
.mcc-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 20px; border:1px solid var(--burgundy);
  border-radius:var(--radius-md);
  background:var(--burgundy); color:#fff; text-decoration:none; cursor:pointer;
  font-family:var(--label); font-size:11px; text-transform:uppercase; letter-spacing:.16em;
  white-space:nowrap; transition:background .2s ease;
}
.mcc-btn:hover{background:#41191d; color:#fff;}
.mcc-btn.ghost{background:transparent; color:var(--burgundy);}
.mcc-btn.ghost:hover{background:var(--burgundy); color:#fff;}
.mcc-btn.off{background:var(--warm-grey); border-color:var(--warm-grey); color:#4a4740;}
.mcc-btn-wide{width:100%; margin-top:20px;}
.mcc-btn-lg{margin-top:22px;}

.mcc a:focus-visible,.mcc button:focus-visible,.mcc select:focus-visible,
.mcc input:focus-visible,.mcc textarea:focus-visible{
  outline:2px solid var(--burgundy); outline-offset:3px;
}

/* ---- Tabs: the sign-up type ---------------------------------------------
   Three equal thirds. The sublabel is not decoration — "Semester" means
   nothing to a parent who has never enrolled a child in dance, and the tab is
   the only place that explanation fits without costing a click. */
.mcc-tabs{
  background:var(--pale-peach); margin:0 0 4px;
  border-top:1px solid rgba(90,39,42,.08); border-bottom:1px solid rgba(90,39,42,.08);
  position:sticky; top:0; z-index:40;
}
.mcc-tabs-inner{display:grid; grid-template-columns:repeat(3,1fr);}
.mcc-tab{
  background:none; border:0; cursor:pointer; padding:13px 8px; min-height:62px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font:inherit; color:var(--ink); border-right:1px solid rgba(90,39,42,.09);
}
.mcc-tab:last-child{border-right:0;}
.mcc-tab-l{
  font-family:var(--label); font-size:11px; text-transform:uppercase; letter-spacing:.13em;
  line-height:1.2; text-align:center;
}
.mcc-tab-s{font-size:10.5px; line-height:1.3; color:#6b6459; text-align:center; text-wrap:balance;}
.mcc-tab[aria-selected="true"]{background:var(--burgundy);}
.mcc-tab[aria-selected="true"] .mcc-tab-l{color:#fff;}
.mcc-tab[aria-selected="true"] .mcc-tab-s{color:rgba(255,255,255,.72);}

.mcc-panel[hidden]{display:none;}
.mcc-panel{padding:20px 0 34px;}
.mcc-phead{margin-bottom:14px;}
.mcc-phead h2{font-family:var(--display); font-size:1.3rem; font-weight:400; margin:0; display:inline;}
.mcc-sub{font-size:12px; color:var(--muted); margin-left:8px;}
.mcc-step{
  font-family:var(--label); text-transform:uppercase; letter-spacing:.15em; font-size:10.5px;
  color:var(--muted); margin:30px 0 14px;
}
.mcc-hint{font-size:12.5px; color:var(--muted); margin:9px 0 0; max-width:60ch;}
.mcc-note{
  font-family:var(--label); font-size:10.5px; line-height:1.6; letter-spacing:.03em;
  color:var(--muted); margin:22px 0 0; padding-top:16px; border-top:1px solid var(--hairline);
}
.mcc-stale{
  font-family:var(--label); text-transform:uppercase; letter-spacing:.12em; font-size:10.5px;
  color:#9a5a12; margin:0 0 14px;
}
.mcc-unavailable{color:var(--muted);}
.mcc-empty{padding:34px 0; text-align:center; color:var(--muted); font-size:14px;}
.mcc-tbc{font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted);}

/* ---- Day header + strip -------------------------------------------------
   The strip fills the width of whatever it is in: on a phone that is the
   device, on a desktop the content column. It is never a centred island, and
   it never scrolls sideways — a week you must swipe to see Saturday is a week
   you cannot plan against. */
.mcc-ds-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:0 0 12px;
}
.mcc-ds-date{font-family:var(--display); font-size:1.2rem; line-height:1.15;}
.mcc-ds-filter{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px;
  background:#fff; border:1px solid var(--warm-grey); border-radius:var(--radius-sm);
  cursor:pointer; color:var(--ink); white-space:nowrap;
  font-family:var(--label); font-size:10.5px; text-transform:uppercase; letter-spacing:.14em;
}
.mcc-ds-filter.on{background:var(--burgundy); border-color:var(--burgundy); color:#fff;}

.mcc-ds-strip{
  display:grid; grid-template-columns:repeat(7,1fr); width:100%;
  border-bottom:1px solid var(--warm-grey); margin-bottom:4px;
}
.mcc-ds-day-btn{
  background:none; border:0; padding:10px 0 12px; cursor:pointer; min-height:62px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  position:relative; font:inherit; color:var(--muted);
}
.mcc-ds-dow{font-family:var(--label); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;}
.mcc-ds-num{font-family:var(--label); font-size:17px; color:var(--ink);}
.mcc-ds-day-btn.on,.mcc-ds-day-btn.on .mcc-ds-num{color:var(--burgundy);}
.mcc-ds-day-btn.on::after{
  content:''; position:absolute; bottom:-1px; left:50%; transform:translateX(-50%);
  width:26px; height:2px; background:var(--burgundy);
}

/* Per-day headings exist for the no-JS case. Once JS narrows to one day the
   shared header above the strip does that job, so these come out. */
.mcc-ds-dayhead{
  font-family:var(--label); text-transform:uppercase; letter-spacing:.15em; font-size:10.5px;
  color:var(--burgundy); margin:22px 0 4px;
}
.mcc-js .mcc-ds-dayhead{display:none;}

/* ---- Class row ----------------------------------------------------------
   One grid, two shapes. Phone: avatar left, the rest stacked beside it.
   Wide: five aligned columns, so times sit under times and every Book button
   lands on the same edge. Rows are NEVER placed side by side — a day's
   schedule is one list read top to bottom. */
.mcc-rows{list-style:none; margin:0; padding:0;}
.mcc-row{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  grid-template-areas:
    "av time act"
    "av body act"
    "av cap  act";
  gap:2px 12px; align-items:start;
  padding:16px 0; border-bottom:1px solid var(--warm-grey);
}
.mcc-row[hidden]{display:none;}
.mcc-row:last-child{border-bottom:0;}
.mcc-av{grid-area:av;} .mcc-time{grid-area:time;} .mcc-body{grid-area:body;}
.mcc-cap{grid-area:cap;} .mcc-act{grid-area:act;}

/* A monogram stands in for a headshot. The platform already holds rebranded
   staff photos; the public feed does not expose them yet. When it does this
   becomes an <img> and the row gets considerably warmer. */
.mcc-av{
  width:42px; height:42px; border-radius:50%; background:var(--pale-peach);
  display:flex; align-items:center; justify-content:center; margin-top:2px;
}
.mcc-av span{font-family:var(--label); font-size:12.5px; letter-spacing:.06em; color:var(--burgundy);}

.mcc-time{font-family:var(--label); font-size:12.5px; letter-spacing:.02em; color:var(--ink);}
.mcc-body{min-width:0;}
.mcc-name{font-family:var(--display); font-size:1.18rem; font-weight:400; line-height:1.2; margin:2px 0 3px;}
.mcc-meta{font-size:12.5px; color:var(--muted); line-height:1.45;}
.mcc-rowprice{font-family:var(--label); font-size:12px; color:var(--burgundy); margin-top:4px;}
.mcc-cap{font-family:var(--label); font-size:10px; letter-spacing:.08em; color:var(--muted); padding-top:3px;}
.mcc-act{display:flex; align-items:flex-start; justify-content:flex-end;}

/* ---- Filter sheet -------------------------------------------------------
   A bottom sheet on a phone, a centred dialog once there is room. A <select>
   in a sticky bar is a poor thumb target and most of this traffic is thumbs. */
.mcc-sheet[hidden]{display:none;}
.mcc-sheet{position:fixed; inset:0; z-index:200; display:flex; align-items:flex-end;}
.mcc-sheet-scrim{position:absolute; inset:0; background:rgba(14,14,14,.42);}
.mcc-sheet-panel{
  position:relative; width:100%; background:var(--cream);
  border-radius:var(--radius-sm) var(--radius-sm) 0 0; padding:20px 18px 24px;
  max-height:82vh; overflow-y:auto;
}
.mcc-sheet-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.mcc-sheet-top h3{font-family:var(--display); font-size:1.24rem; font-weight:400; margin:0;}
.mcc-sheet-x{
  background:none; border:0; font-size:26px; line-height:1; color:var(--muted);
  cursor:pointer; min-width:44px; min-height:44px;
}
.mcc-sheet-label{
  font-family:var(--label); font-size:10px; text-transform:uppercase; letter-spacing:.16em;
  color:var(--muted); margin:0 0 12px;
}
.mcc-sheet-opts{display:flex; flex-wrap:wrap; gap:9px;}
.mcc-sheet-opt{
  min-height:44px; padding:0 16px; border-radius:var(--radius-sm); cursor:pointer;
  background:#fff; border:1px solid var(--warm-grey); color:var(--ink);
  font-family:var(--label); font-size:12px; letter-spacing:.05em;
}
.mcc-sheet-opt.on{background:var(--burgundy); border-color:var(--burgundy); color:#fff;}

/* ---- Semester programs --------------------------------------------------
   One program, many day options. "Fairytale Ballet" is read once — ages 3-4,
   $320, Fall 2026 — then the parent picks a day underneath. No box: a header
   with a rule groups just as clearly at a fraction of the height. */
.mcc-band{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:34px 0 18px;}
.mcc-band:first-of-type{margin-top:6px;}
.mcc-bandname{font-family:var(--display); font-size:1.36rem; font-weight:400; margin:0;}
.mcc-bandsub{
  font-family:var(--label); font-size:10.5px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted);
}

.mcc-pg{margin:0 0 28px;}
.mcc-pg[hidden]{display:none;}
.mcc-pg-head{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"title price" "facts price";
  gap:3px 14px; align-items:start;
  padding-bottom:10px; border-bottom:1px solid var(--warm-grey);
}
.mcc-pg-title{grid-area:title; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;}
.mcc-pg-facts{grid-area:facts; font-size:12.5px; color:var(--muted);}
.mcc-pg-price{
  grid-area:price; text-align:right; white-space:nowrap;
  font-family:var(--label); font-size:15px; color:var(--burgundy);
}
.mcc-pg-name{font-family:var(--display); font-size:1.26rem; font-weight:400; line-height:1.2; margin:0;}
.mcc-gate{
  font-family:var(--label); font-size:9px; text-transform:uppercase; letter-spacing:.15em;
  color:var(--burgundy); background:var(--pale-peach); padding:4px 9px;
  border-radius:var(--radius-sm); white-space:nowrap;
}

.mcc-pg-opts{list-style:none; margin:0; padding:0;}
.mcc-pg-opt{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"day act" "meta act" "price act";
  gap:1px 14px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--hairline);
}
.mcc-pg-opt[hidden]{display:none;}
.mcc-pg-opt:last-child{border-bottom:0;}
.mcc-pg-day{grid-area:day; font-family:var(--label); font-size:12.5px; letter-spacing:.06em; color:var(--ink);}
.mcc-pg-meta{grid-area:meta; font-size:12.5px; color:var(--muted); line-height:1.45;}
.mcc-pg-optprice{grid-area:price; font-family:var(--label); font-size:13px; color:var(--burgundy);}
.mcc-pg-optprice:empty{display:none;}
.mcc-pg-act{grid-area:act; display:flex; justify-content:flex-end;}

/* ---- Private request ---------------------------------------------------- */
.mcc-pv{display:grid; grid-template-columns:1fr; gap:26px; align-items:start;}
.mcc-pv-main{min-width:0;}
.mcc-pv-explain{
  background:#fff; border:1px solid var(--warm-grey); border-radius:var(--radius-sm);
  padding:20px 22px;
}
.mcc-pv-explain b{
  font-family:var(--label); text-transform:uppercase; letter-spacing:.15em; font-size:10px;
  color:var(--burgundy); display:block; margin-bottom:9px;
}
.mcc-pv-explain p{font-size:14px; color:#57534b; margin:0 0 .7em;}
.mcc-pv-explain p:last-child{margin-bottom:0;}
.mcc-pv-reward{
  border-left:2px solid var(--peach); padding-left:13px;
  font-size:13.5px !important; color:var(--ink) !important;
}

.mcc-pv-opts{display:grid; grid-template-columns:1fr; gap:12px;}
.mcc-pv-opt{
  position:relative; display:block; background:#fff; border:1px solid var(--warm-grey);
  border-radius:var(--radius-sm); padding:16px; cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.mcc-pv-opt input{position:absolute; opacity:0; pointer-events:none;}
.mcc-pv-opt:has(input:checked){border-color:var(--burgundy); box-shadow:inset 0 0 0 1px var(--burgundy);}
.mcc-pv-optbody{display:flex; flex-direction:column; gap:5px;}
.mcc-pv-optname{font-family:var(--display); font-size:1.1rem; line-height:1.2;}
.mcc-pv-optmeta{
  font-family:var(--label); font-size:10px; text-transform:uppercase; letter-spacing:.13em;
  color:var(--muted);
}
.mcc-pv-optdesc{font-size:12.5px; color:#57534b; line-height:1.5; margin-top:3px;}

.mcc-select{
  font-family:var(--body); font-size:14px; padding:13px 15px; border:1px solid var(--warm-grey);
  background:#fff; border-radius:var(--radius-sm); color:var(--ink); width:100%; max-width:340px;
}

.mcc-pv-suggest{display:flex; flex-wrap:wrap; gap:9px;}
.mcc-hint-wide{flex:1 0 100%; max-width:none; margin-top:0;}
.mcc-chip{
  display:flex; flex-direction:column; gap:2px; align-items:flex-start;
  background:#fff; border:1px solid var(--warm-grey); border-radius:var(--radius-sm);
  padding:10px 13px; cursor:pointer; font:inherit; text-align:left; min-height:44px;
}
.mcc-chip.on{border-color:#9a5a12; background:#FFF8F0;}
.mcc-chip-day{font-family:var(--label); font-size:9.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--muted);}
.mcc-chip-time{font-family:var(--label); font-size:13px; color:var(--ink);}
.mcc-chip-why{font-size:10.5px; color:var(--muted); font-style:italic;}
.mcc-chip.on .mcc-chip-day{color:#9a5a12;}

.mcc-pv-flex{
  display:flex; gap:11px; align-items:flex-start; background:#fff;
  border:1px solid var(--warm-grey); border-radius:var(--radius-sm);
  padding:14px 16px; margin:18px 0 0; cursor:pointer; font-size:13.5px;
}
.mcc-pv-flex input{margin-top:3px; accent-color:var(--burgundy); min-width:18px; min-height:18px;}
.mcc-pv-flex em{
  color:#9a5a12; font-style:normal; font-family:var(--label);
  font-size:10.5px; text-transform:uppercase; letter-spacing:.13em; margin-left:4px;
}

.mcc-pv-win{display:flex; gap:10px; margin-top:11px; align-items:center;}
.mcc-pv-win select{
  font-family:var(--body); font-size:13.5px; padding:11px 12px; border:1px solid var(--warm-grey);
  background:#fff; border-radius:var(--radius-sm); flex:1; min-width:0; color:var(--ink);
}
.mcc-pv-rm{
  background:none; border:1px solid var(--warm-grey); border-radius:var(--radius-sm);
  width:44px; height:44px; cursor:pointer; color:var(--muted); font-size:17px; flex:0 0 auto;
}
.mcc-pv-add{
  background:none; border:0; padding:0; margin-top:14px; cursor:pointer; min-height:44px;
  font-family:var(--label); font-size:11px; text-transform:uppercase; letter-spacing:.15em;
  color:var(--burgundy); text-decoration:underline; text-underline-offset:3px;
}

.mcc-pv-fields{display:grid; grid-template-columns:1fr; gap:13px;}
.mcc-pv-fields label,.mcc-pv-notes{
  display:flex; flex-direction:column; gap:6px;
  font-family:var(--label); font-size:10.5px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted);
}
.mcc-pv-notes{margin-top:13px;}
.mcc-pv-fields input,.mcc-pv-notes textarea{
  font-family:var(--body); font-size:14px; padding:12px 13px; border:1px solid var(--warm-grey);
  background:#fff; border-radius:var(--radius-sm); color:var(--ink); resize:vertical;
}

.mcc-pv-side{
  background:#fff; border:1px solid var(--warm-grey); border-radius:var(--radius-sm); padding:20px;
}
.mcc-pv-sidetitle{font-family:var(--display); font-size:1.15rem; font-weight:400; margin:0 0 14px;}
.mcc-pv-dl{display:grid; grid-template-columns:auto 1fr; gap:7px 14px; margin:0 0 16px; font-size:13px;}
.mcc-pv-dl dt{
  font-family:var(--label); font-size:9.5px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted); padding-top:3px;
}
.mcc-pv-dl dd{margin:0;}
.mcc-pv-sidelabel{
  font-family:var(--label); font-size:9.5px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted); margin:0 0 8px; padding-top:14px; border-top:1px solid var(--hairline);
}
.mcc-pv-sidelist{list-style:none; margin:0; padding:0; font-size:13px;}
.mcc-pv-sidelist li{padding:7px 0; border-bottom:1px solid var(--hairline);}
.mcc-pv-sidelist li:last-child{border-bottom:0;}
.mcc-pv-sidefoot{
  margin-top:15px; padding-top:14px; border-top:1px solid var(--hairline);
  font-family:var(--label); font-size:10.5px; letter-spacing:.06em;
}
.mcc-fast{color:#3f7a4f;}
.mcc-slow{color:var(--muted);}

/* ============================================================================
   ENHANCE UPWARD. Every rule above is the phone rule; these only add room.
   ~90% of this site's visitors are on a phone, so that is the base case, not
   a fallback.
   ============================================================================ */
@media(min-width:560px){
  .mcc-tab{min-height:70px; padding:15px 12px;}
  .mcc-tab-l,.mcc-tab-s{font-size:11.5px;}
  .mcc-ds-date{font-size:1.5rem;}
  .mcc-row{grid-template-columns:52px minmax(0,1fr) auto; gap:2px 16px; padding:18px 0;}
  .mcc-av{width:52px; height:52px;}
  .mcc-av span{font-size:14px;}
  .mcc-name{font-size:1.24rem;}
  .mcc-pv-fields{grid-template-columns:repeat(2,1fr);}
  .mcc-pv-opts{grid-template-columns:repeat(3,1fr);}
  .mcc-phead h2{font-size:1.8rem;}
  .mcc-sub{font-size:13px;}
}

@media(min-width:900px){
  /* Five aligned columns. Times under times, capacity under capacity, and every
     Book button on one right edge, so the eye can run down any single column.
     Content squashed left with a button stranded at the far margin is what
     makes a wide list unreadable. */
  .mcc-row{
    grid-template-columns:56px 168px minmax(0,1fr) 132px auto;
    grid-template-areas:"av time body cap act";
    align-items:center; gap:0 20px;
  }
  .mcc-time{font-size:13.5px;}
  .mcc-cap{text-align:right; padding-top:0;}
  .mcc-act{align-items:center;}

  .mcc-pg-opt{
    grid-template-columns:190px minmax(0,1fr) 96px 128px;
    grid-template-areas:"day meta price act";
  }
  .mcc-pg-optprice{text-align:right;}
  .mcc-pg-name{font-size:1.4rem;}
  .mcc-pg{margin-bottom:36px;}

  .mcc-pv{grid-template-columns:minmax(0,1fr) 320px; gap:44px;}
  .mcc-pv-side{position:sticky; top:96px;}

  .mcc-sheet{align-items:center; justify-content:center;}
  .mcc-sheet-panel{max-width:460px; border-radius:var(--radius-sm); padding:24px;}

  .mcc-tabs-inner{max-width:720px; margin:0 auto;}
  .mcc-btn-lg{min-height:50px; padding:0 30px;}
}

@media(prefers-reduced-motion:reduce){
  .mcc *{transition:none !important; animation:none !important;}
}

/* ---- Class packs + the direct-booking fallback -------------------------- */
.mcc-packs{display:grid; grid-template-columns:1fr; gap:14px; margin-top:30px;}
.mcc-pack{
  display:grid; grid-template-columns:1fr; gap:12px; align-items:start;
  background:var(--cream); border:1px solid var(--warm-grey);
  border-left:3px solid var(--peach); border-radius:var(--radius-sm); padding:18px 20px;
}
.mcc-pack-badge{
  font-family:var(--label); font-size:9px; text-transform:uppercase; letter-spacing:.16em;
  color:var(--burgundy); background:var(--pale-peach); padding:4px 9px;
  border-radius:var(--radius-sm); justify-self:start;
}
.mcc-pack-name{font-family:var(--display); font-size:1.16rem; line-height:1.25;}
.mcc-pack-name b{font-weight:500;}
.mcc-pack-sub{font-size:13px; color:#57534b; line-height:1.5; margin:5px 0 0;}
.mcc-pv-direct{
  margin-top:34px; padding-top:22px; border-top:1px solid var(--warm-grey);
}
.mcc-pv-directlabel{
  font-family:var(--label); font-size:10.5px; text-transform:uppercase; letter-spacing:.15em;
  color:var(--muted); margin:0 0 4px;
}
.mcc-pv-directlinks{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}

@media(min-width:760px){
  .mcc-packs{grid-template-columns:repeat(2,1fr);}
  .mcc-pack{grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center;}
  .mcc-pack-badge{justify-self:auto;}
}

/* ============================================================================
   MOBILE VERTICAL BUDGET

   Measured on staging at 387px: the first class row landed at 922px of an 841px
   screen, so a phone visitor saw NO classes without scrolling. The hero alone
   was 472px — 56% of the viewport for a headline — with 74px of top padding, a
   41.6px H1 and a 108px lede.

   Since ~90% of this site's traffic is a phone, that is the primary case and
   these are corrections, not a fallback. The lede shrinks rather than
   disappearing, so it still reaches screen readers and crawlers.
   ============================================================================ */
@media(max-width:559px){
  .a-nav .inner{padding:10px 0;}
  .brand-mark,.a-nav .brand-mark{max-height:34px;}

  .cl-hero{padding:20px 0 12px !important;}
  .cl-hero h1{font-size:1.95rem !important; line-height:1.08 !important;}
  .cl-hero .eyebrow{font-size:10px;}
  .cl-hero .peach-rule{margin:11px auto 11px !important;}
  .cl-hero p{font-size:12.5px !important; line-height:1.45 !important; margin-bottom:.5em !important;}
  .cl-hero .cal-link{font-size:11px !important;}

  /* The active tab already says "Single / Walk in, pay per class", so the panel
     heading stops competing for the fold. It stays in the DOM for the heading
     outline, just not at 1.8rem on its own line. */
  .mcc-phead{margin-bottom:10px;}
  .mcc-phead h2{font-size:1.1rem;}
  .mcc-sub{font-size:11.5px;}

  .mcc-ds-head{padding:0 0 10px;}
  .mcc-ds-date{font-size:1.12rem;}
  .mcc-ds-filter{padding:0 12px; font-size:10px;}
  .mcc-panel{padding-top:14px;}
}