/* ==========================================================================
   Shared styling for the secondary pages: classes finder, timetable, centre,
   teachers, programme template, trial, contact, FAQ, news, privacy.

   These pages belong to the whole school rather than one department, so the
   base palette is neutral and department colour appears only where it carries
   meaning (a class card, a programme marker, a filter for one department).
   Department accents are applied with .is-dance / .is-music / .is-tkd.
   ========================================================================== */

:root{
  --p-ink:#1A1122;
  --p-body:#4A3F58;
  --p-quiet:#6B6178;
  --p-line:#EDE9F2;
  --p-surface:#F8F6FA;
  --p-surface-2:#F3F0F7;
}

.page main{padding-bottom:0}
/* Accent colour. Secondary pages default to the neutral school purple; a
   programme page opts into its department by adding page-dance/music/tkd. */
.page{--accent:#6E1277}
.page-dance{--accent:#8F1080}
.page-music{--accent:#6E1277}
.page-tkd{--accent:#3A32B5}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- Compact page header used by every secondary page ---------- */
.page-head{padding:clamp(30px,4vw,56px) 0 clamp(50px,6vw,78px);border-bottom:1px solid var(--p-line);margin-bottom:clamp(60px,7vw,100px)}
.page-head.is-plain{border-bottom:0;margin-bottom:clamp(50px,6vw,80px)}
.page-back{display:inline-flex;align-items:center;gap:8px;width:max-content;margin-bottom:24px;color:var(--p-quiet);font-size:13px;font-weight:600;transition:color .2s ease}
.page-back:hover{color:var(--p-ink)}
.page-head-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,7vw,110px);align-items:end}
.page-head h1{max-width:720px;margin:0;color:var(--p-ink);font-size:clamp(37px,4.16vw,58px);line-height:1.2;text-wrap:pretty}
.page-lede{max-width:460px;margin:0 0 6px;color:var(--p-body);font-size:15px;line-height:1.6}
.page-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px}

/* ---------- Buttons and links ---------- */
.btn-solid{display:inline-flex;align-items:center;gap:10px;padding:13px 17px;background:var(--p-ink);color:#fff;border-radius:8px;font-size:13px;font-weight:600;transition:background .2s ease}
.btn-solid:hover{background:#332638}
.btn-solid i,.link-arrow i{transition:transform .2s ease}
.btn-solid:hover i,.link-arrow:hover i{transform:translate(3px,-3px)}
.link-arrow{display:inline-flex;align-items:center;gap:9px;color:var(--p-ink);font-size:13px;font-weight:600;transition:color .2s ease}
.link-arrow:hover{color:var(--p-body)}
.link-quiet{display:inline-flex;align-items:center;gap:7px;color:var(--p-quiet);font-size:13px;font-weight:600;transition:color .2s ease}
.link-quiet:hover{color:var(--p-ink)}

/* ---------- Section scaffolding ---------- */
.section{max-width:1120px;margin:0 auto clamp(90px,10vw,140px)}
.section-head{display:grid;grid-template-columns:1fr .68fr;gap:clamp(36px,6vw,90px);align-items:end;margin-bottom:38px}
.section-head h2{margin:0;font-size:clamp(29px,3.2vw,42px);line-height:1.2;text-wrap:pretty}
.section-head p{margin:0;color:var(--p-body);font-size:14px;line-height:1.6}
.section-note{margin:18px 2px 0;color:var(--p-quiet);font-size:12px}

/* ---------- Filter bar, shared by classes finder and timetable ---------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:26px}
.filter-bar button{appearance:none;border:0;border-radius:6px;padding:10px 14px;background:var(--p-surface-2);color:#514860;font:600 12px/1 'Switzer',sans-serif;cursor:pointer;transition:background .2s ease,color .2s ease}
.filter-bar button:hover{background:#E8E3EF}
.filter-bar .is-active{background:var(--p-ink);color:#fff}
.filter-legend{display:block;margin-bottom:12px;color:var(--p-quiet);font-size:12px;font-weight:600}
.result-count{margin:16px 2px 0;color:var(--p-quiet);font-size:13px}

/* ---------- Department dot markers ---------- */
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;display:inline-block}
.dot-dance{background:var(--dance)}.dot-music{background:var(--music)}.dot-tkd{background:var(--tkd)}
.dot-ballet{background:var(--p-ballet)}.dot-tap{background:var(--p-tap)}.dot-modern{background:var(--p-modern)}
.dot-piano{background:var(--p-piano)}.dot-vocal{background:var(--p-vocal)}
.dot-art{background:#8B819B}.dot-other{background:#8B819B}

/* ---------- Class / programme cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{display:flex;flex-direction:column;padding:28px 26px;background:var(--p-surface);border-radius:16px}
.card[hidden]{display:none}
.card.is-dance{background:var(--dance-soft)}
.card.is-music{background:var(--music-soft)}
.card.is-tkd{background:var(--tkd-soft)}
.card>i{font-size:24px;margin-bottom:16px;color:var(--p-quiet)}
.card.is-dance>i{color:#A51C93}.card.is-music>i{color:#7E1688}.card.is-tkd>i{color:#3E38BD}
.card h3{margin:0 0 8px;font-size:17px;line-height:1.2;letter-spacing:.1px}
.card>p{margin:0 0 18px;color:#544A5C;font-size:13px;line-height:1.55}
.card-meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:auto;color:var(--p-quiet);font-size:11px;font-weight:500}
.card-meta span{display:flex;align-items:center;gap:6px}
.card-meta i{font-size:14px}
.card-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:12px;font-weight:600;color:var(--p-ink)}

/* ---------- Timetable ---------- */
.tt-wrap{border-radius:16px;overflow:hidden;border:1px solid var(--p-line)}
.tt-day{padding:14px 24px;background:var(--p-surface-2);color:var(--p-ink);font-size:12px;font-weight:600;letter-spacing:.01em}
.tt-day[hidden]{display:none}
.tt-row{display:grid;grid-template-columns:96px 10px 1fr 150px 130px;gap:20px;align-items:center;padding:16px 24px;background:#fff;border-top:1px solid var(--p-line)}
.tt-row[hidden]{display:none}
.tt-row time{color:var(--p-ink);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.tt-row h3{margin:0;font:600 14px/1.3 'Switzer',sans-serif;letter-spacing:.1px}
.tt-level{color:var(--p-quiet);font-size:12px}
.tt-teacher{display:flex;align-items:center;gap:7px;color:var(--p-quiet);font-size:12px}
.tt-teacher i{font-size:14px;color:#8B819B}
.tt-empty{padding:34px 24px;background:#fff;color:var(--p-quiet);font-size:14px;text-align:center}

/* ---------- Simple info / detail grid ---------- */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;border-radius:14px;overflow:hidden}
.info-grid>div{padding:24px 26px;background:var(--p-surface)}
.info-grid i{display:block;margin-bottom:14px;font-size:24px;color:var(--p-quiet)}
/* Awarding body marks in place of icons, at the client's request. Boxed to a
   common height so mixed aspect ratios line up along the row. */
.info-grid .std-logo{display:inline-block;height:30px;width:auto;max-width:96px;margin:0 12px 14px 0;object-fit:contain;vertical-align:middle}
.info-grid b{display:block;margin-bottom:5px;font-size:16px;letter-spacing:.1px}
.info-grid span{display:block;color:#5A5065;font-size:13px;line-height:1.55}
.info-grid a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- Prose, used by privacy and long copy ---------- */
.prose{max-width:660px;margin:0 auto clamp(90px,10vw,140px)}
.prose h2{margin:44px 0 14px;font-size:21px;line-height:1.2;letter-spacing:.1px}
.prose h2:first-child{margin-top:0}
.prose h3{margin:28px 0 10px;font-size:14px;letter-spacing:.1px}
.prose p{margin:0 0 16px;color:var(--p-body);font-size:15px;line-height:1.7}
.prose ul{margin:0 0 16px;padding-left:20px;color:var(--p-body);font-size:15px;line-height:1.7}
.prose li{margin-bottom:8px}
.prose a{color:var(--p-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.prose-meta{margin:0 0 34px;color:var(--p-quiet);font-size:13px}

/* ---------- FAQ accordion ---------- */
.faq-group{margin-bottom:44px}
.faq-group h2{margin:0 0 16px;font-size:19px;letter-spacing:.1px}
.faq{border-radius:14px;overflow:hidden;border:1px solid var(--p-line)}
.faq details{border-top:1px solid var(--p-line);background:#fff}
.faq details:first-child{border-top:0}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;cursor:pointer;font-size:15px;font-weight:600;color:var(--p-ink);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 auto;color:var(--p-quiet);font-size:20px;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{background:var(--p-surface)}
.faq-answer{padding:0 24px 22px;color:var(--p-body);font-size:14px;line-height:1.65;max-width:720px}
.faq-answer p{margin:0 0 12px}
.faq-answer p:last-child{margin:0}

/* ---------- People cards ---------- */
.people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.person{background:var(--p-surface);border-radius:16px;overflow:hidden}
.person-copy{padding:22px 24px 26px}
.person h3{margin:0 0 4px;font-size:15px;letter-spacing:.1px}
.person .person-role{margin:0 0 14px;color:var(--p-quiet);font-size:12px;font-weight:600}
.person .person-role:last-child{margin-bottom:0}
.person p{margin:0;color:#544A5C;font-size:13px;line-height:1.6}
/* portrait slot. A missing photo shows a neutral placeholder rather than a gap. */
.portrait{position:relative;margin:0;aspect-ratio:3/4;background:var(--p-surface-2);overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.portrait.is-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--p-quiet)}
.portrait.is-empty i{font-size:34px}
.portrait.is-empty span{font-size:11px;letter-spacing:.01em}
.person-lead{display:grid;grid-template-columns:200px 1fr;gap:0;align-items:stretch;background:var(--p-surface-2);border-radius:16px;margin-bottom:14px;overflow:hidden}
.person-lead .portrait{aspect-ratio:auto;height:100%;min-height:240px;background:var(--p-surface)}
.person-lead-copy{padding:30px 32px;align-self:center}
.person-lead h3{margin:0 0 4px;font-size:18px;letter-spacing:.1px}
.person-lead .person-role{margin:0 0 14px;color:var(--p-quiet);font-size:12px;font-weight:600}
.person-lead p{margin:0;color:#4A4055;font-size:14px;line-height:1.65}

/* ---------- Events / news list ---------- */
.events{display:grid;gap:2px;border-radius:14px;overflow:hidden}
.event{display:grid;grid-template-columns:130px 1fr auto;gap:26px;align-items:center;padding:22px 26px;background:var(--p-surface)}
.event time{color:var(--p-quiet);font-size:12px;font-weight:600}
.event h3{margin:0;font-size:14px;letter-spacing:.1px}
.event p{margin:3px 0 0;color:var(--p-quiet);font-size:12px}
.event-tag{color:var(--p-quiet);font-size:11px;white-space:nowrap}

/* ---------- Image carousel ----------
   No autoplay. Motion is a single slide transition, disabled under
   prefers-reduced-motion, where slides simply swap. */
@media(max-width:680px){
  .carousel-slide img{height:230px}
  .carousel-bar{flex-direction:column;align-items:flex-start;gap:14px}
}
@media(prefers-reduced-motion:reduce){.carousel-track{transition:none}}

/* ---------- Enquiry form ---------- */
.enquiry{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;max-width:760px}
.field{display:flex;flex-direction:column;gap:8px}
.field-wide{grid-column:1/-1}
.field label{font-size:12px;font-weight:600;color:var(--p-ink)}
.field input,.field select{appearance:none;width:100%;padding:12px 14px;background:#fff;border:1px solid #DCD5E4;border-radius:8px;color:var(--p-ink);font:400 14px/1.3 'Switzer',sans-serif;transition:border-color .2s ease}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B6178' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px}
.field-wide .btn-solid{width:max-content}
.field input:hover,.field select:hover{border-color:#C6BAD2}
.field input:focus-visible,.field select:focus-visible{border-color:var(--p-ink)}
.form-note{margin:14px 0 0;color:var(--p-quiet);font-size:12px}

/* ---------- Closing call to action ---------- */
/* The band had a bottom margin only. On the approved pages it always
   followed a .section, whose bottom margin supplied the gap above it, so
   the omission never showed. Generated pages end in a body or a list
   instead and the band collided with the content above it.
   Block siblings collapse margins, so this matches .section rather than
   adding to it, and the approved pages are unchanged. */
/* The department hero CTAs ("Book a music trial") point at #trial, which is
   this band. Landing it flush against the top edge reads as a jump cut, so
   leave the same 104px the music instrument cards use. */
.cta-band{scroll-margin-top:104px}
.cta-band{max-width:1120px;margin:clamp(90px,10vw,140px) auto clamp(80px,9vw,120px);display:grid;grid-template-columns:1fr .85fr minmax(max-content,.75fr);gap:clamp(34px,6vw,78px);align-items:center;padding:clamp(48px,7vw,78px);background:#25202A;color:#fff;border-radius:20px}
.cta-band>div:first-child>i{display:block;margin-bottom:15px;color:#C9BDD0;font-size:31px}
.cta-band h2{margin:0;font-size:clamp(30px,3.12vw,42px);line-height:1.2;text-wrap:pretty}
.cta-band>p{margin:0;color:#C8C1CB;font-size:14px;line-height:1.6}
.cta-action{display:grid;gap:10px;align-content:start}
.cta-action>a{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:14px 16px;background:#fff;color:var(--p-ink);border-radius:8px;font-size:13px;font-weight:600;transition:background .2s ease}
/* The button label never wraps. At .75fr the third column came out 233px, and
   three labels want more: "Book a free taekwondo trial" 243, "Book a Free
   Keyboard Trial" 239, "Message us on WhatsApp" 236. Each broke onto a second
   line for the sake of a few pixels, which reads as a mistake on the one
   element the page is built around. The column is minmax(max-content,.75fr)
   above, so it takes the width the longest button actually needs and the
   heading column gives up the difference. Below the two-column breakpoint
   there is far more room than any label needs. */
.cta-action>a{white-space:nowrap}
.cta-action>a:hover{background:#EDEAF0}
.cta-action>a i:last-child{transition:transform .2s ease}
.cta-action>a:hover i:last-child{transform:translate(3px,-3px)}
.cta-action>span{display:block;margin-top:12px;color:#A99FAC;font-size:11px}
.cta-action>span a{color:#fff;font-weight:600}

@media(max-width:1000px){
  .page-head-grid{grid-template-columns:1fr;gap:28px;align-items:start}
  .section-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .card-grid,.people-grid{grid-template-columns:repeat(2,1fr)}
  .info-grid{grid-template-columns:1fr 1fr}
  .tt-row{grid-template-columns:88px 10px 1fr 130px;gap:16px}
  .tt-teacher{grid-column:3/-1}
  .event{grid-template-columns:110px 1fr;gap:8px 20px}
  .event-tag{grid-column:2}
  .cta-band{grid-template-columns:1fr 1fr}
  .cta-action{grid-column:2}
  .cta-band>p{grid-column:1}
}

@media(max-width:680px){
  .page-head{padding:22px 0 40px;margin-bottom:56px}
  .page-head h1{font-size:35px}
  .page-lede{font-size:14px}
  .section{margin-bottom:80px}
  .section-head h2{font-size:29px}
  .card-grid,.people-grid{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr}
  .filter-bar{gap:6px}
  .filter-bar button{padding:9px 12px}
  .tt-wrap{border-radius:14px}
  .tt-day{padding:12px 18px}
  .tt-row{grid-template-columns:auto 1fr;gap:6px 12px;padding:16px 18px}
  .tt-row time{grid-column:1;grid-row:1}
  .tt-row .dot{grid-column:2;grid-row:1;justify-self:start;align-self:center}
  .tt-row>div{grid-column:1/-1}
  .tt-level,.tt-teacher{grid-column:1/-1}
  .prose h2{font-size:18px}
  .prose p,.prose ul{font-size:14px}
  .faq summary{padding:18px 18px;font-size:14px}
  .faq-answer{padding:0 18px 20px}
  .enquiry{grid-template-columns:1fr}
  .card{padding:24px 20px}
  .person-copy{padding:20px 20px 24px}
  .person-lead{grid-template-columns:1fr}
  .person-lead .portrait{min-height:0;aspect-ratio:16/10}
  .person-lead .portrait img{object-position:center 15%}
  .person-lead-copy{padding:24px 22px 28px}
  .event{padding:20px 18px}
  .cta-band{padding:44px 26px;grid-template-columns:1fr;gap:26px;border-radius:16px}
  .cta-band h2{font-size:32px}
  .cta-band>p,.cta-action{grid-column:1}
}

/* ==========================================================================
   Timetable, rebuilt 2026-08-10 from the client's Class Timetable document.
   Three independent filters, a "times pending" group for programmes whose
   new term schedule is unpublished, and music teacher availability.
   ========================================================================== */

.tt-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 18px;margin:0 0 22px}
/* Dropdowns rather than button rows: three sets of buttons wrapped onto
   three lines, and a single choice from a list is what a select is for.
   Client direction 2026-08-10. */
.tt-select{appearance:none;min-width:170px;padding:10px 34px 10px 13px;border:1px solid var(--p-line);border-radius:8px;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B6178' stroke-width='1.6'><path d='M4 6.5 8 10.5 12 6.5'/></svg>") no-repeat right 11px center/14px;color:var(--p-ink);font:500 13px/1.2 'Switzer',sans-serif;cursor:pointer}
.tt-select:hover{border-color:#DCD5E4}
.tt-select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tt-reset{align-self:flex-end;margin-bottom:1px;padding:10px 14px;border:0;border-radius:8px;background:var(--p-surface);color:var(--p-ink);font:600 12.5px/1.2 'Switzer',sans-serif;cursor:pointer}
.tt-reset:hover{background:#EDE7F3}
.tt-reset[hidden]{display:none}
.tt-filter-group{display:flex;flex-direction:column;gap:7px}
.tt-count{margin:0 0 14px;color:var(--p-quiet);font-size:13px}

/* End time sits under the class name so the time column stays narrow. */
.tt-ends{display:block;margin-top:2px;color:var(--p-quiet);font-size:11.5px;font-variant-numeric:tabular-nums}

/* --- Programmes running, times not yet published ------------------------ */
.tt-pending,.tt-music{margin-top:44px}
.tt-pending[hidden]{display:none}
.tt-pending-head{max-width:62ch;margin:0 0 20px}
.tt-pending-head h3{margin:0 0 7px;font:600 17px/1.3 'Switzer',sans-serif;letter-spacing:.1px;color:var(--p-ink)}
.tt-pending-head p{margin:0;color:var(--p-quiet);font-size:14px;line-height:1.6}

.tt-pending-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.tt-pending-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px;border-radius:16px;background:var(--p-surface)}
.tt-pending-card[hidden]{display:none}
.tt-pending-title{display:flex;align-items:center;gap:9px}
.tt-pending-title h4{margin:0;font:600 15px/1.3 'Switzer',sans-serif;letter-spacing:.1px;color:var(--p-ink)}
.tt-pending-card>p{margin:0;color:var(--p-quiet);font-size:13px;line-height:1.5}
.tt-pending-ask{display:inline-flex;align-items:center;gap:7px;margin-top:auto;color:var(--p-ink);font-size:13px;font-weight:600;letter-spacing:.1px}
.tt-pending-ask i{font-size:16px}
.tt-pending-ask:hover{text-decoration:underline}

/* --- Music teacher availability ----------------------------------------- */
.tt-music[hidden]{display:none}
.tt-music-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:2px;border-radius:16px;overflow:hidden;border:1px solid var(--p-line);background:var(--p-line)}
.tt-music-card{padding:20px;background:#fff}
.tt-music-card h4{margin:0 0 5px;font:600 15px/1.3 'Switzer',sans-serif;letter-spacing:.1px;color:var(--p-ink)}
.tt-music-inst{display:flex;align-items:center;gap:8px;margin:0 0 13px;color:var(--p-quiet);font-size:12.5px}
.tt-music-card dl{display:flex;flex-direction:column;gap:6px;margin:0}
.tt-music-card dl>div{display:flex;justify-content:space-between;gap:12px}
.tt-music-card dt{color:var(--p-quiet);font-size:12.5px}
.tt-music-card dd{margin:0;color:var(--p-ink);font-size:12.5px;font-variant-numeric:tabular-nums;text-align:right}

/* --- Provenance and caveats --------------------------------------------- */
.tt-notes{margin-top:44px;padding:24px;border-radius:16px;background:var(--p-surface)}
.tt-notes h3{margin:0 0 12px;font:600 15px/1.3 'Switzer',sans-serif;letter-spacing:.1px;color:var(--p-ink)}
.tt-notes ul{display:flex;flex-direction:column;gap:8px;margin:0;padding-left:18px}
.tt-notes li{max-width:82ch;color:var(--p-quiet);font-size:13px;line-height:1.6}

@media (max-width:860px){
  .tt-filters{gap:18px 24px}
}
@media (max-width:640px){
  .tt-filters{flex-direction:column;gap:16px}
  .tt-pending-grid,.tt-music-grid{grid-template-columns:1fr}
  .tt-notes{padding:18px}
}

/* ==========================================================================
   Testimonials page, rebuilt 2026-08-10.

   Two sections, video and written. The earlier version split the videos into
   "full interviews" and "shorter clips", which described the file format
   rather than anything a visitor cares about. Now it is one grid holding
   both shapes.

   Both grids use CSS columns rather than a row grid. A row grid forces every
   item in a row to the height of the tallest, which leaves gaps when square
   and vertical videos sit together, and cannot size a quote card to its own
   text. Columns pack naturally and let each card be exactly as tall as its
   content, which is what was asked for.
   ========================================================================== */

.tm-grid,.tm-quotes{columns:4 220px;column-gap:16px}
.tm-grid>*,.tm-quotes>*{break-inside:avoid;margin:0 0 16px}

/* --- Video cards --------------------------------------------------------- */
.tm-card{display:flex;flex-direction:column;gap:9px}
.tm-play{position:relative;display:block;width:100%;padding:0;border:0;background:var(--p-surface);border-radius:16px;overflow:hidden;cursor:pointer}
.tm-play:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.tm-play img{display:block;width:100%;height:100%;object-fit:cover}
.tm-play::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,17,34,0) 55%,rgba(26,17,34,.3) 100%)}
.tm-play .video-play{width:54px;height:54px}
.tm-play .video-play i{font-size:22px}

/* Square for the landscape interviews, 9:16 for the vertical clips. Mixing
   the two is the point: it reads as a wall of real people, not a spec sheet. */
.tm-wide .tm-play{aspect-ratio:1/1}
.tm-tall .tm-play{aspect-ratio:9/16}

.tm-card figcaption{display:flex;flex-direction:column;gap:2px}
.tm-card cite{font-style:normal;font:600 13.5px/1.3 'Switzer',sans-serif;letter-spacing:.1px;color:var(--p-ink)}
.tm-card small{color:var(--p-quiet);font-size:12px}

/* --- Written testimonials ------------------------------------------------ */
/* content-visibility lets the browser skip layout and paint for cards that
   are still off screen, so a long wall of quotes costs nothing until it is
   scrolled to. contain-intrinsic-size keeps the scrollbar honest meanwhile. */
.tm-quote{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:16px;background:var(--p-surface);content-visibility:auto;contain-intrinsic-size:auto 260px}
.tm-quote>i{font-size:22px;color:var(--p-quiet)}
.tm-quote blockquote{margin:0;color:var(--p-ink);font-size:15px;line-height:1.6}
.tm-quote figcaption{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.tm-quote cite{font-style:normal;font:600 13.5px/1.3 'Switzer',sans-serif;letter-spacing:.1px;color:var(--p-ink)}
.tm-quote small{color:var(--p-quiet);font-size:12px}

@media (max-width:900px){ .tm-grid,.tm-quotes{columns:3 200px} }
@media (max-width:640px){
  .tm-grid{columns:2 140px;column-gap:12px}
  .tm-grid>*{margin-bottom:12px}
  .tm-quotes{columns:1}
  .tm-quote{padding:20px}
}

/* Route from a department page to the one timetable, pre-filtered.
   The department pages no longer carry their own copy of the schedule:
   maintaining three of them was a headache and they drifted. Client
   direction 2026-08-10. */
.tt-route{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:26px;max-width:1120px;margin:0 auto;padding:44px;border-radius:20px;background:var(--p-surface)}
.tt-route>div:first-child{max-width:56ch}
.tt-route i{font-size:24px;color:var(--p-quiet)}
.tt-route h2{margin:12px 0 10px}
.tt-route p{margin:0;color:var(--p-body);font-size:15px;line-height:1.6}
.tt-route-actions{display:flex;flex-wrap:wrap;gap:10px;flex:0 0 auto}
.tt-route-primary{display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:8px;background:var(--p-ink);color:#fff;font-size:13.5px;font-weight:600;letter-spacing:.1px}
.tt-route-primary:hover{background:#332638}
.tt-route-second{display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--p-line);background:#fff;color:var(--p-ink);font-size:13.5px;font-weight:600;letter-spacing:.1px}
.tt-route-second:hover{box-shadow:inset 0 0 0 1px var(--p-ink)}

@media (max-width:860px){
  .tt-route{padding:30px;gap:20px}
  .tt-route-actions{width:100%}
}
@media (max-width:640px){
  .tt-route{padding:24px 20px;border-radius:16px}
  .tt-route-primary,.tt-route-second{flex:1 1 auto;justify-content:center}
}

/* Secondary "Timetable" action, sat beside the primary WhatsApp action. */
/* Secondary, so it is a text link and not a second button competing with the
   one action the band is built around. Matches .dance-text-link, the pattern
   already used for this on the department pages.

   Written as .cta-action>a.cta-timetable because .cta-action>a sets the white
   button, and a bare .cta-timetable loses to it on specificity. That is why the
   link kept rendering as a button after the background was removed. */
.cta-action>a.cta-timetable{display:inline-flex;align-items:center;gap:7px;
  /* 10px above the .cta-action gap, so it sits clear of the button and the
     vertical padding gives it a tap target on a phone without drawing a box. */
  margin-top:10px;padding:8px 2px;background:none;box-shadow:none;border-radius:0;
  color:#C9BDD0;font-size:13px;font-weight:600;transition:color .2s ease}
.cta-action>a.cta-timetable:hover,
.cta-action>a.cta-timetable:focus-visible{background:none;color:#fff}
.cta-action>a.cta-timetable i:first-child{font-size:1rem;line-height:1}
.cta-action>a.cta-timetable i:last-child{font-size:.8rem;line-height:1;
  transition:transform .2s ease}
.cta-action>a.cta-timetable:hover i:last-child{transform:translate(3px,-3px)}
.cta-eyebrow{margin:0 0 8px;color:#A99FAC;font-size:11.5px;font-weight:600;
  letter-spacing:.02em;text-transform:uppercase}

/* ==========================================================================
   Reading: article listing and a single article.
   Added 2026-08-10. The homepage promoted six articles but every link went to
   the school's live site, which carries injected spam, and the prototype had
   no article UI at all.
   ========================================================================== */

/* --- Listing ---------------------------------------------------------------
   Standalone cards rather than one bordered container split by hairlines.
   The container version read as a table and did not scale: every new article
   had to fit the grid for the outer radius to survive. Cards now sit on their
   own with real spacing and a shadow, so the grid can grow to any length.
   Client direction 2026-08-10. */
.bl-filters{display:flex;flex-direction:column;gap:9px;margin:0 0 22px}
.bl-count{margin-left:6px;opacity:.55;font-variant-numeric:tabular-nums}

.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;align-items:start}
.bl-card{display:flex;flex-direction:column;gap:11px;padding:26px 24px 24px;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(26,17,34,.05),0 6px 18px rgba(26,17,34,.06);transition:box-shadow .2s ease}
/* No lift and no scale on hover, per the motion rules. Depth only. */
.bl-card:hover{box-shadow:0 2px 4px rgba(26,17,34,.07),0 14px 34px rgba(26,17,34,.11)}
.bl-card[hidden]{display:none}
.bl-empty{grid-column:1/-1;margin:0;padding:44px 24px;border-radius:16px;background:var(--p-surface);color:var(--p-quiet);font-size:14px;text-align:center}
.bl-tag{display:inline-flex;align-items:center;gap:8px;color:var(--p-quiet);font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.bl-card h2{margin:0;font:600 17px/1.32 'Switzer',sans-serif;letter-spacing:.1px;color:var(--p-ink);text-wrap:pretty}
.bl-card p{margin:0;color:var(--p-quiet);font-size:13.5px;line-height:1.6}
.bl-more{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:6px;color:var(--p-ink);font-size:13px;font-weight:600;letter-spacing:.1px}
.bl-more i{font-size:15px}

/* --- Single article -------------------------------------------------------- */
.ar{max-width:1120px;margin:0 auto}
.ar-head{max-width:760px;margin:0 0 34px}
/* Both are inline-flex, so without this they sit on one line and the back
   link runs straight into the category tag. */
.ar-head .page-back{display:inline-flex;margin-bottom:22px}
.ar-head .bl-tag{display:flex;margin-bottom:14px}
.ar-head h1{margin:0;text-wrap:pretty}
.ar-standfirst{margin:22px 0 0;max-width:62ch;color:var(--p-body);font-size:17px;line-height:1.6}

.ar-hero{margin:0 0 44px}
.ar-hero img{display:block;width:100%;height:clamp(260px,34vw,440px);object-fit:cover;border-radius:18px}

/* One readable column. Long-form copy is not a place for a wide measure. */
/* A standing note on the 22 articles that cover a subject the school stopped
   teaching. SEO direction from Sadi (Yamu), 2026-08-20: keep the articles for
   their traffic, but tell a parent who lands on one where the live timetable
   is. Filled surface, no one-sided border, per AI-HANDOFF section 17. */
.ar-notice{margin:0 0 28px;padding:20px 22px;border-radius:14px;
  background:var(--p-surface);color:var(--p-body);font-size:14.5px;line-height:1.6}
.ar-notice p{margin:0;font-size:inherit;line-height:inherit;color:inherit}
.ar-notice a{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  color:var(--p-ink);font-weight:600;text-decoration:underline;
  text-underline-offset:3px}
.ar-notice a i{font-size:15px;text-decoration:none}

.ar-body{max-width:680px}
.ar-body p{margin:0 0 20px;color:var(--p-body);font-size:16.5px;line-height:1.72}
.ar-body h2{margin:44px 0 0;font-size:clamp(21px,2.08vw,27px);line-height:1.2;text-wrap:pretty}
.ar-body h2+p{margin-top:16px}
.ar-body h3{margin:32px 0 0;font:600 18px/1.3 'Switzer',sans-serif;letter-spacing:.1px;color:var(--p-ink)}
.ar-body h3+p{margin-top:12px}
.ar-body b{font-weight:600;color:var(--p-ink)}

.ar-figure{margin:32px 0}
.ar-figure img{display:block;width:100%;border-radius:16px}
.ar-figure figcaption{margin-top:10px;color:var(--p-quiet);font-size:12.5px}

.ar-foot{max-width:680px;margin:44px 0 0;padding-top:26px;border-top:1px solid var(--p-line)}
.ar-back{display:inline-flex;align-items:center;gap:8px;color:var(--p-ink);font-size:14px;font-weight:600;letter-spacing:.1px}

@media (max-width:640px){
  .bl-grid{grid-template-columns:1fr}
  .ar-body p{font-size:16px}
  .ar-standfirst{font-size:15.5px}
}

/* ==========================================================================
   Team, rebuilt 2026-08-10.
   One section and one card design. The page previously ran two layouts,
   leadership as wide rows with the biography inline and everyone else as
   small cards with none, which reads as a hierarchy. Mangalika asked in the
   2026-07-23 meeting that they be presented as one team.
   The card is the portrait; the biography opens in a dialog.
   ========================================================================== */

.tp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}

.tp-card{display:flex;flex-direction:column;gap:0;padding:0;border:0;background:none;text-align:left;font:inherit;position:relative}
button.tp-card{cursor:pointer}
button.tp-card:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:18px}

.tp-photo{display:block;position:relative;overflow:hidden;border-radius:16px;background:var(--p-surface);aspect-ratio:3/4}
.tp-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.2,.75,.2,1)}
/* The one motion the design system allows on a card: a very small image zoom. */
button.tp-card:hover .tp-photo img{transform:scale(1.03)}
.tp-nophoto{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--p-quiet);font-size:34px}

/* Affordance that a card opens something. */
.tp-more{position:absolute;right:10px;top:10px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--p-ink);font-size:15px;transition:background-color .2s ease}
button.tp-card:hover .tp-more{background:#fff}

.tp-name{display:block;margin-top:13px;font:600 14.5px/1.3 'Switzer',sans-serif;letter-spacing:.1px;color:var(--p-ink)}
.tp-role{display:block;margin-top:3px;color:var(--p-quiet);font-size:12.5px;line-height:1.45}

/* --- Biography dialog ------------------------------------------------------ */
.tp-dialog{width:min(92vw,620px);max-width:none;padding:0;border:0;border-radius:20px;background:#fff;overflow:visible}
.tp-dialog::backdrop{background:rgba(26,17,34,.72)}
.tp-dialog-body{padding:40px 38px 38px}
.tp-dialog-role{margin:0 0 8px;color:var(--p-quiet);font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.tp-dialog-body h2{margin:0 0 16px;font-size:clamp(21px,2.4vw,27px);line-height:1.2}
.tp-dialog-body p:last-child{margin:0;color:var(--p-body);font-size:15.5px;line-height:1.7}
.tp-close{position:absolute;top:-14px;right:-14px;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:999px;background:#fff;color:var(--p-ink);cursor:pointer;font-size:18px;box-shadow:0 4px 14px rgba(26,17,34,.2)}
.tp-close:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

@media (max-width:640px){
  .tp-grid{grid-template-columns:1fr 1fr;gap:12px}
  .tp-dialog-body{padding:32px 22px 26px}
  .tp-close{top:8px;right:8px;box-shadow:none;background:var(--p-surface)}
}

@media (prefers-reduced-motion: reduce){
  .tp-photo img,.tp-more{transition:none}
  button.tp-card:hover .tp-photo img{transform:none}
}

/* Programme page hero image. Matches the article hero so the two page types
   read as one system. Used by the Tap and Modern programme pages. */
.programme-shot{margin:0}
.programme-shot img{display:block;width:100%;height:clamp(260px,34vw,440px);
  object-fit:cover;border-radius:18px}

/* Breadcrumbs.

   Replaces the single back link now that the class pages are genuinely nested:
   one link only ever showed one step, and the trail shows the whole path. Sized
   and coloured like the back link it replaces, so the page head is unchanged
   apart from the extra steps. */
.crumbs{margin:0 0 22px}
/* Breadcrumb bar for the pages that open on a hero rather than a .page-head.
   The Dance, Music, Taekwondo and the two landing pages used to carry the
   crumb inside the hero, and Taekwondo's sat on top of the photograph. This
   reproduces the .page-head geometry exactly: the same clamped gap below the
   header, then the same 22px down to the heading. */
.crumbs-bar{padding-top:clamp(30px,4vw,56px)}
.crumbs-bar+section{margin-top:0}
.crumbs-bar .crumbs{margin:0 0 22px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0;
  margin:0;padding:0;list-style:none}
.crumbs li{display:flex;align-items:center;color:var(--muted,#8B819B);
  font-size:13px;font-weight:500;letter-spacing:.1px;line-height:1.4}
.crumbs li+li::before{content:"";display:inline-block;width:5px;height:5px;
  margin:0 10px;border-top:1.4px solid currentColor;border-right:1.4px solid currentColor;
  transform:rotate(45deg);opacity:.55}
.crumbs a{color:var(--muted,#8B819B)}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--ink)}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:600}

/* Article pages now use the shared page head. Their own head rules stay for
   the tag and standfirst, but the width and padding come from .page-head. */
.page-head.ar-head{max-width:1120px}
.page-head.ar-head .bl-tag{display:flex;margin-bottom:14px}
.page-head.ar-head h1{margin:0;max-width:20ch;text-wrap:pretty}
.page-head.ar-head .ar-standfirst{margin:22px 0 0}

@media (max-width:640px){
  .crumbs li{font-size:12px}
  .crumbs-bar{padding-top:22px}
  .crumbs-bar .crumbs{margin-bottom:16px}
  .crumbs li+li::before{margin:0 7px}
}

/* An article that carries a real FAQ accordion on the live page. Only four do;
   the rest write their questions as ordinary section headings, which is what
   they are. */
.ar-faq{max-width:760px;margin:clamp(44px,5vw,64px) 0 0;padding-top:clamp(30px,3vw,40px);
  border-top:1px solid var(--p-line,#EDE9F2)}
.ar-faq h2{margin:0 0 22px;font-size:clamp(18px,1.76vw,22px);line-height:1.2}

/* Awarding bodies on the homepage. The logos are supplied at different sizes
   and weights, so they are held to a common height and given room rather than
   being scaled to a shared width, which would make some of them shout. */
.accred-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:clamp(24px,3vw,44px);margin:0;padding:0;list-style:none;align-items:start}
.accred-strip li{display:flex;flex-direction:column;gap:12px}
.accred-strip img{height:52px;width:auto;max-width:150px;object-fit:contain;
  object-position:left center}
.accred-strip span{color:var(--soft,#6E6377);font-size:13px;line-height:1.5}
@media (max-width:640px){ .accred-strip img{height:44px} }

/* Opening hours sit with the rest of the contact detail. */
.c-hours{display:flex;align-items:center;gap:9px;margin:10px 0 0;
  color:var(--soft,#6E6377);font-size:14px}
.c-hours i{font-size:1rem;line-height:1}

/* Three department tiles above the class filters, at the client's request:
   one image each, with the department name written over it. A row rather than
   a slider on desktop, because three items do not need paging; it becomes a
   swipeable scroller once the tiles would be too narrow to read. */
.dept-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dept-tile{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:4/3}
.dept-tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.75,.2,1)}
.dept-tile:hover img,.dept-tile:focus-visible img{transform:scale(1.03)}
.dept-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,10,20,0) 42%,rgba(16,10,20,.72) 100%)}
.dept-tile>span{position:absolute;left:22px;bottom:18px;z-index:1;color:#fff;font-size:26px;font-weight:600;letter-spacing:.2px;text-shadow:0 1px 14px rgba(10,6,14,.5)}
.dept-tile:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(max-width:680px){
  .dept-strip{grid-auto-flow:column;grid-auto-columns:78%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .dept-tile{scroll-snap-align:start}
  .dept-tile>span{font-size:22px;left:18px;bottom:14px}
}

/* The Our Centre head carries the profile film in its second column, where the
   lede used to sit. The lede moves under the h1 it belongs to, so the column
   reads heading, then the sentence explaining it, then the actions.

   align-items:center rather than the default end, because a 9:16 player is far
   taller than the text beside it and bottom alignment would leave the copy
   stranded at the foot of a tall column. */
/* Both columns are fr, not "1.15fr auto". An auto column shrinks to the width
   of the player, which leaves nothing to centre the player inside: it simply
   sat against the right edge with the slack piled up to its left. Giving the
   second column a real share of the width lets justify-self:center mean
   something. */
.page-head-film{align-items:center;grid-template-columns:1.15fr .85fr;gap:clamp(36px,5vw,64px)}
.page-head-film .page-lede{max-width:52ch;margin-top:18px}
.page-head-film .page-actions{margin-top:24px}
.page-head-film .dept-film-player{justify-self:center}

@media(max-width:860px){
  /* Copy first, film after. The player takes a comfortable width rather than
     the full column, which a 9:16 video would otherwise fill for a whole
     screen height. */
  .page-head-film{grid-template-columns:1fr;gap:28px;align-items:start}
  .page-head-film .dept-film-player{justify-self:start;width:min(260px,72%)}
}