/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
  --bg:        #F8F3E9;   /* warm ivory paper */
  --surface:   #F0E8D6;   /* card / strip surface — one step deeper than bg */
  --surface-2: #E8DDC4;   /* raised / hover surface — deeper still */
  --text:      #17213A;   /* deep navy, pulled directly from the logo ink — doubles as primary text color for brand cohesion */
  --muted:     #756B58;   /* warm grey for secondary text */
  --gold:      #B6842C;   /* deepened gold — legible as text/accent on a light background */
  --gold-bright: #E2A83F; /* brighter gold — reserved for hover states and small highlights */
  --gold-dim:  #8A6222;   /* deepest gold — subtle borders and low-emphasis accents */
  --indigo:    #3c5a80;   /* dusk-sky secondary accent, used in the hero glow */
  --line:      rgba(23, 33, 58, 0.12);

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Inter", -apple-system, sans-serif;
  --font-label:   "Space Grotesk", var(--font-body);

  --radius: 14px;
  --container: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ============================================
   FLOATING NAV
   ============================================ */
.nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: min(92%, 760px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 20px 10px 12px;
  background: rgba(248, 243, 233, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* Logo + wordmark, grouped */
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* allow ellipsis/truncation on very narrow screens if ever needed */
}

/* Small light "seal" behind the mark — the logo artwork is dark navy on a
   transparent background, so it needs a light plate to stay legible against
   the dark, translucent nav bar. The circular shape echoes the nav's own
   pill radius rather than introducing a new shape language. */
.nav__logo-plate {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav__brand-text {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.nav__brand-text span { color: var(--gold); margin-left: 4px; }

.nav__links {
  display: flex;
  gap: 22px;
  font-size: 14px;
  color: var(--muted);
}
.nav__links a { text-decoration: none; transition: color 0.2s ease; }
.nav__links a:hover { color: var(--text); }

.nav__cta {
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 600;
  background: var(--gold);
  color: var(--text);
  border: none;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.nav__cta:hover { background: var(--gold-bright); transform: translateY(-1px); }

@media (max-width: 640px) {
  .nav__links { display: none; }
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 20px 100px;
  /* Photo layer: assets/hero-bg.jpg. A light cream "wash" gradient sits on
     top of it so hero text (now dark navy) stays readable no matter how
     bright or busy the photo is. The three radial glows stay underneath
     everything as a fallback — if hero-bg.jpg is ever missing, the browser
     just skips that one layer and this soft gradient backdrop still shows;
     the hero never breaks or goes blank. */
  background:
    linear-gradient(180deg, rgba(248,243,233,0.72) 0%, rgba(248,243,233,0.85) 55%, var(--bg) 97%),
    url("assets/hero-bg.jpg") center / cover no-repeat,
    radial-gradient(ellipse 900px 560px at 12% 15%, rgba(182,132,44,0.16), transparent 60%),
    radial-gradient(ellipse 800px 640px at 88% 10%, rgba(60,90,128,0.14), transparent 55%),
    radial-gradient(ellipse 1000px 700px at 50% 105%, rgba(182,132,44,0.10), transparent 60%),
    var(--bg);
  text-align: center;
  overflow: hidden;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 780px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--bg);
  background: var(--text);
  border: 1px solid var(--text);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 28px;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  text-wrap: balance;
}

.hero__sub {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto 36px;
}

.hero__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  font-family: var(--font-label);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 26px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--gold);
  color: var(--text);
}
.btn--primary:hover { background: var(--gold-bright); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: rgba(23, 33, 58, 0.3);
}
.btn--ghost:hover { border-color: var(--text); background: rgba(23, 33, 58, 0.06); }

.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.scroll-cue span {
  width: 1px;
  height: 26px;
  background: linear-gradient(var(--gold), transparent);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ============================================
   STATS STRIP
   ============================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat {
  padding: 40px 20px;
  text-align: center;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: none; }

.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--gold);
  font-weight: 600;
}
.stat span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 720px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat { border-bottom: 1px solid var(--line); }
}

/* ============================================
   SECTION / LABEL DEFAULTS
   ============================================ */
.section {
  max-width: var(--container);
  margin: 0 auto;
  padding: 100px 24px;
}

.label {
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 14px;
}
.label--center { text-align: center; }

.section__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  text-align: center;
  margin: 0 0 56px;
}

/* ============================================
   ABOUT
   ============================================ */
.about {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  align-items: start;
}
.about__mark {
  font-family: var(--font-display);
  font-size: 8rem;
  line-height: 0.7;
  color: var(--gold-dim);
  opacity: 0.5;
}
.about__body h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin: 0 0 18px;
  max-width: 14ch;
}
.about__body p {
  max-width: 60ch;
  color: var(--muted);
  font-size: 1.05rem;
}

@media (max-width: 680px) {
  .about { grid-template-columns: 1fr; }
  .about__mark { display: none; }
}

/* ============================================
   GALLERY — the 2 sample photos
   Filenames: assets/gallery-1.jpg, assets/gallery-2.jpg
   ============================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}
.gallery-item {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface); /* shows as a soft empty card if a photo is missing, never a broken-image icon */
}
.gallery-item img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
}

@media (max-width: 720px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item img { height: 260px; }
}

/* ============================================
   PROGRAM CARDS
   ============================================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 22px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.card:hover,
.card:focus-visible {
  border-color: var(--gold-dim);
  background: var(--surface-2);
  transform: translateY(-4px);
}
.card:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.card__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(182, 132, 44, 0.12);
  color: var(--gold);
  font-size: 18px;
  margin-bottom: 18px;
}

.card h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 8px;
}
.card p {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0;
}
.card__cta {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold);
}

@media (max-width: 900px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .card-grid { grid-template-columns: 1fr; }
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: start;
  text-align: left;
  margin-top: 24px;
}

.testimonial-item blockquote {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 16px;
  color: var(--text);
}
.testimonial-item cite {
  font-style: normal;
  color: var(--muted);
  font-size: 0.85rem;
  display: block;
}

@media (max-width: 900px) {
  .testimonial-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ============================================
   FOOTER
   ============================================ */
footer {
  border-top: 1px solid var(--line);
  padding: 64px 24px 32px;
  background: var(--surface);
}

.footer__top {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: start;
  text-align: left;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}

/* Same light-plate treatment as the nav mark: the full lockup (icon +
   wordmark + tagline) is also dark artwork on a transparent background,
   so it gets a cream card to sit on rather than disappearing into the
   dark footer. Reads like an institutional letterhead / seal. */
.footer__logo-plate {
  display: inline-block;
}
.footer__logo {
  height: 70px;
  width: auto;
}

.footer__subline {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--muted);
}

.footer__payments-block .payment-desc {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 14px;
}

.payment-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.payment-bank {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}
.payment-number {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--gold);
}
.payment-bankname {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--muted);
}

.footer__bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding-top: 24px;
  text-align: center;
}
.footer__bottom p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

@media (max-width: 720px) {
  .footer__top { grid-template-columns: 1fr; gap: 36px; }
}

/* ============================================
   MODAL (shared by application-form + program-detail modals)
   ============================================ */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(10, 8, 7, 0.78);
  backdrop-filter: blur(4px);
}
.modal.is-open { display: flex; align-items: center; justify-content: center; }

.modal-content {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  width: 90%;
  max-width: 600px;
  padding: 28px 20px 20px;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

.close {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 2;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease;
}
.close:hover { color: var(--text); }

/* Admissions info modal (replaces the old Google Form embed) */
.modal-content--apply {
  max-width: 560px;
  text-align: left;
  padding-top: 34px;
}
.apply-modal__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.35;
  margin: 6px 0 18px;
}
.apply-modal__p {
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.6;
  margin: 0 0 16px;
}
.apply-modal__contact {
  margin: 22px 0;
  padding: 18px 20px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.apply-modal__contact-label {
  font-family: var(--font-label);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 4px;
}
.apply-modal__contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-label);
  font-size: 0.95rem;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s ease;
}
.apply-modal__contact-item:hover { color: var(--gold); }
.apply-modal__icon { font-size: 1.1rem; flex-shrink: 0; }
.apply-modal__closing {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text);
  font-size: 1rem;
  margin: 18px 0 0;
}

/* Program-detail modal: wider, and only its inner body scrolls — the
   close button stays pinned top-right (see #programModalBody below)
   rather than a global overflow on .modal-content. */
.modal-content--program {
  max-width: 680px;
  text-align: left;
  padding-top: 34px;
}

#programModalBody {
  max-height: 75vh;
  overflow-y: auto;
  padding-right: 10px;
}

.program-modal__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 4px 0 10px;
}
.program-modal__tagline {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold);
  font-size: 1.05rem;
  margin: 0 0 20px;
}
.program-modal__p {
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.6;
  margin: 0 0 14px;
}
.program-modal__block {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.program-modal__block h4 {
  font-family: var(--font-label);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin: 0 0 12px;
}
.program-modal__list {
  margin: 0;
  padding-left: 20px;
  color: var(--text);
  font-size: 0.92rem;
  display: grid;
  gap: 8px;
}
.program-modal__list--pathways {
  grid-template-columns: 1fr 1fr;
  padding-left: 0;
  list-style: none;
}
.program-modal__list--pathways li::before {
  content: "\2014  "; /* em dash */
  color: var(--gold);
}

@media (max-width: 520px) {
  .program-modal__list--pathways { grid-template-columns: 1fr; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue span { animation: none; }
  .btn:hover, .card:hover, .nav__cta:hover { transform: none; }
}