/* -----------------------------------------------------------
   Dawn Bell Academy • Main Styles (revamped, bold & warm)
   - Braver palette (sunny yellows + warm accents)
   - Softer “non-rigid” image shapes (squircles/blobs)
   - Fluid, modern typography (Poppins + Montserrat)
   - Lightbox contract fixed (hidden by default)
   ----------------------------------------------------------- */

/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap");

/* ---------- Design tokens ---------- */
:root{
  /* Core brand */
  --navy-950:#070b25;
  --navy-900:#0b1133;
  --navy-800:#151c45;

  /* Brave brights */
  --royal-600:#3246d8;
  --royal-500:#5b5cf6;
  --sun-500:#ffd24d;   /* bold yellow */
  --sun-600:#ffb800;   /* warm amber */
  --tangerine-500:#ff8a3d;
  --coral-500:#ff5f6d;
  --rose-500:#ff71b8;

  /* Accents */
  --cyan-400:#28d7ff;
  --lime-400:#a3f261;
  --mint-400:#50f0b8;

  /* Neutrals */
  --ink:#0d1117;
  --ink-700:#1f2937;
  --muted:#6b7280;
  --bg:#fcf5df;     /* off-white with warmth */
  --card:#ffb700;

  /* Effects */
  --radius:18px;
  --radius-lg:26px;
  --radius-xl:38px;
  --shadow:0 16px 40px rgba(0,0,0,.10);
  --shadow-strong:0 24px 60px rgba(0,0,0,.16);
  --glass:rgba(255,255,255,.08);

  /* Gradient presets */
  --grad-brand:linear-gradient(120deg,var(--royal-500),var(--sun-500));
  --grad-hero:
    radial-gradient(900px 380px at -10% -50%, rgba(40,215,255,.25), transparent 60%),
    radial-gradient(900px 380px at 110% 150%, rgba(255,184,0,.20), transparent 60%),
    linear-gradient(120deg,var(--navy-950),var(--navy-800));
  --grad-cta:linear-gradient(90deg,var(--sun-600),var(--coral-500));
  --grad-chip:linear-gradient(180deg,#fff5cc,#ffe6a3);
}

/* ---------- Reset & Typography ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:var(--ink);
  background:var(--bg);
  font:16px/1.7 "Poppins",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3{
  letter-spacing:.2px;
  font-family:"Montserrat","Poppins",system-ui,sans-serif;
  line-height:1.15;
  margin:0 0 .4em;
}
h1{font-size:clamp(28px,3.2vw,46px);font-weight:800}
h2{font-size:clamp(22px,2.4vw,34px);font-weight:800}
h3{font-size:clamp(18px,1.6vw,22px);font-weight:700}

.lede{font-size:clamp(1.02rem,1.2vw,1.15rem);color:var(--ink-700)}
strong{font-weight:700}

/* Always hide [hidden] no matter what */
[hidden]{display:none !important}

/* ---------- Lightbox contract (hidden by default) ---------- */
.lightbox{display:none}
.lightbox.open{display:grid}
.lightbox{position:fixed;inset:0;background:rgba(4,6,20,.86);place-items:center;z-index:1000}
.lightbox img{max-width:92vw;max-height:90vh;border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.6)}
.lightbox__close{position:absolute;top:16px;right:20px;font-size:36px;background:transparent;border:0;color:#fff;cursor:pointer;z-index:2}

/* ---------- Announcement bar ---------- */
.announce{
  background:linear-gradient(90deg,var(--sun-600),var(--royal-500));
  color:#111;
  text-align:center;
  padding:8px 12px;
  font-weight:700;
}
.announce a{color:#111;text-decoration:underline}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;
  background:rgba(11,17,51,.85);
  backdrop-filter:blur(8px);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 24px rgba(0,0,0,.15);
}
.brand{display:flex;gap:12px;align-items:center;color:#fff;text-decoration:none}
.brand img{width:44px;height:44px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25))}
.brand__text{display:flex;flex-direction:column}
.brand__text strong{font-weight:800;letter-spacing:.3px}
.brand__text em{font-style:normal;font-weight:600;opacity:.85;font-size:.86rem}

.nav-toggle{
  display:none;background:transparent;
  border:1px solid rgba(255,255,255,.35);
  color:#ffa600;padding:8px 12px;border-radius:12px
}

.site-nav{display:flex;gap:18px}
.site-nav a{
  color:#f3f4ff;text-decoration:none;padding:8px 12px;border-radius:999px;
  transition:all .18s ease;
}
.site-nav a:hover,.site-nav a.active{
  background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
  color:#fff;
  box-shadow:0 8px 20px rgba(50,70,216,.25) inset, 0 2px 10px rgba(0,0,0,.15);
}

.site-nav a i { margin-right: 8px; vertical-align: -2px; }


/* ---------- Hero ---------- */
.hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;
  padding:68px 22px 56px;
  background:var(--grad-hero);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:auto auto -120px -120px;width:340px;height:340px;
  background:radial-gradient(closest-side, rgba(255,210,77,.55), transparent);
  filter:blur(16px);opacity:.85;pointer-events:none;
}
.hero__content p{max-width:62ch;opacity:.95}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}

.hero__figure{margin:0}
.hero__image{
  width:100%;
  /* squircle-ish corners for non-rigid feel */
  border-radius:38px 60px 28px 60px / 32px 56px 40px 24px;
  box-shadow:var(--shadow-strong);
  object-fit:cover;
  animation:float 6s ease-in-out infinite;
  outline:2px solid rgba(255,255,255,.18);
  outline-offset:-6px;
}
.hero-stats{display:flex;gap:22px;list-style:none;padding:12px 0 0;margin:0;opacity:.95}
.hero-stats strong{font-size:clamp(1.25rem,2.4vw,1.8rem)}
.glow{
  background:linear-gradient(90deg,#fff, #ffe08a 45%, #cfd2ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 18px rgba(255,210,77,.35);
}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------- Highlights / Cards ---------- */
.highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:28px 22px}
.highlight-card{
  background:var(--card);
  border:1px solid rgba(255,184,0,.25);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.highlight-card::before{
  content:"";position:absolute;inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(600px 200px at 0% 0%, rgba(255,210,77,.16), transparent 60%),
    radial-gradient(600px 200px at 100% 120%, rgba(91,92,246,.12), transparent 60%);
}
.highlight-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,184,0,.14),transparent);
  transform:translateX(-100%);animation:shimmer 6s linear infinite;
}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ---------- Gallery ---------- */
.gallery{padding:28px 22px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery-grid img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  /* softer shape */
  border-radius:28px 52px 24px 52px / 26px 48px 34px 22px;
  cursor:zoom-in;
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
  box-shadow:0 2px 12px rgba(0,0,0,.10);
  outline:1px solid rgba(255,210,77,.25);
  outline-offset:-4px;
}
.gallery-grid img:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:0 16px 28px rgba(0,0,0,.18);
  filter:saturate(1.05);
}

/* ---------- CTA banner ---------- */
.cta-banner{
  margin:30px 22px;padding:26px;border-radius:30px;
  background:var(--grad-cta);
  color:#111;text-align:center;
  box-shadow:var(--shadow-strong);
}
.cta-banner h2{color:#111;margin-bottom:.3em}

/* ---------- Page general ---------- */
.page{padding:38px 22px;max-width:1120px;margin:0 auto}
.page-head .lede{color:var(--muted)}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center;padding:28px 0}
.split.reverse{grid-template-columns:.9fr 1.1fr}
.split.reverse .split__copy{order:2}
.split.reverse .split__image{order:1}
.split__copy h2{font-size:clamp(24px,3.2vw,40px);margin:0 0 10px;color:var(--navy-900)}
.split.dark{
  background:linear-gradient(180deg, rgba(11,17,51,.95), rgba(21,28,69,.92));
  color:#fff;border-radius:26px;padding:34px 22px;
  box-shadow:0 14px 48px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
}
.split__image{
  width:100%;min-height:280px;
  /* organic container for bg images */
  border-radius:36px 56px 26px 46px / 30px 44px 40px 24px;
  background:#e5e7eb;box-shadow:var(--shadow);background-size:cover;background-position:center;position:relative;
}
.split__image::after{
  content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px rgba(255,255,255,.22) inset
}

/* ---------- Values & Bio ---------- */
.values{
  padding:28px 22px;background:linear-gradient(180deg,#0b1133,#121a46);
  color:#fff;border-radius:28px;margin:28px 0;
  box-shadow:0 14px 48px rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
}
.values h2{margin-top:0}
.pill-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:12px 0 0}
.pill-list li{
  padding:8px 12px;border-radius:999px;
  background:var(--grad-chip);
  border:1px solid rgba(139,92,0,.18);
  color:#1e1b4b;
  box-shadow:0 4px 14px rgba(255,184,0,.18);
}

.bio{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start;margin:26px 0}
.bio__image{
  min-height:360px;
  border-radius:38px 60px 30px 52px / 34px 54px 46px 28px;
  background:#e5e7eb;box-shadow:var(--shadow);background-size:cover;background-position:center;
  outline:2px solid rgba(255,255,255,.18);
  outline-offset:-6px;
}

/* ---------- Campus chips ---------- */
.campus-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:10px 0}
.campus-list li{
  border:1px solid rgba(49,46,129,.25);
  background:linear-gradient(180deg,#eef2ff,#e0e7ff);
  color:#1e1b4b;border-radius:999px;padding:8px 12px
}

/* ---------- Forms ---------- */
.form{
  background:#fff;border:1px solid #f0f2f8;border-radius:26px;padding:20px;box-shadow:var(--shadow);
}
.glow-panel{box-shadow:0 0 0 1px rgba(255,184,0,.35), 0 0 24px rgba(255,184,0,.18)}
.field{display:flex;flex-direction:column;margin-bottom:14px}
.field label{font-weight:700}
.field input,.field textarea,.field select{
  padding:12px 14px;border:1px solid #dfe3ea;border-radius:12px;background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:#f7b500;
  box-shadow:0 0 0 3px rgba(255,184,0,.25);
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---------- Tables ---------- */
.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden}
.table th,.table td{padding:12px;border-bottom:1px solid #eef0f5}
.table thead th{background:#fff7d6;color:#3a2c00}
.table tbody tr:nth-child(odd){background:#fffef7}

/* ---------- Contact card + mini gallery ---------- */
.contact-card{
  border:1px solid #eef0f5;border-radius:26px;padding:18px;background:#fff;box-shadow:var(--shadow)
}
.mini-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.mini-gallery img{
  width:100%;height:90px;object-fit:cover;border-radius:16px;cursor:zoom-in;
  outline:1px solid rgba(255,210,77,.25);outline-offset:-3px;
}

/* ---------- Footer (high-contrast, header-like) ---------- */
.site-footer{
  margin-top:28px;
  background: linear-gradient(180deg, rgba(11,17,51,.96), rgba(21,28,69,.94));
  color:#e5e7eb; /* light text for contrast */
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 8px 24px rgba(255,184,0,.06);
}
.site-footer a{
  color:#f3f4ff;
  text-decoration:none;
}
.site-footer a:hover{
  color:#fff;
  text-decoration:underline;
}
.site-footer h4{
  margin:0 0 .5rem;
  color:#ffffff;
  font-weight:800;
}
.site-footer p{
  color:#d1d5db;
  margin:.4rem 0 0;
}
.footer-gallery{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 12px 0
}
.footer-gallery img{
  width:100%;height:80px;object-fit:cover;border-radius:14px;opacity:.98
}
.footer-cols{
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;padding:22px
}
.footer-cols ul{
  list-style:none;padding:0;margin:.2rem 0 0;
}
.footer-cols li{
  margin:.35rem 0;
}
.footer-cols li i{
  margin-right:8px; vertical-align:-2px; color:#ffd24d; /* subtle brand accent */
}
.legal{
  text-align:center;color:#cbd5e1;padding:12px;border-top:1px solid rgba(255,255,255,.06)
}


/* ---------- Buttons ---------- */
.btn{
  display:inline-block;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:800;
  transition:transform .12s ease, box-shadow .2s ease, filter .15s ease;
}
.btn--cta{
  background:linear-gradient(90deg,var(--sun-600),var(--royal-500));
  color:#111;box-shadow:0 12px 26px rgba(91,92,246,.28), 0 4px 12px rgba(255,184,0,.32)
}
.btn--cta:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn--ghost{border:2px solid #000000;color:#ffffff;background:rgba(255, 209, 26, 0.96) !important;}
.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,184,0,.45)}
  70%{box-shadow:0 0 0 18px rgba(255,184,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,184,0,0)}
}

/* ---------- Scroll reveal (styles complement existing JS) ---------- */
.reveal{
  transform:translateY(14px);
  opacity:.001;
  transition:transform .5s ease, opacity .6s ease;
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero{grid-template-columns:1fr;padding:58px 20px}
}

@media (max-width:980px){
  .hero,.split,.bio{grid-template-columns:1fr}
  .cards,.highlights,.gallery-grid{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}

  .nav-toggle{display:inline-flex}
  .site-nav{
    display:none;flex-direction:column;position:absolute;right:14px;top:112px;
    background:rgba(11,17,51,.96);border:1px solid rgba(255,255,255,.18);
    border-radius:16px;padding:10px;box-shadow:0 16px 40px rgba(0,0,0,.35)
  }
  .site-nav.open{display:flex}
}

/* ---------- Helpful utilities ---------- */
.text-sun{color:var(--sun-600)}
.bg-sun{background:var(--sun-500)}
.stroke-sun{outline:2px solid rgba(255,184,0,.35);outline-offset:-6px}


/* ====== Contrast + media tweaks (patch) ====== */

/* 1) Make lede readable on dark sections */
.values.dark .lede,
.split.dark .lede,
.site-footer .lede { color:#e5e7eb !important; }

/* 2) High-contrast alternating rows (use .table-alt next to .table) */
.table-alt { border-color: rgba(255,255,255,.14); }
.table-alt thead th{
  background:#fff7d6; color:#3a2c00; font-weight:800;
}
.table-alt tbody tr:nth-child(odd){
  background:#0f163a; color:#f3f4ff;
}
.table-alt tbody tr:nth-child(even){
  background:#fffef7; color:#0f122b;
}
.values.dark .table-alt tbody tr:nth-child(even){
  /* on dark containers ensure borders still visible */
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* 3) Icon spacing for links in tables (optional nicety) */
.table-alt td i { margin-right:6px; vertical-align:-2px; }

/* 4) Friendlier gallery/mini-gallery sizing (reduce forced crop) */
.gallery-grid img{ aspect-ratio: 4/3; object-fit: cover; }
.mini-gallery img{
  height:auto !important; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius:16px;
}

/* 5) Utility: round portrait (use on the director photo) */
.round-portrait{
  width:280px; height:280px; object-fit:cover; border-radius:50%;
  box-shadow:0 16px 40px rgba(0,0,0,.16);
  outline:3px solid rgba(255,255,255,.25); outline-offset:-6px;
}
@media (max-width:720px){ .round-portrait{ width:200px; height:200px; } }


/* ===== Smooth reveal animations ===== */
@media (prefers-reduced-motion: no-preference) {
  .reveal-up {
    opacity: 0;
    transform: translateY(16px);
    will-change: transform, opacity;
    transition:
      opacity .6s cubic-bezier(.22,.61,.36,1),
      transform .6s cubic-bezier(.22,.61,.36,1);
  }
  .reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* simple fade */
  .reveal-fade { opacity: 0; transition: opacity .6s ease }
  .reveal-fade.is-visible { opacity: 1 }

  /* Stagger container: children animate with delays */
  .stagger > * { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease }
  .stagger.is-visible > * { opacity: 1; transform: translateY(0) }
  .stagger.is-visible > * { transition-delay: var(--delay, 0ms) }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-fade, .stagger > * { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* =========================
   Footer (fixed-image set)
   ========================= */
.site-footer{
  margin-top:28px;
  background: linear-gradient(180deg, rgba(11,17,51,.96), rgba(21,28,69,.94));
  color:#e5e7eb;
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 8px 24px rgba(255,184,0,.06);
}
.site-footer a{ color:#f3f4ff; text-decoration:none }
.site-footer a:hover{ color:#fff; text-decoration:underline }
.site-footer h4{ margin:0 0 .5rem; color:#fff; font-weight:800 }
.site-footer p{ color:#d1d5db; margin:.4rem 0 0 }
.footer-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:12px 12px 0 }
.footer-gallery img{ width:100%; height:80px; object-fit:cover; border-radius:14px; opacity:.98 }
.footer-cols{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:18px; padding:22px }
.footer-cols ul{ list-style:none; padding:0; margin:.2rem 0 0 }
.footer-cols li{ margin:.35rem 0 }
.footer-cols li i{ margin-right:8px; vertical-align:-2px; color:#ffd24d }
.legal{ text-align:center; color:#cbd5e1; padding:12px; border-top:1px solid rgba(255,255,255,.06) }

/* =========================
   Media cropping refinements
   ========================= */

/* Default: gentle crop (keeps 4:3 but not too tight) */
.gallery-grid img{
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 45%; /* avoid cutting foreheads on portraits */
}

/* Mini galleries: same philosophy, but allow auto height if desired */
.mini-gallery img{
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
}

/* Opt-in "loose" mode for any gallery that shouldn't be cropped:
   add data-loose to the container (e.g., <div class="gallery-grid" data-loose>)
*/
.gallery-grid[data-loose] img,
.mini-gallery[data-loose] img{
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
  background:#0b11330d; /* subtle backdrop so letterboxing looks intentional */
  border-radius: 16px;
}

/* Make lede readable on dark blocks */
.values.dark .lede,
.split.dark .lede,
.site-footer .lede{ color:#e5e7eb !important }

/* Alt table rows: keep contrast even inside dark sections */
.table-alt thead th{ background:#fff7d6; color:#3a2c00; font-weight:800 }
.table-alt tbody tr:nth-child(odd){ background:#0f163a; color:#f3f4ff }
.table-alt tbody tr:nth-child(even){ background:#fffef7; color:#0f122b }
.values.dark .table-alt tbody tr:nth-child(even){ border-bottom:1px solid rgba(255,255,255,.06) }

/* Smooth reveal (kept for completeness) */
@media (prefers-reduced-motion: no-preference){
  .reveal-up{ opacity:0; transform:translateY(16px); will-change:transform,opacity;
    transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1) }
  .reveal-up.is-visible{ opacity:1; transform:translateY(0) }
  .reveal-fade{ opacity:0; transition:opacity .6s ease }
  .reveal-fade.is-visible{ opacity:1 }
  .stagger > *{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease }
  .stagger.is-visible > *{ opacity:1; transform:none }
  .stagger.is-visible > *{ transition-delay: var(--delay, 0ms) }
}
@media (prefers-reduced-motion: reduce){
  .reveal-up,.reveal-fade,.stagger > *{ transition:none !important; opacity:1 !important; transform:none !important }
}

/* Utility: circular portraits (director) */
.round-portrait{ width:280px; height:280px; object-fit:cover; border-radius:50%;
  box-shadow:0 16px 40px rgba(0,0,0,.16); outline:3px solid rgba(255,255,255,.25); outline-offset:-6px }
@media (max-width:720px){ .round-portrait{ width:200px; height:200px } }


/* Footer gallery: bias crop toward the upper part, not center */
.footer-gallery img{
  object-fit: cover;          /* keep edge-to-edge fill */
  object-position: 50% 18%;   /* center horizontally, show more of the top vertically */
}

/* Slightly taller thumbs on wide screens (keeps faces clearer) */
@media (min-width: 1200px){
  .footer-gallery img{ height: 96px; }
}

/* Optional fine-tune helpers (apply to individual <img> if needed)
   <img class="focus-top" ...> or <img class="focus-upper" ...>
*/
.footer-gallery img.focus-top{   object-position: 40% 10%;  }
.footer-gallery img.focus-upper{ object-position: 50% 14%; }


/* === DBA dropdown - unified (closed-by-default, solid, mobile-safe) === */

/* Base & layout guards (do NOT force a single row) */
.site-header,
.site-header .site-nav { overflow: visible !important; }

/* allow 2 rows but DON'T control visibility here */
.site-header .site-nav {
  gap: 10px;
  flex-wrap: wrap;          /* can wrap to a second row on desktop */
  overflow-x: auto;
  scrollbar-width: thin;
}


.site-header .site-nav .btn.btn--cta { white-space: nowrap; }

@media (max-width:1160px) and (min-width:981px){
  .site-header .site-nav { gap:12px; }
  .site-header .site-nav a { padding:6px 10px; }
}

/* Dropdown shell + toggle */
.nav-dropdown { position: relative; display: inline-block; }

.nav-dropdown__toggle{
  display: inline-flex; align-items: center; gap: .4rem;
  border: 0; font: inherit; cursor: pointer; padding: .5rem .75rem;
  background: transparent; color: #949bef;  /* legible on dark header */
}

/* Menu - CLOSED by default; OPEN only with .is-open */
.nav-dropdown__menu{
  display: none;                                /* critical: closed by default */
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 5000;
  min-width: 260px;
  background: var(--navy-900); color: #cfd2f8;
  border: 1px solid #303a78; border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  padding: .5rem; gap: .25rem;

  /* Tall lists scroll independently */
  max-height: min(60vh, 520px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.nav-dropdown.is-open > .nav-dropdown__menu{ display: grid; }

/* Items */
.nav-dropdown__menu a{
  color: #cfd2f8 !important;
  border: 0 !important; box-shadow: none !important;
  display: grid; grid-template-columns: 1.2rem auto; align-items: center; gap: .5rem;
  padding: .5rem .6rem; border-radius: 8px; text-decoration: none;
}
.nav-dropdown__menu a:hover,
.nav-dropdown__menu a:focus{ background: #1b2250; outline: 0; }

/* Mobile: menu lives inside the drawer and can scroll */
@media (max-width:980px){
  .site-header .site-nav{
    /* ensure the drawer itself can get tall and scroll */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .site-header .nav-dropdown__menu{
    position: static; box-shadow: none; border: 0;
    background: var(--navy-900); color: #cfd2f8;
    padding-left: 1rem;
    max-height: 45vh;                 /* cap just on mobile */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .site-header .nav-dropdown__menu a{ background:#1b2250; }
}

/* Attribute guard (plays nice with JS setting menu.hidden = true/false) */
.nav-dropdown__menu[hidden]{ display: none !important; }


/* =========================================================
   DBA PATCH — Policies dropdown + mobile responsiveness
   Append to the end of main.css
   ========================================================= */

/* 0) Global guard: never allow horizontal overflow site-wide */
html, body { overflow-x: hidden; }

/* 1) Desktop: hide Policies menu scrollbars (still scrollable) */
@media (min-width: 981px) {
  .nav-dropdown__menu {
    scrollbar-width: none;          /* Firefox */
  }
  .nav-dropdown__menu::-webkit-scrollbar {
    width: 0 !important; height: 0 !important; /* WebKit/Chromium */
  }
}

/* 2) Keep the dropdown inside the viewport on desktop
   - no horizontal nudge, clamp width, and avoid off-screen overflow */
@media (min-width: 981px) {
  .nav-dropdown { max-width: 100%; }
  .nav-dropdown__menu {
    left: 0; right: auto;
    max-width: min(92vw, 440px);
    contain: layout paint;           /* isolate so it doesn’t affect overall width */
  }
}

/* 3) Mobile drawer: keep fully in-viewport and prevent rightward overflow */
@media (max-width: 980px) {
  .site-header { overflow: visible; }

  .site-header .site-nav {
    position: fixed;
    top: calc( var(--header-height, 72px) + 40px ); /* safe default if var not set */
    left: 12px;
    right: 12px;            /* was right:14px (could cause 1–2px overflow with borders) */
    margin: 0;
    width: auto;            /* don’t exceed viewport */
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    border-radius: 16px;
    overflow-x: hidden;     /* guard long labels */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Keep link text from forcing the drawer wider */
  .site-header .site-nav a,
  .site-header .site-nav .btn {
    max-width: 100%;
    white-space: normal;      /* allow wrapping on small screens */
    word-break: break-word;   /* break very long words/URLs */
  }

  /* Policies menu lives inside the drawer on mobile and should not cause extra width */
  .site-header .nav-dropdown__menu {
    position: static;
    width: 100%;
    max-width: 100%;
    border: 0;
    box-shadow: none;
    padding-left: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .site-header .nav-dropdown__menu a {
    width: 100%;
  }
}

/* 4) Extra-narrow devices (≤360px): compaction to avoid horizontal jiggle */
@media (max-width: 360px) {
  .brand img { width: 36px; height: 36px; }
  .brand__text em.tagline { display: none; } /* free up a few chars of space */
  .site-header { padding: 10px 14px; }
  .nav-toggle { padding: 6px 10px; border-radius: 10px; }

  .hero { padding: 44px 16px; }
  .cta-row .btn { padding: 10px 14px; }

  .page { padding: 26px 16px; }
  .table th, .table td { padding: 10px; }
}

/* 5) Prevent any header/nav child from creating layout overflow */
.site-header * { max-width: 100%; }

/* 6) Safety: long policy labels/icons never push width */
.nav-dropdown__toggle,
.nav-dropdown__menu a {
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}

/* 7) Ensure the desktop nav can wrap to a second row without causing horizontal scroll */
@media (min-width: 981px) {
  .site-header .site-nav {
    flex-wrap: wrap;
    overflow: visible;   /* no scrollbars on desktop in the main nav row */
  }
}

/* 8) Optional: tiny tweak so focus outlines don’t add visual width on mobile */
@media (max-width: 980px) {
  .site-header .site-nav a:focus-visible,
  .site-header .nav-dropdown__toggle:focus-visible,
  .site-header .nav-dropdown__menu a:focus-visible {
    outline-offset: 2px;
  }
}


/* =========================================================
   DBA PATCH — No-overflow responsive guards (forms + UI)
   Append to end of main.css
   ========================================================= */

/* 0) Universal: nothing should force the page wider than 100vw */
* { max-width: 100%; }
img, video, canvas, svg { max-width: 100%; height: auto; }

/* Inputs/selects can shrink inside grids without bursting columns */
.field input,
.field select,
.field textarea { width: 100%; min-width: 0; }

/* 1) Form grids — auto-fit columns that collapse early */
.form .grid3,
.form .grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

/* Extra-early collapse for ultra narrow devices */
@media (max-width: 420px) {
  .form .grid3,
  .form .grid2 { grid-template-columns: 1fr; }
}

/* 2) Row action button groups — stack on phones */
.row-actions,
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 540px) {
  .row-actions,
  .cta-row { flex-direction: column; align-items: stretch; }
  .row-actions .btn,
  .cta-row .btn { width: 100%; }
}

/* 3) Hero chips & stats wrap instead of pushing width */
.hero-stats { flex-wrap: wrap; }

/* 4) Header: portal/payment buttons never extend the drawer.
      - On desktop they behave as before.
      - On mobile the drawer is fixed in-viewport: make buttons full-width. */
@media (max-width: 980px) {
  .site-header .site-nav .btn.btn--cta {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* 5) Policies dropdown & nav items — long labels wrap safely */
.nav-dropdown__toggle,
.nav-dropdown__menu a,
.site-header .site-nav a,
.site-header .site-nav .btn {
  white-space: normal;
  word-break: break-word;
}

/* 6) Tables — make them scroll inside their own container (not page) */
.table {
  display: block;               /* keeps borders/striping; allows inner scroll */
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table thead, .table tbody, .table tr { width: 100%; }
.table th, .table td { white-space: nowrap; } /* keep cells tidy in narrow scroll */
@media (max-width: 420px) {
  .table th, .table td { padding: 10px; }
}

/* 7) Footer columns — collapse earlier to prevent jiggle */
@media (max-width: 820px) {
  .footer-cols { grid-template-columns: 1fr; }
}

/* 8) Gallery / mini-gallery: never exceed container; allow wrap on tiny screens */
.gallery-grid,
.mini-gallery { width: 100%; }

/* 9) Safety for any horizontal lists of pills/chips */
.pill-list,
.campus-list { flex-wrap: wrap; }

/* 10) Form labels/messages don’t push width with long words */
.field label,
.help,
.muted { word-break: break-word; }

/* 11) Dropdown menu: hide desktop scrollbar, keep inner scroll (already added),
      and clamp width to viewport to avoid right bleed on edge cases */
@media (min-width: 981px) {
  .nav-dropdown__menu {
    max-width: min(92vw, 460px);
    scrollbar-width: none;
  }
  .nav-dropdown__menu::-webkit-scrollbar { width:0; height:0; }
}

/* 12) Final guard: mobile drawer can’t exceed viewport width */
@media (max-width: 980px) {
  .site-header .site-nav {
    left: 12px; right: 12px;
    max-width: calc(100vw - 24px);
    overflow-x: hidden;
  }
}