/* ============================================================
   DE LA SALLE HOLY CROSS COLLEGE — HOMEPAGE
   Static, server-rendered. No framework, no runtime.
   Imports the brand token source of truth, then layers the
   bespoke homepage system on top.
   ------------------------------------------------------------
   Ownable device: a navy duotone treatment unifies every campus
   photograph into one heritage palette (the crest's Holy Cross
   navy). Reserved serif (Roboto Slab) carries only the motto,
   pull-quotes and the big editorial numbers.
   ============================================================ */

@import url("./colors_and_type.css");

/* ------------------------------------------------------------
   1. LOCAL TOKENS  (homepage-specific — never inline a value)
   ------------------------------------------------------------ */
:root {
  /* The duotone: navy shadows, warm paper highlights — applied to
     greyscaled photos so the whole site shares one ink. */
  --duo-shadow:        #00314c;          /* deep Holy Cross navy */
  --duo-highlight:     #f4f1ea;          /* warm paper */
  --duo-veil:          rgba(0, 49, 76, .42);   /* overlay strength, default */
  --duo-veil-soft:     rgba(0, 49, 76, .26);   /* hero — keep faces legible */
  --duo-veil-strong:   rgba(0, 49, 76, .66);   /* text-over-photo bands */

  --rule-gold:    var(--dls-gold);
  --rule-green:   var(--dls-green);
  --rule-blue:    var(--dls-blue);

  --header-h:     76px;
  --measure:      66ch;                  /* reading max-width */
  --measure-head: 16ch;                  /* heading wrap target */
  --measure-display: 13ch;               /* big serif display wrap */

  --edge:  clamp(1.25rem, 5vw, 4.5rem);  /* page gutter for full-bleed work */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; overflow-x: hidden; color: var(--dls-ink); }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 3px solid var(--dls-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -120px;
  background: var(--dls-blue-navy); color: #fff;
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill);
  z-index: 200; transition: top var(--dur-base) var(--ease-standard);
  font-weight: var(--fw-semibold); text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

/* Wider container variant for editorial full-bleed sections */
.wrap { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-6); }
.wrap--wide { max-width: 1320px; }

/* ------------------------------------------------------------
   2. THE OWNABLE IMAGE TREATMENT — navy duotone
   Greyscale the photo, then lay navy/paper duotone over it with
   mix-blend so highlights warm and shadows go heritage-navy.
   ------------------------------------------------------------ */
.duo { position: relative; overflow: hidden; background: var(--duo-shadow); }
.duo > img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.04) brightness(1.02);
}
.duo::before {            /* duotone map */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(var(--duo-highlight), var(--duo-highlight));
  mix-blend-mode: multiply; pointer-events: none;
}
.duo::after {             /* navy veil — strength set per use */
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: var(--duo-veil); pointer-events: none;
}
.duo--soft::after   { background: var(--duo-veil-soft); }
.duo--strong::after { background: var(--duo-veil-strong); }
/* let a duotone read closer to true navy where text sits on it */
.duo--ink > img { filter: grayscale(1) contrast(1.05) brightness(.95); }

@supports not (mix-blend-mode: multiply) {
  .duo::before { display: none; }
  .duo > img { filter: grayscale(.55) sepia(.12); }
}

/* ------------------------------------------------------------
   3. CREST MOTIF
   ------------------------------------------------------------ */
.crest-mark { display: block; height: auto; }
.crest-watermark {
  position: absolute; pointer-events: none; z-index: 0;
  opacity: .05; mix-blend-mode: multiply;
}

/* ------------------------------------------------------------
   4. STICKY HEADER
   ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--dls-border);
}
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem);
  min-height: var(--header-h);
  max-width: 1320px; margin-inline: auto; padding: 8px var(--space-6);
}
.brand-lockup { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand-lockup .crest-mark { width: 52px; height: auto; display: block; }

.nav-group { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: clamp(.9rem, 2.2vw, 1.9rem); }
.nav-group a {
  font-family: var(--font-heading); font-weight: 500; font-size: .92rem;
  letter-spacing: .01em; color: var(--dls-blue-navy); text-decoration: none;
  white-space: nowrap; transition: color .18s ease;
}
.nav-group a:hover, .nav-group a:focus-visible { color: var(--dls-red); }
.nav-group a.apply-link {
  background: var(--dls-red); color: #fff; padding: .5rem 1.15rem;
  border-radius: 999px; font-weight: 600; transition: background .18s ease;
}
.nav-group a.apply-link:hover, .nav-group a.apply-link:focus-visible { background: #9c171c; color: #fff; }

.header-cta { display: none; }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--dls-blue-navy); transition: transform var(--dur-base), opacity var(--dur-base); }

/* ------------------------------------------------------------
   5. HERO — asymmetric, full-bleed photographic
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: min(86vh, 760px);
  display: grid;
  align-items: end;
  isolation: isolate;
  color: #fff;
  background: var(--duo-shadow);
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media .duo, .hero__media img { width: 100%; height: 100%; }
/* directional scrim so the lower-left copy stays readable */
.hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(105deg, rgba(0,33,52,.72) 0%, rgba(0,33,52,.30) 46%, rgba(0,33,52,.05) 72%),
    linear-gradient(0deg, rgba(0,33,52,.55), rgba(0,33,52,0) 55%);
}
.hero__inner {
  max-width: 1320px; margin-inline: auto; width: 100%;
  padding: clamp(2.5rem, 6vw, 5.5rem) var(--space-6);
  display: grid;
  grid-template-columns: minmax(0, 60ch) auto;
  align-items: end; gap: var(--space-8);
}
.hero__crest { width: clamp(64px, 9vw, 104px); margin-bottom: var(--space-6); filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); }
.hero__eyebrow {
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: .8125rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--dls-gold-crest); margin: 0 0 var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
}
.hero__eyebrow::before { content:""; width: 34px; height: 2px; background: var(--dls-gold-crest); display:inline-block; }
.hero h1 {
  font-family: var(--font-display); font-weight: var(--fw-regular);
  color: #fff; font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  line-height: 1.04; letter-spacing: -0.01em;
  max-width: var(--measure-display); margin: 0 0 var(--space-6);
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--dls-gold-crest); }
.hero__lede {
  font-family: var(--font-body); font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.5; color: rgba(255,255,255,.92); max-width: 46ch;
  margin: 0 0 var(--space-8);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.hero__actions .link-quiet {
  color: #fff; text-decoration: none; font-weight: var(--fw-semibold);
  font-size: .95rem; display: inline-flex; align-items: center; gap: var(--space-2);
  border-bottom: 2px solid rgba(255,255,255,.4); padding-bottom: 2px;
}
.hero__actions .link-quiet:hover { border-color: var(--dls-gold-crest); }

/* The "established" tab pinned to the hero's right edge */
.hero__seal {
  align-self: end; text-align: right; padding-bottom: clamp(1rem, 3vw, 2rem);
}
.hero__seal .y {
  font-family: var(--font-display); font-size: clamp(2.5rem, 4vw, 3.6rem);
  line-height: .9; color: #fff; display: block;
}
.hero__seal .l {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dls-gold-crest); font-weight: var(--fw-semibold);
}

/* ------------------------------------------------------------
   6. PILL-VALUES STRIP under hero (Holistic / Progressive / Relevant)
   ------------------------------------------------------------ */
.values-strip {
  background: var(--dls-blue-navy); color: #fff;
}
.values-strip ul {
  list-style: none; margin: 0 auto; padding: var(--space-4) var(--space-6);
  max-width: 1320px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(.75rem, 4vw, 3rem);
}
.values-strip li {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  letter-spacing: .14em; text-transform: uppercase; font-size: .9rem;
  display: flex; align-items: center; gap: clamp(.75rem, 4vw, 3rem);
}
.values-strip li::before { content: "✦"; color: var(--dls-gold-crest); font-size: .8em; }
.values-strip li:first-child::before { content: none; }

/* ------------------------------------------------------------
   7. FOUNDING-YEARS STAT BAND — big serif numbers
   ------------------------------------------------------------ */
.founding {
  position: relative; background: #fff; overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5.5rem);
  border-bottom: 1px solid var(--dls-border);
}
.founding .crest-watermark {
  right: -40px; top: 50%; transform: translateY(-50%); width: 420px;
}
.founding__grid {
  position: relative; z-index: 1;
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1.1fr 2fr; align-items: center;
}
.founding__intro .eyebrow { color: var(--dls-red); }
.founding__intro h2 {
  font-family: var(--font-heading); color: var(--dls-blue-navy);
  font-size: clamp(1.5rem, 2.4vw, 2rem); max-width: 14ch; margin-bottom: var(--space-3);
}
.founding__intro p { max-width: 36ch; color: var(--dls-text); margin: 0; }
.founding__years {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-left: 1px solid var(--dls-border);
}
.year {
  padding-inline: clamp(1rem, 2.5vw, 2rem);
  border-left: 3px solid var(--rule-gold);
}
.founding__years .year:nth-child(2) { border-left-color: var(--rule-blue); }
.founding__years .year:nth-child(3) { border-left-color: var(--rule-green); }
.year__num {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: clamp(2.6rem, 5vw, 4rem); line-height: .95;
  color: var(--dls-blue-navy); letter-spacing: -.02em;
}
.year__label {
  font-family: var(--font-heading); font-weight: var(--fw-medium);
  font-size: .92rem; color: var(--dls-ink); margin-top: var(--space-2);
  max-width: 18ch; line-height: 1.3;
}

/* ------------------------------------------------------------
   8. ONE-COLLEGE intro — overlapping off-grid split
   ------------------------------------------------------------ */
.one-college { background: var(--dls-surface-2); position: relative; overflow: hidden; }
.one-college__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 0; align-items: center;
  padding-block: clamp(3.5rem, 7vw, 7rem);
}
.one-college__figure {
  grid-column: 1; position: relative; z-index: 1;
}
.one-college__figure .duo { aspect-ratio: 4 / 5; border: 6px solid #fff; }
/* second smaller photo overlapping the text column */
.one-college__figure .duo--inset {
  position: absolute; width: 46%; aspect-ratio: 3/4; right: -22%; bottom: -8%;
  border: 6px solid var(--dls-surface-2); z-index: 2;
}
.one-college__body {
  grid-column: 2; padding-left: clamp(2.5rem, 7vw, 7rem); position: relative; z-index: 1;
}
.one-college__body .eyebrow { color: var(--dls-red); }
.one-college__body h2 {
  color: var(--dls-blue-navy); font-size: clamp(1.7rem, 3vw, 2.4rem);
  max-width: 18ch; margin-bottom: var(--space-6);
}
.one-college__body p { max-width: var(--measure); color: var(--dls-text); }
.one-college__facts {
  list-style: none; margin: var(--space-8) 0 var(--space-8); padding: 0;
  display: grid; gap: 0; border-top: 1px solid var(--dls-border);
}
.one-college__facts li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  padding-block: var(--space-3); border-bottom: 1px solid var(--dls-border);
  font-family: var(--font-heading);
}
.one-college__facts dt, .one-college__facts .k { color: var(--dls-text-strong); font-weight: var(--fw-medium); font-size: .95rem; }
.one-college__facts .v { color: var(--dls-blue-navy); font-weight: var(--fw-bold); font-size: 1.05rem; }

/* ------------------------------------------------------------
   9. PILLARS — Holistic / Progressive / Relevant (deliberately unequal)
   ------------------------------------------------------------ */
.pillars { background: #fff; }
.pillars__head { max-width: 52ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.pillars__head .eyebrow { color: var(--dls-red); }
.pillars__head h2 { color: var(--dls-blue-navy); font-size: clamp(1.7rem, 3vw, 2.4rem); max-width: 18ch; }

.pillars__grid {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  /* intentionally uneven: a tall lead, two stacked, one wide footer */
  grid-template-columns: repeat(12, 1fr);
}
.pillar {
  border: 1px solid var(--dls-border); position: relative; overflow: hidden;
  display: flex; flex-direction: column; background: #fff;
  transition: border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.pillar:hover { border-color: var(--dls-blue); transform: translateY(-3px); }
.pillar__media { position: relative; }
.pillar__media .duo { aspect-ratio: 16/10; }
.pillar__body { padding: clamp(1.25rem, 2.5vw, 2rem); display: flex; flex-direction: column; flex: 1; }
.pillar__kicker {
  font-family: var(--font-heading); font-weight: var(--fw-bold); letter-spacing: .14em;
  text-transform: uppercase; font-size: .78rem; margin-bottom: var(--space-3);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.pillar__kicker::before { content:""; width: 24px; height: 3px; display:inline-block; }
.pillar--holistic   .pillar__kicker { color: var(--dls-green); } .pillar--holistic   .pillar__kicker::before { background: var(--dls-green); }
.pillar--progressive .pillar__kicker { color: var(--dls-blue); }  .pillar--progressive .pillar__kicker::before { background: var(--dls-blue); }
.pillar--relevant   .pillar__kicker { color: var(--dls-gold-deep); } .pillar--relevant   .pillar__kicker::before { background: var(--dls-gold); }
.pillar h3 { color: var(--dls-blue-navy); font-size: var(--fs-h3); margin-bottom: var(--space-3); max-width: 16ch; }
.pillar p { color: var(--dls-text); margin: 0; }

/* unequal placement */
.pillar--holistic    { grid-column: span 5; grid-row: span 2; }
.pillar--progressive { grid-column: span 7; }
.pillar--relevant    { grid-column: span 7; }
.pillar--quote {
  grid-column: span 12; background: var(--dls-navy-tint); border-color: transparent;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(1rem,3vw,2.5rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.pillar--quote:hover { transform: none; }
.pillar--quote .crest-mark { width: 54px; }
.pillar--quote blockquote {
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  color: var(--dls-blue-navy); line-height: 1.35; margin: 0; max-width: 40ch;
}

/* ------------------------------------------------------------
   10. ETHOS / MOTTO BAND — navy, photographic, serif motto
   ------------------------------------------------------------ */
.ethos {
  position: relative; isolation: isolate; color: #fff;
  background: var(--dls-blue-navy); overflow: hidden;
}
.ethos__media { position: absolute; inset: 0; z-index: -1; }
.ethos__media .duo, .ethos__media img { width: 100%; height: 100%; }
.ethos__media::after {
  content:""; position:absolute; inset:0; z-index:3;
  background: linear-gradient(90deg, rgba(0,49,76,.92) 0%, rgba(0,49,76,.78) 50%, rgba(0,49,76,.55) 100%);
}
.ethos__inner {
  max-width: 1100px; margin-inline: auto; padding: clamp(4rem, 9vw, 8rem) var(--space-6);
  position: relative; z-index: 1;
}
.ethos .crest-mark { width: 60px; margin-bottom: var(--space-6); }
.ethos__eyebrow { color: var(--dls-gold-crest); letter-spacing: .22em; text-transform: uppercase; font-weight: var(--fw-semibold); font-size: .8125rem; margin-bottom: var(--space-4); }
.ethos__motto {
  font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: clamp(2rem, 5.5vw, 4rem); line-height: 1.05; letter-spacing: -.01em;
  color: #fff; max-width: 16ch; margin: 0 0 var(--space-8);
}
.ethos__motto em { font-style: italic; color: var(--dls-gold-crest); }
.ethos p { color: rgba(255,255,255,.86); max-width: 60ch; }
.ethos__actions { margin-top: var(--space-8); }

/* ------------------------------------------------------------
   11. TESTIMONIAL — single, generous, off-grid
   ------------------------------------------------------------ */
.voices { background: var(--dls-surface-2); }
.voices__grid {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.voices__figure .duo { aspect-ratio: 3/4; border: 6px solid #fff; }
.voices__quote .eyebrow { color: var(--dls-red); }
.voices__quote blockquote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.4;
  color: var(--dls-blue-navy); margin: 0 0 var(--space-6);
  max-width: 30ch;
  position: relative; padding-left: var(--space-8);
  border-left: 3px solid var(--dls-gold);
}
.voices__cite { font-family: var(--font-heading); font-style: normal; }
.voices__cite strong { display: block; color: var(--dls-ink); font-size: 1.05rem; }
.voices__cite span { color: var(--dls-text); font-size: .92rem; }

/* ------------------------------------------------------------
   12. SCHOOL BUZZ — magazine grid, varied card sizes
   ------------------------------------------------------------ */
.buzz { background: #fff; }
.buzz__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-bottom: clamp(2rem,4vw,3rem); }
.buzz__head .eyebrow { color: var(--dls-red); }
.buzz__head h2 { color: var(--dls-blue-navy); font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0; max-width: 16ch; }

.buzz__grid {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(12, 1fr);
}
.story {
  border: 1px solid var(--dls-border); background: #fff;
  display: flex; flex-direction: column; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.story:hover { border-color: var(--dls-blue); transform: translateY(-3px); }
.story__media { position: relative; }
.story__tag {
  position: absolute; top: var(--space-3); left: var(--space-3); z-index: 4;
  background: var(--dls-red); color: #fff;
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
}
.story__body { padding: clamp(1.1rem, 2vw, 1.6rem); display: flex; flex-direction: column; flex: 1; }
.story__date { font-size: .8rem; color: var(--dls-red); font-weight: var(--fw-semibold); letter-spacing: .04em; margin-bottom: var(--space-2); text-transform: uppercase; }
.story h3 { color: var(--dls-blue-navy); font-size: var(--fs-h3); margin: 0 0 var(--space-3); line-height: 1.25; }
.story p { color: var(--dls-text); margin: 0 0 var(--space-4); }
.story__more { margin-top: auto; font-family: var(--font-heading); font-weight: var(--fw-semibold); color: var(--dls-blue-mid); font-size: .9rem; display: inline-flex; gap: var(--space-2); align-items: center; }

/* varied sizing: lead story spans wide with tall media + landscape image */
.story--lead   { grid-column: span 7; grid-row: span 2; }
.story--lead .story__media .duo { aspect-ratio: 16/9; }
.story--lead h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.story--side   { grid-column: span 5; }
.story--side .story__media .duo { aspect-ratio: 16/10; }
/* wide promo card — aftercare offering, no image, navy-tint */
.story--note {
  grid-column: span 12; background: var(--dls-navy-tint); border-color: transparent;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: clamp(1rem,3vw,2.5rem);
  padding: clamp(1.5rem,3vw,2.5rem);
}
.story--note:hover { transform: none; }
.story--note h3 { margin-bottom: var(--space-2); }
.story--note p { margin: 0; max-width: 60ch; }

/* ------------------------------------------------------------
   13. ADMISSIONS CTA — split, photographic, one red CTA
   ------------------------------------------------------------ */
.admit {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  background: var(--dls-blue-navy); color: #fff;
}
.admit__media { position: relative; min-height: 380px; }
.admit__media .duo, .admit__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.admit__body {
  padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 6vw, 5rem);
  display: flex; flex-direction: column; justify-content: center;
}
.admit__body .eyebrow { color: var(--dls-gold-crest); }
.admit__body h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.8rem); max-width: 16ch; margin-bottom: var(--space-4); }
.admit__body p { color: rgba(255,255,255,.86); max-width: 48ch; margin-bottom: var(--space-8); }
.admit__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.admit__actions .btn-secondary { color:#fff; border-color: rgba(255,255,255,.6); }
.admit__actions .btn-secondary:hover { background:#fff; color: var(--dls-blue-navy); border-color:#fff; }
.admit__contacts {
  margin-top: var(--space-8); display: grid; gap: var(--space-4);
  grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.2); padding-top: var(--space-6);
}
.admit__contacts h3 { color: var(--dls-gold-crest); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--space-2); }
.admit__contacts a, .admit__contacts span { color: rgba(255,255,255,.9); text-decoration: none; font-size: .92rem; display:block; }
.admit__contacts a:hover { color:#fff; text-decoration: underline; }

/* ------------------------------------------------------------
   14. FOOTER
   ------------------------------------------------------------ */
.site-footer { background: #0a2536; color: rgba(255,255,255,.7); }
.site-footer__top {
  max-width: 1320px; margin-inline: auto; padding: clamp(3rem,6vw,5rem) var(--space-6) clamp(2rem,4vw,3rem);
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
}
.footer-brand .crest-mark { width: 64px; margin-bottom: var(--space-4); }
.footer-brand__name { font-family: var(--font-heading); font-weight: var(--fw-bold); color:#fff; font-size: 1.05rem; line-height: 1.2; margin-bottom: var(--space-3); max-width: 18ch; }
.footer-brand__motto { font-family: var(--font-display); font-style: italic; color: var(--dls-gold-crest); font-size: 1rem; max-width: 26ch; }
.footer-col h4 { color:#fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--space-4); }
.footer-col ul { list-style: none; margin:0; padding:0; display: grid; gap: var(--space-3); }
.footer-col a { color: rgba(255,255,255,.7); text-decoration: none; font-size: .92rem; }
.footer-col a:hover { color:#fff; }
.footer-col address { font-style: normal; font-size: .9rem; line-height: 1.6; display: grid; gap: var(--space-3); }
.footer-col address b { color:#fff; font-weight: var(--fw-semibold); display:block; }

.site-footer__accred {
  border-top: 1px solid rgba(255,255,255,.12);
}
.site-footer__accred .inner {
  max-width: 1320px; margin-inline: auto; padding: var(--space-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap;
}
.accred-marks { display: flex; align-items: center; gap: clamp(1.25rem,3vw,2.5rem); flex-wrap: wrap; }
.accred-marks span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.accred-marks img { height: 42px; width: auto; background: transparent; opacity: .8; transition: opacity .2s ease; }
.accred-marks img:hover { opacity: 1; }

.site-footer__legal {
  border-top: 1px solid rgba(255,255,255,.12);
}
.site-footer__legal .inner {
  max-width: 1320px; margin-inline: auto; padding: var(--space-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  font-size: .82rem; color: rgba(255,255,255,.5);
}

/* ------------------------------------------------------------
   15. EARNED MOTION — hero crest + headline reveal on load
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); }
  .is-ready .reveal {
    opacity: 1; transform: none;
    transition: opacity .7s var(--ease-standard), transform .7s var(--ease-standard);
  }
  .is-ready .reveal-1 { transition-delay: .05s; }
  .is-ready .reveal-2 { transition-delay: .18s; }
  .is-ready .reveal-3 { transition-delay: .31s; }
  .is-ready .reveal-4 { transition-delay: .44s; }
  .hero__crest.reveal { transform: translateY(18px) scale(.96); }
  .is-ready .hero__crest.reveal { transform: none; }
}

/* ------------------------------------------------------------
   16. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .founding__grid { grid-template-columns: 1fr; }
  .founding__years { border-left: 0; }
  .one-college__grid { grid-template-columns: 1fr; gap: clamp(2rem,5vw,3rem); }
  .one-college__figure .duo--inset { position: static; width: 60%; margin-top: -18%; margin-left: auto; }
  .one-college__body { grid-column: 1; padding-left: 0; }
  .voices__grid { grid-template-columns: 1fr; }
  .voices__figure { max-width: 360px; }
  .pillar--holistic, .pillar--progressive, .pillar--relevant { grid-column: span 6; }
  .pillar--holistic { grid-row: auto; }
  .story--lead, .story--side { grid-column: span 6; }
  .story--lead { grid-row: auto; }
}

@media (max-width: 880px) {
  /* mobile: crest left, nav wraps centred below */
  .site-header { position: static; }
  .site-header__bar { flex-wrap: wrap; gap: 10px; padding-block: 12px; min-height: 0; }
  .brand-lockup .crest-mark { width: 50px; }
  .nav-group { width: 100%; justify-content: center; gap: .55rem 1.2rem; }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__seal { display: none; }
  .admit { grid-template-columns: 1fr; }
  .admit__media { min-height: 260px; }
  .admit__contacts { grid-template-columns: 1fr; }
  .pillar--quote { grid-template-columns: 1fr; }
  .story--note { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .founding__years { grid-template-columns: 1fr; }
  .year { border-left: 3px solid var(--rule-gold); padding-block: var(--space-3); }
  .founding__years .year:nth-child(2) { border-left-color: var(--rule-blue); }
  .founding__years .year:nth-child(3) { border-left-color: var(--rule-green); }
  .pillar--holistic, .pillar--progressive, .pillar--relevant,
  .story--lead, .story--side { grid-column: span 12; }
  .voices__quote blockquote { padding-left: var(--space-6); }
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__legal .inner, .site-footer__accred .inner { flex-direction: column; align-items: flex-start; }
}