/* Lumos Latin prototype. Light, calm, brand colours as accents. */
:root {
  --yellow: #ffdb6e;          /* brand yellow, highlights only */
  --yellow-soft: #fffaea;     /* soft highlights, used sparingly */
  --yellow-line: #f3e3b3;
  /* Pauline, 24 Oct 2026 (later): back to the original pink (commit 9dd685f). The "Highlight colour" switch
     (feedback.js, data-color on <html>) can swap all of these for a soft purple, see html[data-color="Purple"] below. */
  --pink: #cf2c98;            /* the one button (brand pink, darkened for readable white text, 4.7:1) */
  --pink-hover: #b72486;
  /* Pauline, 25 Oct 2026: a separate button colour, so the "Button colour" switch (data-btn) and the
     "Highlight colour" switch (data-color) do not fight. Written out, not var(--pink): the data-color options
     change --pink on the same element, and the buttons must not follow that. */
  --btn: #cf2c98;
  --btn-hover: #b72486;
  --fade-a: #f7a8d0;          /* heading highlight fade: start, middle (55%), end */
  --fade-m: #fbc6e0;
  --fade-b: #fde1ee;
  --swish: #f4c0d1;           /* the little swish in the dance icons */
  --ink: #141414;             /* black text */
  --muted: #4e4b46;
  --line: #e6e4df;
  --white: #ffffff;
  --r: 7px;
  --wrap: 1120px;
  --head: "Oswald", "Arial Narrow", sans-serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 16px/1.5 var(--body);
}
img, svg { max-width: 100%; display: block; }
main { min-height: calc(100vh - 420px); }
a { color: inherit; }
h1, h2, h3 { font-family: var(--head); font-weight: 600; line-height: 1.15; margin: 0 0 .4em; letter-spacing: .005em; }
h1 { font-size: clamp(28px, 4.2vw, 42px); }
h2 { font-size: clamp(24px, 3.2vw, 32px); }
h3 { font-size: 20px; }
p { margin: 0 0 .75em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

/* hand-drawn yellow marker behind a word */
.mark {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12c30-6 70-8 110-7 30 1 55 2 84 6l-2 6c-40-3-75-4-110-3-28 1-52 2-80 5z' fill='%23ffdb6e'/%3E%3C/svg%3E") no-repeat 0 88% / 100% 55%;
  padding: 0 2px;
}
/* hand-drawn squiggle under section titles */
.sec-title { margin-bottom: 18px; }
.sec-title h2 { display: inline-block; position: relative; padding-bottom: 8px; margin-bottom: 4px; }
.sec-title h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 72px; height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 8'%3E%3Cpath d='M2 5c8-4 12 2 20-1s12-3 20 0 12 2 20-1c3-1 5-1 8 0' fill='none' stroke='%23ffdb6e' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
}
.sec-title p { color: var(--muted); max-width: 640px; margin: 0; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px 18px; border-radius: var(--r);
  font: 700 15px/1.2 var(--body); text-decoration: none; cursor: pointer;
  border: 1.5px solid var(--ink); background: var(--white); color: var(--ink);
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--yellow-soft); }
.btn-pink { background: var(--btn); border-color: var(--btn); color: #fff; }
.btn-pink:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn-yellow { background: var(--yellow); border-color: var(--yellow); }
.btn-yellow:hover { background: #ffd04a; }
.link { font-weight: 700; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.link:hover { text-decoration-color: var(--ink); }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); }
.hdr { display: flex; align-items: center; gap: 24px; min-height: 84px; }
.logo { display: block; flex-shrink: 0; }
.logo img { height: 76px; width: auto; margin: 4px 0; }
.site-footer .logo img { height: 96px; margin: 0; }
.main-nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.main-nav > a, .dd-btn {
  font: 500 15px/1 var(--body); text-decoration: none; padding: 10px 10px; border-radius: var(--r);
  background: none; border: 0; color: var(--ink); cursor: pointer;
}
.main-nav > a:hover, .dd-btn:hover, .main-nav > a.on, .dd-btn.on { background: var(--yellow-soft); }
.dd { position: relative; }
.dd-btn::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-3px) rotate(45deg); }
.dd-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 190px; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 8px 24px rgba(31,27,22,.08);
  display: none;
}
.dd.open .dd-menu { display: block; }
@media (hover: hover) { .dd:hover .dd-menu { display: block; } }
.dd-menu a { display: block; padding: 9px 10px; border-radius: 5px; text-decoration: none; font-weight: 500; }
.dd-menu a span { display: block; font-size: 13px; color: var(--muted); font-weight: 400; }
.dd-menu a:hover { background: var(--yellow-soft); }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lang { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.lang a { display: block; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--line); opacity: .5; transition: opacity .15s; }
.lang a svg { width: 100%; height: 100%; }
.lang a:hover { opacity: .85; }
.lang a.on { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--yellow); }
.menu-btn { display: none; }

@media (max-width: 960px) {
  .hdr { min-height: 72px; gap: 12px; }
  .logo img { height: 62px; margin: 3px 0; }
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px 16px 16px;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 10px 20px rgba(31,27,22,.06);
  }
  .main-nav.open { display: flex; }
  .main-nav > a, .dd-btn { padding: 14px 6px; font-size: 17px; text-align: left; width: 100%; border-bottom: 1px solid var(--line); border-radius: 0; }
  .dd-btn::after { display: none; }
  .dd-menu { display: block !important; position: static; box-shadow: none; border: 0; padding: 0 0 6px 12px; min-width: 0; }
  .hdr-cta { display: none; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px;
    background: #fff; border: 1.5px solid var(--ink); border-radius: var(--r); font: 700 14px/1 var(--body); color: var(--ink); cursor: pointer;
  }
  .menu-btn i { display: block; width: 16px; height: 2px; background: var(--ink); position: relative; }
  .menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: var(--ink); }
  .menu-btn i::before { top: -5px; } .menu-btn i::after { top: 5px; }
}

/* sections */
.sec { padding: 56px 0; }
.sec-soft { background: var(--yellow-soft); }
.sec-tight { padding: 40px 0; }
.sec:not(.sec-soft) + .sec:not(.sec-soft) { padding-top: 8px; }
@media (max-width: 640px) { .sec { padding: 40px 0; } .sec-tight { padding: 32px 0; } .sec:not(.sec-soft) + .sec:not(.sec-soft) { padding-top: 4px; } }

.page-head { padding: 40px 0 30px; background: #fff; border-bottom: 1px solid var(--line); }
.page-head p { max-width: 640px; color: var(--muted); margin: 0; font-size: 17px; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.crumbs a { color: var(--muted); }

/* hero + question flow */
.hero { position: relative; isolation: isolate; padding: 48px 0 40px; min-height: 520px; display: flex; align-items: center; }
.photo-tag { position: absolute; right: 12px; bottom: 10px; z-index: -1; font-size: 11px; background: rgba(255,255,255,.85); padding: 3px 7px; border-radius: 4px; color: var(--muted); }
.q-card {
  width: 100%; max-width: 580px; background: #fff; border-radius: var(--r);
  box-shadow: 0 10px 30px rgba(20,20,20,.10); padding: 26px 26px 20px;
}
.q-step { font: 600 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.q-back { background: none; border: 0; padding: 4px 0; font: 600 13px/1 var(--body); color: var(--ink); cursor: pointer; text-decoration: underline; text-transform: none; letter-spacing: 0; }
.q-card h1, .q-card h2.q { font-size: clamp(26px, 3.6vw, 34px); margin-bottom: 16px; }
.q-opts { display: grid; gap: 10px; }
.q-opts.cols-2 { grid-template-columns: 1fr 1fr; }
.q-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 56px; padding: 12px 16px; text-align: left; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r);
  font: 600 17px/1.25 var(--body); color: var(--ink); transition: border-color .12s, background .12s;
}
.q-opt small { display: block; font-weight: 400; font-size: 14px; color: var(--muted); margin-top: 2px; }
.q-opt::after { content: ""; flex-shrink: 0; width: 9px; height: 9px; border-right: 2px solid var(--ink); border-top: 2px solid var(--ink); transform: rotate(45deg); opacity: .5; }
.q-opt:hover, .q-opt:focus-visible { border-color: var(--ink); background: var(--yellow-soft); outline: none; }
.q-opt:hover::after { opacity: 1; }
.q-skip { display: inline-block; margin-top: 14px; font-size: 15px; }
.q-note { font-size: 14px; color: var(--muted); margin: -6px 0 14px; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.compare div { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.compare h3 { font-size: 19px; margin-bottom: 6px; }
.compare ul { margin: 0; padding-left: 18px; font-size: 15px; }

.answer-eyebrow { display: inline-block; background: var(--yellow); font: 700 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 6px 8px; border-radius: 4px; margin-bottom: 12px; }
.answer h2 { font-size: clamp(25px, 3.4vw, 32px); margin-bottom: 12px; }
.answer-intro { color: var(--muted); }
.class-rows { list-style: none; margin: 0 0 14px; padding: 0; border-top: 1px solid var(--line); }
.class-rows li { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.class-rows .when { font: 600 17px/1.2 var(--head); min-width: 92px; }
.class-rows .what { font-size: 15px; }
.class-rows .what b { display: block; }
.class-rows .what span { color: var(--muted); }
.ticks { list-style: none; margin: 0 0 16px; padding: 0; }
.ticks li { position: relative; padding-left: 26px; margin-bottom: 6px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px; border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(-45deg); }
.extra { background: var(--yellow-soft); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; font-size: 15px; }
.extra b { display: block; font-family: var(--head); font-weight: 600; font-size: 17px; }
.answer-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.answer-foot { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: 14px; }
.answer-foot button { background: none; border: 0; padding: 0; font: 600 14px/1.4 var(--body); color: var(--ink); text-decoration: underline; cursor: pointer; }
.welcome-back { font-size: 14px; color: var(--muted); margin: -4px 0 10px; }

@media (max-width: 640px) {
  .hero { min-height: 0; padding: 20px 0 24px; align-items: flex-start; }
  .hero { background: var(--yellow-soft); }
  .hero .wrap { padding: 0 16px; }
  .q-card { margin-top: 110px; padding: 20px 16px 16px; }
  .photo-tag { top: 10px; bottom: auto; }
  .q-opts.cols-2 { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr 1fr; gap: 8px; }
  .compare div { padding: 10px; }
  .compare ul { padding-left: 16px; font-size: 14px; }
  .answer-actions .btn { width: 100%; }
}

/* grids and cards */
.grid { display: grid; gap: 16px; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) { .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .g3, .g2 { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .g4 { grid-template-columns: 1fr; } .g4.team { grid-template-columns: 1fr 1fr; gap: 10px; } .g4.team .card { padding: 14px 10px; } .g4.team .ph { width: 76px; height: 76px; font-size: 28px; } .g4.team .line { font-size: 13.5px; } }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.sec-soft .card { border-color: var(--yellow-line); }
.card h3 { margin-bottom: 6px; }
.card p:last-child { margin-bottom: 0; }

.dance-card { display: flex; flex-direction: column; text-decoration: none; transition: border-color .12s; }
.dance-card:hover { border-color: var(--ink); }
.dance-card h3 { font-size: 24px; }
.dance-card p { color: var(--muted); flex: 1; }
.dance-card .go { font-weight: 700; margin-top: 4px; }
.dance-card .go::after { content: " \2192"; }

.steps { counter-reset: s; }
.step { position: relative; padding-top: 18px; }
.step-num { width: 38px; height: 38px; border-radius: 50%; background: var(--yellow); display: flex; align-items: center; justify-content: center; font: 700 19px/1 var(--head); margin-bottom: 12px; }
.step h3 .price { white-space: nowrap; }
.nowrap { white-space: nowrap; } /* Amin, 25 Oct 2026: "you-time" stays on one line */
.step p { color: var(--muted); }

.worry h3 { display: flex; align-items: center; gap: 10px; }
.worry h3 svg { width: 28px; height: 28px; flex-shrink: 0; }

.teacher { text-align: center; }
.teacher .ph { width: 112px; height: 112px; border-radius: 50%; margin: 0 auto 12px; background: var(--yellow-soft); border: 2px dashed #e8c766; display: flex; align-items: center; justify-content: center; font: 600 36px/1 var(--head); color: #b8952e; }
.teacher h3 { margin-bottom: 2px; }
.teacher .role { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.placeholder { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: #fff; border: 1px dashed #c9a43c; color: #8a6d14; padding: 2px 6px; border-radius: 4px; margin-bottom: 6px; }
.teacher .line { font-size: 15px; color: var(--muted); font-style: italic; }

.rating { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.rating .big { font: 600 44px/1 var(--head); }
.stars { color: #e3a500; font-size: 20px; letter-spacing: 2px; }
.quote { display: flex; flex-direction: column; }
.quote blockquote { margin: 0 0 12px; font-size: 16px; flex: 1; }
.quote blockquote::before { content: "\201C"; display: block; font: 700 40px/0.6 Georgia, serif; color: var(--yellow); margin: 8px 0 6px; }
.quote cite { font-style: normal; font-weight: 700; font-size: 14px; }
.quote cite span { font-weight: 400; color: var(--muted); }

/* map */
.map-wrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .map-wrap { grid-template-columns: 1fr; } }
.map { border: 1px solid var(--yellow-line); border-radius: var(--r); background: #fffdf6; overflow: hidden; }
.map svg { width: 100%; height: auto; }
.studio-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.studio-list li { display: flex; gap: 12px; background: #fff; border: 1px solid var(--yellow-line); border-radius: var(--r); padding: 14px; }
.pin-num, .studio-list .pin-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; font: 700 15px/1 var(--head); }
.studio-list b { display: block; font-family: var(--head); font-weight: 600; font-size: 18px; }
.studio-list span { display: block; font-size: 14px; color: var(--muted); }
.studio-list .tags { margin-top: 4px; color: var(--ink); }

.tag { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 3px 8px; border-radius: 4px; background: var(--yellow-soft); border: 1px solid var(--yellow-line); margin: 0 4px 4px 0; }

/* this month */
.event-card { display: grid; grid-template-columns: auto 1fr; gap: 18px; }
.date-box { width: 76px; text-align: center; border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; align-self: start; }
.date-box .m { background: var(--yellow); font: 700 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; padding: 6px 0; }
.date-box .d { font: 600 34px/1 var(--head); padding: 8px 0 2px; }
.date-box .w { font-size: 12px; color: var(--muted); padding-bottom: 7px; }
.meta { list-style: none; padding: 0; margin: 0 0 14px; font-size: 15px; }
.meta li { margin-bottom: 3px; }
.meta li b { display: inline-block; min-width: 0; }

/* dance pages: level ladder */
.ladder { display: grid; gap: 14px; }
.level { display: grid; grid-template-columns: 120px 1fr; gap: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.level-badge { text-align: center; align-self: start; }
.level-badge .n { font: 600 34px/1 var(--head); background: var(--yellow); border-radius: var(--r); padding: 12px 0 10px; }
.level-badge .nm { font: 600 15px/1.2 var(--body); margin-top: 8px; }
.level h3 { font-size: 22px; }
.you-if { background: #fdeef5; padding: 10px 12px; border-radius: var(--r); margin-bottom: 10px; }
.you-if b { font-family: var(--head); font-weight: 600; }
.learn { color: var(--muted); }
.dates { font-size: 14px; margin: 10px 0 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.dates span b { font-weight: 700; }
@media (max-width: 640px) {
  .level { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
  .level-badge { display: flex; align-items: center; gap: 12px; text-align: left; }
  .level-badge .n { width: 64px; font-size: 26px; padding: 9px 0 7px; text-align: center; }
  .level-badge .nm { margin: 0; font-size: 17px; }
  .level .btn-pink { width: 100%; }
}

/* schedule */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip { font: 600 14px/1 var(--body); padding: 10px 13px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--yellow); border-color: var(--yellow); }
.chip-sep { width: 100%; height: 0; }
.chip-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); width: 100%; margin: 4px 0 -2px; }
.sched { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sched li { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.sched li[hidden] { display: none; }
.sched .when b { display: block; font: 600 18px/1.1 var(--head); }
.sched .when span { font: 600 22px/1.1 var(--head); }
.sched .what b { display: block; font-size: 17px; }
.sched .what span { display: block; color: var(--muted); font-size: 14.5px; }
.sched .what .lvl { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: var(--yellow-soft); border: 1px solid var(--yellow-line); margin-left: 6px; vertical-align: 2px; }
.empty { padding: 24px 0; color: var(--muted); }
@media (max-width: 560px) {
  .sched li { grid-template-columns: 64px 1fr; gap: 6px 12px; }
  .sched .when b { font-size: 16px; }
  .sched .when span { font-size: 19px; }
  .sched .book { grid-column: 2; justify-self: start; }
  .sched .book .btn { min-height: 38px; padding: 8px 16px; }
}

/* prices */
.price-card { display: flex; flex-direction: column; position: relative; }
.price-card.pop { border: 2px solid var(--ink); }
.badge { position: absolute; top: -12px; left: 16px; background: var(--yellow); font: 700 12px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 6px 8px; border-radius: 4px; }
.price { font: 600 44px/1 var(--head); margin: 6px 0 4px; }
.price small { font-size: 18px; font-weight: 500; }
.price-card .what { color: var(--muted); margin-bottom: 12px; }
.price-card ul { padding-left: 18px; margin: 0 0 16px; font-size: 15px; flex: 1; }
.price-card .tbd { font-size: 12.5px; color: #8a6d14; }
.note-line { margin-top: 18px; padding: 14px 16px; border-radius: var(--r); background: var(--yellow-soft); border: 1px solid var(--yellow-line); }

/* faq */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 30px 16px 0; font: 600 18px/1.3 var(--head); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font: 400 26px/1 var(--body); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--muted); padding-bottom: 6px; }

.contact-card a.big { font: 600 22px/1.2 var(--head); text-decoration: none; display: block; margin: 4px 0 6px; word-break: break-word; }

/* footer */
.site-footer { background: var(--yellow-soft); border-top: 1px solid var(--yellow-line); padding: 44px 0 28px; margin-top: 0; font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; } .foot-grid > div:first-child { grid-column: 1 / -1; } }
.site-footer h4 { font: 600 16px/1.2 var(--head); margin: 0 0 10px; letter-spacing: .02em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 6px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.foot-bottom { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--yellow-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
.proto-flag { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; font: 600 12px/1.2 var(--body); background: var(--yellow-soft); color: #6b5410; padding: 6px 12px; border-bottom: 1px dashed #e2c46a; }
.proto-flag > span { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 700; }

/* try-out line in class rows */
.class-rows .what .try, .sched .what .try { display: block; color: var(--ink); font-size: 13.5px; font-weight: 600; margin-top: 2px; }
.class-rows .what .try::before, .sched .what .try::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); margin-right: 6px; vertical-align: 1px; }

/* price ladder + membership table */
.price-card .step-n { width: 28px; height: 28px; border-radius: 50%; background: var(--yellow-soft); border: 1.5px solid var(--yellow); display: grid; place-items: center; font: 700 14px/1 var(--head); margin-bottom: 8px; }
.price-card.pop .step-n { background: var(--yellow); }
.table-wrap { overflow-x: auto; border: 1px solid var(--yellow-line); border-radius: var(--r); background: #fff; }
.mtable { width: 100%; border-collapse: collapse; font-size: 15px; }
@media (max-width: 560px) {
  .table-wrap { border: 0; background: none; overflow: visible; }
  .mtable thead { display: none; }
  .mtable, .mtable tbody, .mtable tr, .mtable th, .mtable td { display: block; width: 100%; }
  .mtable tr { background: #fff; border: 1px solid var(--yellow-line); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; }
  .mtable th, .mtable td { padding: 3px 0; border: 0; }
  .mtable td { display: flex; justify-content: space-between; gap: 12px; }
  .mtable td::before { content: attr(data-label); color: var(--muted); }
}
.mtable th, .mtable td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.mtable thead th { font: 600 13px/1.2 var(--body); color: var(--muted); }
.mtable tbody th { font: 600 17px/1.2 var(--head); }
.mtable tr:last-child th, .mtable tr:last-child td { border-bottom: 0; }

/* ---------- shared blocks ---------- */
.eyebrow { display: inline-block; font: 700 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.lead { font-size: 18px; color: var(--muted); max-width: 560px; }
.btn-lg { min-height: 50px; padding: 12px 22px; font-size: 16px; }
.trust { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 18px; font-size: 14px; color: var(--muted); }
.trust .stars { font-size: 16px; }
.trust b { color: var(--ink); }
.trust a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--muted); }
.trust a:hover { text-decoration-color: var(--ink); }
.trust span + span:not(:first-of-type)::before { content: ""; }
.next-dates { margin: 16px 0 0; font-size: 15px; }
.ph-img { width: 100%; height: 100%; border-radius: var(--r); filter: sepia(.22) saturate(1.25) brightness(1.06); background: #c9a777 url("/assets/hero-placeholder.jpg") center 35% / cover no-repeat; }
.path { display: flex; flex-direction: column; }
.path p { color: var(--muted); flex: 1; }
.path-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: var(--r); font-weight: 700; text-decoration: none; background: #fff; }
.pill::after { content: "\2192"; margin-left: 8px; }
.pill:hover { background: var(--yellow-soft); }
.price-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.price-strip li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--yellow-line); border-radius: var(--r); padding: 16px; }
.ps-n { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; font: 700 15px/1 var(--head); }
.price-strip b { font-family: var(--head); font-weight: 600; font-size: 18px; }
.ps-p { font: 600 18px/1 var(--head); white-space: nowrap; }
.price-strip small { display: block; color: var(--muted); font-size: 14px; margin-top: 4px; }
@media (max-width: 760px) { .price-strip { grid-template-columns: 1fr; } }
.first-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.first-list li { background: #fff; border: 1px solid var(--yellow-line); border-radius: var(--r); padding: 16px 16px 16px 46px; position: relative; }
.first-list li::before { content: ""; position: absolute; left: 18px; top: 21px; width: 12px; height: 7px; border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(-45deg); }
.first-list b { display: block; font-family: var(--head); font-weight: 600; font-size: 18px; margin-bottom: 2px; }
.first-list span { color: var(--muted); font-size: 15px; }
@media (max-width: 680px) { .first-list { grid-template-columns: 1fr; } }
.answer-page .answer { max-width: 760px; padding: 26px; box-shadow: 0 10px 30px rgba(20,20,20,.08); }
.answer-page { background: var(--yellow-soft); }
.answer-page .answer h1 { font-size: clamp(26px, 3.6vw, 34px); }
.answer-foot a { font-weight: 600; }

.paths-compact .card { padding: 16px; }
h1, h2 { text-wrap: balance; }
.hero1-trust .trust { margin-top: 10px; }

/* round 1: try-out first in class rows */
.class-rows .when small, .sched .when small { display: block; font: 700 11px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--pink); margin-bottom: 2px; }
.class-rows .when span { display: block; font-size: 15px; color: var(--muted); }
.class-rows .when { min-width: 118px; }
.class-rows .what .course, .sched .what .course { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.class-rows .what .yi { display: block; font-size: 14px; color: var(--ink); background: #fdeef5; border-radius: 4px; padding: 2px 8px; margin: 3px 0; border-radius: 0 4px 4px 0; }
.pick-note { font-size: 13.5px; color: var(--muted); margin: 8px 0 0; }
.tip { background: #fff; border: 1.5px dashed var(--yellow); border-radius: var(--r); padding: 12px 14px; margin-bottom: 14px; font-size: 15px; }
.tip b { font-family: var(--head); font-weight: 600; font-size: 17px; margin-right: 4px; }
@media (max-width: 480px) { .class-rows li { flex-direction: column; gap: 4px; } .class-rows .when { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .class-rows .when small { margin: 0; } .class-rows .when span { display: inline; } }

/* round 2 */
.q-opt span small { display: block; }
.try-list { list-style: none; margin: 6px 0 8px; padding: 0; font-size: 15px; }
.try-list li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.try-list li b { font-family: var(--head); font-weight: 600; margin-right: 6px; }
.mini-dance b::after { content: " \2192"; font-family: var(--body); font-size: 15px; }
.try-list li b { display: block; margin: 0; }

/* round 3 */
.sched li { grid-template-columns: 118px 1fr auto; }
.sched .when b { font-size: 17px; }
.sched .when span { font-size: 17px; color: var(--muted); }
@media (max-width: 560px) { .sched li { grid-template-columns: 96px 1fr; } .sched .when b { font-size: 15px; } .sched .when span { font-size: 14px; } }
.tc-time i { display: block; font-style: normal; font: 700 10.5px/1.2 var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--pink); margin-bottom: 2px; }
.tc-time { font-size: 15px; }
.answer-page .answer { margin: 0 auto; }
.try-list li a { display: block; text-decoration: none; }
.try-list li a:hover { background: var(--yellow-soft); }
.try-list li a::after { content: " \2192"; font-weight: 700; }
.tip { font-size: 15px; }
.answer .tip { margin: 0 0 12px; }

/* round 4 */
.path-tip { font-size: 14px; margin: 10px 0 0; color: var(--muted); }
.path-tip a { font-weight: 700; color: var(--ink); }
.g2-paths { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .g2-paths { grid-template-columns: 1fr; } }
@media (max-width: 1100px) and (min-width: 761px) { .grid.g3 .event-card { grid-template-columns: 1fr; } }

/* round 5 */
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 13.5px; border-width: 1.5px; }
.class-rows li { flex-wrap: wrap; }
.class-rows .what { flex: 1; min-width: 200px; }
.row-book { align-self: center; }
@media (max-width: 480px) { .row-book { width: 100%; } .row-book .btn { width: 100%; } }
.pill-soft { border-color: var(--yellow); background: var(--yellow-soft); }
.path-tip { margin: 12px 0 6px; }
.answer-foot { flex-direction: column; gap: 8px; }
@media (max-width: 960px) { .answer-page { padding-bottom: 96px; } }

/* round 6 */
.class-rows li:target { background: #fdeef5; border-radius: var(--r); padding-left: 10px; scroll-margin-top: 110px; }
.try-list li a small { display: block; color: var(--muted); font-size: 13px; }
.answer .ticks { margin-top: 4px; }


/* ---------- round 8 (22 Oct 2026): Pauline's answers. White pages, yellow accent, black text, pink only for the main button ---------- */
.sec-soft { background: #fcfbf7; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-soft .card { border-color: var(--line); }
.proto-flag { background: #fff; color: var(--muted); border-bottom: 1px dashed var(--line); }
.btn-yellow { background: #fff; border-color: var(--ink); }
.btn-yellow:hover { background: var(--yellow-soft); }

/* hero: real photo, slogan, dances, next event, question card */
.hero { min-height: 580px; padding: 44px 0; }
.hero-in { display: grid; grid-template-columns: 1fr 500px; gap: 40px; align-items: center; width: 100%; }
.hero-dances { font: 600 15px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 10px; }
.hero-text h1 { font-size: clamp(42px, 6vw, 70px); line-height: 1.02; margin-bottom: 14px; }
.hero-text h1::after { content: ""; display: block; width: 110px; height: 6px; margin-top: 14px; background: var(--yellow); border-radius: 3px; }
.hero-sub { font-size: 18px; max-width: 460px; }
.hero-note { margin: 12px 0 0; background: rgba(255,255,255,.95); padding: 8px 12px; border-radius: var(--r); }
.next-up { display: inline-flex; align-items: center; gap: 10px; margin: 4px 0 6px; padding: 8px 14px 8px 8px; background: #fff; border: 1.5px solid var(--ink); border-radius: var(--r); text-decoration: none; font-size: 15px; }
.next-up i { font-style: normal; background: var(--yellow); font: 700 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 6px 7px; border-radius: 4px; flex-shrink: 0; }
.next-up:hover { background: var(--yellow-soft); }
.q-card { box-shadow: 0 10px 34px rgba(0,0,0,.12); }
.q-card h2.q { font-size: clamp(24px, 3vw, 30px); }
@media (max-width: 960px) {
  .hero-in { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .hero { background: #fff; padding: 0 0 24px; }
  .hero-text { margin-top: 230px; }
  .hero-text h1 { font-size: 42px; }
  .hero-dances { font-size: 13px; }
  .hero-sub { font-size: 16px; }
  .q-card { margin-top: 0; }
  .next-up { font-size: 14px; }
}

/* latest news */
.news-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; align-items: stretch; }
.news-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.news-card .nc-img { aspect-ratio: 16 / 9; background: #f4f2ec center 30% / cover no-repeat; }
.news-card .nc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.news-card .nc-when { font: 700 12px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.news-card h3 { margin-bottom: 6px; }
.news-card p { color: var(--muted); font-size: 15px; flex: 1; }
.news-card.first { border: 2px solid var(--ink); }
.news-card.first .nc-when { color: var(--ink); }
.news-card.first .nc-when::before { content: attr(data-first); background: var(--yellow); padding: 3px 6px; border-radius: 4px; margin-right: 8px; }
@media (max-width: 900px) { .news-grid { grid-template-columns: 1fr; } }

/* video */
.video-wrap { max-width: 760px; margin: 0 auto; }
.video-wrap video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r); background: #000; display: block; }
.video-wrap p { text-align: center; color: var(--muted); font-size: 14px; margin-top: 8px; }

/* buttons instead of links */
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 520px) { .page-actions .btn { flex: 1 1 100%; } }
.cta-band { text-align: center; }
.cta-band .page-actions { justify-content: center; }

/* course table on dance pages */
.ctable { width: 100%; border-collapse: collapse; background: #fff; }
.ctable th, .ctable td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 15px; }
.ctable thead th { font: 600 13px/1.2 var(--body); color: var(--muted); background: #fcfbf7; }
.ctable tbody th { font: 600 18px/1.2 var(--head); white-space: nowrap; }
.ctable small { display: block; color: var(--muted); font: 400 13.5px/1.35 var(--body); margin-top: 2px; }
.ctable .ct-book { text-align: right; vertical-align: middle; }
@media (max-width: 820px) {
  .table-wrap:has(.ctable) { border: 0; overflow: visible; }
  .ctable, .ctable tbody, .ctable tr, .ctable th, .ctable td { display: block; }
  .ctable thead { display: none; }
  .ctable { background: none; }
  .ctable tr { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 12px; padding: 12px 14px; background: #fff; }
  .ctable th, .ctable td { border: 0; padding: 4px 0; }
  .ctable td[data-label]::before { content: attr(data-label); display: block; font: 700 11.5px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .ctable .ct-book { text-align: left; padding-top: 10px; }
  .ctable .ct-book .btn { width: 100%; }
}
.lvl-card .level-badge { text-align: left; margin-bottom: 10px; }
.lvl-card .level-badge .n { display: inline-block; padding: 8px 12px 6px; font-size: 24px; }

/* studios: fold-out list per studio */
.studio-page { display: grid; grid-template-columns: 1fr 420px; gap: 24px; align-items: start; }
.studio-page .map { position: sticky; top: 110px; }
@media (max-width: 900px) { .studio-page { grid-template-columns: 1fr; } .studio-page .map { position: static; order: -1; } }
.studio-fold { border: 1px solid var(--line); border-radius: var(--r); background: #fff; margin-bottom: 12px; }
.studio-fold[open] { border-color: var(--ink); }
.studio-fold summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: flex-start; padding: 16px; }
.studio-fold summary::-webkit-details-marker { display: none; }
.studio-fold summary::after { content: ""; margin-left: auto; flex-shrink: 0; width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); margin-top: 8px; transition: transform .15s; }
.studio-fold[open] summary::after { transform: rotate(-135deg); margin-top: 12px; }
.sf-main b { display: block; font: 600 20px/1.2 var(--head); }
.sf-main span { display: block; color: var(--muted); font-size: 14.5px; }
.sf-main .sf-tags { color: var(--ink); font-weight: 600; margin-top: 2px; }
.sf-body { padding: 0 16px 16px; }
.sd-list { list-style: none; margin: 0 0 12px; padding: 0; }
.sd-list .sd-day { font: 700 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 12px 0 6px; border-bottom: 2px solid var(--yellow); }
.sd-list li:not(.sd-day) { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sd-time { font: 600 17px/1.2 var(--head); }
.sd-what b { display: block; }
.sd-what span { display: block; color: var(--muted); font-size: 14px; }
@media (max-width: 560px) { .sd-list li:not(.sd-day) { grid-template-columns: 1fr; gap: 4px; } .sd-list .btn { width: 100%; } }

/* events page */
.ev-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ev-lead { margin-top: 12px; }
.ev-sec { scroll-margin-top: 100px; }
.ev-list { display: grid; gap: 14px; }
.ev-item { display: grid; grid-template-columns: 76px 1fr 200px; gap: 18px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.ev-item .ev-img { aspect-ratio: 4 / 3; border-radius: var(--r); background: #f4f2ec center 30% / cover no-repeat; }
.ev-item h3 { margin-bottom: 4px; }
.ev-item .meta { margin: 0 0 8px; padding: 0; list-style: none; color: var(--muted); font-size: 14.5px; }
.ev-item p { color: var(--muted); font-size: 15px; }
.ev-item.past { opacity: .72; }
.ev-earlier { font-size: 16px; letter-spacing: .06em; text-transform: uppercase; margin: 24px 0 10px; color: var(--muted); }
.ev-empty { background: #fff; border: 1px dashed var(--line); border-radius: var(--r); padding: 18px; color: var(--muted); margin: 0; }
@media (max-width: 760px) { .ev-item { grid-template-columns: 66px 1fr; } .ev-item .ev-img { grid-column: 1 / -1; order: -1; aspect-ratio: 16 / 9; } }
.news-card .nc-price { display: grid; place-items: center; background: var(--yellow-soft); border-bottom: 1px solid var(--yellow-line); }
.news-card .nc-price span { font: 700 64px/1 var(--head); }
.btn { white-space: nowrap; }
.site-footer { background: #fcfbf7; border-top: 1px solid var(--line); }
.loops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.loops video { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); background: #f4f2ec; display: block; }
@media (max-width: 760px) { .loops { grid-template-columns: 1fr 1fr; gap: 8px; } }
.video-wrap { max-width: 900px; margin: 0; }
.video-wrap video { aspect-ratio: 2 / 1; object-fit: cover; }
.ico-link { display: inline-flex; align-items: center; gap: 8px; }
.ico { width: 18px; height: 18px; flex-shrink: 0; }
.studios-line .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.studios-line p { margin: 0; font-size: 17px; }
.video-wrap { max-width: none; }
.video-wrap video { aspect-ratio: 12 / 5; }
@media (max-width: 640px) { .video-wrap video { aspect-ratio: 2 / 1; } }

/* ---------- heading highlight (Amin picked "Blush", 22 Oct 2026): replaces the yellow squiggle, the hero bar, the word marker and the yellow link underline ---------- */
.sec-title h2 { padding-bottom: 0; }
.sec-title h2::after, .hero-text h1::after { content: none; }
/* 24 Oct 2026: border-radius rounds the whole line box, but the colour only fills its lower part, so the top of the
   stroke stayed square. The stroke is now drawn as three layers: a rounded end cap left, the fade in the middle, a
   rounded end cap right (each cap is half an ellipse). --cl/--cr = cap widths, --bh = stroke height, --by = its place.
   Shape A (default) is the original stroke from 22 Oct (flat fill, hand-drawn corners). Shapes B and C: see data-shape. */
.hl, .mark { position: relative; display: inline; padding: 0 .12em; margin: 0 -.06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(100deg, var(--fade-a) 0%, var(--fade-m) 55%, var(--fade-b) 100%) 0 88% / 100% 58% no-repeat;
  border-radius: 4px 14px 6px 18px / 10px 4px 12px 5px; }
.link { text-decoration: none; font-weight: 700; padding: 0 3px; border-radius: 3px;
  background: linear-gradient(100deg, var(--fade-a), var(--fade-b)) 0 92% / 100% 38% no-repeat; }
.link:hover { background-size: 100% 70%; }

/* Amin, 25 Oct 2026: no sticky phone button and no comment button any more, so the footer ends with its normal padding */
.site-footer { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }

/* ---------- craft check (22 Oct 2026): heading order, keyboard focus, anchors, touch targets, reduced motion ---------- */
.site-footer h2.foot-h { font: 600 16px/1.2 var(--head); margin: 0 0 10px; letter-spacing: .02em; }
h2.card-h { font-size: 20px; margin-bottom: .4em; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 2px; }
[id] { scroll-margin-top: 110px; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 32px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ---------- design audit (22 Oct 2026) ---------- */
/* the dances line sits under the slogan as a plain line, not as a label above it */
.hero-dances { font: 600 22px/1.3 var(--head); letter-spacing: .02em; text-transform: none; margin: 0 0 12px; }
.hero-text h1 { margin-bottom: 8px; }
@media (max-width: 640px) { .hero-dances { font-size: 19px; } }
/* readable initials on the teacher placeholders */
.teacher .ph { color: #7a5c0e; }
/* answer buttons wrap to two lines: give them room */
.q-opt { line-height: 1.35; }
/* browser surfaces in the palette */
::selection { background: var(--fade-m); color: var(--ink); }
html { accent-color: var(--pink); }


/* ---------- design review changes (preview, 22 Oct 2026) ---------- */
.hero-text h1 { margin-bottom: 16px; }
.hero--answer .hero-in { align-items: start; }
@media (min-width: 961px) { .hero--answer .hero-text { position: sticky; top: 120px; } }
@media (max-width: 640px) { .hero-text { margin-top: 190px; } .hero1-trust { display: none; } }
.you-if, .class-rows .what .yi, .class-rows li:target { background: var(--yellow-soft); }
.class-rows .when small, .sched .when small { color: var(--muted); }
.chips-grouped { display: grid; gap: 10px; margin-bottom: 18px; }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip-row .chip-label { width: 64px; margin: 0; flex-shrink: 0; }
@media (max-width: 640px) { .chip-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .chip-row .chip { flex-shrink: 0; } }
.q-step { text-transform: none; letter-spacing: 0; font: 500 14px/1 var(--body); }

@media (min-width: 961px) {
  .hero--answer { background: #fff; }
}

/* answer: the way back to the questions sits at the top (Amin, 22 Oct 2026) */
.answer-top { margin: -4px 0 12px; align-items: flex-start; }
.answer-top span { color: var(--muted); font-size: 14px; line-height: 1.35; }
.answer-top .q-back { flex-shrink: 0; }

/* ---------- 22 Oct 2026 (Amin): taller header, four menu items, even footer, icons, All events beside its heading ---------- */
.hdr { min-height: 96px; }
.logo img { height: 80px; margin: 8px 0; }
@media (max-width: 960px) { .hdr { min-height: 80px; } .logo img { height: 64px; margin: 8px 0; } }
.main-nav { margin-left: 28px; gap: 10px; }
.foot-grid { grid-template-columns: 1.3fr repeat(5, 1fr); gap: 28px; }
@media (max-width: 1100px) { .foot-grid { grid-template-columns: repeat(3, 1fr); } .foot-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 22px 16px; } }
.dance-ico { width: 76px; height: 76px; margin: 0 0 8px -8px; }
.dance-ico .ln { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dance-ico .hd { fill: var(--ink); stroke: none; }
.dance-ico .floor { fill: #ffe58f; transition: fill .2s; }
.dance-card:hover .dance-ico .floor { fill: #ffd84d; }
.dance-ico .swish { fill: none; stroke: var(--swish); stroke-width: 1.6; stroke-linecap: round; }
.sec-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.more-link { font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; padding: 4px 0; border-bottom: 2px solid var(--fade-m); }
.more-link::after { content: " \2192"; }
.more-link:hover { border-bottom-color: var(--ink); }
.nc-when { display: flex; align-items: center; gap: 6px; }
.nc-when .ico { width: 15px; height: 15px; flex-shrink: 0; }
.studios-line p { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.studios-line p .ico { width: 18px; height: 18px; }

/* ---------- answer, lighter (22 Oct 2026): chips, day tiles, one detail panel, the rest folded away ---------- */
.answer-v2 h2 { margin-bottom: 6px; }
.answer-v2 .answer-intro { margin: 0 0 12px; }
.chips-ok { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips-ok li { font-size: 13.5px; font-weight: 600; background: var(--yellow-soft); border-radius: 6px; padding: 5px 10px 5px 26px; position: relative; }
.chips-ok li::before { content: ""; position: absolute; left: 10px; top: 9px; width: 9px; height: 5px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.pick-label { font: 600 18px/1.2 var(--head); margin: 0 0 8px; }
.days { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-bottom: 12px; }
.day { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; text-align: left; font: inherit; color: var(--ink); transition: border-color .15s, background .15s; }
.day:hover { border-color: var(--ink); }
.day.on { border-color: var(--ink); background: var(--yellow-soft); box-shadow: inset 0 0 0 1px var(--ink); }
.day small { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.day b { font: 600 19px/1.15 var(--head); }
.day span { font-size: 14px; }
.day em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.day-detail { border-radius: 8px; background: #fffaea; padding: 14px 16px; margin-bottom: 12px; font-size: 15px; }
.day-detail p { margin: 0 0 6px; display: flex; gap: 8px; align-items: flex-start; }
.day-detail .ico { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; }
.day-detail .dd-name { display: block; }
.day-detail .dd-after { display: block; color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.day-detail .yi { display: block; font-size: 14px; }
.ans-more { border-top: 1px solid var(--line); padding-top: 10px; font-size: 15px; }
.ans-more summary { cursor: pointer; font-weight: 700; list-style: none; }
.ans-more summary::-webkit-details-marker { display: none; }
.ans-more summary::after { content: " +"; }
.ans-more[open] summary::after { content: " \2013"; }
.ans-more[open] summary { margin-bottom: 10px; }
.ans-more .answer-actions { gap: 16px; }
@media (max-width: 480px) { .days { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; } .day { padding: 9px 10px; } }

/* footer: the logo column is as short as the link columns; the about line moves to the bottom row */
.site-footer .logo img { height: 72px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }
.hero-note .note-link { display: table; margin-top: 4px; }

/* header: frosted glass, the page shows through blurred and the menu stays easy to read (Amin, 22 Oct 2026) */
.site-header { background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); border-bottom: 1px solid rgba(20,20,20,.08); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: rgba(255,255,255,.97); } }

/* hero runs up under the frosted header, so the blur shows before any scrolling (22 Oct 2026) */
:root { --hh: 97px; }
@media (max-width: 960px) { :root { --hh: 81px; } }
.hero { margin-top: calc(-1 * var(--hh)); }
.hero > .hero-in { margin-top: var(--hh); }
@media (min-width: 961px) { .hero { min-height: calc(580px + var(--hh)); } }

/* Bueno schedule frame on the schedule page (23 Oct 2026): no border, full width, height set by iframe-resizer */
.bueno-wrap { margin: 0 -20px; overflow: hidden; }
/* --bueno-trim hides the "Powered by Bueno" block at the foot of the frame (Amin, 23 Oct 2026: "trim it") */
.bueno-frame { display: block; width: 1px; min-width: 100%; min-height: 70vh; border: 0; background: #fff; margin-bottom: calc(-1 * var(--bueno-trim, 140px)); }
@media (min-width: 961px) { .bueno-wrap { margin: 0; } }

/* ==================== Pauline's review comments, 24 Oct 2026 ==================== */
/* 25 Oct 2026: HL_SHAPE in tools/build_prototype.py picks the shape (A, B or C). */
/* Highlight shapes B and C (switch "Highlight shape", data-shape on <html>): the stroke drawn as three layers with
   rounded end caps. B: moderately round, the two ends a little uneven so it looks hand-painted.
   C: a soft marker stroke with pill-like ends, a little taller. */
html[data-shape="B"] .hl, html[data-shape="B"] .mark, html[data-shape="C"] .hl, html[data-shape="C"] .mark {
  padding: 0 .16em; margin: 0 -.08em;
  --cl: .17em; --cr: .25em; --bh: 58%; --by: 88%;
  background:
    radial-gradient(farthest-side at 100% 50%, var(--fade-a) 94%, transparent) 0 var(--by) / var(--cl) var(--bh) no-repeat,
    radial-gradient(farthest-side at 0 50%, var(--fade-b) 94%, transparent) 100% var(--by) / var(--cr) var(--bh) no-repeat,
    linear-gradient(100deg, var(--fade-a) 0%, var(--fade-m) 55%, var(--fade-b) 100%) calc(var(--cl) - 1px) var(--by) / calc(100% - var(--cl) - var(--cr) + 2px) var(--bh) no-repeat;
  border-radius: 0; }
html[data-shape="C"] .hl, html[data-shape="C"] .mark { padding: 0 .24em; margin: 0 -.12em;
  --cl: .4em; --cr: .42em; --bh: 66%; --by: 92%; }
/* 25 Oct 2026: HL_COLOR in tools/build_prototype.py picks the colour (Pink, Purple, Lilac, Rose, Orchid or Moving). */
/* Highlight colour Purple (switch "Highlight colour", data-color on <html>): a soft lavender everywhere the pink is.
   Button #8a5cc9 with white text = 4.71:1 (the pink #cf2c98 is 4.7:1); hover #774bb5 is darker, so higher still. */
html[data-color="Purple"] { --pink: #8a5cc9; --pink-hover: #774bb5; --fade-a: #d8c7f6; --fade-m: #e5d9fa; --fade-b: #f0e6fc; --swish: #d6c4f3; }
/* Highlight colour Moving (Amin, 24 Oct 2026): the highlight slowly drifts pink -> orchid -> purple and back, about 12 s
   per round; the buttons stay pink. @property lets the browser blend the colour variables; people who turned off motion see the pink. */
@property --fade-a { syntax: '<color>'; inherits: true; initial-value: #f7a8d0; }
@property --fade-m { syntax: '<color>'; inherits: true; initial-value: #fbc6e0; }
@property --fade-b { syntax: '<color>'; inherits: true; initial-value: #fde1ee; }
@keyframes hl-drift {
  0%   { --fade-a: #f7a8d0; --fade-m: #fbc6e0; --fade-b: #fde1ee; }
  50%  { --fade-a: #e6b3ec; --fade-m: #efd0f3; --fade-b: #f7e6f9; }
  100% { --fade-a: #d8c7f6; --fade-m: #e5d9fa; --fade-b: #f0e6fc; }
}
html[data-color="Moving"] { animation: hl-drift 6s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { html[data-color="Moving"] { animation: none; } }
/* Highlight colour Lilac: button white text 5.09:1 */
html[data-color="Lilac"] { --pink: #b03fa8; --pink-hover: #9a3493; --fade-a: #f4b6e4; --fade-m: #f3cdee; --fade-b: #ebe0fb; --swish: #ebc3ec; }
/* Highlight colour Rose: button white text 4.65:1 */
html[data-color="Rose"] { --pink: #d2386a; --pink-hover: #b82d5b; --fade-a: #f9b4c2; --fade-m: #fccfd9; --fade-b: #fde8ee; --swish: #f6c3cf; }
/* Highlight colour Orchid: button white text 5.11:1 */
html[data-color="Orchid"] { --pink: #9f4ab4; --pink-hover: #8a3e9d; --fade-a: #e6b3ec; --fade-m: #efd0f3; --fade-b: #f7e6f9; --swish: #dfbde6; }
/* comment 19: all buttons a little rounder (not pills) */
:root { --rb: 11px; }
.btn, .menu-btn, .q-opt, .day, .next-up, .q-back { border-radius: var(--rb); }
/* comment 2: the second line of the intro on its own line */
.hero-sub2 { display: block; margin-top: 8px; font-weight: 600; }
/* comment 20: Reggaeton straight away, set a little apart from the three level answers */
.q-opt-reggaeton { border-style: dashed; }
/* comment 21: the "Next up" tag in the button colour */
.next-up i { background: var(--btn); color: #fff; }
/* comment 24: the €5 card on the left, bigger, it pops out */
.news-grid { grid-template-columns: 1.5fr 1fr 1fr; }
.news-card.nc-big .nc-price { aspect-ratio: auto; min-height: 210px; background: radial-gradient(circle at 30% 30%, #fff3c4 0%, #ffe58f 55%, #ffdb6e 100%); }
.news-card.nc-big .nc-price span { font-size: 120px; }
.news-card.nc-big { box-shadow: 0 14px 34px rgba(31,27,22,.12); }
.news-card.nc-big h3 { font-size: 26px; }
@media (max-width: 900px) { .news-grid { grid-template-columns: 1fr; } .news-card.nc-big .nc-price { min-height: 150px; } .news-card.nc-big .nc-price span { font-size: 92px; } }
/* comment 26: a fun "Free Salsa & Bachata Night" sticker */
.nc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.fun-sticker { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: #ffe58f; color: var(--ink); font: 700 13px/1.15 var(--head); letter-spacing: .02em; text-transform: uppercase; border: 1.5px solid var(--ink); border-radius: 8px; transform: rotate(-4deg); box-shadow: 3px 3px 0 var(--ink); }
.fun-sticker::before { content: "\2726"; font-size: 14px; }
.sf-main .fun-sticker--sm { display: inline-flex; width: auto; color: var(--ink); }
.fun-sticker--sm { display: inline-flex; margin: 4px 0 6px; font-size: 11.5px; padding: 5px 9px; transform: rotate(-2deg); box-shadow: 2px 2px 0 var(--ink); }
@media (prefers-reduced-motion: no-preference) { .fun-sticker { animation: sticker-wiggle 3.2s ease-in-out infinite; } }
@keyframes sticker-wiggle { 0%, 80%, 100% { transform: rotate(-4deg); } 86% { transform: rotate(3deg) scale(1.04); } 92% { transform: rotate(-6deg); } }
/* studios: the free social row (comment 15) and the live Bueno rows */
.sd-list li.sd-social { grid-template-columns: 110px 1fr; background: #fffaea; padding-left: 8px; padding-right: 8px; border-radius: 8px; }
.sd-free { color: var(--ink) !important; font-weight: 700; }
.sd-list li.sd-empty { display: block; color: var(--muted); font-size: 14.5px; padding: 10px 0; border-bottom: 0; }
.sd-feed-note { color: var(--muted); font-size: 13px; margin: -4px 0 10px; }
/* comment 38: the events page whiter, with elegant sparkly yellow fades */
.pg-events .page-head, .pg-events .ev-sec { position: relative; background: #fff; overflow: hidden; }
.pg-events .page-head::before, .pg-events .ev-sec::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 70% at 92% 0%, rgba(255,219,110,.42) 0%, rgba(255,219,110,0) 70%),
              radial-gradient(ellipse 40% 60% at 0% 100%, rgba(255,229,143,.38) 0%, rgba(255,229,143,0) 70%); }
.pg-events .ev-sec.sec-soft::before { background: radial-gradient(ellipse 50% 70% at 0% 0%, rgba(255,219,110,.4) 0%, rgba(255,219,110,0) 70%),
              radial-gradient(ellipse 45% 60% at 100% 100%, rgba(255,229,143,.36) 0%, rgba(255,229,143,0) 70%); }
.pg-events .page-head::after, .pg-events .ev-sec::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .9;
  background-image: radial-gradient(circle, #f2b81f 0 1.3px, transparent 1.8px), radial-gradient(circle, #ffd04a 0 1px, transparent 1.5px), radial-gradient(circle, #fff3c4 0 2px, transparent 2.6px);
  background-size: 140px 120px, 90px 110px, 210px 170px; background-position: 12px 18px, 60px 70px, 120px 30px;
  -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 75%); mask-image: linear-gradient(100deg, transparent 20%, #000 75%); }
@media (prefers-reduced-motion: no-preference) { .pg-events .page-head::after, .pg-events .ev-sec::after { animation: twinkle 4.5s ease-in-out infinite alternate; } }
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }
.pg-events .page-head > .wrap, .pg-events .ev-sec > .wrap { position: relative; z-index: 1; }
.pg-events .sec-soft { border-color: #f6ecd0; }
/* comment 17: each studio its own map (a Google Maps screenshot with the address in the exact centre), a Lumos pin on that centre */
.studio-page--maps { grid-template-columns: 1fr; }
.studio-page--maps .sf-body { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); grid-template-areas: "map list" "map feed" "map go"; gap: 0 24px; align-items: start; }
.studio-page--maps .studio-map { grid-area: map; }
.studio-page--maps .sd-feed { grid-area: feed; }
.studio-page--maps .sd-typed { grid-area: list; }
.studio-page--maps .sf-body > .btn { grid-area: go; justify-self: start; }
.studio-page--maps .sd-feed:not([hidden]) { grid-area: list; }
.studio-page--maps .sd-feed:not([hidden]) + .sd-typed { grid-area: feed; }
.studio-map { display: block; text-decoration: none; color: var(--ink); margin-bottom: 12px; }
.sm-frame { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #eef1f4; }
.sm-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; transition: transform .3s; }
.sm-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.studio-map:hover .sm-frame img { transform: scale(1.03); }
/* the pin's tip sits exactly on the centre of the image */
/* a 26px square turned 45deg: its sharp corner is 18.4px below the square's centre, so the box is lifted by 13 + 18.4 */
.sm-pin { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -31.4px 0 0 -13px; }
.sm-pin::before { content: ""; position: absolute; inset: 0; background: var(--pink); border: 2px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 3px 8px rgba(20,20,20,.3); }
.sm-pin::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: #fff; border-radius: 50%; }
.sm-cap { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; }
.sm-cap::after { content: " \2197"; }
.sm-cap:hover { color: var(--ink); }
@media (max-width: 760px) {
  .studio-page--maps .sf-body { display: block; }
}

/* the A/B switch (feedback.js "vary"): white pill, ink letters, the shown one in yellow; it sits in the corner and never over the content on a phone */
.vary { position: relative; }
.vary-bar { display: flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--body); color: var(--ink); }
.vary-label { font: 600 12.5px/1 var(--body); color: var(--muted); padding: 5px 7px; background: rgba(255,255,255,.85); border-radius: 6px; }
/* the switch placed right under the highlighted words: bigger, outlined, in the text flow */
/* two switches (shape, colour) stack under the heading, left aligned, small gap */
.vary-near { position: static !important; display: flex !important; justify-content: flex-start !important; width: fit-content !important; max-width: 100%; margin: 8px 0 0; padding: 0 !important; }
.vary-near + .vary-near { margin-top: 6px; }
.vary-near-end { margin-bottom: 14px; }
.vary-near .vary-bar { gap: 8px; flex-wrap: wrap; padding: 6px 8px; background: #fff; border: 1.5px solid var(--ink); border-radius: 10px; box-shadow: 0 2px 8px rgba(20,20,20,.12); }
.vary-near .vary-label { font-size: 14px; color: var(--ink); background: none; padding: 0 2px; }
.vary-near .vary-pill { border-color: rgba(20,20,20,.3); box-shadow: none; flex-wrap: wrap; max-width: 100%; }
.vary-near .vary-pill button, .vary-near .vary-pick { font-size: 14px; height: 30px; padding: 0 12px; }
.vary-near .vary-pick { border-color: var(--ink); }
.vary-pill { display: inline-flex; gap: 1px; padding: 2px; background: #fff; border: 1px solid rgba(20,20,20,.16); border-radius: 8px; box-shadow: 0 1px 4px rgba(20,20,20,.06); }
.vary-pill button, .vary-pick { font: 600 12.5px/1 var(--body); color: var(--ink); border: 0; background: none; cursor: pointer; height: 24px; padding: 0 8px; border-radius: 6px; }
.vary-pill button.on { background: #ffe58f; font-weight: 700; }
.vary-pick { background: #fff; border: 1px solid rgba(20,20,20,.16); box-shadow: 0 1px 4px rgba(20,20,20,.06); }
.vary-pick:hover, .vary-pill button:hover { background: #fffaea; }
.vary-pick.is-saved { background: #fffaea; border-color: var(--ink); }
.vary-opt[hidden] { display: none !important; }
.vary-fade { position: absolute; right: 16px; z-index: 5; }
/* on the home hero the video sits in the top right corner, so the switch takes the top left corner there */
.hero > .vary-fade { top: calc(var(--hh) + 10px); right: auto; left: 16px; }
.page-head { position: relative; }
.page-head > .vary-fade { top: 10px; }
@media (max-width: 700px) {
  /* in the flow, right-aligned, above the content instead of over it */
  .vary-fade { position: static; display: flex; justify-content: flex-end; padding: 8px 16px 0; }
  .hero { flex-wrap: wrap; }
  .hero > .vary-fade { margin-top: var(--hh); width: 100%; }
  .hero > .vary-fade + .hero-in { margin-top: 0; }
}

/* ---------- Pauline's review of 25 Oct 2026 ---------- */
/* 25 Oct 2026: Q_BG in tools/build_prototype.py picks the question card background (White or Yellow). */
/* Pauline, 25 Oct 2026, on the yellow corner of the EUR 5 news card: "Love this yellow fade here! Can we check if that looks good as a
   background for the questionary as well?" Switch "Questions background" (data-qbg on <html>): White is the plain card, Yellow
   gives the card the same soft yellow fade, lighter, so the black text and the white answers stay clear. */
html[data-qbg="Yellow"] .q-card { background: radial-gradient(circle at 18% 12%, #fffaea 0%, #fff3c4 50%, #ffe8a3 100%); }
html[data-qbg="Yellow"] .q-card .q-opt { background: #fff; border-color: #ecd9a0; }
html[data-qbg="Yellow"] .q-card .q-opt:hover, html[data-qbg="Yellow"] .q-card .q-opt:focus-visible { background: #fffaea; border-color: var(--ink); }
html[data-qbg="Yellow"] .q-card .extra, html[data-qbg="Yellow"] .q-card .chips-ok li { background: rgba(255,255,255,.7); }
/* 25 Oct 2026: BTN_COLOR in tools/build_prototype.py picks the button colour (Pink or Purple). */
/* Pauline, 25 Oct 2026: "I don't want it too be too girly. Can we try the shade that you see on the picture with Kristina,
   the 'purple' curtain? For all the buttons I mean". Switch "Button colour" (data-btn on <html>), buttons only.
   The curtain in photos/kristina.jpg measures #cd79e7 to #d476e6 on the left (violet side), #bb83c9 on the right.
   Same violet (hue 286), deep enough for white text: #9835b6 = 5.97:1, hover #842e9e = 7.33:1. */
html[data-btn="Purple"] { --btn: #9835b6; --btn-hover: #842e9e; }

/* ---------- Design 4, the final hero ---------- */
/* Amin, 25 Oct 2026: "this should be the final version". Design 4 was picked on 23 Oct 2026 and lived in tools/hero-opts/opts.css
   next to designs 1 to 3 and a switch. Those are gone; its rules sit here now. */
video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Design 4 came with soft yellow sections below the hero, on the pages that have the hero (home and answer pages) */
#overview { background: #fff6dc; }
.pg-home .sec-soft, .pg-start .sec-soft { background: #fffaea; }
.studios-line { background: #ffe58f; border: 0; }
.pg-home .site-footer, .pg-start .site-footer { background: #fff6dc; }
@media (min-width: 961px) { .hero--answer .hero-text { position: static; } }
@media (max-width: 960px) { .hero { padding-top: 0; } }

/* Pauline, 25 Oct 2026: "the yellow fade on laptop as well please". The white background with the slow warm fade
   (comment 33, below) now covers every screen size; the solid yellow gradient on the laptop is gone. */
.hero { background: #fff; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -20% -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 30% at 18% 22%, rgba(255,219,110,.75) 0%, rgba(255,219,110,0) 70%),
              radial-gradient(40% 28% at 85% 48%, rgba(255,187,83,.55) 0%, rgba(255,187,83,0) 70%),
              radial-gradient(45% 30% at 30% 85%, rgba(255,229,143,.6) 0%, rgba(255,229,143,0) 70%); }
@media (prefers-reduced-motion: no-preference) { .hero::before { animation: warm-drift 14s ease-in-out infinite alternate; } }
.hero-flow { position: relative; }
/* Pauline, 25 Oct 2026, on Design 2: "I prefer this questionary style over the one from Design 4. this one looks super clear and clean".
   The card, answers, step line and note use the plain style from earlier in this file. */
.next-up { background: #fff; }

/* Pauline, 25 Oct 2026, on Design 2: "Having the header in one line looks nice here, can we do that for design 4?"
   The title stays on one line at every width: the size follows the text column (the line is about 8.6 times the font size). */
.hero-text { container-type: inline-size; }
.hero-text h1 { white-space: nowrap; font-size: min(62px, 100cqi / 8.6); }
/* Pauline, 25 Oct 2026: "Can the Video be the exact same as it is in design nr 2? Love that".
   The loop sits in a 16:9 tile right under the intro text, on the phone and on the desktop (the generator writes it). */
.hero-video { margin: 20px 0 18px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px rgba(20,20,20,.14); }
/* Pauline, 24 Oct 2026 (comment 27): the same colour bar as the home page on every page */
.site-header { background: linear-gradient(90deg, rgba(255,219,110,.94) 0%, rgba(255,187,83,.94) 100%); border-bottom-color: rgba(20,20,20,.1); }
.main-nav > a:hover, .main-nav > a.on { background: rgba(255,255,255,.55); }
@media (max-width: 960px) {
  .main-nav { background: #fffaea; }
  /* Pauline, 24 Oct 2026 (comment 33): a whiter background with a warm yellow fade that slowly moves (the rule is
     above the media queries now, since 25 Oct it covers every screen size) */
  /* Pauline, 24 Oct 2026 (comment 32): the title lower, and only the minimum text: title, dances, video, next event */
  .hero-text { margin-top: 28px; text-align: center; }
  .hero1-trust { display: none; }
  /* Pauline, 25 Oct 2026, on Design 2: "Can this copy be added to design 4 as well?" The intro text is back, centred under the dances line */
  .hero-sub { max-width: 34em; margin: 0 auto; }
  /* Pauline, 24 Oct 2026 (comment 35): "Next up" as a button for the try-outs, a bit lower */
  .next-up { display: flex; width: min(100%, 360px); margin: 18px auto 0; padding: 12px 14px; gap: 10px; text-align: left; background: var(--btn); border-color: var(--btn); color: #fff; font-size: 15px; box-shadow: 0 8px 20px rgba(69,102,238,.25); }
  .next-up span { flex: 1; }
  .next-up::after { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-right: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(45deg); margin-right: 4px; }
  .next-up i { background: #fff; color: var(--ink); }
  .next-up:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
  /* Pauline, 24 Oct 2026 (comment 36): the questions further down. Amin, 25 Oct 2026: 64px was too much space, now 28px */
  .hero-flow { margin-top: 28px; }
  /* on an answer page the answer is what people came for: no extra gap */
  .hero--answer .hero-flow { margin-top: 20px; }
}
@keyframes warm-drift { 0% { transform: translate(-6%, -3%) scale(1); } 50% { transform: translate(5%, 4%) scale(1.08); } 100% { transform: translate(-3%, 6%) scale(1.02); } }