:root{
  --dance-ink:#35102f;
  --dance-deep:#741466;
  --dance-mid:#a51c93;
  --ballet:#c724b1;
  --tap:#e23a78;
  --modern:#a63bd4;
  --dance-pale:#fbedf8;
  --tap-pale:#fff0f4;
  --modern-pale:#f7edfc;
}

.dance-page main{padding-bottom:0}

/* Hero follows the Taekwondo composition: one wide image, the copy on a firm
   panel beneath it, then the programme index flush under that. */
.dance-hero{margin:12px 0 0}   /* no bottom margin: unlike .t-opening and .m-opening, which
                                  space themselves with margin, .dance-opening carries its own
                                  clamp(110px,12vw,170px) top padding. Setting both stacked them
                                  into ~294px of dead space under the programme index. */
.dance-hero-frame{position:relative;border-radius:20px;overflow:hidden;background:var(--dance-pale)}
.dance-hero-frame img{display:block;width:100%;height:clamp(320px,42vw,520px);object-fit:cover;object-position:center 38%}
.dance-hero-bar{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(36px,5vw,80px);align-items:end;padding:clamp(30px,3.4vw,44px) clamp(28px,3.4vw,46px);background:var(--dance-ink);color:#fff}
/* No max-width: the 1.25fr grid column already sets the measure. The old 660px
   cap was sized for a four word heading and forced the client's longer ones
   onto an extra line inside a column that had room to spare. */
.dance-hero-bar h1{margin:0;color:#fff;font-size:clamp(37px,3.92vw,54px);line-height:1.2;text-wrap:pretty}
.dance-hero-side>p{max-width:400px;margin:0 0 22px;color:#E7C8DF;font-size:14px;line-height:1.6}
.back-link{display:inline-flex;align-items:center;gap:8px;width:max-content;margin-top:8px;color:var(--soft);font-size:13px;font-weight:600;transition:color .2s ease}
.back-link:hover{color:var(--ink)}
/* Primary button, then the secondary link beneath it. These were flex rows that
   happened to wrap at different widths on each page, because the labels differ in
   length: "Book a taekwondo trial" is 30px wider than "Book a dance trial", so
   Taekwondo stacked while Dance did not. Stacking is now deliberate. */
.dance-actions{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.dance-primary{display:inline-flex;align-items:center;gap:10px;padding:13px 17px;background:var(--ink);color:#fff;border-radius:8px;font-size:13px;font-weight:600;transition:background .2s ease}
.dance-hero-bar .dance-primary{background:#fff;color:var(--ink)}
.dance-hero-bar .dance-primary:hover{background:#F3E4EE}
.dance-hero-bar .dance-text-link{color:#D8B6CD}
.dance-hero-bar .dance-text-link:hover{color:#fff}
.dance-primary:hover{background:#332638}
.dance-primary i,.programme-copy>a i,.dance-trial-action>a i:last-child{transition:transform .2s ease}
.dance-primary:hover i,.programme-copy>a:hover i,.dance-trial-action>a:hover i:last-child{transform:translate(3px,-3px)}
.dance-text-link{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-size:13px;font-weight:600;transition:color .2s ease}
.dance-text-link:hover{color:var(--soft)}

/* Programme index. The same object as .m-index on the Music page: one tiled,
   full width strip of the page's own programmes, sitting under the hero rather
   than inside it. It replaced three photo cards whose images were already being
   used again further down this page. */
.d-index{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0;padding:0;list-style:none;background:#EFD9E9;border:1px solid #EFD9E9;border-top:0;border-radius:0 0 14px 14px;overflow:hidden}
.d-index li a{display:flex;flex-direction:column;gap:9px;height:100%;padding:20px 24px;background:#fff;color:#5B3F56;font-size:15px;font-weight:600;letter-spacing:.1px;transition:background .2s ease,color .2s ease}
.d-index li a:hover{background:var(--dance-pale);color:var(--ink)}
.d-index .d-swatch{width:26px;height:5px;border-radius:3px;display:block}
.d-index li:nth-child(1) .d-swatch{background:var(--ballet)}
.d-index li:nth-child(2) .d-swatch{background:var(--tap)}
.d-index li:nth-child(3) .d-swatch{background:var(--modern)}

.dance-opening{max-width:1120px;margin:0 auto;padding:clamp(110px,12vw,170px) 0;display:grid;grid-template-columns:1.18fr .72fr;gap:clamp(55px,10vw,150px);align-items:end}
.dance-opening>div>i{display:block;margin-bottom:18px;color:var(--dance-mid);font-size:34px}
.dance-opening h2{max-width:680px;margin:0;font-size:clamp(38px,4.56vw,61px);line-height:1.2;text-wrap:pretty}
.dance-opening>p{max-width:420px;margin:0 0 7px;color:var(--soft);font-size:15px}

.programme-ledger{max-width:1120px;margin:0 auto;display:grid;gap:18px}
.programme{display:grid;grid-template-columns:1.07fr .93fr;min-height:540px;border-radius:20px;overflow:hidden}
.programme figure{margin:0;min-height:0;overflow:hidden}.programme figure img{width:100%;height:100%;object-fit:cover}
.programme-copy{padding:clamp(36px,5vw,66px);display:flex;flex-direction:column;align-items:flex-start}
.ballet-program{background:var(--dance-pale)}.tap-program{background:var(--tap-pale)}.modern-program{background:var(--modern-pale)}
.programme-copy header{display:grid;grid-template-columns:auto auto 1fr;gap:10px;align-items:center;width:100%;margin-bottom:24px}
.programme-number{align-self:start;color:#9a8395;font-size:11px;font-variant-numeric:tabular-nums}
.programme-copy header>i{font-size:28px}.ballet-program header>i{color:#a71994}.tap-program header>i{color:#c12a65}.modern-program header>i{color:#8424a9}
.programme-copy h2{grid-column:1/-1;margin:0;font-size:clamp(37px,4vw,53px);line-height:1.2;text-wrap:pretty}
.programme-lede{max-width:480px;margin:0 0 24px;color:#564650;font-size:15px;line-height:1.55}
.programme-meta{display:flex;flex-wrap:wrap;gap:9px 17px;margin-bottom:26px;color:#715e6b;font-size:11px;font-weight:500}
.programme-meta span{display:flex;align-items:center;gap:6px}.programme-meta i{font-size:16px;color:#8e567f}
.programme-copy ul{display:grid;gap:10px;margin:0 0 30px;padding:0;list-style:none;color:#554650;font-size:13px}
.programme-copy li{display:flex;gap:9px;align-items:flex-start}.programme-copy li i{flex:0 0 auto;margin-top:3px;color:var(--dance-mid);font-size:15px}
.tap-program .programme-copy li i{color:#bf2b65}.modern-program .programme-copy li i{color:#8424a9}
.programme-copy>a{display:inline-flex;align-items:center;gap:10px;margin-top:auto;color:var(--ink);font-size:13px;font-weight:600}

.dance-pathway{max-width:1120px;margin:clamp(110px,12vw,170px) auto 0;padding:clamp(48px,6vw,76px);background:#8d187d;color:#fff;border-radius:20px}
.pathway-heading{display:grid;grid-template-columns:1.15fr .65fr;gap:80px;align-items:end;margin-bottom:50px}
.pathway-heading>div>i{display:block;margin-bottom:16px;color:#f3b9e7;font-size:32px}
.pathway-heading h2{max-width:650px;margin:0;font-size:clamp(37px,4.32vw,54px);line-height:1.2;text-wrap:pretty}
.pathway-heading>p{margin:0;color:#f2d9ed;font-size:14px}
.pathway-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:0;padding:0;list-style:none}
.pathway-steps li{min-height:145px;padding:18px 14px;background:#a42391;border-radius:10px;display:flex;flex-direction:column;align-items:flex-start}
.pathway-steps li:nth-child(2){background:#ad278d}.pathway-steps li:nth-child(3){background:#b92a88}.pathway-steps li:nth-child(4){background:#a82a9f}.pathway-steps li:nth-child(5){background:#962a9e}.pathway-steps li:nth-child(6){background:#7c237f}
.pathway-steps i{margin-bottom:auto;font-size:24px;color:#fdeefa}.pathway-steps b{font-size:13px}.pathway-steps span{color:#edcae8;font-size:10px}

.dance-standards{max-width:1120px;margin:clamp(110px,12vw,170px) auto;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(60px,10vw,145px);align-items:center}
.standards-copy h2{margin-bottom:20px;font-size:clamp(34px,4vw,51px);line-height:1.2;text-wrap:pretty}.standards-copy p{max-width:440px;margin:0;color:var(--soft);font-size:15px}
.standards-pair{display:grid;gap:12px}.standards-pair article{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:28px 30px;border-radius:14px;background:var(--dance-pale)}
.standards-pair article:nth-child(2){background:var(--modern-pale)}.standards-pair>article>i{font-size:34px;color:var(--dance-mid)}.standards-pair article:nth-child(2)>i{color:#8424a9}
.standards-pair b{display:block;margin-bottom:3px;font-size:23px}.standards-pair span{display:block;color:#6d5968;font-size:12px}

.dance-timetable{max-width:1120px;margin:0 auto clamp(110px,12vw,170px);display:grid;grid-template-columns:.68fr 1.32fr;gap:clamp(60px,9vw,130px);align-items:start;padding:clamp(58px,7vw,84px);background:#fff2f7;border-radius:20px}
.timetable-side>i{display:block;margin-bottom:18px;color:#b42362;font-size:32px}.timetable-side h2{margin-bottom:20px;font-size:clamp(35px,3.84vw,50px);line-height:1.2;text-wrap:pretty}.timetable-side>p{margin-bottom:28px;color:#66535f;font-size:14px}
.timetable-filters{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.timetable-filters button{appearance:none;border:0;border-radius:6px;padding:9px 10px;background:#EFEAF0;color:#4A3F58;font:600 12px/1 'Switzer',sans-serif;cursor:pointer;transition:background .2s ease,color .2s ease}.timetable-filters button:hover{background:#E5DEE8}.timetable-filters .is-active{background:var(--ink);color:#fff}
.dance-schedule{padding:4px 24px;background:#fff;border-radius:14px}
.dance-schedule article{display:grid;grid-template-columns:94px 22px 1fr;gap:14px;align-items:center;padding:19px 0;border-bottom:1px solid #f1e6eb}.dance-schedule article:last-child{border-bottom:0}.dance-schedule article[hidden]{display:none}
.dance-schedule time{color:#8b7480;font-size:11px;font-variant-numeric:tabular-nums}.dance-schedule>article>i{font-size:18px;color:#b32662}.dance-schedule article[data-program="modern"]>i{color:#8326a4}
.dance-schedule h3{margin:0;font:600 15px/1.25 'Switzer',sans-serif;letter-spacing:.1px}.dance-schedule p{margin:2px 0 0;color:#8c7883;font-size:11px}

.dance-trial{max-width:1120px;margin:0 auto clamp(80px,9vw,120px);display:grid;grid-template-columns:1fr .85fr .75fr;gap:clamp(34px,6vw,78px);align-items:center;padding:clamp(48px,7vw,78px);background:#4b143f;color:#fff;border-radius:20px}
.dance-trial>div:first-child>i{display:block;margin-bottom:15px;color:#eca5dc;font-size:31px}.dance-trial h2{margin:0;font-size:clamp(34px,3.84vw,50px);line-height:1.2;text-wrap:pretty}.dance-trial>p{margin:0;color:#e2c7db;font-size:14px}
.dance-trial-action>a{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:14px 16px;background:#fff;color:var(--ink);border-radius:8px;font-size:13px;font-weight:600;transition:background .2s ease}.dance-trial-action>a:hover{background:#EDEAF0}.dance-trial-action>span{display:block;margin-top:12px;color:#d4b4cd;font-size:11px}.dance-trial-action>span a{color:#fff;font-weight:600}

@media(max-width:1000px){
  .dance-hero-bar{grid-template-columns:1fr;gap:26px;align-items:start}
  .programme{grid-template-columns:1fr 1fr;min-height:500px}.programme-copy{padding:40px}.programme-meta{display:grid}
  .pathway-heading{gap:50px}.pathway-steps{grid-template-columns:repeat(3,1fr)}
  .dance-standards{grid-template-columns:1fr}.standards-copy{max-width:680px}
  .dance-timetable{grid-template-columns:1fr}.timetable-side{max-width:620px}.timetable-filters{display:flex;flex-wrap:wrap}.timetable-filters button{min-width:90px}
  .dance-trial{grid-template-columns:1fr 1fr}.dance-trial-action{grid-column:2}.dance-trial>p{grid-column:1}
}

@media(max-width:680px){
  .dance-hero{margin:8px 0 0}.dance-hero-frame{border-radius:16px}.dance-hero-frame img{height:250px}.dance-hero-bar{padding:28px 22px}.dance-hero-bar h1{font-size:35px}.dance-hero-side>p{font-size:14px}
  .d-index{grid-template-columns:1fr}.d-index li a{padding:16px 22px;font-size:14px}
  .dance-opening{padding:96px 0;grid-template-columns:1fr;gap:30px}.dance-opening h2{font-size:36px}.dance-opening>p{font-size:14px}
  .programme-ledger{gap:12px}.programme{grid-template-columns:1fr;min-height:0;border-radius:16px}.programme figure{height:330px}.programme-copy{padding:36px 26px 40px}.programme-copy h2{font-size:38px}.programme-lede{font-size:14px}.programme-meta{display:flex}.tap-program figure{order:-1}
  .dance-pathway{margin-top:96px;padding:42px 24px;border-radius:16px}.pathway-heading{grid-template-columns:1fr;gap:26px;margin-bottom:34px}.pathway-heading h2{font-size:35px}.pathway-steps{grid-template-columns:1fr 1fr}.pathway-steps li{min-height:126px}
  .dance-standards{margin:96px auto;gap:36px}.standards-copy h2{font-size:34px}.standards-pair article{padding:24px 20px}.standards-pair span{font-size:11px}
  .dance-timetable{margin-bottom:96px;padding:42px 22px;border-radius:16px;gap:38px}.timetable-side h2{font-size:35px}.timetable-filters{display:grid;grid-template-columns:1fr 1fr}.dance-schedule{padding:2px 14px}.dance-schedule article{grid-template-columns:78px 18px 1fr;gap:9px;padding:17px 0}.dance-schedule time{font-size:10px}
  .dance-trial{margin-bottom:70px;padding:44px 28px;grid-template-columns:1fr;gap:26px;border-radius:16px}.dance-trial h2{font-size:35px}.dance-trial>p,.dance-trial-action{grid-column:1}
}

/* ==========================================================================
   Dance classes by level. Rebuilt 2026-08-10 from the client's Class
   Timetable document, replacing invented sample classes.
   Presented by level rather than by day: a parent choosing a dance class
   wants "which level suits a seven year old", not "what happens Wednesday".
   The day by day view is timetable-d.html's job.
   ========================================================================== */

.dance-filter-sets{display:flex;flex-direction:column;gap:16px;margin-top:18px}
.dance-count{margin:16px 0 0;color:var(--quiet);font-size:13px}

.dance-levels-wrap{display:flex;flex-direction:column;gap:16px}
.dance-levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}

.dance-level{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:16px;background:#fff}
.dance-level[hidden]{display:none}
.dl-head{display:flex;flex-direction:column;gap:3px}
.dl-head h3{margin:0;font:600 15px/1.3 'Switzer',sans-serif;letter-spacing:.1px;color:var(--ink)}
.dl-age{color:var(--quiet);font-size:12.5px}

.dl-times{display:flex;flex-direction:column;gap:7px;margin:0;padding:0;list-style:none}
.dl-times li{display:grid;grid-template-columns:34px 1fr;gap:4px 10px;align-items:baseline}
.dl-day{color:var(--ink);font-size:12px;font-weight:600}
.dl-times time{color:var(--soft);font-size:12.5px;font-variant-numeric:tabular-nums}
.dl-teacher{grid-column:2;color:var(--quiet);font-size:11.5px}

.dance-empty{grid-column:1/-1;margin:0;padding:28px 20px;border-radius:16px;background:#fff;color:var(--quiet);font-size:14px;text-align:center}
.dance-pending{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
.dance-pending .tt-pending-card{background:#fff}

@media (max-width:640px){
  .dance-levels,.dance-pending{grid-template-columns:1fr}
}