/* A school leader exploring on a phone between classes: open, sunlit scenes,
   readable copy and a navy chapter that connects observation with action. */
.schools-page { --school-warm: oklch(96% .018 90); overflow: clip; }
.schools-page h2 { max-width: 22ch; }
.schools-page p { max-width: 65ch; }
.schools-page .button { max-width: 100%; }
.school-opening { background: var(--navy); color: var(--paper); }
.school-opening-image { position: relative; }
.school-opening-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.school-opening-image figcaption,
.school-human-support figcaption { position: absolute; bottom: .65rem; left: .8rem; max-width: calc(100% - 1.6rem); padding: .35rem .6rem; background: oklch(20.5% .033 266 / .92); color: var(--paper); font-size: .68rem; line-height: 1.4; }
.school-opening-copy { padding: 2.1rem var(--space) 2.7rem; }
.school-opening-copy .eyebrow { margin-bottom: 1rem; color: var(--cyan); }
.school-opening h1 { font-size: clamp(2.65rem, 8vw, 5.6rem); max-width: 14ch; line-height: 1.08; }
.school-opening h1 span { color: var(--cyan); }
.school-opening-copy > p:not(.eyebrow) { margin-top: 1.4rem; color: var(--light-text); }
.school-opening-copy > p.school-opening-note { margin-top: 1.5rem; color: var(--paper); font-size: .78rem; }
.school-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.school-actions .button { min-height: 48px; padding: .8rem 1rem; font-size: .8rem; gap: 1rem; }
.school-actions .button-secondary { color: var(--paper); border-color: oklch(60% .025 245); }
.school-actions .button-secondary:hover { background: oklch(28% .033 266); }
.school-opening :focus-visible { outline-color: var(--cyan); }
.school-chapters { display: flex; flex-wrap: wrap; padding: .8rem var(--space); gap: .15rem 1.3rem; border-bottom: 1px solid var(--line); }
.school-chapters a { display: inline-flex; align-items: center; min-height: 44px; font-size: .78rem; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line); }
.school-chapters a:hover { color: var(--cyan-dark); text-decoration-color: currentColor; }
.school-section-heading { display: grid; gap: 1.35rem; }
.school-section-heading > p:not(.eyebrow) { color: var(--muted); }
.school-section-heading > .eyebrow { margin-bottom: -.5rem; }
.school-pillars { display: grid; gap: 0; margin-top: 2rem; }
.school-pillars article { display: flex; align-items: flex-start; gap: 1.1rem; padding-block: 1.5rem; border-top: 1px solid var(--line); }
.school-pillars h3 { font-size: 1.3rem; }
.school-pillars p { margin-top: .65rem; color: var(--muted); }
.school-pillar-mark { flex: 0 0 2.3rem; display: grid; place-items: center; height: 2.3rem; color: var(--cyan-dark); font-size: 1.7rem; line-height: 1; }
.school-pillar-move { transform: rotate(-8deg); }
.school-pillar-support { color: oklch(52% .075 300); }
.school-programme { padding-bottom: 1.8rem; }
.schools-page .care-guide { padding-top: 2.5rem; }
.schools-page .guide-reply h4 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.45; margin: .2rem 0 .8rem; }
.school-progress { background: var(--navy); color: var(--paper); }
.school-progress .eyebrow { color: var(--cyan); }
.school-progress .school-section-heading > p { color: var(--light-text); }
.school-loop { list-style: none; margin: 2.4rem 0; padding: 0; }
.school-loop li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; position: relative; padding-bottom: 1.7rem; }
.school-loop li:not(:last-child)::before { content: ''; position: absolute; top: 2.5rem; bottom: .3rem; left: 1.2rem; width: 1px; background: oklch(45% .06 225); }
.school-loop-number { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid oklch(54% .08 222); color: var(--cyan); font-size: .9rem; line-height: 1; }
.school-loop h3 { font-size: 1.18rem; }
.school-loop p { margin-top: .4rem; color: var(--light-text); font-size: .9rem; line-height: 1.65; }
.school-report { border: 1px solid oklch(48% .038 245); border-radius: 16px; padding: 1.4rem; }
.school-report h3 { font-size: 1.55rem; }
.school-report > div > p { margin-top: .8rem; font-size: .9rem; color: var(--light-text); }
.school-report-note { display: block; margin-top: 1rem; font-size: .7rem; color: var(--cyan); }
.school-report dl { margin: 1.5rem 0 0; }
.school-report dl > div { padding-block: .9rem; border-top: 1px solid oklch(40% .035 248); }
.school-report dt { font-size: .88rem; font-weight: 700; }
.school-report dd { margin: .4rem 0 0; font-size: .83rem; line-height: 1.65; color: var(--light-text); }
.school-boundary { margin-top: 1.5rem; font-size: .83rem; color: var(--light-text); }
.school-human-support { background: var(--school-warm); }
.school-human-support figure { position: relative; }
.school-human-support img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.school-human-support > div { padding: 2.4rem var(--space) 3rem; }
.school-human-support h2 + p { margin-top: 1.35rem; }
.school-human-support .school-disclosure { margin-top: 1.7rem; }
.school-disclosure { border-bottom: 1px solid var(--line); }
.school-disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; cursor: pointer; padding: 1.2rem 0; min-height: 52px; font-size: 1rem; font-weight: 600; line-height: 1.5; list-style: none; }
.school-disclosure summary::-webkit-details-marker { display: none; }
.school-disclosure summary > b { display: block; flex-shrink: 0; font-size: 1.4rem; font-weight: 400; color: var(--cyan-dark); transition: transform .25s var(--ease); }
.school-disclosure[open] summary > b { transform: rotate(45deg); }
.school-disclosure > div { padding: 0 0 1.25rem; }
.school-disclosure > div p { color: var(--muted); font-size: .94rem; }
.school-start { display: grid; gap: 2.4rem; }
.school-start-intro > p { margin-top: 1.5rem; color: var(--muted); }
.school-start-intro .button { margin-top: 1.6rem; }
.school-start-steps { list-style: none; margin: 0; padding: 0; }
.school-start-steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 1.15rem; padding: 1.4rem 0; border-top: 1px solid var(--line); }
.school-start-steps li > span { color: var(--cyan-dark); font-size: .83rem; }
.school-start-steps h3 { font-size: 1.3rem; }
.school-start-steps p { margin-top: .65rem; color: var(--muted); font-size: .94rem; }
.school-possibilities { background: var(--soft); }
.school-optional { margin-top: 1.8rem; }
.school-technology { display: grid; gap: 2rem; margin-top: 3.3rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.school-technology > div > p:not(.eyebrow) { font-size: .92rem; color: var(--muted); }
.school-technology > ol { list-style: none; margin: 0; padding: 0; }
.school-technology li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.school-technology strong { font-size: 1.25rem; font-weight: 600; }
.school-technology li > span { color: var(--muted); font-size: .82rem; line-height: 1.6; }
.school-faqs { margin-top: 1.5rem; }
.school-questions > .small-note { max-width: 72ch; }
.school-enquiry { display: grid; gap: 1.8rem; padding: 3rem var(--space); background: var(--cyan); color: var(--navy); }
.school-enquiry .eyebrow { color: var(--navy); }
.school-enquiry h2 + p { margin-top: 1.3rem; }
.school-enquiry-actions { display: flex; flex-direction: column; align-items: flex-start; }
.school-enquiry-actions .button { color: var(--paper); background: var(--navy); }
.school-enquiry-actions .button:hover { background: oklch(28% .045 261); }
.school-enquiry-actions .text-link { margin-top: 1rem; min-height: 44px; }
.school-enquiry-actions p { margin-top: 1.1rem; font-size: .8rem; }
html[data-theme="dark"] .schools-page { --school-warm: oklch(25% .023 78); }
html[data-theme="dark"] .school-pillar-support { color: oklch(79% .09 301); }

@media (min-width: 600px) {
  .school-opening-image img { max-height: 470px; aspect-ratio: 16 / 9; }
  .school-opening-copy { padding-top: 2.7rem; }
  .school-opening h1 { font-size: clamp(3.5rem, 6.6vw, 5.6rem); max-width: 20ch; }
  .school-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .school-report { padding: 2rem; }
  .school-report dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .school-human-support img { aspect-ratio: 16 / 9; max-height: 500px; }
  .school-loop { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.1rem; }
  .school-loop li { display: block; padding: 0; }
  .school-loop li:not(:last-child)::before { top: 1.25rem; left: 2.8rem; width: calc(100% - 2rem); height: 1px; bottom: auto; }
  .school-loop h3 { margin-top: 1rem; font-size: 1rem; }
  .school-loop p { font-size: .8rem; }
}

@media (min-width: 1101px) {
  .school-opening { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; }
  .school-opening-image { grid-column: 2; grid-row: 1; }
  .school-opening-image img { height: 100%; min-height: 680px; max-height: none; object-position: 58% center; }
  .school-opening-copy { grid-column: 1; grid-row: 1; align-self: center; padding-block: 4rem; padding-right: 3.5rem; }
  .school-opening h1 { font-size: clamp(3.9rem, 5.2vw, 5.8rem); }
  .school-chapters { gap: 2.8rem; }
  .school-chapters a { font-size: .86rem; }
  .school-section-heading { grid-template-columns: 1.15fr 1fr; align-items: end; column-gap: 5rem; }
  .school-section-heading .eyebrow { grid-column: 1 / -1; }
  .school-section-heading h2:only-child { grid-column: 1 / -1; }
  .school-pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 3rem; }
  .school-pillars article { display: block; }
  .school-pillar-mark { margin-bottom: 1.2rem; }
  .school-pillars p { font-size: .93rem; }
  .school-loop { margin-block: 3.5rem; gap: 2rem; }
  .school-loop-number { width: 3rem; height: 3rem; }
  .school-loop li:not(:last-child)::before { top: 1.5rem; left: 3.5rem; width: calc(100% - 2rem); }
  .school-loop h3 { font-size: 1.3rem; }
  .school-loop p { font-size: .92rem; }
  .school-report { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; }
  .school-report dl { margin: 0; }
  .school-human-support { display: grid; grid-template-columns: 1.05fr 1fr; }
  .school-human-support img { height: 100%; max-height: none; object-position: 44% center; }
  .school-human-support > div { padding: 4rem var(--space) 4rem 3.5rem; align-self: center; }
  .school-start { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .school-optional { max-width: 900px; margin-top: 2.5rem; }
  .school-technology { grid-template-columns: 1.1fr .8fr; gap: 5rem; align-items: center; margin-top: 4rem; }
  .school-faqs { max-width: 900px; }
  .school-enquiry { grid-template-columns: 1.3fr 1fr; align-items: center; gap: 4rem; padding-block: 4.5rem; }
  .school-enquiry-actions { justify-self: end; }
}

@media (max-width: 359px) {
  .school-opening h1 { font-size: 2.4rem; }
  .school-actions { display: grid; }
  .school-actions .button { gap: .75rem; }
  .school-chapters { column-gap: 1rem; }
  .school-chapters a { font-size: .74rem; }
  .schools-page .button { gap: 1rem; padding-inline: 1rem; font-size: .82rem; }
}

@media print {
  .school-opening,
  .school-progress,
  .school-enquiry { background: var(--paper); color: var(--navy); }
  .school-opening-copy > p,
  .school-progress p,
  .school-progress dd { color: var(--navy); }
  .school-chapters { display: none; }
  .school-disclosure > div { display: block; }
}