/* ==========================================================================
   Michikech Academy
   School colours: navy blue, light blue, gold, white.

   Notes for whoever picks this up next:
   - Everything is driven by the tokens in :root. Change the palette there and
     the whole site follows.
   - The admin editor writes inline CSS custom properties (--hero-title-max,
     --section-heading-size and friends). Those are honoured below through
     clamp(..., var(--token, fallback)), so editing sizes in /admin/ still works.
   - Motion is opacity/transform only. No backdrop-filter on repeated cards and
     no large blur filters: both are expensive to paint on every frame.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* Navy */
  --navy:       #0b2545;
  --navy-deep:  #071a33;
  --navy-soft:  #17395f;
  --body:       #46617e;
  --muted:      #7d93aa;

  /* Light blue */
  --sky:        #5b9bd5;
  --sky-lit:    #8fc0e6;
  --sky-wash:   #e8f1fa;
  --sky-line:   rgba(91, 155, 213, .22);

  /* Gold */
  --gold:       #c9a227;
  --gold-lit:   #e2c15c;
  --gold-deep:  #9a7a14;
  --gold-wash:  rgba(201, 162, 39, .12);

  /* White + neutrals */
  --white:      #ffffff;
  --paper:      #f8fbfe;
  --line:       rgba(11, 37, 69, .10);
  --line-soft:  rgba(11, 37, 69, .06);

  --serif: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ease:   cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --t-fast: .18s;
  --t-mid:  .34s;
  --t-slow: .6s;

  --lift-1: 0 1px 2px rgba(11, 37, 69, .04), 0 4px 14px rgba(11, 37, 69, .06);
  --lift-2: 0 2px 6px rgba(11, 37, 69, .05), 0 14px 34px rgba(11, 37, 69, .09);
  --lift-3: 0 6px 18px rgba(11, 37, 69, .08), 0 30px 70px rgba(11, 37, 69, .14);

  --gutter: clamp(20px, 5vw, 40px);
  --bay:    clamp(64px, 9vw, 128px);
  --radius: 4px;
  --radius-lg: 10px;
}

/* ----------------------------------------------------------- 2. Base reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--navy); color: #fff; }

/* ------------------------------------------------------------ 3. Typography */
h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--navy);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.018em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); line-height: 1.25; }
h4 { font-size: 1.05rem; line-height: 1.3; }

p { text-wrap: pretty; }

.lede {
  font-size: clamp(1.05rem, .98rem + .35vw, 1.22rem);
  line-height: 1.6;
  color: var(--body);
  max-width: 62ch;
}

/* Small-caps kicker with a gold rule: the main "premium" signal */
.section-kicker,
.panel-label,
.banner-label,
.contact-label,
.program-level,
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.section-kicker::before,
.panel-label::before,
.hero-badge::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--gold);
  flex: none;
}

/* -------------------------------------------------------------- 4. Layout */
.wrap {
  width: min(1220px, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--bay); background: var(--white); }

.section-soft {
  background: var(--sky-wash);
  border-block: 1px solid var(--sky-line);
}

.section-head { max-width: 60ch; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head .section-kicker { margin-bottom: 18px; }

.section-head h2 {
  font-size: clamp(2rem, 1.3rem + 2.4vw, var(--section-heading-size, 3.1rem));
  margin-bottom: 16px;
}

.section-head p { font-size: var(--section-body-size, 1.05rem); color: var(--body); }

.section-head-center { margin-inline: auto; text-align: center; }
.section-head-center .section-kicker { justify-content: center; }

/* ------------------------------------------------------- 5. Announce strip */
.banner {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, .9);
  font-size: 14px;
  padding-block: 11px;
  position: relative;
  z-index: 60;
}

.banner .wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.banner-label { color: var(--gold-lit); font-size: 10px; }
.banner-label::before { background: var(--gold-lit); width: 18px; }

/* ------------------------------------------------------------- 6. Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-block: 16px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--t-mid) ease, box-shadow var(--t-mid) ease,
              padding var(--t-mid) ease, border-color var(--t-mid) ease;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-header.is-scrolled,
body:not(.has-hero) .site-header {
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--line);
  padding-block: 10px;
  box-shadow: 0 1px 20px rgba(11, 37, 69, .06);
}

.brand { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }

.brand-logo {
  width: 52px; height: 52px;
  object-fit: cover;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--gold);
  transition: width var(--t-mid) var(--ease), height var(--t-mid) var(--ease);
  flex: none;
}

.logo-size-small .brand-logo { width: 42px; height: 42px; }
.logo-size-large .brand-logo { width: 64px; height: 64px; }

.brand-mark {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold-lit);
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: .04em;
  border: 2px solid var(--gold);
  flex: none;
}

.brand-copy { display: flex; flex-direction: column; min-width: 0; }

.brand-name {
  font-family: var(--serif);
  font-size: clamp(1.05rem, .95rem + .4vw, 1.35rem);
  color: var(--navy);
  line-height: 1.1;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-tagline {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-top: 3px;
}

/* Over the hero photo the brand and nav invert to white */
body.has-hero .site-header:not(.is-scrolled) .brand-name { color: #fff; }
body.has-hero .site-header:not(.is-scrolled) .brand-tagline { color: var(--gold-lit); }
body.has-hero .site-header:not(.is-scrolled) .main-nav > a { color: rgba(255,255,255,.88); }
body.has-hero .site-header:not(.is-scrolled) .main-nav > a:hover,
body.has-hero .site-header:not(.is-scrolled) .main-nav > a.active { color: #fff; }
body.has-hero .site-header:not(.is-scrolled) .nav-toggle span,
body.has-hero .site-header:not(.is-scrolled) .nav-toggle span::before,
body.has-hero .site-header:not(.is-scrolled) .nav-toggle span::after { background: #fff; }

.main-nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }

.main-nav > a {
  position: relative;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--navy-soft);
  padding-block: 6px;
  white-space: nowrap;
  transition: color var(--t-fast) ease;
}

.main-nav > a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}

.main-nav > a:hover::after,
.main-nav > a.active::after { transform: scaleX(1); }
.main-nav > a.active { color: var(--navy); }

.nav-cta {
  padding: 11px 22px;
  border-radius: 100px;
  background: var(--gold);
  color: var(--navy-deep) !important;
  font-size: 13.5px;
  font-weight: 700;
  transition: background var(--t-fast) ease, transform var(--t-fast) var(--spring);
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--gold-lit); transform: translateY(-1px); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
  flex: none;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform var(--t-mid) var(--ease), opacity var(--t-fast) ease;
}
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before { content: ''; left: 0; top: -7px; }
.nav-toggle span::after { content: ''; left: 0; top: 7px; }

.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------- 7. Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 100px;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--t-fast) var(--spring), background var(--t-fast) ease,
              color var(--t-fast) ease, border-color var(--t-fast) ease,
              box-shadow var(--t-mid) ease;
}

.btn-primary {
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(201, 162, 39, .32);
}
.btn-primary:hover {
  background: var(--gold-lit);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(201, 162, 39, .4);
}

.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; transform: translateY(-2px); }

.section .btn-ghost, .section-soft .btn-ghost { color: var(--navy); border-color: var(--line); }
.section .btn-ghost:hover, .section-soft .btn-ghost:hover {
  background: var(--navy); color: #fff; border-color: var(--navy);
}

.btn-light { background: #fff; color: var(--navy); box-shadow: var(--lift-1); }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }

.btn:active { transform: translateY(0) scale(.985); }

.pill {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 100px;
  background: var(--sky-wash);
  color: var(--navy-soft);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* ------------------------------------------------------------ 8. Home hero */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(94vh, 900px);
  padding-block: clamp(90px, 14vh, 150px) clamp(70px, 10vh, 120px);
  margin-top: -84px;              /* header sits over the artwork */
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--navy-deep);
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  animation: heroCycle calc(var(--slide-duration, 7s) * var(--slide-count, 1)) infinite both;
  animation-delay: calc(var(--slide-duration, 7s) * var(--slide-index, 0));
}

@keyframes heroCycle {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  22%  { opacity: 1; }
  27%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Scrim. Strength is editable in /admin/ via --hero-overlay-strength (0-100).
   Two stacked gradients: a vertical one for the header and lower edges, and a
   left-weighted navy one so the headline always has ink behind it. */
.hero-media-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(7, 26, 51, .80) 0%,
      rgba(7, 26, 51, .36) 34%,
      rgba(7, 26, 51, .52) 72%,
      rgba(7, 26, 51, .88) 100%),
    linear-gradient(100deg,
      rgba(7, 26, 51, calc(.34 + var(--hero-overlay-strength, 60) * .005)) 0%,
      rgba(7, 26, 51, calc(.18 + var(--hero-overlay-strength, 60) * .004)) 52%,
      rgba(7, 26, 51, .10) 100%);
}

.hero .wrap { position: relative; z-index: 1; width: 100%; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.hero-grid-reverse { direction: rtl; }
.hero-grid-reverse > * { direction: ltr; }

.hero-grid-centered { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }

.hero-copy { max-width: 42ch; }
.hero-copy-center { text-align: center; margin-inline: auto; }
.hero-copy-center .hero-badge { justify-content: center; }
.hero-copy-center .hero-actions { justify-content: center; }
.hero-copy-center .lede { margin-inline: auto; }

.hero-badge {
  font-size: var(--hero-badge-size, 11px);
  color: var(--gold-lit);
  margin-bottom: 26px;
}
.hero-badge::before { background: var(--gold-lit); }

.hero-title {
  font-size: clamp(2.7rem, 1.5rem + 4.2vw, var(--hero-title-max, 4.6rem));
  line-height: 1.04;
  letter-spacing: -.022em;
  color: #fff;
  margin-bottom: 22px;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .36);
}

.hero .lede {
  font-size: var(--hero-body-size, 1.12rem);
  color: rgba(255, 255, 255, .92);
  max-width: 46ch;
  margin-bottom: 34px;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .32);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Right-hand showcase: one solid white card rather than a stack of glass boxes */
.hero-showcase { display: grid; gap: 16px; }

.hero-panel {
  padding: clamp(28px, 3vw, 40px);
  border-radius: var(--radius-lg);
  background: var(--white);
  border-top: 4px solid var(--gold);
  box-shadow: var(--lift-3);
  color: var(--body);
}

.hero-panel .panel-label { margin-bottom: 18px; }

.hero-panel-title {
  font-size: clamp(1.35rem, 1.05rem + .9vw, var(--hero-card-title-size, 1.7rem));
  color: var(--navy);
  margin-bottom: 14px;
  text-shadow: none;
}

.hero-panel-copy { font-size: var(--hero-card-body-size, 1rem); color: var(--body); }

.hero-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 20px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.hero-stat-grid:empty { display: none; }

.hero-stat-card { display: flex; flex-direction: column; gap: 4px; }

.hero-stat-value { font-family: var(--serif); font-size: 2rem; color: var(--navy); line-height: 1; }

.hero-stat-label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

.panel-card {
  padding: 24px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .26);
  color: #fff;
}

.panel-card .pill { background: rgba(255, 255, 255, .18); color: #fff; margin-bottom: 12px; }
.panel-card h3 { color: #fff; font-size: 1.1rem; margin-bottom: 8px; }
.panel-card p { color: rgba(255, 255, 255, .82); font-size: .93rem; }

/* -------------------------------------------------- 9. Inner-page heroes */
.page-hero {
  position: relative;
  padding-block: clamp(76px, 11vw, 132px) clamp(48px, 7vw, 84px);
  background:
    radial-gradient(ellipse 70% 120% at 12% 0%, rgba(91, 155, 213, .18), transparent 62%),
    radial-gradient(ellipse 60% 100% at 92% 10%, rgba(201, 162, 39, .10), transparent 60%),
    linear-gradient(180deg, var(--sky-wash), var(--white));
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}

.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.page-hero-copy .section-kicker { margin-bottom: 18px; }

.page-hero-copy h1 {
  font-size: clamp(2.3rem, 1.5rem + 3vw, var(--hero-title-max, 3.7rem));
  margin-bottom: 18px;
}

.page-hero-copy .lede { font-size: var(--hero-body-size, 1.1rem); }

.page-hero-card {
  padding: clamp(26px, 3vw, 36px);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  box-shadow: var(--lift-2);
}

.page-hero-card h2, .page-hero-card h3 { font-size: 1.25rem; margin-bottom: 12px; }
.page-hero-card p { font-size: .98rem; }

.page-hero-meta, .meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}

/* -------------------------------------------------------------- 10. Cards */
.feature-grid,
.value-grid,
.program-grid,
.announcement-grid,
.staff-grid,
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.feature-card,
.value-card,
.program-card,
.announcement-card,
.staff-card,
.step-card,
.contact-card,
.note-box {
  position: relative;
  padding: clamp(26px, 2.6vw, 36px);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--lift-1);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease),
              border-color var(--t-mid) ease;
}

.feature-card:hover,
.value-card:hover,
.program-card:hover,
.announcement-card:hover,
.staff-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lift-2);
  border-color: var(--sky-line);
}

/* A hairline of gold that draws in on hover */
.feature-card::after,
.value-card::after,
.program-card::after,
.announcement-card::after {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-lit));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease);
}
.feature-card:hover::after,
.value-card:hover::after,
.program-card:hover::after,
.announcement-card:hover::after { transform: scaleX(1); }

.feature-card h3,
.value-card h3,
.program-card h3,
.announcement-card h3,
.step-card h3 { font-size: var(--card-title-size, 1.32rem); margin-bottom: 12px; }

.feature-card p,
.value-card p,
.program-card p,
.announcement-card p,
.step-card p { font-size: var(--card-body-size, 1rem); color: var(--body); }

.feature-card-wide { grid-column: span 2; }

.announcement-date {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 14px;
}

.program-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.program-level { font-size: 10px; color: var(--muted); }
.program-level::before { display: none; }

.steps { counter-reset: step; }
.step-card { padding-top: 44px; }

.step-number, .plate-number {
  position: absolute;
  top: 20px;
  left: clamp(26px, 2.6vw, 36px);
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold-lit);
  font-family: var(--serif);
  font-size: 13px;
}

.note-box {
  background: var(--navy);
  color: rgba(255, 255, 255, .86);
  border-color: transparent;
  margin-top: 28px;
}
.note-box h3 { color: #fff; }
.note-box p { color: rgba(255, 255, 255, .82); }
.note-box strong { color: var(--gold-lit); }

.staff-card { text-align: left; }

.staff-avatar {
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  border: 2px solid var(--gold);
  color: var(--gold-lit);
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: .04em;
  margin-bottom: 20px;
}

.staff-role {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 12px;
}

/* Gallery plates */
.plate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.plate {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--lift-1);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.plate:hover { transform: translateY(-4px); box-shadow: var(--lift-2); }

.plate-swatch {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--sky-wash), #cfe2f2);
  background-size: cover;
  background-position: center;
}

.plate img { width: 100%; height: 100%; object-fit: cover; }

.plate-caption {
  padding: 18px 22px;
  font-size: var(--card-caption-size, .95rem);
  color: var(--navy);
  border-top: 1px solid var(--line-soft);
}

.tone-1 { background: linear-gradient(135deg, #dbe9f6, #b9d3ea); }
.tone-2 { background: linear-gradient(135deg, #f4ecd4, #e3d09a); }
.tone-3 { background: linear-gradient(135deg, #d7e6f3, #adc9e0); }
.tone-4 { background: linear-gradient(135deg, #e9eef5, #c6d3e2); }
.tone-5 { background: linear-gradient(135deg, #f6efdc, #ddc99b); }
.tone-6 { background: linear-gradient(135deg, #cfdff0, #a8c4dd); }

/* --------------------------------------------------------------- 11. Forms */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.contact-stack { display: grid; gap: 16px; }

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sky);
}

.contact-label { font-size: 10px; }
.contact-label::before { display: none; }

.contact-form { display: grid; gap: 18px; }

.field { display: grid; gap: 8px; }

.field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy-soft);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
  font-size: 15.5px;
  color: var(--navy);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(91, 155, 213, .18);
}

.field textarea { min-height: 150px; resize: vertical; }

.form-note { font-size: 13px; color: var(--muted); }

.success, .error {
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 14.5px;
  border: 1px solid;
}
.success { background: #edf7f1; border-color: #b9dfc9; color: #1d6b3f; }
.error { background: #fdeeee; border-color: #f0c2c2; color: #9a2b2b; }

/* -------------------------------------------------------------- 12. Footer */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, .72);
  padding-top: var(--bay);
}

.footer-cta {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto clamp(56px, 7vw, 84px);
  padding-bottom: clamp(48px, 6vw, 72px);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.footer-cta .section-kicker {
  color: var(--gold-lit);
  justify-content: center;
  margin-bottom: 18px;
}
.footer-cta .section-kicker::before { background: var(--gold-lit); }

.footer-cta h2 { color: #fff; margin-bottom: 16px; }
.footer-cta p { color: rgba(255, 255, 255, .74); margin-bottom: 30px; }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 48px;
}

.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-tagline { color: var(--gold-lit); }

.footer-heading {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-lit);
  margin-bottom: 20px;
}

.footer-links { display: grid; gap: 12px; }

.footer-links a {
  font-size: 14.5px;
  color: rgba(255, 255, 255, .74);
  width: fit-content;
  transition: color var(--t-fast) ease, transform var(--t-fast) var(--ease);
}
.footer-links a:hover { color: var(--gold-lit); transform: translateX(3px); }

.footer-meta { font-size: 14px; color: rgba(255, 255, 255, .5); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 26px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
}
.footer-bottom a { transition: color var(--t-fast) ease; }
.footer-bottom a:hover { color: var(--gold-lit); }

/* ------------------------------------------ 13. Scroll reveal + transitions */
/* Opacity and transform only. Elements are revealed individually by an
   IntersectionObserver in main.js, which adds .is-in. */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .62s var(--ease), transform .62s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-in { opacity: 1; transform: none; }

/* Page transition veil: fades in before navigating, out on arrival.
   pointer-events stay off so it can never swallow a click. */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--white);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.page-veil.is-visible { opacity: 1; }

.site-main { transition: opacity .45s var(--ease), transform .45s var(--ease); }
body.is-leaving .site-main { opacity: 0; transform: translateY(-8px); }

/* ---------------------------------------------------------- 14. Responsive */
@media (max-width: 1080px) {
  .hero-grid, .page-hero-grid, .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: 100%; }
  .feature-card-wide { grid-column: auto; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; position: relative; z-index: 2; }
  .site-header .wrap { position: relative; z-index: 2; }

  .main-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 96px var(--gutter) 32px;
    background: var(--white);
    box-shadow: var(--lift-3);
    transform: translateY(-100%);
    transition: transform var(--t-slow) var(--ease);
    max-height: 100dvh;
    overflow-y: auto;
  }

  .main-nav.open { transform: translateY(0); }

  .main-nav > a {
    padding-block: 16px;
    font-size: 1.15rem;
    font-family: var(--serif);
    color: var(--navy) !important;
    border-bottom: 1px solid var(--line-soft);
  }
  .main-nav > a::after { display: none; }

  .nav-cta {
    margin-top: 20px;
    text-align: center;
    padding-block: 15px;
    background: var(--gold) !important;
    border: none !important;
    color: var(--navy-deep) !important;
  }

  body.nav-open { overflow: hidden; }

  .hero { min-height: auto; padding-block: 130px 70px; }
  .hero-showcase { margin-top: 8px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom { justify-content: center; text-align: center; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero-actions .btn { width: 100%; }
  .hero-mini-grid { grid-template-columns: minmax(0, 1fr); }
  .brand-tagline { display: none; }
  .program-top { flex-direction: column; gap: 6px; }
}

/* ------------------------------------------------------ 15. Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  [data-reveal] { opacity: 1; transform: none; }
  .hero-slide { animation: none; opacity: 1; }
  .hero-slide:not(:first-child) { display: none; }
  .page-veil { display: none; }
}

/* -------------------------------------------------------------- 16. Print */
@media print {
  .site-header, .site-footer, .page-veil, .hero-media { display: none; }
  body { color: #000; background: #fff; }
}

/* ==========================================================================
   17. HERO, REWORKED
   Three problems with the first pass, all visible in a screenshot:
     - the scrim was too weak, so white text sat on a bright classroom photo
     - translucent cards over that photo were unreadable
     - a 94vh frame cropped the photograph so hard that one face filled it
   Fixed by darkening the scrim properly, moving the cards out of the hero
   into a real section below, and widening the frame so more of the image shows.
   ========================================================================== */

.hero {
  /* A wider frame crops the photograph far less: at 1440px this is roughly
     2:1 rather than 1.6:1, so faces sit at a natural scale. */
  min-height: min(74vh, 680px);
  padding-block: clamp(120px, 16vh, 170px) clamp(80px, 11vh, 120px);
  align-items: center;
}

.hero-slide { background-size: cover; background-position: center; }

/* Considerably deeper scrim. The left column is where the headline lives, so
   that side carries most of the ink; the right stays lighter to keep the
   photograph readable as a photograph. */
.hero-media-overlay {
  background:
    linear-gradient(180deg,
      rgba(5, 18, 36, .86) 0%,
      rgba(5, 18, 36, .52) 30%,
      rgba(5, 18, 36, .58) 66%,
      rgba(5, 18, 36, .92) 100%),
    linear-gradient(96deg,
      rgba(5, 18, 36, calc(.60 + var(--hero-overlay-strength, 60) * .003)) 0%,
      rgba(5, 18, 36, calc(.44 + var(--hero-overlay-strength, 60) * .003)) 46%,
      rgba(5, 18, 36, .24) 100%);
}

/* Copy column: one clear block, nothing competing beside it */
.hero .hero-copy,
.hero .hero-copy-center { max-width: 24ch; }
.hero .lede { max-width: 52ch; }

.hero-title { font-weight: 500; letter-spacing: -.024em; line-height: 1.06; }

/* Scroll cue */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
  color: rgba(255, 255, 255, .72);
  transition: color var(--t-fast) ease;
}
.hero-scroll:hover { color: #fff; }

.hero-scroll-word {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.hero-scroll-line {
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, transparent, var(--gold-lit));
  position: relative;
  overflow: hidden;
}

.hero-scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold-lit);
  animation: scrollCue 2.4s var(--ease) infinite;
}

@keyframes scrollCue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* ------------------------------------------------------------ 18. Fact bar */
.factbar {
  background: var(--navy);
  color: #fff;
  padding-block: clamp(28px, 4vw, 44px);
  position: relative;
}

.factbar::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-lit), var(--gold));
}

.factbar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: clamp(20px, 3vw, 40px);
}

.fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: clamp(18px, 2vw, 30px);
  border-left: 1px solid rgba(255, 255, 255, .16);
}
.fact:first-child { border-left: none; padding-left: 0; }

.fact-value {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem);
  line-height: 1;
  color: #fff;
}

.fact-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-lit);
}

/* ------------------------------------------------------- 19. Split section */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.split-copy .section-kicker { margin-bottom: 20px; }
.split-copy h2 { margin-bottom: 18px; }
.split-copy .lede { margin-bottom: 34px; }
.split-copy .btn { margin-top: 34px; }

.split-points { display: grid; gap: 26px; }

.split-point { display: flex; gap: 18px; align-items: flex-start; }

.split-point-mark {
  flex: none;
  width: 10px; height: 10px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 5px var(--gold-wash);
}

.split-point h3 { font-size: 1.18rem; margin-bottom: 6px; }
.split-point p { font-size: .98rem; color: var(--body); }

/* Overlapping photographs: the classic editorial device, and it shows the
   images at a sensible scale instead of cropping into a single face. */
.split-art { position: relative; padding-bottom: 54px; padding-right: 42px; }

.split-art-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--lift-3);
  aspect-ratio: 4 / 3;
  background: var(--sky-wash);
}
.split-art-frame img { width: 100%; height: 100%; object-fit: cover; }

.split-art-inset {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 6px solid var(--white);
  box-shadow: var(--lift-2);
  background: var(--sky-wash);
}
.split-art-inset img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1080px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-art { order: -1; padding-bottom: 44px; padding-right: 32px; }
}

@media (max-width: 640px) {
  .hero { min-height: min(66vh, 540px); padding-block: 118px 92px; }
  .hero .hero-copy { max-width: 100%; }
  .hero-scroll { bottom: 18px; }
  .hero-scroll-line { height: 32px; }
  .fact { border-left: none; padding-left: 0; }
  .factbar-grid { gap: 22px; }
  .split-art-inset { width: 42%; border-width: 5px; }
}

/* ==========================================================================
   20. HERO FIXES, FROM MEASUREMENT
   1. The scrim was rendering but invisible. Each .hero-slide runs an opacity
      animation, which promotes it to its own compositor layer, and a promoted
      layer paints above a static sibling when z-index is auto. Giving both an
      explicit z-index inside .hero-media restores the intended order.
   2. .hero-copy used max-width in ch. The ch unit resolves against the
      element's own 17px font-size, not the 55px heading, so the column came
      out 257px wide and the headline broke over seven lines.
   3. Headings were simply set too large for the amount of copy.
   ========================================================================== */

.hero-slide { z-index: 0; }
.hero-media-overlay { z-index: 1; }

/* Give the copy a real measure */
.hero .hero-copy,
.hero .hero-copy-center { max-width: min(680px, 100%); }
.hero .lede { max-width: min(560px, 100%); }

/* --------------------------------------------------------- Type, dialled back */
h1 { font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 1.25rem + 1.5vw, 2.4rem); }
h3 { font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem); }

.hero-title {
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, min(var(--hero-title-max, 3.4rem), 3.6rem));
  line-height: 1.08;
  margin-bottom: 20px;
}

.hero .lede {
  font-size: clamp(1rem, .95rem + .25vw, 1.1rem);
  line-height: 1.62;
  margin-bottom: 30px;
}

.section-head h2 {
  font-size: clamp(1.65rem, 1.25rem + 1.5vw, min(var(--section-heading-size, 2.4rem), 2.6rem));
}

.section-head p { font-size: clamp(1rem, .96rem + .2vw, 1.06rem); }

.page-hero-copy h1 {
  font-size: clamp(2rem, 1.4rem + 2vw, min(var(--hero-title-max, 3rem), 3.1rem));
}

.feature-card h3,
.value-card h3,
.program-card h3,
.announcement-card h3,
.step-card h3 {
  font-size: clamp(1.08rem, 1rem + .35vw, min(var(--card-title-size, 1.28rem), 1.35rem));
}

.split-copy h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); }
.hero-panel-title { font-size: clamp(1.2rem, 1rem + .6vw, 1.45rem); }
.fact-value { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.1rem); }

/* Body copy a shade smaller so the page reads as a document, not a poster */
body { font-size: 16.5px; }
.lede { font-size: clamp(1rem, .96rem + .25vw, 1.1rem); }

/* ==========================================================================
   21. HERO SCRIM AS A BOTTOM GRADIENT
   The full-frame tint was burying the photograph. Replaced with a cinematic
   bottom-up gradient: the image stays clear through the upper two thirds and
   darkens only where the copy sits. The copy therefore moves to the bottom of
   the frame so it always has ink behind it.
   Admin's --hero-overlay-strength (0-100) still scales the darkness.
   ========================================================================== */

.hero { align-items: flex-end; }

.hero-media-overlay {
  background:
    /* a whisper at the top so the white header stays legible */
    linear-gradient(180deg,
      rgba(5, 18, 36, .34) 0%,
      rgba(5, 18, 36, .10) 16%,
      rgba(5, 18, 36, 0) 32%),
    /* the working gradient: clear above, deep at the base */
    linear-gradient(180deg,
      rgba(5, 18, 36, 0) 34%,
      rgba(5, 18, 36, calc(.16 + var(--hero-overlay-strength, 60) * .002)) 54%,
      rgba(5, 18, 36, calc(.46 + var(--hero-overlay-strength, 60) * .003)) 76%,
      rgba(5, 18, 36, calc(.72 + var(--hero-overlay-strength, 60) * .002)) 100%);
}

/* Copy sits in the lower band, clear of the scroll cue */
.hero {
  min-height: min(82vh, 760px);
  padding-block: clamp(120px, 16vh, 170px) clamp(86px, 12vh, 128px);
}

.hero-copy { padding-bottom: 6px; }

/* --------------------------------------------------------- Smaller hero type */
.hero-title {
  font-size: clamp(1.85rem, 1.25rem + 1.9vw, min(var(--hero-title-max, 2.7rem), 2.8rem));
  line-height: 1.1;
  margin-bottom: 16px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .45);
}

.hero .lede {
  font-size: clamp(.96rem, .92rem + .18vw, 1.02rem);
  line-height: 1.6;
  max-width: min(500px, 100%);
  margin-bottom: 26px;
  color: rgba(255, 255, 255, .88);
}

.hero-badge { margin-bottom: 18px; font-size: 10px; }

.hero .btn { padding: 13px 26px; font-size: 13.5px; }

/* The cue would collide with the lowered copy on short screens */
.hero-scroll { bottom: 22px; }

@media (max-width: 860px) {
  .hero { min-height: min(72vh, 600px); padding-block: 120px 76px; }
  .hero-scroll { display: none; }
}

/* ==========================================================================
   22. MONTSERRAT + HERO COMPOSITION
   Headings move from a serif to Montserrat, which is the register
   edufundpathways.com works in: bold geometric sans on white, with weight
   rather than contrast doing the work.
   The hero copy also drops to the base of the frame so the photograph is
   clear above it.
   ========================================================================== */

:root {
  --serif: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.18;
}

h1, .hero-title { font-weight: 800; letter-spacing: -.03em; }

.brand-name { font-family: var(--serif); font-weight: 700; letter-spacing: -.02em; }
.brand-mark, .staff-avatar, .fact-value, .step-number, .plate-number {
  font-family: var(--serif);
  font-weight: 700;
}

.fact-value { letter-spacing: -.02em; }

/* ---------------------------------------------------- Hero sits at the base */
.hero {
  /* A tall frame with a deep bottom pad leaves the upper two thirds of the
     photograph completely clear. */
  min-height: min(88vh, 820px);
  padding-block: clamp(130px, 18vh, 190px) clamp(56px, 7vh, 84px);
}

.hero-title {
  font-size: clamp(1.9rem, 1.3rem + 2vw, min(var(--hero-title-max, 2.85rem), 2.95rem));
  line-height: 1.14;
  margin-bottom: 24px;
}

.hero-badge { margin-bottom: 16px; }

/* No paragraph in the hero any more, so the buttons follow the heading */
.hero-actions { margin-top: 0; }

/* With the copy lower, the gradient can start later and stay lighter */
.hero-media-overlay {
  background:
    linear-gradient(180deg,
      rgba(5, 18, 36, .30) 0%,
      rgba(5, 18, 36, .08) 14%,
      rgba(5, 18, 36, 0) 28%),
    linear-gradient(180deg,
      rgba(5, 18, 36, 0) 42%,
      rgba(5, 18, 36, calc(.14 + var(--hero-overlay-strength, 60) * .002)) 60%,
      rgba(5, 18, 36, calc(.44 + var(--hero-overlay-strength, 60) * .003)) 80%,
      rgba(5, 18, 36, calc(.70 + var(--hero-overlay-strength, 60) * .002)) 100%);
}

.hero-scroll { bottom: 16px; }

@media (max-width: 860px) {
  .hero { min-height: min(76vh, 620px); padding-block: 128px 52px; }
}

/* ==========================================================================
   23. CONTRAST OVER BRIGHT PHOTOGRAPHS
   The slideshow cycles through eight images and some, like the whiteboard
   shot, are almost white exactly where the copy sits. A gradient tuned to a
   dark photograph disappears on a light one, so this adds three defences:
     1. a stronger base gradient
     2. a soft plate anchored to the bottom-left, under the copy only
     3. text shadows on every white element that sits over the image
   Together they hold up on the brightest slide in the set.
   ========================================================================== */

.hero-media-overlay {
  background:
    /* top: keeps the header readable */
    linear-gradient(180deg,
      rgba(5, 18, 36, .46) 0%,
      rgba(5, 18, 36, .16) 15%,
      rgba(5, 18, 36, 0) 30%),
    /* a plate under the copy, fading out to the right and upward */
    radial-gradient(ellipse 80% 62% at 22% 100%,
      rgba(5, 18, 36, .80) 0%,
      rgba(5, 18, 36, .52) 42%,
      rgba(5, 18, 36, .16) 70%,
      rgba(5, 18, 36, 0) 88%),
    /* base gradient across the full width */
    linear-gradient(180deg,
      rgba(5, 18, 36, 0) 36%,
      rgba(5, 18, 36, calc(.20 + var(--hero-overlay-strength, 60) * .002)) 58%,
      rgba(5, 18, 36, calc(.52 + var(--hero-overlay-strength, 60) * .003)) 80%,
      rgba(5, 18, 36, calc(.78 + var(--hero-overlay-strength, 60) * .002)) 100%);
}

/* --------------------------------------------------- Text shadows over art */
.hero-title {
  text-shadow: 0 1px 2px rgba(2, 10, 22, .5), 0 4px 24px rgba(2, 10, 22, .55);
}

.hero-badge {
  color: #f0d78b;
  text-shadow: 0 1px 3px rgba(2, 10, 22, .7), 0 2px 14px rgba(2, 10, 22, .5);
}
.hero-badge::before { background: #f0d78b; box-shadow: 0 1px 3px rgba(2, 10, 22, .6); }

.hero .lede { text-shadow: 0 1px 3px rgba(2, 10, 22, .6), 0 2px 16px rgba(2, 10, 22, .45); }

.hero-scroll { text-shadow: 0 1px 4px rgba(2, 10, 22, .7); }

.hero .btn-ghost {
  background: rgba(5, 18, 36, .3);
  border-color: rgba(255, 255, 255, .6);
  text-shadow: 0 1px 3px rgba(2, 10, 22, .6);
}
.hero .btn-ghost:hover { background: rgba(5, 18, 36, .5); border-color: #fff; }

/* -------------------------------------- Header legibility over the artwork */
/* The transparent header sits on whatever the photograph happens to be, so it
   carries its own faint scrim plus shadows on the type. */
body.has-hero .site-header:not(.is-scrolled)::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 18, 36, .55), rgba(5, 18, 36, 0));
}
body.has-hero .site-header { position: sticky; }
body.has-hero .site-header .wrap { position: relative; z-index: 1; }

body.has-hero .site-header:not(.is-scrolled) .brand-name,
body.has-hero .site-header:not(.is-scrolled) .main-nav > a {
  text-shadow: 0 1px 4px rgba(2, 10, 22, .65);
}

body.has-hero .site-header:not(.is-scrolled) .brand-tagline {
  color: #f0d78b;
  text-shadow: 0 1px 4px rgba(2, 10, 22, .8);
}

body.has-hero .site-header:not(.is-scrolled) .brand-logo {
  box-shadow: 0 2px 12px rgba(2, 10, 22, .5);
}

/* ==========================================================================
   24. EMBOSSED PILL BUTTONS
   A dimensional treatment: gradient fill, a bright inner bevel along the top
   edge, a darker seat along the bottom, and a real pressed state. Read as
   tactile rather than literally 2001, so it sits with the rest of the design
   instead of fighting it.
   ========================================================================== */

.btn,
.nav-cta {
  position: relative;
  border-radius: 100px;
  border: 1px solid;
  transition: transform .12s ease, box-shadow .18s ease,
              background .18s ease, border-color .18s ease, filter .18s ease;
}

/* Gold primary */
.btn-primary,
.nav-cta {
  background: linear-gradient(180deg, #edcf72 0%, #d4ad38 46%, #b98f1c 100%);
  border-color: #96731a;
  color: #2a2003 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),          /* top bevel */
    inset 0 -1px 0 rgba(0, 0, 0, .22),               /* bottom seat */
    inset 0 -6px 12px rgba(140, 105, 12, .35),       /* inner curve */
    0 2px 0 #8a6a14,                                 /* solid edge */
    0 5px 14px rgba(150, 115, 26, .38);              /* drop */
}

.btn-primary:hover,
.nav-cta:hover {
  background: linear-gradient(180deg, #f4dc8f 0%, #ddb949 46%, #c59a24 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -1px 0 rgba(0, 0, 0, .2),
    inset 0 -6px 12px rgba(140, 105, 12, .3),
    0 3px 0 #8a6a14,
    0 8px 20px rgba(150, 115, 26, .45);
}

.btn-primary:active,
.nav-cta:active {
  transform: translateY(2px);
  background: linear-gradient(180deg, #c9a336 0%, #d9b545 60%, #e5c65e 100%);
  box-shadow:
    inset 0 2px 5px rgba(90, 68, 8, .55),
    inset 0 -1px 0 rgba(255, 255, 255, .3),
    0 0 0 #8a6a14,
    0 1px 4px rgba(150, 115, 26, .3);
}

/* White / light */
.btn-light,
.section .btn-ghost,
.section-soft .btn-ghost {
  background: linear-gradient(180deg, #ffffff 0%, #f2f6fb 48%, #e2eaf3 100%);
  border-color: #c2d1e0;
  color: var(--navy);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(11, 37, 69, .1),
    inset 0 -6px 12px rgba(11, 37, 69, .06),
    0 2px 0 #b9cade,
    0 5px 14px rgba(11, 37, 69, .12);
}

.btn-light:hover,
.section .btn-ghost:hover,
.section-soft .btn-ghost:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f7fafd 48%, #e9f0f7 100%);
  color: var(--navy);
  border-color: #a9bdd2;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(11, 37, 69, .1),
    inset 0 -6px 12px rgba(11, 37, 69, .05),
    0 3px 0 #b9cade,
    0 8px 20px rgba(11, 37, 69, .16);
}

.btn-light:active,
.section .btn-ghost:active,
.section-soft .btn-ghost:active {
  transform: translateY(2px);
  background: linear-gradient(180deg, #dde6ef 0%, #eaf1f7 60%, #f5f9fc 100%);
  box-shadow:
    inset 0 2px 5px rgba(11, 37, 69, .18),
    inset 0 -1px 0 rgba(255, 255, 255, .7),
    0 0 0 #b9cade,
    0 1px 4px rgba(11, 37, 69, .1);
}

/* Ghost over the hero photograph: same bevel, translucent body */
.hero .btn-ghost {
  background: linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .14) 50%, rgba(5, 18, 36, .3) 100%);
  border-color: rgba(255, 255, 255, .72);
  color: #fff;
  text-shadow: 0 1px 3px rgba(2, 10, 22, .7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -1px 0 rgba(0, 0, 0, .3),
    0 2px 0 rgba(2, 10, 22, .35),
    0 6px 16px rgba(2, 10, 22, .4);
}

.hero .btn-ghost:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .22) 50%, rgba(5, 18, 36, .26) 100%);
  border-color: #fff;
  transform: translateY(-1px);
}

.hero .btn-ghost:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 6px rgba(2, 10, 22, .5),
    0 0 0 rgba(2, 10, 22, .35),
    0 1px 4px rgba(2, 10, 22, .3);
}

/* Form submit inherits the primary treatment */
.contact-form button[type="submit"] { border-radius: 100px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .nav-cta { transition: none; }
}

/* ==========================================================================
   25. SCOPE FIXES + EYEBROW + WHATSAPP
   The hero text shadows were written against .hero-badge without scoping, and
   admissions.php reuses that class on a pale page hero, so the shadow appeared
   over a light background and looked dirty. Everything below is now scoped to
   the home hero only.
   ========================================================================== */

/* Kill the inherited hero shadows anywhere outside the home hero */
.page-hero .hero-badge,
.page-hero .section-kicker,
.section .section-kicker,
.section-soft .section-kicker,
.page-hero-copy h1,
.page-hero-card h2,
.page-hero-card h3 {
  text-shadow: none !important;
}

.page-hero .hero-badge {
  color: var(--gold-deep);
}
.page-hero .hero-badge::before {
  background: var(--gold);
  box-shadow: none;
}

/* -------------------------------------------- Eyebrow at the foot, centred */
.hero-badge-foot {
  position: absolute;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%);
  z-index: 2;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  max-width: calc(100% - 2 * var(--gutter));
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Both halves of the rule, so it reads as a centred device */
.hero-badge-foot::after {
  content: '';
  width: 26px;
  height: 1px;
  background: #f0d78b;
  box-shadow: 0 1px 3px rgba(2, 10, 22, .6);
  flex: none;
}

@media (max-width: 860px) {
  .hero-badge-foot { bottom: 26px; font-size: 9px; letter-spacing: .14em; }
  .hero-badge-foot::before, .hero-badge-foot::after { width: 16px; }
}

@media (max-width: 480px) {
  .hero-badge-foot::before, .hero-badge-foot::after { display: none; }
}

/* ------------------------------------------------------ WhatsApp float */
.wa-float {
  position: fixed;
  right: clamp(14px, 2.5vw, 26px);
  bottom: clamp(14px, 2.5vw, 26px);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 56px;
  padding: 0 16px;
  border-radius: 100px;
  background: linear-gradient(180deg, #34d472 0%, #25a75a 55%, #1c8c49 100%);
  border: 1px solid #17803f;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -1px 0 rgba(0, 0, 0, .2),
    0 2px 0 #16793c,
    0 8px 22px rgba(20, 120, 60, .4);
  transition: transform .16s var(--spring), box-shadow .2s ease, gap .3s var(--ease);
}

.wa-float svg { width: 26px; height: 26px; flex: none; }

.wa-float-label {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width .34s var(--ease), opacity .22s ease, margin-left .34s var(--ease);
}

.wa-float:hover { transform: translateY(-2px); }
.wa-float:hover .wa-float-label { max-width: 140px; opacity: 1; margin-left: 10px; }

.wa-float:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 6px rgba(10, 70, 34, .5),
    0 0 0 #16793c,
    0 2px 6px rgba(20, 120, 60, .3);
}

/* Always show the label on touch devices, where there is no hover */
@media (hover: none) {
  .wa-float-label { max-width: 140px; opacity: 1; margin-left: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float, .wa-float-label { transition: none; }
}

/* Hero headline trimmed again: three comfortable lines rather than a slab.
   The admin value is still respected, just capped lower. */
.hero-title {
  font-size: clamp(1.6rem, 1.15rem + 1.5vw, min(var(--hero-title-max, 2.3rem), 2.35rem));
  line-height: 1.18;
  letter-spacing: -.025em;
  margin-bottom: 22px;
}

@media (max-width: 560px) {
  .hero-title { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 1.75rem); }
}

/* ==========================================================================
   26. FULL-HEIGHT HERO
   The navy fact strip is gone, so the photograph runs to the bottom of the
   viewport. The header is overlaid on the hero (margin-top pulls it up), so
   the frame is a full viewport tall from the very top of the page.
   dvh is used where supported so mobile browser chrome does not cause a jump.
   ========================================================================== */

.hero {
  min-height: 100vh;
  min-height: 100dvh;
  padding-block: clamp(130px, 18vh, 190px) clamp(64px, 9vh, 96px);
}

@media (max-width: 860px) {
  .hero {
    min-height: 100vh;
    min-height: 100dvh;
    padding-block: 124px 64px;
  }
}

/* The scroll cue is the signal that there is more below the fold */
.hero-scroll { bottom: 20px; }
.hero-badge-foot { bottom: 82px; }

@media (max-width: 860px) {
  .hero-badge-foot { bottom: 30px; }
}

/* ==========================================================================
   27. BUTTON SIZE RESET
   The embossed treatment made the pills read much heavier than the old flat
   ones, so the whole scale comes down: less padding, smaller type, a tighter
   radius on the bevel. Applied once here so every button on the site matches.
   ========================================================================== */

.btn {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .005em;
  gap: 8px;
}

.hero .btn { padding: 10px 20px; font-size: 13px; }

.nav-cta { padding: 8px 17px; font-size: 12.5px; }

/* The bevel reads best when the drop edge is proportional to the button */
.btn-primary, .nav-cta {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    inset 0 -1px 0 rgba(0, 0, 0, .2),
    inset 0 -4px 8px rgba(140, 105, 12, .3),
    0 2px 0 #8a6a14,
    0 4px 10px rgba(150, 115, 26, .32);
}

.btn-light, .section .btn-ghost, .section-soft .btn-ghost {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(11, 37, 69, .1),
    inset 0 -4px 8px rgba(11, 37, 69, .05),
    0 2px 0 #b9cade,
    0 4px 10px rgba(11, 37, 69, .1);
}

.hero .btn-ghost {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .65),
    inset 0 -1px 0 rgba(0, 0, 0, .28),
    0 2px 0 rgba(2, 10, 22, .32),
    0 4px 12px rgba(2, 10, 22, .35);
}

/* Footer call-to-action keeps a little more presence */
.footer-cta .btn { padding: 12px 26px; font-size: 13.5px; }

@media (max-width: 560px) {
  .btn { padding: 11px 18px; font-size: 12.5px; }
  .hero-actions .btn { width: auto; flex: 1 1 auto; }
}

/* ------------------------------------------------- WhatsApp float, smaller */
.wa-float { height: 48px; padding: 0 14px; }
.wa-float svg { width: 23px; height: 23px; }
.wa-float-label { font-size: 13px; }

/* ==========================================================================
   28. STEP AND PLATE NUMBERS
   The numbered badge was sitting almost on top of the heading. Give the card
   enough head room that the number reads as its own element.
   ========================================================================== */

.step-card, .plate-number ~ * { }

.step-card { padding-top: 72px; }

.step-number, .plate-number {
  top: 24px;
  width: 34px;
  height: 34px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(11, 37, 69, .18);
}

.step-card h3 { margin-bottom: 10px; }

@media (max-width: 560px) {
  .step-card { padding-top: 66px; }
  .step-number, .plate-number { top: 20px; width: 30px; height: 30px; font-size: 11.5px; }
}

/* Pills narrower again: the horizontal padding was still doing most of the
   widening, so it comes down further and the type tightens with it. */
.btn {
  padding: 9px 15px;
  font-size: 12.5px;
  gap: 7px;
}

.hero .btn { padding: 9px 15px; font-size: 12.5px; }
.nav-cta { padding: 7px 14px; font-size: 12px; }
.footer-cta .btn { padding: 10px 20px; font-size: 13px; }

@media (max-width: 560px) {
  .btn { padding: 9px 14px; font-size: 12px; }
}

/* ------------------------------------------------------- School portal link */
.nav-portal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-soft);
  padding-block: 6px;
  white-space: nowrap;
  transition: color var(--t-fast) ease;
}
.nav-portal svg { width: 14px; height: 14px; opacity: .75; }
.nav-portal:hover { color: var(--gold-deep); }
.nav-portal:hover svg { opacity: 1; }

body.has-hero .site-header:not(.is-scrolled) .nav-portal {
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 4px rgba(2, 10, 22, .65);
}
body.has-hero .site-header:not(.is-scrolled) .nav-portal:hover { color: #f0d78b; }

@media (max-width: 860px) {
  .nav-portal {
    justify-content: center;
    padding-block: 16px;
    font-size: 1.05rem;
    font-family: var(--serif);
    color: var(--navy) !important;
    border-bottom: 1px solid var(--line-soft);
    text-shadow: none !important;
  }
  .nav-portal svg { width: 16px; height: 16px; }
}

/* ==========================================================================
   29. PORTAL MENU, WHATSAPP DISC, HERO LIFT
   ========================================================================== */

/* ---------------------------------------------------------- Portal menu */
.nav-portal-wrap { position: relative; display: flex; }

.nav-portal {
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--sans);
}
.nav-portal-chev { width: 11px; height: 11px; opacity: .6; transition: transform var(--t-mid) var(--ease); }
.nav-portal-wrap:hover .nav-portal-chev,
.nav-portal-wrap:focus-within .nav-portal-chev { transform: rotate(180deg); opacity: 1; }

.nav-portal-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 244px;
  padding: 7px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--lift-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility var(--t-mid);
  z-index: 60;
}

.nav-portal-wrap:hover .nav-portal-menu,
.nav-portal-wrap:focus-within .nav-portal-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* bridge the gap so the pointer can travel into the menu */
.nav-portal-wrap::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }

.nav-portal-menu a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background var(--t-fast) ease;
}
.nav-portal-menu a:hover { background: var(--sky-wash); }

.npm-title { font-size: 13.5px; font-weight: 600; color: var(--navy); }
.npm-sub { font-size: 11.5px; color: var(--muted); }

@media (hover: none) { .nav-portal-menu { display: none; } }

@media (max-width: 860px) {
  .nav-portal-wrap { flex-direction: column; }
  .nav-portal { display: none; }
  .nav-portal-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: block;
    min-width: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    background: none;
  }
  .nav-portal-menu a {
    padding-block: 16px;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
    text-align: center;
    align-items: center;
  }
  .npm-title { font-size: 1.05rem; font-family: var(--serif); font-weight: 700; }
}

/* ------------------------------------------------------ WhatsApp disc icon */
.wa-float { gap: 0; padding-left: 6px; padding-right: 16px; }

.wa-float-disc {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #25a75a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.wa-float-disc svg { width: 22px; height: 22px; }

.wa-float-label { margin-left: 0; }
.wa-float:hover .wa-float-label { margin-left: 10px; }
@media (hover: none) { .wa-float-label { margin-left: 10px; } }

/* ------------------------------------------------------------- Hero lift */
/* Copy sits a little higher in the frame, clear of the eyebrow and cue */
.hero { padding-bottom: clamp(112px, 15vh, 156px); }
.hero-badge-foot { bottom: 70px; }
.hero-scroll { bottom: 18px; }

@media (max-width: 860px) {
  .hero { padding-bottom: 96px; }
  .hero-badge-foot { bottom: 26px; }
}

/* ==========================================================================
   30. WHATSAPP AS A CIRCLE
   Icon only, no expanding label. The button keeps its accessible name through
   aria-label on the anchor, so screen readers still announce it correctly.
   ========================================================================== */

.wa-float {
  width: 56px;
  height: 56px;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #34d472 0%, #25a75a 55%, #1c8c49 100%);
}

/* The white disc is redundant once the button itself is the circle */
.wa-float-disc {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  color: #fff;
  display: grid;
  place-items: center;
}
.wa-float-disc svg { width: 30px; height: 30px; }

.wa-float-label { display: none; }

.wa-float:hover { transform: translateY(-2px) scale(1.04); }
.wa-float:active { transform: translateY(1px) scale(.98); }

@media (max-width: 560px) {
  .wa-float { width: 52px; height: 52px; }
  .wa-float-disc svg { width: 27px; height: 27px; }
}

/* ==========================================================================
   31. MOBILE NAV FITS WITHOUT SCROLLING
   Nine rows now live in the sheet (six pages, two portals, the apply button),
   so the row height and top padding come down until the whole menu clears a
   small phone. Measured against a 375x667 iPhone SE, the smallest in common use.
   ========================================================================== */

@media (max-width: 860px) {
  .main-nav {
    padding: 78px var(--gutter) 20px;
    max-height: 100dvh;
    overflow-y: auto;
    display: flex;
    justify-content: flex-start;
  }

  .main-nav > a,
  .nav-portal-menu a {
    padding-block: 11px;
    font-size: 1rem;
    line-height: 1.3;
  }

  .npm-title { font-size: 1rem; }
  .npm-sub { display: none; }          /* the label alone is enough here */

  .nav-cta {
    margin-top: 14px;
    padding-block: 12px;
    font-size: 13.5px;
  }
}

/* Very small screens: tighten once more so nothing is cut off */
@media (max-width: 400px), (max-height: 700px) {
  .main-nav { padding-top: 72px; padding-bottom: 16px; }
  .main-nav > a,
  .nav-portal-menu a { padding-block: 9px; font-size: .95rem; }
  .npm-title { font-size: .95rem; }
  .nav-cta { margin-top: 10px; padding-block: 11px; }
}

/* Footer copyright */
.footer-bottom .footer-note { color: rgba(255, 255, 255, .38); }

/* ==========================================================================
   32. HEADER TEXT SHADOWS OFF + SMALLER FOOTER LINE
   The header already carries its own gradient scrim, so the per-character
   shadows on the brand and nav were doing nothing but muddying the type.
   The hero headline keeps its shadow, since that sits directly on photography.
   ========================================================================== */

body.has-hero .site-header:not(.is-scrolled) .brand-name,
body.has-hero .site-header:not(.is-scrolled) .brand-tagline,
body.has-hero .site-header:not(.is-scrolled) .main-nav > a,
body.has-hero .site-header:not(.is-scrolled) .nav-portal,
body.has-hero .site-header:not(.is-scrolled) .nav-cta {
  text-shadow: none;
}

/* A slightly firmer header scrim compensates for the shadows coming off */
body.has-hero .site-header:not(.is-scrolled)::before {
  background: linear-gradient(180deg, rgba(5, 18, 36, .62), rgba(5, 18, 36, .18) 62%, rgba(5, 18, 36, 0));
}

/* The eyebrow and scroll cue sit lower on open photography and still need theirs */

/* ------------------------------------------------------- Footer fine print */
.footer-bottom {
  font-size: 11.5px;
  padding-block: 20px;
  color: rgba(255, 255, 255, .42);
}
.footer-bottom .footer-note { font-size: 11px; }

@media (max-width: 560px) {
  .footer-bottom { font-size: 10.5px; gap: 8px; }
}

/* ==========================================================================
   33. TIGHTER INNER-PAGE HEADS
   Inner pages have a solid header above them rather than an overlaid one, so
   the generous top padding was stacking on top of the header's own height and
   pushing the heading a long way down, most noticeably on phones.
   ========================================================================== */

.page-hero { padding-block: clamp(38px, 5vw, 68px) clamp(38px, 5.5vw, 68px); }

@media (max-width: 860px) {
  .page-hero { padding-block: 26px 32px; }
  .page-hero-copy h1 { margin-bottom: 14px; }
  .page-hero-copy .section-kicker { margin-bottom: 12px; }
}

@media (max-width: 560px) {
  .page-hero { padding-block: 20px 26px; }
}

/* The first section after a page hero can come up a little too */
.page-hero + .section { padding-top: clamp(44px, 6vw, 84px); }