:root{
  --ink:#19152a;--muted:#6f667b;--cream:#fff8fc;--lav:#eadbff;--purple:#7542d4;
  --purple2:#b56df0;--pink:#ffd9e9;--peach:#ffe3c7;--mint:#d8f5ec;--sky:#d9efff;
  --white:#fff;--line:#eadfea;--dark:#25192f;--gold:#f2b84b;
  --shadow:0 18px 50px rgba(46,26,72,.12);--radius:26px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;font-size:16px;color:var(--ink);background:linear-gradient(180deg,#fff8fc 0%,#fff 45%,#faf5ff 100%);line-height:1.5}
a{text-decoration:none;color:inherit}.topbar{background:var(--dark);color:#fff;text-align:center;padding:9px 18px;font-size:14px;letter-spacing:.02em}
header{position:sticky;top:0;z-index:20;background:rgba(251,248,244,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(231,224,235,.8)}
.nav{max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:18px 22px;gap:20px}
.logo-mark{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--purple),var(--purple2));color:#fff;font-size:18px;box-shadow:0 8px 18px rgba(117,66,212,.25)}.brandrow{display:flex;align-items:center;gap:10px}.logo{font-weight:900;letter-spacing:.12em;font-size:17px}.logo span{color:var(--purple)}
nav{display:flex;gap:20px;align-items:center;font-size:14px;font-weight:700}nav a:hover{color:var(--purple)}
/* The page a visitor is already on is marked, so the gallery page does not
   look like the home page with a different body. */
nav a[aria-current="page"]{color:var(--purple)}
.nav-close,.nav-toggle,.nav-scrim{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:13px 20px;font-weight:800;cursor:pointer;font-size:14px;min-height:46px;text-align:center}
.btn.primary{background:var(--purple);color:#fff;box-shadow:0 10px 24px rgba(109,59,192,.25)}
.btn.light{background:#fff;border:1px solid var(--line)}.btn.dark{background:var(--dark);color:#fff}
/* Header pre-order button — the way back to the pre-order list. The badge is
   filled by assets/site.js from the list in local storage, so it only appears
   once something has been added. */
.cart-link{gap:8px;padding:10px 15px;min-height:42px;font-size:13.5px}
/* The click has to land on the button itself, never on the icon or the count
   inside it, so the handler always sees the same element. */
.cart-link>*{pointer-events:none}
.cart-link .cart-count:empty{display:none}
.cart-link .cart-count{display:inline-grid;place-items:center;min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:var(--purple);color:#fff;font-size:12px}
.hero{max-width:1180px;margin:0 auto;padding:70px 22px 55px;display:grid;grid-template-columns:1.05fr .95fr;gap:45px;align-items:center}
.kicker{font-size:13px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--purple);margin-bottom:14px}
h1{font-size:clamp(38px,8.2vw,82px);line-height:.95;margin:0 0 24px;letter-spacing:-.05em}
.hero p{font-size:clamp(16px,4.2vw,18px);color:var(--muted);max-width:600px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-art{min-height:510px;border-radius:34px;background:linear-gradient(145deg,#d9c6ff 0%,#b98af0 45%,#ffd7e7 100%);position:relative;overflow:hidden;box-shadow:var(--shadow)}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.hero-art:after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to top,rgba(46,26,72,.28),transparent);z-index:1;pointer-events:none}
.hero-card{position:absolute;left:28px;bottom:28px;z-index:2;background:rgba(255,255,255,.92);padding:18px 20px;border-radius:20px;box-shadow:var(--shadow);max-width:310px}
.hero-card strong{display:block;font-size:18px}.hero-card small{color:var(--muted)}
.section{padding:80px 22px}.section.alt{background:#fff}.wrap{max-width:1180px;margin:auto}.section-head{display:flex;justify-content:space-between;gap:25px;align-items:end;margin-bottom:34px}.section h2{font-size:clamp(29px,6vw,54px);line-height:1.02;margin:0;letter-spacing:-.04em}.section-head p{max-width:540px;color:var(--muted);margin:0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* ── Program cards ────────────────────────────────────────────────────────
   The card head (age icon + age group) is the click target. Opening it
   reveals the programme description, the class times and — in a quiet,
   light typeface at the very bottom — the monthly and yearly tuition. */
.program{padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--cream);display:flex;flex-direction:column;overflow:hidden}
.program .num{font-size:12px;color:var(--purple);font-weight:900;letter-spacing:.12em}
.program h3{font-size:clamp(22px,4.6vw,27px);margin:7px 0 0;letter-spacing:-.02em}
.prog{margin-top:14px}
.program summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:2px 4px 2px 0;border-radius:16px}
.program summary::-webkit-details-marker{display:none}
.program summary:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.program summary .num{grid-column:1;grid-row:1}
.program summary h3{grid-column:1;grid-row:2}
.program summary .prog-hint{grid-column:1;grid-row:3}
.program summary .prog-chevron{grid-column:2;grid-row:1/span 3;align-self:center}
.prog-hint{display:block;margin-top:6px;font-size:12.5px;font-weight:500;color:var(--muted)}
.prog-chevron{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-size:17px;font-weight:700;color:var(--purple);transition:transform .2s}
.program details[open] .prog-chevron{transform:rotate(45deg)}
.program details[open] .prog-hint{display:none}
.prog-more{padding-top:4px}
.prog-more p{color:var(--muted);margin:12px 0 0;font-size:15px}
.prog-times{margin-top:12px;font-size:13px;font-weight:700;background:rgba(255,255,255,.75);border-radius:12px;padding:9px 12px}
/* Tuition inside a programme card: deliberately light and understated. */
.prog-fees{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.fee-row{display:flex;justify-content:space-between;gap:14px;font-size:13px;font-weight:400;color:var(--muted);padding:3px 0}
.fee-row span:last-child{text-align:right}
.fee-link{display:inline-block;margin-top:9px;font-size:12.5px;font-weight:600;color:var(--purple);border-bottom:1px solid rgba(117,66,212,.3)}
.program.featured{background:var(--dark);color:#fff;border-color:var(--dark)}
.program.featured .prog-more p,.program.featured .prog-hint,.program.featured .fee-row{color:#b6acc0}
.program.featured .num{color:#c8a9ff}
.program.featured .prog-chevron{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
.program.featured .prog-times{background:rgba(255,255,255,.08)}
.program.featured .prog-fees{border-top-color:rgba(255,255,255,.18)}
.program.featured .fee-link{color:#d3b6ff;border-bottom-color:rgba(211,182,255,.4)}
.schedule{display:grid;grid-template-columns:1fr 1fr;gap:20px}.schedule-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px}.schedule-card h3{margin:0 0 18px;font-size:23px}.slot{display:flex;justify-content:space-between;gap:18px;padding:15px 0;border-top:1px solid var(--line)}.slot:first-of-type{border-top:0}.slot b{display:block}.slot span{color:var(--muted);text-align:right}.notice{margin-top:20px;padding:16px 18px;background:var(--lav);border-radius:16px;font-size:14px}
/* ── Tuition ──────────────────────────────────────────────────────────────
   Deliberately quiet: one folded line on the page instead of a wall of
   price cards. Parents who want the numbers open it; everyone else sees
   the programmes first. */
.tuition{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 34px rgba(46,26,72,.05)}
.tuition>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:22px 24px;border-radius:var(--radius)}
.tuition>summary::-webkit-details-marker{display:none}
.tuition>summary:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.tuition-label{flex:1;min-width:0}
.tuition-label b{display:block;font-size:18px;letter-spacing:-.02em}
.tuition-label small{color:var(--muted);font-weight:400}
.tuition[open]>summary .prog-chevron{transform:rotate(45deg)}
.tuition-body{padding:0 24px 24px}
.tuition-note{font-size:13px;font-weight:400;color:var(--muted);background:#faf7fc;border-radius:14px;padding:12px 15px;margin:0 0 18px}
.fee-group{margin-top:22px}.fee-group:first-of-type{margin-top:0}
.fee-group>h3{margin:0;font-size:16px;letter-spacing:-.01em}
.fee-group>p{margin:3px 0 6px;color:var(--muted);font-size:13px;font-weight:400}
.fee-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:13px 0;border-top:1px solid var(--line)}
.fee-line .what{flex:1 1 180px;font-size:14px;font-weight:600}
.fee-line .amount{font-size:15px;font-weight:400;color:var(--muted);white-space:nowrap}
.fee-line .fee-actions{display:flex;gap:8px;flex-wrap:wrap}
.fee-line .btn{padding:9px 16px;font-size:13px;min-height:40px}
/* Team price list — locked until the team access code is typed in. */
.team-lock{margin-top:10px;padding:16px 18px;background:var(--lav);border-radius:16px}
.team-lock-form{margin-top:14px}
.team-lock-form label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.team-lock-form input{width:100%;max-width:320px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:14px}
.team-lock-status{margin:8px 0 0;font-size:13px;font-weight:400;color:var(--muted)}
.team-fee-note{margin:14px 0 0;font-size:12px;font-weight:400;color:var(--muted)}
/* ── Team shop ────────────────────────────────────────────────────────────
   Every product card is a button and stays price-free: tapping one opens the
   product dialog, which carries the price, a short description, a colour
   choice where it applies, the name to print where the product has one and a
   +/- quantity stepper. From there every product — priced or quoted — goes
   into the single pre-order list under the grid. Prices, descriptions and
   colours are edited in one place only: the SHOP_PRODUCTS block in the script
   at the bottom of index.html. */
.shop-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.product{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s}
.product:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(46,26,72,.1);border-color:#dcc9f2}
.product:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.product-img{height:160px;border-radius:14px;background:linear-gradient(135deg,#f2e9ff,#f7e8ef);display:grid;place-items:center;font-weight:900;color:#7c5ca6;font-size:13px;text-align:center;padding:8px}
/* Tiles that carry a real product photo swap the gradient for white, so the
   cut-out photos sit on a clean background. */
.product-img.has-photo,.modal-art.has-photo{background:#fff;border:1px solid var(--line)}
.product-img img,.modal-art img{width:100%;height:100%;object-fit:contain;display:block}
/* In the dialog the artwork grows to fit the photo instead of sitting in a
   fixed letterbox, so upright shots such as the tights stay readable while
   wide front-and-back shots keep the dialog compact. */
.modal-art.has-photo{height:auto;max-height:280px;padding:8px}
.modal-art.has-photo img{width:auto;max-width:100%;height:auto;max-height:264px;margin:0 auto}
.product-name{display:block;margin:14px 0 4px;font-size:17px;font-weight:800;letter-spacing:-.01em}
.product small{color:var(--muted)}
.product-foot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px}
.product-open{font-size:12.5px;font-weight:700;color:var(--muted)}
/* Pre-order list under the grid — everything added from the product dialog. */
.cart{margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:26px;padding:24px;box-shadow:0 12px 34px rgba(46,26,72,.06)}
.cart[hidden]{display:none}
.cart h3{margin:0 0 4px;font-size:22px;letter-spacing:-.02em}
.cart>p{margin:0;color:var(--muted);font-size:14px}
.cart-line{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line)}
.cart-line:first-of-type{border-top:0}
.cart-line .what{flex:1 1 200px;min-width:0}
.cart-line .what b{display:block;font-size:15px}
.cart-line .what small{color:var(--muted)}
.cart-line .money{font-weight:400;white-space:nowrap;min-width:76px;text-align:right}
.cart-remove{border:0;background:transparent;color:var(--muted);font-size:13px;font-weight:700;cursor:pointer;text-decoration:underline;padding:6px}
.cart-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.cart-actions .btn{flex:1 1 160px}
.cart-status{font-size:13.5px;font-weight:700;color:#1f8a5f;margin:12px 0 0;min-height:19px}
/* ── Photo wall: "Phoenix in motion" ──────────────────────────────────────
   The full wall lives on its own page (/gallery). Every tile is a button so
   the photo opens in the viewer below with the keyboard as well as the mouse.
   The tiles are a fixed 4:5 portrait crop whatever the photo's own shape is,
   so the wall stays on a tidy grid. */
.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.shot{padding:0;border:0;margin:0;border-radius:18px;overflow:hidden;cursor:zoom-in;aspect-ratio:4/5;background:linear-gradient(135deg,#f2e9ff,#f7e8ef);display:block}
.shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.shot:hover img,.shot:focus-visible img{transform:scale(1.06)}
.shot:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
/* ── Photo teaser on the home page ────────────────────────────────────────
   The home page shows a short peek at the wall instead of all of it, so a
   visitor reaches the next section with one flick rather than nineteen. The
   strip scrolls sideways, which keeps it exactly one tile tall at every
   width, and every tile leads to the gallery page. */
.motion-strip{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;padding:3px 3px 12px;margin:0 -3px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.motion-strip>a{position:relative;flex:0 0 auto;width:178px;aspect-ratio:4/5;border-radius:18px;overflow:hidden;scroll-snap-align:start;background:linear-gradient(135deg,#f2e9ff,#f7e8ef)}
.motion-strip img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.motion-strip>a:hover img,.motion-strip>a:focus-visible img{transform:scale(1.06)}
.motion-strip>a:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
/* The last tile is the invitation itself, so the strip ends on the way in. */
.motion-strip .strip-more{display:grid;align-content:center;justify-items:start;gap:6px;padding:20px;color:#fff;background:linear-gradient(150deg,var(--purple),var(--purple2))}
.motion-strip .strip-more strong{font-size:19px;letter-spacing:-.02em;line-height:1.15}
.motion-strip .strip-more span{font-size:13px;color:#f0e3ff}
.motion-strip .strip-more em{font-style:normal;font-weight:900;font-size:13px;letter-spacing:.04em}
.motion-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:20px}
.motion-actions .count{font-size:13.5px;color:var(--muted)}
/* ── Page header (gallery page) ───────────────────────────────────────────
   A short, quiet masthead: the sub-pages carry a title and one line of
   context, not a full hero. */
.page-head{max-width:1180px;margin:auto;padding:56px 22px 8px}
.page-head h1{font-size:clamp(32px,7vw,60px);margin:0 0 14px}
.page-head p{color:var(--muted);max-width:620px;margin:0;font-size:clamp(15px,4vw,17px)}
.page-head .back{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:13.5px;color:var(--purple);margin-bottom:18px}
.page-head .back:hover{text-decoration:underline}
/* ── Photo viewer ─────────────────────────────────────────────────────────
   Its own full-screen layer rather than the shop dialog: a photo wants the
   whole screen, and the arrows have to sit beside it at every width. */
.lightbox{position:fixed;inset:0;z-index:70;background:rgba(20,15,32,.94);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:20px}
.lightbox[hidden]{display:none}
.lb-figure{margin:0;min-width:0;display:grid;justify-items:center;gap:14px}
.lb-figure img{max-width:100%;max-height:76vh;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.lb-caption{color:#f4ecff;font-size:14.5px;line-height:1.45;text-align:center;max-width:620px;margin:0}
.lb-count{color:#c4b3dd;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;margin:0}
.lb-nav,.lb-close{border:0;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;display:grid;place-items:center;border-radius:999px;line-height:1}
.lb-nav:hover,.lb-close:hover{background:rgba(255,255,255,.28)}
.lb-nav{width:54px;height:54px;font-size:30px;padding-bottom:4px}
.lb-close{position:absolute;top:18px;right:18px;width:46px;height:46px;font-size:24px;z-index:1}
/* ── Product / checkout dialog ────────────────────────────────────────── */
.modal-scrim{position:fixed;inset:0;background:rgba(25,21,42,.5);z-index:60}
.modal-scrim[hidden],.modal[hidden]{display:none}
body.modal-open{overflow:hidden}
.modal{position:fixed;z-index:61;top:50%;left:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 28px));max-height:min(88vh,780px);overflow:auto;background:#fff;border-radius:28px;padding:26px;box-shadow:0 30px 80px rgba(46,26,72,.32)}
.modal-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:20px;line-height:1;cursor:pointer;color:var(--ink)}
.modal h3{margin:0;font-size:25px;letter-spacing:-.03em;padding-right:44px}
.modal-art{height:120px;border-radius:18px;background:linear-gradient(135deg,#f2e9ff,#f7e8ef);display:grid;place-items:center;font-weight:900;color:#7c5ca6;font-size:14px;letter-spacing:.1em;margin-bottom:18px}
.modal-kicker{font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--purple);margin:0 0 6px}
.modal-desc{color:var(--muted);font-size:15px;margin:10px 0 0}
.modal-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:18px}
.modal-row[hidden]{display:none}
.field-label{font-size:13px;font-weight:800}
.swatches{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.swatch input{position:absolute;width:1px;height:1px;opacity:0}
.swatch span{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer;background:#fff}
.swatch i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(25,21,42,.16);flex:none}
.swatch input:checked+span{border-color:var(--purple);background:#f7f0ff;box-shadow:inset 0 0 0 1px var(--purple)}
.swatch input:focus-visible+span{outline:2px solid var(--purple);outline-offset:2px}
.stepper{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:999px;padding:4px;background:#faf7fc}
.stepper button{width:42px;height:42px;border-radius:50%;border:0;background:#fff;font-size:21px;font-weight:800;color:var(--purple);cursor:pointer;line-height:1;box-shadow:0 2px 6px rgba(46,26,72,.08)}
.stepper button:disabled{color:#cbc2d5;cursor:not-allowed;box-shadow:none}
.stepper output{min-width:46px;text-align:center;font-weight:900;font-size:17px}
.modal-total{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:20px;padding-top:15px;border-top:1px solid var(--line);font-size:14px;font-weight:800}
/* Money reads as plain text, not headline weight — prices stay quiet next to
   the labels and buttons around them. */
.modal-total b{font-size:27px;letter-spacing:-.03em;font-weight:400}
.price-value{font-weight:400}
.modal-total[hidden]{display:none}
/* auto-fit so the row still reads well whether one or both buttons show.
   .btn sets display:inline-flex, which would defeat the hidden attribute on
   its own, so the buttons that are out of play are hidden explicitly. */
.modal-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;margin-top:16px}
.modal-actions .btn[hidden]{display:none}
.order-review{background:#faf7fc;border-radius:16px;padding:14px 16px;margin-top:18px;font-size:14px}
.order-review div{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.order-review span:last-child{font-weight:800;white-space:nowrap}
.order-status{font-size:14px;font-weight:700;margin:12px 0 0}
.order-status.ok{color:#1f8a5f}.order-status.error{color:#c2415a}
.modal .btn{width:100%}
.modal small.hint{display:block;color:var(--muted);font-size:12.5px;font-weight:400;margin-top:14px}
.portal{display:grid;grid-template-columns:260px 1fr;min-height:620px;border-radius:30px;overflow:hidden;box-shadow:var(--shadow);background:#fff}.side{background:var(--dark);color:#fff;padding:26px}.side .brand{font-weight:900;letter-spacing:.12em;margin-bottom:32px}.side button{display:block;width:100%;text-align:left;border:0;background:transparent;color:#ddd;padding:13px 12px;border-radius:12px;cursor:pointer}.side button.active,.side button:hover{background:#6d3bc0;color:#fff}.dash{padding:34px}.dash-top{display:flex;justify-content:space-between;align-items:center;gap:15px}.dash h3{font-size:30px;margin:0}.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:25px 0}.stat{border:1px solid var(--line);border-radius:18px;padding:20px}.stat strong{display:block;font-size:24px}.stat span{font-size:13px;color:var(--muted)}.portal-panel{border:1px solid var(--line);border-radius:18px;padding:20px;margin-top:14px}.payrow{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-top:1px solid var(--line)}.payrow:first-child{border-top:0}
.form-wrap{max-width:820px;margin:auto;background:#fff;border:1px solid var(--line);border-radius:28px;padding:34px;box-shadow:var(--shadow)}label{display:block;font-size:13px;font-weight:800;margin:16px 0 7px}input,select,textarea{width:100%;border:1px solid #dcd3e2;border-radius:12px;padding:13px;font:inherit;font-size:16px;background:#fff}textarea{min-height:100px}.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.check{display:flex;gap:10px;align-items:flex-start;margin:16px 0;font-size:13px}.check input{width:auto;margin-top:4px}
/* Program type picker at the top of the enrollment form. Both choices stay
   visible side by side so the first step of the form cannot be missed. */
.choice-group{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.choice{display:flex;gap:11px;align-items:flex-start;margin:0;border:1px solid #dcd3e2;border-radius:14px;padding:15px;cursor:pointer;font-weight:400}
.choice input{width:auto;margin:3px 0 0;flex:0 0 auto}
.choice b{display:block;font-size:14px}
.choice small{display:block;color:var(--muted);font-size:12px;margin-top:4px;line-height:1.45}
.choice:has(input:checked){border-color:#6d3bc0;box-shadow:0 0 0 1px #6d3bc0 inset;background:#faf6ff}
/* A payment method the current choices rule out — the card option while the
   season is being split into two installments. Still readable, plainly inert. */
.choice.is-disabled{opacity:.5;cursor:not-allowed;background:#f7f5f9}
.choice.is-disabled:has(input:checked){border-color:#dcd3e2;box-shadow:none;background:#f7f5f9}
@media(max-width:640px){.choice-group{grid-template-columns:1fr}}
/* One card per gymnast, so a family enrolling siblings can see where one
   child's details end and the next child's begin. */
.child-card{border:1px solid var(--line);border-radius:18px;padding:6px 20px 22px;margin-top:12px;background:#fdfcfe}
.child-card[hidden]{display:none}
.child-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px}
.child-title{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.child-remove{width:auto;min-height:0;border:0;background:none;padding:2px;font:inherit;font-size:13px;font-weight:700;color:var(--purple);text-decoration:underline;cursor:pointer}
.add-child{margin-top:14px}
/* A rule the parent needs before choosing, not after — the installment option
   only settles with Zelle, check or cash. */
.notice.warn{background:#fff5e8;border:1px solid #f0cd9a}
/* Payment summary shown at the foot of the enrollment form. It is the parent's
   receipt preview: package price, registration fee and — for card payments —
   the two card fees, each on its own line. Values come from
   updateCheckoutSummary() in the page script. */
.checkout-summary{margin-top:26px;border:1px solid var(--line);border-radius:18px;padding:20px 22px;background:#faf8fd}
.checkout-summary .checkout-title{display:block;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.checkout-line{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-top:1px solid var(--line);font-size:14px}
.checkout-line:first-of-type{border-top:0;padding-top:14px}
.checkout-line span:last-child{font-weight:800;white-space:nowrap}
.checkout-line[hidden]{display:none}
.checkout-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:4px;padding-top:14px;border-top:1px solid #d8cee6;font-size:14px;font-weight:800}
.checkout-total b{font-size:26px;letter-spacing:-.03em;font-weight:400}
.checkout-note{display:block;color:var(--muted);font-size:12.5px;line-height:1.5;margin-top:12px}
.program-art{width:100%;height:180px;border-radius:18px;background-color:#f3ecff;background-size:cover;background-position:center;background-repeat:no-repeat;display:block}
.sched-icon{display:inline-block;width:34px;height:34px;border-radius:11px;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#f3ecff;flex:0 0 auto;margin-right:10px}
.schedule-card h3{display:flex;align-items:center}
.moment{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.72);border-radius:18px;padding:10px 14px}
.moment .m-art{width:64px;height:52px;border-radius:13px;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#f3ecff;flex:0 0 auto}
/* Photo slots: the club photo is layer 1, the drawn illustration layer 2.
   If a photo file is ever missing, the illustration shows through instead.
   Paths start with "/" so they resolve from the site root, not from this
   stylesheet's own folder — keep the leading slash when editing them. */
[data-photo="rec-3-5"]{background-image:url(/assets/programs/rec-3-5.jpg),url(/assets/icon-rec-3-5.svg)}
[data-photo="rec-6-10"]{background-image:url(/assets/programs/rec-6-10.jpg),url(/assets/icon-rec-6-10.svg)}
[data-photo="team"]{background-image:url(/assets/programs/team.jpg),url(/assets/icon-team.svg)}
.program-art[data-photo="rec-3-5"],.sched-icon[data-photo="rec-3-5"]{background-position:center 30%}
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.feat{display:flex;align-items:flex-start;gap:11px;background:#fff;border-radius:18px;padding:16px}
.feat .ico{color:var(--purple);margin-top:3px}
.tag-ico{display:inline-flex;align-items:center;gap:7px}
.tag-ico .ico{width:15px;height:15px;stroke-width:2.1}
/* Coaches block — one card per coach, each with its own description */
.coach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.coach{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column}
.coach-photo{width:100%;aspect-ratio:3/4;max-height:520px;border-radius:20px;margin-bottom:18px;background-color:#f3ecff;background-image:linear-gradient(150deg,#e2d1ff,#ffd9e9);background-size:cover;background-position:center 22%;background-repeat:no-repeat;display:grid;place-items:center}
.coach-photo .ph{font-size:38px;color:rgba(255,255,255,.9);text-shadow:0 6px 18px rgba(46,26,72,.25)}
.coach .role{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--purple)}
.coach h3{font-size:25px;margin:8px 0 2px;letter-spacing:-.02em}
.coach .credential{margin:0;font-weight:800;font-size:14px}
.coach .tags{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0}
.coach .tags span{background:var(--lav);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:800}
.coach .bio{color:var(--muted);font-size:15px;margin:14px 0 0}
.coach details{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.coach details[open]{margin-bottom:2px}
.coach summary{cursor:pointer;font-weight:800;font-size:14px;color:var(--purple);list-style:none}
.coach summary::-webkit-details-marker{display:none}
.coach summary:after{content:" +";font-weight:900}
.coach details[open] summary:after{content:" –"}
.coach details p{color:var(--muted);font-size:14px;margin:12px 0 0;line-height:1.65}
.coach .spacer{flex:1}
/* Coaching philosophy — the team photo sits beside the text and moves above
   it on narrow screens. Photo file: assets/coaches/philosophy.jpg */
.philosophy{margin-top:20px;background:linear-gradient(135deg,#f3e9ff,#fff);border:1px solid var(--line);border-radius:28px;padding:22px;display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:center}
.philosophy-photo{width:100%;height:100%;max-height:300px;object-fit:cover;object-position:center 22%;border-radius:22px;display:block;background:linear-gradient(150deg,#e2d1ff,#ffd9e9)}
.philosophy-text{padding:10px 14px 10px 0}
.philosophy-text h3{margin:6px 0 0;font-size:clamp(24px,3.4vw,32px);letter-spacing:-.03em}
.philosophy-text p{color:var(--muted);font-size:17px;margin:12px 0 20px}
.agreement-doc{background:#faf7fc;border:1px solid var(--line);border-radius:16px;padding:22px}
.agreement-doc h4{margin:0 0 5px;font-size:19px;letter-spacing:-.02em}
.doc-sub{color:var(--muted);font-size:13px;margin:0 0 18px}
.agreement-doc section{padding:18px 0;border-top:1px solid var(--line)}
.agreement-doc section:first-of-type{border-top:0;padding-top:4px}
.agreement-doc h5{margin:0 0 9px;font-size:15px;letter-spacing:-.01em}
.agreement-doc p{margin:0 0 10px;font-size:14px;color:#4b4453;line-height:1.65}
.agreement-doc p:last-child{margin-bottom:0}
.agreement-doc .fill{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 16px 18px;margin-top:4px}
.agreement-doc .fill .two label,.agreement-doc .fill>label:first-child{margin-top:0}
.agreement-doc input,.agreement-doc textarea{font-size:16px}
.agreement-doc textarea{min-height:84px}
.accept{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:18px}
footer{background:var(--dark);color:#fff;padding:55px 22px}.footer{max-width:1180px;margin:auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:35px}.footer p,.footer a{color:#cfc7d5}.footer h4{margin:0 0 12px}.copyright{max-width:1180px;margin:35px auto 0;padding-top:20px;border-top:1px solid #3d3347;color:#aaa;font-size:12px}
/* ── Reviews ──────────────────────────────────────────────────────────────
   Published reviews come from /api/reviews. Parents submit through the form
   on the right; nothing appears here until it is published in /admin. */
.reviews-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start}
.review-summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;font-size:14px;color:var(--muted)}
.review-summary .big{font-size:26px;font-weight:900;color:var(--ink);letter-spacing:-.03em}
.review-list{display:grid;gap:14px}
.review-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px}
.stars{color:var(--gold);letter-spacing:3px;font-size:15px}
.review-card blockquote{margin:11px 0 0;font-size:16px;color:#443b50;line-height:1.65}
.review-card .who{margin:15px 0 0;font-weight:800;font-size:14px}
.review-card .who small{display:block;font-weight:400;color:var(--muted);margin-top:2px}
.review-empty{background:#fff;border:1px dashed var(--line);border-radius:22px;padding:26px;color:var(--muted);text-align:center}
.review-form-card{background:linear-gradient(150deg,#f4eaff,#fff 65%);border:1px solid var(--line);border-radius:26px;padding:26px}
.review-form-card h3{margin:0 0 4px;font-size:23px;letter-spacing:-.02em}
.review-form-card>p{margin:0;color:var(--muted);font-size:14px}
.steps{counter-reset:step;list-style:none;margin:18px 0 20px;padding:0}
.steps li{position:relative;padding-left:40px;margin-bottom:12px;font-size:14px;color:#4b4453}
.steps li:last-child{margin-bottom:0}
.steps li b{color:var(--ink)}
.steps li:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:-1px;width:27px;height:27px;border-radius:50%;background:var(--purple);color:#fff;display:grid;place-items:center;font-weight:900;font-size:13px}
.review-form fieldset{border:0;padding:0;margin:16px 0 0}
.review-form legend{font-size:13px;font-weight:800;padding:0}
.rating-input{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px;margin-top:6px}
.rating-input input{position:absolute;width:1px;height:1px;opacity:0}
.rating-input label{margin:0;font-size:30px;line-height:1;color:#ddd3e6;cursor:pointer;padding:2px 3px;font-weight:400}
.rating-input input:checked~label{color:var(--gold)}
.rating-input input:focus-visible~label{outline:2px solid var(--purple);outline-offset:2px}
.review-form .btn{width:100%;margin-top:18px}
.review-privacy{font-size:12px;color:var(--muted);margin:12px 0 0}
.review-status{font-size:14px;margin:12px 0 0;font-weight:700}
.review-status.ok{color:#1f8a5f}.review-status.error{color:#c2415a}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mobile{display:none}
/* ── Mobile ───────────────────────────────────────────────────────────────
   Below 1024px the top navigation becomes a slide-in drawer; below 700px the
   whole page collapses to a single readable column with touch-sized targets. */
@media(max-width:1024px){
  .nav{padding:14px 18px;gap:12px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;flex:0 0 auto;border:1px solid var(--line);border-radius:15px;background:#fff;cursor:pointer;padding:0}
  .nav-toggle i{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative}
  .nav-toggle i:before,.nav-toggle i:after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px}
  .nav-toggle i:before{top:-6px}.nav-toggle i:after{top:6px}
  nav{position:fixed;top:0;right:0;bottom:0;width:min(330px,86vw);display:flex;flex-direction:column;align-items:stretch;gap:0;padding:76px 18px 30px;background:#fffbfe;box-shadow:-24px 0 60px rgba(46,26,72,.22);transform:translateX(102%);visibility:hidden;transition:transform .28s ease,visibility .28s;overflow-y:auto;z-index:40}
  body.nav-open nav{transform:none;visibility:visible}
  nav a{padding:15px 12px;font-size:16px;border-bottom:1px solid var(--line);border-radius:12px}
  nav a:last-of-type{border-bottom:0}
  .nav-close{display:grid;place-items:center;position:absolute;top:16px;right:16px;width:44px;height:44px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:20px;line-height:1;cursor:pointer;color:var(--ink)}
  .nav-scrim{display:block;position:fixed;inset:0;background:rgba(25,21,42,.45);opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s;z-index:35}
  body.nav-open .nav-scrim{opacity:1;visibility:visible}
  body.nav-open{overflow:hidden}
  .mobile{display:inline-flex}
}
@media(max-width:900px){.hero{grid-template-columns:1fr}.hero-art{min-height:360px}.grid3,.coach-grid,.reviews-layout{grid-template-columns:1fr 1fr}.shop-grid{grid-template-columns:repeat(2,1fr)}.schedule{grid-template-columns:1fr}.portal{grid-template-columns:1fr}.side{display:none}.footer{grid-template-columns:1fr 1fr}.about-grid{grid-template-columns:1fr !important}.gallery{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){
  .section{padding:56px 18px}
  .section-head{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:26px}
  .section-head p{font-size:15px}
  .hero{padding:38px 18px 40px;gap:30px}
  .hero-art{min-height:300px;border-radius:26px}
  .hero-card{left:14px;right:14px;bottom:14px;max-width:none;padding:14px 16px}
  .actions{gap:10px}.actions .btn{flex:1 1 160px}
  .grid3,.two,.coach-grid,.reviews-layout,.contact-grid{grid-template-columns:1fr !important}
  .shop-grid{grid-template-columns:1fr 1fr}
  .statgrid{grid-template-columns:1fr}
  .footer{grid-template-columns:1fr;gap:26px}
  .dash{padding:20px}
  .form-wrap{padding:20px;border-radius:22px}
  .agreement-doc{padding:16px}
  .tuition>summary{padding:18px}
  .tuition-body{padding:0 18px 20px}
  .fee-line .amount{flex:1 1 auto;text-align:left}
  .fee-line .fee-actions{width:100%}
  .fee-line .fee-actions .btn{flex:1 1 auto}
  .review-form-card{padding:20px}
  .coach-photo{aspect-ratio:4/5}
  .slot{flex-direction:column;gap:2px}
  .slot span{text-align:left}
  .philosophy{padding:18px;gap:18px;grid-template-columns:1fr}
  .philosophy-photo{max-height:240px}
  .philosophy-text{padding:0 6px 8px}
  .topbar{font-size:12px;padding:8px 14px}
  .logo{font-size:15px}
  .cart{padding:18px;border-radius:22px}
  .gallery{grid-template-columns:repeat(3,1fr);gap:10px}
  .motion-strip>a{width:152px}
  .motion-strip .strip-more{padding:16px;gap:5px}
  .motion-strip .strip-more strong{font-size:17px}
  .motion-strip .strip-more span{font-size:12px}
  .page-head{padding:34px 18px 6px}
  .lightbox{padding:14px;gap:4px}
  .lb-nav{width:44px;height:44px;font-size:26px}
  .lb-figure img{max-height:68vh}
  .lb-caption{font-size:13.5px}
}
@media(max-width:520px){
  /* The dialog becomes a bottom sheet so it stays reachable with one thumb. */
  .modal{top:auto;bottom:0;left:0;transform:none;width:100%;max-height:92vh;border-radius:26px 26px 0 0;padding:22px 18px 26px}
  .modal-actions{grid-template-columns:1fr}
  .cart-line .money{min-width:0}
}
@media(max-width:430px){.shop-grid{grid-template-columns:1fr}.hero-art{min-height:250px}.btn{width:100%}.actions .btn,.fee-line .btn,.motion-actions .btn{width:auto}.review-summary .big{font-size:22px}.gallery{grid-template-columns:repeat(2,1fr)}.motion-strip>a{width:138px}.motion-strip .strip-more{padding:14px}.motion-strip .strip-more span{display:none}.lb-nav{width:40px;height:40px;font-size:23px}.lb-close{top:12px;right:12px}}