/* ==========================================================================
   TLG School — design system
   Palette taken from the school crest: deep navy shield + gold mark.

   Contrast note: gold on white measures 2.04:1 and must never carry body text.
   Gold is used for accents on navy, and as a button fill with navy text
   (6.44:1). Every text pairing below is >= 4.5:1.
   ========================================================================== */

:root {
    --navy-900: #0B1733;
    --navy-800: #122246;
    --navy-700: #1A2E5E;
    --navy-600: #26407C;
    --navy-050: #EEF1F8;

    --gold-600: #B67A08;
    --gold-500: #EFA81C;
    --gold-400: #FFC24D;

    --cream:    #FBF8F1;
    --ink:      #22252B;
    --muted:    #5C6470;
    --line:     #E3E6ED;

    --shadow-sm: 0 1px 2px rgba(11,23,51,.06), 0 2px 8px rgba(11,23,51,.05);
    --shadow-md: 0 4px 12px rgba(11,23,51,.08), 0 12px 32px rgba(11,23,51,.07);
    --shadow-lg: 0 12px 28px rgba(11,23,51,.12), 0 28px 64px rgba(11,23,51,.10);

    --radius:    14px;
    --radius-sm: 9px;
    --container: 1200px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--ink);
    background: #fff;
    line-height: 1.7;
    font-size: 16.5px;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a   { color: var(--navy-700); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--gold-600); }

h1, h2, h3, h4, h5 {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    color: var(--navy-700);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -0.015em;
}

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

/* ---------- section rhythm ---------- */
.section        { padding: 96px 0; }
.section-tight  { padding: 64px 0; }
.section-cream  { background: var(--cream); }
.section-navy   { background: var(--navy-700); color: #fff; }
.section-navy h2, .section-navy h3, .section-navy h4 { color: #fff; }

.section-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: .78rem; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-600);
    margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold-500); }
.section-head.left .eyebrow { justify-content: flex-start; }
.section-navy .eyebrow { color: var(--gold-400); }

.section-title { font-size: clamp(1.9rem, 3.6vw, 2.85rem); margin-bottom: 16px; }
.section-sub   { color: var(--muted); font-size: 1.06rem; }
.section-navy .section-sub { color: rgba(255,255,255,.78); }

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 30px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-weight: 650; font-size: .97rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-gold  { background: var(--gold-500); color: var(--navy-900); box-shadow: var(--shadow-sm); }
.btn-gold:hover { background: var(--gold-400); color: var(--navy-900); box-shadow: var(--shadow-md); }

.btn-navy  { background: var(--navy-700); color: #fff; box-shadow: var(--shadow-sm); }
.btn-navy:hover { background: var(--navy-800); color: #fff; box-shadow: var(--shadow-md); }

.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { background: #fff; color: var(--navy-700); border-color: #fff; }

.btn-outline { background: transparent; color: var(--navy-700); border-color: var(--navy-700); }
.btn-outline:hover { background: var(--navy-700); color: #fff; }

.btn-lg { padding: 17px 38px; font-size: 1.03rem; }

/* ---------- top bar + header ---------- */
.topbar {
    background: var(--navy-900); color: rgba(255,255,255,.82);
    font-size: .86rem; padding: 9px 0;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.topbar a { color: rgba(255,255,255,.82); }
.topbar a:hover { color: var(--gold-400); }
.topbar-contact { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar-contact i, .topbar-social i { color: var(--gold-500); }
.topbar-social { display: flex; gap: 16px; }

.site-header {
    background: #fff; position: sticky; top: 0; z-index: 900;
    box-shadow: var(--shadow-sm); border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; }

.brand { display: flex; align-items: center; gap: 14px; }
.brand img { height: 58px; width: auto; }
.brand-text strong {
    display: block; font-family: 'Fraunces', Georgia, serif;
    font-size: 1.32rem; color: var(--navy-700); line-height: 1.1; font-weight: 700;
}
.brand-text span {
    display: block; font-size: .69rem; letter-spacing: .19em;
    text-transform: uppercase; color: var(--gold-600); font-weight: 700; margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
    padding: 10px 15px; border-radius: 8px;
    font-weight: 560; font-size: .95rem; color: var(--navy-700);
}
.nav a:hover { background: var(--navy-050); color: var(--navy-700); }
.nav a.active { color: var(--gold-600); }
.nav a.active::after {
    content: ""; display: block; height: 2px; background: var(--gold-500);
    border-radius: 2px; margin-top: 5px;
}
.header-cta { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
    display: none; background: none; border: 0; font-size: 1.5rem;
    color: var(--navy-700); cursor: pointer; padding: 8px;
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: 640px; display: flex; align-items: center; background: var(--navy-800); overflow: hidden; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(105deg, rgba(11,23,51,.94) 0%, rgba(18,34,70,.86) 45%, rgba(26,46,94,.62) 100%);
}
.hero-inner { position: relative; z-index: 2; padding: 96px 0; max-width: 720px; }
.hero h1 {
    color: #fff; font-size: clamp(2.3rem, 5.2vw, 4rem);
    margin-bottom: 20px; letter-spacing: -0.025em;
}
.hero h1 em { font-style: normal; color: var(--gold-400); }
.hero p { color: rgba(255,255,255,.86); font-size: 1.14rem; max-width: 600px; margin-bottom: 34px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-motto {
    display: inline-flex; align-items: center; gap: 11px;
    background: rgba(239,168,28,.14);
    border: 1px solid rgba(239,168,28,.42);
    color: var(--gold-400);
    padding: 8px 18px; border-radius: 999px;
    font-size: .82rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: 22px;
}

/* ---------- page banner (sub-pages) ---------- */
.page-banner { position: relative; background: var(--navy-700); padding: 92px 0 76px; text-align: center; overflow: hidden; }
.page-banner::before {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(1100px 380px at 15% -10%, rgba(239,168,28,.20), transparent 60%),
      radial-gradient(900px 360px at 85% 110%, rgba(38,64,124,.75), transparent 60%);
}
.page-banner > .container { position: relative; z-index: 2; }
.page-banner h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.1rem); margin-bottom: 12px; }
.page-banner p { color: rgba(255,255,255,.8); max-width: 640px; margin: 0 auto; }
.crumbs { margin-top: 18px; font-size: .9rem; color: rgba(255,255,255,.6); }
.crumbs a { color: var(--gold-400); }
.crumbs a:hover { color: #fff; }

/* ---------- stat card ----------
   Lifted out of the hero as a floating card rather than a flat band: gold
   gradient, a woven diagonal texture, a soft sheen, and laurel rules either
   side of each figure echoing the wreath on the crest. */
.stats { position: relative; z-index: 5; margin-top: -72px; margin-bottom: 8px; }

.stats-inner {
    position: relative;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    background: linear-gradient(135deg, #FFCB63 0%, var(--gold-500) 46%, #D9930C 100%);
    border-radius: 22px;
    box-shadow: 0 26px 64px rgba(11,23,51,.30), 0 4px 12px rgba(11,23,51,.16);
    overflow: hidden;
    isolation: isolate;
}

/* fine diagonal weave */
.stats-inner::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
    background-image: repeating-linear-gradient(45deg,
        rgba(255,255,255,.16) 0 2px, transparent 2px 11px);
}
/* soft sheen that drifts across the card */
.stats-inner::after {
    content: ""; position: absolute; top: -60%; left: -30%; z-index: -1;
    width: 45%; height: 220%; transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
    animation: sheen 7s ease-in-out 1.4s infinite;
}
@keyframes sheen {
    0%, 65%  { transform: translateX(0) rotate(18deg); opacity: 0; }
    70%      { opacity: .9; }
    100%     { transform: translateX(320%) rotate(18deg); opacity: 0; }
}

.stat { text-align: center; padding: 34px 18px 30px; position: relative; }
.stat + .stat::before {
    content: ""; position: absolute; left: 0; top: 26%; bottom: 26%;
    width: 1px; background: rgba(255,255,255,.75);
}
.stat i {
    display: block; font-size: 1.1rem; color: rgba(11,23,51,.55);
    margin-bottom: 10px; transition: transform .3s ease, color .3s ease;
}
.stat:hover i { transform: translateY(-3px) scale(1.12); color: var(--navy-900); }

.stat b {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: 'Fraunces', Georgia, serif; font-size: 2.3rem;
    color: var(--navy-900); line-height: 1.1; font-weight: 700;
}
/* laurel rules, a nod to the wreath on the crest */
.stat b::before, .stat b::after {
    content: ""; width: 16px; height: 2px; border-radius: 2px;
    background: rgba(11,23,51,.34);
}
.stat span {
    display: block; margin-top: 6px;
    font-size: .8rem; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: rgba(11,23,51,.74);
}

/* ---------- generic grid + cards ---------- */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 32px 28px; box-shadow: var(--shadow-sm);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #D3D9E6; }
.card h3 { font-size: 1.24rem; margin-bottom: 10px; }
.card p  { color: var(--muted); font-size: .99rem; }

.card-icon {
    width: 54px; height: 54px; border-radius: 13px;
    display: grid; place-items: center; font-size: 1.28rem;
    background: var(--navy-050); color: var(--navy-700);
    margin-bottom: 18px;
}
.card:hover .card-icon { background: var(--gold-500); color: var(--navy-900); }

.card-navy { background: var(--navy-700); border-color: transparent; color: #fff; }
.card-navy h3 { color: #fff; }
.card-navy p  { color: rgba(255,255,255,.76); }
.card-navy .card-icon { background: rgba(255,255,255,.1); color: var(--gold-400); }

/* numbered value cards */
.value-card { position: relative; padding-left: 30px; }
.value-card::before {
    content: ""; position: absolute; left: 0; top: 34px; bottom: 34px;
    width: 3px; border-radius: 3px; background: var(--gold-500);
}

/* ---------- department cards ---------- */
.dept-card {
    border-radius: var(--radius); overflow: hidden; background: #fff;
    border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
    transition: transform .22s ease, box-shadow .22s ease;
}
.dept-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.dept-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.dept-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.dept-card:hover .dept-media img { transform: scale(1.06); }
.dept-tag {
    position: absolute; left: 16px; bottom: 16px; z-index: 2;
    background: var(--gold-500); color: var(--navy-900);
    font-size: .74rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
    padding: 6px 14px; border-radius: 999px;
}
.dept-body { padding: 26px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.dept-body h3 { font-size: 1.32rem; margin-bottom: 9px; }
.dept-body p  { color: var(--muted); font-size: .98rem; flex: 1; }
.dept-link {
    margin-top: 18px; font-weight: 650; font-size: .93rem;
    color: var(--navy-700); display: inline-flex; align-items: center; gap: 8px;
}
.dept-link i { transition: transform .2s ease; }
.dept-card:hover .dept-link { color: var(--gold-600); }
.dept-card:hover .dept-link i { transform: translateX(4px); }

/* ---------- split feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split-media { position: relative; }
.split-media img { border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.split-media::after {
    content: ""; position: absolute; width: 150px; height: 150px; right: -18px; bottom: -18px;
    border: 3px solid var(--gold-500); border-radius: var(--radius); z-index: -1;
}

.tick-list { list-style: none; display: grid; gap: 13px; margin-top: 22px; }
.tick-list li { display: flex; gap: 13px; align-items: flex-start; color: var(--muted); }
.tick-list li i { color: var(--gold-600); margin-top: 5px; flex-shrink: 0; }
.section-navy .tick-list li { color: rgba(255,255,255,.82); }
.section-navy .tick-list li i { color: var(--gold-400); }

/* ---------- vision / mission / motto ---------- */
.vmm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.vmm > div { padding: 44px 34px; background: var(--navy-700); color: #fff; }
.vmm > div + div { border-left: 1px solid rgba(255,255,255,.12); }
.vmm .vmm-motto { background: var(--gold-500); color: var(--navy-900); }
.vmm .vmm-motto h3, .vmm .vmm-motto .vmm-icon { color: var(--navy-900); }
.vmm .vmm-motto p { color: rgba(11,23,51,.82); }
.vmm-icon { font-size: 1.5rem; color: var(--gold-400); margin-bottom: 14px; display: block; }
.vmm h3 { color: #fff; font-size: 1.3rem; margin-bottom: 12px; }
.vmm p { color: rgba(255,255,255,.82); font-size: 1rem; }
.vmm .vmm-motto p { font-family: 'Fraunces', Georgia, serif; font-size: 1.4rem; font-style: italic; line-height: 1.35; }

/* ---------- gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery a { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; display: block; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery a::after {
    content: ""; position: absolute; inset: 0; background: rgba(11,23,51,.42);
    opacity: 0; transition: opacity .3s ease;
}
.gallery a:hover img { transform: scale(1.08); }
.gallery a:hover::after { opacity: 1; }
.gallery a.wide { grid-column: span 2; aspect-ratio: 2 / 1; }

/* a magnifier fades up on hover, so the tile reads as "opens larger" */
.gallery[data-lightbox] a::before {
    content: "\f00e"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; z-index: 2; inset: 0; display: grid; place-content: center;
    font-size: 1.5rem; color: #fff;
    opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease;
}
.gallery[data-lightbox] a:hover::before,
.gallery[data-lightbox] a:focus-visible::before { opacity: 1; transform: none; }

/* ---------- lightbox ----------
   Built here rather than pulled from a plugin: the gallery needs four controls
   and a counter, and the page already ships no JS libraries. */
.lightbox {
    position: fixed; inset: 0; z-index: 1000;
    display: grid; grid-template-rows: auto 1fr auto; gap: 10px;
    padding: 16px clamp(16px, 5vw, 68px) 24px;
    background: rgba(6, 13, 31, .97);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s;
}
.lightbox.open { opacity: 1; visibility: visible; }
body.lightbox-open { overflow: hidden; }

.lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lightbox-count {
    font-size: .82rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: rgba(255,255,255,.66);
}

.lightbox-btn {
    display: grid; place-content: center; width: 46px; height: 46px; flex: none;
    border: 1px solid rgba(255,255,255,.26); border-radius: 50%;
    background: rgba(255,255,255,.07); color: #fff; font-size: 1rem;
    cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.lightbox-btn:hover, .lightbox-btn:focus-visible {
    background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); transform: scale(1.08);
}
.lightbox-btn[disabled] { opacity: .3; pointer-events: none; }

/* the image sits between the two arrows, all three on one row */
.lightbox-stage { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 28px); min-height: 0; }
.lightbox-figure { margin: 0; display: flex; min-height: 0; min-width: 0; }
/* Capped against the viewport, not the row: the figure is a centred flex item,
   so its own height stays content-sized and a percentage cap on a tall portrait
   photo resolves against nothing — the image then ran under the caption. The
   subtrahend is the bar, caption, gaps and padding around the stage. */
.lightbox-figure img {
    max-width: 100%; width: auto; height: auto;
    max-height: calc(100vh - 150px);
    max-height: calc(100dvh - 150px);
    object-fit: contain; border-radius: var(--radius-sm);
    box-shadow: 0 26px 60px rgba(0,0,0,.5);
    animation: lightboxIn .34s cubic-bezier(.22,.9,.28,1);
}
.lightbox.is-loading .lightbox-figure { opacity: .35; }
.lightbox-figure { transition: opacity .2s ease; }

@keyframes lightboxIn {
    from { opacity: 0; transform: scale(.965); }
    to   { opacity: 1; transform: none; }
}

.lightbox-caption {
    text-align: center; color: rgba(255,255,255,.72); font-size: .92rem; min-height: 1.2em;
}

@media (max-width: 860px) {
    .lightbox { padding: 12px 12px 18px; }
    .lightbox-btn { width: 40px; height: 40px; font-size: .9rem; }
    .lightbox-stage { gap: 8px; }
    .lightbox-figure img { max-height: calc(100vh - 132px); max-height: calc(100dvh - 132px); }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox { transition: none; }
    .lightbox-figure img { animation: none; }
}

/* ---------- CTA ----------
   Sits on cream as a contained gold card rather than a full-bleed navy band.
   Previously it ran straight into the navy footer, so the page ended on one
   continuous slab of blue. It also bookends the gold stat card at the top. */
.cta { background: var(--cream); position: relative; overflow: hidden; }

.cta-card {
    position: relative; isolation: isolate; overflow: hidden; text-align: center;
    background: linear-gradient(135deg, #FFCB63 0%, var(--gold-500) 48%, #D9930C 100%);
    border-radius: 26px;
    padding: 74px 44px;
    box-shadow: 0 26px 64px rgba(11,23,51,.22), 0 4px 12px rgba(11,23,51,.10);
}
/* same diagonal weave as the stat card, so the two read as a pair */
.cta-card::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .45;
    background-image: repeating-linear-gradient(45deg,
        rgba(255,255,255,.16) 0 2px, transparent 2px 11px);
}
/* Concentric rings rather than a crest watermark: logo.png is still the old
   school's artwork, and at watermark size its lettering is legible. Swap this
   back to the crest once the TLG logo file is in place. */
.cta-card::after {
    content: ""; position: absolute; right: -110px; bottom: -140px; z-index: -1;
    width: 380px; height: 380px; border-radius: 50%; pointer-events: none;
    border: 44px solid rgba(255,255,255,.16);
    box-shadow: 0 0 0 30px rgba(11,23,51,.05);
}
.cta h2 { color: var(--navy-900); font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: 14px; }
.cta p  { color: rgba(11,23,51,.88); max-width: 620px; margin: 0 auto 30px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* on gold, the outline button needs navy ink rather than white */
.cta-actions .btn-ghost { color: var(--navy-900); border-color: rgba(11,23,51,.45); }
.cta-actions .btn-ghost:hover { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }

/* ---------- accreditation strip ---------- */
.accred {
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center;
    background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--gold-500);
    border-radius: var(--radius); padding: 26px 32px; box-shadow: var(--shadow-sm);
}
.accred i { font-size: 2rem; color: var(--gold-600); }
.accred p { color: var(--muted); margin: 0; }
.accred strong { color: var(--navy-700); }

/* ---------- footer ---------- */
.site-footer {
    position: relative;
    background: var(--navy-900);
    color: rgba(255,255,255,.72);
    padding: 68px 0 0;
    border-top: 4px solid var(--gold-500);
}
/* a soft warm bloom keeps the navy from reading as a flat black-blue slab */
.site-footer::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(760px 300px at 12% 0%, rgba(239,168,28,.10), transparent 62%);
}
.site-footer > .container { position: relative; z-index: 2; }
.site-footer h4 {
    color: #fff; font-family: 'Inter', sans-serif; font-size: .85rem;
    letter-spacing: .15em; text-transform: uppercase; margin-bottom: 20px; font-weight: 700;
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 44px; }
.site-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: var(--gold-400); }
.footer-links { list-style: none; display: grid; gap: 11px; font-size: .96rem; }
.footer-brand img { height: 70px; margin-bottom: 18px; }
.footer-brand p { font-size: .97rem; max-width: 330px; }
.footer-contact { list-style: none; display: grid; gap: 13px; font-size: .96rem; }
.footer-contact li { display: flex; gap: 12px; align-items: flex-start; }
.footer-contact i { color: var(--gold-500); margin-top: 5px; }
.footer-social { display: flex; gap: 11px; margin-top: 20px; }
.footer-social a {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.08); color: #fff; transition: background .2s ease, color .2s ease;
}
.footer-social a:hover { background: var(--gold-500); color: var(--navy-900); }
.footer-bottom {
    margin-top: 56px; border-top: 1px solid rgba(255,255,255,.1);
    padding: 22px 0; font-size: .9rem;
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ---------- prose (content pages) ---------- */
.prose h2 { font-size: 1.85rem; margin: 44px 0 16px; }
.prose h3 { font-size: 1.3rem; margin: 32px 0 12px; }
.prose p  { margin-bottom: 16px; color: #3A3F4A; }
.prose > :first-child { margin-top: 0; }
.prose ul { margin: 0 0 18px 0; list-style: none; display: grid; gap: 11px; }
.prose ul li { display: flex; gap: 12px; align-items: flex-start; color: #3A3F4A; }
.prose ul li i { color: var(--gold-600); margin-top: 6px; flex-shrink: 0; font-size: .85rem; }

.pullquote {
    border-left: 4px solid var(--gold-500); background: var(--cream);
    padding: 26px 30px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-family: 'Fraunces', Georgia, serif; font-size: 1.22rem; font-style: italic;
    color: var(--navy-700); margin: 30px 0;
}

/* ---------- reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
    .btn:hover, .card:hover, .dept-card:hover { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .split  { grid-template-columns: 1fr; gap: 40px; }
    .vmm    { grid-template-columns: 1fr; }
    .vmm > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
}

@media (max-width: 860px) {
    .nav {
        position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw);
        background: #fff; flex-direction: column; align-items: stretch;
        padding: 92px 22px 30px; gap: 4px;
        box-shadow: -12px 0 40px rgba(11,23,51,.18);
        transform: translateX(100%); transition: transform .28s ease; z-index: 950;
    }
    .nav.open { transform: none; }
    .nav a { padding: 13px 14px; font-size: 1rem; }
    .nav-toggle { display: block; z-index: 960; }
    .header-cta .btn { display: none; }
    .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .stats .container { grid-template-columns: repeat(2, 1fr); gap: 22px; }
    .stat + .stat { border-left: 0; }
    .stat:nth-child(n+3) { border-top: 1px solid rgba(11,23,51,.16); padding-top: 22px; }
    .gallery { grid-template-columns: repeat(2, 1fr); }
    .gallery a.wide { grid-column: span 2; }
    .section { padding: 68px 0; }
    .hero { min-height: 540px; }
    .hero-inner { padding: 72px 0; }
    body { font-size: 16px; }
}

@media (max-width: 560px) {
    .grid-4 { grid-template-columns: 1fr; }
    .topbar-contact { gap: 14px; font-size: .8rem; }
    .brand img { height: 46px; }
    .brand-text strong { font-size: 1.1rem; }
    .footer-grid { grid-template-columns: 1fr; }
    .split-media::after { display: none; }
}

/* ==========================================================================
   Motion & designed backgrounds
   Everything below is gated by prefers-reduced-motion at the end of the file.
   ========================================================================== */

/* ---------- hero: slow drift on the photo + staggered entrance ---------- */
.hero-media img { animation: kenburns 26s ease-in-out infinite alternate; transform-origin: 60% 45%; }
@keyframes kenburns {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to   { transform: scale(1.13) translate3d(-1.5%, -1.5%, 0); }
}

/* soft moving glow so the navy never reads as a flat block */
.hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(680px 380px at 18% 30%, rgba(239,168,28,.20), transparent 65%);
    animation: heroGlow 13s ease-in-out infinite alternate;
}
@keyframes heroGlow {
    from { opacity: .55; transform: translate3d(0, 0, 0); }
    to   { opacity: 1;   transform: translate3d(70px, -34px, 0); }
}

.hero-inner > * { opacity: 0; animation: riseIn .85s cubic-bezier(.22,.9,.28,1) forwards; }
.hero-inner > *:nth-child(1) { animation-delay: .10s; }
.hero-inner > *:nth-child(2) { animation-delay: .22s; }
.hero-inner > *:nth-child(3) { animation-delay: .34s; }
.hero-inner > *:nth-child(4) { animation-delay: .46s; }
@keyframes riseIn {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}

/* the stat card rises into place under the hero */
.stats-inner { opacity: 0; animation: riseIn .9s cubic-bezier(.22,.9,.28,1) .58s forwards; }

/* ---------- scroll reveal, with stagger for grid children ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.9,.28,1), transform .7s cubic-bezier(.22,.9,.28,1); }
.reveal.is-visible { opacity: 1; transform: none; }

.reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.9,.28,1); }
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: .00s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .08s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .16s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .24s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .32s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .40s; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: .48s; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: .56s; }

/* ---------- header condenses once you scroll ---------- */
.site-header { transition: box-shadow .25s ease, background .25s ease; }
.site-header .container { transition: min-height .25s ease; }
.site-header.scrolled { box-shadow: 0 6px 26px rgba(11,23,51,.13); }
.site-header.scrolled .container { min-height: 68px; }
.site-header .brand img { transition: height .25s ease; }
.site-header.scrolled .brand img { height: 46px; }

/* reading-progress hairline in school gold */
.scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 1000;
    background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
    transition: width .1s linear;
}

/* ---------- designed section backgrounds ---------- */
.section { position: relative; }
.section > .container { position: relative; z-index: 2; }

/* plain white sections get a faint navy grid so they are never dead flat */
.section-grid::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(26,46,94,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,46,94,.045) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(72% 62% at 50% 42%, #000 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(72% 62% at 50% 42%, #000 30%, transparent 100%);
}

/* cream sections get warm blooms + a dot field */
.section-cream { position: relative; overflow: hidden; }
.section-cream::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(620px 320px at 88% 8%,  rgba(239,168,28,.16), transparent 62%),
        radial-gradient(560px 300px at 4% 92%, rgba(26,46,94,.09),  transparent 62%);
}
.section-cream::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(26,46,94,.09) 1.4px, transparent 1.4px);
    background-size: 26px 26px;
    mask-image: linear-gradient(180deg, #000, transparent 42%);
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 42%);
}

/* navy sections get a slow aurora so they feel lit rather than painted */
.section-navy { position: relative; overflow: hidden; }
.section-navy::before {
    content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(560px 400px at 20% 25%, rgba(239,168,28,.20), transparent 60%),
        radial-gradient(620px 420px at 82% 78%, rgba(64,104,190,.42), transparent 62%);
    animation: aurora 18s ease-in-out infinite alternate;
}
@keyframes aurora {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(48px, -34px, 0) scale(1.10); }
}
/* Concentric rings, not the crest — see the note on .cta-card::after. */
.section-navy::after {
    content: ""; position: absolute; right: -120px; bottom: -150px; z-index: 0;
    width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
    border: 46px solid rgba(255,255,255,.035);
    box-shadow: 0 0 0 34px rgba(239,168,28,.05);
}

/* the CTA band already carries its own gradient — give it drift too */
/* CTA is a static gold card now; the drift belongs to the navy sections only */

/* ---------- card & link micro-interaction ---------- */
.card { position: relative; overflow: hidden; }
.card::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
    transform: scaleX(0); transform-origin: left; transition: transform .34s ease;
}
.card:hover::after { transform: scaleX(1); }
.card-icon { transition: background .25s ease, color .25s ease, transform .25s ease; }
.card:hover .card-icon { transform: translateY(-2px) rotate(-4deg); }

.nav a { position: relative; }

/* ---------- reduced motion: stop everything, hide nothing ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero-media img,
    .hero::after,
    .section-navy::before,
    .site-footer::before,
    .stats-inner::after { animation: none !important; }

    .hero-inner > *,
    .stats-inner { opacity: 1 !important; animation: none !important; }

    .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
    .scroll-progress { display: none; }
}

/* ---------- responsive: stat card ---------- */
@media (max-width: 860px) {
    .stats { margin-top: -46px; }
    .stats-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 18px; }
    .stat + .stat::before { display: none; }
    .stat { padding: 26px 14px 24px; }
    .stat:nth-child(2n)::before { display: none; }
    .stat:nth-child(n+3) { border-top: 1px solid rgba(11,23,51,.18); }
    .stat:nth-child(2n) { border-left: 1px solid rgba(255,255,255,.75); }
    .stat b { font-size: 1.9rem; }
}
@media (max-width: 560px) {
    .section-navy::after { display: none; }
}

/* ---------- nav dropdown (Academics → departments) ---------- */
.nav-item { position: relative; }
.nav-item > a { display: inline-flex; align-items: center; gap: 7px; }
.nav-item > a .caret { font-size: .6rem; transition: transform .22s ease; opacity: .8; }
.nav-item:hover > a .caret,
.nav-item:focus-within > a .caret { transform: rotate(180deg); }

.subnav {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 234px;
    background: #fff; border: 1px solid var(--line); border-radius: 13px;
    box-shadow: var(--shadow-md);
    padding: 8px; display: grid; gap: 2px; z-index: 60;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
/* keeps the pointer from falling through the gap on the way down */
.subnav::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }

.nav-item:hover > .subnav,
.nav-item:focus-within > .subnav { opacity: 1; visibility: visible; transform: none; }

.subnav a { padding: 11px 14px; border-radius: 9px; font-size: .93rem; white-space: nowrap; }
.subnav a:hover { background: var(--navy-050); }
.subnav a.active { color: var(--gold-600); background: rgba(239,168,28,.10); }
.subnav a.active::after { display: none; }

@media (max-width: 860px) {
    /* inside the slide-out panel the submenu simply sits inline, indented */
    .nav-item { width: 100%; }
    .nav-item > a { width: 100%; justify-content: space-between; }
    .nav-item > a .caret { display: none; }
    .subnav {
        position: static; opacity: 1; visibility: visible; transform: none;
        background: transparent; border: 0; box-shadow: none; border-radius: 0;
        border-left: 2px solid var(--line);
        margin: 2px 0 8px 16px; padding: 0 0 0 10px; min-width: 0;
    }
    .subnav a { font-size: .95rem; padding: 10px 12px; }
    .subnav::before { display: none; }
}

/* ---------- forms ---------- */
.field {
    padding: 13px 15px; border: 1px solid var(--line); border-radius: 9px;
    font: inherit; color: var(--ink); background: #fff; width: 100%;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.field:focus {
    outline: none; border-color: var(--navy-600);
    box-shadow: 0 0 0 3px rgba(38,64,124,.14);
}
textarea.field { resize: vertical; min-height: 110px; }

.form-note { font-size: .86rem; color: var(--muted); margin-top: 16px; }

.flash {
    display: flex; gap: 13px; align-items: flex-start;
    padding: 15px 18px; border-radius: 11px; margin-bottom: 22px;
    font-size: .96rem; border-left: 4px solid;
}
.flash i { margin-top: 3px; }
.flash-success { background: #EDF7F0; border-color: #1F7A45; color: #14532B; }
.flash-error   { background: #FDF1EF; border-color: #B4432C; color: #7A2A18; }

/* honeypot — off-screen rather than display:none, which some bots skip */
.hp-field {
    position: absolute !important; left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}

/* ---------- self-hosted captcha widget ---------- */
.captcha {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.captcha-main { display: flex; align-items: center; gap: 8px; }
.captcha-img {
    display: block; border-radius: 7px; border: 1px solid var(--line);
    width: 200px; height: 66px;
}
.captcha-refresh {
    background: var(--navy-050); border: 0; color: var(--navy-700);
    width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; font-size: .95rem;
    transition: background .18s ease, color .18s ease, transform .3s ease;
}
.captcha-refresh:hover { background: var(--gold-500); color: var(--navy-900); }
.captcha-refresh.spin i { animation: captchaSpin .5s ease; }
@keyframes captchaSpin { to { transform: rotate(360deg); } }

.captcha-entry { flex: 1; min-width: 190px; display: grid; gap: 5px; }
.captcha-entry label { font-size: .84rem; font-weight: 650; color: var(--navy-700); }
.captcha-entry input {
    padding: 11px 14px; border: 1px solid var(--line); border-radius: 9px;
    font: inherit; letter-spacing: .22em; text-transform: uppercase; width: 100%;
}
.captcha-entry input:focus {
    outline: none; border-color: var(--navy-600);
    box-shadow: 0 0 0 3px rgba(38,64,124,.14);
}
.captcha-entry small { font-size: .78rem; color: var(--muted); letter-spacing: 0; }

.captcha-brand {
    display: grid; justify-items: center; gap: 3px;
    padding-left: 14px; border-left: 1px solid var(--line);
    color: var(--muted); font-size: .62rem; line-height: 1.25;
    letter-spacing: .1em; text-transform: uppercase; text-align: center;
}
.captcha-brand i { font-size: 1.15rem; color: var(--gold-600); }

@media (max-width: 560px) {
    .captcha { gap: 12px; }
    .captcha-brand { display: none; }
    .captcha-img { width: 170px; height: 56px; }
}

/* ---------- online application form ---------- */
.apply-layout { display: grid; grid-template-columns: 340px 1fr; gap: 34px; align-items: start; }
.apply-side { position: sticky; top: 108px; }
.apply-main {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 40px 38px; box-shadow: var(--shadow-md);
}
.apply-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-top: 26px; }
.apply-full { grid-column: 1 / -1; }
.apply-fields { display: grid; gap: 14px; margin-top: 20px; }

.apply-label {
    display: block; font-size: .87rem; font-weight: 650;
    color: var(--navy-700); margin-bottom: 6px;
}
.req { color: #B4432C; }

/* file pickers: the real input is hidden, the label is the control */
.upload-box { position: relative; }
.upload-box input[type="file"] {
    position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.upload-box .form-upload {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 16px; border: 2px dashed var(--line); border-radius: 10px;
    color: var(--muted); font-size: .92rem; cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.upload-box .form-upload:hover { border-color: var(--gold-500); background: #FFFBF2; color: var(--navy-700); }
.upload-box .form-upload i { font-size: 1.1rem; color: var(--gold-600); }
.upload-box .form-file {
    display: none; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 8px; padding: 9px 13px; border-radius: 8px;
    background: var(--navy-050); font-size: .87rem; color: var(--navy-700);
}
.upload-box .form-file.show { display: flex; }
.upload-box .form-close { cursor: pointer; color: var(--muted); }
.upload-box .form-close:hover { color: #B4432C; }
.upload-box .form-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1024px) {
    .apply-layout { grid-template-columns: 1fr; }
    .apply-side { position: static; }
}
@media (max-width: 620px) {
    .apply-grid { grid-template-columns: 1fr; }
    .apply-main { padding: 30px 22px; }
}

/* The CI layout also loads the old main.css, which styles .form-control and
   .form-upload. These need to win on the application form. */
.upload-box { display: block; width: 100%; }
.upload-box input[type="file"].form-control {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; border: 0 !important;
    opacity: 0 !important; pointer-events: none !important;
    overflow: hidden; clip: rect(0 0 0 0);
}
.upload-box label.form-upload {
    display: flex !important; width: 100% !important;
    height: auto !important; margin: 0 !important;
    background: transparent !important;
}
.upload-box .form-file { width: 100%; }

/* Submit row: separated from the last field row so the button never crowds
   the upload controls above it. */
.apply-actions {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    margin-top: 34px; padding-top: 28px;
    border-top: 1px solid var(--line);
}
.apply-note { color: var(--muted); font-size: .88rem; }

@media (max-width: 620px) {
    .apply-actions { margin-top: 26px; padding-top: 22px; }
    .apply-actions .btn { width: 100%; }
}

/* main.css puts a 1px solid border + 4px radius on .form-file-group, which sat
   just outside the dashed label at a different radius and height. The dashed
   label is the control, so the wrapper carries no chrome of its own. */
.upload-box.form-file-group {
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
}
.apply-hint { font-weight: 500; color: var(--muted); font-size: .8rem; }

/* list of chosen files under a multi-select upload */
.upload-box .form-file + .form-file { margin-top: 6px; }

/* ---------- application form sections ---------- */
.apply-legend {
    display: flex; align-items: center; gap: 12px;
    font-family: 'Inter', sans-serif; font-size: .8rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--navy-700);
    /* short gold dashes sit ABOVE each heading, separating it from the section before */
    margin: 38px 0 18px; padding-top: 16px;
    border-top: 2px dashed var(--gold-500);
}
.apply-legend:first-of-type { margin-top: 10px; padding-top: 0; border-top: 0; }
.apply-legend > span {
    display: grid; place-items: center; flex-shrink: 0;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--gold-500); color: var(--navy-900);
    font-size: .8rem; letter-spacing: 0;
}

.declaration {
    background: var(--cream); border: 1px solid var(--line);
    border-left: 4px solid var(--gold-500);
    border-radius: var(--radius-sm); padding: 22px 24px;
}
.declaration ol { margin: 0 0 18px 18px; display: grid; gap: 10px; }
.declaration li { color: #3A3F4A; font-size: .95rem; }
.declaration-agree {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: .95rem; color: var(--navy-700); font-weight: 600; cursor: pointer;
}
.declaration-agree input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--navy-700); }

/* ---------- yes/no choice pair ---------- */
.choice-row { display: flex; gap: 10px; flex-wrap: wrap; }
.choice {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 20px; border: 1px solid var(--line); border-radius: 999px;
    background: #fff; cursor: pointer; font-size: .95rem; color: var(--ink);
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.choice:hover { border-color: var(--navy-600); }
.choice input { width: 16px; height: 16px; accent-color: var(--navy-700); cursor: pointer; }
.choice:has(input:checked) {
    border-color: var(--navy-700); background: var(--navy-050);
    color: var(--navy-700); font-weight: 650;
}
.choice input:focus-visible { outline: 2px solid var(--navy-600); outline-offset: 2px; }
.medical-detail[hidden] { display: none; }

/* ---------- application status modal ----------
   Shown by the "Check your application" panel on the admission page. Hand-rolled
   rather than Bootstrap's: the bundled build is 5.3.0-alpha1, which dropped the
   jQuery plugin API the page's other scripts rely on. */
.status-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.status-modal[hidden] { display: none; }
.status-modal-backdrop { position: absolute; inset: 0; background: rgba(11, 23, 51, .55); }

.status-modal-card {
    position: relative; z-index: 1; width: 100%; max-width: 470px;
    max-height: calc(100vh - 40px); overflow-y: auto;
    background: #fff; border-radius: var(--radius);
    border-top: 4px solid var(--gold-500);
    box-shadow: var(--shadow-lg); padding: 30px 32px 26px;
    text-align: center;
}
.status-modal-x {
    position: absolute; top: 10px; right: 14px;
    background: none; border: 0; font-size: 1.7rem; line-height: 1;
    color: var(--muted); cursor: pointer;
}
.status-modal-x:hover { color: var(--navy-700); }

.status-modal-eyebrow {
    margin: 0; font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.status-modal-name {
    margin: 6px 0 14px; font-family: 'Fraunces', serif; font-size: 1.45rem; color: var(--navy-700);
}

/* one class per state, so a new status only needs a rule here */
.status-modal-badge {
    display: inline-block; margin: 0 0 18px; padding: 7px 20px;
    border-radius: 999px; font-family: 'Inter', sans-serif;
    font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.status-modal-badge.is-new      { background: var(--navy-050); color: var(--navy-700); }
.status-modal-badge.is-waiting  { background: #FBF3E0; color: var(--gold-600); }
.status-modal-badge.is-approved { background: #E4F5EA; color: #1B7F4B; }
.status-modal-badge.is-declined { background: #FBE8E8; color: #A32A2A; }

.status-modal-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; text-align: left; }
.status-modal-table th,
.status-modal-table td {
    padding: 9px 2px; border-bottom: 1px solid var(--line);
    font-size: .92rem; vertical-align: top;
}
.status-modal-table th { width: 45%; color: var(--muted); font-weight: 600; }
.status-modal-table td { color: var(--ink); font-weight: 600; }

.status-modal-note {
    margin: 0 0 20px; padding: 13px 16px; text-align: left;
    background: var(--cream); border-left: 3px solid var(--gold-500);
    border-radius: var(--radius-sm); font-size: .93rem; color: #3A3F4A;
}

@media (max-width: 520px) {
    .status-modal-card { padding: 26px 20px 22px; }
    .status-modal-table th { width: 50%; }
}