/* ==========================================================================
   UNICOHS public site — design v2 (2026-10-27)
   Loaded AFTER style.css. To roll back, delete the <link> to this file in
   includes/header.php — nothing in style.css was changed.
   ========================================================================== */
:root {
  --navy-950: #050F22;
  --navy-50: #F2F5FA;
  --radius: 16px;
  --shadow-sm: 0 1px 2px rgba(8,26,56,.06), 0 2px 6px rgba(8,26,56,.05);
  --shadow-md: 0 10px 30px -8px rgba(8,26,56,.18), 0 3px 8px rgba(8,26,56,.06);
  --shadow-lg: 0 30px 70px -20px rgba(5,15,34,.35), 0 8px 20px rgba(5,15,34,.08);
  --ease: cubic-bezier(.2,.8,.2,1);
  --container: 1220px;
}
body { font-size: 16px; letter-spacing: -.003em; background: #fff; }
h1, h2, h3, h4 { letter-spacing: -.02em; }
::selection { background: var(--gold-500); color: var(--navy-900); }
:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; border-radius: 6px; }

/* ---------- Buttons ---------- */
.btn { padding: 14px 28px; font-weight: 650; letter-spacing: .005em; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-gold { background: linear-gradient(180deg, #FFB61F, var(--gold-500)); box-shadow: 0 6px 18px -6px rgba(244,163,0,.65); }
.btn-gold:hover { background: linear-gradient(180deg, #FFC03A, #F7AA10); box-shadow: 0 10px 26px -6px rgba(244,163,0,.75); }
.btn-navy { background: linear-gradient(180deg, var(--navy-700), var(--navy-800)); box-shadow: 0 6px 18px -8px rgba(15,46,92,.7); }
.btn-sm { padding: 10px 20px; }

/* ---------- Top bar + header: slimmer, frosted ---------- */
.topbar { background: var(--navy-950); font-size: 12px; }
.topbar-row { padding-top: 7px; padding-bottom: 7px; }
.header-row2 { background: rgba(255,255,255,.88); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); box-shadow: 0 1px 0 rgba(8,26,56,.07), 0 8px 30px -14px rgba(8,26,56,.18); }
.header-row2-inner { min-height: 86px; padding-top: 8px; padding-bottom: 8px; }
.brand-mark-img { width: 76px; height: 76px; transition: transform .35s var(--ease); }
.brand:hover .brand-mark-img { transform: rotate(-4deg) scale(1.05); }
.nav-links > li > a { position: relative; padding: 12px 11px; border-radius: 10px; font-size: 14px; transition: color .2s, background .2s; }
.nav-links > li > a::after {
  content: ''; position: absolute; left: 11px; right: 11px; bottom: 5px; height: 2px; border-radius: 2px;
  background: var(--gold-500); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav-links > li:hover > a::after, .nav-links > li.active > a::after { transform: scaleX(1); }
.nav-links > li > a:hover { background: transparent; color: var(--navy-700); }
.nav-links > li.active > a:hover { background: transparent; }
.dropdown { border-radius: 16px; padding: 10px; border-color: rgba(8,26,56,.08); box-shadow: var(--shadow-lg); top: calc(100% + 4px); }
.dropdown a { border-radius: 10px; padding: 10px 14px; transition: background .15s, padding-left .2s var(--ease); }
.dropdown a:hover { background: var(--navy-50); padding-left: 18px; }
.header-row2-actions .btn { background: var(--navy-900); }

/* ---------- Hero slider ---------- */
.hero-slider { height: min(720px, calc(100vh - 150px)); min-height: 560px; }
.hero-slide-media { filter: saturate(1.08) contrast(1.03); }
.hero-slide::before { border-color: rgba(244,163,0,.22); }
.hero-slide-panel {
  max-width: 560px; padding: 38px 40px; border-radius: 24px;
  background: linear-gradient(135deg, rgba(5,15,34,.62), rgba(5,15,34,.38));
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 30px 80px -24px rgba(0,0,0,.55);
}
.hero-slide-title { font-size: clamp(34px, 4.6vw, 58px); letter-spacing: -.03em; line-height: 1.05; }
.hero-slide-title em { font-style: normal; color: var(--gold-500); }
.hero-slide-desc { font-size: 17px; line-height: 1.6; }
.hero-slide-tag { border-radius: 999px; }
.hero-nav { backdrop-filter: blur(10px); transition: background .2s, transform .2s var(--ease); }
.hero-nav:hover { transform: scale(1.08); }

/* ---------- Quick links ---------- */
.quicklinks { margin-top: -54px; }
.quicklinks .grid { gap: 0; border-radius: 22px; box-shadow: var(--shadow-lg); border: 1px solid rgba(8,26,56,.05); overflow: hidden; }
.quicklink { padding: 28px 22px; transition: background .25s var(--ease), transform .25s var(--ease); position: relative; }
.quicklink:hover { background: var(--navy-900); transform: none; }
.quicklink:hover strong { color: #fff; }
.quicklink:hover span { color: #AEBBD2; }
.quicklink .ico { width: 52px; height: 52px; border-radius: 16px; transition: background .25s, color .25s, transform .3s var(--ease); }
.quicklink .ico svg, .icon-card .ico svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quicklink:hover .ico { background: var(--gold-500); color: var(--navy-900); transform: translateY(-3px) rotate(-5deg); }

/* ---------- Sections ---------- */
.section { padding: 96px 0; background-image: none; }
.section-alt { background: linear-gradient(180deg, var(--navy-50), #fff 140%); }
.section-head { margin-bottom: 52px; max-width: 700px; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.03em; }
.section-head p { font-size: 17px; line-height: 1.65; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; letter-spacing: .14em; }
.eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--gold-500); border-radius: 2px; }
.section-head .eyebrow::after { content: ''; width: 26px; height: 2px; background: var(--gold-500); border-radius: 2px; }

/* ---------- Cards ---------- */
.card { border-radius: var(--radius); border: 1px solid rgba(8,26,56,.08); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(244,163,0,.4); }
.icon-card { padding: 34px 30px; background: #fff; }
.icon-card::before { opacity: 1; height: 4px; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.icon-card:hover::before { transform: scaleX(1); }
.icon-card .ico { width: 58px; height: 58px; border-radius: 18px; }
.icon-card h3 { font-size: 18px; }
.icon-card p { font-size: 14.5px; line-height: 1.65; }
.news-card .thumb { height: 190px; transition: transform .6s var(--ease); }
.news-card { overflow: hidden; }
.news-card:hover .thumb { transform: scale(1.04); }
.news-card h3 { font-size: 17.5px; line-height: 1.3; }
.news-card a.link, .faculty-card a.link { display: inline-flex; gap: 6px; transition: gap .2s var(--ease), color .2s; }
.news-card a.link:hover, .faculty-card a.link:hover { gap: 11px; color: var(--gold-600); }

/* ---------- Faculty photo cards ---------- */
.fpc-grid { gap: 26px; }
.fpc-image { height: 260px; border-radius: 22px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); background-position: center 18%; }
.fpc-image::after { background: linear-gradient(180deg, rgba(8,26,56,0) 30%, rgba(5,15,34,.85) 100%); }
.faculty-photo-card:hover .fpc-image { transform: translateY(-8px) scale(1.01); }
.fpc-label { left: 18px; right: 18px; bottom: -20px; border-radius: 14px; background: linear-gradient(135deg, var(--navy-800), var(--navy-900)); border-top: 2px solid var(--gold-500); text-align: left; padding: 15px 18px; display: flex; justify-content: space-between; align-items: center; }
.fpc-label::after { content: '→'; color: var(--gold-500); font-weight: 700; transition: transform .25s var(--ease); }
.faculty-photo-card:hover .fpc-label::after { transform: translateX(5px); }

/* ---------- Stats band ---------- */
.stats-band { position: relative; background: radial-gradient(900px 300px at 15% 0%, rgba(244,163,0,.14), transparent 60%), linear-gradient(135deg, var(--navy-950), var(--navy-800)); padding: 72px 0; overflow: hidden; }
.stats-band .grid { gap: 20px; }
.stat { padding: 8px 0; position: relative; }
.stat + .stat::before { content: ''; position: absolute; left: -10px; top: 14%; bottom: 14%; width: 1px; background: rgba(255,255,255,.12); }
.stat strong { font-size: clamp(38px, 4.4vw, 56px); letter-spacing: -.03em; background: linear-gradient(180deg, #FFD370, var(--gold-500)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stat span { color: #AEBBD2; font-size: 12.5px; letter-spacing: .1em; }

/* ---------- CTA banner ---------- */
.cta-banner { position: relative; overflow: hidden; border-radius: 28px; padding: 60px 56px; background: radial-gradient(500px 260px at 90% 0%, rgba(244,163,0,.35), transparent 70%), linear-gradient(135deg, var(--navy-900), var(--navy-700)); color: #fff; box-shadow: var(--shadow-lg); }
.cta-banner::before { content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%; border: 1px solid rgba(244,163,0,.25); right: -90px; bottom: -190px; }
.cta-banner::after { content: ''; position: absolute; width: 240px; height: 240px; border-radius: 50%; border: 1px solid rgba(244,163,0,.18); right: -20px; bottom: -130px; }
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color: #fff; font-size: clamp(24px, 3vw, 34px); }
.cta-banner p { color: #C9D3E4; opacity: 1; font-size: 16.5px; }
.cta-banner .btn-navy { background: linear-gradient(180deg, #FFB61F, var(--gold-500)); color: var(--navy-900); box-shadow: 0 8px 22px -6px rgba(244,163,0,.7); }

/* ---------- Inner-page hero ---------- */
.page-hero { position: relative; overflow: hidden; padding: 84px 0 76px; background: radial-gradient(700px 320px at 92% 0%, rgba(244,163,0,.2), transparent 65%), radial-gradient(900px 400px at 0% 100%, rgba(22,62,119,.8), transparent 60%), linear-gradient(135deg, var(--navy-950), var(--navy-800)); }
.page-hero::before { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; border: 1px solid rgba(244,163,0,.15); left: -200px; top: -260px; pointer-events: none; }
.page-hero .container { position: relative; }
.page-hero h1 { font-size: clamp(30px, 4.2vw, 50px); letter-spacing: -.03em; line-height: 1.1; }
.page-hero p { font-size: 17.5px; color: #C9D3E4; }
.page-hero-media { border-radius: 24px; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.14); }
.breadcrumb { display: inline-flex; margin-top: 18px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); font-size: 12.5px; color: #C9D3E4; }
.breadcrumb a { color: var(--gold-500); }

/* ---------- Forms ---------- */
.form-group label { font-size: 13px; letter-spacing: .01em; }
.form-group input, .form-group select, .form-group textarea { padding: 13px 15px; border-radius: 12px; border: 1.5px solid #D3DAE5; transition: border-color .2s, box-shadow .2s; background: #fff; }
.form-group input:hover, .form-group select:hover, .form-group textarea:hover { border-color: var(--navy-200, #C9D6EA); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--gold-500); box-shadow: 0 0 0 4px rgba(244,163,0,.18); }
table.simple { border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid rgba(8,26,56,.08); }
table.simple th { background: var(--navy-900); color: #fff; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
table.simple tr:hover td { background: var(--navy-50); }

/* ---------- Footer ---------- */
.footer { background: radial-gradient(700px 300px at 100% 0%, rgba(244,163,0,.08), transparent 60%), linear-gradient(180deg, var(--navy-900), var(--navy-950)); padding-top: 84px; border-top: 4px solid var(--gold-500); }
.footer h4 { font-size: 13px; letter-spacing: .12em; color: var(--gold-500); margin-bottom: 20px; }
.footer ul a { display: inline-block; transition: color .2s, transform .2s var(--ease); }
.footer ul a:hover { transform: translateX(4px); }
.social-row a { border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.12); }
.social-row a:hover { background: var(--gold-500); color: var(--navy-900); transform: translateY(-3px); }

/* ---------- Accreditation marquee ---------- */
.accred-marquee { background: #fff; border-top: 1px solid rgba(8,26,56,.06); }
.accred-track img { filter: grayscale(1) opacity(.7); transition: filter .3s; }
.accred-track img:hover { filter: none; }

/* ---------- Scroll-reveal polish ---------- */
.reveal-fade { transform: translateY(26px); transition-duration: .8s; transition-timing-function: var(--ease); }

/* ---------- Mobile ---------- */
@media (max-width: 980px) {
  .section { padding: 72px 0; }
  .stat + .stat::before { display: none; }
}
@media (max-width: 760px) {
  .hero-slide-panel { padding: 26px 24px; border-radius: 20px; }
  .hero-slider { min-height: 520px; }
  .header-row2-inner { min-height: 72px; }
  .brand-mark-img { width: 60px; height: 60px; }
  .cta-banner { padding: 40px 26px; }
  .nav-links.open { border-radius: 0 0 20px 20px; padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .card, .fpc-image, .quicklink, .news-card .thumb { transition: none !important; }
}

/* ==========================================================================
   Motion layer (js/motion-v2.js) — backgrounds behind text and heroes
   ========================================================================== */
.hero-slider, .page-hero, .stats-band, .cta-banner { isolation: isolate; }
.mo-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.mo-orb { position: absolute; border-radius: 50%; filter: blur(60px); will-change: transform; }
.mo-orb-gold { width: 520px; height: 520px; top: -160px; right: 4%; background: radial-gradient(circle, rgba(244,163,0,.50), transparent 68%); }
.mo-orb-blue { width: 640px; height: 640px; bottom: -280px; left: -120px; background: radial-gradient(circle, rgba(60,120,220,.55), transparent 68%); }
.mo-orb-soft { width: 380px; height: 380px; top: 28%; left: 38%; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); }
.mo-grid {
  position: absolute; inset: -40px;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
  animation: mo-grid-drift 40s linear infinite;
}
@keyframes mo-grid-drift { to { transform: translate3d(56px, 56px, 0); } }
.hero-slide { background: transparent; }
.hero-slider > .hero-slider-track, .page-hero > .container, .stats-band > .container, .cta-banner > *:not(.mo-bg) { position: relative; z-index: 1; }
.hero-slider-track { position: relative; z-index: 1; }
.hero-nav, .hero-dots { z-index: 3; }
.cta-banner .mo-bg { border-radius: inherit; }

/* Ghost words: huge outlined type that sits behind a heading */
.mo-has-ghost { position: relative; }
.mo-ghost {
  position: absolute; left: 50%; top: 50%; translate: -50% -52%; z-index: -1;
  font-family: 'Poppins', 'Inter', sans-serif; font-weight: 800; font-size: clamp(70px, 14vw, 190px); line-height: 1;
  letter-spacing: -.04em; text-transform: uppercase; white-space: nowrap; pointer-events: none; user-select: none;
  color: transparent; -webkit-text-stroke: 1.5px rgba(15,46,92,.12);
}
.page-hero .mo-ghost { left: 0; translate: 0 -50%; -webkit-text-stroke: 1.5px rgba(255,255,255,.12); font-size: clamp(80px, 12vw, 170px); }
.section-head { position: relative; isolation: isolate; }
.section-head > *:not(.mo-ghost) { position: relative; z-index: 1; }

/* Word-by-word headline reveal */
.mo-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.mo-word { display: inline-block; will-change: transform; }

/* Scroll progress */
.mo-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 200; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--gold-500), #FFD370); pointer-events: none; }

@media (max-width: 760px) {
  .mo-orb { filter: blur(40px); }
  .mo-orb-gold { width: 300px; height: 300px; }
  .mo-orb-blue { width: 380px; height: 380px; }
  .mo-ghost { font-size: 22vw; }
}
@media (prefers-reduced-motion: reduce) {
  .mo-grid { animation: none; }
}
.section, .page-hero { overflow-x: clip; }
.mo-ghost { font-size: clamp(64px, 11vw, 150px); }

/* ---------- Refinement: cleaner light, calmer stats strip ---------- */
.mo-orb-gold { background: radial-gradient(circle, rgba(255,196,77,.30), rgba(244,163,0,.08) 45%, transparent 70%); }
.mo-orb-blue { background: radial-gradient(circle, rgba(52,110,214,.50), rgba(52,110,214,.10) 50%, transparent 70%); }
.mo-orb-soft { background: radial-gradient(circle, rgba(255,255,255,.07), transparent 70%); }
.mo-grid { opacity: .55; }

.stats-band {
  background: linear-gradient(180deg, #0A1F42 0%, #0B2551 100%);
  padding: 64px 0 60px;
  position: relative;
}
.stats-band::before, .stats-band::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,163,0,.55) 50%, transparent);
}
.stats-band::before { top: 0; }
.stats-band::after { bottom: 0; opacity: .35; }
.stats-band .grid { max-width: 1020px; margin: 0 auto; gap: 0; }
.stat { padding: 6px 12px; }
.stat + .stat::before { top: 8%; bottom: 8%; background: linear-gradient(180deg, transparent, rgba(255,255,255,.22), transparent); }
.stat strong {
  font-size: clamp(42px, 5vw, 60px); line-height: 1.05; margin-bottom: 10px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFE2A0 45%, #F4A300 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { color: #9FB0CC; font-size: 12px; font-weight: 600; letter-spacing: .16em; }