/* =========================================================
   SHIFA INSTITUTE OF HEALTH SCIENCES — HARAPPA
   Design tokens
   ========================================================= */
:root{
  --primary:       #14284d;
  --primary-deep:  #0a1830;
  --accent:        #d9a441;
  --accent-light:  #f0c274;
  --urgent:        #c0392b;
  --teal:          #5b7fa6;
  --cream:         #f9f4ea;
  --ink:           #1e2420;
  --ink-soft:      #565f57;
  --white:         #ffffff;
  --line:          rgba(16,64,58,0.12);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, Segoe UI, sans-serif;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-sm: 0 2px 10px rgba(16,64,58,0.08);
  --shadow-md: 0 12px 32px rgba(16,64,58,0.14);
  --shadow-accent: 0 10px 24px rgba(217,164,65,0.35);

  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

/* 🛡️ OVERFLOW GUARD — stops the page from ever scrolling sideways
   (fixes "swipe right shows whitespace" on mobile).
   We use overflow-x:clip (not "hidden") on BOTH html and body: unlike
   "hidden", "clip" does not turn the element into a scroll container,
   so it won't break position:sticky on the navbar — that was the
   "navbar disappears when I scroll to a section" bug from before. */
html, body{ max-width:100%; overflow-x:hidden; overflow-x:clip; overscroll-behavior-x:none; }

body{
  margin:0;
  width:100%;
  max-width:100%;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
/* font-weight 700 (not 600) — matches an actual Merriweather weight we
   load in index.html, so headings render crisp instead of the browser
   faking/approximating a weight that wasn't downloaded. */
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--primary); margin:0 0 .5em; font-weight:600; }
p{ margin:0 0 1em; color:var(--ink-soft); }
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

/* ---------- Icons (mask based, single-color currentColor) ---------- */
.ic{ display:inline-block; width:1em; height:1em; background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain; vertical-align:-0.15em; }
.ic-phone{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.7 21 3 13.3 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1L6.6 10.8z'/></svg>"); }
.ic-fb{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.5 21v-8h2.7l.4-3.1h-3.1V8c0-.9.2-1.5 1.6-1.5H17V3.7C16.6 3.6 15.5 3.5 14.2 3.5c-2.7 0-4.6 1.6-4.6 4.7v2.7H7v3.1h2.6V21h3.9z'/></svg>"); }
.ic-ig{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2c2.7 0 3 0 4 .1 1 .1 1.7.2 2.3.5.6.3 1.1.6 1.6 1.1.5.5.8 1 1.1 1.6.3.6.4 1.3.5 2.3.1 1 .1 1.3.1 4s0 3-.1 4c-.1 1-.2 1.7-.5 2.3-.3.6-.6 1.1-1.1 1.6-.5.5-1 .8-1.6 1.1-.6.3-1.3.4-2.3.5-1 .1-1.3.1-4 .1s-3 0-4-.1c-1-.1-1.7-.2-2.3-.5-.6-.3-1.1-.6-1.6-1.1-.5-.5-.8-1-1.1-1.6-.3-.6-.4-1.3-.5-2.3-.1-1-.1-1.3-.1-4s0-3 .1-4c.1-1 .2-1.7.5-2.3.3-.6.6-1.1 1.1-1.6.5-.5 1-.8 1.6-1.1.6-.3 1.3-.4 2.3-.5 1-.1 1.3-.1 4-.1zM12 0C9.3 0 8.9 0 7.9.1c-1.1.1-1.9.2-2.6.5-.7.3-1.4.7-2 1.3C2.7 2.5 2.3 3.1 2 3.9c-.3.7-.5 1.5-.5 2.6C1.4 7.5 1.4 7.9 1.4 12s0 4.5.1 5.5c.1 1.1.2 1.9.5 2.6.3.7.7 1.4 1.3 2 .6.6 1.2 1 2 1.3.7.3 1.5.5 2.6.5 1 .1 1.4.1 4.1.1s3.1 0 4.1-.1c1.1-.1 1.9-.2 2.6-.5.7-.3 1.4-.7 2-1.3.6-.6 1-1.2 1.3-2 .3-.7.5-1.5.5-2.6.1-1 .1-1.4.1-5.5s0-4.5-.1-5.5c-.1-1.1-.2-1.9-.5-2.6-.3-.7-.7-1.4-1.3-2-.6-.6-1.2-1-2-1.3-.7-.3-1.5-.5-2.6-.5C15.1 0 14.7 0 12 0z'/><path d='M12 5.8A6.2 6.2 0 1 0 12 18.2 6.2 6.2 0 0 0 12 5.8zm0 10.2A4 4 0 1 1 12 7.8a4 4 0 0 1 0 8.2z'/><circle cx='18.4' cy='5.6' r='1.4'/></svg>"); }
.ic-tt{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.6 2c.3 2.4 1.7 3.9 4 4.1v3c-1.5.1-2.9-.4-4-1.2v6.7c0 3.5-2.8 6.4-6.4 6.4S3.8 18.1 3.8 14.6c0-3.4 2.6-6.1 5.9-6.4v3.1c-1.6.2-2.9 1.6-2.9 3.3 0 1.8 1.5 3.3 3.3 3.3s3.3-1.5 3.3-3.3V2h3.2z'/></svg>"); }
.ic-wa{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2zm0 1.8a8.2 8.2 0 0 1 8.2 8.2 8.2 8.2 0 0 1-12.5 6.9l-.4-.2-3 .8.8-3-.2-.4A8.2 8.2 0 0 1 12 3.8zm4.5 10.6c-.2-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.5.1-.2.2-.6.8-.8 1-.1.2-.3.2-.5.1-1.4-.7-2.3-1.3-3.2-2.8-.2-.4.2-.4.5-1.2.1-.2 0-.3 0-.5-.1-.1-.5-1.3-.7-1.8-.2-.4-.4-.4-.5-.4h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 1.9s.9 2.2 1 2.3c.1.2 1.7 2.6 4.2 3.6.6.2 1 .4 1.4.5.6.2 1.1.2 1.5.1.5-.1 1.4-.6 1.6-1.1.2-.5.2-1 .1-1.1-.1-.1-.2-.2-.5-.3z'/></svg>"); }
.ic-mail{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1.4 2 7.1 6 7.1-6H4.4zM4 8.3V18h16V8.3l-7.4 6.2a1 1 0 0 1-1.2 0L4 8.3z'/></svg>"); }
.ic-cap{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3 1 8l11 5 9-4.1V17h2V8L12 3zM5 10.5V15c0 1.9 3.1 4 7 4s7-2.1 7-4v-4.5l-7 3.2-7-3.2z'/></svg>"); }
.ic-flask{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 2v6.3L3.5 18a2 2 0 0 0 1.7 3h13.6a2 2 0 0 0 1.7-3L15 8.3V2H9zm2 2h2v4.7l.3.6L18 19H6l4.7-9.7.3-.6V4z'/></svg>"); }
.ic-pin{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/></svg>"); }
.ic-badge{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 3 6v6c0 5 4 8.7 9 10 5-1.3 9-5 9-10V6l-9-4zm0 5.2 2.8 2.9-1.4 1.4L12 10.4l-1.4 1.1-1.4-1.4L12 7.2z'/></svg>"); }
.ic-teacher{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.4 0-8 2.2-8 5v2h16v-2c0-2.8-3.6-5-8-5z'/></svg>"); }
.ic-lab{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 2h4v2h-1v5.5l4.5 8a2 2 0 0 1-1.8 3H8.3a2 2 0 0 1-1.8-3l4.5-8V4h-1V2zm1 2v6l-.2.4L7.4 17h9.2l-3.4-6.6-.2-.4V4h-2z'/></svg>"); }
.ic-location{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/></svg>"); }
.ic-wallet{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6a2 2 0 0 1 2-2h13a1 1 0 0 1 0 2H5a1 1 0 0 0 0 2h15a1 1 0 0 1 1 1v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6zm14.5 6.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z'/></svg>"); }
.ic-support{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 0 0-10 10v5a3 3 0 0 0 3 3h1v-8H4v-1a8 8 0 0 1 16 0v1h-2v8h1a3 3 0 0 0 3-3v-5A10 10 0 0 0 12 2z'/></svg>"); }
.ic-tooth{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 4c-1.1 0-1.9.6-2.9.6S7.2 4 6 4C4 4 2.5 5.8 2.5 8.5c0 2.2.8 4.2 1.5 6.2.5 1.5.9 3 1.2 4.3.3 1.1.8 2 1.8 2s1.4-1.9 1.7-3.3c.2-1.1.5-2.2 1.6-2.2s1.4 1.1 1.6 2.2c.3 1.4.7 3.3 1.7 3.3s1.5-.9 1.8-2c.3-1.3.7-2.8 1.2-4.3.7-2 1.5-4 1.5-6.2C21.5 5.8 20 4 18 4c-1.2 0-2.1.6-3.1.6S13.1 4 12 4z' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/></svg>"); }
.ic-eye{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/><circle cx='12' cy='12' r='3' fill='none' stroke='black' stroke-width='1.6'/></svg>"); }
.ic-bone{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.5 4.5a2.5 2.5 0 0 0-1.8 4.2L3.3 10a2 2 0 1 0 2.8 2.8l1.4-1.3 4.9 4.9-1.3 1.4A2 2 0 1 0 13.8 20l1.4-1.3a2.5 2.5 0 1 0 3-3.9l-1.3 1.4-4.9-4.9 1.3-1.4a2 2 0 1 0-2.8-2.8L9.1 8.5 6.9 6.3A2.5 2.5 0 0 0 6.5 4.5z'/></svg>"); }
.ic-heart{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.5-9.5-9C1 8.5 2.5 5 6 4.3 8.2 3.9 10.2 5 12 7.2 13.8 5 15.8 3.9 18 4.3c3.5.7 5 4.2 3.5 7.7-2 4.5-9.5 9-9.5 9z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/></svg>"); }
.ic-pill{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='9' width='16' height='6' rx='3' fill='none' stroke='black' stroke-width='1.6' transform='rotate(-30 12 12)'/><line x1='10.5' y1='7.8' x2='13.5' y2='16.2' stroke='black' stroke-width='1.6' transform='rotate(-30 12 12)'/></svg>"); }
.ic-surgery{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.6'/><path d='M12 7v10M7 12h10' stroke='black' stroke-width='1.8' stroke-linecap='round'/></svg>"); }
.ic-activity{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 12h4l2-7 4 14 2-9 2 2h4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.ic-baby{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='9' cy='8' r='3' fill='none' stroke='black' stroke-width='1.5'/><circle cx='16' cy='12.5' r='2' fill='none' stroke='black' stroke-width='1.5'/><path d='M4 20c0-3 2.5-5.5 5.5-5.5S15 17 15 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/></svg>"); }
.ic-clipboard{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='5' y='4' width='14' height='17' rx='2' fill='none' stroke='black' stroke-width='1.5'/><rect x='9' y='2.5' width='6' height='3' rx='1' fill='none' stroke='black' stroke-width='1.5'/><path d='M8 11h8M8 15h5' stroke='black' stroke-width='1.5' stroke-linecap='round'/><path d='M8.5 18.5l1.5 1.5 3-3' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.ic-star{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.5l2.9 6 6.6.7-4.9 4.5 1.3 6.5L12 16.9l-5.9 3.3 1.3-6.5-4.9-4.5 6.6-.7z'/></svg>"); }
.ic-target{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.6'/><circle cx='12' cy='12' r='5' fill='none' stroke='black' stroke-width='1.6'/><circle cx='12' cy='12' r='1.6'/></svg>"); }
.ic-users{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='9' cy='8' r='3.2' fill='none' stroke='black' stroke-width='1.5'/><path d='M3.5 20c0-3.3 2.5-6 5.5-6s5.5 2.7 5.5 6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/><circle cx='17' cy='9' r='2.3' fill='none' stroke='black' stroke-width='1.4'/><path d='M14.8 14.2c2.6.2 4.7 2.6 4.7 5.8' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/></svg>"); }
.ic-shield{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.5l7 2.6v6c0 5-3 8.8-7 10.4-4-1.6-7-5.4-7-10.4v-6z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/><path d='M8.7 12.2l2.2 2.2 4.4-4.6' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.ic-clock{ --svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.6'/><path d='M12 7v5l3.5 2' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.ic{ -webkit-mask-image: var(--svg); mask-image: var(--svg); }

/* =========================================================
   TOP BAR + NAV
   ========================================================= */
.topbar{ background:var(--primary-deep); color:#cfded7; font-size:.85rem; }
.topbar__inner{ display:flex; justify-content:space-between; align-items:center; padding:6px 24px; flex-wrap:wrap; gap:6px; }
.topbar__contact a{ margin-right:18px; display:inline-flex; align-items:center; gap:6px; color:#cfded7; }
.topbar__contact a:hover{ color:var(--accent-light); }
.topbar__social{ display:flex; gap:14px; }
.topbar__social a{ color:#cfded7; font-size:1rem; }
.topbar__social a:hover{ color:var(--accent-light); }

.nav{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,0.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); transition: box-shadow .3s var(--ease), padding .3s var(--ease); }
.nav.is-scrolled{ box-shadow: var(--shadow-sm); }
.nav__inner{ display:flex; align-items:center; gap:20px; padding:12px 24px; }

/* 🖼️ LOGO — flex-shrink:0 keeps the logo at full size and stops it from
   getting squeezed/shrunk when the nav links take up available space. */
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; flex-shrink:0; min-width:0; }
.brand__mark{ flex-shrink:0; }
.brand__mark img{ display:block; width:42px; height:42px; min-width:42px; min-height:42px; border-radius:50%;
  object-fit:cover; flex-shrink:0; }
.brand__text{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.brand__text strong{ font-family:var(--font-display); color:var(--primary); font-size:1.15rem; white-space:nowrap; }
.brand__text em{ font-style:normal; font-size:.72rem; letter-spacing:.05em; color:var(--ink-soft); white-space:nowrap; }

.nav__links{ display:flex; gap:26px; }
.nav__links a{ font-weight:600; font-size:.95rem; color:var(--primary); position:relative; padding:6px 0; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--accent);
  transition:width .25s var(--ease); }
.nav__links a:hover::after{ width:100%; }

/* 🖼️ ACADEMICS DROPDOWN */
.nav__dropdown{ position:relative; }
.nav__dropdown-trigger{ background:none; border:0; font-family:inherit; font-weight:600; font-size:.95rem;
  color:var(--primary); display:flex; align-items:center; gap:6px; padding:6px 0; cursor:pointer; }
.nav__dropdown-arrow{ width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .25s var(--ease); margin-top:-3px; }
.nav__dropdown.is-open .nav__dropdown-arrow{ transform:rotate(-135deg); margin-top:3px; }
.nav__dropdown-menu{ position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-8px);
  background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:10px; min-width:180px;
  display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden;
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; z-index:65; }
.nav__dropdown.is-open .nav__dropdown-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav__dropdown-menu a{ padding:9px 12px; border-radius:8px; font-weight:600; font-size:.92rem; color:var(--primary); }
.nav__dropdown-menu a:hover{ background:var(--cream); }
.nav__dropdown-menu a::after{ display:none; }

.nav__toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.nav__toggle span{ width:24px; height:2px; background:var(--primary); border-radius:2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease); transform-origin:center; }
/* Hamburger → X animation when menu is open */
.nav__toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-active span:nth-child(2){ opacity:0; }
.nav__toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{ display:inline-flex; align-items:center; gap:8px; justify-content:center; font-family:var(--font-body); font-weight:700;
  font-size:.95rem; padding:12px 22px; border-radius:999px; border:2px solid transparent; cursor:pointer;
  position:relative; overflow:hidden; isolation:isolate;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.97); }
/* 🎞️ MOTION — a light diagonal "shine" sweeps across every button on hover */
.btn::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 62%);
  transform:translateX(-120%); transition:transform .6s ease; }
.btn:hover::after{ transform:translateX(120%); }
.btn--gold{ background:linear-gradient(135deg,var(--accent-light),var(--accent)); background-size:160% 160%; background-position:0% 0%;
  color:#fff; box-shadow:var(--shadow-accent);
  animation:btnGoldGlow 3s ease-in-out infinite;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-position .5s var(--ease); }
.btn--gold:hover{ box-shadow:0 14px 30px rgba(217,164,65,.55); background-position:100% 100%; }
@keyframes btnGoldGlow{ 0%,100%{ box-shadow:0 8px 20px rgba(217,164,65,.35); } 50%{ box-shadow:0 8px 26px rgba(217,164,65,.6); } }
.btn--ghost{ background:transparent; border-color:rgba(255,255,255,.5); color:#fff; }
.btn--ghost:hover{ background:rgba(255,255,255,.15); border-color:#fff; }
.btn--outline{ background:transparent; border-color:var(--primary); color:var(--primary); }
.btn--outline:hover{ background:var(--primary); color:#fff; }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#000; box-shadow:0 10px 22px rgba(0,0,0,.35); }
.btn--lg{ padding:14px 26px; font-size:1rem; }
.nav__cta{ padding:9px 18px; font-size:.85rem;
  background:linear-gradient(135deg,#e2574a,var(--urgent)); color:#fff;
  box-shadow:0 6px 16px rgba(192,57,43,.4);
  animation:navCtaPulse 2.4s ease-in-out infinite; }

/* 🎞️ MOTION — a small arrow that appears and slides in on hover */
.btn--arrow::before{ content:"→"; display:inline-block; width:0; opacity:0; overflow:hidden;
  transition:width .25s var(--ease), opacity .25s var(--ease), margin .25s var(--ease); }
.btn--arrow:hover::before{ width:1em; opacity:1; margin-right:2px; }
.nav__cta:hover{ box-shadow:0 8px 20px rgba(192,57,43,.55); }
@keyframes navCtaPulse{ 0%,100%{ box-shadow:0 6px 16px rgba(192,57,43,.4); } 50%{ box-shadow:0 6px 22px rgba(192,57,43,.65); } }

/* =========================================================
   HERO
   ========================================================= */
/* 🖼️ HERO — a bold diagonal split instead of a blurred glass panel:
   solid navy on the left holds the text (always crisp, zero blur), and
   the real campus photo (images/campus-hero.jpg) sits fully visible in
   its own diagonal-cut panel on the right — echoing the diagonal motif
   from the institute's own banner/PPT branding.
   To swap the photo later, just replace that file (same filename). */
.hero{ position:relative; color:#fff; overflow:hidden; min-height:600px; display:flex; align-items:center;
  background:linear-gradient(155deg, var(--primary-deep) 0%, var(--primary) 100%); }

/* 🖼️ Brightened/enhanced via CSS filter (no separate image file needed —
   this brightens whatever photo is at images/campus-hero.jpg on the live
   server). The dark overlay gradients just below were deepened slightly
   (.55→.65, .5→.6) to compensate, so the hero text over the photo stays
   just as readable even though the photo itself is brighter now. */
.hero__photo{ position:absolute; inset:0; left:40%; z-index:0;
  background:url('images/campus-hero.jpg') center 15%/cover no-repeat;
  clip-path:polygon(14% 0, 100% 0, 100% 100%, 0% 100%);
  filter:brightness(1.18) saturate(1.3) contrast(1.06);
  animation:heroKenBurns 7s ease-in-out infinite alternate; }
@keyframes heroKenBurns{ 0%{ transform:scale(1); } 100%{ transform:scale(1.12); } }
.hero__photo::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,24,48,.65) 0%, rgba(10,24,48,.08) 22%, transparent 45%); }
.hero__photo::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 60%, rgba(10,24,48,.6) 100%); }

.hero__laurel{ position:absolute; inset:auto 0 0 0; height:110px; opacity:.25; pointer-events:none; z-index:1; }

/* 🐛 FIX: this used to be the shorthand "padding:80px 0", which sets
   left/right padding to 0 and silently cancelled out the 24px side
   padding that .wrap normally gives every section (.hero__wrap carries
   both classes). That's what was pinning the hero heading/text flush
   against the very left edge of the screen with no breathing room —
   most visible on phones. Now only top/bottom padding is set here, so
   .wrap's horizontal padding comes through as normal. */
.hero__wrap{ position:relative; z-index:2; padding-top:80px; padding-bottom:80px; }
.hero__inner{ max-width:560px; }

/* 🖼️ Note: the decorative colored "blob" shapes that used to float over the
   hero have been removed on purpose — the campus photo is the primary visual
   now, so nothing else with its own color/gradient sits on top of it. */
.ribbon{ display:inline-flex; align-items:center; gap:10px; background:rgba(217,164,65,.16); border:1.5px solid rgba(217,164,65,.55);
  color:#fff; padding:11px 22px; border-radius:999px; font-size:1rem; font-weight:800; margin-bottom:24px;
  box-shadow:0 6px 20px rgba(217,164,65,.25); animation:ribbonFloat 3s ease-in-out infinite; }
.ribbon__text{ background:linear-gradient(90deg,#fff 0%, var(--accent-light) 45%, #fff 90%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:eyebrowShimmer 4s linear infinite; }
.ribbon__dot{ width:9px; height:9px; border-radius:50%; background:var(--accent-light); box-shadow:0 0 0 0 rgba(240,194,116,.6);
  animation:pulseDot 1.8s infinite; flex-shrink:0; }
@keyframes pulseDot{ 0%{box-shadow:0 0 0 0 rgba(240,194,116,.6);} 70%{box-shadow:0 0 0 9px rgba(240,194,116,0);} 100%{box-shadow:0 0 0 0 rgba(240,194,116,0);} }
@keyframes ribbonFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }

.hero__title{ font-size:clamp(2.3rem,5vw,3.6rem); font-weight:800; color:#fff; line-height:1.12; margin-bottom:.5em;
  text-shadow:0 4px 20px rgba(0,0,0,.5); }
/* 🎞️ MOTION — the animated word (typewriter) gets a slow, soft glow pulse
   so the title has some quiet life to it even between typing cycles,
   without being distracting or affecting layout/line height. */
.hero__title-accent{ color:var(--accent-light); animation:heroAccentGlow 3.4s ease-in-out infinite; }
@keyframes heroAccentGlow{ 0%,100%{ text-shadow:0 0 0 rgba(240,194,116,0); } 50%{ text-shadow:0 0 18px rgba(240,194,116,.55); } }
/* 🎞️ MOTION — blinking cursor next to the typewriter text */
.hero__title-cursor{ color:var(--accent-light); font-weight:400; animation:cursorBlink 1s step-end infinite; }
@keyframes cursorBlink{ 0%,50%{ opacity:1; } 50.01%,100%{ opacity:0; } }
.hero__sub{ color:#eef1f6; font-size:1.18rem; font-weight:500; max-width:640px; text-shadow:0 2px 10px rgba(0,0,0,.4); }
.hero__cta{ display:flex; gap:16px; flex-wrap:wrap; margin:30px 0 40px; }

/* 🎞️ MOTION — hero text/buttons cascade in one after another instead of
   all at once, with a slightly richer "settle in" (scale + fade, not just
   a slide) than the site's generic reveal, for a more premium feel. */
html.js .hero__inner > [data-reveal]{
  transform:translateY(20px) scale(.97);
  transition:opacity .7s var(--ease), transform .7s var(--ease); }
html.js .hero__inner > [data-reveal].is-visible{ transform:translateY(0) scale(1); }
html.js .hero__inner > .ribbon{ transition-delay:.05s; }
html.js .hero__inner > .hero__title{ transition-delay:.18s; }
html.js .hero__inner > .hero__sub{ transition-delay:.32s; }
html.js .hero__inner > .hero__cta{ transition-delay:.46s; }

/* 🎞️ MOTION — bouncing scroll-down cue */
.hero__scroll-cue{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:1;
  width:34px; height:34px; border:2px solid rgba(255,255,255,.55); border-radius:50%;
  display:flex; align-items:center; justify-content:center; animation:scrollCueBounce 2.2s ease-in-out infinite; }
.hero__scroll-cue:hover{ border-color:#fff; }
.hero__scroll-cue-chevron{ width:8px; height:8px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg) translate(-2px,-2px); }
@keyframes scrollCueBounce{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(8px); } }
.stat-count{ font-weight:800; font-family:var(--font-display); color:var(--accent-light); }

/* =========================================================
   PROGRAM TICKER (marquee)
   ========================================================= */
.marquee{ background:var(--primary-deep); overflow:hidden; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.marquee__track{ display:flex; width:max-content; animation:marqueeScroll 34s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track{ animation-play-state:paused; }
.marquee__item{ display:flex; align-items:center; gap:10px; color:#dcece4; font-family:var(--font-display); font-size:1rem; padding:0 28px; white-space:nowrap; }
.marquee__dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; }
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =========================================================
   STATS STRIP (credibility bar right under the hero)
   ========================================================= */
/* 🖼️ Solid navy — same color as the hero/nav, so there's no visible
   seam where the hero photo panel meets this strip. No divider lines
   between blocks (removed per feedback) — just even spacing. */
.stats-strip{ background:var(--primary-deep); position:relative; z-index:1; }
.stats-strip__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat-block{ text-align:center; padding:34px 16px; }
.stat-block__num{ display:block; font-family:var(--font-body); font-size:2.6rem; font-weight:800; letter-spacing:-.02em;
  line-height:1; margin-bottom:8px;
  background:linear-gradient(135deg,#fff 0%,var(--accent-light) 55%,var(--accent) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat-block__num::after{ content: attr(data-suffix); }
.stat-block__num:not([data-suffix])::after{ content:"+"; }
.stat-block span{ font-size:.82rem; color:#dbe6f2; font-weight:600; letter-spacing:.01em; }

/* =========================================================
   SECTIONS (generic)
   ========================================================= */
.section{ padding:96px 0; }
.section--light{ background:var(--white); }
.section--cream{ background:var(--cream); }
.section--navy{ background:linear-gradient(180deg,var(--primary-deep),var(--primary)); color:#fff; }
/* 🖼️ WHY US — a few large, soft, slow-drifting glow orbs in the accent
   colors sit behind the content (blurred, low-opacity radial gradients).
   Purely decorative, pointer-events:none, and clipped to the section so
   they never affect layout or scrolling. */
#why-us{ position:relative; overflow:hidden; }
#why-us::before, #why-us::after{ content:""; position:absolute; border-radius:50%; filter:blur(60px);
  pointer-events:none; z-index:0; }
#why-us::before{ width:420px; height:420px; top:-140px; left:-80px;
  background:radial-gradient(circle, rgba(217,164,65,.35), transparent 70%);
  animation:whyOrbFloat 14s ease-in-out infinite; }
#why-us::after{ width:380px; height:380px; bottom:-160px; right:-60px;
  background:radial-gradient(circle, rgba(47,111,168,.3), transparent 70%);
  animation:whyOrbFloat 16s ease-in-out infinite reverse; }
@keyframes whyOrbFloat{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(30px,-20px) scale(1.08); } }
#why-us .wrap{ position:relative; z-index:1; }
/* Scoped to #why-us only, so other sections using the same shared classes are unaffected */
#why-us .eyebrow, #why-us .section__title{ text-shadow:0 2px 10px rgba(0,0,0,.35); }
/* 🐛 Bumped up from .78rem — small section labels like "Our Mission",
   "Campus Life", "Questions" were reading too tiny/timid next to their
   headings. This is the plain (non "--big") eyebrow used across most
   sections; .eyebrow--big below (Programs, Meet The Team) is unchanged. */
.eyebrow{ text-transform:uppercase; letter-spacing:.1em; font-size:.92rem; font-weight:700; color:var(--urgent); margin-bottom:10px; }
/* 🎞️ MOTION — bigger, bolder eyebrow label with a soft shimmer sweep, used
   wherever a section label ("Programs", "Meet The Team") needs to stand out. */
.eyebrow--big{ font-size:1.35rem; letter-spacing:.06em; font-weight:800; margin-bottom:14px;
  background:linear-gradient(90deg, var(--urgent) 0%, var(--accent) 40%, var(--urgent) 80%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:eyebrowShimmer 5s linear infinite; display:inline-block; }
@keyframes eyebrowShimmer{ 0%{ background-position:0% 50%; } 100%{ background-position:220% 50%; } }
.eyebrow--light{ color:var(--accent-light); }
/* 🐛 Bumped up from clamp(1.6rem,3vw,2.3rem) — section headings like
   "Meet the Team" / "Gallery" were reading too small/timid next to the
   rest of the page; this makes every section heading site-wide larger. */
.section__title{ position:relative; display:inline-block; font-size:clamp(2rem,3.6vw,2.9rem); max-width:640px; }
/* 🎞️ MOTION — thin accent underline that draws itself in once the title scrolls into view */
.section__title::after{ content:""; display:block; height:3px; width:64px; margin-top:12px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-light)); }
html.js .section__title::after{ width:0; transition:width .8s var(--ease) .15s; }
html.js .section__title.is-visible::after{ width:64px; }
.section__title--light{ color:#fff; }
.section__lead{ max-width:560px; color:#c8ded3; margin-top:-6px; margin-bottom:36px; }
.section__lead--light{ color:rgba(255,255,255,.86); text-shadow:0 2px 10px rgba(0,0,0,.5); }

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

/* =========================================================
   WHY US FEATURE CARDS — clean, static card grid (no overlapping
   badges, no tilt/rotation) so it reads as a calm, professional
   feature list against the solid navy section background. Each
   card keeps a colored icon badge via "feature-card--<color>" for
   visual variety — see the color blocks below to add more.
   ========================================================= */
.why-grid{ margin-top:44px; }
.feature-card{ position:relative; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:30px 26px; text-align:left; overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.14);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.feature-card:hover{ transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,.22); }
/* Thin colored bar along the top that slides in on hover — echoes each
   card's icon color so the accent feels intentional, not decorative-only. */
.feature-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; transform:scaleX(0);
  transform-origin:left; transition:transform .35s var(--ease); }
.feature-card:hover::before{ transform:scaleX(1); }
.feature-card__icon{ display:flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:14px; font-size:1.4rem; color:#fff;
  margin-bottom:18px; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.feature-card:hover .feature-card__icon{ transform:scale(1.1) rotate(-6deg); }
.feature-card h3{ font-size:1.1rem; margin-bottom:8px; color:var(--primary); }
.feature-card p{ font-size:.93rem; margin-bottom:0; color:var(--ink-soft); }

/* 🎞️ MOTION — Why Us cards get a richer "pop in" (scale + fade) instead
   of the site-wide plain fade-up, so the section feels livelier. Stagger
   timing still comes from the generic ".grid > *:nth-child()" rule. */
html.js #why-us .feature-card[data-reveal]{
  opacity:0; transform:translateY(28px) scale(.92);
  transition:opacity .6s var(--ease), transform .6s cubic-bezier(.22,1.2,.36,1); }
html.js #why-us .feature-card[data-reveal].is-visible{ opacity:1; transform:translateY(0) scale(1); }
/* Icon badge breathes gently once its card has revealed, so the section
   still feels alive even after the entrance animation finishes. */
html.js #why-us .feature-card.is-visible .feature-card__icon{ animation:whyIconBreathe 3.2s ease-in-out infinite; }
@keyframes whyIconBreathe{ 0%,100%{ box-shadow:0 6px 14px rgba(0,0,0,.18); } 50%{ box-shadow:0 6px 20px rgba(0,0,0,.32); } }

.feature-card--gold::before{ background:linear-gradient(90deg,var(--accent-light),var(--accent)); }
.feature-card--gold .feature-card__icon{ background:linear-gradient(135deg,var(--accent-light),var(--accent)); }
.feature-card--blue::before{ background:linear-gradient(90deg,#6ea8dc,#2f6fa8); }
.feature-card--blue .feature-card__icon{ background:linear-gradient(135deg,#6ea8dc,#2f6fa8); }
.feature-card--coral::before{ background:linear-gradient(90deg,#e8836f,var(--urgent)); }
.feature-card--coral .feature-card__icon{ background:linear-gradient(135deg,#e8836f,var(--urgent)); }
.feature-card--teal::before{ background:linear-gradient(90deg,#4fb6a0,#1f7a68); }
.feature-card--teal .feature-card__icon{ background:linear-gradient(135deg,#4fb6a0,#1f7a68); }
.feature-card--plum::before{ background:linear-gradient(90deg,#b06a97,#7c3f66); }
.feature-card--plum .feature-card__icon{ background:linear-gradient(135deg,#b06a97,#7c3f66); }

/* Course cards */
/* 🖼️ CATEGORY TABS (Nursing / B-Category / Federal / All) */
/* 🖼️ FEE STRUCTURE — one card per category (Nursing / B-Category / Federal) */
.fee-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px; margin-top:36px; }
.fee-cta{ text-align:center; margin-top:36px; }
.fee-card{ background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:32px 28px; box-shadow:0 16px 40px rgba(0,0,0,.1); position:relative; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.fee-card:hover{ transform:translateY(-6px); box-shadow:0 22px 48px rgba(0,0,0,.16); }
.fee-card::before{ content:""; position:absolute; top:-60px; right:-60px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(217,164,65,.18), transparent 70%); }
.fee-card__badge{ display:inline-flex; background:var(--urgent); color:#fff; font-weight:800; font-size:.72rem;
  padding:6px 14px; border-radius:999px; margin-bottom:16px; animation:offerPulse 1.8s ease-in-out infinite; }
.fee-card__category{ font-size:1.25rem; margin-bottom:2px; }
.fee-card__sub{ display:block; font-size:.8rem; color:var(--ink-soft); margin-bottom:16px; }
.fee-card__prices{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.fee-card__old{ font-size:1.05rem; color:var(--ink-soft); text-decoration:line-through; opacity:.7; }
.fee-card__new{ font-family:var(--font-display); font-size:1.9rem; font-weight:800; color:var(--primary); }
.fee-card__note{ font-size:.84rem; margin-bottom:20px; }
.fee-card__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:16px 0; margin-bottom:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.fee-card__grid div{ display:flex; flex-direction:column; gap:3px; }
.fee-card__grid strong{ font-family:var(--font-display); color:var(--primary); font-size:.86rem; }
.fee-card__grid span{ font-size:.66rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; }

/* 🖼️ Admission form live fee preview (appears once a program is selected) */
.fee-preview{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; padding:10px 14px;
  background:rgba(217,164,65,.1); border:1px dashed rgba(217,164,65,.5); border-radius:10px; font-size:.86rem; }
.fee-preview__old{ text-decoration:line-through; color:var(--ink-soft); }
.fee-preview__new{ font-weight:800; color:var(--primary); font-size:1rem; }
.fee-preview__badge{ background:var(--urgent); color:#fff; font-weight:700; font-size:.7rem; padding:3px 9px; border-radius:999px; }

.course-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin:30px 0 8px; }
.course-tab{ display:flex; align-items:center; gap:8px; background:var(--white); border:1.5px solid var(--line);
  color:var(--ink-soft); font-weight:700; font-size:.9rem; padding:10px 18px; border-radius:999px; cursor:pointer;
  transition:transform .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.course-tab:hover{ transform:translateY(-2px); border-color:var(--accent); }
.course-tab.is-active{ background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:var(--shadow-sm); }
.course-tab__cert{ font-size:.72rem; font-weight:800; padding:2px 8px; border-radius:999px;
  background:rgba(217,164,65,.18); color:var(--primary); }
.course-tab.is-active .course-tab__cert{ background:rgba(255,255,255,.22); color:#fff; }

.course-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:26px; cursor:pointer; text-align:left; color:var(--ink); position:relative; overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.course-card::before{ content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(217,164,65,.10),transparent 60%);
  opacity:0; transition:opacity .3s var(--ease); pointer-events:none; }
.course-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--accent); }
.course-card:hover::before{ opacity:1; }
.course-card__icon{ width:46px; height:46px; border-radius:12px; background:var(--accent); color:var(--primary-deep);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:16px; }
.course-card__media{ width:100%; aspect-ratio:4/3; border-radius:14px; margin-bottom:16px; overflow:hidden; position:relative;
  background:linear-gradient(135deg,#1c3866,#0a1830 60%); display:flex; align-items:center; justify-content:center; }
.course-card__media::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 15% 10%, rgba(217,164,65,.4), transparent 55%); }
.course-card__media img{ width:100%; height:100%; object-fit:cover; display:block; position:relative; }
.course-card__media .ic{ position:relative; z-index:1; width:40%; height:40%; max-width:56px; max-height:56px; color:#fff; opacity:.95; }
/* 🖼️ Duration pill shown on every course thumbnail */
.course-card__duration{ position:absolute; left:10px; bottom:10px; z-index:2; background:rgba(10,24,48,.75); color:#fff;
  font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:999px; backdrop-filter:blur(2px); }
/* 🖼️ "Popular" ribbon — only shown on courses flagged popular:true in the COURSES data */
.course-card__popular{ position:absolute; right:10px; top:10px; z-index:2; background:linear-gradient(135deg,var(--accent-light),var(--accent));
  color:var(--primary-deep); font-size:.72rem; font-weight:800; padding:4px 10px; border-radius:999px; box-shadow:0 4px 10px rgba(0,0,0,.25); }
/* 🖼️ Popular-course cards get a gold border + glow so they stand out in the grid */
.course-card--popular{ border-color:rgba(240,194,116,.55); box-shadow:0 0 0 1px rgba(240,194,116,.2), 0 14px 30px rgba(0,0,0,.28); }
.course-card--popular:hover{ border-color:var(--accent-light); }
/* Rotate a few accent gradients for visual variety across the grid — purely decorative */
.course-card:nth-child(4n+2) .course-card__media{ background:linear-gradient(135deg,#5b7fa6,#28405e 70%); }
.course-card:nth-child(4n+2) .course-card__media::before{ background:radial-gradient(120% 120% at 15% 10%, rgba(242,161,121,.35), transparent 55%); }
.course-card:nth-child(4n+3) .course-card__media{ background:linear-gradient(135deg,#c0392b,#5a2a1f 70%); }
.course-card:nth-child(4n+3) .course-card__media::before{ background:radial-gradient(120% 120% at 15% 10%, rgba(255,255,255,.25), transparent 55%); }
.course-card:nth-child(4n+4) .course-card__media{ background:linear-gradient(135deg,#4a5a78,#1c2740 70%); }
.course-card h3{ color:var(--primary); font-size:1.05rem; margin-bottom:8px; }
.course-card p{ color:var(--ink-soft); font-size:.88rem; margin-bottom:16px; }
.course-card__more{ font-size:.82rem; font-weight:700; color:var(--accent); display:inline-flex; align-items:center; gap:6px; }
.course-card__more::after{ content:"→"; transition:transform .2s var(--ease); }
.course-card:hover .course-card__more::after{ transform:translateX(4px); }

/* =========================================================
   MODAL
   ========================================================= */
.modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px;
  visibility:hidden; opacity:0; transition:opacity .25s var(--ease), visibility .25s; }
.modal.is-open{ visibility:visible; opacity:1; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(10,24,48,.6); backdrop-filter:blur(3px); }
.modal__dialog{ position:relative; background:#fff; border-radius:var(--radius-lg); padding:0; max-width:520px; width:100%;
  max-height:86vh; overflow-y:auto; box-shadow:0 30px 60px rgba(0,0,0,.3);
  transform:translateY(20px) scale(.97); opacity:0; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.modal.is-open .modal__dialog{ transform:translateY(0) scale(1); opacity:1; }
.modal__close{ position:absolute; top:16px; right:16px; background:rgba(255,255,255,.9); border:0; width:36px; height:36px; border-radius:50%;
  font-size:1.3rem; line-height:1; cursor:pointer; color:var(--ink-soft); z-index:2; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.modal__close:hover{ background:var(--white); }
/* 🖼️ Image sits flush at the top of the dialog (no padding), so it never
   needs negative-margin math that could break at different screen sizes. */
.modal__image{ width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--cream);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.modal__image img{ width:100%; height:100%; object-fit:cover; display:block; }
.modal__body{ padding:24px 40px 40px; }
.modal__meta{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0; padding:16px; background:var(--cream); border-radius:var(--radius-sm); }
.modal__meta dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:4px; }
.modal__meta dd{ margin:0; font-weight:700; color:var(--primary); font-size:.88rem; }
.modal__body h4{ font-size:.95rem; margin-top:20px; }
.modal__body ul{ margin-bottom:20px; }
.modal__body ul li{ position:relative; padding-left:20px; font-size:.92rem; color:var(--ink-soft); margin-bottom:6px; }
.modal__body ul li::before{ content:"✓"; position:absolute; left:0; color:var(--teal); font-weight:700; }

/* =========================================================
   ADMISSION FORM
   ========================================================= */
.admission{ display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:start; }
.admission__points{ margin-top:18px; }
.admission__points li{ position:relative; padding-left:26px; margin-bottom:10px; font-size:.94rem; color:var(--ink-soft); }
.admission__points li::before{ content:""; position:absolute; left:0; top:6px; width:14px; height:14px; border-radius:50%;
  background:var(--teal); }
.admission__form{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px;
  box-shadow:var(--shadow-sm); }
.field{ margin-bottom:18px; }
.field--split{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field label{ display:block; font-size:.85rem; font-weight:700; color:var(--primary); margin-bottom:6px; }
.field input, .field select, .field textarea{ width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px;
  font-family:var(--font-body); font-size:.95rem; background:var(--cream); transition:border-color .2s var(--ease), background-color .2s var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); background:#fff; }
.admission__actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
/* 🖼️ "Send via Email" only works reliably on phones, where the OS almost
   always has a default mail app registered for mailto: links. On a
   laptop/desktop with no mail client configured (very common — see
   #emailSubmit's click handler in main.js for the full explanation),
   clicking it does nothing at all with no visible error, which just
   looks broken. So on screens wider than 720px (i.e. not a phone) we
   hide the Email button entirely and keep only WhatsApp, which works
   everywhere. The button still exists in the HTML/JS for phones. */
#emailSubmit{ display:none; }
.field__note{ font-size:.78rem; color:var(--ink-soft); margin-top:14px; margin-bottom:0; }
.field__note--email-fallback{ background:#eaf7ee; border:1px solid #bfe3c9; color:#1f6b3a; padding:10px 14px;
  border-radius:10px; font-size:.85rem; }
.field__note--email-fallback a{ color:#1f6b3a; text-decoration:underline; }

/* =========================================================
   ABOUT
   ========================================================= */
/* 🖼️ ABOUT US BACKGROUND — a warm graduation/celebration photo, giving this
   section a more attractive, aspirational feel than a flat background.
   To swap it, replace the url(...) below with another image link. */
.section--about-photo{ position:relative; color:#fff;
  background:
    linear-gradient(100deg, rgba(10,24,48,.90) 0%, rgba(10,24,48,.82) 40%, rgba(10,24,48,.55) 100%),
    url('https://images.unsplash.com/photo-1760348082270-3a46a3512850?fm=jpg&q=75&w=1600&auto=format&fit=crop') center 40%/cover no-repeat; }
#about p{ color:#d7e0ef; }
#about .about__grid h4{ color:#fff; }
.about{ display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:center; }
.about__badge{ width:100%; max-width:320px; margin:0 auto; aspect-ratio:1/1; border-radius:50%; padding:14px;
  background:var(--white); border:2px solid var(--accent); box-shadow:0 0 0 8px rgba(217,164,65,.2), var(--shadow-md);
  display:flex; align-items:center; justify-content:center; }
.about__badge img{ width:100%; height:100%; object-fit:contain; border-radius:50%; }
.about__grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:20px; }
.about__grid h4{ font-size:1rem; margin-bottom:6px; }
.about__grid p{ font-size:.92rem; }

/* =========================================================
   DIRECTOR'S MESSAGE / OUR MISSION
   ========================================================= */
.mission{ display:grid; grid-template-columns:.75fr 1.25fr; gap:60px; align-items:center; }
.mission__photo{ position:relative; border-radius:24px; overflow:hidden; box-shadow:0 20px 44px rgba(0,0,0,.18);
  border:6px solid var(--white); outline:2px solid var(--accent); }
.mission__photo img{ width:100%; height:auto; display:block; }
.mission__signature{ text-align:center; margin-top:18px; }
.mission__signature strong{ display:block; font-family:var(--font-display); color:var(--primary); font-size:1.15rem; margin-bottom:8px; }
/* 🖼️ "Founder/Director" badge — shimmering gold pill with a small star
   icon, instead of plain gray text, so the credit under the director's
   photo actually stands out. Uses the same shimmer animation as
   .eyebrow--big elsewhere on the site for visual consistency. */
.mission__badge{ display:inline-flex; align-items:center; gap:7px; padding:7px 18px; border-radius:999px;
  font-family:var(--font-body); font-weight:700; font-size:.8rem; letter-spacing:.05em; text-transform:uppercase;
  color:#4a3308; background:linear-gradient(90deg, var(--accent-light) 0%, var(--accent) 45%, var(--accent-light) 90%);
  background-size:220% auto; box-shadow:0 8px 20px rgba(217,164,65,.4), 0 0 0 1px rgba(217,164,65,.35);
  animation:eyebrowShimmer 4s linear infinite; }
.mission__badge .ic{ width:.85em; height:.85em; color:#4a3308; }
.mission__greeting{ font-weight:700; color:var(--primary); margin-bottom:.6em; }
.mission__points{ margin-top:16px; }
.mission__points li{ position:relative; padding-left:26px; margin-bottom:10px; font-size:.95rem; color:var(--ink-soft); }
.mission__points li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--teal); font-weight:800; }

/* =========================================================
   FACULTY
   ========================================================= */
.faculty-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px; margin-top:36px; }
.faculty-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:22px 16px; text-align:center; box-shadow:0 8px 20px rgba(0,0,0,.08);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.faculty-card:hover{ transform:translateY(-6px); box-shadow:0 16px 32px rgba(0,0,0,.14); }
.faculty-card__photo{ width:88px; height:88px; margin:0 auto 14px; border-radius:50%; overflow:hidden;
  border:3px solid var(--accent-light); box-shadow:0 0 0 4px rgba(217,164,65,.15); transition:transform .3s var(--ease); }
.faculty-card:hover .faculty-card__photo{ transform:scale(1.06); }
.faculty-card__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.faculty-card h4{ font-size:.98rem; margin-bottom:4px; color:var(--primary); }
.faculty-card__role{ display:block; font-size:.8rem; font-weight:700; color:var(--accent); margin-bottom:2px; }
.faculty-card__qual{ display:block; font-size:.78rem; color:var(--ink-soft); }

/* =========================================================
   GALLERY (+ lightbox)
   ========================================================= */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:36px; }
.gallery-item{ position:relative; display:block; width:100%; aspect-ratio:4/3; padding:0; border:0; border-radius:var(--radius-md);
  overflow:hidden; cursor:pointer; background:var(--line); box-shadow:0 8px 20px rgba(0,0,0,.08);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); }
.gallery-item:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(0,0,0,.16); }
.gallery-item:hover img{ transform:scale(1.08); }

.lightbox{ position:fixed; inset:0; z-index:999; background:rgba(10,10,10,.92);
  display:flex; align-items:center; justify-content:center; padding:40px; }
.lightbox[hidden]{ display:none; }
.lightbox__img{ max-width:min(1100px,90vw); max-height:85vh; object-fit:contain; border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox__close{ position:absolute; top:18px; right:24px; background:none; border:0; color:#fff;
  font-size:2.2rem; line-height:1; cursor:pointer; }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12);
  border:0; color:#fff; width:48px; height:48px; border-radius:50%; font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s var(--ease); }
.lightbox__nav:hover{ background:rgba(255,255,255,.25); }
.lightbox__nav--prev{ left:18px; }
.lightbox__nav--next{ right:18px; }

/* =========================================================
   FAQ ACCORDION
   ========================================================= */
.accordion{ max-width:760px; margin-top:36px; }
.accordion__item{ border-bottom:1px solid var(--line); }
.accordion__q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; background:none; border:0;
  text-align:left; padding:20px 4px; font-family:var(--font-display); font-size:1.05rem; color:var(--primary); cursor:pointer; }
.accordion__q .plus{ flex-shrink:0; width:22px; height:22px; position:relative; }
.accordion__q .plus::before, .accordion__q .plus::after{ content:""; position:absolute; background:var(--primary); border-radius:2px;
  transition:transform .3s var(--ease); }
.accordion__q .plus::before{ width:100%; height:2px; top:50%; left:0; transform:translateY(-50%); }
.accordion__q .plus::after{ width:2px; height:100%; left:50%; top:0; transform:translateX(-50%); }
.accordion__item.is-open .plus::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.accordion__a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.accordion__a p{ padding:0 4px 20px; font-size:.94rem; }

/* =========================================================
   REVIEWS
   ========================================================= */
.reviews__track{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px; }
.review-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:26px; box-shadow:var(--shadow-sm); }
.review-card__stars{ color:var(--accent); font-size:1rem; letter-spacing:2px; margin-bottom:12px; }
.review-card p{ color:var(--ink-soft); font-size:.93rem; }
.review-card__name{ display:flex; align-items:center; gap:10px; margin-top:16px; }
.review-card__avatar{ width:38px; height:38px; border-radius:50%; background:var(--accent); color:var(--primary-deep); font-weight:700;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); }
.review-card__name strong{ display:block; color:var(--primary); font-size:.9rem; }
.review-card__name span{ font-size:.78rem; color:var(--ink-soft); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:stretch; }
.contact__list{ margin:24px 0; }
.contact__list li{ display:flex; align-items:center; gap:12px; margin-bottom:14px; font-size:.95rem; }
.contact__list .ic{ color:var(--urgent); font-size:1.1rem; }
.contact__social{ display:flex; gap:12px; margin-top:8px; }
.contact__social a{ width:42px; height:42px; border-radius:50%; background:var(--primary); color:#fff; display:flex;
  align-items:center; justify-content:center; transition:transform .2s var(--ease), background-color .2s var(--ease); }
.contact__social a:hover{ transform:translateY(-3px); background:var(--urgent); }
.contact__map{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); min-height:320px; }
.contact__map iframe{ width:100%; height:100%; min-height:320px; border:0; display:block; }
.contact__directions{ position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:8px;
  background:var(--white); color:var(--primary); font-weight:700; font-size:.85rem; padding:10px 16px; border-radius:999px;
  box-shadow:var(--shadow-md); }
.contact__directions .ic{ color:var(--urgent); }
.contact__directions:hover{ background:var(--accent-light); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--primary-deep); color:#a9c2b6; padding:60px 0 20px; }
.footer__inner{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer__brand strong{ color:#fff; font-family:var(--font-display); font-size:1.2rem; }
.footer__brand p{ color:#8aa89a; font-size:.88rem; margin-top:10px; }
.footer__links h5{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
.footer__links a{ display:block; margin-bottom:10px; font-size:.9rem; color:#a9c2b6; }
.footer__links a:hover{ color:var(--accent-light); }
.footer__bottom{ display:flex; justify-content:space-between; padding-top:20px; font-size:.82rem; flex-wrap:wrap; gap:8px; }

/* =========================================================
   FLOATING WHATSAPP
   ========================================================= */
.wa-float{ position:fixed; right:22px; bottom:22px; width:58px; height:58px; border-radius:50%; background:#25D366;
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.7rem; box-shadow:0 10px 24px rgba(37,211,102,.5);
  z-index:90; animation:floatPulse 2.4s infinite; }
.wa-float:hover{ transform:scale(1.08); }
@keyframes floatPulse{ 0%{box-shadow:0 10px 24px rgba(37,211,102,.5);} 50%{box-shadow:0 10px 24px rgba(37,211,102,.5),0 0 0 10px rgba(37,211,102,.15);} 100%{box-shadow:0 10px 24px rgba(37,211,102,.5);} }

/* =========================================================
   OFFER BANNER (Admission section)
   ========================================================= */
.offer-banner{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:linear-gradient(90deg,var(--urgent),#96281f);
  color:#fff; border-radius:var(--radius-md); padding:16px 22px; margin-bottom:44px; box-shadow:var(--shadow-md); }
.offer-banner__badge{ flex-shrink:0; background:#fff; color:var(--urgent); font-family:var(--font-display); font-weight:800;
  font-size:1.1rem; padding:6px 14px; border-radius:999px; animation:offerPulse 1.8s ease-in-out infinite; }
@keyframes offerPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
.offer-banner__text{ flex:1 1 220px; font-size:.95rem; }
.offer-banner__text strong{ font-weight:800; }
.offer-banner__cta{ flex-shrink:0; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.5); color:#fff;
  font-weight:700; font-size:.85rem; padding:9px 18px; border-radius:999px; transition:background-color .2s var(--ease); }
.offer-banner__cta:hover{ background:rgba(255,255,255,.28); }

/* =========================================================
   STICKY APPLY BAR
   (mobile-only persistent bottom bar; header already has an
   Apply Now button on larger screens — see responsive section)
   ========================================================= */
.sticky-cta{ display:none; }

/* =========================================================
   SCROLL REVEAL
   (content is visible by default — the hidden/animated state
   only applies once JS confirms it's running, via the "js"
   class on <html>. This means the page never looks empty,
   even if JavaScript fails to load for any reason.)
   ========================================================= */
html.js [data-reveal] { transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js [data-reveal]{ opacity:0; transform:translateY(24px); }
html.js [data-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* 🎞️ MOTION — a light wave/stagger so grid items don't all fade in at once */
html.js .grid > *:nth-child(1){ transition-delay:.02s; }
html.js .grid > *:nth-child(2){ transition-delay:.08s; }
html.js .grid > *:nth-child(3){ transition-delay:.14s; }
html.js .grid > *:nth-child(4){ transition-delay:.20s; }
html.js .grid > *:nth-child(5){ transition-delay:.26s; }
html.js .grid > *:nth-child(6){ transition-delay:.32s; }
html.js .grid > *:nth-child(7){ transition-delay:.38s; }
html.js .grid > *:nth-child(8){ transition-delay:.44s; }
html.js .reviews__track > *:nth-child(1){ transition-delay:.04s; }
html.js .reviews__track > *:nth-child(2){ transition-delay:.14s; }
html.js .reviews__track > *:nth-child(3){ transition-delay:.24s; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:960px){
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .faculty-grid{ grid-template-columns:repeat(3,1fr); }
  .gallery-grid{ grid-template-columns:repeat(3,1fr); }
  .fee-cards{ grid-template-columns:1fr; max-width:480px; margin-left:auto; margin-right:auto; }
  .admission, .about, .contact, .mission{ grid-template-columns:1fr; }
  .mission__photo{ max-width:340px; margin:0 auto; }
  .about__media{ order:2; }
  .reviews__track{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  /* 🖼️ Below tablet width, the diagonal split becomes a stacked layout:
     photo as a plain banner on top, text below on solid navy. */
  .hero{ display:block; min-height:auto; }
  /* 🐛 Bumped up from 230px — the hero photo was reading too small/thin
     on phones, more like a strip than a proper banner. */
  .hero__photo{ position:relative; left:0; height:320px; clip-path:polygon(0 0, 100% 0, 100% 100%, 0 90%); }
  .hero__wrap{ padding-top:40px; padding-bottom:56px; }
  .hero__inner{ max-width:100%; }
  /* 🖼️ The two decorative laurel branches cross into an ugly "X" shape on
     narrow screens, so they're hidden below tablet width — purely decorative. */
  .hero__laurel{ display:none; }
}
@media (max-width:720px){
  .hero__scroll-cue{ display:none; }
  .faculty-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .lightbox{ padding:16px; }
  .lightbox__nav{ width:40px; height:40px; }
  .stats-strip__grid{ grid-template-columns:repeat(2,1fr); }
  .stat-block{ padding:24px 12px; }
  .stat-block__num{ font-size:2rem; }

  /* 🐛 FIX: on phones the 4 filter pills (All Programs / Nursing /
     B-Category / FSC Diploma) used to wrap unevenly in a flex row — e.g.
     "All Programs" and "FSC Diploma / Federal Board" could end up sharing
     one line while another pill sat alone, which looked broken. Now they
     stack one per line, full width, so every pill is easy to tap and the
     order always reads top-to-bottom. */
  .course-tabs{ flex-direction:column; align-items:stretch; }
  .course-tab{ justify-content:center; }

  /* 🖼️ Mobile slide-in menu — uses "right" instead of "transform:translateX()"
     to avoid a known mobile-browser bug where transformed fixed panels can
     widen the page and cause sideways scrolling / whitespace on swipe. */
  .nav__links{ position:fixed; top:0; right:-340px; height:100vh; width:min(78vw,320px); background:#fff; flex-direction:column;
    padding:100px 30px 30px; gap:22px; box-shadow:-10px 0 30px rgba(0,0,0,.15);
    transition:right .35s var(--ease); overflow-y:auto; z-index:75; }
  .nav__links.is-open{ right:0; }
  .nav__toggle{ display:flex; z-index:76; }
  .nav__cta{ display:none; }

  /* 🖼️ On mobile the dropdown becomes an inline accordion instead of a floating popover */
  .nav__dropdown-trigger{ width:100%; justify-content:space-between; padding:6px 0; }
  .nav__dropdown-menu{ position:static; transform:none; opacity:1; visibility:visible; box-shadow:none;
    background:none; padding:0 0 0 14px; min-width:0; max-height:0; overflow:hidden;
    transition:max-height .3s var(--ease); }
  .nav__dropdown.is-open .nav__dropdown-menu{ max-height:220px; margin-top:8px; transform:none; }
  .nav__dropdown-menu a{ color:var(--ink-soft); padding:8px 0; }
  .topbar__contact a{ margin-right:12px; font-size:.8rem; }
  .grid--3, .grid--4{ grid-template-columns:1fr; }
  .field--split{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr; }
  .section{ padding:64px 0; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ width:100%; }
  .modal__meta{ grid-template-columns:1fr 1fr; }
  .admission__actions{ flex-direction:column; align-items:stretch; }
  .admission__actions .btn{ width:100%; }
  #emailSubmit{ display:inline-flex; }  /* shown again on phone-width screens */

  /* 🖼️ STICKY APPLY BAR — persistent bottom CTA on mobile, like a checkout bar.
     Body gets bottom padding so the last section/footer isn't hidden behind it,
     and the WhatsApp bubble shifts up so the two don't overlap. */
  body{ padding-bottom:76px; }
  .sticky-cta{ display:flex; align-items:center; justify-content:space-between; gap:14px;
    position:fixed; left:0; right:0; bottom:0; z-index:85; background:#fff; padding:12px 18px;
    box-shadow:0 -6px 20px rgba(0,0,0,.12); border-top:1px solid var(--line); }
  .sticky-cta__info{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
  .sticky-cta__info strong{ font-family:var(--font-display); color:var(--primary); font-size:.95rem; }
  .sticky-cta__info span{ font-size:.78rem; color:var(--ink-soft); }
  .sticky-cta__btn{ flex-shrink:0; padding:12px 24px; font-size:.9rem; }
  .wa-float{ bottom:88px; }
  .offer-banner{ padding:14px 16px; }

  /* 🖼️ The hamburger button itself animates into an ✕ when the menu opens
     (see .nav__toggle.is-active rules above) — that's the ONE close control,
     no separate close button needed inside the panel. */

  /* 🖼️ Course-detail popup becomes a full-screen page-like panel on mobile
     instead of a small centered box — fixes it being cut off / half-visible. */
  .modal{ padding:0; }
  .modal__dialog{ max-width:100%; width:100%; height:100%; max-height:100%; border-radius:0; }
  .modal__image{ border-radius:0; }
}

@media (max-width:480px){
  .fee-card{ padding:26px 22px; }
  .fee-card__grid{ grid-template-columns:1fr; gap:12px; }
  .fee-card__new{ font-size:1.6rem; }
  .wrap{ padding:0 16px; }
  .topbar__inner{ justify-content:center; text-align:center; }
  .topbar__social{ justify-content:center; width:100%; }
  .brand__text strong{ font-size:1rem; }
  .brand__text em{ font-size:.66rem; }
  .hero__wrap{ padding-top:28px; padding-bottom:40px; }
  .hero__photo{ height:260px; }
  .hero__title{ font-size:1.7rem; }
  .ribbon{ font-size:.78rem; padding:7px 12px; }
  .modal__body{ padding:20px 22px 26px; }
  .modal__meta{ grid-template-columns:1fr; }
  .admission__form{ padding:24px 20px; }
  .contact__directions{ left:50%; transform:translateX(-50%); bottom:12px; font-size:.78rem; padding:8px 14px; white-space:nowrap; }
  .footer__bottom{ flex-direction:column; text-align:center; }
}