/* =============================================
   FRONTEND STYLES — University Portal Public Site
   All classes prefixed with fl- (frontend-layout)
   to avoid collision with admin panel CSS
   ============================================= */

:root{
  /* ===== V3 PALETTE — mentor-approved Red + White + Dark Navy text =====
     Variable NAMES kept the same on purpose (--navy, --amber, --teal, --cream)
     so every selector below picks up the new theme automatically —
     no need to touch class rules just to change color.
     --navy / --navy-deep : unchanged — still used for headings & dark text,
       matches mentor's "Dark Navy for headings/important text" requirement.
     --amber / --amber-deep : now the PRIMARY RED (was teal in V2). This was
       already the site's single "accent/CTA color" variable, so red naturally
       takes over every CTA button, search button, and accent element.
     --teal : now a deep red, used only in background gradients behind
       images (barely visible once real photos load).
     --tint : now a very light pink, for icon badges/soft accents. */
  --navy:#1E2A52;        /* deep indigo — headings & important text */
  --navy-deep:#141B38;   /* darker indigo — footer/dark sections */
  --amber:#E0342B;       /* was teal #12998C -> bright red (primary/CTA/accent) */
  --amber-deep:#B8241C;  /* was #0D7A70 -> darker red for hover states */
  --teal:#8C1F1A;        /* was teal #0F8577 -> deep red, gradients only */
  --cream:#F6F8FB;       /* cool light gray background */
  --ink:#1A2138;
  --ink-soft:#5B6684;
  --line:#E3E8F1;        /* cool-toned border */
  --white:#FFFFFF;
  --star:#F0A93A;        /* rating star icon color — unchanged, matches reference */
  --tint:#FCEAEA;        /* was light teal -> very light red/pink, icon/badge backgrounds */
  --radius:11px;
}

/* ===== RESET (fixes stacked default-margin whitespace between sections) ===== */
*, *::before, *::after{ box-sizing:border-box; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure{ margin:0; padding:0; }
ul, ol{ list-style:none; }
img{ display:block; max-width:100%; }
a{ text-decoration:none; color:inherit; }
button, input{ font-family:inherit; }

body{ font-family:'Inter', sans-serif; background:var(--cream); color:var(--ink); line-height:1.5; }
.fl-container{ max-width:1240px; margin:0 auto; padding:0 24px; }

/* ===== TOP UTILITY BAR ===== */
.fl-topbar{ background: var(--amber); color:var(--white); font-size:13px; }
.fl-topbar__inner{ display:flex; align-items:center; justify-content:space-between; height:40px; }
.fl-topbar__left{ display:flex; align-items:center; gap:6px; }
.fl-topbar__left .fl-star{ color: var(--white); }
.fl-topbar__right{ display:flex; align-items:center; gap:22px; }
.fl-topbar__right span{ display:flex; align-items:center; gap:6px; }
.fl-topbar__social{ display:flex; gap:12px; margin-left:6px; }
.fl-topbar__social a{ opacity:0.85; font-size:12px; transition:opacity .2s ease; }
.fl-topbar__social a:hover{ opacity:1; }

/* ===== HEADER ===== */
.fl-header{ position: sticky; top:0; z-index:200; background: var(--white); border-bottom: 1px solid var(--line); }
.fl-header__bar{ display:flex; align-items:center; justify-content:space-between; height:78px; gap:24px; }
.fl-logo{ display:flex; align-items:center; gap:10px; font-family:'Fraunces', serif; font-weight:600; font-size:22px; color: var(--navy); letter-spacing:-0.01em; flex-shrink:0; }
.fl-logo__mark{ width:36px; height:36px; border-radius:8px; background: linear-gradient(135deg, var(--amber), var(--amber-deep)); display:flex; align-items:center; justify-content:center; color: var(--white); font-family:'Fraunces', serif; font-weight:700; font-size:18px; flex-shrink:0; }

.fl-nav{ display:flex; align-items:center; gap:8px; }
.fl-nav-item{ position:relative; }
.fl-nav-item > a{ display:flex; align-items:center; gap:5px; font-size:15px; font-weight:500; color: var(--ink-soft); padding:12px 12px; border-radius:8px; transition: color .2s ease, background .2s ease; }
.fl-nav-item > a .caret{ font-size:10px; transition: transform .2s ease; }
.fl-nav-item:hover > a{ color: var(--navy); background:var(--cream); }
.fl-nav-item:hover > a .caret{ transform: rotate(180deg); }
.fl-nav-item.is-active > a{ color: var(--navy); font-weight:600; }

.fl-mega{ position:absolute; top:100%; left:0; background: var(--white); border:1px solid var(--line); border-radius:12px; box-shadow: 0 16px 40px rgba(18,29,52,0.12); padding:20px; display:grid; grid-template-columns: repeat(2, 180px); gap:24px; opacity:0; visibility:hidden; transform: translateY(6px); transition: all .18s ease; }
.fl-nav-item:hover .fl-mega{ opacity:1; visibility:visible; transform:translateY(0); }
.fl-mega h5{ font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color: var(--amber-deep); margin-bottom:10px; font-weight:700; }
.fl-mega a{ display:block; font-size:14px; color: var(--ink-soft); padding:6px 0; transition: color .15s ease; }
.fl-mega a:hover{ color: var(--navy); }

.fl-header__actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.fl-search-btn{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background: var(--cream); display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--ink-soft); font-size:14px; transition: all .2s ease; }
.fl-search-btn:hover{ border-color: var(--amber); color: var(--amber); }
.fl-login{ font-size:14px; font-weight:600; color: var(--navy); padding:10px 6px; white-space:nowrap; }
.fl-cta{ background: var(--amber); color: var(--white); font-size:14px; font-weight:700; padding:11px 20px; border-radius: var(--radius); border:none; cursor:pointer; transition: background .2s ease; white-space:nowrap; }
.fl-cta:hover{ background: var(--amber-deep); }
.fl-burger{ display:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:none; cursor:pointer; align-items:center; justify-content:center; }
.fl-burger span, .fl-burger span::before, .fl-burger span::after{ content:''; display:block; width:16px; height:2px; background: var(--ink); position:relative; }
.fl-burger span::before{ position:absolute; top:-5px; }
.fl-burger span::after{ position:absolute; top:5px; }

.fl-mobile-nav{ display:none; flex-direction:column; background: var(--white); border-bottom:1px solid var(--line); padding:8px 24px 20px; }
.fl-mobile-nav.is-open{ display:flex; }
.fl-mobile-nav a{ padding:12px 0; border-bottom:1px solid var(--line); font-weight:500; }
.fl-mobile-nav a:last-of-type{ border-bottom:none; }

/* ===== HERO ===== */
.fl-hero{ padding:32px 0 48px; }
.fl-hero__grid{ display:grid; grid-template-columns: 1fr 0.95fr; gap:56px; align-items:center; }
.fl-eyebrow{ display:inline-flex; align-items:center; gap:8px; background:var(--tint); color: var(--amber); font-size:13px; font-weight:600; padding:8px 16px; border-radius:999px; margin-bottom:22px; }
.fl-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--amber); }
.fl-hero h1{ font-family:'Fraunces', serif; font-size:52px; font-weight:700; line-height:1.08; letter-spacing:-0.01em; color: var(--navy-deep); margin-bottom:22px; }
.fl-hero h1 span{ color: var(--amber); font-style:italic; font-weight:600; }
.fl-hero p.lede{ font-size:16.5px; color: var(--ink-soft); max-width:460px; margin-bottom:30px; }
.fl-search-bar{ display:flex; align-items:center; background: var(--white); border:1.5px solid var(--line); border-radius:12px; padding:6px; margin-bottom:18px; max-width:520px; }
.fl-search-bar input{ flex:1; border:none; outline:none; background:transparent; padding:12px 14px; font-size:14.5px; color: var(--ink); font-family:inherit; }
.fl-search-bar button{ background: var(--amber); color: var(--white); border:none; width:44px; height:44px; border-radius:9px; cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: background .2s ease; }
.fl-search-bar button:hover{ background: var(--amber-deep); }
.fl-popular{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.fl-popular span.label{ font-size:13.5px; font-weight:600; color: var(--ink); margin-right:2px; }
.fl-tag{ font-size:13px; color: var(--ink-soft); border:1px solid var(--line); padding:7px 15px; border-radius:999px; background: var(--white); transition: all .18s ease; cursor:pointer; }
.fl-tag:hover{ border-color: var(--amber); color: var(--amber); }
.fl-hero__btns{ display:flex; align-items:center; gap:14px; }
.fl-btn-primary{ display:inline-flex; align-items:center; gap:8px; background: var(--amber); color: var(--white); font-weight:700; font-size:15px; padding:15px 28px; border-radius: var(--radius); border:none; cursor:pointer; transition: background .2s ease, transform .15s ease, box-shadow .2s ease; box-shadow:0 4px 14px -4px rgba(224,52,43,0.45); }
.fl-btn-primary:hover{ background: var(--amber-deep); transform:translateY(-1px); box-shadow:0 8px 20px -4px rgba(224,52,43,0.5); }
.fl-btn-primary:active{ transform:translateY(0); }
.fl-btn-outline{ background: transparent; color: var(--amber); font-weight:700; font-size:15px; padding:15px 26px; border-radius: var(--radius); border:1.5px solid var(--amber); cursor:pointer; transition: all .2s ease; }
.fl-btn-outline:hover{ background: var(--amber); color: var(--white); }

/* Dedicated navy CTA — used specifically for "View Details" on university cards,
   kept separate from .fl-btn-primary (teal) so the two-tier hierarchy from the
   approved Demo V2 stays intact: teal = primary site-wide action, navy = card-level action. */
.fl-btn-dark{ display:inline-flex; align-items:center; gap:8px; background: var(--amber); color: var(--white); font-weight:700; font-size:14px; padding:11px 20px; border-radius: var(--radius); border:none; cursor:pointer; transition: background .2s ease, transform .15s ease; }
.fl-btn-dark:hover{ background: var(--amber-deep); transform:translateY(-1px); }
.fl-btn-dark:active{ transform:translateY(0); }

/* ===== HERO VISUAL — Mentor-approved composition: circular photo + rotating
   ring + 3 floating stat cards. Replaces the old two-image "bento" layout.
   Ring re-creates the rotating effect from Demo V1, now themed to
   navy/amber/teal instead of gold, and kept purely decorative (CSS-only,
   doesn't touch the photo, text, or floating stat cards). ===== */
.fl-hero__visual{ position:relative; display:flex; align-items:center; justify-content:center; height:480px; }

.fl-hero__ring{
  position:absolute;
  width:410px; height:410px;
  border-radius:50%;
  border:1.5px dashed rgba(224,52,43,0.45); /* var(--amber) at low opacity, dashed like Demo V1 */
  animation: fl-ring-spin 60s linear infinite;
  pointer-events:none; /* purely decorative — never blocks clicks/taps on photo or floating cards */
}
@keyframes fl-ring-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .fl-hero__ring{ animation:none; }
}

.fl-hero__photo{
  width:360px; height:360px;
  border-radius:50%;
  overflow:hidden;
  border:7px solid var(--white);
  box-shadow: 0 24px 48px rgba(18,29,52,0.18);
  position:relative;
  z-index:2;
  background: linear-gradient(135deg, var(--amber-deep), var(--teal));
}
.fl-hero__photo img{ width:100%; height:100%; object-fit:cover; }

/* Floating stat cards — unchanged visual language, repositioned around the
   circular photo instead of the old rectangular bento. */
.fl-hero__float{
  position:absolute;
  background: var(--white);
  border-radius:14px;
  padding:12px 16px;
  display:flex; align-items:center; gap:10px;
  box-shadow: 0 12px 28px rgba(18,29,52,0.16);
  min-width:150px;
  z-index:5;
}
.fl-hero__float-icon{
  width:38px; height:38px; border-radius:10px; background:var(--tint); color:var(--amber-deep);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.fl-hero__float-icon svg{ display:block; }
.fl-hero__float b{ display:block; font-size:16px; color: var(--navy-deep); font-family:'Fraunces', serif; }
.fl-hero__float small{ font-size:11.5px; color: var(--ink-soft); }
.fl-hero__float--uni{ top:6%; left:-6%; }
.fl-hero__float--course{ top:42%; right:-8%; }
.fl-hero__float--students{ bottom:6%; left:6%; }

/* ===== STATS BAR — dark navy per Demo V2 ===== */
.fl-stats{ background: var(--white); border-top:1px solid var(--line); }
.fl-stats__grid{ display:grid; grid-template-columns: repeat(6, 1fr); padding:32px 0; }
.fl-stat{ text-align:center; border-right:1px solid var(--line); }
.fl-stat:last-child{ border-right:none; }
.fl-stat__icon{ width:36px; height:36px; border-radius:9px; background:var(--tint); color:var(--amber); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; }
.fl-stat__icon svg{ width:16px; height:16px; }
.fl-stat b{ display:block; font-family:'Fraunces', serif; font-size:24px; color: var(--navy-deep); font-weight:700; }
.fl-stat small{ font-size:12px; color: var(--ink-soft); }

/* ===== CONTENT SLOT (fallback placeholder, not used once real pages exist) ===== */
.fl-content-slot{ display:flex; align-items:center; justify-content:center; text-align:center; padding:48px 24px; }

/* ===== FOOTER — matches mentor's CollegeNixa reference exactly: dark
   near-black panel (not navy, not white), white headings/logo text,
   muted warm-gray body text, red only for logo mark + accent chip. ===== */
.fl-footer{ background:#180F11; color:#B7ACAE; margin-top:40px; }
.fl-footer__top{ padding:64px 24px 40px; display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:40px; }
.fl-footer__brand .fl-logo{ color: var(--white); margin-bottom:16px; }
.fl-footer__brand .fl-logo__mark{ background: linear-gradient(135deg, var(--amber), var(--amber-deep)); color: var(--white); }
.fl-footer__brand p{ font-size:14px; color:#B7ACAE; max-width:280px; margin-bottom:20px; }
.fl-social{ display:flex; gap:10px; }
.fl-social a{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.05); color:#B7ACAE; display:flex; align-items:center; justify-content:center; font-size:13px; transition: all .2s ease; }
.fl-social a:hover{ border-color: var(--amber); color: var(--amber); }
.fl-footer h4{ font-size:13px; letter-spacing:0.05em; text-transform:uppercase; color: var(--white); margin-bottom:18px; font-weight:700; }
.fl-footer ul li{ margin-bottom:11px; }
.fl-footer ul a{ font-size:14px; color:#B7ACAE; transition: color .2s ease; }
.fl-footer ul a:hover{ color: var(--white); }
.fl-newsletter{ display:flex; margin-top:6px; border-radius: var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,0.14); }
.fl-newsletter input{ flex:1; background: rgba(255,255,255,0.07); border:none; padding:11px 14px; color: var(--white); font-size:13px; outline:none; }
.fl-newsletter input::placeholder{ color:#8B8082; }
.fl-newsletter button{ background:#0F0A0B; border:none; padding:0 16px; color: var(--white); font-weight:700; font-size:13px; cursor:pointer; }
.fl-footer__bottom{ border-top:1px solid rgba(255,255,255,0.10); padding:20px 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.fl-footer__bottom p{ font-size:13px; color:#8B8082; }
.fl-footer__bottom .fl-legal{ display:flex; gap:20px; }
.fl-footer__bottom .fl-legal a{ font-size:13px; color:#8B8082; }
.fl-footer__bottom .fl-legal a:hover{ color: var(--white); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1080px){
  .fl-hero__grid{ grid-template-columns:1fr; }
  .fl-hero__visual{ order:-1; }
  .fl-hero h1{ font-size:42px; }
  .fl-hero__visual{ height:360px; }
  .fl-hero__ring{ width:320px; height:320px; }
  .fl-hero__photo{ width:280px; height:280px; }
  .fl-stats__grid{ grid-template-columns: repeat(3, 1fr); }
  .fl-stat{ border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:20px; }
  .fl-stat:nth-child(3n){ border-right:none; }
  .fl-footer__top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px){
  .fl-nav{ display:none; }
  .fl-header__actions .fl-login, .fl-header__actions .fl-cta{ display:none; }
  .fl-burger{ display:flex; }
  .fl-topbar__left span:last-child, .fl-topbar__right span{ display:none; }
}
@media (max-width: 560px){
  .fl-hero{ padding:28px 0 32px; }
  .fl-hero h1{ font-size:30px; }
  .fl-hero p.lede{ font-size:15px; }

  /* FIX — .fl-hero__visual is display:flex (row by default). Once the floats
     became position:static, they and the photo were competing as flex row
     siblings, squishing the photo into a thin strip. flex-direction:column
     fixes the stacking; flex-shrink:0 on the photo stops it being squeezed. */
  .fl-hero__visual{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    height:auto;
    padding:24px 0 8px;
    gap:14px;
  }

  .fl-hero__ring{ display:none; }

  .fl-hero__photo{ width:220px; height:220px; flex-shrink:0; margin-bottom:6px; }

  .fl-hero__float{ position:static; width:100%; max-width:340px; margin-top:0; box-sizing:border-box; }

  .fl-search-bar{ max-width:100%; }
  .fl-hero__btns{ flex-wrap:wrap; }
  .fl-hero__btns a{ flex:1; min-width:140px; text-align:center; }

  .fl-stats__grid{ grid-template-columns: repeat(2, 1fr); gap:16px 12px; padding:24px 0; }
  .fl-stat{ border-right:none; border-bottom:1px solid var(--line); padding-bottom:16px; }
  .fl-stat:nth-last-child(-n+2){ border-bottom:none; }
  .fl-stat b{ font-size:20px; }

  .fl-footer__top{ grid-template-columns: 1fr; padding:48px 24px 32px; }
  .fl-footer__bottom{ flex-direction:column; align-items:flex-start; }
}

/* ===== CATEGORIES — Browse by Course ===== */
.fl-categories{ padding:56px 0 8px; }
.fl-categories__head, .fl-featured__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.fl-categories__head h2, .fl-featured__head h2{ font-family:'Fraunces', serif; font-size:26px; font-weight:700; color: var(--navy-deep); }
.fl-viewall{ color: var(--amber-deep); font-weight:600; font-size:14px; }
.fl-viewall:hover{ text-decoration:underline; }

.fl-categories__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(108px, 1fr)); gap:16px; }
.fl-cat-item{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:0;
  background: var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px 10px 18px;
  color: var(--ink);
  font-size:13.5px; font-weight:700;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fl-cat-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(18,29,52,0.10);
  border-color: transparent;
}
.fl-cat-icon{ width:50px; height:50px; border-radius:13px; background:var(--tint); color:var(--amber); display:flex; align-items:center; justify-content:center; margin-bottom:12px; transition: background .15s ease, color .15s ease; }
.fl-cat-icon svg{ width:21px; height:21px; }
.fl-cat-item:hover .fl-cat-icon{ background:var(--amber); color:var(--white); }
.fl-cat-item span{ line-height:1.3; }
.fl-cat-item small{ display:block; font-size:11px; font-weight:500; color: var(--ink-soft); margin-top:3px; }

/* ===== FEATURED — Top Universities ===== */
.fl-featured{ padding:48px 0 72px; }
.fl-featured__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:22px; }
.fl-uni-card{ background: var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; transition: box-shadow .2s ease; }
.fl-uni-card:hover{ box-shadow: 0 12px 28px rgba(18,29,52,0.1); }
.fl-uni-card__img{ width:100%; height:90px; border-radius:8px; overflow:hidden; margin-bottom:14px; background: var(--cream); display:flex; align-items:center; justify-content:center; }
.fl-uni-card__img img{ width:100%; height:100%; object-fit:cover; }
.fl-uni-card__placeholder{ font-size:28px; }
.fl-uni-card h3{ font-family:'Fraunces', serif; font-size:16px; font-weight:700; color: var(--navy-deep); margin-bottom:4px; }
.fl-uni-card__loc{ font-size:13px; color: var(--ink-soft); margin-bottom:12px; }
.fl-uni-card__meta{ display:flex; gap:8px; margin-bottom:16px; }
.fl-rating{ font-size:12px; font-weight:700; color: var(--amber-deep); background:var(--tint); padding:3px 9px; border-radius:6px; }
.fl-naac{ font-size:12px; font-weight:700; color: var(--navy); background: var(--cream); padding:3px 9px; border-radius:6px; }
.fl-uni-card__btn{ margin-top:auto; text-align:center; padding:11px 20px; font-size:14px; }
.fl-empty{ color: var(--ink-soft); font-size:14px; }

@media (max-width: 560px){
  .fl-categories__grid{ grid-template-columns:repeat(3, 1fr); }
}

/* ===== FEATURED — University Card (Live Preview style) ===== */
.fl-uni-card{ background: var(--white); border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; transition: transform .18s ease, box-shadow .18s ease; }
.fl-uni-card:hover{ transform: translateY(-5px); box-shadow: 0 16px 32px rgba(18,29,52,0.14); }

.fl-uni-card__banner{ position:relative; height:110px; background: linear-gradient(135deg, var(--amber-deep), var(--teal)); }
.fl-uni-card__banner img{ width:100%; height:100%; object-fit:cover; }
.fl-uni-card__ribbon{ position:absolute; top:12px; left:12px; background:#D64545; color:#fff; font-size:11px; font-weight:700; padding:4px 10px; border-radius:6px; letter-spacing:0.02em; }
.fl-uni-card__ribbon.fl-tag--indemand{ background: var(--amber-deep); }
.fl-uni-card__ribbon.fl-tag--opted{ background: var(--amber-deep); }
.fl-uni-card__logo{ position:absolute; left:16px; bottom:-24px; width:56px; height:56px; border-radius:50%; background: var(--white); border:3px solid var(--white); box-shadow: 0 4px 10px rgba(18,29,52,0.15); display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:22px; }
.fl-uni-card__logo img{ width:100%; height:100%; object-fit:cover; }

.fl-uni-card__body{ padding:32px 18px 18px; display:flex; flex-direction:column; flex:1; }
.fl-uni-card__toprow{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
.fl-uni-card__toprow h3{ font-family:'Fraunces', serif; font-size:16px; font-weight:700; color: var(--navy-deep); }
.fl-status-active{ display:flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:#1B8A5A; white-space:nowrap; }
.fl-status-active .dot{ width:6px; height:6px; border-radius:50%; background:#1B8A5A; }

.fl-type-badge{ display:inline-block; font-size:12px; font-weight:600; color: var(--navy); background: var(--tint); padding:4px 10px; border-radius:6px; margin-bottom:12px; width:fit-content; }

.fl-uni-card__facts{ display:flex; flex-direction:column; gap:6px; font-size:13px; color: var(--ink-soft); margin-bottom:12px; }
.fl-uni-card__facts .fl-fact{ display:inline-flex; align-items:center; gap:7px; }
.fl-uni-card__facts .fl-fact svg{ flex-shrink:0; }
.fl-uni-card__facts .fl-fact--rating{ color:var(--ink); font-weight:700; }

.fl-uni-card__tagline{ font-size:12.5px; color:#1B8A5A; background:#E9F7F0; padding:8px 10px; border-radius:8px; margin-bottom:14px; }

.fl-uni-card__btn{ margin-top:auto; justify-content:center; padding:11px 20px; font-size:14px; }

/* ===== LISTING PAGE HEADER ===== */
.fl-page-header{ background: var(--white); border-bottom:1px solid var(--line); padding:56px 0 44px; text-align:center; }
.fl-page-header h1{ font-family:'Fraunces', serif; font-size:34px; font-weight:700; color: var(--navy-deep); margin-bottom:10px; }
.fl-page-header p{ font-size:15px; color: var(--ink-soft); }

.fl-listing-page{ padding-top:44px; }

/* ===== PAGINATION ===== */
.fl-pagination{ margin-top:40px; display:flex; justify-content:center; }
.fl-pagination nav > div:first-child{ display:none; } /* hide "Showing X to Y of Z" text if present */

/* ===== LISTING PAGE — SIDEBAR LAYOUT ===== */
.fl-listing-page{ padding:44px 0 72px; }
.fl-listing__grid{ display:grid; grid-template-columns: 260px 1fr; gap:32px; align-items:start; }
.fl-listing__main .fl-featured__grid{ grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }

.fl-sidebar{ background: var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px; position:sticky; top:96px; }
.fl-sidebar h4{ font-family:'Fraunces', serif; font-size:16px; font-weight:700; color: var(--navy-deep); margin-bottom:16px; }

.fl-sidebar__search{ display:flex; align-items:center; border:1.5px solid var(--line); border-radius:8px; padding:4px; margin-bottom:18px; }
.fl-sidebar__search input{ flex:1; border:none; outline:none; background:transparent; padding:9px 10px; font-size:13.5px; color: var(--ink); font-family:inherit; }
.fl-sidebar__search button{ background: var(--amber); color: var(--white); border:none; width:34px; height:34px; border-radius:6px; cursor:pointer; font-size:13px; flex-shrink:0; }

.fl-sidebar__levels{ display:flex; flex-direction:column; gap:2px; margin-bottom:14px; }
.fl-sidebar__levels a{ display:block; padding:10px 10px; border-radius:8px; font-size:14px; font-weight:500; color: var(--ink-soft); transition: all .15s ease; }
.fl-sidebar__levels a:hover{ background: var(--cream); color: var(--navy); }
.fl-sidebar__levels a.is-active{ background:var(--tint); color: var(--amber-deep); font-weight:700; }

.fl-sidebar__clear{ display:block; text-align:center; font-size:12.5px; color: var(--ink-soft); border-top:1px solid var(--line); padding-top:14px; }
.fl-sidebar__clear:hover{ color:#D64545; }

/* University Listing — Course filter dropdown */
/* University Listing — full-width search bar above the grid */
.fl-uni-searchbar{ display:flex; align-items:center; gap:10px; background: var(--white); border:1.5px solid var(--line); border-radius:999px; padding:6px 8px 6px 22px; margin-bottom:28px; box-shadow:0 8px 24px rgba(20,27,56,0.06); }
.fl-uni-searchbar__icon{ font-size:15px; color: var(--ink-soft); flex-shrink:0; }
.fl-uni-searchbar input[type="text"]{ flex:1; border:none; outline:none; background:transparent; padding:12px 6px; font-size:14.5px; color: var(--ink); font-family:inherit; }
.fl-uni-searchbar__btn{ background: var(--amber); color: var(--white); border:none; padding:12px 26px; border-radius:999px; font-size:13.5px; font-weight:700; cursor:pointer; flex-shrink:0; }

/* University Listing — Courses checkbox filter */
.fl-sidebar__subheading{ font-family:'Fraunces', serif; font-size:14px; font-weight:700; color: var(--navy-deep); margin:16px 0 10px; }
.fl-sidebar__course-search{ margin-bottom:10px; }
.fl-sidebar__course-search input{ width:100%; padding:8px 10px; border:1.5px solid var(--line); border-radius:8px; font-size:13px; color: var(--ink); font-family:inherit; background: var(--white); }
.fl-sidebar__course-list{ display:flex; flex-direction:column; gap:2px; max-height:260px; overflow-y:auto; margin-bottom:6px; }
.fl-course-item{ list-style:none; }
.fl-course-item label{ display:flex; align-items:center; gap:8px; padding:7px 4px; font-size:13.5px; color: var(--ink-soft); cursor:pointer; }
.fl-course-item label:hover{ color: var(--navy); }
.fl-course-item input[type="checkbox"]{ accent-color: var(--amber); width:15px; height:15px; flex-shrink:0; }
.fl-course-item--empty{ font-size:13px; color: var(--ink-soft); padding:6px 4px; }

@media (max-width: 900px){
  .fl-listing__grid{ grid-template-columns:1fr; }
  .fl-sidebar{ position:static; }
}
/* ===== COURSE LISTING — Course Card ===== */
.fl-course__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:22px; }

.fl-course-card{ background: var(--white); border:1px solid var(--line); border-radius:14px; padding:24px 20px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; transition: box-shadow .2s ease, transform .15s ease; }
.fl-course-card:hover{ box-shadow: 0 12px 28px rgba(18,29,52,0.1); transform: translateY(-2px); }

.fl-course-card__icon{ width:52px; height:52px; border-radius:12px; background:var(--tint); color:var(--amber-deep); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px; overflow:hidden; }
.fl-course-card__icon img{ width:100%; height:100%; object-fit:cover; }

.fl-course-card h3{ font-family:'Fraunces', serif; font-size:17px; font-weight:700; color: var(--navy-deep); margin-bottom:10px; }

.fl-course-card__facts{ display:flex; flex-wrap:wrap; gap:8px; font-size:12.5px; color: var(--ink-soft); margin-bottom:12px; }
.fl-course-card__facts .fl-type-badge{ margin-bottom:0; }

.fl-course-card__desc{ font-size:13px; color: var(--ink-soft); margin-bottom:16px; line-height:1.5; }

.fl-course-card__btn{ margin-top:auto; width:100%; text-align:center; padding:11px 20px; font-size:14px; }

/* ===== SIDEBAR — Still Confused CTA ===== */
.fl-sidebar__cta{ margin-top:18px; padding-top:18px; border-top:1px solid var(--line); text-align:center; }
.fl-sidebar__cta h5{ font-family:'Fraunces', serif; font-size:15px; font-weight:700; color: var(--navy-deep); margin-bottom:6px; }
.fl-sidebar__cta p{ font-size:12.5px; color: var(--ink-soft); margin-bottom:14px; }
.fl-sidebar__cta-btn{ display:block; width:100%; padding:11px 16px; font-size:13.5px; }

@media (max-width: 560px){
  .fl-course__grid{ grid-template-columns:1fr; }
}/* ===== BREADCRUMB ===== */
.fl-cd-breadcrumb{ background:var(--white); border-bottom:1px solid var(--line); padding:13px 0; font-size:13px; color:var(--ink-soft); }
.fl-cd-breadcrumb a{ color:var(--ink-soft); }
.fl-cd-breadcrumb a:hover{ color:var(--amber-deep); }
.fl-cd-breadcrumb span.sep{ margin:0 8px; color:var(--line); }
.fl-cd-breadcrumb span.current{ color:var(--navy-deep); font-weight:600; }

/* ===== HERO ===== */
.fl-cd-hero{ position:relative; background:linear-gradient(120deg, var(--navy-deep), var(--amber-deep) 70%); overflow:hidden; padding:52px 0 84px; }
.fl-cd-hero::before{ content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 85% 20%, rgba(224,52,43,0.22), transparent 45%); pointer-events:none; }
.fl-cd-hero__inner{ position:relative; display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; }
.fl-cd-hero__badge{ display:inline-flex; align-items:center; gap:8px; background:rgba(224,52,43,0.18); border:1px solid rgba(224,52,43,0.45); color:#FF8A80; font-size:12.5px; font-weight:600; letter-spacing:.03em; padding:6px 14px; border-radius:999px; margin-bottom:18px; }
.fl-cd-hero h1{ color:var(--white); font-size:38px; font-weight:700; line-height:1.15; max-width:640px; margin-bottom:12px; }
.fl-cd-hero__uni{ color:rgba(255,255,255,0.72); font-size:15px; margin-bottom:22px; }
.fl-cd-hero__uni b{ color:var(--white); font-weight:600; }
.fl-cd-hero__chips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.fl-cd-hero__chip{ display:flex; align-items:center; gap:7px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); color:rgba(255,255,255,0.9); font-size:13px; padding:8px 14px; border-radius:999px; }
.fl-cd-hero__btns{ display:flex; gap:12px; flex-wrap:wrap; }
.fl-cd-btn-primary{ background:var(--amber); color:var(--navy-deep); font-weight:700; font-size:14.5px; padding:13px 26px; border-radius:8px; border:none; cursor:pointer; transition:background .15s ease; }
.fl-cd-btn-primary:hover{ background:var(--amber-deep); }
.fl-cd-btn-outline{ background:transparent; color:var(--white); font-weight:600; font-size:14.5px; padding:12px 25px; border-radius:8px; border:1.5px solid rgba(255,255,255,0.35); transition:border-color .15s ease; }
.fl-cd-btn-outline:hover{ border-color:var(--white); }
.fl-cd-hero__thumb{ width:230px; flex-shrink:0; border-radius:14px; overflow:hidden; border:4px solid rgba(255,255,255,0.12); box-shadow:0 18px 40px rgba(0,0,0,0.35); }
.fl-cd-hero__thumb img{ aspect-ratio:4/3; object-fit:cover; width:100%; }

/* ===== QUICK INFO STRIP ===== */
.fl-cd-quickinfo{ position:relative; margin-top:-46px; margin-bottom:8px; }
.fl-cd-quickinfo__grid{ background:var(--white); border:1px solid var(--line); border-radius:14px; box-shadow:0 14px 32px rgba(18,29,52,0.1); display:grid; grid-template-columns:repeat(5, 1fr); }
.fl-cd-qi{ padding:20px 18px; text-align:center; border-right:1px solid var(--line); }
.fl-cd-qi:last-child{ border-right:none; }
.fl-cd-qi__icon{ font-size:19px; margin-bottom:6px; }
.fl-cd-qi b{ display:block; font-family:'Fraunces', serif; font-size:16px; color:var(--navy-deep); font-weight:700; }
.fl-cd-qi small{ font-size:12px; color:var(--ink-soft); }

/* ===== STICKY NAV ===== */
.fl-cd-nav{ position:sticky; top:79px; z-index:40; background:var(--white); border-bottom:1px solid var(--line); margin-top:26px; }
.fl-cd-nav__list{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; }
.fl-cd-nav__list::-webkit-scrollbar{ display:none; }
.fl-cd-nav__list a{ white-space:nowrap; font-size:13.5px; font-weight:600; color:var(--ink-soft); padding:16px 16px; border-bottom:2.5px solid transparent; transition:color .15s ease, border-color .15s ease; }
.fl-cd-nav__list a:hover{ color:var(--navy-deep); }
.fl-cd-nav__list a.is-active{ color:var(--amber-deep); border-bottom-color:var(--amber); }

/* ===== SECTION SHELL ===== */
.fl-cd-section{ padding:52px 0; border-bottom:1px solid var(--line); }
.fl-cd-section:last-of-type{ border-bottom:none; }
.fl-cd-section__head{ margin-bottom:24px; }
.fl-cd-section__eyebrow{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); margin-bottom:6px; display:block; }
.fl-cd-section h2{ font-size:24px; font-weight:700; }
.fl-cd-section__layout{ display:grid; grid-template-columns:1fr 300px; gap:44px; align-items:start; }

/* ===== OVERVIEW ===== */
.fl-cd-overview p{ color:var(--ink-soft); font-size:15px; margin-bottom:14px; }
.fl-cd-highlights{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-top:20px; }
.fl-cd-highlights li{ display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--ink); background:var(--white); border:1px solid var(--line); border-radius:9px; padding:11px 13px; }
.fl-cd-highlights li .ic{ color:var(--teal); font-weight:700; }

/* ===== SIDEBAR CARD (reused across sections) ===== */
.fl-cd-sidecard{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:22px; position:sticky; top:70px; }
.fl-cd-sidecard h4{ font-size:15px; font-weight:700; margin-bottom:14px; }
.fl-cd-sidecard__row{ display:flex; justify-content:space-between; font-size:13.5px; padding:9px 0; border-bottom:1px dashed var(--line); }
.fl-cd-sidecard__row:last-of-type{ border-bottom:none; }
.fl-cd-sidecard__row span:first-child{ color:var(--ink-soft); }
.fl-cd-sidecard__row span:last-child{ font-weight:600; color:var(--navy-deep); }
.fl-cd-sidecard .fl-cd-btn-primary{ display:block; width:100%; text-align:center; margin-top:16px; }

/* ===== ELIGIBILITY / ADMISSION ===== */
.fl-cd-twocol{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.fl-cd-block h4{ font-size:15px; font-weight:700; margin-bottom:12px; color:var(--navy-deep); }
.fl-cd-steps{ counter-reset:step; }
.fl-cd-steps li{ counter-increment:step; position:relative; padding-left:34px; font-size:13.5px; color:var(--ink-soft); margin-bottom:14px; }
.fl-cd-steps li::before{ content:counter(step); position:absolute; left:0; top:-1px; width:22px; height:22px; border-radius:50%; background:var(--navy); color:var(--white); font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.fl-cd-eligibility-list li{ display:flex; gap:9px; font-size:13.5px; color:var(--ink-soft); margin-bottom:11px; }
.fl-cd-eligibility-list .ic{ color:var(--amber-deep); }

/* ===== FEES ===== */
.fl-cd-fees-table{ width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.fl-cd-fees-table th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); background:var(--cream); padding:12px 18px; font-weight:700; }
.fl-cd-fees-table td{ padding:14px 18px; font-size:14px; border-top:1px solid var(--line); }
.fl-cd-fees-table td:last-child{ text-align:right; font-weight:700; color:var(--navy-deep); font-family:'IBM Plex Mono', monospace; }
.fl-cd-scholarship{ display:flex; gap:12px; align-items:flex-start; background:var(--tint); border:1px solid rgba(13,122,112,0.35); border-radius:10px; padding:15px 17px; margin-top:18px; font-size:13.5px; color:var(--amber-deep); }

/* ===== CURRICULUM ===== */
.fl-cd-tag-grid{ display:flex; flex-wrap:wrap; gap:9px; }
.fl-cd-tag{ background:var(--white); border:1px solid var(--line); color:var(--ink); font-size:13px; padding:9px 15px; border-radius:8px; }

/* ===== SPECIALIZATIONS ===== */
.fl-cd-spec-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.fl-cd-spec-card{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:18px; transition:box-shadow .15s ease, transform .15s ease; }
.fl-cd-spec-card:hover{ box-shadow:0 10px 24px rgba(18,29,52,0.08); transform:translateY(-2px); }
.fl-cd-spec-card__icon{ width:38px; height:38px; border-radius:9px; background:#E7F0EC; color:var(--teal); display:flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:12px; }
.fl-cd-spec-card h5{ font-family:'Fraunces', serif; font-size:14.5px; font-weight:700; color:var(--navy-deep); margin-bottom:6px; }
.fl-cd-spec-card p{ font-size:12.5px; color:var(--ink-soft); }

/* ===== PLACEMENTS ===== */
.fl-cd-place-stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:26px; }
.fl-cd-place-stat{ background:var(--amber); border-radius:12px; padding:22px; text-align:center; }
.fl-cd-place-stat b{ display:block; font-family:'Fraunces', serif; font-size:24px; color:var(--white); font-weight:700; }
.fl-cd-place-stat small{ font-size:12px; color:rgba(255,255,255,0.8); }
.fl-cd-recruiters h4{ font-size:14px; font-weight:700; margin-bottom:12px; }
.fl-cd-recruiter-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.fl-cd-recruiter{ background:var(--white); border:1px solid var(--line); border-radius:8px; padding:10px 16px; font-size:13px; font-weight:600; color:var(--ink-soft); }

/* ===== UNIVERSITIES OFFERING ===== */
.fl-cd-uni-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.fl-cd-uni-card{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:18px; display:flex; gap:14px; align-items:flex-start; }
.fl-cd-uni-card__logo{ width:46px; height:46px; border-radius:9px; background:var(--cream); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.fl-cd-uni-card h5{ font-family:'Fraunces', serif; font-size:14.5px; font-weight:700; color:var(--navy-deep); margin-bottom:5px; }
.fl-cd-uni-card .loc{ font-size:12px; color:var(--ink-soft); margin-bottom:8px; }
.fl-cd-uni-card a{ font-size:12.5px; font-weight:700; color:var(--amber-deep); }

/* ===== GALLERY ===== */
.fl-cd-gallery-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.fl-cd-gallery-grid img{ aspect-ratio:4/3; object-fit:cover; border-radius:10px; border:1px solid var(--line); }

/* ===== FAQS ===== */
.fl-cd-faq{ max-width:760px; }
.fl-cd-faq details{ background:var(--white); border:1px solid var(--line); border-radius:10px; margin-bottom:10px; padding:16px 18px; }
.fl-cd-faq summary{ font-size:14.5px; font-weight:600; color:var(--navy-deep); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.fl-cd-faq summary::-webkit-details-marker{ display:none; }
.fl-cd-faq summary::after{ content:"+"; font-size:19px; color:var(--amber-deep); font-weight:400; }
.fl-cd-faq details[open] summary::after{ content:"–"; }
.fl-cd-faq p{ font-size:13.5px; color:var(--ink-soft); margin-top:12px; line-height:1.6; }

/* ===== FINAL CTA ===== */
.fl-cd-final-cta{ background: var(--amber); border-radius:18px; padding:44px 40px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; margin:52px 0; }
.fl-cd-final-cta h3{ color:var(--white); font-size:22px; font-weight:700; margin-bottom:6px; }
.fl-cd-final-cta p{ color:rgba(255,255,255,0.85); font-size:14px; }
.fl-cd-final-cta .fl-cd-btn-primary{ background:var(--white); color:var(--amber-deep); }
.fl-cd-final-cta .fl-cd-btn-primary:hover{ background:var(--navy-deep); color:var(--white); }
.fl-cd-final-cta .fl-cd-btn-outline{ border-color:rgba(255,255,255,0.55); color:var(--white); }
.fl-cd-final-cta .fl-cd-btn-outline:hover{ border-color:var(--white); }

/* ===== FOOTER (existing footer visual language) ===== */
.fl-cd-footer{ background:var(--navy-deep); padding:56px 0 24px; margin-top:0; }
.fl-cd-footer__inner{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.08); }
.fl-cd-footer__brand{ max-width:280px; }
.fl-cd-footer__brand .logo{ display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.fl-cd-footer__brand .logo span.box{ width:32px; height:32px; background:var(--amber); border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--navy-deep); }
.fl-cd-footer__brand .logo b{ color:var(--white); font-family:'Fraunces', serif; font-size:18px; }
.fl-cd-footer__brand p{ color:rgba(255,255,255,0.55); font-size:13px; }
.fl-cd-footer h6{ color:var(--amber); font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; }
.fl-cd-footer ul li{ margin-bottom:9px; }
.fl-cd-footer ul li a{ color:rgba(255,255,255,0.65); font-size:13px; }
.fl-cd-footer__bottom{ display:flex; justify-content:space-between; padding-top:20px; color:rgba(255,255,255,0.4); font-size:12.5px; flex-wrap:wrap; gap:10px; }

@media (max-width: 900px){
  .fl-cd-quickinfo__grid{ grid-template-columns:repeat(2, 1fr); }
  .fl-cd-qi{ border-right:none; border-bottom:1px solid var(--line); }
  .fl-cd-section__layout{ grid-template-columns:1fr; }
  .fl-cd-sidecard{ position:static; }
  .fl-cd-twocol,.fl-cd-spec-grid,.fl-cd-place-stats,.fl-cd-uni-grid{ grid-template-columns:1fr 1fr; }
  .fl-cd-gallery-grid{ grid-template-columns:repeat(2, 1fr); }
  .fl-cd-hero__inner{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 560px){
  .fl-cd-twocol,.fl-cd-spec-grid,.fl-cd-place-stats,.fl-cd-uni-grid{ grid-template-columns:1fr; }
  .fl-cd-hero h1{ font-size:28px; }
}

/* =============================================
   UNIVERSITY DETAIL PAGE — unidetail- prefix
   Append this whole block to the end of style.css
   Uses existing --navy/--amber/--teal/--cream variables — no new variables added
   ============================================= */

/* ---- Breadcrumb ---- */
.unidetail-breadcrumb{ background:var(--white); border-bottom:1px solid var(--line); padding:14px 0; }
.unidetail-breadcrumb__inner{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); }
.unidetail-breadcrumb__inner a:hover{ color:var(--navy); }
.unidetail-breadcrumb__inner .sep{ color:var(--line); }
.unidetail-breadcrumb__inner .current{ color:var(--navy-deep); font-weight:600; }

/* ---- Hero ---- */
.unidetail-hero{ position:relative; }
.unidetail-hero__banner{ height:clamp(240px, 26vw, 340px); background:linear-gradient(135deg, var(--navy), var(--teal)); position:relative; overflow:hidden; }
.unidetail-hero__banner img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.unidetail-hero__banner::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(18,29,52,0.10) 0%, rgba(18,29,52,0.0) 35%, rgba(18,29,52,0.28) 82%, rgba(18,29,52,0.42) 100%);
  box-shadow: inset 0 -60px 50px -32px rgba(18,29,52,0.4);
}
.unidetail-hero__identity{ background:var(--white); border-bottom:1px solid var(--line); }
.unidetail-hero__row{ display:flex; align-items:flex-end; gap:24px; position:relative; }
.unidetail-hero__logo{ width:104px; height:104px; border-radius:50%; background:var(--white); border:4px solid var(--white); box-shadow:0 8px 24px rgba(18,29,52,0.18); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:700; font-size:30px; color:var(--navy); flex-shrink:0; margin-top:-52px; overflow:hidden; }
.unidetail-hero__logo img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }

.unidetail-hero__main{ flex:1; min-width:0; padding:18px 0 20px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.unidetail-hero__text h1{ font-family:'Fraunces',serif; font-size:28px; font-weight:700; color:var(--navy-deep); margin:0 0 8px; line-height:1.2; }
.unidetail-hero__meta{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:13.5px; color:var(--ink-soft); }
.unidetail-hero__meta .item{ display:flex; align-items:center; gap:5px; }
.unidetail-hero__meta .sep{ color:var(--line); }
.unidetail-rating{ font-size:12.5px; font-weight:700; color:var(--amber-deep); background:var(--tint); padding:4px 10px; border-radius:6px; }
.unidetail-naac{ font-size:12.5px; font-weight:700; color:var(--navy); background:var(--cream); padding:4px 10px; border-radius:6px; border:1px solid var(--line); }
.unidetail-verified{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--green); }
.unidetail-verified .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); }

.unidetail-hero__actions{ display:flex; gap:12px; flex-shrink:0; }

/* ---- Quick Info ---- */
.unidetail-quickinfo{ background:var(--cream); padding:20px 0; border-bottom:1px solid var(--line); }
.unidetail-quickinfo__grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.unidetail-quickinfo__item{ background:var(--white); padding:16px 14px; text-align:center; }
.unidetail-quickinfo__item .qi-label{ font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px; }
.unidetail-quickinfo__item .qi-value{ font-family:'Fraunces',serif; font-size:16px; font-weight:700; color:var(--navy-deep); }

/* ---- Sticky sub-nav ---- */
.unidetail-subnav{ position:sticky; top:79px; z-index:150; background:var(--white); border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(18,29,52,0.02); }
.unidetail-subnav__inner{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; }
.unidetail-subnav__inner::-webkit-scrollbar{ display:none; }
.unidetail-subnav a{ font-size:14px; font-weight:600; color:var(--ink-soft); padding:16px 16px; white-space:nowrap; border-bottom:2.5px solid transparent; transition:all .15s ease; flex-shrink:0; }
.unidetail-subnav a:hover{ color:var(--navy); }
.unidetail-subnav a.is-active{ color:var(--navy-deep); border-bottom-color:var(--amber); }

/* ---- Generic section spacing ---- */
.unidetail-section{ padding:52px 0; border-bottom:1px solid var(--line); scroll-margin-top:60px; }
.unidetail-section:last-of-type{ border-bottom:none; }
.unidetail-section__head{ margin-bottom:26px; }
.unidetail-section__head span.eyebrow{ display:block; font-size:12.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--amber-deep); margin-bottom:8px; }
.unidetail-section__head h2{ font-family:'Fraunces',serif; font-size:24px; font-weight:700; color:var(--navy-deep); margin:0; }
.unidetail-other-approvals{ font-size:13.5px; color:var(--ink-soft); margin-top:16px; }
.unidetail-placement-desc{ font-size:14px; color:var(--ink-soft); margin:-14px 0 24px; }

/* ---- About ---- */
.unidetail-about__grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:40px; align-items:stretch; }
.unidetail-about p{ font-size:15px; color:var(--ink-soft); margin:0 0 14px; }
.unidetail-about p:last-child{ margin-bottom:0; }
.unidetail-facts{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:14px; height:fit-content; }
.unidetail-facts__row{ display:flex; justify-content:space-between; align-items:center; font-size:13.5px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.unidetail-facts__row:last-child{ border-bottom:none; padding-bottom:0; }
.unidetail-facts__row .label{ color:var(--ink-soft); }
.unidetail-facts__row .value{ font-weight:700; color:var(--navy-deep); text-align:right; }

/* ---- Accreditation & Rankings ---- */
.unidetail-accred__grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:28px; }
.unidetail-accred-badge{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:20px 12px; text-align:center; transition:box-shadow .2s ease; }
.unidetail-accred-badge:hover{ box-shadow:0 10px 24px rgba(18,29,52,0.08); }
.unidetail-accred-badge__mark{ width:46px; height:46px; border-radius:50%; background:var(--tint); color:var(--amber-deep); font-family:'Fraunces',serif; font-weight:700; font-size:16px; display:flex; align-items:center; justify-content:center; margin:0 auto 10px; }
.unidetail-accred-badge p{ font-size:13px; font-weight:600; color:var(--navy-deep); margin:0; }

.unidetail-rankings{ display:flex; flex-direction:column; gap:10px; }
.unidetail-ranking-row{ display:flex; align-items:center; gap:18px; background:var(--white); border:1px solid var(--line); border-radius:12px; padding:16px 20px; }
.unidetail-ranking-row b{ font-family:'Fraunces',serif; font-size:24px; font-weight:700; color:var(--navy-deep); min-width:60px; }
.unidetail-ranking-row span{ font-size:13.5px; color:var(--ink-soft); }

/* ---- Placements ---- */
.unidetail-placement__stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:20px; }
.unidetail-placement-stat{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:24px; text-align:center; }
.unidetail-placement-stat b{ display:block; font-family:'Fraunces',serif; font-size:26px; color:var(--navy-deep); margin-bottom:4px; }
.unidetail-placement-stat small{ font-size:12.5px; color:var(--ink-soft); }
.unidetail-recruiters{ margin-top:24px; }
.unidetail-recruiters h4{ font-size:12.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; margin:0 0 14px; }
.unidetail-recruiters__row{ display:flex; flex-wrap:wrap; gap:10px; }
.unidetail-recruiter-chip{ background:var(--white); border:1px solid var(--line); border-radius:8px; padding:9px 16px; font-size:13px; font-weight:600; color:var(--ink-soft); }

/* ---- Facilities ---- */
.unidetail-facilities__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px; }
.unidetail-facility{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:22px 14px; text-align:center; transition:box-shadow .2s ease, transform .15s ease; }
.unidetail-facility:hover{ box-shadow:0 12px 28px rgba(18,29,52,0.08); transform:translateY(-2px); }
.unidetail-facility__icon{ width:46px; height:46px; border-radius:12px; background:#EAF0FB; color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:19px; margin:0 auto 12px; }
.unidetail-facility p{ font-size:13px; font-weight:600; color:var(--navy-deep); margin:0; }

/* ---- Gallery ---- */
.unidetail-gallery__grid{ display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:130px; gap:12px; }
.unidetail-gallery__item{ position:relative; border-radius:12px; overflow:hidden; }
.unidetail-gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.unidetail-gallery__item:hover img{ transform:scale(1.05); }
.unidetail-gallery__item:nth-child(1){ grid-column:span 2; grid-row:span 2; }

/* ---- Courses & Specializations ---- */
.unidetail-course__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:20px; }
.unidetail-course-card{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:22px 20px; display:flex; flex-direction:column; transition:box-shadow .2s ease; }
.unidetail-course-card:hover{ box-shadow:0 12px 28px rgba(18,29,52,0.08); }
.unidetail-course-card__icon{ width:44px; height:44px; border-radius:10px; background:var(--tint); color:var(--amber-deep); display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:14px; }
.unidetail-course-card h3{ font-family:'Fraunces',serif; font-size:16px; font-weight:700; color:var(--navy-deep); margin:0 0 6px; }
.unidetail-course-card__meta{ font-size:12.5px; color:var(--ink-soft); margin-bottom:10px; display:flex; gap:8px; flex-wrap:wrap; }
.unidetail-course-card__meta span{ display:inline-flex; align-items:center; gap:4px; }
.unidetail-course-card__desc{ font-size:13px; color:var(--ink-soft); margin-bottom:16px; line-height:1.5; }
.unidetail-spec-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.unidetail-spec-chip{ font-size:11.5px; font-weight:600; color:var(--navy); background:var(--cream); border:1px solid var(--line); padding:5px 10px; border-radius:999px; }
.unidetail-course-card__btn{ margin-top:auto; text-align:center; padding:10px 18px; font-size:13.5px; }

/* ---- FAQs ---- */
.unidetail-faq{ max-width:820px; }
.unidetail-faq-item{ background:var(--white); border:1px solid var(--line); border-radius:12px; margin-bottom:10px; overflow:hidden; }
.unidetail-faq-item__q{ cursor:pointer; font-size:14.5px; font-weight:600; color:var(--navy-deep); display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 20px; user-select:none; }
.unidetail-faq-item__icon{ font-size:18px; color:var(--amber-deep); font-weight:400; flex-shrink:0; transition:transform .2s ease; }
.unidetail-faq-item.is-open .unidetail-faq-item__icon{ transform:rotate(45deg); }
.unidetail-faq-item__a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.unidetail-faq-item.is-open .unidetail-faq-item__a{ max-height:200px; }
.unidetail-faq-item__a p{ font-size:13.5px; color:var(--ink-soft); margin:0; padding:0 20px 18px; }

/* ---- Final CTA ---- */
.unidetail-finalcta{ background: var(--amber); padding:44px 0; }
.unidetail-finalcta__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.unidetail-finalcta__text h2{ font-family:'Fraunces',serif; font-size:24px; font-weight:700; color:var(--white); margin:0 0 6px; }
.unidetail-finalcta__text p{ font-size:14px; color:rgba(255,255,255,0.85); margin:0; max-width:440px; }
.unidetail-finalcta__actions{ display:flex; gap:12px; flex-shrink:0; }
.unidetail-finalcta .fl-btn-primary{ background:var(--white); color:var(--amber-deep); }
.unidetail-finalcta .fl-btn-primary:hover{ background:var(--navy-deep); color:var(--white); }
.unidetail-finalcta .fl-btn-outline{ background:transparent; border-color:rgba(255,255,255,0.55); color:var(--white); }
.unidetail-finalcta .fl-btn-outline:hover{ border-color:var(--white); background:rgba(255,255,255,0.12); }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px){
  .unidetail-about__grid{ grid-template-columns:1fr; }
  .unidetail-quickinfo__grid{ grid-template-columns:repeat(3, 1fr); }
  .unidetail-accred__grid{ grid-template-columns:repeat(2, 1fr); }
  .unidetail-placement__stats{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  
  .unidetail-hero__row{ flex-direction:column; align-items:flex-start; }
  .unidetail-hero__logo{ width:84px; height:84px; margin-top:-42px; }
  .unidetail-hero__main{ flex-direction:column; align-items:flex-start; padding-bottom:20px; }
  .unidetail-hero__actions{ width:100%; }
  .unidetail-hero__actions .fl-btn-primary, .unidetail-hero__actions .fl-btn-outline{ flex:1; }
  .unidetail-gallery__grid{ grid-template-columns:1fr; grid-auto-rows:220px; }
  .unidetail-gallery__item:nth-child(1){ grid-column:span 1; grid-row:span 1; }
  .unidetail-finalcta__inner{ flex-direction:column; align-items:flex-start; }
  .unidetail-finalcta__actions{ width:100%; }
  .unidetail-finalcta__actions .fl-btn-primary, .unidetail-finalcta__actions .fl-btn-outline{ flex:1; }
}
@media (max-width: 560px){
  .unidetail-quickinfo__grid{ grid-template-columns:repeat(2, 1fr); }
  .unidetail-facilities__grid{ grid-template-columns:repeat(2, 1fr); }
  .unidetail-accred__grid{ grid-template-columns:repeat(2, 1fr); }
}
/* ===== HIGHLIGHTS — Top Scholarships / Popular Exams / Compare Universities =====
   NEW SECTION — purely additive, appended at end of file.
   Values below are ported 1:1 from the mentor's reference code (.trio /
   .panel / .schol-row / .exam-item / .compare-panel), mapped onto this
   project's existing fl- class names and CSS variables:
     --border -> var(--line)   --red -> var(--amber)   --red-dark -> var(--amber-deep)
     --red-light -> var(--tint)   --gray -> var(--ink-soft)   --gold -> var(--star)
   Icons stay as this project's inline SVGs (no Font Awesome is loaded here)
   sized/colored to match the mentor's <i> icon spec exactly. */
.fl-highlights{ padding:8px 0 56px; }
.fl-highlights__grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:20px; align-items:stretch; }

.fl-hl-card{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:24px; display:flex; flex-direction:column; }
.fl-hl-card__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.fl-hl-card__head h2{ font-size:17px; font-weight:700; color:var(--navy-deep); }
.fl-hl-card__head .fl-viewall{ color:var(--amber); font-size:12.5px; font-weight:600; }

/* ---- Block 1: Top Scholarships ---- */
.fl-scholarship__body{ display:flex; gap:16px; align-items:flex-start; }
.fl-scholarship__visual{ width:80px; min-height:220px; flex-shrink:0; border-radius:12px; background:var(--tint); color:var(--star); display:flex; align-items:center; justify-content:center; font-size:34px; }
.fl-scholarship__visual svg{ width:34px; height:34px; }
.fl-scholarship__list{ flex:1; display:flex; flex-direction:column; min-width:0; }
.fl-scholarship__list li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); }
.fl-scholarship__list li:first-child{ padding-top:0; }
.fl-scholarship__list li:last-child{ border-bottom:none; padding-bottom:0; }
.fl-scholarship__list strong{ display:block; font-size:13.5px; font-weight:700; color:var(--navy-deep); }
.fl-scholarship__list small{ font-size:12px; color:var(--ink-soft); }

.fl-btn-ghost{ display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--amber); color:var(--amber); font-size:12px; font-weight:600; padding:6px 14px; border-radius:8px; white-space:nowrap; flex-shrink:0; cursor:pointer; transition: all .2s ease; }
.fl-btn-ghost:hover{ background:var(--amber); color:var(--white); }

/* ---- Block 2: Popular Exams ---- */
.fl-exam__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fl-exam-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:10px; padding:14px 10px; text-align:center; font-size:12.5px; font-weight:600; color:var(--ink); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.fl-exam-item:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(18,29,52,0.10); border-color:transparent; }
.fl-exam-item__icon{ display:block; width:17px; height:17px; color:var(--amber); margin-bottom:8px; }

/* ---- Block 3: Compare Universities ---- */
.fl-hl-card--compare{ background: linear-gradient(150deg, var(--amber) 0%, var(--amber-deep) 100%); border:none; color:var(--white); position:relative; overflow:hidden; }
.fl-hl-card--compare h2{ font-size:19px; font-weight:700; color:var(--white); margin-bottom:8px; }
.fl-hl-card--compare > p{ font-size:13px; color:#fff; opacity:.9; line-height:1.5; margin-bottom:22px; }

.fl-compare__row{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:24px; }
.fl-compare__item{ text-align:center; font-size:11px; font-weight:600; flex:1; min-width:0; }
.fl-compare__logo{ width:52px; height:52px; border-radius:50%; background:#fff; margin:0 auto 8px; display:flex; align-items:center; justify-content:center; color:var(--amber); font-size:18px; overflow:hidden; }
.fl-compare__logo img{ width:100%; height:100%; object-fit:cover; }
.fl-compare__logo svg{ width:18px; height:18px; }
.fl-compare__item span{ font-size:11px; font-weight:600; }
.fl-compare__vs{ font-size:12px; font-weight:700; color:#fff; opacity:.85; flex-shrink:0; }

.fl-btn-white{ display:block; width:100%; text-align:center; background:var(--white); color:var(--amber-deep); font-weight:700; font-size:14px; padding:13px 20px; border-radius:var(--radius); margin-top:auto; box-sizing:border-box; transition: all .2s ease; }
.fl-btn-white:hover{ background:var(--amber-deep); color:var(--white); }

.fl-empty--onred{ color:rgba(255,255,255,0.85); }

/* ===== HIGHLIGHTS — RESPONSIVE ===== */
@media (max-width: 980px){
  .fl-highlights__grid{ grid-template-columns:1fr 1fr; }
  .fl-hl-card--compare{ grid-column: span 2; }
}
@media (max-width: 640px){
  .fl-highlights__grid{ grid-template-columns:1fr; gap:18px; }
  .fl-hl-card--compare{ grid-column: span 1; }
  .fl-scholarship__body{ gap:12px; }
  .fl-scholarship__visual{ width:56px; min-height:200px; }
}
@media (max-width: 400px){
  .fl-exam__grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .fl-hl-card{ padding:18px; }
}

/* ===== ADMISSION PROCESS — 4-step guide ===== */
.fl-process{ padding:56px 0; background:var(--cream); }
.fl-process__box{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 52px 40px;
  box-shadow: 0 12px 32px -18px rgba(30,42,82,0.10);
}
.fl-process__head{ text-align:center; max-width:560px; margin:0 auto 52px; }
.fl-process__head .fl-eyebrow{ margin-bottom:18px; }
.fl-process__head h2{ font-family:'Inter', sans-serif; font-size:36px; font-weight:800; color:var(--navy-deep); letter-spacing:-0.01em; margin-bottom:10px; }
.fl-process__head h2 span{ color:var(--amber); }
.fl-process__head p{ font-size:14.5px; color:var(--ink-soft); }

.fl-process__row{ display:flex; align-items:flex-start; justify-content:center; gap:0; }
.fl-process-step{ display:flex; flex-direction:column; align-items:center; text-align:center; width:190px; flex-shrink:0; }
.fl-process-step__icon{ position:relative; width:76px; height:76px; border-radius:50%; background:var(--tint); display:flex; align-items:center; justify-content:center; color:var(--amber); margin-bottom:18px; }
.fl-process-step__icon svg{ width:28px; height:28px; }
.fl-process-step__num{ position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); width:26px; height:26px; border-radius:50%; background:var(--tint); color:var(--amber-deep); font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--cream); }
.fl-process-step h3{ font-size:16.5px; font-weight:700; color:var(--navy-deep); margin-bottom:6px; }
.fl-process-step p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; max-width:170px; }

.fl-process-arrow{ display:flex; align-items:center; justify-content:center; color:var(--ink-soft); opacity:.55; height:76px; flex-shrink:0; width:44px; margin-top:0; }

@media (max-width: 980px){
  .fl-process__row{ flex-wrap:wrap; row-gap:36px; }
  .fl-process-arrow{ display:none; }
  .fl-process-step{ width:45%; }
  .fl-process__box{ padding:44px 28px; }
}
@media (max-width: 560px){
  .fl-process__head h2{ font-size:28px; }
  .fl-process-step{ width:100%; }
  .fl-process__box{ padding:36px 20px; border-radius:18px; }
}

/* ===== WHY CHOOSE UNIPORTAL — 6 feature cards ===== */
.fl-why{ padding:56px 0 64px; }
.fl-why__head{ margin-bottom:28px; }
.fl-why__head h2{ font-family:'Fraunces', serif; font-size:26px; font-weight:700; color:var(--navy-deep); }

.fl-why__grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:16px; }
.fl-why-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  padding:26px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:4px;
  height:100%;
}
.fl-why-card__icon{
  width:52px; height:52px;
  border-radius:12px;
  background:var(--tint);
  color:var(--amber);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.fl-why-card__icon svg{ width:24px; height:24px; }
.fl-why-card h3{ font-size:14.5px; font-weight:700; color:var(--navy-deep); margin-bottom:6px; line-height:1.3; }
.fl-why-card p{ font-size:12px; color:var(--ink-soft); line-height:1.5; }

@media (max-width: 980px){
  .fl-why__grid{ grid-template-columns: repeat(3, 1fr); gap:14px; }
}
@media (max-width: 640px){
  .fl-why__grid{ grid-template-columns: repeat(2, 1fr); gap:14px; }
}
@media (max-width: 400px){
  .fl-why__grid{ grid-template-columns: 1fr; }
  .fl-why-card{ padding:22px 16px; }
}

/* ===== TESTIMONIALS + LATEST BLOG ===== */
.fl-tb{ padding:16px 0 64px; background:var(--white); }
.fl-tb__grid{ display:grid; grid-template-columns: 370px 1fr; gap:32px; align-items:start; }
.fl-tb__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.fl-tb__head h2{ font-family:'Fraunces', serif; font-size:22px; font-weight:700; color:var(--navy-deep); white-space:nowrap; }
.fl-tb__head .fl-viewall{ white-space:nowrap; }

.fl-testi-card{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:24px; display:flex; flex-direction:column; height:100%; }
.fl-testi-card__top{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.fl-testi-card__avatar{ width:46px; height:46px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.fl-testi-card__top strong{ display:block; font-size:15px; color:var(--navy-deep); margin-bottom:3px; }
.fl-testi-card__rating{ font-size:12.5px; color:var(--ink-soft); display:flex; align-items:center; gap:5px; }
.fl-testi-card__stars{ color:var(--star); letter-spacing:1px; font-size:12px; }
.fl-testi-card__quote{ font-size:14px; color:var(--ink); line-height:1.65; flex-grow:1; }
.fl-testi-card__footer{ display:flex; align-items:center; justify-content:space-between; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.fl-testi-card__dots{ display:flex; gap:6px; }
.fl-testi-card__dots span{ width:7px; height:7px; border-radius:50%; background:var(--line); }
.fl-testi-card__dots span.is-active{ background:var(--amber); }
.fl-testi-card__nav{ display:flex; gap:8px; }
.fl-testi-card__nav button{ width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:var(--white); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; cursor:default; }

.fl-blog__grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
.fl-blog-card{ background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; height:100%; transition: box-shadow .2s ease, transform .15s ease; }
.fl-blog-card:hover{ box-shadow:0 10px 24px -14px rgba(30,42,82,.18); transform:translateY(-2px); }
.fl-blog-card__img{ width:100%; aspect-ratio:16/10; overflow:hidden; flex-shrink:0; }
.fl-blog-card__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.fl-blog-card h3{ font-size:14px; font-weight:700; color:var(--navy-deep); line-height:1.4; padding:14px 16px 6px; }
.fl-blog-card__meta{ font-size:12px; color:var(--ink-soft); padding:0 16px 16px; margin-top:auto; display:flex; align-items:center; gap:6px; }

@media (max-width: 980px){
  .fl-tb__grid{ grid-template-columns:1fr; }
  .fl-blog__grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .fl-blog__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px){
  .fl-blog__grid{ grid-template-columns: 1fr; }
  .fl-tb__head{ flex-wrap:wrap; }
}

/* ===== GUIDANCE CTA BANNER =====
   Renamed from .fl-cta -> .fl-guidance-cta: that name collided with the
   existing header "Apply Now" button class (.fl-cta, used for a rounded
   pill button), which caused this full-width banner to inherit
   border-radius from the button rule. Renaming avoids the clash. */
.fl-guidance-cta{ background:var(--amber); padding:38px 0; }
.fl-guidance-cta__row{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.fl-guidance-cta__text h2{ font-size:24px; font-weight:800; color:var(--white); margin-bottom:6px; }
.fl-guidance-cta__text p{ font-size:14px; color:rgba(255,255,255,.9); }
.fl-guidance-cta__btns{ display:flex; gap:14px; flex-shrink:0; }
.fl-cta-btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:var(--radius); font-size:14px; font-weight:700; white-space:nowrap; }
.fl-cta-btn--white{ background:var(--white); color:var(--amber-deep); }
.fl-cta-btn--whatsapp{ background:#25D366; color:var(--white); }

@media (max-width: 640px){
  .fl-guidance-cta__row{ flex-direction:column; align-items:flex-start; }
  .fl-guidance-cta__btns{ width:100%; flex-direction:column; }
  .fl-cta-btn{ width:100%; justify-content:center; }
}

/* =============================================
   SPECIALIZATION DETAIL PAGE
   Added for frontend.specializations.show
   ============================================= */

/* ===== BREADCRUMB ===== */
.fl-breadcrumb{ background: var(--white); border-bottom:1px solid var(--line); padding:13px 0; font-size:13px; color: var(--ink-soft); }
.fl-breadcrumb a:hover{ color: var(--amber-deep); }
.fl-breadcrumb .sep{ margin:0 8px; color: var(--line); }
.fl-breadcrumb .current{ color: var(--navy-deep); font-weight:600; }

/* ===== SPECIALIZATION HERO ===== */
.fl-spec-hero{
  position:relative;
  background: linear-gradient(120deg, var(--navy-deep), var(--amber-deep) 78%);
  overflow:hidden;
  padding:38px 0 46px;
}
.fl-spec-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 85% 15%, rgba(224,52,43,0.25), transparent 45%);
  pointer-events:none;
}
.fl-spec-hero__inner{ position:relative; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.fl-spec-hero__icon{
  width:64px; height:64px; border-radius:16px;
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.25);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:700; color:var(--white);
  flex-shrink:0; overflow:hidden;
}
.fl-spec-hero__icon img{ width:100%; height:100%; object-fit:cover; }
.fl-spec-hero__badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(224,52,43,0.18); border:1px solid rgba(224,52,43,0.45);
  color:#FF8A80; font-size:12px; font-weight:600; letter-spacing:.03em;
  padding:5px 13px; border-radius:999px; margin-bottom:12px;
}
.fl-spec-hero h1{ color:#fff; font-family:'Fraunces', serif; font-size:32px; font-weight:700; line-height:1.15; margin-bottom:6px; }
.fl-spec-hero p{ color:rgba(255,255,255,0.78); font-size:14.5px; max-width:520px; }

/* ===== ABOUT SECTION ===== */
.fl-about{ padding:40px 0 8px; }
.fl-about h2{ font-family:'Fraunces', serif; font-size:22px; font-weight:700; color: var(--navy-deep); margin-bottom:12px; }
.fl-about p{ font-size:14.5px; color: var(--ink-soft); max-width:760px; margin-bottom:22px; }

.fl-info-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:8px; }
.fl-info-item{
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius);
  padding:16px 18px; display:flex; align-items:center; gap:12px;
}
.fl-info-item__icon{
  width:38px; height:38px; border-radius:9px; background: var(--tint); color: var(--amber-deep);
  display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
}
.fl-info-item__label{ font-size:11.5px; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; margin-bottom:2px; }
.fl-info-item__value{ font-size:14px; font-weight:700; color: var(--navy-deep); }

/* ===== UNIVERSITIES OFFERING SECTION ===== */
.fl-unis{ padding:48px 0 64px; }
.fl-unis__head{ text-align:center; max-width:560px; margin:0 auto 30px; }
.fl-unis__head h2{ font-family:'Fraunces', serif; font-size:26px; font-weight:700; color: var(--navy-deep); margin-bottom:8px; }
.fl-unis__head p{ font-size:14.5px; color: var(--ink-soft); }

.fl-uni-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }

.fl-uni-card{ background: var(--white); border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease; }
.fl-uni-card:hover{ transform:translateY(-5px); box-shadow:0 16px 32px rgba(18,29,52,0.14); }

.fl-uni-card__banner{ position:relative; height:96px; background: linear-gradient(135deg, var(--amber-deep), var(--teal)); }
.fl-uni-card__logo{
  position:absolute; left:16px; bottom:-24px; width:56px; height:56px; border-radius:50%;
  background: var(--white); border:3px solid var(--white); box-shadow:0 4px 10px rgba(18,29,52,0.15);
  display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; color: var(--amber-deep);
  overflow:hidden;
}
.fl-uni-card__logo img{ width:100%; height:100%; object-fit:cover; }

.fl-uni-card__body{ padding:32px 18px 18px; display:flex; flex-direction:column; flex:1; }
.fl-uni-card__body h3{ font-family:'Fraunces', serif; font-size:16.5px; font-weight:700; color: var(--navy-deep); margin-bottom:6px; }
.fl-uni-card__loc{ font-size:13px; color: var(--ink-soft); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.fl-uni-card__tag{ display:inline-block; font-size:12px; font-weight:600; color: var(--navy); background: var(--tint); padding:4px 10px; border-radius:6px; margin-bottom:16px; width:fit-content; }

.fl-uni-card__btn{
  margin-top:auto; text-align:center; padding:11px 20px; font-size:13.5px; font-weight:700;
  background: var(--amber); color:#fff; border-radius: var(--radius); transition:background .2s ease;
}
.fl-uni-card__btn:hover{ background: var(--amber-deep); }

/* ===== EMPTY STATE (no universities found) ===== */
.fl-empty-state{
  background: var(--white); border:1px dashed var(--line); border-radius: var(--radius);
  padding:56px 24px; text-align:center; max-width:480px; margin:0 auto;
}
.fl-empty-state__icon{
  width:56px; height:56px; border-radius:50%; background: var(--tint); color: var(--amber-deep);
  display:flex; align-items:center; justify-content:center; font-size:24px; margin:0 auto 18px;
}
.fl-empty-state h3{ font-family:'Fraunces', serif; font-size:18px; font-weight:700; color: var(--navy-deep); margin-bottom:8px; }
.fl-empty-state p{ font-size:13.5px; color: var(--ink-soft); margin-bottom:20px; }
.fl-empty-state .fl-cta-btn{ display:inline-block; padding:11px 22px; }

/* ===== EXPLORE MORE SPECIALIZATIONS ===== */
.fl-explore-more{ padding:8px 0 64px; }
.fl-explore-more h2{ font-family:'Fraunces', serif; font-size:20px; font-weight:700; color: var(--navy-deep); margin-bottom:18px; text-align:center; }
.fl-mini-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.fl-mini-card{ background: var(--white); border:1px solid var(--line); border-radius:12px; padding:16px; text-align:center; display:block; transition:box-shadow .18s ease; }
.fl-mini-card:hover{ box-shadow:0 10px 22px rgba(18,29,52,0.08); }
.fl-mini-card__icon{ width:38px; height:38px; border-radius:10px; background: var(--tint); color: var(--amber-deep); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; margin:0 auto 10px; overflow:hidden; }
.fl-mini-card__icon img{ width:100%; height:100%; object-fit:cover; }
.fl-mini-card h4{ font-size:13.5px; font-weight:700; color: var(--navy-deep); }

/* ===== RESPONSIVE — Specialization Detail ===== */
@media (max-width: 980px){
  .fl-uni-grid{ grid-template-columns:repeat(2, 1fr); }
  .fl-info-row{ grid-template-columns:1fr 1fr; }
  .fl-mini-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 600px){
  .fl-uni-grid{ grid-template-columns:1fr; }
  .fl-info-row{ grid-template-columns:1fr; }
  .fl-mini-grid{ grid-template-columns:1fr 1fr; }
  .fl-spec-hero h1{ font-size:24px; }
}

/* =============================================
   FL-FIXES — appended after mentor review (Monday deadline)
   Paste this whole block at the very end of style.css.
   Nothing above this line was touched — only additions here.
   ============================================= */

/* ---- Point 5: add missing --green variable (was undefined,
   which is why "UniPortal Verified" wasn't showing green) ---- */
:root{
  --green:#16A34A;
  --green-tint:#E8F7EE;
}

/* ---- Point 5: rating chip — red/pink -> green ---- */
.unidetail-rating{ color:var(--green); background:var(--green-tint); }

/* ---- Point 6: kill the white gap where a full-bleed red CTA
   sits directly above the footer (.fl-footer had margin-top:40px,
   .fl-cd-footer on the course page already had margin-top:0) ---- */
.unidetail-finalcta + .fl-footer,
.fl-guidance-cta + .fl-footer{ margin-top:0; }

/* ---- Point 7: leftover navy hover on final-CTA buttons ->
   match the site-wide red hover used everywhere else ---- */
.unidetail-finalcta .fl-btn-primary:hover{ background:var(--amber-deep); color:var(--white); }
.fl-cd-final-cta .fl-cd-btn-primary:hover{ background:var(--amber-deep); color:var(--white); }


/* =============================================
   FL-FIXES — appended after mentor review (Monday deadline)
   Paste this whole block at the very end of style.css.
   Nothing above this line was touched — only additions here.
   ============================================= */

/* ---- Point 1: match mentor's demo page colors EXACTLY.
   Compared demo :root vs ours — red/red-dark/gold were slightly off,
   and --line / --ink-soft still carried a blue tint left over from the
   old Navy+Teal scheme (mentor's demo uses neutral gray, not blue-gray).
   Because everything below is a CSS variable, this one block fixes
   colors site-wide — no need to hunt down individual selectors. ---- */
:root{
  --amber:#E31B23;       /* was #E0342B — exact mentor red */
  --amber-deep:#C01319;  /* was #B8241C — exact mentor red-dark */
  --tint:#FDE9EA;        /* was #FCEAEA — exact mentor red-light */
  --star:#F5A623;        /* was #F0A93A — exact mentor gold */
  --line:#EEEEEE;        /* was #E3E8F1 (blue-tinted) — neutral gray like mentor's demo */
  --ink-soft:#6B7280;    /* was #5B6684 (blue-gray) — neutral gray like mentor's demo */
  --green:#1BA84E;       /* was #16A34A (my earlier guess) — exact mentor green */
  --green-tint:#E7F7EC;  /* light tint derived from mentor's green, for chip backgrounds */
}

/* ---- Point 5: rating chip — red/pink -> green ---- */
.unidetail-rating{ color:var(--green); background:var(--green-tint); }

/* ---- Point 6: kill the white gap above the footer.
   Original: .fl-footer{ margin-top:40px } (line 194) — that 40px shows as
   white because body/html background is white behind it.
   UPDATE: the sibling-selector version of this fix (.fl-guidance-cta + .fl-footer)
   didn't work on the homepage because the layout wraps content in a <main>/
   container, so .fl-footer isn't a direct DOM sibling of the CTA section.
   Fix below is direct — same selector as the original rule, defined again
   here, so it wins by cascade order regardless of layout nesting. ---- */
.fl-footer{ margin-top:0; }

/* ---- Point 7: leftover navy hover on final-CTA buttons ->
   match the site-wide red hover used everywhere else ---- */
.unidetail-finalcta .fl-btn-primary:hover{ background:var(--amber-deep); color:var(--white); }
.fl-cd-final-cta .fl-cd-btn-primary:hover{ background:var(--amber-deep); color:var(--white); }

/* ===== APPLY NOW MODAL ===== */
.fl-modal-overlay{
  position:fixed;inset:0;background:rgba(20,27,56,.55);
  display:none;align-items:center;justify-content:center;z-index:999;
  padding:20px;backdrop-filter:blur(2px);
}
.fl-modal-overlay.is-open{display:flex;}

.fl-apply-modal{
  background:var(--white);border-radius:16px;width:100%;max-width:440px;
  max-height:92vh;overflow-y:auto;position:relative;
  box-shadow:0 24px 60px rgba(20,27,56,.35);
  animation:fl-modal-in .18s ease-out;
}
@keyframes fl-modal-in{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}

.fl-apply-modal__head{
  background:linear-gradient(120deg,var(--navy-deep),var(--amber-deep) 130%);
  color:var(--white);padding:24px 26px;border-radius:16px 16px 0 0;position:relative;
}
.fl-apply-modal__close{
  position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.15);border:none;color:var(--white);font-size:16px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;
}
.fl-apply-modal__close:hover{background:rgba(255,255,255,.28);}
.fl-apply-modal__eyebrow{font-size:12px;font-weight:600;opacity:.85;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.fl-apply-modal__head h3{margin:0;font-size:19px;font-weight:700;}
.fl-apply-modal__head p{margin:6px 0 0;font-size:13px;opacity:.85;}

.fl-apply-modal__body{padding:24px 26px 28px;}
.fl-apply-modal__body.is-hidden{display:none;}

.fl-field{margin-bottom:16px;}
.fl-field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink);}
.fl-field input, .fl-field select{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:9px;
  font-size:14px;font-family:inherit;outline:none;transition:border-color .15s ease;
  background:var(--white);color:var(--ink);
}
.fl-field input:focus, .fl-field select:focus{border-color:var(--amber);}
.fl-field small{display:block;margin-top:5px;font-size:11.5px;color:var(--ink-soft);}

.fl-context-chip{
  display:flex;align-items:center;gap:8px;background:var(--cream);
  border:1px solid var(--line);border-radius:9px;padding:10px 14px;
  font-size:13px;font-weight:600;margin-bottom:18px;
}
.fl-context-chip .ic{width:30px;height:30px;border-radius:7px;background:var(--tint);color:var(--amber-deep);
  display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.fl-context-chip small{display:block;font-weight:400;color:var(--ink-soft);font-size:11.5px;margin-top:1px;}

.fl-form-error{
  background:var(--tint);color:var(--amber-deep);font-size:13px;font-weight:600;
  padding:10px 14px;border-radius:8px;margin-bottom:16px;
}

.fl-apply-submit{
  width:100%;background:var(--amber);color:var(--white);border:none;border-radius:11px;
  padding:14px;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s ease;
}
.fl-apply-submit:hover{background:var(--amber-deep);}
.fl-apply-submit:disabled{opacity:.65;cursor:not-allowed;}

.fl-privacy-note{font-size:11.5px;color:var(--ink-soft);text-align:center;margin-top:14px;line-height:1.5;}

.fl-apply-success{display:none;text-align:center;padding:40px 26px 34px;}
.fl-apply-success.is-active{display:block;}
.fl-apply-success__icon{
  width:64px;height:64px;border-radius:50%;background:var(--green-tint);color:var(--green);
  display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 18px;
}
.fl-apply-success h3{margin:0 0 8px;font-size:19px;color:var(--ink);}
.fl-apply-success p{margin:0 0 22px;font-size:13.5px;color:var(--ink-soft);line-height:1.5;}
.fl-apply-success button{
  background:var(--navy-deep);color:var(--white);border:none;border-radius:9px;
  padding:11px 22px;font-size:13.5px;font-weight:600;cursor:pointer;
}

/* =============================================
   TOP UNIVERSITIES CAROUSEL — Homepage only
   Everything below is scoped under .fl-featured__carousel (a wrapper class
   that ONLY exists on the homepage). The University Listing page reuses
   the plain .fl-featured__grid / .fl-uni-card class names elsewhere without
   this wrapper — so none of these rules can ever touch that page.
   Card internals (.fl-uni-card content) are NOT modified — only sizing.
   ============================================= */

.fl-featured__carousel{
  position:relative;
  max-width:1240px;
  margin:0 auto;
  padding:0 44px;    /* gutter that houses the prev/next buttons */
}

.fl-featured__carousel .fl-featured__grid{
  display:flex;
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:4px 0 14px;
  -webkit-overflow-scrolling:touch;   /* smooth momentum scroll on iOS */
  scrollbar-width:none;               /* Firefox — hide scrollbar, buttons are the nav */
}
.fl-featured__carousel .fl-featured__grid::-webkit-scrollbar{ display:none; }  /* Chrome/Safari/Edge */

/* Desktop: fixed card width so ~4 cards are visible at once */
.fl-featured__carousel .fl-uni-card{
  scroll-snap-align:start;
  flex:0 0 auto;
  width:280px;
}

.fl-featured__carousel .fl-uni-carousel__nav{
  position:absolute; top:42%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%; padding:0;
  background:var(--white); border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(18,29,52,.14);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:5; color:var(--navy-deep);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.fl-featured__carousel .fl-uni-carousel__nav:hover{ background:var(--amber); color:var(--white); border-color:var(--amber); }
.fl-featured__carousel .fl-uni-carousel__nav--prev{ left:0; }
.fl-featured__carousel .fl-uni-carousel__nav--next{ right:0; }
.fl-featured__carousel .fl-uni-carousel__nav:disabled{ opacity:.35; cursor:default; pointer-events:none; }

/* Tablet — ~2-3 cards visible */
@media (max-width: 980px){
  .fl-featured__carousel .fl-uni-card{ width:250px; }
}

/* Mobile — 1 card at a time, guaranteed no horizontal page overflow
   since width is capped relative to the viewport itself */
@media (max-width: 640px){
  .fl-featured__carousel{ padding:0 38px; }
  .fl-featured__carousel .fl-uni-card{ width:84vw; max-width:320px; }
  .fl-featured__carousel .fl-uni-carousel__nav{ width:34px; height:34px; }
}