/* ============================================================
   MANANA INTERMEDIATE SCHOOL — Design System
   Editorial agency-grade tokens, components & layout
============================================================ */

:root {
  /* ---- Spacing (8pt baseline) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Type scale ---- */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: 60px;
  --text-6xl: 80px;

  /* ---- Line heights ---- */
  --lh-tight: 1.05;
  --lh-snug: 1.15;
  --lh-mid: 1.4;
  --lh-body: 1.65;

  /* ---- Primary scale (500 = #1f4e79) ---- */
  --primary-50:  #eef4fa;
  --primary-100: #d6e4f1;
  --primary-200: #a9c4dd;
  --primary-300: #7ca4c8;
  --primary-400: #4f83b1;
  --primary-500: #1f4e79;
  --primary-600: #1a4467;
  --primary-700: #163753;
  --primary-800: #11293f;
  --primary-900: #0b1c2c;

  /* ---- Accent scale (500 = #c9a35a) ---- */
  --accent-50:  #fbf6ec;
  --accent-100: #f4e8cd;
  --accent-200: #e8d29d;
  --accent-300: #dcbb6e;
  --accent-400: #d3ae62;
  --accent-500: #c9a35a;
  --accent-600: #b08d4a;
  --accent-700: #8c6f3a;
  --accent-800: #66522b;
  --accent-900: #43361c;

  /* ---- Neutral grey scale ---- */
  --gray-50:  #fafafa;
  --gray-100: #f4f4f5;
  --gray-200: #e4e4e7;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;
  --gray-500: #71717a;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #18181b;

  /* ---- Semantic ---- */
  --success: #2f8a4f;
  --warning: #c79215;
  --error:   #b3303c;
  --info:    var(--primary-500);

  /* ---- Shadows (5 elevation, "strong" base) ---- */
  --shadow-1: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 8px 20px rgba(0, 0, 0, 0.10);
  --shadow-3: 0 16px 36px rgba(0, 0, 0, 0.14);
  --shadow-4: 0 24px 56px rgba(0, 0, 0, 0.18);
  --shadow-5: 0 32px 80px rgba(0, 0, 0, 0.22);

  /* ---- Radii (sharp) ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* ---- Motion ---- */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --dur-deliberate: 600ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Layout ---- */
  --sidebar-w: 320px;
  --container-pad: var(--space-6);
}

/* ============================================================
   Reset & base
============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--gray-900);
  background: var(--gray-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  orphans: 2;
  widows: 2;
  padding-right: var(--sidebar-w);
  transition: padding-right var(--dur-slow) var(--ease-out);
}
body.sidebar-collapsed { padding-right: 0; }

img { max-width: 100%; display: block; }

a {
  color: var(--primary-600);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--primary-700); }

button { font: inherit; cursor: pointer; border: 0; background: transparent; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  color: var(--gray-900);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--text-4xl); line-height: var(--lh-tight); font-weight: 800; }
h2 { font-size: var(--text-3xl); line-height: var(--lh-snug); font-weight: 700; }
h3 { font-size: var(--text-xl); line-height: var(--lh-mid); font-weight: 600; }
p  { margin: 0 0 var(--space-4); max-width: 70ch; }

::selection { background: var(--primary-200); color: var(--primary-900); }

/* Tabular numerics for stats / dates / phone */
.tnum, time, .stat__num, .footer__legal {
  font-variant-numeric: tabular-nums;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--primary-600);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  z-index: 100;
  border-radius: var(--radius-md);
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); color: #fff; }

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   Layout — right sidebar nav + main
============================================================ */
.app {
  min-height: 100vh;
}

.main {
  min-width: 0;
  padding: 0 var(--space-5);
}

@media (max-width: 1024px) {
  body { padding-right: 0; }
  .main { padding: 0 var(--space-4); }
}

/* ============================================================
   Sidebar nav (right vertical) — fixed so it never slides with the footer
============================================================ */
.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: #fff;
  border-left: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 50;
  transition: transform var(--dur-slow) var(--ease-out);
}
.app--sidebar-collapsed .sidebar { transform: translateX(100%); }

.sidebar__head {
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-bottom: 1px solid var(--gray-200);
  text-align: left;
}
.sidebar__logo-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.sidebar__logo {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.sidebar__brand {
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--primary-700);
  letter-spacing: 0.02em;
  line-height: var(--lh-snug);
}
.sidebar__mission {
  font-size: var(--text-sm);
  color: var(--gray-500);
  line-height: var(--lh-mid);
  margin: 0;
}

.sidebar__tools {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.search {
  position: relative;
  display: flex;
  align-items: center;
}
.search__input {
  flex: 1;
  width: 100%;
  font: inherit;
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-7);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--gray-50);
  color: var(--gray-900);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.search__input:focus { border-color: var(--primary-500); box-shadow: var(--shadow-1); outline: none; }
.search__icon {
  position: absolute;
  left: var(--space-3);
  color: var(--gray-400);
  pointer-events: none;
}

.sidebar__nav { padding: var(--space-4) var(--space-3); flex: 1; }
.sidebar__nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.sidebar__nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--gray-700);
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.sidebar__nav-link:hover { background: var(--primary-50); color: var(--primary-700); }
.sidebar__nav-link i { width: 20px; text-align: center; color: var(--gray-400); }
.sidebar__nav-link:hover i { color: var(--primary-500); }

.sidebar__nav-link--active {
  background: var(--primary-50);
  color: var(--primary-700);
  font-weight: 600;
}
.sidebar__nav-link--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--primary-500);
  border-radius: var(--radius-sm);
}
.sidebar__nav-link--active i { color: var(--primary-500); }

.sidebar__foot {
  padding: var(--space-5);
  border-top: 1px solid var(--gray-200);
  font-size: var(--text-sm);
  color: var(--gray-600);
}
.sidebar__foot p { margin: 0 0 var(--space-3); }
.sidebar__socials {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.sidebar__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--gray-600);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}
.sidebar__socials a:hover {
  background: var(--primary-500);
  color: #fff;
  transform: translateY(-2px);
}

/* Hamburger toggle */
.nav-toggle {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 60;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  color: var(--primary-700);
  font-size: var(--text-md);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}
.nav-toggle:hover { background: var(--primary-50); transform: scale(1.05); }

/* Mobile sidebar drawer */
@media (max-width: 1024px) {
  .sidebar {
    position: fixed;
    top: 0; right: 0;
    width: min(360px, 90vw);
    transform: translateX(100%);
    box-shadow: var(--shadow-4);
  }
  .app--mobile-nav-open .sidebar { transform: translateX(0); }
  .app--sidebar-collapsed .sidebar { transform: translateX(100%); }
}

/* Backdrop for mobile drawer */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(17, 41, 63, 0.45);
  z-index: 45;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
@media (max-width: 1024px) {
  .app--mobile-nav-open .nav-backdrop { display: block; opacity: 1; }
}

/* ============================================================
   Section base
============================================================ */
.section {
  padding: var(--space-10) var(--space-6);
  background: #fff;
  border-radius: var(--radius-xl);
  margin: var(--space-7) 0;
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
}
.section--tight    { padding: var(--space-9) var(--space-6); }
.section--breath   { padding: var(--space-8) var(--space-5); }
.section--bleed    { padding-left: 0; padding-right: 0; }
.section--primary  { background: var(--primary-700); color: #fff; }
.section--cream    { background: var(--accent-50); }
.section--paper    { background: var(--primary-50); }

@media (max-width: 768px) {
  .section { padding: var(--space-7) var(--space-5); margin: var(--space-5) 0; }
  .section--tight { padding: var(--space-7) var(--space-5); }
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}
.container--narrow { max-width: 920px; }
.container--read   { max-width: 720px; }

/* ============================================================
   Section heading (Awwwards-grade editorial)
============================================================ */
.heading {
  margin-bottom: var(--space-8);
  max-width: 920px;
}
.heading--center { margin-left: auto; margin-right: auto; text-align: center; }

.heading__eyebrow {
  display: inline-block;
  font-family: 'Caveat', 'Inter', cursive;
  font-size: var(--text-2xl);
  color: var(--accent-600);
  margin-bottom: var(--space-2);
  letter-spacing: 0.02em;
  font-weight: 600;
}
.heading__title {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--gray-900);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
}
.heading__sub {
  font-size: var(--text-md);
  color: var(--gray-600);
  max-width: 65ch;
  margin: 0;
}
@media (min-width: 768px) {
  .heading__title { font-size: var(--text-4xl); }
}

/* ============================================================
   Buttons
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  padding: var(--space-3) var(--space-5);
  min-height: 44px;
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn i { font-size: var(--text-sm); }
.btn--primary {
  background: var(--primary-500);
  color: #fff;
  box-shadow: var(--shadow-2);
}
.btn--primary:hover { background: var(--primary-600); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-3); }
.btn--ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; transform: translateY(-2px); }
.btn--accent {
  background: var(--accent-500);
  color: var(--primary-900);
  box-shadow: var(--shadow-2);
}
.btn--accent:hover { background: var(--accent-600); color: var(--primary-900); transform: translateY(-2px); }
.btn--lg { font-size: var(--text-md); padding: var(--space-4) var(--space-6); min-height: 52px; }
.btn--block { width: 100%; }

/* ============================================================
   Hero — index landing carousel
============================================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7) 0;
  background: linear-gradient(180deg, var(--primary-50), var(--gray-50));
}
.hero__carousel {
  position: relative;
  width: 100%;
  max-width: none;
  height: calc(100vh - var(--space-10));
  min-height: 560px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-4);
  background: var(--primary-900);
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-deliberate) var(--ease-out), visibility 0s linear var(--dur-deliberate);
}
.slide--active { opacity: 1; visibility: visible; transition-delay: 0s; }
.slide__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slide__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 28, 44, 0.15) 0%, rgba(11, 28, 44, 0.55) 60%, rgba(11, 28, 44, 0.78) 100%);
}
.slide__content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-9) var(--space-7);
  color: #fff;
}
.slide__eyebrow {
  display: inline-block;
  font-family: 'Caveat', cursive;
  font-size: var(--text-2xl);
  color: var(--accent-300);
  margin-bottom: var(--space-3);
}
.slide__title {
  font-size: var(--text-4xl);
  font-weight: 800;
  line-height: var(--lh-snug);
  color: #fff;
  max-width: 24ch;
  margin: 0 0 var(--space-6);
  letter-spacing: -0.01em;
}
@media (min-width: 768px) {
  .slide__title { font-size: var(--text-5xl); }
}
.slide__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.hero__controls {
  position: absolute;
  bottom: var(--space-5);
  right: var(--space-5);
  display: flex;
  gap: var(--space-2);
  z-index: 5;
}
.hero__arrow {
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: var(--radius-full);
  backdrop-filter: blur(8px);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}
.hero__arrow:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.05); }

.hero__dots {
  position: absolute;
  bottom: var(--space-7);
  left: var(--space-7);
  display: flex;
  gap: var(--space-2);
  z-index: 5;
}
.hero__dot {
  width: 28px;
  height: 4px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-full);
  transition: background var(--dur-fast) var(--ease-out), width var(--dur-base) var(--ease-out);
}
.hero__dot--active { background: var(--accent-400); width: 48px; }

@media (max-width: 768px) {
  .hero { padding: var(--space-5) 0; height: auto; min-height: 100vh; }
  .hero__carousel { height: auto; min-height: 80vh; }
  .slide__content { padding: var(--space-6) var(--space-5) var(--space-7); }
  .slide__title { font-size: var(--text-2xl); }
}

/* ============================================================
   Sub-page hero (small banner)
============================================================ */
.subhero {
  height: 320px;
  background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 60%, var(--accent-50) 100%);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  margin: var(--space-5) 0;
}
.subhero__inner { position: relative; z-index: 2; padding: 0 var(--space-7); }
.subhero__title {
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--primary-800);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-3);
}
@media (min-width: 768px) { .subhero__title { font-size: var(--text-5xl); } }
.subhero__sub {
  font-size: var(--text-md);
  color: var(--gray-700);
  max-width: 60ch;
  margin: 0;
}
.subhero__deco {
  position: absolute;
  right: -80px;
  bottom: -60px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, var(--accent-200) 0%, transparent 70%);
  opacity: 0.6;
  border-radius: 50%;
}

/* Breadcrumb */
.crumbs {
  margin: var(--space-5) 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--gray-500);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.crumbs a { color: var(--gray-600); }
.crumbs a:hover { color: var(--primary-600); }
.crumbs__sep { color: var(--gray-400); }
.crumbs__current { color: var(--primary-700); font-weight: 600; }

/* ============================================================
   Principal letter (asymmetric 5/7 + drop cap)
============================================================ */
.principal {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-8);
  align-items: center;
  position: relative;
}
@media (max-width: 1024px) { .principal { grid-template-columns: 1fr; gap: var(--space-6); } }
.principal__media { position: relative; }
.principal__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
}
.principal__photo--small {
  position: absolute;
  bottom: -32px;
  right: -24px;
  width: 40%;
  aspect-ratio: 1 / 1;
  border: 8px solid #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
}
.principal__quote-mark {
  font-family: 'Caveat', serif;
  font-size: 160px;
  line-height: 0.6;
  color: var(--primary-100);
  position: absolute;
  top: -32px;
  left: -16px;
  z-index: 0;
}
.principal__body { position: relative; z-index: 1; }
.principal__text {
  font-size: var(--text-md);
  color: var(--gray-700);
  line-height: var(--lh-body);
  max-width: 60ch;
}
.principal__text:first-of-type::first-letter {
  font-size: var(--text-6xl);
  color: var(--primary-500);
  float: left;
  line-height: 0.85;
  padding: 6px 12px 0 0;
  font-weight: 800;
  font-family: 'Inter', serif;
}
.principal__signoff {
  margin-top: var(--space-5);
  font-weight: 600;
  color: var(--gray-800);
}
.principal__signoff small { display: block; color: var(--gray-500); font-weight: 400; margin-top: var(--space-1); }
.principal__signature {
  margin-top: var(--space-3);
  height: 56px;
  color: var(--primary-600);
}

/* ============================================================
   Mission / Vision / Values — 3-up
============================================================ */
.mvv {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 768px) { .mvv { grid-template-columns: 1fr; } }
.mvv__card {
  padding: var(--space-6);
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base) var(--ease-out);
}
.mvv__card:hover { background: var(--primary-50); transform: translateY(-4px); }
.mvv__card:nth-child(2) { transform: translateY(24px); }
.mvv__card:nth-child(2):hover { transform: translateY(20px); }
@media (max-width: 768px) {
  .mvv__card:nth-child(2) { transform: none; }
  .mvv__card:nth-child(2):hover { transform: translateY(-4px); }
}
.mvv__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-500);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}
.mvv__card:nth-child(2) .mvv__icon { background: var(--accent-500); color: var(--primary-900); }
.mvv__card:nth-child(3) .mvv__icon { background: var(--primary-700); }
.mvv__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 var(--space-3);
}
.mvv__desc {
  font-size: var(--text-base);
  color: var(--gray-600);
  margin: 0;
}

/* ============================================================
   Features (Why Us) — asymmetric
============================================================ */
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1024px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .features { grid-template-columns: 1fr; } }
.feature {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
  border-color: var(--primary-200);
}
.feature__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.feature__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-deliberate) var(--ease-out);
}
.feature:hover .feature__img { transform: scale(1.04); }
.feature__body { padding: var(--space-5); }
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--primary-50);
  color: var(--primary-600);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  font-size: var(--text-md);
}
.feature__title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 var(--space-2);
}
.feature__claim {
  font-size: var(--text-sm);
  color: var(--accent-700);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}
.feature__desc {
  font-size: var(--text-sm);
  color: var(--gray-600);
  margin: 0;
  line-height: var(--lh-mid);
}

/* ============================================================
   Subjects (academics) — editorial cards
============================================================ */
.subjects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 1024px) { .subjects { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .subjects { grid-template-columns: 1fr; } }
.subject {
  padding: var(--space-6);
  background: #fff;
  border-top: 4px solid var(--primary-500);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
}
.subject:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.subject:nth-child(2) { border-top-color: var(--accent-500); }
.subject:nth-child(3) { border-top-color: var(--primary-700); }
.subject:nth-child(4) { border-top-color: var(--success); }
.subject:nth-child(5) { border-top-color: var(--accent-700); }
.subject:nth-child(6) { border-top-color: var(--primary-400); }
.subject__media {
  aspect-ratio: 16 / 9;
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5);
  overflow: hidden;
}
.subject__img { width: 100%; height: 100%; object-fit: cover; }
.subject__name {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 var(--space-3);
}
.subject__row { display: flex; gap: var(--space-3); margin-bottom: var(--space-3); font-size: var(--text-sm); }
.subject__label { color: var(--accent-700); font-weight: 600; min-width: 88px; flex-shrink: 0; }
.subject__value { color: var(--gray-700); }

/* Grade ladder */
.ladder {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
  position: relative;
}
.ladder::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-300), var(--accent-500));
  z-index: 0;
}
.ladder__step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: var(--space-7);
}
.ladder__step::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  background: var(--primary-500);
  border: 4px solid #fff;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-2);
}
.ladder__step:nth-child(odd)::before { background: var(--accent-500); }
.ladder__grade {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--primary-700);
  margin: 0 0 var(--space-1);
}
.ladder__caption { font-size: var(--text-xs); color: var(--gray-600); margin: 0; }
@media (max-width: 768px) {
  .ladder { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .ladder::before { display: none; }
}

/* ============================================================
   Day timeline
============================================================ */
.timeline {
  position: relative;
  padding: var(--space-8) 0 var(--space-7);
  overflow-x: auto;
}
.timeline__track {
  position: relative;
  display: flex;
  gap: var(--space-2);
  min-width: max-content;
  padding: 0 var(--space-2);
}
.timeline__track::before {
  content: "";
  position: absolute;
  left: 24px; right: 24px;
  top: 28px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-300), var(--accent-400), var(--primary-500));
  border-radius: var(--radius-full);
}
.t-step {
  position: relative;
  width: 168px;
  flex-shrink: 0;
  padding-top: var(--space-7);
  text-align: center;
}
.t-step__dot {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  background: #fff;
  border: 4px solid var(--primary-500);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-500);
  font-size: var(--text-xs);
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-fast) var(--ease-out);
}
.t-step:hover .t-step__dot { background: var(--accent-400); border-color: var(--accent-500); transform: translateX(-50%) scale(1.2); }
.t-step__time {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--primary-700);
  margin: var(--space-2) 0 var(--space-1);
  font-variant-numeric: tabular-nums;
}
.t-step__name { font-size: var(--text-sm); color: var(--gray-900); font-weight: 600; margin: 0 0 var(--space-1); }
.t-step__desc { font-size: var(--text-xs); color: var(--gray-600); margin: 0; line-height: var(--lh-mid); }

.day-photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-7);
}
@media (max-width: 768px) { .day-photos { grid-template-columns: repeat(2, 1fr); } }
.day-photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.day-photos img:nth-child(2) { aspect-ratio: 1 / 1; transform: translateY(20px); }
.day-photos img:nth-child(3) { aspect-ratio: 3 / 4; }
@media (max-width: 768px) { .day-photos img { transform: none !important; aspect-ratio: 4/3 !important; } }

/* ============================================================
   Staff
============================================================ */
.staff {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1024px) { .staff { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .staff { grid-template-columns: 1fr; } }
.staff-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
}
.staff-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.staff-card__media { aspect-ratio: 4 / 5; overflow: hidden; }
.staff-card__photo {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-deliberate) var(--ease-out);
}
.staff-card:hover .staff-card__photo { transform: scale(1.05); }
.staff-card__body { padding: var(--space-5); }
.staff-card__name { font-size: var(--text-md); font-weight: 700; color: var(--gray-900); margin: 0; }
.staff-card__role { font-size: var(--text-sm); color: var(--accent-700); font-weight: 600; margin: 4px 0 var(--space-3); }
.staff-card__meta {
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin: 0 0 var(--space-3);
  line-height: var(--lh-mid);
}
.staff-card__quote {
  font-size: var(--text-sm);
  color: var(--gray-700);
  font-style: italic;
  margin: 0 0 var(--space-3);
  line-height: var(--lh-mid);
}
.staff-card__email {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--primary-600);
  font-weight: 500;
}
.staff-card__email:hover { color: var(--primary-700); }

/* ============================================================
   Life — collage gallery
============================================================ */
.collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: var(--space-3);
}
@media (max-width: 1024px) { .collage { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; } }
@media (max-width: 600px)  { .collage { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; } }
.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-deliberate) var(--ease-out);
}
.tile:hover img { transform: scale(1.05); }
.tile__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-4);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  background: linear-gradient(180deg, transparent, rgba(11, 28, 44, 0.85));
}
.tile__caption strong { display: block; font-size: var(--text-md); margin-bottom: 4px; }
.tile--w2 { grid-column: span 2; }
.tile--h2 { grid-row: span 2; }
@media (max-width: 600px) {
  .tile--w2, .tile--h2 { grid-column: auto; grid-row: auto; }
}

/* ============================================================
   Works grid
============================================================ */
.works {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1024px) { .works { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .works { grid-template-columns: 1fr; } }
.work {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
}
.work:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.work__media { aspect-ratio: 4 / 3; overflow: hidden; }
.work__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-deliberate) var(--ease-out); }
.work:hover .work__img { transform: scale(1.05); }
.work__body { padding: var(--space-5); }
.work__title { font-size: var(--text-md); font-weight: 700; color: var(--gray-900); margin: 0 0 var(--space-1); }
.work__author { font-size: var(--text-xs); color: var(--accent-700); font-weight: 600; margin: 0 0 var(--space-3); }
.work__note { font-size: var(--text-sm); color: var(--gray-600); margin: 0; line-height: var(--lh-mid); }

/* ============================================================
   Stats / Honours — big numbers
============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  padding: var(--space-7) 0 var(--space-8);
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: var(--space-8);
}
@media (max-width: 768px) { .stats { grid-template-columns: 1fr; gap: var(--space-5); } }
.stat__num {
  font-size: clamp(64px, 10vw, 128px);
  font-weight: 900;
  color: var(--primary-500);
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0 0 var(--space-2);
}
.stat__label { font-size: var(--text-md); color: var(--gray-700); margin: 0; max-width: 30ch; }

.honours {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1024px) { .honours { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .honours { grid-template-columns: 1fr; } }
.honour {
  background: var(--accent-50);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
}
.honour:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.honour__media { aspect-ratio: 4 / 3; overflow: hidden; }
.honour__img { width: 100%; height: 100%; object-fit: cover; }
.honour__body { padding: var(--space-4) var(--space-5); }
.honour__name { font-size: var(--text-base); font-weight: 700; color: var(--primary-700); margin: 0 0 4px; }
.honour__meta { font-size: var(--text-xs); color: var(--gray-600); margin: 0; }

/* ============================================================
   Parent quotes — big quote
============================================================ */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 1024px) { .quotes { grid-template-columns: 1fr; } }
.quote-card {
  position: relative;
  padding: var(--space-7) var(--space-6) var(--space-6);
  background: var(--primary-50);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-base) var(--ease-spring);
}
.quote-card:hover { transform: translateY(-4px); }
.quote-card::before {
  content: "“";
  position: absolute;
  top: -12px;
  left: var(--space-5);
  font-size: 96px;
  font-family: 'Caveat', serif;
  color: var(--accent-500);
  line-height: 1;
}
.quote-card__text {
  font-size: var(--text-md);
  color: var(--gray-800);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-5);
}
.quote-card__person { display: flex; align-items: center; gap: var(--space-3); }
.quote-card__avatar {
  width: 48px; height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}
.quote-card__name { font-weight: 700; color: var(--gray-900); font-size: var(--text-sm); margin: 0; }
.quote-card__role { font-size: var(--text-xs); color: var(--gray-500); margin: 2px 0 0; }

/* ============================================================
   Partnership (3-up content)
============================================================ */
.partner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 1024px) { .partner { grid-template-columns: 1fr; } }
.partner-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.partner-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.partner-card__media img { width: 100%; height: 100%; object-fit: cover; }
.partner-card__body { padding: var(--space-5); }
.partner-card__name {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 var(--space-2);
}
.partner-card__desc { font-size: var(--text-sm); color: var(--gray-600); margin: 0; line-height: var(--lh-mid); }
.partner__finale {
  margin-top: var(--space-7);
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: var(--text-3xl);
  color: var(--primary-600);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   Safety grid
============================================================ */
.safety {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1024px) { .safety { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .safety { grid-template-columns: 1fr; } }
.safety-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
}
.safety-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.safety-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.safety-card__media img { width: 100%; height: 100%; object-fit: cover; }
.safety-card__body { padding: var(--space-5); }
.safety-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--primary-50);
  color: var(--primary-600);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.safety-card__title { font-size: var(--text-md); font-weight: 700; color: var(--gray-900); margin: 0 0 var(--space-2); }
.safety-card__desc { font-size: var(--text-sm); color: var(--gray-600); margin: 0; line-height: var(--lh-mid); }
.safety-card--icononly { background: var(--primary-50); }
.safety-card--icononly .safety-card__icon { background: var(--primary-500); color: #fff; }
.safety-card--icononly .safety-card__media { display: none; }

/* ============================================================
   Admissions blocks
============================================================ */
.adm {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 1024px) { .adm { grid-template-columns: 1fr; } }
.adm__media-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.adm__media-grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.adm__media-grid img:nth-child(odd) { transform: translateY(24px); }
@media (max-width: 600px) {
  .adm__media-grid img:nth-child(odd) { transform: none; }
}

.adm__block { margin-bottom: var(--space-7); }
.adm__block-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--primary-700);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--accent-300);
}
.adm__block ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}
.adm__block li {
  font-size: var(--text-sm);
  color: var(--gray-700);
  padding-left: var(--space-5);
  position: relative;
  line-height: var(--lh-mid);
}
.adm__block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background: var(--accent-500);
  border-radius: var(--radius-sm);
}

.dates {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 768px) { .dates { grid-template-columns: repeat(2, 1fr); } }
.date-card {
  padding: var(--space-4);
  background: var(--primary-50);
  border-radius: var(--radius-md);
}
.date-card__label { font-size: var(--text-xs); color: var(--gray-500); margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.06em; }
.date-card__value { font-size: var(--text-md); color: var(--primary-800); font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; }

/* CTA banner — Apply Now */
.cta-banner {
  background: linear-gradient(135deg, var(--primary-700), var(--primary-500));
  color: #fff;
  padding: var(--space-9) var(--space-6);
  border-radius: var(--radius-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner__deco {
  position: absolute;
  right: -40px; top: -40px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, var(--accent-400), transparent 70%);
  opacity: 0.4;
  border-radius: 50%;
}
.cta-banner h2 {
  color: #fff;
  font-size: var(--text-4xl);
  margin: 0 0 var(--space-3);
}
.cta-banner p {
  color: rgba(255,255,255,0.85);
  font-size: var(--text-md);
  margin: 0 auto var(--space-6);
  max-width: 60ch;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-8);
}
@media (max-width: 768px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  text-align: left;
  border: 1px solid rgba(255,255,255,0.18);
}
.step__num {
  font-size: var(--text-3xl);
  font-weight: 900;
  color: var(--accent-300);
  font-variant-numeric: tabular-nums;
  margin: 0;
  line-height: 1;
}
.step__icon {
  display: inline-flex;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  background: var(--accent-400);
  color: var(--primary-900);
  border-radius: var(--radius-md);
  margin: var(--space-3) 0;
}
.step__title { font-size: var(--text-md); font-weight: 700; color: #fff; margin: 0 0 var(--space-2); }
.step__desc { font-size: var(--text-sm); color: rgba(255,255,255,0.78); margin: 0; line-height: var(--lh-mid); }

/* ============================================================
   Contact
============================================================ */
.contact {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-7);
}
@media (max-width: 1024px) { .contact { grid-template-columns: 1fr; } }
.contact__info p {
  font-size: var(--text-md);
  color: var(--gray-700);
  margin: 0 0 var(--space-3);
}
.contact__info p strong {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-700);
  margin-bottom: var(--space-1);
  font-weight: 600;
}
.map {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: var(--radius-lg);
  margin-top: var(--space-5);
  box-shadow: var(--shadow-2);
}

.form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.form__field { display: flex; flex-direction: column; }
.form__field--full { grid-column: 1 / -1; }
.form__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: var(--space-2);
}
.form__input,
.form__select,
.form__textarea {
  font: inherit;
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--gray-900);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form__textarea { min-height: 120px; resize: vertical; }
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
  outline: none;
}
.form__error {
  font-size: var(--text-xs);
  color: var(--error);
  margin-top: var(--space-1);
  min-height: 18px;
}
.form__msg {
  background: var(--success);
  color: #fff;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  margin-top: var(--space-4);
  display: none;
  font-size: var(--text-sm);
}
.form__msg--shown { display: block; }
.form__note { font-size: var(--text-xs); color: var(--gray-500); grid-column: 1 / -1; margin: 0; }
@media (max-width: 600px) { .form { grid-template-columns: 1fr; } }

/* ============================================================
   Footer (kid-friendly)
============================================================ */
.footer {
  margin-top: var(--space-9);
  position: relative;
  background: var(--primary-700);
  color: #fff;
  padding-bottom: var(--space-5);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  overflow: hidden;
}
.footer__wave {
  display: block;
  width: 100%;
  height: 80px;
  background: var(--gray-50);
}
.footer__wave svg { display: block; width: 100%; height: 100%; }

.footer__main {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: var(--space-7);
  padding: var(--space-7) var(--space-6) var(--space-6);
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 1024px) { .footer__main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .footer__main { grid-template-columns: 1fr; } }
.footer__brand { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-3); }
.footer__logo { width: 72px; height: 72px; flex-shrink: 0; background: #fff; padding: var(--space-2); border-radius: var(--radius-md); }
.footer__name { font-size: var(--text-md); font-weight: 800; color: #fff; margin: 0; line-height: var(--lh-snug); }
.footer__mission { font-size: var(--text-sm); color: rgba(255,255,255,0.72); margin-top: var(--space-2); }
.footer__col h4 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-300);
  margin: 0 0 var(--space-4);
  font-weight: 700;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer__col a {
  color: rgba(255,255,255,0.78);
  font-size: var(--text-sm);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__col a:hover { color: var(--accent-300); }
.footer__col p { color: rgba(255,255,255,0.78); font-size: var(--text-sm); margin: 0 0 var(--space-2); }

.footer__decoration {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-2xl);
  margin-top: var(--space-4);
  color: var(--accent-300);
}
.footer__decoration i:nth-child(2) { color: var(--primary-200); }
.footer__decoration i:nth-child(3) { color: var(--accent-400); }

.footer__legal {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: var(--space-5) var(--space-6);
  text-align: center;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.55);
  max-width: 1280px;
  margin: 0 auto;
}
.footer__legal a { color: rgba(255,255,255,0.7); }
.footer__legal a:hover { color: var(--accent-300); }
.footer__legal-row { margin-bottom: var(--space-2); }

.footer__socials { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.10);
  color: #fff;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}
.footer__socials a:hover { background: var(--accent-500); color: var(--primary-900); transform: translateY(-2px); }

/* ============================================================
   Back to top
============================================================ */
.back-top {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--primary-500);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring), background var(--dur-fast) var(--ease-out);
  z-index: 40;
}
.back-top--shown { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-top:hover { background: var(--primary-600); transform: translateY(-2px); }

/* ============================================================
   Reveal animations
============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-deliberate) var(--ease-out), transform var(--dur-deliberate) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal--shown { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .feature:hover, .staff-card:hover, .work:hover, .tile:hover { transform: none; }
}

/* ============================================================
   Search highlight
============================================================ */
mark.search-hit {
  background: var(--accent-200);
  color: var(--primary-900);
  padding: 1px 3px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

/* Inline accent underline */
.u-accent {
  background-image: linear-gradient(180deg, transparent 60%, var(--accent-300) 60%);
  padding: 0 2px;
}

/* Utility */
.flow > * + * { margin-top: var(--space-4); }
.text-center { text-align: center; }
.muted { color: var(--gray-500); }

/* No-image fallback (in case AI images are not generated) */
img[src^="img/"] {
  background: var(--gray-100);
}