/* ============================================================
   ELITE LEARNING KIDS — Design System v2
   Style: Boutique warm premium — charcoal/cream neutral base,
   sage + blush (from the moose mark) as the sole color accent.
   Fonts: Fraunces (headings) + Geist Sans/Mono (body/UI) — all
   self-hosted variable fonts, no external font CDN at runtime.
   ============================================================ */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Variable.woff2') format('woff2-variations'),
       url('../fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Variable.woff2') format('woff2-variations'),
       url('../fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-Variable.woff2') format('woff2-variations'),
       url('../fonts/Fraunces-Variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-Italic-Variable.woff2') format('woff2-variations'),
       url('../fonts/Fraunces-Italic-Variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Design Tokens ---------- */
:root {
  /* Color — Ink (charcoal) neutral scale */
  --color-ink-950: #1e1c18;
  --color-ink-900: #2a2723;
  --color-ink-800: #38352e;
  --color-ink-700: #4a453c;
  --color-ink-600: #5c564a;
  --color-ink-500: #746d60;
  --color-ink-100: #ece6d9;
  --color-ink-50:  #f6f3eb;

  /* Sage — primary accent, drawn from the moose mark */
  --color-sage-600: #6e8a6a;
  --color-sage-500: #8ca888;
  --color-sage-400: #a6bfa1;
  --color-sage-100: #e4ece1;
  --color-sage-50:  #f1f5ef;

  /* Blush — secondary accent, from the moose's cheeks */
  --color-blush-600: #c97f4f;
  --color-blush-500: #e8b79e;
  --color-blush-100: #fae7db;

  /* Dusty blue + clay + plum — muted supporting tones (book blocks, icon variety) */
  --color-dusty-600: #5f7a8c;
  --color-dusty-500: #7fa0b3;
  --color-dusty-100: #e2ebef;

  --color-clay-600: #a8663f;
  --color-clay-500: #c08863;
  --color-clay-100: #f0ddd0;

  --color-plum-600: #7c5f76;
  --color-plum-500: #a98ca0;
  --color-plum-100: #ece1e9;

  /* Legacy aliases — many inline styles across page content still use these
     names from the v1 navy/amber palette; repointing the values here keeps
     that markup untouched while the whole site adopts the v2 palette. */
  --color-navy-950: var(--color-ink-950);
  --color-navy-900: var(--color-ink-900);
  --color-navy-800: var(--color-ink-800);
  --color-navy-700: var(--color-ink-700);
  --color-navy-600: var(--color-ink-600);
  --color-navy-500: var(--color-ink-500);
  --color-navy-100: var(--color-ink-100);
  --color-navy-50:  var(--color-ink-50);
  --color-amber-600: var(--color-clay-600);
  --color-amber-500: var(--color-sage-500);
  --color-amber-400: var(--color-sage-400);
  --color-amber-100: var(--color-sage-100);
  --color-amber-50:  var(--color-sage-50);
  --color-teal-600: var(--color-dusty-600);
  --color-teal-500: var(--color-dusty-500);
  --color-teal-100: var(--color-dusty-100);
  --color-coral-600: var(--color-blush-600);
  --color-coral-500: var(--color-blush-500);
  --color-coral-100: var(--color-blush-100);

  --color-cream:     #faf8f3;
  --color-cream-2:   #f3efe4;
  --color-white:     #ffffff;
  --color-ink:       var(--color-ink-900);
  --color-ink-soft:  var(--color-ink-700);
  --color-muted:     #756e60;
  --color-border:    #e6e0d2;
  --color-border-2:  #ddd6c6;

  /* Semantic */
  --bg-page: var(--color-cream);
  --bg-surface: var(--color-white);
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-muted);
  --brand-primary: var(--color-ink-900);
  --brand-cta: var(--color-ink-900);
  --brand-cta-hover: #171512;
  --brand-accent: var(--color-sage-600);
  --brand-accent-soft: var(--color-sage-50);

  /* Typography */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

  --fs-eyebrow: 0.8125rem;
  --fs-body-sm: 0.9375rem;
  --fs-body: clamp(1rem, 0.4vw + 0.9rem, 1.0625rem);
  --fs-body-lg: clamp(1.0625rem, 0.6vw + 0.95rem, 1.25rem);
  --fs-h4: clamp(1.15rem, 0.8vw + 1rem, 1.4rem);
  --fs-h3: clamp(1.4rem, 1.4vw + 1rem, 1.9rem);
  --fs-h2: clamp(1.9rem, 2.6vw + 1rem, 2.9rem);
  --fs-h1: clamp(2.4rem, 4.2vw + 1rem, 4.2rem);

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.65;

  /* Spacing (4/8pt) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-section: clamp(3.5rem, 7vw, 7.5rem);
  --space-section-sm: clamp(2.5rem, 4vw, 4.5rem);

  /* Layout */
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Shadow — warm, soft-diffused (ink-tinted, not cool navy-tinted) */
  --shadow-sm: 0 1px 2px rgba(42, 39, 35, 0.05), 0 1px 1px rgba(42,39,35,0.04);
  --shadow-md: 0 10px 28px rgba(42, 39, 35, 0.07), 0 2px 8px rgba(42,39,35,0.05);
  --shadow-lg: 0 26px 60px rgba(42, 39, 35, 0.12), 0 6px 16px rgba(42,39,35,0.06);
  --shadow-cta: 0 14px 32px rgba(30, 28, 24, 0.28);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 420ms;

  --header-h: 84px;
}

@media (max-width: 768px) {
  :root { --header-h: 68px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
img, picture, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

body {
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* Faint paper-grain texture over the whole page — a tactile, handcrafted
   base layer rather than flat digital color. Fixed + non-interactive. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 1000; pointer-events: none;
  opacity: 0.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { body::before { opacity: 0.025; } }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 560;
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  color: var(--brand-primary);
  font-optical-sizing: auto;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.015em; font-weight: 570; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); font-weight: 540; }
h4 { font-size: var(--fs-h4); font-weight: 520; }
p { color: var(--text-secondary); }
strong { color: var(--text-primary); font-weight: 600; }
em, i { font-family: var(--font-serif); font-style: italic; }

/* ---------- Layout Helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.section { padding-block: var(--space-section); }
.section-sm { padding-block: var(--space-section-sm); }
.section-tight { padding-block: var(--space-6); }

.section-head {
  max-width: 680px;
  margin-bottom: var(--space-8);
}
.section-head.center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: var(--space-3);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--brand-accent);
  border-radius: 2px;
}

/* ---------- Motto ---------- */
.motto {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--brand-accent);
  font-size: clamp(1.05rem, 0.6vw + 0.9rem, 1.3rem);
  letter-spacing: 0.005em;
}
.motto-lg {
  font-size: clamp(1.4rem, 1.6vw + 1rem, 2rem);
  text-align: center;
  max-width: 22ch;
  margin-inline: auto;
}
.motto-footer {
  font-size: 0.85rem;
  color: var(--color-sage-400);
  margin-top: var(--space-3);
}

.lede { font-size: var(--fs-body-lg); color: var(--text-secondary); margin-top: var(--space-4); }

.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.bg-surface { background: var(--bg-surface); }
.bg-navy { background: var(--brand-primary); color: var(--color-white); }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: var(--color-white); }
.bg-navy p { color: rgba(255,255,255,0.72); }
.bg-cream-2 { background: var(--color-cream-2); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -60px;
  background: var(--brand-primary); color: #fff;
  padding: 0.75rem 1.25rem; border-radius: var(--radius-sm);
  z-index: 200; transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  min-height: 48px;
  white-space: nowrap;
  touch-action: manipulation;
}
.btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; z-index: 1; }
.btn:active { transform: scale(0.97); }
.btn > * { position: relative; z-index: 1; }

/* Primary: matte charcoal with a soft diagonal sheen that sweeps across
   on hover — reads as "expensive" without adding color or noise. */
.btn-primary {
  background: var(--brand-cta);
  color: var(--color-cream);
  box-shadow: var(--shadow-cta);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.16) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.65s var(--ease-out);
}
.btn-primary:hover {
  background: var(--brand-cta-hover);
  box-shadow: 0 18px 38px rgba(30,28,24,0.34);
  transform: translateY(-2px);
}
.btn-primary:hover::before { transform: translateX(120%); }

.btn-outline {
  background: transparent;
  border-color: rgba(42,39,35,0.2);
  color: var(--brand-primary);
}
.btn-outline:hover { border-color: var(--brand-primary); background: rgba(42,39,35,0.04); transform: translateY(-2px); }

.bg-navy .btn-outline { border-color: rgba(255,255,255,0.3); color: #fff; }
.bg-navy .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

.btn-ghost {
  background: transparent;
  color: var(--brand-primary);
  padding: 0.9rem 1.1rem;
}
.btn-ghost:hover { background: rgba(42,39,35,0.05); }

.btn-whatsapp {
  background: #25D366;
  color: #06210f;
  box-shadow: 0 10px 24px rgba(37,211,102,0.35);
}
.btn-whatsapp:hover { background: #1ebc59; transform: translateY(-2px); }

.btn-block { width: 100%; }
.btn-lg { padding: 1.05rem 2rem; font-size: 1.02rem; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(250, 247, 242, 0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              height var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(250, 247, 242, 0.96);
  border-bottom-color: var(--color-border);
  box-shadow: 0 4px 20px rgba(42,39,35,0.06);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }

.brand { display: flex; align-items: center; gap: 0.65rem; font-weight: 700; font-size: 1.15rem; color: var(--brand-primary); }
.brand-mark {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out);
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.05); }
.brand-word { font-family: var(--font-serif); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; }
.brand-word small { display: block; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.06em; color: var(--text-secondary); text-transform: uppercase; }

.nav-primary { display: flex; align-items: center; gap: var(--space-2); }
.nav-primary > ul { display: flex; align-items: center; gap: 0.15rem; }
.nav-link {
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-pill);
  font-size: 0.925rem; font-weight: 500;
  color: var(--text-primary);
  position: relative;
  transition: color var(--dur-fast), background-color var(--dur-fast);
}
.nav-link:hover, .nav-link[aria-current="page"] { background: rgba(42,39,35,0.06); color: var(--brand-primary); }
.nav-link[aria-current="page"] { font-weight: 700; }
.nav-link::after {
  content: "";
  position: absolute; left: 50%; bottom: 0.15rem;
  width: 0; height: 2px; border-radius: 2px;
  background: var(--brand-accent);
  transform: translateX(-50%);
  transition: width var(--dur-base) var(--ease-out);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { width: calc(100% - 1.8rem); }

.nav-item-dropdown { position: relative; }
.nav-item-dropdown .chevron { width: 0.7em; height: 0.7em; transition: transform var(--dur-base) var(--ease-out); }
.nav-item-dropdown:hover .chevron, .nav-item-dropdown:focus-within .chevron { transform: rotate(180deg); }
.dropdown-menu {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 220px;
  background: var(--bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.nav-item-dropdown:hover .dropdown-menu,
.nav-item-dropdown:focus-within .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown-menu a {
  display: block; padding: 0.65rem 0.85rem; border-radius: var(--radius-sm);
  font-size: 0.9rem; font-weight: 500; color: var(--text-primary);
  transition: background-color var(--dur-fast);
}
.dropdown-menu a:hover { background: var(--color-navy-50); color: var(--brand-primary); }

.nav-actions { display: flex; align-items: center; gap: 0.6rem; }
.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--color-border-2); border-radius: var(--radius-sm);
}
.nav-toggle .bar { display: block; width: 20px; height: 2px; background: var(--brand-primary); position: relative; transition: background-color var(--dur-fast); }
.nav-toggle .bar::before, .nav-toggle .bar::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--brand-primary);
  transition: transform var(--dur-base) var(--ease-out), top var(--dur-base) var(--ease-out);
}
.nav-toggle .bar::before { top: -6px; }
.nav-toggle .bar::after { top: 6px; }
body.menu-open .nav-toggle .bar { background: transparent; }
body.menu-open .nav-toggle .bar::before { top: 0; transform: rotate(45deg); }
body.menu-open .nav-toggle .bar::after { top: 0; transform: rotate(-45deg); }

/* ---------- Mobile drawer ---------- */
.mobile-drawer {
  position: fixed; inset: 0; z-index: 99;
  background: var(--color-cream);
  padding-top: var(--header-h);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-in-out);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.menu-open .mobile-drawer { transform: translateX(0); }
body.menu-open { overflow: hidden; }
.mobile-drawer .container { padding-block: var(--space-6) calc(var(--space-8) + 90px); }
.mobile-nav-list { display: flex; flex-direction: column; }
.mobile-nav-list > li { border-bottom: 1px solid var(--color-border); }
.mobile-nav-list a, .mobile-nav-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem 0.25rem; font-size: 1.15rem; font-weight: 600; color: var(--brand-primary);
  min-height: 44px; width: 100%; background: none; border: none; text-align: left;
  transition: padding-left var(--dur-base) var(--ease-out), color var(--dur-base);
}
.mobile-nav-list a:active, .mobile-nav-toggle:active { padding-left: 0.6rem; color: var(--brand-accent); }
.mobile-submenu { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-in-out); }
.mobile-submenu.is-open { max-height: 240px; }
.mobile-submenu a { font-size: 1rem; font-weight: 500; padding-left: 1.25rem; color: var(--text-secondary); }
.mobile-nav-toggle .chevron { width: 1em; height: 1em; transition: transform var(--dur-base) var(--ease-out); }
.mobile-nav-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.mobile-cta-group { display: flex; flex-direction: column; gap: 0.75rem; margin-top: var(--space-6); }

/* Sticky bottom CTA bar — mobile only */
.mobile-cta-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 0.6rem clamp(0.85rem, 4vw, 1.5rem);
  padding-bottom: max(0.6rem, env(safe-area-inset-bottom));
  background: rgba(250,247,242,0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border);
  gap: 0.6rem;
}
.mobile-cta-bar .btn { flex: 1; padding-block: 0.8rem; font-size: 0.88rem; }

@media (max-width: 900px) {
  .nav-primary { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-actions .btn:not(.btn-whatsapp-icon) { display: none; }
  .mobile-cta-bar { display: flex; }
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* WhatsApp floating button (desktop) */
.wa-float {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(37,211,102,0.4);
  z-index: 80;
  animation: wa-breathe 3.2s ease-in-out infinite;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.wa-float:hover {
  animation-play-state: paused;
  transform: scale(1.12) rotate(-6deg);
  box-shadow: 0 16px 36px rgba(37,211,102,0.5);
}
.wa-float svg { width: 28px; height: 28px; }
@keyframes wa-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (max-width: 900px) { .wa-float { display: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4.5rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.hero-bg-shape {
  position: absolute; top: -10%; right: -12%; width: 55%; aspect-ratio: 1;
  background: radial-gradient(circle at 30% 30%, var(--color-amber-100), transparent 70%);
  border-radius: 50%; z-index: -1; pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: var(--space-5); }
.badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: 0.8rem; font-weight: 600; padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill); background: var(--color-navy-50); color: var(--brand-primary);
  border: 1px solid var(--color-navy-100);
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base), border-color var(--dur-base);
}
.badge:hover { transform: translateY(-2px); background: var(--brand-accent-soft); border-color: var(--color-sage-400); }
.badge svg { width: 1em; height: 1em; }
.hero h1 { margin-bottom: var(--space-5); }
.hero .lede { margin-bottom: var(--space-6); max-width: 46ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.hero-media { position: relative; perspective: 1200px; }
.hero-media .media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
  transform-style: preserve-3d;
  will-change: transform;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-stat-float {
  position: absolute; left: -1.5rem; bottom: 1.75rem;
  background: var(--bg-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 1rem 1.25rem; border: 1px solid var(--color-border);
  display: flex; align-items: center; gap: 0.85rem;
  max-width: 250px;
}
.hero-stat-float .num { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; color: var(--brand-cta-hover); line-height: 1; }
.hero-stat-float .label { font-size: 0.78rem; color: var(--text-secondary); font-weight: 500; }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; max-width: 420px; margin-inline: auto; width: 70%; }
  .hero-stat-float { left: 0.5rem; }
}
@media (max-width: 560px) {
  .hero-media { width: 88%; }
  .hero-badges { gap: 0.45rem; }
  .badge { font-size: 0.72rem; padding: 0.35rem 0.65rem; }
}

/* ---------- Photo collage (3-up gallery strip) ---------- */
.photo-collage {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: var(--space-5);
  margin-bottom: var(--space-8); align-items: end;
}
.photo-collage-item {
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md);
  aspect-ratio: 4/5;
}
.photo-collage-item.tall { aspect-ratio: 3/4; }
.photo-collage-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.photo-collage-item:hover img { transform: scale(1.06); }
@media (max-width: 720px) {
  .photo-collage { grid-template-columns: 1fr 1fr; }
  .photo-collage-item.tall { grid-column: 1 / -1; aspect-ratio: 16/9; }
}

/* ---------- Meal gallery (bento layout, real dish photos) ---------- */
.meal-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 210px;
  gap: var(--space-5);
}
.meal-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  isolation: isolate;
}
.meal-item.featured { grid-row: span 2; }
.meal-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.meal-item:hover img { transform: scale(1.07); }
.meal-item-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(30,28,24,0.75) 100%);
}
.meal-item-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1rem 1.1rem;
  color: #fdfbf5;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
}
@media (max-width: 860px) {
  .meal-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .meal-item.featured { grid-column: 1 / -1; grid-row: span 1; aspect-ratio: 16/9; height: auto; }
}
@media (max-width: 520px) {
  .meal-gallery { grid-template-columns: 1fr; }
  .meal-item.featured { aspect-ratio: 4/3; }
}

/* ---------- Full-bleed photo banner ---------- */
.photo-banner {
  position: relative;
  width: 100%;
  height: clamp(280px, 46vw, 520px);
  overflow: hidden;
  isolation: isolate;
}
.photo-banner img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  transform: scale(1.06);
  transition: transform 4s var(--ease-out);
}
.photo-banner:hover img { transform: scale(1.13); }
.photo-banner-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30,28,24,0.05) 0%, rgba(30,28,24,0.15) 55%, rgba(30,28,24,0.55) 100%);
}
.photo-banner-content {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding-block: clamp(1.5rem, 4vw, 3rem);
}
.photo-banner-content p {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  color: #fdfbf5;
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  max-width: 22ch;
  letter-spacing: -0.01em;
}

/* ---------- Stat strip ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.stat-item { text-align: center; cursor: default; }
.stat-item .num {
  display: inline-block;
  font-family: var(--font-mono); font-weight: 700; color: var(--color-amber-400);
  font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1; letter-spacing: -0.02em;
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base);
}
.stat-item:hover .num { transform: scale(1.08); color: #fdfbf5; }
.stat-item .label { margin-top: 0.6rem; font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.68); transition: color var(--dur-fast); }
.stat-item:hover .label { color: rgba(255,255,255,0.9); }
@media (max-width: 720px) { .stat-strip { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-8); } }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.card:hover { transform: translateY(-5px) rotate(-0.35deg); box-shadow: var(--shadow-md); border-color: transparent; }
.card-icon {
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-navy-50); color: var(--brand-primary);
  margin-bottom: var(--space-4);
  transition: transform var(--dur-base) var(--ease-out);
}
.card:hover .card-icon { transform: rotate(6deg) scale(1.08); }
.card-icon svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.card p { font-size: var(--fs-body-sm); }

.card-icon.amber { background: var(--color-amber-100); color: var(--color-amber-600); }
.card-icon.teal { background: var(--color-teal-100); color: var(--color-teal-600); }
.card-icon.coral { background: var(--color-coral-100); color: var(--color-coral-600); }

.program-card { position: relative; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.program-card .tag { align-self: flex-start; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-cta-hover); background: var(--color-amber-50); padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); margin-bottom: var(--space-4); }
.program-card ul { margin-top: var(--space-4); display: flex; flex-direction: column; gap: 0.5rem; }
.program-card li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: var(--fs-body-sm); color: var(--text-secondary); }
.program-card li svg { width: 1.1em; height: 1.1em; flex-shrink: 0; margin-top: 0.15em; color: var(--color-teal-600); }

/* Generic checklist inside a plain .card (e.g. Careers role requirements).
   Scoped to exclude .program-card, which already defines its own version
   with a different icon color further up this file — without this, bare
   inline <svg> checkmarks also fall back to their intrinsic size (~230px),
   blowing out the page's height. */
.card:not(.program-card) ul { margin-top: var(--space-4); display: flex; flex-direction: column; gap: 0.5rem; }
.card:not(.program-card) ul li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: var(--fs-body-sm); color: var(--text-secondary); }
.card:not(.program-card) ul li svg { width: 1.1em; height: 1.1em; flex-shrink: 0; margin-top: 0.15em; color: var(--color-sage-600); }
.program-card .btn { margin-top: var(--space-5); align-self: flex-start; }

/* ---------- Timetable (book-shelf styling) ---------- */
.timetable-wrap {
  overflow-x: auto; overflow-y: hidden; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--bg-surface);
  -webkit-overflow-scrolling: touch; padding: 0.5rem;
}
table.timetable { width: 100%; border-collapse: separate; border-spacing: 6px; min-width: 760px; }
table.timetable th, table.timetable td { padding: 0; text-align: left; font-size: 0.88rem; }
table.timetable thead th {
  background: none; color: var(--brand-primary); font-family: var(--font-mono);
  font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.5rem 0.75rem 0.75rem;
}
table.timetable td.time-col {
  font-family: var(--font-mono); font-weight: 600; color: var(--text-secondary);
  white-space: nowrap; font-size: 0.78rem; padding: 0 0.75rem;
}

/* Each subject cell renders as a small upright book resting in its slot:
   a spine highlight down the left edge, two faint page-edge lines near
   the right, a rounded top edge, and a soft shelf shadow underneath. */
.book-block {
  --book-bg: var(--color-ink-50);
  --book-spine: var(--color-ink-100);
  --book-text: var(--text-primary);
  display: flex; align-items: center;
  min-height: 64px; padding: 0.65rem 0.9rem 0.65rem 1.1rem;
  border-radius: 6px 10px 10px 6px;
  background: var(--book-bg);
  color: var(--book-text);
  font-weight: 700; font-size: 0.82rem; line-height: 1.25;
  position: relative;
  box-shadow:
    inset 4px 0 0 var(--book-spine),
    inset -4px 0 0 rgba(255,255,255,0.22),
    inset -8px 0 0 rgba(255,255,255,0.14),
    0 3px 0 rgba(30,28,24,0.06),
    0 8px 16px rgba(30,28,24,0.10);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  cursor: default;
}
.book-block:hover {
  transform: translateY(-5px) rotate(-0.6deg);
  box-shadow:
    inset 4px 0 0 var(--book-spine),
    inset -4px 0 0 rgba(255,255,255,0.22),
    inset -8px 0 0 rgba(255,255,255,0.14),
    0 3px 0 rgba(30,28,24,0.06),
    0 20px 30px rgba(30,28,24,0.20);
}
.book-block--neutral { --book-bg: #efe9dc; --book-spine: #e0d8c5; --book-text: var(--color-ink-700); }
.book-block--sage    { --book-bg: #5f7a5c; --book-spine: #7c9678; --book-text: #fdfbf5; }
.book-block--dusty    { --book-bg: #4f6b7d; --book-spine: #6d8a9c; --book-text: #fdfbf5; }
.book-block--clay    { --book-bg: #966239; --book-spine: #b17f52; --book-text: #fdfbf5; }
.book-block--blush   { --book-bg: #e8b79e; --book-spine: #f0cdb8; --book-text: var(--color-ink-900); }
.book-block--plum    { --book-bg: #6b4f65; --book-spine: #89697f; --book-text: #fdfbf5; }

.schedule-cards { display: none; }
@media (max-width: 720px) {
  .timetable-wrap { display: none; }
  .schedule-cards { display: block; }
}

.schedule-day-card { background: var(--bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-4); }
.schedule-day-card h4 { font-size: 1rem; margin-bottom: var(--space-3); color: var(--brand-accent); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.8rem; }
.schedule-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0; }
.schedule-row .time { font-family: var(--font-mono); font-weight: 600; color: var(--text-secondary); flex-shrink: 0; font-size: 0.78rem; width: 4.2rem; }
.schedule-row .book-block { flex: 1; min-height: 46px; padding: 0.5rem 0.8rem 0.5rem 1rem; font-size: 0.78rem; }

.book-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: var(--space-6); justify-content: center; }
.book-legend-item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--text-secondary); font-weight: 500; transition: color var(--dur-fast); cursor: default; }
.book-legend-item:hover { color: var(--text-primary); }
.book-legend-dot { width: 12px; height: 12px; border-radius: 4px; background: var(--book-bg); flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out); }
.book-legend-item:hover .book-legend-dot { transform: scale(1.35); }

/* ---------- Testimonials ---------- */
.testimonial-card {
  background: var(--bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); height: 100%;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.testimonial-card:hover { transform: translateY(-5px) rotate(0.35deg); box-shadow: var(--shadow-md); border-color: transparent; }
.testimonial-card:hover .avatar-badge { transform: scale(1.1); }
.testimonial-quote { font-size: var(--fs-body); color: var(--text-primary); flex-grow: 1; }
.testimonial-quote::before {
  content: "\201C"; font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 3rem; color: var(--brand-accent); line-height: 0.5; display: block; margin-bottom: 0.75rem;
}
.testimonial-author { display: flex; align-items: center; gap: 0.75rem; }
.avatar-badge {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-navy-100); color: var(--brand-primary);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem;
  transition: transform var(--dur-base) var(--ease-out);
}
.testimonial-author .name { font-weight: 600; font-size: 0.92rem; color: var(--text-primary); }
.testimonial-author .role { font-size: 0.8rem; color: var(--text-secondary); }

/* ---------- Forms ---------- */
.form-panel {
  background: var(--bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.75rem); box-shadow: var(--shadow-md);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.45rem; }
.field .req { color: var(--color-coral-600); }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field input[type="number"], .field select, .field textarea {
  width: 100%; padding: 0.85rem 1rem; min-height: 48px;
  border: 1.5px solid var(--color-border-2); border-radius: var(--radius-sm);
  background: var(--color-cream); font-size: 1rem; color: var(--text-primary);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background-color var(--dur-fast);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-sage-400); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-primary); background: var(--bg-surface);
  box-shadow: 0 0 0 4px var(--color-navy-100);
}
.field .hint { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.4rem; }

.checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.65rem; }
@media (max-width: 520px) { .checkbox-grid { grid-template-columns: 1fr; } }
.checkbox-item {
  display: flex; align-items: center; gap: 0.65rem;
  border: 1.5px solid var(--color-border-2); border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem; min-height: 48px; cursor: pointer;
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
  font-size: 0.9rem; font-weight: 500;
}
.checkbox-item:hover { border-color: var(--color-navy-500); }
.checkbox-item input { width: 19px; height: 19px; accent-color: var(--brand-primary); flex-shrink: 0; }
.checkbox-item:has(input:checked) { border-color: var(--brand-primary); background: var(--color-navy-50); }

.form-status { display: none; padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 500; margin-top: var(--space-4); }
.form-status.is-success { display: block; background: var(--color-teal-100); color: var(--color-teal-600); }
.form-status.is-error { display: block; background: var(--color-coral-100); color: var(--color-coral-600); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-navy-950);
  color: rgba(255,255,255,0.7);
  padding-top: var(--space-10);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Soft organic top edge instead of a hard rectangle, plus a faint oversized
   moose watermark — a quiet "handcrafted" signature rather than a flat block. */
.site-footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 40px;
  background: var(--bg-page);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V12c100-10 200 10 300 6s200-16 300-8 200 14 300 6 200-14 300-2v26Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V12c100-10 200 10 300 6s200-16 300-8 200 14 300 6 200-14 300-2v26Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  pointer-events: none;
}
.site-footer::after {
  content: "";
  position: absolute; right: clamp(-4rem, -2vw, 0rem); bottom: -3rem;
  width: clamp(220px, 26vw, 380px); aspect-ratio: 1;
  background-image: url("/assets/img/moose-logo.svg");
  background-repeat: no-repeat; background-size: contain;
  opacity: 0.05; filter: brightness(0) invert(1);
  pointer-events: none; z-index: 0;
}
.site-footer .container { position: relative; z-index: 1; }

.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-8); padding-bottom: var(--space-8); }
.footer-brand p { color: rgba(255,255,255,0.55); font-size: 0.9rem; margin-top: var(--space-3); max-width: 30ch; }
.footer-col h4 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-4); font-family: var(--font-mono); font-weight: 600;}
.footer-col ul { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col a {
  font-size: 0.9rem; color: rgba(255,255,255,0.68);
  background-image: linear-gradient(var(--color-sage-400), var(--color-sage-400));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: color var(--dur-base), background-size var(--dur-base) var(--ease-out);
  padding-bottom: 2px;
}
.footer-col a:hover { color: #fdfbf5; background-size: 100% 1px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.88rem; }
.footer-contact svg { width: 1.1em; height: 1.1em; flex-shrink: 0; margin-top: 0.15em; color: var(--color-sage-400); }
.footer-social { display: flex; gap: 0.6rem; margin-top: var(--space-4); }
.footer-social a {
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--dur-base), transform var(--dur-base) var(--ease-out), color var(--dur-base);
}
.footer-social a:hover { background: var(--color-sage-500); color: var(--color-navy-950); transform: translateY(-3px) rotate(-8deg); }
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-block: var(--space-5); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; font-size: 0.8rem; color: rgba(255,255,255,0.45); }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-6); }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; text-align: left; }
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 3.5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.breadcrumb { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: var(--space-4); font-weight: 500; }
.breadcrumb a {
  transition: color var(--dur-fast);
  background-image: linear-gradient(var(--brand-accent), var(--brand-accent));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  padding-bottom: 1px;
}
.breadcrumb a:hover { color: var(--brand-primary); background-size: 100% 1px; }
.breadcrumb svg { width: 0.9em; height: 0.9em; }

/* ---------- Utility ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.hero-anim { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.hero-anim.is-visible { opacity: 1; transform: translateY(0); }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.mt-0 { margin-top: 0 !important; }
.text-center { text-align: center; }
.divider { height: 1px; background: var(--color-border); border: none; margin-block: var(--space-8); }

.icon-tile-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.subject-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.1rem; border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border-2); font-weight: 600; font-size: 0.9rem;
  background: var(--bg-surface);
}
.subject-chip .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* ---------- Subject card (clickable, expands in place) ---------- */
.subject-card {
  padding: 0;
  cursor: pointer;
}
.subject-card:hover { transform: translateY(-5px) rotate(-0.35deg); box-shadow: var(--shadow-md); border-color: transparent; }
.subject-card-trigger {
  width: 100%;
  display: flex; align-items: flex-start; gap: 1rem;
  padding: var(--space-6);
  background: none; border: none; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
}
.subject-card-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-navy-50); color: var(--brand-primary);
  flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out);
}
.subject-card-icon svg { width: 22px; height: 22px; }
.subject-card:hover .subject-card-icon { transform: rotate(6deg) scale(1.08); }
.subject-card-icon.dusty { background: var(--color-dusty-100); color: var(--color-dusty-600); }
.subject-card-icon.clay  { background: var(--color-clay-100); color: var(--color-clay-600); }
.subject-card-icon.blush { background: var(--color-blush-100); color: var(--color-blush-600); }
.subject-card-icon.sage  { background: var(--color-sage-100); color: var(--color-sage-600); }
.subject-card-icon.plum  { background: var(--color-plum-100); color: var(--color-plum-600); }

.subject-card-head { flex: 1; min-width: 0; }
.subject-card-head h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.subject-card-head p { font-size: var(--fs-body-sm); }
.subject-card-chevron {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 0.3rem;
  color: var(--text-secondary);
  transition: transform var(--dur-base) var(--ease-out);
}
.subject-card[aria-expanded="true"] .subject-card-chevron { transform: rotate(180deg); }

.subject-card-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-in-out);
}
.subject-card-detail-inner {
  padding: 0 var(--space-6) var(--space-6) calc(44px + 1rem + var(--space-6));
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
}
@media (max-width: 560px) {
  .subject-card-detail-inner { padding-left: var(--space-6); }
}

.cta-banner {
  background: var(--brand-primary);
  border-radius: var(--radius-lg);
  padding: clamp(1.1rem, 4vw, 3.5rem);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  flex-wrap: nowrap;
  position: relative; overflow: hidden;
}
.cta-banner::after {
  content: ""; position: absolute; right: -8%; top: -30%; width: 45%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(140,168,136,0.28), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
/* The text block flexes/shrinks and wraps its own text internally, so the
   actions block never has to drop to a new row to make room — heading and
   buttons always stay on the same line, at every width. At desktop widths
   there's ample room so natural sizing (text takes remaining space, actions
   stays its own width) looks best; the 50/50 forced split below is scoped
   to the mobile breakpoint where space is actually tight enough to need it. */
.cta-banner > div:first-child { flex: 1 1 auto; min-width: 0; }
.cta-banner h2 { color: #fff; font-size: var(--fs-h3); margin-bottom: 0.5rem; }
.cta-banner p { color: rgba(255,255,255,0.7); }
.cta-banner-actions { display: flex; gap: 0.85rem; flex-wrap: nowrap; flex-shrink: 0; }

/* The banner itself is --brand-primary (ink-900) and .btn-primary is also
   ink-900 by default — on a light/cream page background that's fine, but
   inside this dark banner the button was rendering the same color as its
   own background, making it look broken/invisible. Give both buttons a
   scoped override here so they always read clearly against the dark card,
   regardless of what section wraps the banner. */
.cta-banner .btn-primary {
  background: var(--color-cream);
  color: var(--brand-primary);
  box-shadow: 0 12px 28px rgba(0,0,0,0.3);
}
.cta-banner .btn-primary::before {
  background: linear-gradient(115deg, transparent 20%, rgba(0,0,0,0.07) 45%, transparent 70%);
}
.cta-banner .btn-primary:hover {
  background: #fff;
  box-shadow: 0 16px 34px rgba(0,0,0,0.36);
}
.cta-banner .btn-outline {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}
.cta-banner .btn-outline:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.1);
}
.cta-banner .btn-whatsapp:hover { transform: translateY(-2px); }

@media (max-width: 720px) {
  /* Text and buttons stay side by side (row) at every width, per explicit
     preference — no stacking into separate rows. Everything just gets more
     compact: the description paragraph drops (heading alone is enough
     context once buttons are this close by), and both the heading and the
     buttons shrink so a 2-word label plus a longer one ("Email Your
     Resume") can still sit together without the row overflowing. */
  .cta-banner { padding: 1.1rem 1.25rem; gap: 0.75rem; border-radius: var(--radius-md); }
  .cta-banner > div:first-child { flex: 1 1 50%; }
  .cta-banner h2 { font-size: 1.05rem; margin-bottom: 0; line-height: 1.25; }
  .cta-banner p { display: none; }
  .cta-banner-actions { gap: 0.5rem; flex: 1 1 50%; justify-content: flex-end; }
  /* min-width:0 overrides the flex-item default of min-width:auto, which
     otherwise refuses to shrink below the button's intrinsic text width —
     that's what was forcing buttons onto their own row on narrow screens.
     white-space:normal lets long labels ("Email Your Resume") wrap to a
     second *line inside* the button instead of pushing the button itself
     to a new row or forcing the whole row to overflow. */
  .cta-banner-actions .btn {
    min-width: 0; white-space: normal; text-align: center;
    padding: 0.55rem 0.65rem; font-size: 0.76rem; gap: 0.3em;
  }
  .cta-banner-actions .btn svg { width: 0.95em; height: 0.95em; }
}
@media (max-width: 360px) {
  .cta-banner h2 { font-size: 0.95rem; }
  .cta-banner-actions .btn { font-size: 0.7rem; padding: 0.5rem 0.5rem; }
}

/* ---------- Split form layout (Register page) ---------- */
.grid-form-split { grid-template-columns: 1.6fr 1fr; gap: var(--space-8); align-items: flex-start; }
@media (max-width: 900px) { .grid-form-split { grid-template-columns: 1fr; } }

/* ---------- Responsive visibility utilities ---------- */
.show-mobile { display: none; }
@media (max-width: 720px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: revert; }
}