:root {
  --bg:#110a24; --bg2:#1a1038; --card:#1e1243; --card2:#271655; --line:#33215f;
  --text:#f3eeff; --muted:#b9acd8;
  --pink:#ff4da6; --orange:#ffb347; --teal:#35d0c4; --violet:#7a3fe0;
  --head:'Bricolage Grotesque', system-ui, sans-serif;
  --body:'Figtree', system-ui, sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { font-family:var(--body); color:var(--text); background:var(--bg); line-height:1.55; border-top:4px solid; border-image:linear-gradient(90deg,var(--pink),var(--orange),var(--teal)) 1; }
img { display:block; max-width:100%; }
a { color:inherit; }
h1,h2,h3 { font-family:var(--head); font-weight:800; line-height:1.05; letter-spacing:-.02em; }
.wrap { width:min(1140px, 100% - 3rem); margin-inline:auto; }
.pink { color:var(--pink); } .orange { color:var(--orange); } .teal { color:var(--teal); }

/* header */
.site-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; width:100%; padding:1rem max(1.5rem, calc((100% - 1140px)/2)); background:rgba(17,10,36,.92); backdrop-filter:blur(8px); }
.brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; font-family:var(--head); font-weight:800; font-size:1.1rem; }
.brand img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
nav { display:flex; align-items:center; gap:1.75rem; font-weight:600; font-size:.95rem; }
nav a { text-decoration:underline; text-underline-offset:4px; text-decoration-color:transparent; transition:.2s; }
nav a:hover { text-decoration-color:currentColor; }
.pill { padding:.6rem 1.15rem; border-radius:999px; text-decoration:none; }
.pill-pink { background:var(--pink); color:var(--bg); text-decoration:none; }
.menu-toggle { display:none; background:none; border:0; width:32px; height:24px; cursor:pointer; flex-direction:column; justify-content:space-between; }
.menu-toggle span { display:block; height:3px; background:var(--text); border-radius:2px; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem 1.5rem; border-radius:999px; font-weight:700; text-decoration:none; font-size:1rem; border:2px solid transparent; transition:transform .15s, opacity .15s; }
.btn:hover { transform:translateY(-2px); }
.btn svg { width:18px; height:18px; fill:currentColor; }
.btn-pink { background:var(--pink); color:var(--bg); }
.btn-ghost { border-color:var(--line); background:transparent; color:var(--text); }
.btn-outline { border-color:var(--violet); color:var(--text); }
.btn-dark { background:var(--bg); color:var(--text); }
.btn-block { width:100%; }

/* hero */
.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; padding-block:4rem 5rem; }
.eyebrow { display:flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1rem; }
.eyebrow svg { width:14px; height:14px; fill:currentColor; }
.hero h1 { font-size:clamp(2.8rem,6.5vw,4.8rem); margin-bottom:1.5rem; }
.lead { color:var(--muted); font-size:1.1rem; max-width:34ch; margin-bottom:1.75rem; }
.actions { display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:1.5rem; }
.address { font-size:.85rem; color:var(--muted); }
.hero-art { position:relative; display:flex; justify-content:center; }
.arch-frame { width:min(100%, 340px); padding:5px; border-radius:999px 999px 36px 36px; background:linear-gradient(160deg,var(--pink),var(--orange) 55%,var(--teal)); }
.arch { aspect-ratio:10/11; border-radius:999px 999px 32px 32px; overflow:hidden; background:var(--bg2); }
.arch img { width:100%; height:100%; object-fit:cover; }
.badge { position:absolute; left:6%; bottom:9%; background:var(--orange); color:var(--bg); padding:.75rem 1.1rem; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.badge small { display:block; font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.badge strong { font-family:var(--head); font-size:1.4rem; }

/* strip */
.strip { background:var(--bg2); border-block:1px solid var(--line); }
.strip ul { list-style:none; display:flex; justify-content:space-between; gap:1rem; padding-block:1.25rem; font-weight:700; font-size:.95rem; }

/* sections */
.section { padding-block:5rem 1rem; }
.section h2 { font-size:clamp(2rem,4.5vw,3rem); margin-bottom:1.75rem; }
.sub { color:var(--muted); max-width:52ch; margin:-.75rem 0 2.5rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:1.75rem; }

/* schedule */
.schedule { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.meta { display:flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem; }
.dot { width:8px; height:8px; border-radius:50%; background:currentColor; }
.time { font-family:var(--head); font-weight:800; font-size:4rem; line-height:1; margin-bottom:1rem; }
.tags { display:flex; flex-wrap:wrap; gap:.5rem; padding-bottom:1.25rem; border-bottom:1px solid var(--line); margin-bottom:1.25rem; }
.tag { padding:.3rem .8rem; border:1px solid var(--line); border-radius:999px; font-size:.8rem; font-weight:700; color:var(--text); }
.tag.teal { border-color:var(--teal); } .tag.orange { border-color:var(--orange); } .tag.pink { border-color:var(--pink); }
.tag.violet { border-color:#9b6bff; } .tag.yellow { border-color:#f7e35a; }
.class-card .tag.teal, .class-card .tag.orange, .class-card .tag.pink { }
.class-card { display:flex; flex-direction:column; }
.class-card .price { margin-top:auto; }
.price { display:flex; justify-content:space-between; margin-bottom:1.25rem; color:var(--muted); }
.price strong { color:var(--text); }
.where-card { background:var(--card2); display:flex; flex-direction:column; }
.badge .social { margin-top:.35rem; padding-top:.35rem; border-top:1px solid rgba(17,10,36,.25); }
.where-card h3 { font-size:1.4rem; }
.where-card p { color:var(--muted); font-size:.92rem; margin:.25rem 0 1.25rem; }
.where-card .btn { margin-top:auto; }

/* teachers */
.teachers { display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; max-width:1000px; margin:2rem auto 0; }
.teacher { display:flex; gap:1.5rem; align-items:flex-start; width:calc(50% - 1rem); background:#25134a; border:1px solid #3d2a78; border-radius:16px; padding:1.5rem; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.6; }
.teacher img { flex:0 0 150px; width:150px; height:150px; object-fit:cover; border-radius:50%; border:4px solid transparent; background:linear-gradient(135deg,var(--pink),var(--orange),var(--teal)) border-box; }
.teacher-info h4 { font-family:inherit; font-size:1.25rem; font-weight:700; line-height:1.6; letter-spacing:normal; color:#fff; }
.teacher-info .role { color:#ffb347; font-style:italic; margin-bottom:.5rem; }
.teacher-info p { color:#e8e2f5; font-size:1rem; }
.teacher-info .insta { display:inline-flex; align-items:center; gap:.4rem; margin-top:.75rem; color:#ff3d9a; font-weight:600; text-decoration:none; }
.teacher-info .insta svg { width:22px; height:22px; fill:currentColor; }
.teacher-info .insta:hover { color:#ffb347; }

/* mission */
.mission { background:var(--card); border:1px solid var(--line); border-radius:32px; padding:3.5rem; }
.mission h2 { font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:1rem; }
.mission p:last-child { color:var(--muted); max-width:44ch; }

/* faq */
.faq { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.faq h3 { font-size:1.15rem; margin-bottom:.5rem; }
.faq p { color:var(--muted); font-size:.95rem; }

/* cta */
.cta { margin-top:5rem; background:var(--pink); color:var(--bg); border-radius:32px; padding:4rem 2rem; text-align:center; }
.cta h2 { font-size:clamp(2rem,5vw,3.2rem); max-width:16ch; margin:0 auto 1.75rem; }

/* footer */
.site-footer { margin-top:5rem; border-top:1px solid var(--line); padding-block:1.75rem; font-size:.85rem; color:var(--muted); }
.site-footer .wrap { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.site-footer a { color:var(--orange); font-weight:700; }

.mobile-bar { display:none; }

/* tablet */
@media (max-width:980px) {
  .schedule { grid-template-columns:1fr 1fr; }
  .where-card { grid-column:1 / -1; }
}

/* mobile */
@media (max-width:760px) {
  body { padding-bottom:84px; }
  .menu-toggle { display:flex; }
  nav { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--bg); padding:.5rem 1.5rem 1.5rem; border-bottom:1px solid var(--line); }
  nav.open { display:flex; }
  nav a { padding:.9rem 0; }
  nav .pill { text-align:center; margin-top:.5rem; }
  .hero { grid-template-columns:1fr; gap:2rem; padding-block:1.5rem 3rem; }
  .hero-art { order:-1; }
  .arch-frame { width:100%; }
  .arch { aspect-ratio:4/3; border-radius:999px 999px 28px 28px; }
  .arch-frame { border-radius:999px 999px 32px 32px; }
  .badge { right:0; left:auto; bottom:-14px; }
  .actions .btn { width:100%; }
  .lead { max-width:none; }
  .strip { display:none; }
  .section { padding-block:3.5rem 1rem; }
  .schedule { grid-template-columns:1fr; }
  .class-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:.25rem 1rem; padding:1.25rem; }
  .class-card .meta, .class-card .price { display:none; }
  .class-card .time { font-size:2.6rem; margin:0; grid-column:1; }
  .class-card .tags { grid-column:1; border:0; padding:0; margin:0; }
  .class-card .btn { grid-column:2; grid-row:1 / span 2; width:auto; }
  .teacher { width:100%; flex-direction:column; align-items:center; text-align:center; }
  .mission { padding:2rem; }
  .faq { grid-template-columns:1fr; }
  .cta { padding:3rem 1.5rem; }
  .site-footer .wrap { flex-direction:column; }
  .mobile-bar { position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1.25rem; background:var(--bg); border-top:1px solid var(--line); }
  .mobile-bar small { display:block; font-size:.78rem; color:var(--muted); }
  .mobile-bar strong { font-family:var(--head); font-size:1.15rem; }
}

/* centred section headings */
.section > .eyebrow { justify-content:center; }
.section > h2 { text-align:center; }
.section > .sub { text-align:center; margin-left:auto; margin-right:auto; }

.sprite { position:absolute; }

/* spec 56 */
.draft-banner { background: #fff3bf; color: #1f1f1f; border-bottom: 2px solid #8a6d00; padding: 10px 16px; text-align: center; font-weight: 700; }

/* spec 55 */
.tuesday-label { grid-column:1 / -1; margin:0; font-family:var(--head); font-weight:800; font-size:1.25rem; }
.tuesday-label:not(:first-child) { margin-top:.75rem; }
.tuesday-note { grid-column:1 / -1; }
.tuesday-note h3 { font-size:1.5rem; margin-bottom:.5rem; }
.tuesday-note p { color:var(--muted); margin:0; }
.class-card .class-name { font-size:1.35rem; margin-bottom:.25rem; }
.class-card .class-teachers { color:var(--muted); font-size:.92rem; margin:0 0 .75rem; }
.class-card .class-desc { color:var(--muted); font-size:.92rem; margin:0 0 1rem; }
.class-card .btn, .class-card .class-status { margin-top:auto; }
.class-status { font-weight:700; color:var(--muted); text-align:center; margin:0; }
.class-card.is-cancelled { opacity:.7; }
.class-card.is-cancelled .time, .class-card.is-cancelled .class-name { text-decoration:line-through; }
@media (max-width:760px) {
  .class-card .class-name, .class-card .class-teachers, .class-card .class-desc { grid-column:1; margin:0; }
  .class-card .btn, .class-card .class-status { grid-column:2; grid-row:1 / span 5; margin:0; }
  .class-card .class-status { text-align:right; }
  .tuesday-label:not(:first-child) { margin-top:.25rem; }
}
/* spec 57 */
:root { --lv-t-beginner:#123b3d; --lv-b-beginner:#5fe0d6; --lv-t-intermediate:#3d2a12; --lv-b-intermediate:#ffc274; --lv-t-advanced:#3d1230; --lv-b-advanced:#ff7cbc; --lv-t-foundations:#13306b; --lv-b-foundations:#7cc8ff; --lv-t-open:#2a1a55; --lv-b-open:#b28cff; }
.tuesday-slots { grid-column:1 / -1; border-top:1px solid var(--line); }
.slot { display:grid; grid-template-columns:150px minmax(0,1fr); gap:20px; padding:20px 0; border-bottom:1px solid var(--line); }
.slot-time { width:max-content; text-align:center; }
.slot-time span { display:block; font-family:var(--head); font-weight:800; font-size:2rem; line-height:1.05; letter-spacing:-.02em; }
.slot-classes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.blk { display:flex; flex-direction:column; gap:6px; min-height:150px; padding:16px 16px 14px; border-radius:12px; background:var(--card); }
.blk h3 { font-size:1.5rem; }
.blk p { margin:0; }
.blk-who { font-weight:600; font-size:.95rem; }
.blk-desc { font-size:.92rem; opacity:.85; }
.blk-time { font-weight:700; font-size:.9rem; }
.blk .chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:6px; }
.blk .tag.lvl { border-color:currentColor; }
.blk-status { font-weight:700; color:var(--muted); font-size:.9rem; }
.blk.is-cancelled { opacity:.6; }
.blk.is-cancelled h3 { text-decoration:line-through; }
.lv-beginner { background:var(--lv-t-beginner); } .lv-beginner h3, .lv-beginner .tag.lvl { color:var(--lv-b-beginner); }
.lv-intermediate { background:var(--lv-t-intermediate); } .lv-intermediate h3, .lv-intermediate .tag.lvl { color:var(--lv-b-intermediate); }
.lv-advanced { background:var(--lv-t-advanced); } .lv-advanced h3, .lv-advanced .tag.lvl { color:var(--lv-b-advanced); }
.lv-foundations { background:var(--lv-t-foundations); } .lv-foundations h3, .lv-foundations .tag.lvl { color:var(--lv-b-foundations); }
.lv-open { background:var(--lv-t-open); } .lv-open h3, .lv-open .tag.lvl { color:var(--lv-b-open); }
.blk-social { background:var(--card2); border:1px solid var(--line); }
.blk-social h3 { display:flex; align-items:center; gap:.5rem; }
.blk-social .dot { width:10px; height:10px; }
.book-all { grid-column:1 / -1; display:flex; justify-content:center; margin:.5rem 0 0; }
.book-all .btn { padding:1rem 2.5rem; font-size:1.05rem; }
@media (max-width:980px) {
  .slot-classes { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .slot { grid-template-columns:56px minmax(0,1fr); gap:12px; padding:16px 0; }
  .slot-time span { font-size:1.35rem; }
  .slot-classes { grid-template-columns:minmax(0,1fr); gap:8px; }
  .blk { min-height:96px; padding:12px 14px; gap:4px; }
  .blk h3 { font-size:1.2rem; }
  .book-all .btn { width:100%; }
}
/* spec 59 */
.site-notice { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:1rem; row-gap:.25rem; padding:.85rem max(1.5rem, calc((100% - 1140px)/2)); background:var(--orange); color:var(--bg); overflow-wrap:anywhere; }
.site-notice strong { font-weight:700; }
@media (max-width:760px) {
  .site-notice { flex-direction:column; align-items:flex-start; }
}
/* spec 65 */
.faq-item > summary { display:block; list-style:none; cursor:auto; }
.faq-item > summary::-webkit-details-marker { display:none; }
@media (max-width:760px) {
  .faq-item > summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:44px; cursor:pointer; }
  .faq-item > summary::after { content:""; flex:none; width:.55rem; height:.55rem; margin-right:.25rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-25%) rotate(45deg); transition:transform .2s; }
  .faq-item[open] > summary::after { transform:translateY(25%) rotate(225deg); }
  .faq-item h3 { margin-bottom:0; }
  .faq-item[open] > summary { margin-bottom:.5rem; }
}
@media (max-width:760px) and (prefers-reduced-motion:reduce) {
  .faq-item > summary::after { transition:none; }
}
/* spec 64 */
/* "Read more" opens the bio in place. Styled as the .insta link, with no marker; the two labels swap on [open]. */
.teacher-more { margin-top:.5rem; }
.teacher-more > summary { display:inline-block; list-style:none; cursor:pointer; color:#ff3d9a; font-weight:600; }
.teacher-more > summary::-webkit-details-marker { display:none; }
.teacher-more > summary:hover { color:#ffb347; }
.teacher-more > summary:focus-visible { outline:2px solid #ffb347; outline-offset:2px; border-radius:4px; }
.teacher-more .more-close, .teacher-more[open] .more-open { display:none; }
.teacher-more[open] .more-close { display:inline; }
.teacher-more > p { margin-top:.5rem; overflow-wrap:anywhere; }
/* spec 66 */
.lilac { color:#b28cff; }
.t-small { font-size:.85em; }
.t-large { font-size:1.25em; }
/* spec 67 */
/* "Credits & training" inside Read more, after the bio: a small heading in the .role colour, eyebrow-sized. */
.teacher-credits-h { margin-top:1rem; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#ffb347; overflow-wrap:anywhere; }
.teacher-credits-h + p { margin-top:.25rem; }
/* spec 69 */
/* The Loyalty card section (design A1c): text and button on the left, the sample card on the right, its top level with the eyebrow. */
.loyalty { display:grid; grid-template-columns:minmax(0,1fr) 220px; column-gap:4rem; align-items:start; }
.loyalty.no-card { grid-template-columns:minmax(0,1fr); }
.loyalty-text { grid-column:1; grid-row:1; min-width:0; }
.loyalty .wline { font-weight:800; font-size:1.5rem; letter-spacing:.04em; line-height:1.3; color:var(--muted); margin:-.5rem 0 1.5rem; overflow-wrap:anywhere; }
.loyalty .wdot { color:var(--line); }
.loyalty-p { color:var(--muted); overflow-wrap:anywhere; }
.loyalty-p strong { color:var(--text); }
.loyalty-btn { grid-column:1; grid-row:2; justify-self:start; margin-top:2rem; }
.loyalty-card { grid-column:2; grid-row:1 / span 2; display:block; width:220px; border:2px solid var(--line); border-radius:22px; overflow:hidden; background:var(--card2); color:var(--text); text-decoration:none; }
.loyalty-card:focus-visible { outline:2px solid var(--orange); outline-offset:4px; }
.lc-top { background:#fff; padding:12px 12px 10px; text-align:center; }
.lc-qr { display:block; width:100%; height:auto; }
.lc-qr path { fill:#000; }
.lc-cap { display:block; margin-top:4px; color:var(--bg); font-size:.78rem; font-weight:700; }
.lc-stub { border-top:2px dashed var(--violet); padding:12px 14px 14px; }
.lc-prog { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; margin-bottom:12px; }
.lc-count { font-family:var(--head); font-weight:800; font-size:1.6rem; line-height:1; flex:none; }
.lc-next { color:var(--muted); font-size:.72rem; line-height:1.3; text-align:right; overflow-wrap:anywhere; }
.lc-slots { list-style:none; display:grid; gap:8px; }
.lc-slots.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.lc-slots.cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.lc-slots.cols-5 { grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.lc-slot { display:grid; place-items:center; aspect-ratio:1; color:var(--muted); }
.lc-slot > svg { grid-area:1 / 1; width:100%; height:100%; fill:none; stroke:currentColor; }
/* The stamp inks in turn; .lc-slot's own colour would otherwise win over .pink, .orange and .teal. */
.lc-slot.pink { color:var(--pink); } .lc-slot.orange { color:var(--orange); } .lc-slot.teal { color:var(--teal); }
.lc-slot.is-stamped > svg { fill:currentColor; stroke:none; }
.lc-slot.is-stamped .ring { fill:none; stroke:currentColor; }
.lc-slot .arch { fill:none; stroke:var(--card2); }
.lc-label { grid-area:1 / 1; max-width:100%; font-size:.68rem; font-weight:700; line-height:1.1; text-align:center; overflow-wrap:anywhere; }
.lc-slots.cols-5 .lc-label { font-size:.52rem; }
.lc-slot.is-reward { color:var(--text); }
@media (max-width:760px) {
  .loyalty { grid-template-columns:minmax(0,1fr); }
  .loyalty-card { grid-column:1; grid-row:auto; justify-self:center; margin-top:2rem; }
  .loyalty-btn { grid-column:1; grid-row:auto; justify-self:stretch; width:100%; }
  .loyalty .wline { font-size:1.1rem; }
}

/* spec 74 */
.contact > h1 { text-align:center; font-size:clamp(2.2rem,5vw,3.4rem); margin-bottom:1rem; }
.contact > .sub { color:var(--muted); max-width:46ch; margin-bottom:2rem; }
.contact-card { max-width:640px; margin-inline:auto; }
.contact-form { display:flex; flex-direction:column; }
.contact-form[hidden] { display:none; }
.contact-form label { font-weight:700; margin:0 0 .4rem; }
.contact-form input, .contact-form textarea { width:100%; min-height:48px; margin-bottom:1.25rem; padding:.75rem .9rem; border:1px solid #7864b0; border-radius:10px; background:var(--bg2); color:var(--text); font:inherit; }
.contact-form textarea { resize:vertical; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible, .contact-form .btn:focus-visible { outline:3px solid #b28cff; outline-offset:2px; }
.contact-form .btn { align-self:flex-start; cursor:pointer; font-family:inherit; }
.contact-form .btn:active { transform:scale(.98); }
.contact-hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.contact-privacy { margin-top:1rem; color:var(--muted); font-size:.9rem; }
.contact-privacy a { color:var(--orange); font-weight:700; }
.contact-result { margin-bottom:1.25rem; padding:.9rem 1rem; border-radius:12px; font-weight:700; }
.contact-result.is-sent { background:#123b3d; color:#5fe0d6; margin-bottom:0; }
.contact-result.is-warn { background:#3d2a12; color:#ffc274; }
.contact-result.is-error { background:#3d1218; color:#ff7380; }
nav a[aria-current="page"] { text-decoration-color:currentColor; }
@media (max-width:760px) {
  .contact-form .btn { align-self:stretch; }
}