/* ============================================================
   Go Ivy USA — 시안 B "Warm Companion"
   Burgundy + Deep Navy · Gold accent · Ivory ground
   ============================================================ */

:root {
  --burgundy: #7d2233;
  --burgundy-dark: #641a28;
  --burgundy-soft: #9a4a58;
  --navy: #1c2b4a;
  --navy-deep: #162138;
  --gold: #c2a14d;
  /* Hero accent. Whatever colour goes here has to survive a background that
     runs from near-black foliage to sunlit brick, so it has to be LIGHT.
     Client asked for navy (Sep 2026): navy measures 1.09:1 there and vanishes,
     as burgundy did before it. This is the closest blue that stays legible
     across the whole line. See .accent-italic. */
  --accent: #8fb4e8;
  --gold-deep: #a9873a;
  --gold-soft: #e4d5ae;
  --ivory: #faf7f1;
  --beige: #f0eade;
  --card: #fffdf9;
  --ink: #22304f;
  --body: #4c505c;
  --muted: #8a8676;
  --line: #e6dfd0;
  --white: #ffffff;

  --serif: "Lora", "Noto Serif KR", georgia, serif;
  --sans: "Inter", "Noto Sans KR", -apple-system, "Segoe UI", sans-serif;

  --container: 1180px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 10px 30px rgba(34, 48, 79, 0.08);
  --shadow-soft: 0 4px 14px rgba(34, 48, 79, 0.05);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--burgundy); text-decoration: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Typography ---------- */

h1, h2, h3, .serif {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.22;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.28rem; }

/* Gold washed out on the sunlit brick, then red replaced it, then the client
   asked for blue (Sep 2026). The constraint has been the same each time: the
   ground behind this one line runs from near-black to bright tan, so only a
   light colour clears the contrast bar along its whole length. */
.accent-italic {
  font-style: italic;
  color: var(--accent);
}

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 14px;
}


.lead { font-size: 1.08rem; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.22s ease;
  text-align: center;
}

.btn-burgundy {
  background: var(--burgundy);
  color: var(--white);
}
.btn-burgundy:hover { background: var(--burgundy-dark); transform: translateY(-1px); }

.btn-gold {
  background: var(--gold);
  color: var(--navy-deep);
}
.btn-gold:hover { background: var(--gold-deep); color: var(--white); transform: translateY(-1px); }

.btn-outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.65);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); }

.btn-outline-dark {
  background: transparent;
  color: var(--ink);
  border-color: rgba(34, 48, 79, 0.35);
}
.btn-outline-dark:hover { border-color: var(--ink); }

.text-link {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 2px;
}
.text-link:hover { color: var(--burgundy); }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  padding: 18px 0;
}

.site-header.solid,
.site-header.scrolled {
  background: rgba(250, 247, 241, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
  padding: 12px 0;
}

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

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--white);
}

.brand-mark {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--white);
  color: var(--burgundy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 600;
  flex-shrink: 0;
}

.site-header.solid .brand,
.site-header.scrolled .brand { color: var(--burgundy); }

.site-header.solid .brand-mark,
.site-header.scrolled .brand-mark { background: var(--burgundy); color: var(--white); }

.main-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.main-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  transition: color 0.2s;
}

.main-nav a:hover { color: var(--white); }

.site-header.solid .main-nav a,
.site-header.scrolled .main-nav a { color: var(--body); }

.site-header.solid .main-nav a:hover,
.site-header.scrolled .main-nav a:hover { color: var(--burgundy); }

.main-nav a.active { color: var(--gold); }
.site-header.solid .main-nav a.active,
.site-header.scrolled .main-nav a.active { color: var(--burgundy); font-weight: 600; }

.header-cta { display: flex; align-items: center; gap: 12px; }

.header-cta .btn { padding: 11px 22px; font-size: 0.88rem; }

.header-cta .btn-talk {
  background: var(--white);
  color: var(--burgundy);
}
.header-cta .btn-talk:hover { background: var(--gold-soft); }

.site-header.solid .btn-talk,
.site-header.scrolled .btn-talk {
  background: var(--burgundy);
  color: var(--white);
}
.site-header.solid .btn-talk:hover,
.site-header.scrolled .btn-talk:hover { background: var(--burgundy-dark); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 42px; height: 42px;
  border-radius: 10px;
  position: relative;
  z-index: 210;
}

.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--white);
  margin: 5px auto;
  border-radius: 2px;
  transition: all 0.28s ease;
}

.site-header.solid .nav-toggle span,
.site-header.scrolled .nav-toggle span { background: var(--ink); }

body.nav-open .nav-toggle span { background: var(--ink); }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero (Home) ---------- */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  background:
    linear-gradient(178deg, rgba(120, 116, 104, 0.25) 0%, rgba(72, 70, 62, 0.55) 55%, rgba(38, 38, 36, 0.82) 100%),
    linear-gradient(160deg, #b3ab99 0%, #8d8778 40%, #55534b 78%, #38372f 100%);
  padding: 160px 0 200px;
}

.hero-photo {
  position: absolute;
  inset: 0;
  background-image: url("../img/hero-banner.jpg");
  background-size: cover;
  background-position: center 30%;
  z-index: 0;
}

/* Scrim over the banner photo. The client's campus image is bright and
   high-contrast, so the headline needs real cover from roughly the midpoint
   down — a light wash left the italic accent type unreadable. */
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(22, 25, 32, 0.34) 0%,
    rgba(22, 25, 32, 0.24) 28%,
    rgba(20, 22, 28, 0.58) 55%,
    rgba(18, 20, 26, 0.88) 100%
  );
}

.hero .container { position: relative; z-index: 2; }

.hero h1 {
  color: var(--white);
  margin-bottom: 26px;
}

@media (min-width: 900px) {
  .hero h1 {
    white-space: nowrap;
    font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  }
}

.hero p {
  max-width: 560px;
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 34px;
}

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

/* Stat cards overlapping hero bottom */

.stat-strip {
  position: relative;
  z-index: 5;
  margin-top: -110px;
  padding-bottom: 26px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.stat-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  box-shadow: var(--shadow);
}

.stat-card h3 {
  font-size: 1.65rem;
  color: var(--burgundy);
  margin-bottom: 10px;
}

.stat-card p { font-size: 0.93rem; }

/* ---------- Sections ---------- */

section { padding: 88px 0; }

section.tight { padding: 64px 0; }

.section-head {
  max-width: 720px;
  margin: 0 auto 54px;
  text-align: center;
}

.section-head.left { text-align: left; margin: 0 0 44px; }

/* Lets a long heading run the full container instead of wrapping inside the
   720px reading measure (client asked for this one on a single line). */
.section-head.wide { max-width: none; }

@media (min-width: 1000px) {
  .section-head.wide h2 { white-space: nowrap; }
}

.bg-beige { background: var(--beige); }
.bg-white { background: var(--white); }

/* Split section (text + visual) */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.split-text h2 { margin-bottom: 22px; }
.split-text p { margin-bottom: 18px; }
.split-text .text-link { display: inline-block; margin-top: 8px; }

/* Placeholder ground until the client supplies real photography. Burgundy at
   the client's request (Sep 2026) — the beige read as an unstyled gap. An
   <img> covers this entirely, so adding photos later needs no CSS change. */
.visual-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, var(--burgundy-soft) 0%, var(--burgundy) 45%, var(--burgundy-dark) 100%);
  position: relative;
}

.visual-frame.tall { aspect-ratio: 3 / 3.6; }

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

.visual-frame .ph-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.92);
  text-transform: uppercase;
}

.visual-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.visual-duo .visual-frame:last-child { margin-top: 44px; }

/* Card grids */

.card-grid {
  display: grid;
  gap: 22px;
}

.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }

.info-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow-soft);
}

.info-card h3 { color: var(--burgundy); margin-bottom: 12px; font-size: 1.18rem; }
.info-card p { font-size: 0.93rem; }

.step-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 28px 22px;
  box-shadow: var(--shadow-soft);
}

.step-num {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--burgundy);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.step-card h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.step-card p { font-size: 0.88rem; }

/* Story cards */

.story-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.story-tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--burgundy);
}

.story-card h3 { font-size: 1.3rem; }
.story-card p { font-size: 0.93rem; white-space: pre-line; }
.story-card .story-more { margin-top: auto; padding-top: 4px; }

/* ---------- Navy CTA band ---------- */

.cta-band {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 64px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  color: var(--white);
}

.cta-band h2 { color: var(--white); margin-bottom: 14px; }
.cta-band p { color: rgba(255, 255, 255, 0.82); max-width: 560px; }

.cta-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
  min-width: 220px;
}

.cta-band.center {
  flex-direction: column;
  text-align: center;
  padding: 72px 48px;
}

.cta-band.center .cta-actions { flex-direction: row; justify-content: center; min-width: 0; }

.cta-band .quote {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  color: var(--white);
  max-width: 760px;
  line-height: 1.35;
}

/* ---------- Page hero (subpages) ---------- */

.page-hero {
  position: relative;
  margin-top: 92px;
  padding: 0 24px;
}

.page-hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  border-radius: var(--radius-lg);
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 56px 54px;
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(90, 86, 76, 0.15) 0%, rgba(70, 40, 40, 0.72) 100%),
    linear-gradient(155deg, #b9b1a0 0%, #8e887a 50%, #5d4a44 100%);
}

.page-hero-inner.ph-about {
  background-image:
    linear-gradient(180deg, rgba(30, 32, 40, 0.18) 0%, rgba(28, 24, 30, 0.66) 100%),
    url("../img/about-hero.jpg");
  background-size: cover;
  background-position: center 55%;
}

.page-hero-inner.ph-programs {
  background-image:
    linear-gradient(180deg, rgba(30, 32, 40, 0.18) 0%, rgba(28, 24, 30, 0.66) 100%),
    url("../img/programs-hero.jpg");
  background-size: cover;
  background-position: center 60%;
}

.page-hero-inner.ph-services {
  background-image:
    linear-gradient(180deg, rgba(30, 32, 40, 0.22) 0%, rgba(28, 24, 30, 0.68) 100%),
    url("../img/services-hero.jpg");
  background-size: cover;
  background-position: center 35%;
}

.page-hero-inner.ph-contact {
  background-image:
    linear-gradient(180deg, rgba(30, 32, 40, 0.25) 0%, rgba(28, 24, 30, 0.7) 100%),
    url("../img/contact-hero.jpg");
  background-size: cover;
  background-position: center 40%;
}

.page-hero-inner.ph-stories {
  background-image:
    linear-gradient(180deg, rgba(30, 32, 40, 0.2) 0%, rgba(28, 24, 30, 0.68) 100%),
    url("../img/hero.jpg");
  background-size: cover;
  background-position: center 45%;
}

/* Eyebrow set over photography — the home hero and all five page banners.
   Gold type was unreadable on the photos (client, Sep 2026): the images run
   from bright stone to dark foliage, so no flat colour survives the whole
   line. A solid burgundy chip carries its own ground — white on --burgundy is
   8.6:1 no matter what is behind it — and is a size up, as asked. */
.eyebrow.on-dark,
.page-hero-inner .eyebrow {
  display: inline-block;
  align-self: flex-start;        /* .page-hero-inner is a flex column */
  /* Translucent, not solid — the solid chip read as a button and pulled focus
     off the headline (client, Sep 2026). 0.70 is the floor that still clears
     4.5:1 for white text over the brightest thing in these photos (open sky,
     5.15:1); the blur steadies it over busy detail. */
  background: rgba(125, 34, 51, 0.70);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: var(--white);
  font-size: 0.86rem;
  letter-spacing: 0.18em;
  padding: 9px 18px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(20, 16, 18, 0.22);
}

.page-hero-inner h1 {
  color: var(--white);
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
}

/* ---------- Programs ---------- */

.program-block {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 44px;
  padding: 44px 0;
  border-top: 1px solid var(--line);
}

.program-block:last-child { border-bottom: 1px solid var(--line); }

.program-label .grade {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--burgundy);
  line-height: 1.15;
}

.program-label .grade-sub {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}

.program-body h3 { margin-bottom: 14px; }
.program-body p { margin-bottom: 14px; }
.program-body p:last-child { margin-bottom: 0; }

/* ---------- Services ---------- */

.service-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 34px 30px;
  box-shadow: var(--shadow-soft);
  border-top: 3px solid var(--gold-soft);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-top-color: var(--gold);
}

.service-card h3 { color: var(--ink); margin-bottom: 12px; }
.service-card p { font-size: 0.94rem; }

/* For School Counselors — the one service aimed at schools rather than
   families, so it reads as its own band: navy ground, horizontal split. */
.counselor-band {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 46px 52px;
  display: grid;
  grid-template-columns: 0.8fr 1.4fr;
  gap: 44px;
  align-items: center;
  border-left: 5px solid var(--gold);
}

.counselor-band h2 { color: var(--white); font-size: clamp(1.5rem, 2.6vw, 2rem); }
.counselor-band p { color: rgba(255, 255, 255, 0.86); margin-bottom: 22px; }

.counselor-body { display: flex; flex-direction: column; align-items: flex-start; }

/* ---------- Contact ---------- */

.contact-banner {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 60px 56px;
  color: var(--white);
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
}

/* Two columns on desktop: intro above the booking link on the left, the form
   spanning both rows on the right. The DOM order is intro -> form -> booking
   link, which is the order it should stack in when this collapses to one
   column, so mobile needs no reordering. */
.contact-banner .intro     { grid-column: 1; grid-row: 1; }
.contact-banner .intro-alt { grid-column: 1; grid-row: 2; align-self: end; }
.contact-banner .form-col  { grid-column: 2; grid-row: 1 / span 2; }

.contact-banner h2 { color: var(--white); margin-bottom: 16px; }
.contact-banner .intro p,
.contact-banner .intro-alt p { color: rgba(255, 255, 255, 0.85); margin-bottom: 22px; }

.contact-banner .intro-alt {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.contact-note {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 18px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-grid .full { grid-column: 1 / -1; }

.field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.85);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.07);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.94rem;
  transition: border 0.2s, background 0.2s;
}

.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-opacity='.7' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }

.field select option { color: var(--ink); background: var(--white); }

.field input::placeholder,
.field textarea::placeholder { color: rgba(255, 255, 255, 0.45); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.12);
}

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

.form-submit { margin-top: 6px; }

.form-alert {
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 0.92rem;
  margin-bottom: 18px;
  display: none;
}

.form-alert.success { display: block; background: rgba(194, 161, 77, 0.2); border: 1px solid var(--gold); color: #f4e9c8; }
.form-alert.error { display: block; background: rgba(190, 60, 60, 0.18); border: 1px solid rgba(230, 120, 120, 0.6); color: #ffd9d9; }

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.contact-info-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.contact-info-card .ico {
  width: 52px; height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--beige);
  color: var(--burgundy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-info-card h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
.contact-info-card p { font-size: 0.92rem; }

/* ---------- Booking ---------- */

.booking-hidden { display: none; }

.booking-note {
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 34px;
  background: var(--beige);
  border: 1px solid var(--line);
  font-size: 0.96rem;
}

.booking-note.success { background: #eef5ef; border-color: #cfe3d4; }
.booking-note.error { background: #fbecec; border-color: #ecc9c9; }

.booking-step-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.25rem;
  margin: 40px 0 18px;
}

#booking-app > .booking-step-title:first-child { margin-top: 0; }

#step-datetime,
#step-form { margin-top: 52px; }

.step-badge {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--burgundy);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.type-card {
  text-align: left;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  cursor: pointer;
  font-family: var(--sans);
  transition: border 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.type-card:hover { transform: translateY(-2px); }
.type-card.on { border-color: var(--burgundy); box-shadow: var(--shadow-soft); }

.type-name { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); font-weight: 600; }
.type-meta { font-size: 0.85rem; color: var(--body); }
.type-meta .free { color: var(--burgundy); }
.type-desc { font-size: 0.88rem; color: var(--body); line-height: 1.5; }

.tz-note { font-size: 0.88rem; color: var(--muted); margin-bottom: 16px; }

.date-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.date-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 74px;
  padding: 10px 12px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--sans);
  transition: border 0.15s;
}

.date-chip:hover { border-color: var(--gold); }
.date-chip.on { border-color: var(--burgundy); background: #fdf7f2; }

.dc-dow { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.dc-day { font-size: 0.95rem; font-weight: 600; color: var(--ink); }

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.slot-chip {
  padding: 13px 14px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink);
  text-align: left;
  transition: border 0.15s;
}

.slot-chip:hover { border-color: var(--gold); }
.slot-chip.on { border-color: var(--burgundy); background: #fdf7f2; }

.slot-chip .sl-local { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 2px; }

.loading { color: var(--muted); font-size: 0.9rem; }

.selected-slot {
  background: var(--beige);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 0.94rem;
  margin-bottom: 20px;
}

.booking-form .bf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.booking-form .bf-field { margin-bottom: 16px; }

.booking-form label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.booking-form input,
.booking-form select,
.booking-form textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--card);
  font-family: var(--sans);
  font-size: 0.94rem;
  color: var(--ink);
}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus { outline: none; border-color: var(--gold); }

.booking-form textarea { min-height: 110px; resize: vertical; }

.bf-note { font-size: 0.85rem; color: var(--muted); margin-top: 14px; }

@media (max-width: 700px) {
  .type-grid { grid-template-columns: 1fr; }
  .booking-form .bf-row { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 40px 0;
  background: var(--ivory);
}

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

.footer-brand {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--burgundy);
}

.footer-nav { display: flex; gap: 24px; flex-wrap: wrap; }

.footer-nav a { font-size: 0.9rem; color: var(--body); }
.footer-nav a:hover { color: var(--burgundy); }

.footer-meta { font-size: 0.85rem; color: var(--muted); }

/* ---------- Reveal animation ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .cols-5 { grid-template-columns: repeat(3, 1fr); }
  .split { gap: 44px; }
}

/* Tighten the 6-item nav before it collapses to the hamburger at 860px */
@media (min-width: 861px) and (max-width: 1160px) {
  .main-nav { gap: 18px; }
  .main-nav a { font-size: 0.86rem; }
}

@media (min-width: 861px) and (max-width: 990px) {
  .main-nav { gap: 12px; }
  .main-nav a { font-size: 0.8rem; }
  .header-cta .btn-talk { padding: 10px 16px; font-size: 0.82rem; }
}

@media (max-width: 860px) {
  section { padding: 64px 0; }

  /* A non-none backdrop-filter makes an element the containing block for its
     position:fixed descendants. With it on, the full-screen menu below was
     being sized to the header box instead of the viewport: the ivory panel
     collapsed to a strip and the links floated unreadably over the page, on
     every .solid page and on the home page once scrolled. The header
     background is already 0.96 opaque, so dropping the blur here costs
     nothing visually. */
  .site-header.solid,
  .site-header.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-toggle { display: block; }

  .main-nav {
    position: fixed;
    inset: 0;
    background: var(--ivory);
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 200;
  }

  body.nav-open .main-nav { transform: none; }

  .main-nav a,
  .site-header .main-nav a {
    color: var(--ink) !important;
    font-family: var(--serif);
    font-size: 1.5rem;
  }

  .main-nav a.active { color: var(--burgundy) !important; }

  .header-cta .btn-talk { display: none; }

  body.nav-open .header-cta .btn-talk {
    display: block;
    position: fixed;
    bottom: 48px;
    left: 24px;
    right: 24px;
    z-index: 205;
    background: var(--burgundy);
    color: var(--white);
  }

  .hero { padding: 140px 0 160px; min-height: 84vh; }

  .stat-strip { margin-top: -90px; }
  .stat-grid { grid-template-columns: 1fr; gap: 14px; }

  .split,
  .cols-3,
  .cols-2,
  .contact-banner { grid-template-columns: 1fr; }

  .counselor-band { grid-template-columns: 1fr; gap: 22px; padding: 38px 28px; }

  /* One column: let the three blocks fall in DOM order — intro, form, then
     the booking link. */
  .contact-banner .intro,
  .contact-banner .intro-alt,
  .contact-banner .form-col { grid-column: 1; grid-row: auto; }

  .contact-banner .intro-alt { margin-top: 26px; }

  .cols-5 { grid-template-columns: 1fr 1fr; }

  .visual-duo .visual-frame:last-child { margin-top: 0; }

  .cta-band { flex-direction: column; align-items: flex-start; padding: 44px 32px; }
  .cta-band.center { align-items: center; }
  .cta-actions { width: 100%; min-width: 0; }

  /* Full-bleed banner on mobile. The inset card with rounded corners read as
     a floating box on a narrow screen (client, Sep 2026); edge to edge, tight
     under the header, is cleaner. 66px is the solid header's mobile height:
     12px padding + 42px nav-toggle + 12px padding. */
  .page-hero { margin-top: 66px; padding: 0; }

  .page-hero-inner {
    border-radius: 0;
    padding: 40px 28px;
    min-height: 300px;
  }

  .eyebrow.on-dark,
  .page-hero-inner .eyebrow { font-size: 0.76rem; letter-spacing: 0.14em; padding: 7px 13px; }

  .program-block { grid-template-columns: 1fr; gap: 18px; padding: 36px 0; }

  .contact-banner { padding: 44px 28px; }
  .form-grid { grid-template-columns: 1fr; }

  .contact-info-grid { grid-template-columns: 1fr; }

  .footer-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .cols-5 { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .cta-band.center .cta-actions { flex-direction: column; width: 100%; }
}

/* ============================================================
   Form sections
   Parent/Guardian and Student details are grouped so a first-time
   visitor can tell at a glance whose information each field wants.
   ============================================================ */

.field-group { border: none; padding: 0; margin: 0; }

.field-group legend {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0;
  margin-bottom: 14px;
}

.field-group + .field-group { margin-top: 26px; }

.field-group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field-group-grid .full { grid-column: 1 / -1; }

/* On the dark inquiry banner the legend needs the gold accent. */
.contact-banner .field-group legend { color: var(--gold-soft); }
.contact-banner .field-group + .field-group {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 24px;
}

/* The booking form sits on ivory, so it takes the ink palette. */
.booking-form .field-group legend { color: var(--burgundy); }
.booking-form .field-group + .field-group {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

@media (max-width: 620px) {
  .field-group-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Student outcomes — college strip (Success Stories page)
   Each school is a lockup: the logo mark on top, the school name
   below it (client revision #3). Schools with no artwork yet fall
   back to the name alone and stay aligned with the rest of the row,
   so the strip never looks broken mid-rollout.
   ============================================================ */

.outcomes-intro {
  max-width: 760px;
  margin: 18px auto 0;
  text-align: center;
}

.college-strip { margin-top: 42px; }
.college-strip + .college-strip { margin-top: 34px; }

.college-strip-label {
  display: block;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--burgundy);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}

/* Grid, not flex-wrap: auto-fit drops the unused tracks, so a group of eight
   lays out as eight even columns instead of six plus a stranded pair. The
   group sizes are client-editable, so the layout cannot assume a count. */
.college-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  align-items: end;        /* names sit on one line whether or not a logo is set */
  justify-items: center;
  gap: 28px 22px;
  padding: 0;
}

.college-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  text-align: center;
}

/* Fixed-height slot so logos of different proportions optically match. */
.college-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  max-width: 100%;
}

.college-logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.college-wordmark {
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Alongside a mark the name is supporting text, not the headline. */
.college-item.has-logo .college-wordmark {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--navy);
}

.card-tagline {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--muted);
}

.outcomes-statement {
  margin-top: 44px;
  padding: 34px 40px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
}

.outcomes-statement p {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--ink);
  line-height: 1.5;
}

@media (max-width: 760px) {
  .college-list { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 22px 16px; }
  .college-logo { height: 34px; }
  .college-wordmark { font-size: 1.05rem; }
  .college-item.has-logo .college-wordmark { font-size: 0.84rem; }
  .outcomes-statement { padding: 26px 22px; }
}

/* ============================================================
   Single-purpose pages (booking cancellation, 404, 500)
   ============================================================ */

.single-panel { padding-top: 150px; padding-bottom: 90px; }
.single-panel .muted { color: var(--muted); }

.single-panel .fineprint {
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--muted);
}