/*
  St Patrick's School Masterton — shared styles

  Typeface: Nunito (Google Fonts), chosen for a warm, rounded, not-corporate feel. The Laro @font-face blocks below are kept
  only in case the licensed files are added to /fonts later (see fonts/README.txt); Laro is not in the stack now.
  (see fonts/README.txt). Until they are there the stack falls back to Figtree, a close geometric sans,
  loaded from Google Fonts so the design can be reviewed.
*/
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,400..800,0..100&display=swap');

@font-face { font-family: 'Laro'; font-weight: 400; font-style: normal; font-display: swap;
  src: local('Laro'), local('Laro Regular'), url('../fonts/Laro-Regular.woff2') format('woff2'), url('../fonts/Laro-Regular.woff') format('woff'), url('../fonts/Laro-Regular.otf') format('opentype'); }
@font-face { font-family: 'Laro'; font-weight: 500; font-style: normal; font-display: swap;
  src: local('Laro Medium'), url('../fonts/Laro-Medium.woff2') format('woff2'), url('../fonts/Laro-Medium.woff') format('woff'), url('../fonts/Laro-Medium.otf') format('opentype'); }
@font-face { font-family: 'Laro'; font-weight: 600; font-style: normal; font-display: swap;
  src: local('Laro SemiBold'), url('../fonts/Laro-SemiBold.woff2') format('woff2'), url('../fonts/Laro-SemiBold.woff') format('woff'), url('../fonts/Laro-SemiBold.otf') format('opentype'); }
@font-face { font-family: 'Laro'; font-weight: 700; font-style: normal; font-display: swap;
  src: local('Laro Bold'), url('../fonts/Laro-Bold.woff2') format('woff2'), url('../fonts/Laro-Bold.woff') format('woff'), url('../fonts/Laro-Bold.otf') format('opentype'); }

:root {
  --green: #087A3F;
  --green-dark: #066333;
  --green-deep: #054D28;
  --sage: #E1F2E7;
  --cream: #F4F1EA;
  --white: #FFFFFF;
  --ink: #14211A;
  --muted: #5A665E;
  --line: rgba(20, 33, 26, .16);
  --line-light: rgba(255, 255, 255, .22);

  --font: 'Nunito', 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --max: 1366px;
  --gutter: 22px;
  --radius: 6px;
  --header-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
/* Grid items default to min-width:auto, which stops them shrinking below their content's
   intrinsic size (e.g. a photo's real pixel width) and can overflow on narrow viewports. */
.welcome-grid > *, .values-head > *, .values-grid > *, .why > *, .voices-grid > *,
.terms > *, .statements > *, .values-plain > *, .reasons-grid > *, .faq-group > *, .step-list > *, .footer-grid > *, .footer-links > *, .detail-grid > * { min-width: 0; }
html { scroll-behavior: smooth; }
main [id] { scroll-margin-top: 110px; }
body {
  margin: 0; font-family: var(--font); font-size: 18px; font-weight: 450; line-height: 1.6; color: var(--ink); background: var(--white);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; }
p { margin: 0 0 1.1em; }
ul { margin: 0; padding: 0; list-style: none; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--white); color: var(--green); padding: 10px 16px; z-index: 300; font-weight: 600; }
.skip-link:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--font); font-weight: 600; font-size: 16px; line-height: 1;
  text-decoration: none; padding: 16px 28px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.btn-light { background: var(--white); color: var(--green); }
.btn-light:hover { background: var(--sage); }
.btn-green { background: var(--green); color: var(--white); }
.btn-green:hover { background: var(--green-dark); }
.btn-outline { border-color: rgba(255,255,255,.7); color: var(--white); }
.btn-outline:hover { background: var(--white); color: var(--green); border-color: var(--white); }
.btn-outline-dark { border-color: var(--green); color: var(--green); }
.btn-outline-dark:hover { background: var(--green); color: var(--white); }

/* ---------- Header (transparent over hero, solid once scrolled) ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; color: var(--white);
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 24px; transition: min-height .3s ease; }
.site-header.scrolled { background: var(--white); color: var(--ink); border-bottom-color: var(--line); }
.site-header.scrolled .container { min-height: 72px; }

.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.brand { gap: 16px; }
.brand img { height: 76px; width: auto; transition: height .3s ease; filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); }
.site-header.scrolled .brand img { height: 52px; filter: none; }
@media (min-width: 768px) {
  .brand img { height: 112px; }
  .site-header.scrolled .brand img { height: 68px; }
  .site-header .container { min-height: 136px; }
  .site-header.scrolled .container { min-height: 88px; }
  .site-header .brand-text strong { font-size: 22px; }
}
.brand-text { display: block; line-height: 1.1; }
.brand-text strong { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.brand-text small { display: block; font-size: 14px; font-weight: 500; opacity: .8; margin-top: 3px; }
.site-header.scrolled .brand-text strong { color: var(--green); }

.main-nav { display: none; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 8px; padding: 14px 16px; font-size: 16px; font-weight: 500; text-decoration: none; color: inherit; border-radius: 999px;
  transition: background .2s, color .2s;
}
.nav-link:hover, .nav-item:focus-within > .nav-link { background: rgba(255,255,255,.16); }
.site-header.scrolled .nav-link:hover, .site-header.scrolled .nav-item:focus-within > .nav-link { background: var(--sage); }
.has-sub > .nav-link::after {
  content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px);
}
.sub { position: absolute; left: -8px; top: 100%; padding-top: 12px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; }
.sub-inner { min-width: 270px; background: var(--white); color: var(--ink); border-radius: 12px; padding: 8px; box-shadow: 0 18px 40px rgba(1, 30, 15, .22); }
.nav-item:hover > .sub, .nav-item:focus-within > .sub { opacity: 1; visibility: visible; transform: none; }
.sub a { display: block; padding: 11px 16px; font-size: 16px; text-decoration: none; border-radius: 8px; }
.sub a:hover { background: var(--sage); color: var(--green); }
.sub a.active { color: var(--green); font-weight: 600; }
.nav-link.active { font-weight: 600; }
.nav-item.nav-enrol { margin-left: 10px; }
.nav-enrol > .nav-link { background: var(--white); color: var(--green); padding: 14px 24px; font-weight: 600; }
.nav-enrol > .nav-link:hover, .nav-enrol:focus-within > .nav-link { background: var(--sage); }
.site-header.scrolled .nav-enrol > .nav-link { background: var(--green); color: var(--white); }
.site-header.scrolled .nav-enrol > .nav-link:hover { background: var(--green-dark); }
.nav-item:nth-last-child(-n+2) .sub { left: auto; right: -8px; }

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 48px; height: 48px; padding: 13px;
  background: none; border: 1.5px solid currentColor; border-radius: 50%; cursor: pointer; color: inherit;
}
.nav-toggle span { display: block; height: 1.5px; background: currentColor; }

/* Mobile overlay */
.mobile-menu { position: fixed; inset: 0; z-index: 200; background: var(--green-deep); color: var(--white); overflow-y: auto; display: none; padding: 96px var(--gutter) 60px; text-align: center; }
.mobile-menu.open { display: block; }
.mobile-close { position: fixed; top: 18px; right: 18px; width: 48px; height: 48px; background: none; border: 1.5px solid rgba(255,255,255,.5); border-radius: 50%; color: var(--white); font-size: 28px; line-height: 1; cursor: pointer; }
.mobile-group { margin-bottom: 28px; }
.mobile-group h2 { font-size: 15px; font-weight: 500; letter-spacing: 0; opacity: .6; margin: 0 0 6px; }
.mobile-group a { display: block; padding: 6px 0; font-size: 24px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; }
.mobile-group a:hover { text-decoration: underline; }
.mobile-group a.active { color: var(--white); text-decoration: underline; }
body.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { position: relative; color: var(--white); background: var(--green-deep); min-height: 680px; min-height: max(680px, min(100svh, 960px)); display: flex; align-items: flex-end; overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(3,38,20,.72) 0px, rgba(3,38,20,.68) 36px, rgba(3,38,20,.56) 76px, rgba(3,38,20,.4) 116px, rgba(3,38,20,.24) 156px, rgba(3,38,20,.1) 196px, rgba(3,38,20,.03) 226px, rgba(3,38,20,0) 250px), linear-gradient(0deg, rgba(3,38,20,.84) 0px, rgba(3,38,20,.78) 60px, rgba(3,38,20,.66) 140px, rgba(3,38,20,.5) 230px, rgba(3,38,20,.34) 320px, rgba(3,38,20,.19) 410px, rgba(3,38,20,.08) 500px, rgba(3,38,20,.02) 560px, rgba(3,38,20,0) 600px);
}
.hero h1, .hero-lead, .page-hero h1, .page-hero .eyebrow, .cta h2, .cta p { text-shadow: 0 1px 14px rgba(0,0,0,.35); }
.site-header:not(.scrolled) .nav-link, .site-header:not(.scrolled) .brand-text { text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.hero .container { position: relative; z-index: 2; padding-top: 140px; padding-bottom: 56px; }
.hero h1 { font-size: clamp(40px, 9vw, 80px); line-height: .98; letter-spacing: -.03em; margin-bottom: 24px; max-width: 12ch; }
.hero h1 span { display: block; }
.hero-lead { max-width: 600px; font-size: 19px; line-height: 1.55; color: rgba(255,255,255,.94); margin-bottom: 32px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Sections ---------- */
.section { padding: 80px 0; }
.section.tight-bottom { padding-bottom: 0; }
.section-cream { background: var(--cream); }
.section-green { background: var(--green); color: var(--white); }
.section h2 { font-size: clamp(30px, 3.9vw, 44px); letter-spacing: -.025em; }
.lede { font-size: 20px; line-height: 1.55; color: var(--muted); }
.section-green .lede { color: rgba(255,255,255,.82); }

/* Welcome */
.statement { font-size: clamp(25px, 3.7vw, 38px); font-weight: 600; line-height: 1.16; letter-spacing: -.025em; color: var(--green-deep); margin: 0; max-width: 21em; }
.statement + .prose { margin-top: 24px; }
.subject-cards + .btn, .reasons-ed + .btn { margin-top: 40px; }
.welcome-grid { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
.img-wrap { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--sage); }
.img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.overview-photo img { object-position: 50% 25%; }

/* Values */
.values-head { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 56px; }
.values-head h2 { margin: 0; }
.values-head p { margin: 0; }
.values-grid { display: grid; grid-template-columns: 1fr; gap: 44px; }
.value .img-wrap { margin-bottom: 24px; }
.value h3 { font-size: 44px; letter-spacing: -.025em; margin: 0 0 2px; }
.value .en { display: block; font-size: 18px; font-weight: 500; opacity: .7; margin-bottom: 14px; }
.value p { margin: 0; color: rgba(255,255,255,.86); }

/* Why us: half-bleed image + copy */
.why { display: grid; grid-template-columns: 1fr; min-width: 0; }
.why-img { width: 100%; aspect-ratio: 4 / 3; min-width: 0; overflow: hidden; }
.why-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why-copy { padding: 64px var(--gutter) 72px; min-width: 0; }
.why-copy h2 { font-size: clamp(30px, 3.9vw, 44px); letter-spacing: -.025em; color: var(--green); margin-bottom: 28px; }
/* The emphasized lead paragraph that opens a block of prose — used consistently across
   pages (Who We Are, How We Teach, Learning at Home, the homepage), not scoped to any one
   layout, so any opening paragraph can use it. */
.first { font-size: 22px; line-height: 1.5; font-weight: 500; color: var(--ink); }
.why-copy p { color: #38443c; }
.why-copy .pathway { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--ink); }

/* Voices */
.voices-head { margin-bottom: 48px; }
.voices-head h2 { margin: 0; }
.voices-grid { display: grid; grid-template-columns: 1fr; gap: 0 56px; }
.voice { border-top: 1px solid var(--line); padding: 30px 0 40px; margin: 0; }
.voice h3 { font-size: 28px; letter-spacing: -.02em; margin-bottom: 14px; }
.voice p { color: var(--muted); }
.voice cite { font-style: normal; font-size: 16px; font-weight: 600; color: var(--green); }

/* Term dates + links */
.terms { display: grid; grid-template-columns: 1fr; margin-top: 36px; }
.term { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.terms .term:last-child { border-bottom: 1px solid var(--line); }
.term .t-name { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.term .t-dates { color: var(--muted); font-size: 18px; text-align: right; }

/* CTA */
.cta { position: relative; color: var(--white); background: var(--green-deep); overflow: hidden; min-height: 560px; display: flex; align-items: center; }
.cta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.cta::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.3) 55%, rgba(0,0,0,.1) 100%); }
.cta .container { position: relative; z-index: 2; padding-top: 80px; padding-bottom: 80px; }
.cta h2 { font-size: clamp(34px, 5.6vw, 60px); letter-spacing: -.03em; line-height: 1; margin-bottom: 24px; }
.cta p { font-size: 20px; max-width: 560px; color: rgba(255,255,255,.94); margin-bottom: 32px; }

/* ---------- Interior page hero ---------- */
.page-hero { position: relative; color: var(--white); background: var(--green-deep); min-height: 420px; display: flex; align-items: flex-end; overflow: hidden; }
.page-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.page-hero-img.top { object-position: 50% 14%; }
.page-hero-img.low { object-position: 50% 64%; }
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(3,38,20,.72) 0px, rgba(3,38,20,.66) 34px, rgba(3,38,20,.52) 72px, rgba(3,38,20,.34) 110px, rgba(3,38,20,.17) 146px, rgba(3,38,20,.06) 176px, rgba(3,38,20,0) 200px), linear-gradient(0deg, rgba(3,38,20,.82) 0px, rgba(3,38,20,.74) 36px, rgba(3,38,20,.58) 84px, rgba(3,38,20,.4) 132px, rgba(3,38,20,.24) 180px, rgba(3,38,20,.1) 228px, rgba(3,38,20,.03) 262px, rgba(3,38,20,0) 290px); }

/* Lift the photography itself: slightly brighter and more saturated across every photo. */
.hero-img, .page-hero-img, .cta > img, .img-wrap img, .why-img img, .card-img img { filter: brightness(1.07) saturate(1.14); }
.page-hero .container { position: relative; z-index: 2; padding-top: 150px; padding-bottom: 48px; }
.page-hero .eyebrow { font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: 12px; }
.page-hero h1 { font-size: clamp(34px, 5.2vw, 54px); letter-spacing: -.03em; margin-bottom: 0; }

/* Scripture / pull-quote band */
.quote-band { background: var(--green); color: var(--white); text-align: center; }
.quote-band blockquote { margin: 0 auto; max-width: 880px; font-size: clamp(24px, 3.7vw, 36px); font-weight: 600; line-height: 1.28; letter-spacing: -.02em; }
.quote-band cite { display: block; margin-top: 24px; font-style: normal; font-size: 16px; font-weight: 600; color: rgba(255,255,255,.72); }

/* Letter (Principal's welcome) reuses the .why split layout */
.letter p { color: #38443c; }
.letter .sign-off { margin-top: 32px; font-weight: 700; color: var(--ink); }
.letter .sign-off span { display: block; font-weight: 500; color: var(--muted); font-size: 16px; }

/* Mission & Vision statements */
.statements { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 64px; }
.statement-card { border-top: 1px solid var(--line); padding-top: 24px; }
.statement-card .label { display: block; font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.statement-card p { font-size: clamp(22px, 3vw, 28px); font-weight: 500; line-height: 1.3; letter-spacing: -.02em; color: var(--green-deep); margin: 0; }
.statement-card .note { font-size: 17px; font-weight: 400; letter-spacing: normal; line-height: 1.6; color: var(--muted); margin-top: 16px; }

/* Inline text link within a paragraph */
.inline-link { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.inline-link:hover { color: var(--green); text-decoration-color: currentColor; }

/* Plain (photo-free) values list, for reuse on interior pages */
.values-plain { display: grid; grid-template-columns: 1fr; gap: 36px; }
.value-plain h3 { font-size: 30px; letter-spacing: -.02em; margin: 0 0 2px; color: var(--green); }
.value-plain .en { display: block; font-size: 16px; font-weight: 500; color: var(--muted); margin-bottom: 10px; }
.value-plain p { margin: 0; color: var(--muted); }
.motto-line { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); font-size: 19px; color: var(--ink); }
.motto-line strong { color: var(--green); }

/* Jump-to navigation for long, multi-section pages */
.jump-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.jump-nav a {
  font-size: 15px; font-weight: 600; padding: 10px 18px; border: 1.5px solid var(--line); border-radius: 999px;
  text-decoration: none; color: var(--ink); transition: border-color .2s, color .2s, background .2s;
}
.jump-nav a:hover { border-color: var(--green); color: var(--green); background: var(--sage); }

/* Narrow prose block for text-only sections */
.prose { max-width: 820px; }
.prose.tight { margin-bottom: 8px; }
.btn.spaced { margin-top: 36px; }
.prose p { font-size: 19px; color: var(--muted); }
.prose .pathway { color: var(--ink); }

/* Intro grid: large statement beside supporting copy + CTA */
.intro-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }


/* ---------- Curriculum v3: browsable card grid with expandable detail ---------- */
.subject-cards { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 8px; }
.subject-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.subject-card .card-img { aspect-ratio: 4 / 3; background: var(--sage); }
.subject-card .card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.subject-card .card-body { padding: 26px 26px 24px; flex: 1; display: flex; flex-direction: column; }
.subject-card h2 { font-size: 25px; color: var(--green); margin-bottom: 10px; letter-spacing: -.02em; }
.subject-card .teaser { color: var(--muted); margin: 0 0 16px; }

/* Reasons grid (Why Choose v2): the same plain, unbordered text-block language as the
   Who We Are values grid — a small green label, a bold heading, a short paragraph — in a
   tighter 2-column arrangement. A large pale "watermark" numeral and a tall single column
   of hairline-divided rows (tried first) is a pattern from corporate/SaaS "process" sections;
   against a low-contrast cream background it also read as empty space rather than content,
   which is the opposite of what a primary school site should feel like. This keeps things
   compact and legible instead. */
.reasons-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.reason-item .num-label { display: block; font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--green); margin-bottom: 10px; }
.reason-item h3 { font-size: 24px; color: var(--green); letter-spacing: -.02em; margin: 0 0 10px; }
.reason-item .prose { max-width: 440px; }
.reason-item .prose p { font-size: 17px; }

/* A heading with no accompanying lede shouldn't use .values-head — that grid reserves a
   second column for the lede paragraph, and a lone heading dropped into just the first
   column wraps far earlier than the page width would actually allow. */
.grid-head { margin-bottom: 48px; }
@media (min-width: 700px) {
  .reasons-grid { grid-template-columns: 1fr 1fr; gap: 48px 44px; }
}

/* Plain point list: a small diamond marker (from the crest) instead of a default bullet,
   for the "what this looks like day to day" style lists. */
.point-list { display: grid; gap: 14px; margin: 4px 0 28px; max-width: 620px; }
.prose.spaced-top { margin-top: 24px; }
.point-list li { position: relative; padding-left: 26px; color: var(--muted); font-size: 18px; line-height: 1.5; }
.point-list li::before {
  content: ''; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px;
  background: var(--green); transform: rotate(45deg);
}
@media (min-width: 700px) {
  /* Two columns for longer lists (5+ short items) — halves how far there is to read
     through before reaching the next section, without adding imagery or changing the
     page's overall spacing rhythm. */
  .point-list.wide { grid-template-columns: 1fr 1fr; column-gap: 40px; max-width: 900px; }
}

/* A sub-heading directly above a .jump-nav (e.g. "Find Resources by Year Level"),
   and extra breathing room after the nav before the next block starts. */
.prose + h3 { margin-top: 40px; margin-bottom: 20px; }
.jump-nav.spaced { margin-bottom: 56px; }

/* Expand/collapse: a real button + a grid-rows panel, so the reveal animates smoothly
   instead of the instant snap native <details> gives you. */
.card-expand { margin-top: 0; }
.card-toggle {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font); font-weight: 600; color: var(--green); font-size: 15px; padding: 2px 0;
}
.card-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.card-toggle .plus {
  flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--green);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1;
  color: var(--green); transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.card-toggle[aria-expanded="true"] .plus { transform: rotate(45deg); }
.card-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.4,0,.2,1); }
.card-panel.open { grid-template-rows: 1fr; }
.card-panel-inner { overflow: hidden; }
/* The revealed text reads as a continuation of the teaser (same paragraph spacing, no
   divider), so the toggle button trails at the end of the content instead of interrupting
   it partway through. */
.subject-card .more { margin-bottom: 16px; }
.subject-card .more p { color: var(--muted); margin: 0 0 16px; }
.subject-card .more p:last-child { margin-bottom: 0; }
.subject-card .more .pathway { color: var(--ink); }

/* Continue exploring: arrow link rows */
.explore-list { margin-top: 32px; }
.explore-list a {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line);
  font-size: 22px; font-weight: 600; letter-spacing: -.02em; text-decoration: none; color: var(--ink); transition: color .2s, padding-left .2s;
}
.explore-list a:last-child { border-bottom: 1px solid var(--line); }
.explore-list a:hover { color: var(--green); padding-left: 10px; }
.explore-list a::after { content: '\2192'; font-weight: 400; transition: transform .2s; }
.explore-list a:hover::after { transform: translateX(4px); }
.prose .btn + .credentials { margin-top: 32px; }
.explore-list a .meta { margin-left: auto; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--muted); }

/* Resources by year level: one block per year, two arrow links each */
.year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px; margin: 32px 0 64px; }
.year-grid > * { min-width: 0; }
.year-block h3 { font-size: 24px; color: var(--green); letter-spacing: -.02em; margin: 0 0 6px; }
.year-block .explore-list { margin-top: 0; }
.year-block .explore-list a { font-size: 18px; padding: 16px 0; }

/* Second photo split on one page: flip the photo to the right on wide screens */
@media (min-width: 1000px) { .why.flip .why-img { order: 2; } }

/* FAQ accordion (New Entrant Information): the whole question row is the toggle, and the
   answer slides open with the same grid-rows technique used on Our Curriculum's cards —
   smooth, not an instant snap — but as a plain divided list rather than a card, since these
   are short Q&A pairs, not subject areas with their own imagery. */
.faq-group { margin-top: 8px; }
.faq-item { border-top: 1px solid var(--line); }
.faq-group .faq-item:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 800px) {
  /* Two columns instead of one long list — with 24 questions across the page, this roughly
     halves how far there is to scroll without dropping any content. Opening one answer
     doesn't disturb its row partner (align-items: start), and the bottom border targets
     the last item in *each* column, not just the last item overall. */
  .faq-group { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start; }
  .faq-group .faq-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.faq-q {
  all: unset; box-sizing: border-box; display: flex; width: 100%; justify-content: space-between; align-items: center;
  gap: 20px; padding: 22px 0; cursor: pointer; font-family: var(--font); font-weight: 600; font-size: 19px;
  letter-spacing: -.01em; color: var(--ink); text-align: left;
}
.faq-q:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.faq-q .plus {
  flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--green);
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1;
  color: var(--green); transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.faq-q[aria-expanded="true"] .plus { transform: rotate(45deg); }
.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1); }
.faq-panel.open { grid-template-rows: 1fr; }
.faq-panel-inner { overflow: hidden; }
.faq-answer { max-width: 720px; padding-bottom: 24px; color: var(--muted); }
.faq-answer p { margin: 0 0 16px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer table { border-collapse: collapse; margin: 4px 0 0; font-size: 17px; }
.faq-answer td { padding: 8px 20px 8px 0; border-top: 1px solid var(--line); }
.faq-answer tr:first-child td { border-top: 0; }

/* Sequential numbered steps (Enrolment Process): a plain divided list, since these need to
   be read in order rather than browsed — the doc's own "1. ", "2. " headings already carry
   the numbering, so no separate numeral device is added on top. */
.step-list { margin-top: 8px; }
.step-item { padding: 26px 0; border-top: 1px solid var(--line); }
.step-list .step-item:last-child { border-bottom: 1px solid var(--line); }
.step-item h3 { font-size: 21px; color: var(--green); margin-bottom: 8px; letter-spacing: -.01em; }
.step-item p { margin: 0; color: var(--muted); max-width: 680px; }
@media (min-width: 800px) {
  /* Same two-column treatment as the FAQ groups on New Entrant Information — the steps
     are numbered, so reading order stays clear even split across columns, and it roughly
     halves how much of the page this section takes up. */
  .step-list.wide { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start; }
  .step-list.wide .step-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* Formal citation block (the Integration Agreement wording): distinct from .quote-band,
   which is sized for a short, punchy scripture line — this is a longer, legal/doctrinal
   quote, so it reads at normal prose size with a simple rule to mark it as quoted text. */
.cite-block {
  border-left: 3px solid var(--green); padding: 2px 0 2px 24px; margin: 0 0 32px; max-width: 760px;
  font-style: italic; font-size: 19px; line-height: 1.65; color: var(--ink);
}

/* Short, independent reference facts (Integration Agreement / Fees / Dues) set side by
   side as divided columns rather than stacked headings, since each is a quick, separate
   fact rather than part of one flowing topic. */
.detail-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.detail-item h3 { font-size: 22px; color: var(--green); letter-spacing: -.02em; margin: 0 0 14px; }
.detail-item p { color: var(--muted); }
.detail-item .cite-block { margin: 0; }

@media (min-width: 860px) {
  .detail-grid { grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
  .detail-item { border-left: 1px solid var(--line); padding-left: 40px; }
  .detail-item:first-child { border-left: 0; padding-left: 0; }
}

/* Footer */
.site-footer { background: var(--green-deep); color: rgba(255,255,255,.78); padding: 72px 0 0; font-size: 16px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 44px; padding-bottom: 56px; }
.footer-brand img { height: 120px; width: auto; margin-bottom: 20px; }
.footer-brand p { max-width: 340px; }
.site-footer h4 { font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--white); margin-bottom: 14px; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
.footer-links li, .footer-contact li { margin-bottom: 8px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-bottom { border-top: 1px solid var(--line-light); padding: 22px 0 28px; font-size: 14px; color: rgba(255,255,255,.5); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }

/* ---------- Breakpoints ---------- */
@media (min-width: 768px) {
  :root { --gutter: 40px; --header-h: 96px; }
  .section { padding: 112px 0; }
  .welcome-grid { grid-template-columns: 1.1fr 1fr; gap: 80px; }
  .intro-grid { grid-template-columns: 1.15fr 1fr; gap: 64px; }
  .terms { grid-template-columns: repeat(4, 1fr); gap: 0 32px; }
  .term { flex-direction: column; gap: 6px; }
  .terms .term:last-child { border-bottom: 0; }
  .term .t-dates { text-align: left; }
  .values-head { grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; }
  .values-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .value h3 { font-size: 38px; }
  .voices-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .statements { grid-template-columns: 1fr 1fr; gap: 0 56px; align-items: start; }
  .statement-card + .statement-card { border-left: 1px solid var(--line); padding-left: 56px; }
  .values-plain { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
@media (min-width: 1000px) {
  :root { --gutter: 60px; }
  .why { grid-template-columns: 1fr 1fr; min-height: 720px; }
  .why-img { aspect-ratio: auto; min-height: 0; }
  .why-copy { padding: 96px clamp(48px, 6vw, 110px); display: flex; flex-direction: column; justify-content: center; }
  .page-hero { min-height: 480px; }
  .subject-cards { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-grid { grid-template-columns: 1.1fr 1.6fr 1fr; gap: 56px; }
  .footer-brand { grid-column: auto; }
  .hero h1 { max-width: none; }
}
@media (min-width: 1140px) {
  .main-nav { display: block; }
  .nav-toggle { display: none; }
}
@media (max-width: 1139px) {
  :root { --header-h: 76px; }
  .brand img { height: 50px; }
  .brand-text strong { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* People directory (Our People): compact avatar + name rows grouped under quiet headings */
.people-group { margin-top: 48px; }
.people-group:first-of-type { margin-top: 40px; }
.people-group h3 { font-size: 22px; color: var(--green); letter-spacing: -.02em; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.people-grid { display: grid; grid-template-columns: 1fr; gap: 32px 32px; margin-top: 28px; }
.people-grid > * { min-width: 0; }
.person { display: flex; align-items: center; gap: 16px; }
.person .avatar { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: var(--sage); }
.person-text { display: block; min-width: 0; }
.person .name { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); }
.person .role, .person .meta { display: block; font-size: 15px; line-height: 1.4; color: var(--muted); margin-top: 3px; }
.person .meta { font-size: 14px; }
.person.plain { border-left: 3px solid var(--green); padding: 2px 0 2px 16px; }
.person .email { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--green); text-decoration: none; overflow-wrap: break-word; }
.person .email:hover { text-decoration: underline; }
@media (min-width: 640px) { .people-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .people-grid { grid-template-columns: repeat(3, 1fr); } .people-grid.compact, .people-grid.board { grid-template-columns: repeat(4, 1fr); } }
.person .avatar { box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--sage); }
.section-cream .person .avatar { box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--sage); }
.person .email { color: var(--green-dark); }


/* Learning assistants: lighter, denser */
.people-grid.compact .avatar { width: 56px; height: 56px; }
.people-grid.compact .name { font-size: 17px; }

/* Board: type only, set off by a hairline rather than a card */
.people-grid.board { gap: 24px 32px; }
.person.plain { align-items: flex-start; border-left: 0; padding: 0; }

/* Third-party embed (newsletter): sits in a quiet rounded frame */
.embed-frame { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--white); }
.embed-frame iframe { display: block; width: 100%; }
@media (min-width: 768px) { .term { justify-content: flex-start; } }

/* Term dates page: stacked rows (one term per line) instead of the homepage's four-column strip */
.terms.stacked { grid-template-columns: 1fr; max-width: 900px; margin-top: 32px; }
.terms.stacked .term { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 24px; padding: 26px 0; }
.terms.stacked .term:last-child { border-bottom: 1px solid var(--line); }
.terms.stacked .t-name { font-size: 28px; }
.terms.stacked .t-dates { font-size: 20px; text-align: right; }
.terms-year { font-size: 26px; color: var(--green); letter-spacing: -.02em; margin: 48px 0 0; }
.terms-year:first-of-type { margin-top: 36px; }
.terms-year + .terms.stacked { margin-top: 12px; }
.terms.stacked .term { padding: 20px 0; }
.terms.stacked .t-name { font-size: 24px; }

/* Contact form: mirrors the fields of the Elementor Form widget used on the WordPress build */
.form-wrap { max-width: 760px; }
.contact-form { margin-top: 32px; }
.contact-form .field { margin-bottom: 22px; }
.contact-form .field-row { display: grid; grid-template-columns: 1fr; gap: 0 24px; }
@media (min-width: 640px) { .contact-form .field-row { grid-template-columns: 1fr 1fr; } }
.contact-form label { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.contact-form input, .contact-form textarea {
  width: 100%; font: inherit; font-size: 17px; color: var(--ink); background: var(--white);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px; transition: border-color .2s, box-shadow .2s;
}
.contact-form textarea { resize: vertical; min-height: 150px; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(8,122,63,.18); }
.detail-item p a.inline-link { text-decoration-color: currentColor; }

/* Contact page: form beside details, then a full-width map */
.contact-split { display: grid; grid-template-columns: 1fr; gap: 64px; align-items: start; }
.contact-split > * { min-width: 0; }
@media (min-width: 900px) { .contact-split { grid-template-columns: 1.15fr 1fr; gap: 88px; } }
.contact-split .form-wrap { max-width: none; }
.contact-details h2 { font-size: clamp(30px, 3.9vw, 44px); letter-spacing: -.025em; margin-bottom: 8px; }
.contact-detail { padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--line); }
.contact-details h2 + .contact-detail { margin-top: 28px; }
.contact-detail h3 { font-size: 22px; color: var(--green); letter-spacing: -.02em; margin: 0 0 12px; }
.contact-detail p { color: var(--muted); margin: 0; }
.map-frame iframe { height: 450px; }

/* =====================================================================
   Page openings: same type, colours and components, three structures chosen by what the page is for.
   (default = photo hero with title over the picture; used by the marketing/process pages)
   .split = story pages: title + intro on a green panel beside the photo, solid header
   .band  = reference pages: no photo, a green title band that goes straight to the content
   .short + .browse-intro = browse pages: lower hero, then a lede and jump pills above the cards
   ===================================================================== */
/* SPLIT (story pages): a cream editorial panel beside a rounded photo, with a solid header. */
.page-hero.split { display: grid; align-items: stretch; grid-template-columns: 1fr; min-height: 0; padding-top: 72px; background: var(--cream); color: var(--ink); overflow: hidden; }
.page-hero.split::before { display: none; }
.page-hero.split .split-copy { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 56px var(--gutter) 24px; }
.page-hero.split .split-copy > * { position: relative; z-index: 1; }
.page-hero.split .eyebrow { display: flex; align-items: center; gap: 10px; color: var(--green); text-shadow: none; }
.page-hero.split .eyebrow::before { content: ''; width: 9px; height: 9px; background: var(--green); transform: rotate(45deg); }
.page-hero.split h1 { font-size: clamp(32px, 3.7vw, 46px); color: var(--green-deep); text-shadow: none; margin-bottom: 22px; }
.page-hero.split .split-lede { font-size: 20px; line-height: 1.6; color: var(--body, #38443c); margin: 0; max-width: 34em; }
.page-hero.split .split-media { padding: 24px calc(var(--gutter) + 20px) 56px calc(var(--gutter) + 20px); display: flex; align-items: center; }
.page-hero.split .split-photo { position: relative; width: 100%; aspect-ratio: 5 / 4; }
.page-hero.split .split-photo .page-hero-img { border-radius: 24px; }
@media (min-width: 1000px) {
  .page-hero.split { grid-template-columns: 1fr 1fr; min-height: 640px; }
  .page-hero.split .split-copy { padding: 72px clamp(40px, 5vw, 80px) 72px max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
  .page-hero.split .split-media { padding: 72px max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) 72px 24px; }
}

/* BAND (reference pages): a deep green gradient with the crest's diamond lattice fading in from the right, jump links,
   and a round photo that breaks out of the band's bottom edge. */
.page-hero.band { position: relative; z-index: 2; min-height: 0; display: block; overflow: visible; background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 62%, #0B8F4A 100%); }
.page-hero.band::before {
  display: block; content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 4 60 32 32 60 4 32Z' fill='none' stroke='white' stroke-opacity='.5' stroke-width='1.5'/%3E%3C/svg%3E") 0 0 / 64px 64px;
  -webkit-mask-image: linear-gradient(100deg, transparent 25%, #000 100%); mask-image: linear-gradient(100deg, transparent 25%, #000 100%); opacity: .22;
}
.page-hero.band .container { position: relative; z-index: 1; padding-top: 136px; padding-bottom: 72px; }
.page-hero.band .eyebrow { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.8); text-shadow: none; }
.page-hero.band .eyebrow::before { content: ''; width: 9px; height: 9px; background: currentColor; transform: rotate(45deg); }
.page-hero.band h1 { text-shadow: none; font-size: clamp(34px, 4.8vw, 56px); }
.page-hero.band .band-lede { font-size: 20px; line-height: 1.55; color: rgba(255,255,255,.92); margin: 20px 0 0; max-width: 36em; }
.page-hero.band .jump-nav { margin-top: 32px; }
.page-hero.band .jump-nav a { color: var(--white); border-color: rgba(255,255,255,.55); }
.page-hero.band .jump-nav a:hover { background: var(--white); color: var(--green); border-color: var(--white); }
.band-medallion { display: none; }
@media (min-width: 960px) {
  .band-medallion {
    display: block; position: absolute; z-index: 2; right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); bottom: -76px; width: 290px; height: 290px;
    border-radius: 50%; overflow: hidden; border: 8px solid var(--white); box-shadow: 0 24px 50px rgba(5,40,20,.28);
  }
  .band-medallion img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 40%; display: block; filter: brightness(1.07) saturate(1.14); }
}

.page-hero.short { min-height: 340px; }
.page-hero.short .container { padding-top: 130px; }
.browse-intro { max-width: 820px; }
.browse-intro .lede { font-size: 22px; line-height: 1.5; color: var(--ink); margin: 0 0 8px; }
.browse-intro .jump-nav { margin-top: 28px; }
.browse-section { padding-top: 56px; }
@media (min-width: 768px) { .browse-section { padding-top: 72px; } }
.browse-cards { padding-top: 40px; }

/* Display serif (prototype, opt-in with <body class="display-serif">): headings and big statements only;
   body copy, UI, labels and h3 stay in the sans. */
:root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; }
.display-serif h1, .display-serif h2, .display-serif .statement {
  font-family: var(--font-display); font-variation-settings: 'SOFT' 100, 'WONK' 0; font-weight: 600; letter-spacing: -.015em; line-height: 1.08;
}


/* Long-form reading column (Our History): one column, quiet sub-headings, no panels */
.story { max-width: 760px; }
.story p { font-size: 19px; color: var(--muted); }
.story-h2 { font-size: clamp(28px, 3.2vw, 38px); color: var(--green); letter-spacing: -.015em; margin: 56px 0 16px; }
.story + .explore-list { margin-top: 56px; }

.day-grid { margin-top: 64px; align-items: start; }
.day-grid .prose { max-width: none; }
.day-h2 { font-size: clamp(30px, 3.6vw, 44px); color: var(--green); margin-bottom: 24px; }
.day-grid .point-list { max-width: none; }
@media (min-width: 768px) { .day-grid { grid-template-columns: 1.15fr 1fr; gap: 72px; } .day-grid .img-wrap { aspect-ratio: 4 / 5; position: sticky; top: 110px; } }

/* How We Teach: "Our Approach at a Glance": heading + lead, then cards three across */
.approach { display: block; }
.approach-lede { font-size: 22px; line-height: 1.5; color: var(--ink); max-width: 820px; margin: 24px 0 0; }
.approach-list { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
.approach-list li { background: var(--white); border-radius: 20px; padding: 28px 30px; min-width: 0; }
.approach-list p { font-size: 18px; line-height: 1.65; color: #38443c; margin: 0; }
.approach-list .closing { background: var(--green); }
.approach-list .closing p { color: var(--white); font-weight: 500; font-size: 20px; }
.approach + .explore-list { margin-top: 64px; }
@media (min-width: 700px) { .approach-list { grid-template-columns: 1fr 1fr; } .approach-list .closing { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .approach-list { grid-template-columns: repeat(3, 1fr); gap: 24px; } .approach-list .closing { grid-column: span 2; display: flex; align-items: center; padding: 36px 44px; } }
/* =====================================================================
   Brighter How We Teach (opt-in with <body class="bright">): mint band instead of cream, darker body text.
   ===================================================================== */
:root { --mint: #E4F4EA; --green-band: #0B8A45; --green-text: #0B8A45; }
.bright .section-cream { background: var(--mint); }
.bright .prose p, .bright .browse-intro .lede, .bright .point-list li, .bright .approach-list p, .bright .why-copy p { color: #26322b; }
.bright .approach-list .closing p { color: var(--white); }

/* How We Teach: the closing "Our goal is simple" paragraph is set apart from the bullets above it */
.day-grid .goal { margin: 36px 0 0; padding: 28px 30px; background: var(--sage); border-radius: 20px; font-size: 21px; line-height: 1.55; font-weight: 600; color: var(--green-deep); }
.day-grid .goal strong { display: block; margin-bottom: 6px; font-size: 25px; font-weight: 800; letter-spacing: -.01em; color: var(--green); }


/* =====================================================================
   Hero v6 (opt-in with <body class="hero-v6">; How We Teach only): title straight on the photo like the other pages,
   a neutral eased shade (no colour tint) only behind the nav and the title, and the crest's half-diamond notch cut into
   the bottom edge, lined up with the title.
   ===================================================================== */
.hero-v6 .page-hero.short { min-height: 390px; }
.hero-v6 .page-hero-img { object-position: 50% 16%; }
.hero-v6 .page-hero .container { padding-bottom: 76px; }
.hero-v6 .page-hero .eyebrow { display: flex; align-items: center; gap: 10px; color: var(--white); opacity: .92; letter-spacing: .08em; margin-bottom: 12px; }
.hero-v6 .page-hero .eyebrow::before { content: ''; width: 9px; height: 9px; background: var(--white); transform: rotate(45deg); }
.hero-v6 .page-hero h1 { font-size: clamp(34px, 5.2vw, 60px); line-height: 1.05; }
.hero-v6 .page-hero::after {
  content: ''; position: absolute; z-index: 3; width: 48px; height: 48px; background: var(--white); transform: rotate(45deg);
  left: calc(max(var(--gutter), (100vw - var(--max)) / 2 + var(--gutter)) + 6px); bottom: -24px;
}
@media (min-width: 768px) { .hero-v6 .page-hero.short { min-height: 430px; } .hero-v6 .page-hero .container { padding-bottom: 88px; } }

/* =====================================================================
   How We Teach (current): hero with the title and intro together on a deep-green left-weighted shade, lifted white cards,
   and a brighter green for headings and diamond markers. Everything is scoped to <body class="bright hero-fb">.
   ===================================================================== */
:root { --green-bright: #0D9A4C; }
.hero-fb .page-hero.short { min-height: 520px; }
.hero-fb .page-hero .container { padding-bottom: 96px; }
.hero-fb .page-hero h1 { text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.hero-fb .hero-lede { font-size: 21px; line-height: 1.55; color: rgba(255,255,255,.96); max-width: 34em; margin: 18px 0 0; text-shadow: 0 1px 14px rgba(0,0,0,.55); }
/* Hero photo shade (see the shared rule near the end of this file) */
.hero-fb .browse-section { padding-top: 24px; }
@media (max-width: 767px) { .hero-fb .page-hero.short { min-height: 560px; } }

.hero-fb .day-h2, .hero-fb .day-grid .goal strong, .hero-fb .approach h2 { color: var(--green-bright); }
.hero-fb .point-list li::before { background: var(--green-bright); }
.hero-fb .approach-list li { border-radius: 24px; box-shadow: 0 10px 28px rgba(8,122,63,.09), 0 1px 0 rgba(8,122,63,.06); }
.hero-fb .approach-list .closing { box-shadow: 0 14px 32px rgba(8,122,63,.28); }
.hero-fb .day-grid .img-wrap { border-radius: 28px; box-shadow: 0 18px 40px rgba(8,122,63,.16); }
.hero-fb .day-grid .goal { border-radius: 24px; box-shadow: 0 10px 28px rgba(8,122,63,.08); }
.hero-fb .quote-band { background: var(--green-band); }
.hero-fb .quote-band cite { color: rgba(255,255,255,.92); }

/* Same treatment on Our Curriculum and Learning at Home (both use <body class="bright hero-v6 hero-fb">) */
.hero-fb .section-cream h2, .hero-fb .subject-card h2, .hero-fb .year-block h3 { color: var(--green-bright); }
.hero-fb .subject-card { border-radius: 24px; border-color: rgba(8,122,63,.12); box-shadow: 0 10px 28px rgba(8,122,63,.09), 0 1px 0 rgba(8,122,63,.06); }
.hero-fb .year-block { background: var(--white); border-radius: 24px; padding: 28px 28px 14px; box-shadow: 0 10px 28px rgba(8,122,63,.09), 0 1px 0 rgba(8,122,63,.06); }
.hero-fb .year-block .explore-list a:last-child { border-bottom: 0; }
.hero-fb .year-grid { gap: 24px; }
.hero-fb .jump-nav a { border-color: rgba(8,122,63,.28); }
.hero-fb .section-cream .explore-list a:hover { color: var(--green-bright); }

/* Resources by year: each link is a pill button */
.hero-fb .year-block { padding-bottom: 28px; }
.pill-list { display: grid; gap: 12px; margin-top: 16px; }
.pill-list a {
  display: block; padding: 14px 22px; border-radius: 999px; background: var(--sage); color: var(--green-deep);
  font-size: 16px; font-weight: 700; line-height: 1.25; text-decoration: none; text-align: center;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.pill-list a:hover { background: var(--green); color: var(--white); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(8,122,63,.22); }

/* Resource pills pop: solid green with white text; hero intro a little wider */
.pill-list a { background: var(--green); color: var(--white); box-shadow: 0 6px 14px rgba(8,122,63,.22); }
.pill-list a:hover { background: var(--green-bright); color: var(--white); box-shadow: 0 10px 22px rgba(8,122,63,.32); }
.hero-fb .hero-lede { max-width: 38em; }

.hero-fb .browse-cards { background: var(--mint); padding-top: 72px; padding-bottom: 96px; }
.hero-fb .browse-section + .browse-cards { margin-top: 56px; }

/* Our Curriculum: pill strip sits on a fresh mint band (notch tinted to match); closing section is a mint band with a white card */

/* =====================================================================
   Palette rules (How We Teach, Our Curriculum, Learning at Home)
   deep green = hero + footer · ONE strong green band per page (--green-band) · one mint (--mint) behind cards
   white = reading areas · bright green = large headings only; small titles use --green-text for contrast
   ===================================================================== */
.hero-fb .subject-card h2, .hero-fb .year-block h3, .hero-fb .approach-list h3 { color: var(--green-text); }
.curric .browse-cards { padding-top: 72px; }
.closing-band { background: var(--green-band); color: var(--white); }
.closing-band h2 { color: var(--white); }
.closing-band .prose p { color: rgba(255,255,255,.95); }
.closing-band .explore-list a { color: var(--white); border-color: rgba(255,255,255,.3); }
.closing-band .explore-list a:last-child { border-bottom-color: rgba(255,255,255,.3); }
.closing-band .explore-list a:hover { color: var(--white); }

/* =====================================================================
   Why Choose, Enrolment Process, New Entrant Information: same palette rules and card style as the other hero-fb pages
   ===================================================================== */
.hero-fb main .section:not(.quote-band):not(.closing-band) h2, .hero-fb .why-copy h2 { color: var(--green-bright); }

/* reasons and steps become white lifted cards on the mint band */
.hero-fb .reasons-grid { gap: 24px; }
.hero-fb .reason-item { background: var(--white); border-radius: 24px; padding: 32px 32px 30px; box-shadow: 0 10px 28px rgba(8,122,63,.09), 0 1px 0 rgba(8,122,63,.06); }
.hero-fb .reason-item .prose { max-width: none; }
.hero-fb .reason-item .prose p { font-size: 18px; color: #26322b; }
.hero-fb .reason-item h3 { color: var(--green-text); }
.hero-fb .reason-item .num-label { color: var(--green-bright); }
.hero-fb .step-list { margin-top: 36px; }
.hero-fb .step-list.wide { column-gap: 24px; row-gap: 24px; }
.hero-fb .step-item, .hero-fb .step-list .step-item:last-child, .hero-fb .step-list.wide .step-item:nth-last-child(-n+2) {
  background: var(--white); border: 0; border-radius: 24px; padding: 30px 32px; box-shadow: 0 10px 28px rgba(8,122,63,.09), 0 1px 0 rgba(8,122,63,.06);
}
.hero-fb .step-item h3 { color: var(--green-text); }
.hero-fb .step-item p { color: #26322b; max-width: none; }

/* fees / dues / agreement */
.hero-fb .detail-item h3 { color: var(--green-text); }

/* photo call-to-action: same deep-green shade as the heroes instead of the old flat dark wash */
.hero-fb .cta::before { background: linear-gradient(90deg, rgba(3,44,23,.66) 0%, rgba(3,44,23,.58) 30%, rgba(3,44,23,.36) 60%, rgba(3,44,23,.12) 100%); }
.hero-fb .cta h2, .hero-fb .cta p { text-shadow: 0 2px 16px rgba(0,0,0,.4); }

/* FAQ rows */
.hero-fb .faq-q { color: var(--ink); }
.hero-fb .faq-q .plus { color: var(--green-text); border-color: var(--green-text); }
.hero-fb .faq-answer { color: #26322b; }
.hero-fb .faq-group .faq-item, .hero-fb .faq-group .faq-item:last-child { border-color: rgba(8,122,63,.22); }
.hero-fb .jump-nav { margin-top: 0; }
.hero-fb .section.tight-bottom { padding-bottom: 8px; padding-top: 56px; }

/* Overview split: paragraph-only text column sits in the middle of the photo's height, with a bit more presence */
.hero-fb .welcome-grid .img-wrap { border-radius: 28px; box-shadow: 0 18px 40px rgba(8,122,63,.16); }
/* New Entrant hero: the intro runs wide, so keep it to the calm left side of the photo */
.hero-fb .page-hero-img.top { object-position: 70% 10%; }

/* Enrolment Process: eligibility in two columns, flipped pre-school photo, strong green closing band */
.elig-grid { display: grid; grid-template-columns: 1fr; gap: 56px; }
.elig-grid > * { min-width: 0; }
.elig-h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 18px; }
.elig-col > p { font-size: 18px; color: #26322b; }
.elig-col .point-list { max-width: none; margin: 8px 0 24px; }
.elig-col .point-list li { color: #26322b; }
/* Each column is a soft mint panel rather than text split by a hairline rule, and the "get in touch anyway" line
   is lifted out as a white note so the welcoming message isn't lost at the bottom of a list of criteria. */
.elig-grid { gap: 24px; }
.elig-col { background: var(--mint); border-radius: 28px; padding: 32px 26px 34px; }
.elig-col > :last-child { margin-bottom: 0; }
.elig-col .elig-note { background: var(--white); border-radius: 20px; padding: 20px 24px; font-weight: 600; line-height: 1.55; color: var(--green-deep); }
@media (min-width: 900px) {
  .elig-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .elig-col { padding: 44px 44px 46px; }
  .flip-media .img-wrap { order: -1; }
}

/* Enrolment steps: numbered white cards on the mint band. The number is a round green badge (the <ol> carries the
   order for assistive tech), and the five cards run three then two across so no cell is left empty. */
.step-cards { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 20px; }
.step-card { min-width: 0; background: var(--white); border-radius: 24px; padding: 30px 30px 32px; box-shadow: 0 10px 28px rgba(8,122,63,.09), 0 1px 0 rgba(8,122,63,.06); }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%; background: var(--green-band); color: var(--white); font-size: 24px; font-weight: 800; line-height: 1; box-shadow: 0 6px 14px rgba(8,122,63,.22); }
.step-card h3 { font-size: 22px; color: var(--green-text); letter-spacing: -.02em; margin: 0 0 8px; }
.step-card p { margin: 0; font-size: 18px; line-height: 1.6; color: #26322b; }
@media (min-width: 700px) {
  .step-cards { grid-template-columns: 1fr 1fr; gap: 24px; }
  .step-card:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .step-cards { grid-template-columns: repeat(6, 1fr); }
  .step-card { grid-column: span 2; }
  .step-card:nth-child(n+4) { grid-column: span 3; }
}

/* When the first section under the hero is a mint band, the hero's diamond notch takes the band's colour */
.bright.hero-v6 .page-hero:has(+ .section-cream)::after { background: var(--mint); }

/* Good to Know (fees, dues, integration agreement): lifted white cards in the same card language as the other pages,
   with the long formal agreement wording full width on a mint panel beneath. */
.info-cards { display: grid; grid-template-columns: 1fr; gap: 24px; }
.info-card { min-width: 0; background: var(--white); border: 1px solid rgba(8,122,63,.12); border-radius: 24px; padding: 30px 30px 32px; box-shadow: 0 10px 28px rgba(8,122,63,.09), 0 1px 0 rgba(8,122,63,.06); }
.info-card h3 { font-size: 22px; color: var(--green-text); letter-spacing: -.02em; margin: 0 0 12px; }
.info-card p { margin: 0; font-size: 18px; line-height: 1.65; color: #26322b; }
.info-card .cite-block { margin: 0; max-width: none; }
.info-card.agreement { background: var(--mint); border: 0; box-shadow: none; }
@media (min-width: 800px) {
  .info-cards { grid-template-columns: 1fr 1fr; }
  .info-card.agreement { grid-column: 1 / -1; padding: 36px 40px 38px; }
}

/* Pre-school contact line: set apart as a soft note at the foot of the card */
.split-card-copy .contact-note { margin-top: 28px; padding: 18px 22px; background: var(--mint); border-radius: 18px; font-weight: 600; color: var(--green-deep); }
.closing-row { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.closing-row h2 { margin: 0; }
@media (min-width: 768px) { .closing-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; } }
.closing-band .btn-light { color: var(--green-deep); }

/* White card with the photo flush on one side (Enrolment: pre-school), same card language as the other redesigned pages */
.split-card { display: grid; grid-template-columns: 1fr; background: var(--white); border-radius: 28px; overflow: hidden; box-shadow: 0 10px 28px rgba(8,122,63,.09), 0 1px 0 rgba(8,122,63,.06); }
.split-card > * { min-width: 0; }
.split-card-media { aspect-ratio: 4 / 3; }
.split-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(1.07) saturate(1.14); }
.split-card-copy { padding: 32px 28px 36px; }
.split-card-copy h2 { margin-bottom: 20px; }
.split-card-copy p { font-size: 18px; line-height: 1.65; color: #26322b; }
.split-card-copy p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .split-card { grid-template-columns: 5fr 6fr; }
  .split-card-media { aspect-ratio: auto; min-height: 100%; }
  .split-card-copy { padding: 52px 56px 56px; }
}
.hero-fb .welcome-grid .prose p { font-size: 19px; line-height: 1.65; color: #26322b; }

/* =====================================================================
   Enrolment Process photography: the chosen version of the page, with more imagery than the first pass.
   A photo tile completes the steps grid, each eligibility panel opens with a photo, and the page closes on a photo CTA.
   ===================================================================== */
.step-photo { min-width: 0; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; background: var(--sage); box-shadow: 0 10px 28px rgba(8,122,63,.09), 0 1px 0 rgba(8,122,63,.06); }
.step-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(1.07) saturate(1.14); }
@media (min-width: 700px) {
  .step-cards.with-photo .step-photo { aspect-ratio: auto; min-height: 240px; }
}
@media (min-width: 1000px) {
  .step-cards.with-photo { grid-template-columns: repeat(3, 1fr); }
  .step-cards.with-photo .step-card, .step-cards.with-photo .step-card:nth-child(n+4) { grid-column: auto; }
}
.elig-grid.photo-top .elig-col { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.elig-grid.photo-top .elig-col > * { margin-left: 26px; margin-right: 26px; }
.elig-grid.photo-top .elig-col > :last-child { margin-bottom: 34px; }
.elig-grid.photo-top .elig-photo { margin: 0 0 30px; aspect-ratio: 16 / 9; background: var(--sage); }
.elig-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(1.07) saturate(1.14); }
@media (min-width: 900px) {
  .elig-grid.photo-top .elig-col > * { margin-left: 44px; margin-right: 44px; }
  .elig-grid.photo-top .elig-col > :last-child { margin-bottom: 46px; }
  .elig-grid.photo-top .elig-photo { margin: 0 0 36px; }
}

/* Enrolment Process colour, following the Learning pages' palette rules: one strong green band per page (here behind the
   pre-school card, since the closing call to action is a photo) and one solid green card, like the closing card on How We Teach. */
.section-band { background: var(--green-band); }
.section-band .split-card { box-shadow: 0 18px 40px rgba(3,44,23,.28); }
.elig-col .elig-note { background: var(--green); color: var(--white); box-shadow: 0 14px 32px rgba(8,122,63,.28); }

/* =====================================================================
   Why Choose St Patrick's and FAQs (new-entrant-information.html): same palette rules as the Learning pages and
   Enrolment Process. One strong green band per page, one mint behind cards, photography carrying the other colour.
   ===================================================================== */
.bright.hero-v6 .page-hero:has(+ .section-band)::after { background: var(--green-band); }
.section-band .btn-light { color: var(--green-deep); }

/* Why Choose: the opening line as a large white statement on the green band, beside the photo */
.band-statement { font-size: clamp(24px, 3vw, 34px); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; color: var(--white); margin: 0 0 32px; }
.hero-fb .section-band .welcome-grid .img-wrap { box-shadow: 0 18px 40px rgba(3,44,23,.28); }

/* Why Choose: each reason is a photo card (photo on top, text beneath), like the subject cards on Our Curriculum */
.hero-fb .reasons-grid.photo-cards .reason-item { padding: 0 0 32px; overflow: hidden; }
.photo-cards .reason-item > :not(.reason-img) { margin-left: 32px; margin-right: 32px; }
.photo-cards .reason-item .prose p:last-child { margin-bottom: 0; }
.reason-img { aspect-ratio: 16 / 9; margin-bottom: 28px; background: var(--sage); }
.reason-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(1.07) saturate(1.14); }

/* FAQs: each topic is one large mint panel that opens with a wide photo banner (the same idea as the eligibility
   panels on Enrolment Process), then its heading and white question cards two across. Every topic has the same
   shape, so nothing swaps sides. The green band is the strip of jump links under the hero. */
.hero-fb .section.jump-band { padding: 26px 0 30px; }
.jump-band .jump-nav { margin-top: 0; }
.hero-fb .jump-band .jump-nav a { background: var(--white); border-color: var(--white); color: var(--green-deep); font-weight: 700; }
.hero-fb .jump-band .jump-nav a:hover { background: var(--mint); border-color: var(--mint); color: var(--green-deep); }
.hero-fb .section.faq-topic { padding-top: 0; padding-bottom: 28px; scroll-margin-top: 96px; }
.hero-fb .jump-band + .section.faq-topic { padding-top: 64px; }
.hero-fb .section.faq-topic:last-of-type, .hero-fb .section.faq-topic:has(+ .cta-section) { padding-bottom: 96px; }
.topic-card { display: grid; grid-template-columns: 1fr; background: var(--mint); border-radius: 28px; overflow: hidden; }
.topic-card > * { min-width: 0; }
.topic-photo { position: relative; aspect-ratio: 16 / 9; background: var(--sage); }
.topic-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; filter: brightness(1.07) saturate(1.14); }
.topic-photo img.low { object-position: 50% 88%; }
.topic-copy { padding: 32px 24px 36px; }
.topic-copy h2 { margin-bottom: 22px; }
.topic-copy .prose { margin: -6px 0 24px; }
.topic-copy .btn { margin-top: 26px; }
@media (min-width: 800px) {
  .topic-photo { aspect-ratio: 3 / 1; }
  .topic-copy { padding: 44px 48px 48px; }
}
.faq-group.faq-cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 0; align-items: start; }
@media (min-width: 800px) { .faq-group.faq-cards { grid-template-columns: 1fr 1fr; gap: 14px 16px; } }
.hero-fb .faq-group.faq-cards .faq-item { border: 0; border-radius: 18px; padding: 0 22px; background: var(--white); box-shadow: 0 6px 18px rgba(8,122,63,.08), 0 1px 0 rgba(8,122,63,.06); }
.faq-cards .faq-answer { max-width: none; }


/* =====================================================================
   Closing call to action on the Enrol pages (Why Choose, Enrolment Process, FAQs): a rounded green card with the words
   on one side and the photo on the other, so the heading never sits across children's faces and the page doesn't run
   from a dark photo straight into the dark footer.
   ===================================================================== */
.hero-fb .section:not(.section-cream):not(.section-band) + .section.cta-section { padding-top: 0; }
.cta-card { display: grid; grid-template-columns: 1fr; background: var(--green-band); color: var(--white); border-radius: 28px; overflow: hidden; box-shadow: 0 18px 40px rgba(8,122,63,.22); }
.cta-card > * { min-width: 0; }
.cta-card-media { order: -1; aspect-ratio: 16 / 10; background: var(--sage); }
.cta-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; filter: brightness(1.07) saturate(1.14); }
.cta-card-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 36px 28px 40px; }
.hero-fb main .section.cta-section .cta-card h2 { color: var(--white); font-size: clamp(30px, 3.9vw, 46px); line-height: 1.08; margin: 0 0 22px; }
.cta-card p { font-size: 19px; line-height: 1.6; color: rgba(255,255,255,.95); margin: 0 0 28px; max-width: 34em; }
.cta-card .btn-light { color: var(--green-deep); }
@media (min-width: 900px) {
  .cta-card { grid-template-columns: 1fr 1fr; }
  .cta-card-media { order: 0; aspect-ratio: auto; min-height: 400px; }
  .cta-card-copy { padding: 64px 60px; }
}

/* =====================================================================
   Our Story pages (Who We Are, Our Catholic Character, Our History, School Documents) brought onto the same
   <body class="bright hero-v6 hero-fb"> treatment as the Learning and Enrol pages: photo hero, white and mint sections,
   one strong green band per page, lifted white cards and one solid green card.
   ===================================================================== */

/* Who We Are: the six-language welcome as a big, friendly greeting */
.hero-fb .welcome-grid .prose p.greeting { font-size: clamp(26px, 3vw, 34px); font-weight: 800; line-height: 1.25; letter-spacing: -.02em; color: var(--green-bright); margin-bottom: 28px; }

/* Who We Are: the principal's letter beside the tall photo of Steve Wheeler (the same split as How We Teach) */
.principal-photo img { object-position: 50% 30%; }
/* Landscape photos with people spread across them (Our History) keep a 4:3 shape in the split */
@media (min-width: 768px) { .day-grid .img-wrap.landscape { aspect-ratio: 4 / 3; } }
.hero-fb .welcome-grid .prose.letter p.first { font-size: 21px; line-height: 1.55; font-weight: 500; color: var(--ink); }
.hero-fb .welcome-grid .prose.letter p.sign-off { margin-top: 32px; font-weight: 700; color: var(--ink); }

/* Who We Are: mission and vision, values, and the motto as cards on the mint band. The mission explanation leads
   the section, so the mission and vision cards hold one statement each and match in height. */
.mvv-lede { font-size: 22px; line-height: 1.5; color: var(--ink); max-width: 820px; margin: 20px 0 40px; }
.hero-fb .statements.mvv { align-items: stretch; }
.hero-fb .statements { gap: 24px; margin-bottom: 24px; }
.hero-fb .statement-card, .hero-fb .statement-card + .statement-card { background: var(--white); border: 0; border-radius: 24px; padding: 32px 34px 34px; box-shadow: 0 10px 28px rgba(8,122,63,.09), 0 1px 0 rgba(8,122,63,.06); }
.hero-fb .statement-card .label { color: var(--green-text); }
.hero-fb .statement-card .note { color: #26322b; }
.hero-fb .values-plain { gap: 24px; }
.hero-fb .value-plain { background: var(--white); border-radius: 24px; padding: 30px 32px 32px; box-shadow: 0 10px 28px rgba(8,122,63,.09), 0 1px 0 rgba(8,122,63,.06); }
.hero-fb .value-plain h3 { color: var(--green-bright); }
.hero-fb .value-plain p { color: #26322b; }
.motto-card { margin-top: 24px; background: var(--green); color: var(--white); border-radius: 24px; padding: 32px 36px 34px; box-shadow: 0 14px 32px rgba(8,122,63,.28); }
.motto-card h3 { font-size: 25px; color: var(--white); letter-spacing: -.01em; margin: 0 0 10px; }
.motto-card p { margin: 0; font-size: 19px; line-height: 1.6; color: rgba(255,255,255,.95); max-width: 52em; }

@media (min-width: 768px) { .day-grid.flip-media { grid-template-columns: 1fr 1.15fr; } .day-grid.flip-media .img-wrap { order: -1; } }

/* Our History: the crest picture in the legacy card shows the whole shield */
.crest-media img { object-position: 50% 50%; filter: none; }

/* School Documents: policies copy beside a white SchoolDocs login card on the green band */
.docs-policies { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
.docs-policies > * { min-width: 0; }
@media (min-width: 900px) { .docs-policies { grid-template-columns: 7fr 5fr; gap: 64px; } }
.hero-fb main .section.section-band .docs-policies h2 { color: var(--white); }
.bright .section-band .docs-policies .prose p { color: rgba(255,255,255,.95); }
.login-card { background: var(--white); border-radius: 24px; padding: 32px 32px 30px; box-shadow: 0 18px 40px rgba(3,44,23,.28); }
.login-card h3 { font-size: 22px; color: var(--green-text); letter-spacing: -.02em; margin: 0 0 18px; }
.login-details { margin: 0 0 22px; display: grid; gap: 10px; }
.login-details > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--mint); border-radius: 14px; padding: 12px 18px; }
.login-details dt { font-size: 15px; font-weight: 600; color: var(--muted); }
.login-details dd { margin: 0; font-size: 18px; font-weight: 800; color: var(--green-deep); }

/* School Documents: one mint card per plan or report, each with a solid green download pill */
.doc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.doc-card { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 22px; min-height: 160px; padding: 26px 26px 24px; background: var(--mint); border-radius: 22px; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.doc-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(8,122,63,.14); }
.doc-name { font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.doc-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--green); color: var(--white); font-size: 15px; font-weight: 700; box-shadow: 0 6px 14px rgba(8,122,63,.22); transition: background .2s; }
.doc-pill::after { content: '\2193'; }
.doc-card:hover .doc-pill { background: var(--green-bright); }

/* Our Catholic Character: built from the same pieces as How We Teach. The overview is split across the hero intro and
   the first paragraph of The St Patrick's Way; the scripture is plain running text; the last two sections are lifted cards on mint, the second a wide green
   closing card (as in Our Approach at a Glance). */
.faith-cards.approach-list { margin-top: 0; }
.faith-card h2 { font-size: clamp(25px, 2.4vw, 30px); letter-spacing: -.02em; margin: 0 0 14px; }
.hero-fb main .section .faith-card.closing h2 { color: var(--white); }
@media (min-width: 1000px) {
  .approach-list.faith-cards { grid-template-columns: 1fr 1fr; }
  .approach-list .faith-card, .approach-list .faith-card.closing { grid-column: auto; display: block; padding: 36px 40px 38px; }
}
@media (min-width: 700px) and (max-width: 999px) { .approach-list.faith-cards .closing { grid-column: auto; } }
/* A text-and-photo split sitting on the green band (Our Catholic Character: Values in Action): white heading and text */
.hero-fb main .section.section-band.band-split h2 { color: var(--white); }
.hero-fb .band-split .welcome-grid .prose p { color: rgba(255,255,255,.95); }
.hero-fb .band-split .day-grid .img-wrap { box-shadow: 0 18px 40px rgba(3,44,23,.28); }

/* Placeholder for a photo still to be supplied (Our History: the Historic Wall). Deliberately obvious so it isn't
   mistaken for a finished image; swap the div for <img> once the photo arrives. */
.img-placeholder { display: flex; align-items: center; justify-content: center; text-align: center; background: var(--white); border: 2px dashed rgba(8,122,63,.35); box-shadow: none; }
.hero-fb .day-grid .img-placeholder { box-shadow: none; }
.img-placeholder span { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--green-text); padding: 24px; }
/* Our Catholic Character: each of the two cards opens with a photo, like the subject cards on Our Curriculum */
.approach-list .faith-card { overflow: hidden; }
.faith-card .card-photo { margin: -28px -30px 26px; aspect-ratio: 16 / 9; background: var(--sage); }
.faith-card .card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(1.07) saturate(1.14); }
@media (min-width: 1000px) { .faith-card .card-photo { margin: -36px -40px 30px; } }

/* =====================================================================
   Our People on the bright treatment: green jump-link strip under the hero (as on FAQs), then each group as a grid of
   small person cards: white cards on the mint bands (Teachers, Board), mint cards on white (Support Staff).
   ===================================================================== */
.hero-fb .section.people-section { scroll-margin-top: 80px; }
.hero-fb .people-group h3 { border-bottom: 0; padding-bottom: 0; color: var(--green-text); font-size: 23px; }
.hero-fb .people-group:first-of-type { margin-top: 36px; }
.hero-fb .people-grid, .hero-fb .people-grid.board { gap: 16px; margin-top: 18px; }
.hero-fb .person, .hero-fb .person.plain { background: var(--mint); border-radius: 20px; padding: 18px 20px; align-items: center; }
.hero-fb .section-cream .person { background: var(--white); box-shadow: 0 8px 22px rgba(8,122,63,.08), 0 1px 0 rgba(8,122,63,.06); }
.hero-fb .person.plain { align-items: flex-start; padding: 20px 22px; }
.hero-fb .person .avatar, .hero-fb .section-cream .person .avatar { box-shadow: none; }
.hero-fb .person .role { color: #26322b; }
.hero-fb .person .email { color: var(--green-text); font-weight: 600; }
.hero-fb .people-section > .container > h2 { margin-bottom: 0; }
@media (min-width: 960px) { .hero-fb .people-grid.compact { grid-template-columns: repeat(3, 1fr); } }

/* Our Curriculum: the white strip of subject pills under the hero has even space above and below the pills
   (the top allows for the hero's notch) before the mint card band starts */
.hero-fb .section.jump-strip { padding: 44px 0 40px; }
.hero-fb .jump-strip + .browse-cards { margin-top: 0; }

/* =====================================================================
   Community pages (Term Dates & Events, Newsletters, School App) on the bright treatment
   ===================================================================== */
/* Term Dates: a photo beside each year's four term cards, on the mint band */
.terms-layout { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
.terms-layout > * { min-width: 0; }
.hero-fb .terms-layout .img-wrap { border-radius: 28px; box-shadow: 0 18px 40px rgba(8,122,63,.16); }
.terms-layout .img-wrap img { filter: brightness(1.07) saturate(1.14); }
@media (min-width: 900px) { .terms-layout { grid-template-columns: 5fr 7fr; gap: 56px; } .terms-layout .img-wrap { aspect-ratio: 4 / 5; position: sticky; top: 110px; } }
.hero-fb .terms-year { color: var(--green-text); font-size: 25px; margin: 36px 0 16px; }
.hero-fb .terms-year:first-child { margin-top: 0; }
.term-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 600px) { .term-cards { grid-template-columns: 1fr 1fr; } }
.term-card { display: flex; flex-direction: column; gap: 6px; background: var(--white); border-radius: 20px; padding: 20px 22px 22px; box-shadow: 0 8px 22px rgba(8,122,63,.08), 0 1px 0 rgba(8,122,63,.06); }
.term-card .t-name { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--green-bright); }
.term-card .t-dates { font-size: 17px; line-height: 1.45; color: var(--ink); }

/* Newsletters: the Smore embed as a lifted white card on the mint band */
.hero-fb .news-section .embed-frame { border: 0; border-radius: 24px; box-shadow: 0 10px 28px rgba(8,122,63,.09), 0 1px 0 rgba(8,122,63,.06); }

/* School App: the green card straight under the hero, with the second half of the overview as its statement */
.hero-fb .page-hero + .section.cta-section { padding-top: 72px; }
.cta-card .cta-statement { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; color: var(--white); max-width: 20em; margin: 0 0 30px; }

/* =====================================================================
   Header refinements
   - Transparent state: no text shadow on the white Enrol pill (it sits on its own white background)
   - Scrolled state: a solid deep-green bar (the footer's green) instead of white, so the header stays in the same
     colours as over the hero: white text, white crest, the white Enrol pill, and the current section marked softly
   ===================================================================== */
.site-header:not(.scrolled) .nav-enrol > .nav-link { text-shadow: none; }

.site-header.scrolled { background: var(--green-deep); color: var(--white); border-bottom-color: transparent; box-shadow: 0 6px 20px rgba(3,30,15,.18); }
.site-header.scrolled .brand-text strong { color: var(--white); }
.site-header.scrolled .brand-text small { opacity: .8; }
.site-header.scrolled .nav-link:hover, .site-header.scrolled .nav-item:focus-within > .nav-link { background: rgba(255,255,255,.14); }
.site-header.scrolled .nav-item:not(.nav-enrol) > .nav-link.active { background: rgba(255,255,255,.14); }
.site-header.scrolled .nav-enrol > .nav-link { background: var(--white); color: var(--green-deep); }
.site-header.scrolled .nav-enrol > .nav-link:hover, .site-header.scrolled .nav-enrol:focus-within > .nav-link { background: var(--mint); }

/* Hero intros are kept to about two lines; where a hero paragraph ran longer, the rest of it moved onto the page as a
   short lead: above the jump pills (Our Curriculum, Our People, FAQs), above the newsletter (Newsletters), or as a
   white intro strip (School Documents). The wording is unchanged. */
.strip-lede, .news-lede, .page-lede { font-size: clamp(19px, 1.8vw, 21px); line-height: 1.55; color: var(--ink); max-width: 880px; margin: 0 0 26px; }
.jump-band .strip-lede { color: rgba(255,255,255,.95); }
.hero-fb .section.jump-band:has(.strip-lede) { padding: 36px 0 34px; }
.page-lede { font-weight: 500; margin: 0; }
/* Why Choose: the hero sentence moved into the green band, leading into the large statement it sets up */
.band-intro { font-size: clamp(19px, 1.8vw, 21px); line-height: 1.55; color: rgba(255,255,255,.95); max-width: 34em; margin: 0 0 22px; }

/* Green first sections after the hero (Term Dates, Our Curriculum's subject pills, and the green-start versions of
   Enrolment Process and Learning at Home) */
.hero-fb main .section.section-band.terms-section h2, .hero-fb main .section.section-band.steps-band h2 { color: var(--white); }
.hero-fb .section-band .terms-year { color: var(--white); }
.hero-fb .section-band .terms-layout .img-wrap { box-shadow: 0 18px 40px rgba(3,44,23,.28); }
.hero-fb .section-band .term-card { box-shadow: 0 10px 24px rgba(3,44,23,.18); }
.hero-fb .steps-band .step-card { box-shadow: 0 10px 24px rgba(3,44,23,.18); }
.hero-fb .steps-band .step-photo { box-shadow: 0 10px 24px rgba(3,44,23,.18); }
.hero-fb .section.jump-band.jump-strip { padding: 40px 0 38px; }

/* Contact on the bright treatment: contact details spaced as separate blocks with no rules between them, and the
   map in a lifted rounded frame */
.hero-fb .contact-detail { border-top: 0; padding-top: 0; margin-top: 30px; }
.hero-fb .contact-details h2 + .contact-detail { margin-top: 28px; }
.hero-fb .contact-detail h3 { color: var(--green-text); }
.hero-fb .contact-detail p { color: #26322b; font-size: 18px; line-height: 1.6; }
.hero-fb .contact-details h2, .hero-fb .form-wrap h2 { color: var(--green-bright); }
.hero-fb .map-frame { border: 0; border-radius: 24px; box-shadow: 0 10px 28px rgba(8,122,63,.09), 0 1px 0 rgba(8,122,63,.06); }
/* Contact: the map runs the full width of the mint section, beneath both the form and the contact details */
.contact-split + .map-frame { margin-top: 64px; }
.contact-split + .map-frame iframe { height: 380px; }
.reason-img img.top { object-position: 50% 12%; }
.topic-photo img.top { object-position: 50% 18%; }

/* Hero photo crop: each page sets its own vertical focus with --hero-pos on the hero <img>, chosen so faces sit above
   the title or to the right of it at wide desktop widths (where the hero is a thin strip) */
.hero-fb .page-hero .page-hero-img { object-position: var(--hero-pos, 50% 16%); }

/* =====================================================================
   Homepage (index.html, <body class="... home">): the same pieces as the rest of the site, with more
   full-width sections. Hero → green quick-links strip → welcome → mint values cards → full-width photo split →
   family stories → green term-dates band → full-width photo call to action.
   ===================================================================== */
/* Hero: the diamond notch in the strip's green (the photo shade is the shared one under "Hero photo shade") */
.home .hero::after { content: ''; position: absolute; z-index: 3; width: 48px; height: 48px; background: var(--green-band); transform: rotate(45deg); left: calc(max(var(--gutter), (100vw - var(--max)) / 2 + var(--gutter)) + 6px); bottom: -24px; }
.home .hero .container { padding-bottom: 96px; }
.home .hero-lead { font-size: 20px; max-width: 760px; }
/* Homepage hero headline a step smaller than the original 80px, so the intro and buttons have more room */
.home .hero h1 { font-size: clamp(38px, 7vw, 66px); margin-bottom: 20px; }

/* Quick links strip */
.hero-fb .section.home-quick { padding: 34px 0 32px; }

/* Welcome */
.hero-fb .section.home-welcome { padding-top: 96px; }
.home-welcome .statement { color: var(--green-deep); }

/* Values: three photo cards with the English word under the te reo heading */
@media (min-width: 900px) { .reasons-grid.value-cards { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.value-cards { margin-top: 0; }
.photo-cards .reason-item .value-en { display: block; font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--muted); margin: -4px 32px 12px; }
.hero-fb .value-cards .reason-item h3 { font-size: 28px; color: var(--green-bright); }

/* Why: contained text-and-photo split like How We Teach, the button after the four paragraphs */
.home-why .prose .btn { margin-top: 12px; }

/* Family stories: every story in full, mint cards in two balanced (masonry) columns */
.voice-cards { columns: 1; column-gap: 24px; }
@media (min-width: 800px) { .voice-cards { columns: 2; } }
.voice-card { break-inside: avoid; margin: 0 0 24px; background: var(--mint); border-radius: 24px; padding: 32px 34px 30px; }
.voice-card h3 { font-size: 24px; line-height: 1.2; color: var(--green-text); letter-spacing: -.02em; margin: 0 0 14px; }
.voice-card p { font-size: 18px; line-height: 1.65; color: #26322b; margin: 0 0 14px; }
.voice-card cite { display: block; margin-top: 18px; font-style: normal; font-size: 16px; font-weight: 700; color: var(--green-deep); }

/* Term dates band: four white cards across, then the link to the full page */
.hero-fb main .section.section-band.home-terms h2 { color: var(--white); margin-bottom: 32px; }
@media (min-width: 900px) { .home-terms .term-cards { grid-template-columns: repeat(4, 1fr); } }
.home-welcome .statement { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.25; }
.home-why .img-wrap img { object-position: 50% 35%; }
/* Homepage, second pass */
.text-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; font-size: 18px; font-weight: 700; color: var(--green-text); text-decoration: none; }
.text-link::after { content: '\2192'; transition: transform .2s; }
.text-link:hover::after { transform: translateX(4px); }
.home-principal img { object-position: 50% 32%; }
.hero-fb .home-welcome .welcome-grid { align-items: center; }

.why-points { display: grid; gap: 22px; margin: 8px 0 32px; }
.why-point h3 { font-size: 21px; color: var(--green-text); letter-spacing: -.01em; margin: 0 0 6px; }
.why-point p { margin: 0; font-size: 17px; line-height: 1.6; }

.explore-cards { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 800px) { .explore-cards { grid-template-columns: repeat(3, 1fr); } }
.explore-card { background: var(--white); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 10px 28px rgba(8,122,63,.09), 0 1px 0 rgba(8,122,63,.06); }
.explore-card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sage); }
.explore-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(1.07) saturate(1.14); transition: transform .4s ease; }
.explore-card:hover .explore-card-media img { transform: scale(1.04); }
.explore-card-body { padding: 26px 28px 28px; }
.explore-card h3 { font-size: 26px; letter-spacing: -.02em; margin: 0 0 12px; }
.explore-card h3 a { color: var(--green-bright); text-decoration: none; }
.explore-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.explore-card li a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(8,122,63,.14); font-size: 17px; font-weight: 600; color: var(--ink); text-decoration: none; transition: color .2s; }
.explore-card li a::after { content: '\2192'; font-weight: 400; color: var(--green-text); }
.explore-card li a:hover { color: var(--green-text); }

.home-terms-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-bottom: 32px; }
.hero-fb main .section.section-band.home-terms h2 { margin-bottom: 0; }
/* Homepage: the hero is one quick-links strip shorter than the screen, so the green strip sits above the fold */
.home .hero { min-height: max(560px, min(calc(100svh - 112px), 860px)); }
/* Homepage: hero photo keeps the running boy (right of frame) in view on phones too; family stories become
   white cards on mint; Explore cards sit on white with a light edge */
.home .hero-img { object-position: 88% 30%; }
.home-voices .voice-card { background: var(--white); box-shadow: 0 10px 28px rgba(8,122,63,.09), 0 1px 0 rgba(8,122,63,.06); }
.home-explore .explore-card { border: 1px solid rgba(8,122,63,.12); }

/* Header links and hero intros in pure white (they were slightly translucent) */
.site-header .nav-link, .site-header .brand-text, .site-header .brand-text small, .site-header.scrolled .brand-text small { color: var(--white); opacity: 1; }
.site-header .nav-enrol > .nav-link { color: var(--green); }
.site-header.scrolled .nav-enrol > .nav-link { color: var(--green-deep); }
.hero-lead, .hero-fb .hero-lede { color: var(--white); }

/* Heavier type where text sits over photos, for legibility: menu links 700, hero intros 600.
   Headlines and body paragraphs keep their usual weights. */
.nav-link { font-weight: 700; }
.hero-lead, .hero-fb .hero-lede { font-weight: 600; }
/* Crisper white text: no shadow on the header links and school name (the hero's top shading already gives them
   contrast), and a small, tight shadow on hero intros instead of the wide soft glow */
.site-header .nav-link, .site-header:not(.scrolled) .nav-link, .site-header .brand-text, .site-header:not(.scrolled) .brand-text, .site-header .brand-text strong, .site-header .brand-text small { text-shadow: none; }
.hero-lead, .hero-fb .hero-lede { text-shadow: 0 1px 2px rgba(0,0,0,.35); }

/* =====================================================================
   Hero photo shade: ONE rule for every hero on the site (the homepage .hero and every inner .page-hero), so they
   always match. Neutral dark rather than green-tinted, and only where text sits: a strip across the top for the
   menu, a fade from the left behind the title and intro, and a little at the bottom. The right side of the photo,
   where the people usually are, is left untouched. Change it here and every page follows.
   ===================================================================== */
.hero-fb .hero::before,
.hero-fb .page-hero:not(.split):not(.band)::before {
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0px, rgba(0,0,0,.22) 100px, rgba(0,0,0,.06) 170px, rgba(0,0,0,0) 210px),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.42) 25%, rgba(0,0,0,.2) 48%, rgba(0,0,0,.05) 66%, rgba(0,0,0,0) 78%),
    linear-gradient(0deg, rgba(0,0,0,.3) 0px, rgba(0,0,0,.12) 140px, rgba(0,0,0,0) 280px);
}
/* Beyond the Classroom: photo placeholders inside the cards until the school's photos arrive */
.subject-card .card-img.img-placeholder { background: var(--mint); border: 0; }

/* Link out to a full page from inside a Curriculum card */
.subject-card .card-link { margin: 0 0 16px; font-size: 16px; }

/* Mobile menu: compact, left-aligned, one dropdown per section */
.mobile-menu { padding: 0 var(--gutter) 40px; text-align: left; }
.mobile-menu .mobile-brand { display: flex; align-items: center; gap: 12px; min-height: 84px; padding-right: 64px; color: var(--white); }
.mobile-menu .mobile-brand img { height: 52px; filter: none; }
.mobile-menu .mobile-brand .brand-text { color: var(--white); }
.mobile-close { top: 18px; right: var(--gutter); width: 44px; height: 44px; font-size: 26px; }
.mobile-group { margin: 0; border-top: 1px solid rgba(255,255,255,.16); }
.mobile-group:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.mobile-group-toggle, .mobile-single a { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 0; background: none; border: 0; color: var(--white); font: inherit; font-size: 19px; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.mobile-group-toggle .chev { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s; }
.mobile-group.open .mobile-group-toggle .chev { transform: rotate(-135deg) translate(-2px, -2px); }
.mobile-sub { display: none; padding: 0 0 14px 14px; }
.mobile-group.open .mobile-sub { display: block; }
.mobile-group .mobile-sub a { display: block; padding: 9px 0; font-size: 17px; font-weight: 500; letter-spacing: 0; opacity: .9; }
.mobile-group .mobile-sub a.active { opacity: 1; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.mobile-single a.active { text-decoration: underline; text-underline-offset: 4px; }
.mobile-single a:hover { text-decoration: underline; }