/* Creative Arts Academy site styles. Tokens are copied from the CAA design system's tokens.json. */

:root {
  /* Creative Arts Academy design system tokens */
  --cream:              #fdf8ef;
  --paper:              #ffffff;
  --charcoal:           #1e1e1e;
  --charcoal-muted:     #5c574e;
  --royal-blue:         #174a8f;
  --royal-blue-20:      #d1dbe9;
  --cyan-blue:          #009fc7;
  --cyan-blue-deep:     #006b87;
  --cyan-blue-20:       #ccecf4;
  --bright-pink:        #dc37a1;
  --bright-pink-deep:   #a8257c;
  --bright-pink-20:     #f8d7ec;
  --green:              #02a139;
  --green-deep:         #016c29;
  --green-20:           #ccecd7;
  --golden-yellow:      #ffb302;
  --golden-yellow-deep: #7f5600;
  --golden-yellow-20:   #fff0cc;
  --line:               #e9dfce;
  --line-strong:        #8f8676;
  --error:              #b42318;

  --font-display: Fredoka, "Trebuchet MS", system-ui, sans-serif;
  --font-body:    Poppins, "Helvetica Neue", Arial, sans-serif;

  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px; --space-8: 32px;  --space-12: 48px; --space-16: 64px; --space-24: 96px;

  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(30,30,30,0.06), 0 10px 24px rgba(23,74,143,0.08);

  --max-width: 1100px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--charcoal); background: var(--cream); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--royal-blue); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-8); }
.section { padding: var(--space-16) 0; }
.center { text-align: center; }

/* Section headings */
.eyebrow { font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bright-pink-deep); margin-bottom: var(--space-2); }
.h2 { font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 1.1; color: var(--royal-blue); margin-bottom: var(--space-4); text-wrap: balance; }
.lede { font-size: 18px; line-height: 1.6; color: var(--charcoal-muted); max-width: 36em; }
.center .lede { margin-left: auto; margin-right: auto; }
.section-head { margin-bottom: var(--space-8); }

/* Star motif */
.star { flex: none; display: inline-block; vertical-align: middle; }
.fill-cyan { fill: var(--cyan-blue); } .fill-pink { fill: var(--bright-pink); }
.fill-green { fill: var(--green); }    .fill-gold { fill: var(--golden-yellow); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1.2; letter-spacing: .01em; min-height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-pill); border: 2px solid transparent; cursor: pointer; text-decoration: none; text-align: center; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.btn--lg { min-height: 56px; font-size: 18px; padding: 0 var(--space-8); }
.btn--primary { background: var(--royal-blue); color: var(--paper); }
.btn--primary:hover { background: var(--cyan-blue-deep); }
.btn--secondary { background: transparent; color: var(--royal-blue); border-color: var(--royal-blue); }
.btn--secondary:hover { background: var(--royal-blue-20); }
.btn--star { background: var(--golden-yellow); color: var(--charcoal); }
.btn--star:hover { background: var(--golden-yellow-20); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: wait; }
.ondark :focus-visible { outline-color: var(--golden-yellow); }

/* Tags */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: .04em; padding: 7px 12px; border-radius: var(--radius-pill); background: var(--paper); color: var(--charcoal); border: 1px solid var(--line); white-space: nowrap; }
.tag--star { background: var(--golden-yellow); color: var(--charcoal); border-color: transparent; }

/* NAV */
.nav { position: sticky; top: 0; z-index: 100; background: var(--cream); border-bottom: 1px solid var(--line); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) var(--space-8); max-width: var(--max-width); margin: 0 auto; }
.nav__logo img { width: 120px; height: auto; }
.nav__links { display: flex; gap: var(--space-6); list-style: none; font-weight: 500; font-size: 15px; }
.nav__links a { text-decoration: none; color: var(--charcoal); }
.nav__links a:hover { color: var(--royal-blue); text-decoration: underline; text-underline-offset: 4px; }
.nav__cta { white-space: nowrap; }

/* HERO */
.hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-12); align-items: center; max-width: var(--max-width); margin: 0 auto; padding: var(--space-16) var(--space-8) var(--space-24); }
.hero__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.hero__title { font-family: var(--font-display); font-weight: 600; font-size: 64px; line-height: 1.0; letter-spacing: -.01em; color: var(--royal-blue); margin-bottom: var(--space-4); text-wrap: balance; }
.hero__lede { font-size: 18px; line-height: 1.6; margin-bottom: var(--space-6); max-width: 34em; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__facts { list-style: none; margin-top: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: 14px; color: var(--charcoal-muted); }
.hero__facts li { display: flex; align-items: center; gap: var(--space-2); }
.hero__art { position: relative; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--paper); display: grid; place-items: center; box-shadow: var(--shadow-card); }
.hero__art img { width: 76%; height: auto; }
.hero__dot { position: absolute; border-radius: 50%; }

/* ABOUT */
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
.about__text p { margin-bottom: var(--space-4); }
.stats { display: flex; gap: var(--space-8); flex-wrap: wrap; margin-top: var(--space-6); }
.stat__num { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.2; color: var(--royal-blue); }
.stat__label { font-size: 14px; color: var(--charcoal-muted); }
.photo { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); }
.about__image { height: 420px; }
.about__image img { width: 100%; height: 100%; object-fit: cover; }
.about__image figcaption { position: absolute; right: var(--space-3); bottom: var(--space-3); font-size: 13px; font-weight: 600; color: var(--charcoal); background: var(--paper); padding: 4px 12px; border-radius: var(--radius-pill); }

/* PILLARS */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); list-style: none; text-align: left; }
.pillar { background: var(--paper); border-radius: var(--radius-md); padding: var(--space-6); }
.pillar__name { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: var(--charcoal); margin-bottom: var(--space-2); }
.pillar__text { font-size: 15px; line-height: 1.55; color: var(--charcoal-muted); }

/* APPROACH */
.approach { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-12); }
.approach__item { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--charcoal-muted); }
.approach__item strong { color: var(--charcoal); font-weight: 600; }

/* PROGRAM CARDS */
.programs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; }
.program { background: var(--paper); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-card); }
.program__cap { position: relative; padding: var(--space-6) var(--space-6) var(--space-4); }
.program__cap .star { position: absolute; top: var(--space-4); right: var(--space-4); }
.program--full-time .program__cap { background: var(--cyan-blue-20); }
.program--aftercare .program__cap { background: var(--bright-pink-20); }
.program--drop-in .program__cap { background: var(--green-20); }
.program--full-time .eyebrow { color: var(--cyan-blue-deep); }
.program--aftercare .eyebrow { color: var(--bright-pink-deep); }
.program--drop-in .eyebrow { color: var(--green-deep); }
.program__title { font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.2; color: var(--charcoal); padding-right: var(--space-12); text-wrap: balance; }
.program__body { padding: var(--space-4) var(--space-6) var(--space-6); flex: 1; display: flex; flex-direction: column; gap: var(--space-4); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); font-size: 15px; }
.facts dt { color: var(--charcoal-muted); }
.facts dd { font-weight: 600; }
.program__cta { margin-top: auto; padding-top: var(--space-2); }
.programs__note { margin-top: var(--space-6); font-size: 14px; color: var(--charcoal-muted); text-align: center; }

/* TUITION */
.pricing__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.price { background: var(--paper); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); border: 2px solid var(--line); display: flex; flex-direction: column; gap: var(--space-4); }
.price--featured { border-color: var(--golden-yellow); background: var(--golden-yellow-20); }
.price--full-time .eyebrow { color: var(--cyan-blue-deep); }
.price--aftercare .eyebrow { color: var(--bright-pink-deep); }
.price--drop-in .eyebrow { color: var(--green-deep); }
.price--featured .eyebrow { color: var(--golden-yellow-deep); }
.price__label { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.2; }
.price__amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.price__num { font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1; color: var(--royal-blue); }
.price__unit { font-size: 14px; color: var(--charcoal-muted); }
.checks { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); font-size: 15px; }
.checks li { display: flex; gap: var(--space-2); align-items: flex-start; }
.checks svg { flex: none; margin-top: 3px; stroke: var(--royal-blue); }
.price__note { font-size: 14px; color: var(--charcoal-muted); }
.price__cta { margin-top: auto; }
.pricing__fineprint { text-align: center; margin-top: var(--space-6); font-size: 14px; color: var(--charcoal-muted); }

/* SCHEDULE */
.schedule { background: var(--paper); border-radius: var(--radius-lg); padding: var(--space-8); }
.schedule__list { list-style: none; }
.schedule__row { display: grid; grid-template-columns: 12px 96px 1fr; gap: var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.schedule__row:first-child { border-top: 0; }
.schedule__dot { width: 12px; height: 12px; border-radius: 50%; align-self: center; }
.dot-cyan { background: var(--cyan-blue); } .dot-pink { background: var(--bright-pink); }
.dot-green { background: var(--green); }   .dot-gold { background: var(--golden-yellow); }
.schedule__time { font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--royal-blue); white-space: nowrap; }
.schedule__note { font-size: 14px; color: var(--charcoal-muted); margin-top: var(--space-4); }

/* APAX BAND (the page's one royal-blue feature band) */
.band { background: var(--royal-blue); color: var(--cream); }
.band .eyebrow { color: var(--golden-yellow); }
.band .h2 { color: var(--cream); }
.band .lede { color: var(--cream); }
.apax-list { list-style: none; margin: var(--space-6) 0 var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.apax-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.apax-list .star { margin-top: 4px; }
.apax-list strong { color: var(--golden-yellow); font-weight: 600; }
.band__intro { max-width: 760px; }
.spaces-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-12); }
.space-photo { margin: 0; background: var(--paper); color: var(--charcoal); border-radius: var(--radius-lg); overflow: hidden; }
.space-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.space-photo figcaption { padding: var(--space-4) var(--space-6) var(--space-6); font-size: 15px; color: var(--charcoal-muted); }
.space-photo figcaption strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.25; color: var(--charcoal); margin-bottom: var(--space-1); }

/* TIMELINE */
.timeline { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); text-align: left; }
.timeline__step { position: relative; padding-top: var(--space-12); }
.timeline__step::before { content: ""; position: absolute; top: 15px; left: 32px; right: calc(-1 * var(--space-6)); height: 2px; background: var(--line); }
.timeline__step:last-child::before { display: none; }
.timeline__marker { position: absolute; top: 0; left: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-strong); }
.timeline__step--current .timeline__marker { background: var(--royal-blue); border-color: var(--royal-blue); }
.timeline__when { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--charcoal-muted); }
.timeline__step--current .timeline__when { color: var(--royal-blue); }
.timeline__title { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.25; margin: var(--space-1) 0 var(--space-2); }
.timeline__text { font-size: 15px; color: var(--charcoal-muted); }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; font-family: var(--font-display); font-size: 20px; line-height: 1.25; font-weight: 500; color: var(--charcoal); border-radius: var(--radius-sm); }
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--royal-blue-20); transition: transform .2s ease; }
.faq__icon svg { stroke: var(--royal-blue); }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__a { padding: 0 var(--space-12) var(--space-4) 0; max-width: 60ch; }

/* INQUIRY FORM */
.interest-card { background: var(--paper); border-radius: var(--radius-lg); padding: var(--space-12); max-width: 680px; margin: 0 auto; box-shadow: var(--shadow-card); text-align: left; }
.form-heading { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.25; color: var(--royal-blue); margin-bottom: var(--space-4); }
.form-heading:not(:first-child) { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.field label { font-weight: 600; font-size: 15px; color: var(--charcoal); }
.req { color: var(--bright-pink-deep); margin-left: 2px; }
.field input, .field select, .field textarea { font: inherit; font-size: 16px; min-height: 48px; width: 100%; padding: 0 14px; background: var(--paper); color: var(--charcoal); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); }
.field textarea { min-height: 120px; padding: 12px 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--royal-blue); outline-offset: 1px; border-color: var(--royal-blue); }
.field .is-invalid { border-color: var(--error); border-width: 2px; }
.choices { border: 0; min-width: 0; margin-bottom: var(--space-4); }
.choices legend { font-weight: 600; font-size: 15px; margin-bottom: var(--space-2); }
.choices__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.choice { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 var(--space-4); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--paper); cursor: pointer; font-size: 15px; }
.choice input { width: 18px; height: 18px; accent-color: var(--royal-blue); }
.choice:has(input:checked) { border-color: var(--royal-blue); background: var(--royal-blue-20); }
.choice:has(input:focus-visible) { outline: 3px solid var(--royal-blue); outline-offset: 2px; }
.choices.is-invalid legend { color: var(--error); }
.choices.is-invalid .choice { border-color: var(--error); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.4em; margin-top: var(--space-3); font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.form-status.is-error { color: var(--error); }
.form-status.is-error::before { content: "!"; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--error); color: var(--paper); font-size: 13px; line-height: 20px; text-align: center; }
.form-note { font-size: 14px; color: var(--charcoal-muted); text-align: center; margin-top: var(--space-2); }
.form-success { text-align: center; padding: var(--space-6) 0; }
.form-success h3 { font-family: var(--font-display); font-weight: 600; color: var(--royal-blue); font-size: 36px; line-height: 1.1; margin-bottom: var(--space-2); }
.interest-card__alt { text-align: center; border-top: 1px solid var(--line); padding-top: var(--space-4); margin-top: var(--space-6); font-size: 15px; }
.interest-card__alt a { color: var(--royal-blue); font-weight: 600; text-underline-offset: 3px; }

/* FOOTER */
.footer { background: var(--royal-blue); color: var(--cream); padding: var(--space-12) 0 var(--space-8); }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-8); align-items: flex-start; }
.footer__brand { display: flex; gap: var(--space-4); align-items: center; }
.footer__brand img { width: 88px; height: auto; }
.footer__name { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.15; }
.footer__endorse { font-size: 14px; margin-top: var(--space-1); }
.footer__links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: 15px; }
.footer a { color: var(--cream); text-underline-offset: 3px; }
.footer a:hover { color: var(--golden-yellow); }
.footer :focus-visible { outline-color: var(--golden-yellow); }
.footer__legal { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--royal-blue-20); font-size: 13px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }

@media (max-width: 1120px) {
  .pricing__grid { grid-template-columns: 1fr 1fr; max-width: 760px; margin: 0 auto; }
}
@media (max-width: 960px) {
  .programs { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .timeline__step:nth-child(2n)::before { display: none; }
  .nav__links { display: none; }
}
@media (max-width: 760px) {
  .container { padding: 0 var(--space-6); }
  .section { padding: var(--space-12) 0; }
  .h2 { font-size: 30px; }
  .nav__inner { padding: var(--space-2) var(--space-6); }
  .nav__logo img { width: 96px; }
  .nav__cta { min-height: 44px; padding: 0 var(--space-4); font-size: 15px; }
  .hero { grid-template-columns: 1fr; padding: var(--space-12) var(--space-6); gap: var(--space-8); }
  .hero__title { font-size: 40px; line-height: 1.05; }
  .hero__art { max-width: 280px; width: 100%; margin: 0 auto; }
  .about__grid { grid-template-columns: 1fr; }
  .about__image { height: 240px; }
  .pillars { grid-template-columns: 1fr; }
  .approach { grid-template-columns: 1fr; }
  .pricing__grid { grid-template-columns: 1fr; }
  .spaces-gallery { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .timeline__step::before { display: none; }
  .schedule { padding: var(--space-6); }
  .schedule__row { grid-template-columns: 12px 72px 1fr; gap: var(--space-3); }
  .interest-card { padding: var(--space-8) var(--space-6); }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .faq__a { padding-right: 0; }
}

/* ============ ABOUT PAGE ============ */
.nav__links a[aria-current="page"] { color: var(--royal-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* Page hero: heading-1 (display size is for the home page only) */
.page-hero { max-width: var(--max-width); margin: 0 auto; padding: var(--space-16) var(--space-8) var(--space-12); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: center; }
.page-hero__title { font-family: var(--font-display); font-weight: 600; font-size: 48px; line-height: 1.05; color: var(--royal-blue); margin-bottom: var(--space-4); text-wrap: balance; }
.page-hero__lede { font-size: 18px; line-height: 1.6; margin-bottom: var(--space-4); max-width: 34em; }
.page-hero__support { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.25; color: var(--royal-blue); margin-bottom: var(--space-6); }
.page-hero__photo { margin: 0; position: relative; }
.page-hero__photo img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.page-hero__photo .hero__dot { z-index: 1; }

/* Mission and vision */
.statements { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.statement { background: var(--paper); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-card); }
.statement__label { display: flex; align-items: center; gap: var(--space-2); }
.statement blockquote { font-size: 18px; line-height: 1.6; }

/* Approach: text beside three key ideas */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
.split__text p { margin-bottom: var(--space-4); }
.ideas { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); }
.idea { background: var(--paper); border-radius: var(--radius-md); padding: var(--space-6); }
.idea__title { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.25; color: var(--charcoal); margin-bottom: var(--space-1); }
.idea__text { font-size: 15px; color: var(--charcoal-muted); }

/* The arts we teach */
.arts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); list-style: none; }
.art { background: var(--paper); border-radius: var(--radius-md); padding: var(--space-6); }
.art__dot { display: block; width: 16px; height: 16px; border-radius: 50%; margin-bottom: var(--space-4); }
.art__name { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--charcoal); margin-bottom: var(--space-2); }
.art__text { font-size: 15px; line-height: 1.55; color: var(--charcoal-muted); }
.day-line { margin-top: var(--space-8); text-align: center; font-size: 18px; }
.day-line a { color: var(--royal-blue); font-weight: 600; text-underline-offset: 3px; }

/* APAX campus band */
.campus { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-8); }
.campus__item { background: var(--paper); color: var(--charcoal); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.campus__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.campus__body { padding: var(--space-4) var(--space-6) var(--space-6); }
.campus__name { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.25; margin-bottom: var(--space-1); }
.campus__text { font-size: 15px; color: var(--charcoal-muted); }
.campus__item--text { background: var(--golden-yellow-20); justify-content: center; }
.campus__item--text .campus__body { padding: var(--space-8) var(--space-6); }
.campus__item--text .star { margin-bottom: var(--space-4); }

/* Teachers and family */
.facts-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.fact-card { background: var(--paper); border-radius: var(--radius-lg); padding: var(--space-8); border: 2px solid var(--line); }
.fact-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.2; color: var(--charcoal); margin-bottom: var(--space-3); }
.fact-card p + p { margin-top: var(--space-3); }

/* Closing CTA */
.cta-panel { background: var(--golden-yellow-20); border-radius: var(--radius-lg); padding: var(--space-12) var(--space-8); text-align: center; }
.cta-panel .h2 { margin-bottom: var(--space-3); }
.cta-panel .lede { margin: 0 auto var(--space-6); }
.cta-panel .hero__ctas { justify-content: center; }
.cta-panel__note { margin-top: var(--space-4); font-size: 14px; color: var(--charcoal-muted); }

@media (max-width: 960px) {
  .arts { grid-template-columns: 1fr 1fr; }
  .campus { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .page-hero { grid-template-columns: 1fr; padding: var(--space-12) var(--space-6) var(--space-8); gap: var(--space-8); }
  .page-hero__title { font-size: 36px; }
  .statements, .split, .facts-row { grid-template-columns: 1fr; }
  .statement, .fact-card { padding: var(--space-6); }
  .arts, .campus { grid-template-columns: 1fr; }
  .cta-panel { padding: var(--space-8) var(--space-6); }
}