/* ==========================================================================
   Hindu PU College Shirva | Jnana Chethana Education Trust
   Typeface: Inter (matching the reference institutional site)
   Palette: deep navy + gold, taken from the college logo and posters
   Mobile-first
   ========================================================================== */

:root {
  --navy: #0f2050;
  --navy-2: #16306f;
  --navy-3: #1f4193;
  --navy-ink: #0a1738;
  --gold: #f0b323;
  --gold-soft: #f7cf6a;
  --gold-dark: #c98f07;
  --red: #c4362a;
  --cream: #f7f6f2;
  --paper: #ffffff;
  --ink: #1d2433;
  --ink-soft: #5b6478;
  --line: #e4e6ec;
  --shadow-sm: 0 2px 10px rgba(15, 32, 80, 0.06);
  --shadow: 0 12px 34px rgba(15, 32, 80, 0.13);
  --radius: 10px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --header-h: 64px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }
svg { flex-shrink: 0; }

.container { width: min(1200px, 100% - 2rem); margin-inline: auto; }

h1, h2, h3, h4, h5 {
  font-family: var(--font);
  color: var(--navy);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.022em;
}

/* ------------------------------------------------------------------ */
/* Top utility bar                                                     */
/* ------------------------------------------------------------------ */
.topbar {
  background: var(--navy-ink);
  color: #c7d0e6;
  font-size: 0.78rem;
  font-weight: 500;
}
.topbar .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 38px;
}
.topbar-left { display: flex; gap: 1.2rem; align-items: center; min-width: 0; }
.topbar-left a { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.topbar-left a:hover { color: var(--gold); }
.topbar-left svg { width: 13px; height: 13px; }
.topbar-right { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.topbar-right .tlink { padding: 0.25rem 0.5rem; font-weight: 500; }
.topbar-right .tlink:hover { color: var(--gold); }
.topbar-btn {
  background: var(--gold); color: var(--navy-ink);
  font-weight: 700; font-size: 0.76rem; letter-spacing: 0.02em;
  padding: 0.42rem 0.95rem; border-radius: 4px;
  display: inline-flex; align-items: center; gap: 0.35rem;
  transition: background 0.2s; white-space: nowrap; line-height: 1;
}
.topbar-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.topbar-btn:hover { background: var(--gold-soft); }
.topbar .t-hide { display: none; }
@media (min-width: 720px) { .topbar .t-hide { display: inline-flex; } }

/* ------------------------------------------------------------------ */
/* Header with angled brand panel                                      */
/* ------------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--paper);
  box-shadow: 0 2px 16px rgba(15, 32, 80, 0.1);
}
.header-inner {
  display: flex; align-items: stretch; gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  display: flex; align-items: center; gap: 0.75rem;
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-3) 100%);
  color: #fff;
  padding: 0.6rem 2.4rem 0.6rem 1rem;
  margin-left: calc(-1 * max(1rem, (100vw - 1200px) / 2));
  padding-left: max(1rem, (100vw - 1200px) / 2);
  clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%);
  position: relative; min-width: 0;
}
.brand::after {
  content: ""; position: absolute; left: 0; right: 26px; bottom: 0;
  height: 3px; background: var(--gold);
}
/* The college crest and the Trust emblem sit side by side, both on white
   discs with a gold ring so they lift off the navy panel. */
.brand-marks { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.brand-marks img,
.brand img {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: contain; background: #fff; padding: 3px;
  flex-shrink: 0;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 3px rgba(240, 179, 35, 0.18);
}
.brand-text { min-width: 0; }
/* The college and the Trust carry equal billing: identical size, weight and
   spacing, separated only by colour, so neither name reads as a subtitle of
   the other. */
.brand-text .b-name,
.brand-text .b-sub {
  display: block; font-weight: 800; font-size: 0.92rem;
  line-height: 1.2; letter-spacing: -0.02em;
}
.brand-text .b-name { color: #fff; }
.brand-text .b-sub { color: var(--gold); margin-top: 2px; }

.nav-toggle {
  margin-left: auto; align-self: center;
  background: var(--navy); color: #fff; border: 0;
  width: 42px; height: 42px; border-radius: 6px;
  display: grid; place-items: center; flex-shrink: 0;
}
.nav-toggle svg { width: 20px; height: 20px; }

/* ---------- Navigation ---------- */
.main-nav {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(330px, 88vw);
  background: var(--navy);
  transform: translateX(105%);
  transition: transform 0.3s ease;
  z-index: 300; overflow-y: auto;
  padding: 0.9rem 0 3rem;
  overscroll-behavior: contain;
}
.main-nav.open { transform: translateX(0); }
.nav-close {
  background: rgba(255,255,255,0.1); border: 0; color: #fff;
  width: 40px; height: 40px; border-radius: 6px; font-size: 1.1rem;
  margin: 0 1rem 0.8rem auto; display: block;
}
.nav-list { display: flex; flex-direction: column; }
.nav-list > li { border-bottom: 1px solid rgba(255,255,255,0.08); }
.nav-list > li > a,
.nav-list > li > .drop-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  width: 100%; background: none; border: 0; text-align: left;
  color: #e9edf8; font-weight: 600; font-size: 0.97rem;
  padding: 0.85rem 1.2rem; font-family: inherit;
}
.nav-list > li > a:hover, .nav-list > li > .drop-btn:hover { color: var(--gold); }
.nav-list > li > a.active { color: var(--gold); }
.drop-btn .caret { transition: transform 0.25s; width: 13px; height: 13px; }
.nav-list > li.open > .drop-btn .caret { transform: rotate(180deg); }

.drop-menu {
  display: none; background: rgba(0,0,0,0.22);
  padding: 0.3rem 0;
}
.nav-list > li.open .drop-menu { display: block; }
.drop-menu a {
  display: block; color: #bfc9e2; font-size: 0.9rem; font-weight: 500;
  padding: 0.62rem 1.2rem 0.62rem 2rem;
}
.drop-menu a:hover, .drop-menu a.active { color: var(--gold); }

.nav-cta-wrap { padding: 1.2rem; }
.nav-cta {
  display: block; text-align: center; background: var(--gold);
  color: var(--navy-ink); font-weight: 700; padding: 0.8rem;
  border-radius: 6px; font-size: 0.95rem;
}

.nav-backdrop {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(10, 18, 40, 0.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s, visibility 0.3s; z-index: 250;
}
.nav-backdrop.show { visibility: visible; }
.nav-backdrop.show { opacity: 1; pointer-events: auto; }

/* The brand lockup and the nine nav items have to share the 1200px container,
   and they did not fit: the brand was the only shrinkable item, so the panel
   collapsed and the clip-path cut the end off the Trust name. Note the
   container is capped at 1200px, so a wider window does not add room — the
   sizes below are what make the two fit, and the breakpoint only keeps the
   drawer nav on narrower screens.
   Keep this breakpoint in sync with DESKTOP in js/main.js. */
@media (min-width: 1240px) {
  .nav-toggle, .nav-close, .nav-backdrop, .nav-cta-wrap { display: none; }
  .main-nav {
    position: static; transform: none; width: auto; background: none;
    padding: 0; overflow: visible; margin-left: auto; display: flex; align-items: stretch;
  }
  .nav-list { flex-direction: row; align-items: stretch; }
  .nav-list > li { border-bottom: 0; display: flex; position: relative; }
  .nav-list > li > a,
  .nav-list > li > .drop-btn {
    color: var(--navy); font-size: 0.875rem; font-weight: 600;
    padding: 0 0.38rem; align-items: center; letter-spacing: -0.01em;
    position: relative; white-space: nowrap;
  }
  .nav-list > li > a::after,
  .nav-list > li > .drop-btn::after {
    content: ""; position: absolute; left: 0.5rem; right: 0.5rem; bottom: 14px;
    height: 2px; background: var(--gold); transform: scaleX(0);
    transition: transform 0.22s; transform-origin: left;
  }
  .nav-list > li:hover > a::after,
  .nav-list > li:hover > .drop-btn::after,
  .nav-list > li > a.active::after { transform: scaleX(1); }
  .nav-list > li > a.active { color: var(--navy); }
  .drop-btn .caret { width: 11px; height: 11px; margin-left: 0.28rem; opacity: 0.65; }
  .nav-list > li.open > .drop-btn .caret { transform: none; }

  .drop-menu {
    display: block; position: absolute; top: 100%; left: 0;
    min-width: 254px; background: var(--paper);
    border-top: 3px solid var(--gold);
    box-shadow: var(--shadow); padding: 0.45rem 0;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  }
  .nav-list > li:hover .drop-menu,
  .nav-list > li:focus-within .drop-menu {
    opacity: 1; visibility: visible; transform: none;
  }
  .drop-menu a {
    color: var(--ink); font-size: 0.875rem; padding: 0.6rem 1.1rem;
    border-left: 3px solid transparent; transition: 0.16s;
  }
  .drop-menu a:hover, .drop-menu a.active {
    color: var(--navy); background: var(--cream); border-left-color: var(--gold);
  }
  .nav-list > li:last-child .drop-menu { left: auto; right: 0; }
  /* min-width:auto overrides the shrinkable default above, so the panel is
     never squeezed narrower than the two names it contains. */
  .brand { padding-right: 1.85rem; min-width: auto; }
  .brand-marks { gap: 0.4rem; }
  .brand-marks img, .brand img { width: 42px; height: 42px; }
  .brand-text { min-width: auto; }
  .brand-text .b-name,
  .brand-text .b-sub {
    font-size: 0.98rem; white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .brand { padding-right: 1.5rem; gap: 0.45rem; }
  .brand-marks { gap: 0.25rem; }
  .brand-marks img, .brand img { width: 28px; height: 28px; padding: 2px; border-width: 1.5px; box-shadow: 0 0 0 2px rgba(240, 179, 35, 0.16); }
  /* Two crests leave the phone lockup tight. These sizes keep the longer
     Trust name on one line instead of breaking it across two. */
  .brand-text { min-width: auto; }
  .brand-text .b-name,
  .brand-text .b-sub { font-size: 0.76rem; line-height: 1.25; }
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font-weight: 600; font-size: 0.93rem; border-radius: 6px;
  padding: 0.78rem 1.5rem; border: 2px solid transparent;
  transition: 0.2s; letter-spacing: -0.01em;
}
.btn svg { width: 16px; height: 16px; }
.btn-gold { background: var(--gold); color: var(--navy-ink); }
.btn-gold:hover { background: var(--gold-soft); transform: translateY(-2px); }
.btn-outline { border-color: rgba(255,255,255,0.7); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,0.13); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-3); transform: translateY(-2px); }
.btn-ghost { border-color: var(--navy); color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: #fff; }

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */
.hero {
  position: relative; color: #fff;
  /* Fill the screen: viewport height minus the topbar + header stack.
     svh keeps it correct on mobile where the browser UI resizes the viewport;
     the vh line above it stands in on Safari 15.3 and older, which drops the
     whole declaration rather than ignoring just the unit. */
  min-height: calc(100vh - var(--top-stack, 108px));
  min-height: calc(100svh - var(--top-stack, 108px));
  display: flex; align-items: flex-end; isolation: isolate;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -3; background-size: cover; background-position: center top; }
/* Background film, filling the hero edge to edge. Anchored to the top so the
   whole crop is taken off the bottom: the top of each shot carries the
   subject, and the bottom is where the producer's watermark sits. */
/* Hidden until the inline script in index.html has given it a source and
   playback has actually started, so a blank or frozen frame never covers the
   still. Phones get hero-loop-mobile.mp4 (24s, ~1.2 MB) instead of the full
   13 MB film: playing on mobile matters, but not at that price on mobile data. */
.hero-video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  pointer-events: none;
  /* visibility as well as opacity: Safari paints its own start-playback
     button over a paused video, and an opacity of 0 alone does not reliably
     keep that overlay off the hero. */
  opacity: 0; visibility: hidden; transition: opacity .6s ease;
}
.hero-video.is-on { opacity: 1; visibility: visible; }
/* Safari draws a grey play button and a controls bar on any video it has not
   started. This film is decorative and sits behind the headline, so both are
   suppressed outright. */
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-panel,
.hero-video::-webkit-media-controls-start-playback-button,
.hero-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0 !important;
}
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,23,56,0.32) 0%, rgba(10,23,56,0.5) 45%, rgba(10,23,56,0.94) 100%);
}
.hero-content { padding: 5rem 0 3rem; max-width: 800px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--gold); color: var(--navy-ink);
  font-weight: 700; font-size: 0.74rem; letter-spacing: 0.07em;
  text-transform: uppercase; border-radius: 4px; padding: 0.4rem 0.9rem;
  margin-bottom: 1.1rem;
}
.hero h1 {
  color: #fff; font-size: clamp(1.9rem, 6vw, 3.3rem); font-weight: 800;
  letter-spacing: -0.03em; text-shadow: 0 3px 20px rgba(0,0,0,0.4);
}
.hero-assoc {
  color: var(--gold-soft); font-weight: 600; margin-top: 0.7rem;
  font-size: clamp(0.9rem, 2.6vw, 1.08rem);
}
/* The Trust name carries the same weight as the college name in the hero. */
.hero-assoc b {
  color: var(--gold); font-weight: 800; letter-spacing: -0.01em;
}
.hero-lede {
  margin-top: 1rem; color: #dde3f2; max-width: 62ch;
  font-size: clamp(0.95rem, 2.4vw, 1.06rem);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.7rem; }
.hero-content { padding-block: clamp(2rem, 6vh, 5rem) clamp(1.5rem, 4vh, 3rem); }
@media (max-width: 620px) {
  /* On phones the topbar + header is a little shorter; trim the offset a touch */
  .hero { min-height: calc(100svh - 96px); }
  .hero-actions .btn { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* Academic Revolution band                                            */
/* ------------------------------------------------------------------ */
/* Lifted from the college's own admission poster, where the two words are
   stacked tight, gold over white, with "Taking Place At SHIRVA" beneath.
   The type is the whole design here, so nothing else sits in this band. */
.revolution {
  background: var(--navy-ink); color: #fff;
  padding: 3.4rem 0 3.6rem; position: relative; overflow: hidden;
  border-top: 3px solid var(--gold);
}
/* A single wash off the top left, so the flat navy has some depth behind
   the type without becoming a gradient panel. */
.revolution::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 12% 0%, rgba(31, 65, 147, 0.55), transparent 62%);
}
.revolution .container { position: relative; }
.rev-eyebrow {
  color: var(--gold); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.9rem;
}
.rev-head {
  display: flex; flex-direction: column;
  font-weight: 800; letter-spacing: -0.035em; line-height: 0.88;
  font-size: clamp(2.6rem, 9vw, 5.6rem);
  text-transform: uppercase; color: #fff; margin: 0;
}
.rev-head .rev-1 { color: var(--gold); }
.rev-head .rev-2 { color: #fff; }
.rev-sub {
  margin-top: 1rem; font-size: clamp(0.95rem, 2.4vw, 1.35rem);
  font-weight: 600; color: #c7d0e6; letter-spacing: 0.01em;
}
.rev-sub span {
  color: var(--gold); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em; margin-left: 0.15em;
}

/* ------------------------------------------------------------------ */
/* Notice ticker                                                       */
/* ------------------------------------------------------------------ */
/* Gold rule so the notices bar reads as a deliberate band under the hero
   rather than red bleeding out of the bottom of the film. */
.ticker { background: var(--red); color: #fff; display: flex; overflow: hidden; border-top: 3px solid var(--gold); }
.ticker-label {
  background: var(--navy-ink); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 1rem; flex-shrink: 0; z-index: 1;
}
.ticker-label svg { width: 14px; height: 14px; }
.ticker-track { overflow: hidden; flex: 1; display: flex; align-items: center; }
.ticker-move {
  display: inline-flex; gap: 3.5rem; white-space: nowrap;
  padding-left: 100%; animation: ticker 34s linear infinite;
  font-weight: 500; font-size: 0.88rem;
}
.ticker-move a:hover { text-decoration: underline; }
.ticker-track:hover .ticker-move { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-100%); } }

/* ------------------------------------------------------------------ */
/* Sections                                                            */
/* ------------------------------------------------------------------ */
.section { padding: 3.6rem 0; }
.section.alt { background: var(--paper); }
.section.navy { background: var(--navy); color: #ccd5ea; }
.section.navy h2, .section.navy h3, .section.navy h4 { color: #fff; }
.section.tight { padding: 2.4rem 0; }

.sec-head { max-width: 740px; margin-bottom: 2.1rem; }
.sec-kicker {
  color: var(--red); font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; font-size: 0.73rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.section.navy .sec-kicker { color: var(--gold); }
.sec-head h2 {
  font-size: clamp(1.55rem, 4.4vw, 2.25rem); margin-top: 0.55rem;
  font-weight: 800;
}
.sec-head p { color: var(--ink-soft); margin-top: 0.7rem; font-size: 1rem; }
.section.navy .sec-head p { color: #aeb9d6; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .sec-kicker { justify-content: center; }

/* Grids
   Flexbox (not CSS grid) so an incomplete last row is centered instead of
   left-aligned. Children keep a fixed flex-basis per breakpoint and do not
   grow, so every card stays the same width and proportion. */
.grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.15rem; }
.grid > * { flex: 0 1 auto; min-width: 0; }

/* mobile defaults */
.grid-2 > * { flex-basis: 100%; }
.grid-3 > * { flex-basis: 100%; }                   /* 1 per row */
.grid-4 > * { flex-basis: calc(50% - 0.575rem); }   /* 2 per row */

@media (min-width: 680px) {
  .grid-2 > * { flex-basis: calc(50% - 0.575rem); }
}
@media (min-width: 1000px) {
  .grid-3 > * { flex-basis: calc(33.333% - 0.767rem); } /* 3 per row */
  .grid-4 > * { flex-basis: calc(25% - 0.863rem); }     /* 4 per row */
}

/* On phones, icon feature cards (any grid) read better as full-width
   horizontal rows: icon on the left, text on the right. Photo cards and
   stream/course cards have no .icon-badge, so they keep their 2-up layout;
   vm-cards keep their vertical feature-block style. */
@media (max-width: 559px) {
  .grid > .card:has(> .icon-badge):not(.vm-card) {
    flex-basis: 100%;
    display: grid; grid-template-columns: auto 1fr;
    column-gap: 0.9rem; align-items: start; text-align: left;
  }
  .grid > .card:has(> .icon-badge):not(.vm-card) .icon-badge {
    grid-row: 1 / span 2; margin-bottom: 0;
  }
}

.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #d3d8e4; }
.card h3 { font-size: 1.08rem; margin-bottom: 0.45rem; }
.card p { color: var(--ink-soft); font-size: 0.93rem; }
/* tighter padding when cards sit 2-up on phones */
@media (max-width: 560px) {
  .card { padding: 1.15rem; }
  .icon-badge { width: 40px; height: 40px; margin-bottom: 0.7rem; }
  .icon-badge svg { width: 19px; height: 19px; }
}

.icon-badge {
  width: 46px; height: 46px; border-radius: 8px;
  background: var(--navy); color: var(--gold);
  display: grid; place-items: center; margin-bottom: 1rem;
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em;
}
.icon-badge svg { width: 22px; height: 22px; }
.icon-badge.gold { background: var(--gold); color: var(--navy); }

.chip {
  display: inline-block; background: var(--cream); border: 1px solid var(--line);
  color: var(--navy); border-radius: 4px; font-size: 0.76rem; font-weight: 600;
  padding: 0.28rem 0.65rem; margin: 0.2rem 0.2rem 0 0;
}
.chip.gold { background: #fdf4dc; border-color: #f0dda2; }

/* Stream cards */
.stream-card { border-top: 4px solid var(--gold); display: flex; flex-direction: column; }
.stream-card .code { font-weight: 800; font-size: 1.5rem; color: var(--navy); letter-spacing: -0.02em; }
.stream-card .full { color: var(--ink-soft); font-size: 0.86rem; margin-top: 0.25rem; }
.stream-card ul { margin-top: 0.95rem; }
.stream-card li {
  font-size: 0.9rem; padding: 0.38rem 0 0.38rem 1.4rem; position: relative;
  border-bottom: 1px solid var(--line); color: var(--ink-soft);
}
.stream-card li:last-child { border-bottom: 0; }
.stream-card li::before {
  content: ""; position: absolute; left: 0; top: 0.78rem;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold-dark);
}
.stream-tag {
  align-self: flex-start; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.09em; font-weight: 700; color: #fff;
  background: var(--red); padding: 0.24rem 0.6rem; border-radius: 3px;
  margin-bottom: 0.85rem;
}
.stream-tag.sci { background: var(--navy-3); }

/* On phones the 2-up course cards turn tall and narrow because the subject
   lists wrap heavily. Give each card the full width so it reads as a compact,
   snug block instead of an elongated column. */
@media (max-width: 559px) {
  .grid-4 > .stream-card { flex-basis: 100%; }
  .stream-card { padding: 1.2rem 1.3rem; }
  .stream-card .code { font-size: 1.35rem; }
  .stream-card .full { font-size: 0.85rem; }
  .stream-card ul { margin-top: 0.7rem; }
  .stream-card li { padding: 0.34rem 0 0.34rem 1.35rem; font-size: 0.88rem; }
  .stream-card li::before { top: 0.72rem; }
  .stream-tag { margin-bottom: 0.65rem; }
}

/* Split */
.split { display: grid; gap: 1.9rem; align-items: center; }
@media (min-width: 920px) { .split { grid-template-columns: 1.05fr 1fr; gap: 3.2rem; } }
.split.reverse .split-media { order: 2; }
.split-media { position: relative; }
.split-media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; object-fit: cover; }
.split-media .accent-frame {
  position: absolute; inset: 16px -16px -16px 16px; z-index: -1;
  border: 3px solid var(--gold); border-radius: var(--radius);
}
.split-body h2 { font-size: clamp(1.5rem, 4.2vw, 2.1rem); margin: 0.55rem 0 0.95rem; font-weight: 800; }
.split-body p { color: var(--ink-soft); }
.split-body p + p { margin-top: 0.85rem; }

.tick-list { margin-top: 1.2rem; display: grid; gap: 0.6rem; }
.tick-list li {
  display: flex; gap: 0.6rem; font-size: 0.94rem; font-weight: 500;
  color: var(--ink); align-items: flex-start;
}
.tick-list li svg { width: 17px; height: 17px; color: var(--gold-dark); margin-top: 3px; }
.section.navy .tick-list li { color: #ccd5ea; }

/* Quote */
.quote-card {
  background: var(--paper); border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: 1.7rem; box-shadow: var(--shadow-sm);
  border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.quote-card p { color: var(--ink-soft); font-style: italic; font-size: 0.98rem; }
.quote-card p + p { margin-top: 0.8rem; }
.quote-card .who { margin-top: 1.1rem; font-weight: 700; color: var(--navy); font-style: normal; }
.quote-card .who span { display: block; font-weight: 500; color: var(--red); font-size: 0.84rem; margin-top: 2px; }

/* Faculty */
.faculty-card { text-align: center; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.faculty-card .photo { aspect-ratio: 1 / 1.08; overflow: hidden; background: #e9ecf4; }
.faculty-card .photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.4s; }
.faculty-card:hover .photo img { transform: scale(1.04); }
.faculty-card .photo .initials {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-size: 2.4rem; font-weight: 700; color: var(--navy-3);
  background: linear-gradient(160deg, #eef1f9, #d9dfef); letter-spacing: 0.02em;
}
.faculty-card .info { padding: 1rem 0.9rem 1.2rem; }
.faculty-card h3 { font-size: 0.98rem; }
.faculty-card .role { color: var(--red); font-weight: 600; font-size: 0.82rem; margin-top: 0.2rem; }
.faculty-card .meta { color: var(--ink-soft); font-size: 0.79rem; margin-top: 0.4rem; }

.dept-block { margin-bottom: 2.8rem; scroll-margin-top: 100px; }
.dept-title {
  display: flex; align-items: center; gap: 0.8rem;
  font-size: 1.15rem; margin-bottom: 1.2rem; font-weight: 700;
}
.dept-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* News */
.news-card { display: flex; gap: 1rem; align-items: flex-start; }
.news-date {
  flex-shrink: 0; background: var(--navy); color: #fff; border-radius: 6px;
  text-align: center; padding: 0.55rem 0.7rem; min-width: 66px;
}
.news-date b { display: block; font-size: 1.15rem; color: var(--gold); line-height: 1.15; font-weight: 800; }
.news-date span { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: #b9c4e2; }
.news-card h3 { font-size: 1rem; }
.news-card .tag {
  display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--red); margin-bottom: 0.3rem;
}
.news-card p { font-size: 0.89rem; margin-top: 0.35rem; }

/* Events */
.event-card { padding: 0; overflow: hidden; }
.event-card .ev-img {
  aspect-ratio: 16/9; background: linear-gradient(135deg, var(--navy-2), var(--navy-3));
  display: grid; place-items: center; color: var(--gold); overflow: hidden;
}
.event-card .ev-img svg { width: 42px; height: 42px; opacity: 0.9; }
/* A card with no photograph keeps a slim band rather than a 16/9 navy block,
   which otherwise reads as an image that failed to load. */
.event-card .ev-img.ev-icon { aspect-ratio: auto; padding: 1.5rem 0; }
.event-card .ev-img.ev-icon svg { width: 30px; height: 30px; }
.event-card .ev-img img { width: 100%; height: 100%; object-fit: cover; }
.event-card .ev-body { padding: 1.2rem 1.3rem 1.4rem; }
.event-card .ev-when {
  color: var(--red); font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.event-card h3 { margin-top: 0.35rem; }

/* Gallery */
.gallery-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; }
.gallery-grid > * { flex: 0 1 auto; flex-basis: calc(50% - 0.425rem); }
@media (min-width: 820px) { .gallery-grid > * { flex-basis: calc(33.333% - 0.567rem); } }
/* Centring a part-filled last row looks right on a big gallery, but a grid of
   only two frames ends up floating away from its own heading. Left-align those. */
.gallery-grid:has(> :last-child:nth-child(-n+2)) { justify-content: flex-start; }
.g-item {
  border-radius: 8px; overflow: hidden; cursor: pointer; position: relative;
  border: 1px solid var(--line); background: #fff;
}
.g-item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform 0.35s; }
.g-item:hover img { transform: scale(1.05); }
.g-item .g-cap {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(transparent, rgba(10,23,56,0.88));
  color: #fff; font-size: 0.78rem; font-weight: 500; padding: 1.6rem 0.7rem 0.6rem;
}
.g-item.tall img { aspect-ratio: 3/4; }

.video-frame {
  position: relative; width: 100%; aspect-ratio: 16/9;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #000;
}
.video-frame iframe,
.video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame video { background: #000; object-fit: contain; }
/* Phone shot clips are vertical, so they get a portrait box instead of 16/9. */
.video-frame.portrait { aspect-ratio: 9/16; max-width: 340px; margin-inline: auto; }
@media (max-width: 559px) { .video-frame.portrait { max-width: 100%; aspect-ratio: 3/4; } }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 400; background: rgba(8, 14, 32, 0.93);
  display: none; align-items: center; justify-content: center; padding: 1.2rem;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 96vw; max-height: 88vh; border-radius: 6px; object-fit: contain; }
.lightbox .lb-close {
  position: absolute; top: 0.9rem; right: 0.9rem; background: rgba(255,255,255,0.14);
  color: #fff; border: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 1.3rem;
}

/* Assure list. The li rule sizes the tick for every item, so a list item
   without .assure-item (as on the President's message, a light page where the
   dark card styling below would vanish) still gets a small gold tick instead
   of an unconstrained full-width SVG. */
.assure-list { display: grid; gap: 0.75rem; }
@media (min-width: 820px) { .assure-list { grid-template-columns: repeat(2, 1fr); } }
.assure-list li { display: flex; gap: 0.7rem; align-items: flex-start; }
.assure-list li svg { flex: 0 0 17px; width: 17px; height: 17px; color: var(--gold-dark); margin-top: 4px; }
.assure-item {
  display: flex; gap: 0.7rem; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
  padding: 0.9rem 1rem; font-size: 0.92rem; align-items: flex-start;
}
.assure-item svg { width: 17px; height: 17px; color: var(--gold); margin-top: 3px; }

/* Page hero */
.page-hero {
  background: linear-gradient(rgba(10,23,56,0.86), rgba(10,23,56,0.93)), var(--ph-img, none) center/cover;
  background-color: var(--navy); color: #fff; padding: 3.2rem 0 2.6rem;
}
.page-hero h1 { color: #fff; font-size: clamp(1.7rem, 5vw, 2.5rem); font-weight: 800; }
.page-hero .crumb {
  color: var(--gold-soft); font-weight: 600; font-size: 0.8rem;
  margin-bottom: 0.55rem; letter-spacing: 0.02em;
}
.page-hero .crumb a:hover { color: #fff; }
.page-hero p.lede { color: #bcc7e2; max-width: 64ch; margin-top: 0.7rem; font-size: 1rem; }

/* Tables */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }
table.inst { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 0.9rem; }
table.inst th {
  background: var(--navy); color: #fff; text-align: left;
  padding: 0.8rem 1rem; font-weight: 600; white-space: nowrap; font-size: 0.85rem;
}
table.inst td { padding: 0.72rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
table.inst td:first-child { color: var(--ink); font-weight: 600; }
table.inst tr:last-child td { border-bottom: 0; }
table.inst tr:nth-child(even) td { background: #fafbfc; }

/* Placeholder notice */
.notice-box {
  background: #fffaf0; border: 1px dashed #e3c98f; border-radius: var(--radius);
  padding: 1.5rem 1.6rem; display: flex; gap: 0.9rem; align-items: flex-start;
}
.notice-box svg { width: 20px; height: 20px; color: var(--gold-dark); margin-top: 2px; }
.notice-box b { display: block; color: var(--navy); margin-bottom: 0.25rem; font-size: 0.98rem; }
.notice-box p { color: var(--ink-soft); font-size: 0.92rem; }

/* Contact */
.contact-grid { display: grid; gap: 1.6rem; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1fr 1.05fr; gap: 2.4rem; } }
.info-tile {
  display: flex; gap: 1rem; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; padding: 1.1rem 1.2rem; margin-bottom: 0.85rem;
}
.info-tile .icon-badge { margin: 0; width: 42px; height: 42px; flex-shrink: 0; }
.info-tile b { color: var(--navy); display: block; font-size: 0.95rem; margin-bottom: 0.2rem; }
.info-tile p, .info-tile a { color: var(--ink-soft); font-size: 0.9rem; }
.info-tile a:hover { color: var(--red); }

.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem; box-shadow: var(--shadow-sm);
}
.form-card h3 { margin-bottom: 0.35rem; font-size: 1.15rem; }
.form-card .form-note { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 1.3rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; font-size: 0.85rem; color: var(--navy); margin-bottom: 0.35rem; }
.field input, .field textarea, .field select {
  width: 100%; border: 1.5px solid var(--line); border-radius: 6px;
  padding: 0.72rem 0.9rem; font: inherit; font-size: 0.94rem; background: #fbfbfc;
  color: var(--ink); transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0; border-color: var(--navy-3); background: #fff;
  box-shadow: 0 0 0 3px rgba(31, 65, 147, 0.12);
}
.field textarea { min-height: 118px; resize: vertical; }
.field .err { color: var(--red); font-size: 0.78rem; font-weight: 500; display: none; margin-top: 0.28rem; }
.field.invalid input, .field.invalid textarea { border-color: var(--red); }
.field.invalid .err { display: block; }
.form-row { display: grid; gap: 0 1rem; }
@media (min-width: 620px) { .form-row { grid-template-columns: 1fr 1fr; } }

.map-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); margin-top: 1.3rem; }
.map-frame iframe { width: 100%; height: 320px; border: 0; display: block; }

/* Captcha */
.captcha-row { display: flex; gap: 0.65rem; align-items: center; flex-wrap: wrap; }
.captcha-box { background: var(--navy); border-radius: 6px; padding: 0.25rem; display: inline-flex; align-items: center; gap: 0.35rem; }
.captcha-box canvas { border-radius: 4px; display: block; }
.captcha-refresh {
  background: rgba(255,255,255,0.12); color: var(--gold); border: 0;
  width: 38px; height: 38px; border-radius: 5px; display: grid; place-items: center;
}
.captcha-refresh svg { width: 16px; height: 16px; }
.captcha-row input { flex: 1; min-width: 130px; }

/* CTA band */
.cta-band {
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-3) 100%);
  color: #fff; border-radius: var(--radius); padding: 2.1rem 1.7rem;
  display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center;
  justify-content: space-between; box-shadow: var(--shadow);
  border-left: 5px solid var(--gold);
}
.cta-band h3 { color: #fff; font-size: clamp(1.15rem, 3.4vw, 1.5rem); font-weight: 700; }
.cta-band p { color: #bcc7e2; font-size: 0.93rem; margin-top: 0.3rem; }

/* Footer */
.site-footer { background: var(--navy-ink); color: #a8b4d0; margin-top: 3.5rem; }
.footer-top { border-top: 4px solid var(--gold); padding: 3rem 0 2rem; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 820px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; } }
.f-brand { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 1rem; }
.f-brand .brand-marks { gap: 0.45rem; }
.f-brand img {
  width: 50px; height: 50px; border-radius: 50%; background: #fff; padding: 3px;
  object-fit: contain;
  border: 2px solid var(--gold); box-shadow: 0 0 0 3px rgba(240, 179, 35, 0.16);
  flex-shrink: 0;
}
/* Equal billing again, matching the header lockup exactly. */
.f-brand b,
.f-brand span {
  display: block; font-size: 0.97rem; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.2;
}
.f-brand b { color: #fff; }
.f-brand span { color: var(--gold); margin-top: 2px; }
.site-footer p { font-size: 0.88rem; }
.site-footer h4 { color: #fff; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1.1rem; font-weight: 700; }
.site-footer h4::after { content: ""; display: block; width: 26px; height: 2px; background: var(--gold); margin-top: 0.5rem; }
.f-links li { margin-bottom: 0.5rem; }
.f-links a { font-size: 0.88rem; transition: 0.2s; }
.f-links a:hover { color: var(--gold); padding-left: 4px; }
.f-contact li { display: flex; gap: 0.6rem; margin-bottom: 0.7rem; font-size: 0.87rem; align-items: flex-start; }
.f-contact svg { width: 15px; height: 15px; color: var(--gold); margin-top: 3px; }
.f-social { display: flex; gap: 0.5rem; margin-top: 1.1rem; }
.f-social a {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: rgba(255,255,255,0.07); border-radius: 6px; transition: 0.2s;
}
.f-social a:hover { background: var(--gold); color: var(--navy-ink); }
.f-social svg { width: 17px; height: 17px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.09);
  padding: 1.1rem 0; font-size: 0.79rem; text-align: center; color: #7d8bad;
}

/* Floating actions — kept small and understated so they assist without
   shouting over the page content. */
.float-wa {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 180;
  width: 46px; height: 46px; border-radius: 50%;
  background: #128c4b; color: #fff; display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.16);
  opacity: 0.92; transition: transform 0.2s, opacity 0.2s;
}
.float-wa:hover { transform: translateY(-2px); opacity: 1; }
.float-wa svg { width: 22px; height: 22px; }
.back-top {
  position: fixed; right: 1.15rem; bottom: 4.4rem; z-index: 180;
  width: 38px; height: 38px; border-radius: 8px; border: 0;
  background: rgba(15,29,64,0.9); color: #fff;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: 0.25s;
  box-shadow: 0 3px 10px rgba(0,0,0,0.14);
}
.back-top:hover { background: var(--navy); }
.back-top svg { width: 16px; height: 16px; }
.back-top.show { opacity: 0.9; pointer-events: auto; }
.back-top.show:hover { opacity: 1; }
@media (max-width: 560px) {
  .float-wa { width: 42px; height: 42px; }
  .float-wa svg { width: 20px; height: 20px; }
  .back-top { width: 34px; height: 34px; bottom: 4rem; }
}

/* A quiet pull quote from the President's message for the home page. Kept
   understated on purpose so it reads as a note, not a banner. */
.pres-quote {
  display: flex; gap: 1.15rem; align-items: flex-start;
  background: var(--cream); border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: 1.5rem 1.7rem;
}
.pres-quote img {
  width: 52px; height: 52px; border-radius: 50%; background: #fff;
  padding: 2px; flex-shrink: 0; object-fit: cover; border: 1px solid var(--line);
}
.pres-quote p {
  color: var(--navy); font-size: 1.02rem; line-height: 1.65;
  font-weight: 500; margin: 0;
}
.pres-quote .pq-who {
  margin-top: 0.8rem; font-size: 0.82rem; font-weight: 700; color: var(--navy);
}
.pres-quote .pq-who span {
  display: block; font-weight: 600; color: var(--ink-soft);
  font-size: 0.78rem; margin-top: 1px;
}
.pres-quote .pq-link {
  display: inline-block; margin-top: 0.7rem; font-size: 0.82rem;
  font-weight: 700; color: var(--red); border-bottom: 1px solid transparent;
}
.pres-quote .pq-link:hover { border-bottom-color: var(--red); }
@media (max-width: 559px) {
  .pres-quote { padding: 1.25rem; gap: 0.85rem; }
  .pres-quote img { width: 42px; height: 42px; }
  .pres-quote p { font-size: 0.95rem; }
}

/* Video grid on the Videos page */
.video-grid { display: grid; gap: 1.15rem; }
@media (min-width: 820px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }

/* Trust banner used on the President's message page */
.trust-banner {
  display: flex; gap: 1.1rem; align-items: center;
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-3) 100%);
  border-radius: var(--radius); padding: 1.5rem 1.6rem;
  border-left: 5px solid var(--gold); margin-bottom: 1.8rem;
}
.trust-banner img {
  width: 74px; height: 74px; border-radius: 50%; background: #fff;
  padding: 3px; flex-shrink: 0; object-fit: cover;
  border: 2px solid var(--gold); box-shadow: 0 0 0 4px rgba(240, 179, 35, 0.18);
}
.trust-banner .tb-kicker {
  display: inline-block; font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--navy-ink); background: var(--gold);
  padding: 0.22rem 0.6rem; border-radius: 3px; margin-bottom: 0.5rem;
}
.trust-banner h2 { color: #fff; font-size: 1.3rem; margin: 0; letter-spacing: -0.02em; }
.trust-banner p { color: var(--gold-soft); font-size: 0.9rem; margin: 0.3rem 0 0; }
@media (max-width: 559px) {
  .trust-banner { flex-direction: column; align-items: flex-start; gap: 0.9rem; padding: 1.25rem; }
  .trust-banner img { width: 62px; height: 62px; }
  .trust-banner h2 { font-size: 1.12rem; }
}

/* Numbered commitments on the President's message */
.numbered-list { counter-reset: nl; list-style: none; }
.numbered-list li {
  counter-increment: nl; position: relative;
  padding: 0 0 1rem 3rem; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.65;
}
.numbered-list li::before {
  content: counter(nl); position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy); color: var(--gold);
  display: grid; place-items: center; font-size: 0.85rem; font-weight: 700;
}
.numbered-list li:last-child { padding-bottom: 0; }

/* Original Kannada text, collapsed by default */
.kn-original {
  margin-top: 2.4rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--cream);
}
.kn-original summary {
  cursor: pointer; padding: 1rem 1.2rem; font-weight: 700;
  color: var(--navy); font-size: 0.94rem; list-style: none;
}
.kn-original summary::-webkit-details-marker { display: none; }
.kn-original summary::before { content: "+ "; color: var(--gold-dark); font-weight: 800; }
.kn-original[open] summary::before { content: "- "; }
.kn-original[open] summary { border-bottom: 1px solid var(--line); }
.kn-body { padding: 1.2rem; }
.kn-body p { font-size: 0.92rem; line-height: 1.85; color: var(--ink-soft); margin-bottom: 0.9rem; }
.kn-body .kn-head { font-weight: 700; color: var(--navy); text-align: center; font-size: 1rem; }
.kn-body .kn-lede { font-weight: 600; color: var(--red); text-align: center; }
.kn-body .kn-sub { font-weight: 700; color: var(--navy); margin-top: 1.2rem; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ticker-move { animation: none; padding-left: 0; }
  html { scroll-behavior: auto; }
}

/* Announcement modal */
.modal {
  position: fixed; inset: 0; z-index: 500; background: rgba(8,14,32,0.72);
  display: none; align-items: center; justify-content: center; padding: 1.2rem;
}
.modal.open { display: flex; }
.modal-card {
  width: min(420px, 100%); background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4); position: relative;
  max-height: 92vh; overflow-y: auto; animation: pop 0.3s ease;
}
@keyframes pop { from { transform: scale(0.94); opacity: 0; } }
.modal-card img { width: 100%; display: block; }
.modal-close {
  position: absolute; top: 0.6rem; right: 0.6rem; background: var(--navy);
  color: #fff; border: 0; width: 36px; height: 36px; border-radius: 50%; font-size: 1.05rem;
}
.modal-foot { padding: 0.9rem 1rem; text-align: center; }