/* ═══════════════════════════════════════════════════════════════════════
   Study & Go Global — reference-driven redesign layer
   Loaded AFTER styles.css on every page. Branch: feature/study-goglobal-reference-redesign
   Measured from the reference homepage at 1536px viewport (see docs/redesign/reference-design-spec.md)
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --rd-font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --rd-font-head: "Poppins", "Segoe UI", system-ui, sans-serif;
  --rd-font-title: "Poppins", "Segoe UI", system-ui, sans-serif;
  --rd-text: #212529;
  --rd-nav: #3a3a3a;
  --rd-orange: var(--sg-navy-700);
  --rd-orange-2: var(--sg-navy-600);
  --rd-gold: var(--sg-gold-500);
  --rd-red: var(--sg-danger);
  --rd-blue: var(--sg-azure-600);
  --rd-navy: var(--sg-navy-800);
  --rd-purple: var(--sg-azure-600);
  --rd-container: 1344px;
  --rd-header-h: 63px;
}

body { font-family: var(--rd-font-body); color: var(--rd-text); background: #fff; }
.rd-wrap { max-width: var(--rd-container); margin: 0 auto; padding: 0 24px; }

/* ── Header (reference: 63px, white, soft shadow, 15px/500 nav) ─────────── */
.top-nav {
  position: sticky; top: 0; z-index: 1000; background: #fff;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  border-bottom: 0; padding: 5px 0;
}
.top-nav .nav-inner {
  max-width: var(--rd-container); margin: 0 auto; padding: 0 24px;
  height: calc(var(--rd-header-h) - 10px); display: flex; align-items: center; gap: 28px;
}
.top-nav .brand-logo { height: 49px; width: auto; object-fit: contain; }
.top-nav .nav-links { display: flex; align-items: center; gap: 22px; margin-right: auto; }
.top-nav .nav-links > a, .rd-dd > button {
  font: 500 15px/1.2 var(--rd-font-body); color: var(--rd-nav); text-decoration: none;
  background: none; border: 0; padding: 8px 0; cursor: pointer; white-space: nowrap;
  transition: color .15s;
}
.top-nav .nav-links > a:hover, .rd-dd > button:hover, .top-nav .nav-links > a.is-active { color: var(--rd-orange); }
.rd-dd { position: relative; }
.rd-dd > button::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 7px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); }
.rd-dd-menu {
  position: absolute; top: calc(100% + 10px); left: -14px; min-width: 230px; padding: 8px;
  background: #fff; border-radius: 12px; box-shadow: 0 14px 34px rgba(15,23,42,.16);
  border: 1px solid #eef0f4; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.rd-dd:hover .rd-dd-menu, .rd-dd:focus-within .rd-dd-menu, .rd-dd.is-open .rd-dd-menu { opacity: 1; visibility: visible; transform: none; }
.rd-dd-menu a { display: block; padding: 10px 14px; border-radius: 8px; font: 500 14px var(--rd-font-body); color: var(--rd-nav); text-decoration: none; }
.rd-dd-menu a:hover { background: #f2f6fb; color: var(--rd-orange); }
.top-nav .auth-actions { display: flex; align-items: center; gap: 14px; }
.top-nav .register-link { font: 500 15px var(--rd-font-body); color: var(--rd-nav); }
.top-nav .login-btn {
  height: 38px; padding: 0 20px; border-radius: 8px; border: 0; cursor: pointer;
  background: linear-gradient(90deg, var(--rd-orange), var(--rd-orange-2)); color: #fff;
  font: 600 14px var(--rd-font-body); box-shadow: 0 3px 10px rgba(31,61,110,.3);
}
.rd-office-link { display: inline-flex; align-items: center; gap: 6px; font: 500 15px var(--rd-font-body); color: var(--rd-nav); text-decoration: none; white-space: nowrap; }
.rd-office-link svg { color: var(--rd-nav); }
.rd-office-link:hover { color: var(--rd-orange); }

/* ── Floating tabs & buttons (reference: left/right vertical tabs, CTA pill) ── */
.rd-tab {
  position: fixed; z-index: 900; writing-mode: vertical-rl; text-orientation: mixed;
  font: 700 11px/1 var(--rd-font-body); letter-spacing: .16em; text-transform: uppercase; color: #fff;
  padding: 18px 9px; text-decoration: none; box-shadow: 0 6px 18px rgba(15,23,42,.18);
}
.rd-tab-portal { left: 0; top: 200px; background: linear-gradient(180deg,#2a5192,#173054); border-radius: 0 12px 12px 0; }
.rd-tab-guide  { left: 0; top: 360px; background: linear-gradient(180deg,#8a6a2f,#7d5f27); border-radius: 0 12px 12px 0; }
.rd-tab-apply  { right: 0; top: 290px; background: linear-gradient(180deg,#2a5192,#173054); border-radius: 12px 0 0 12px; transform: rotate(180deg); }
.rd-cta-pill {
  position: fixed; z-index: 950; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 34px; border-radius: 999px;
  background: linear-gradient(90deg, #1f3d6e, #2a5192); color: #fff; font: 700 17px var(--rd-font-body);
  text-decoration: none; box-shadow: 0 10px 28px rgba(31,61,110,.4); transition: transform .18s, opacity .25s;
}
.rd-cta-pill:hover { transform: translateX(-50%) translateY(-2px); }
.rd-cta-pill.is-hidden { opacity: 0; pointer-events: none; }
.rd-totop {
  position: fixed; z-index: 950; right: 24px; bottom: 24px; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: #289bd1; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 20px rgba(29,161,242,.4);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.rd-totop.is-on { opacity: 1; pointer-events: auto; }

/* ── Hero (reference: full-bleed photo, dark-blue overlay, orange CTA) ──── */
.rd-hero {
  position: relative; min-height: 480px; display: flex; align-items: center; color: #fff; isolation: isolate;
  background: linear-gradient(100deg, rgba(17,35,59,.92) 0%, rgba(17,35,59,.78) 45%, rgba(17,35,59,.55) 100%),
              url("/assets/photo%201.avif") center / cover no-repeat;
}
.rd-hero .rd-wrap { width: 100%; padding-left: 64px; }
.rd-hero h1 { margin: 0 0 22px; max-width: 640px; font: 800 32px/1.5 var(--rd-font-head); color: #fff; }
.rd-hero p { margin: 0 0 30px; max-width: 620px; font: 400 16px/1.7 var(--rd-font-body); color: rgba(255,255,255,.9); }
.rd-btn-orange {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 30px; border: 0; border-radius: 10px;
  background: linear-gradient(90deg, #1f3d6e, #b28a4c); color: #fff; font: 700 15px var(--rd-font-body); letter-spacing: .03em;
  text-transform: uppercase; text-decoration: none; cursor: pointer; box-shadow: 0 6px 18px rgba(249,115,22,.35); transition: transform .15s;
}
.rd-btn-orange:hover { transform: translateY(-2px); color: #fff; }

/* ── Updates + course finder bar ────────────────────────────────────────── */
.rd-finder { display: grid; grid-template-columns: 34px minmax(0, 1fr) 40px minmax(0, 1.25fr); min-height: 90px; margin-top: -1px; }
.rd-updates { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 24px; background: linear-gradient(90deg,#f2f6fb,#e6edf7); text-align: center; }
.rd-updates p { margin: 0; font: 500 16px/1.4 var(--rd-font-body); color: #11233b; }
.rd-updates .rd-new { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 6px; background: #7d5f27; color: #fff; font: 700 10px var(--rd-font-body); vertical-align: middle; }
.rd-updates a { font-size: 13px; color: #1b78ad; text-decoration: none; }
.rd-finder-label { background: #000; color: #fff; writing-mode: vertical-rl; transform: rotate(180deg); display: grid; place-items: center; font: 600 14px var(--rd-font-body); }
.rd-finder-form { display: flex; align-items: center; gap: 12px; padding: 16px 24px; background: linear-gradient(90deg, #173054, #1f3d6e); }
.rd-finder-form select {
  flex: 1; height: 46px; padding: 0 16px; border: 0; border-radius: 8px; background: #fff; color: #333; font: 400 14px var(--rd-font-body);
}
.rd-finder-form button {
  height: 46px; padding: 0 26px; border: 0; border-radius: 8px; background: #b28a4c; color: #11233b; font: 700 14px var(--rd-font-body); cursor: pointer;
}

/* ── Section titles ─────────────────────────────────────────────────────── */
.rd-section { padding: 70px 0 20px; }
.rd-title { text-align: center; margin: 0 0 40px; font: 700 40px/1.2 var(--rd-font-body); }
.rd-title.t-red { color: #1f3d6e; }
.rd-title.t-brown { color: #1f3d6e; font-size: 24px; }
.rd-title.t-crimson { color: #1f3d6e; font-size: 24px; }
.rd-row-head { display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 30px; }
.rd-row-head .rd-viewall { position: absolute; right: 0; font: 500 14px var(--rd-font-body); color: #444; text-decoration: none; }
.rd-viewall:hover { color: var(--rd-orange); }

/* ── Top courses grid ──────────────────────────────────────────────────── */
.rd-courses { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 18px 18px; }
.rd-course {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px;
  min-height: 113px; padding: 16px 10px; background: #fff; border-radius: 15px; text-decoration: none;
  box-shadow: 0 8px 25px rgba(0,0,0,.1); transition: transform .18s, box-shadow .18s;
}
.rd-course:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(15,23,42,.12); }
.rd-course i { width: 24px; height: 24px; border-radius: 50%; display: block; }
.rd-course b { font: 600 13.5px/1.3 var(--rd-font-title); color: #333; }
.rd-course small { font: 400 11px var(--rd-font-body); color: #888; }
.rd-center { text-align: center; margin-top: 36px; }
.rd-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; height: 52px; min-width: 210px; padding: 0 28px; border-radius: 999px;
  border: 1px solid var(--rd-blue); color: var(--rd-blue); font: 500 18px var(--rd-font-body); text-decoration: none; background: #fff; transition: background .15s, color .15s;
}
.rd-btn-outline:hover { background: var(--rd-blue); color: #fff; }

/* ── Highlights cards (our own links, no invented news) ────────────────── */
.rd-cards5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.rd-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid #e8ebf1; border-radius: 14px; padding: 10px; text-decoration: none; color: inherit;
  transition: box-shadow .18s, transform .18s;
}
.rd-card:hover { box-shadow: 0 12px 28px rgba(15,23,42,.1); transform: translateY(-3px); }
.rd-card .rd-img { aspect-ratio: 16 / 9; border-radius: 10px; background: #e5e9f2 center / cover no-repeat; }
.rd-card .rd-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 6px 6px; font: 500 14px/1.35 var(--rd-font-title); color: #145e8a; }
.rd-card .rd-cap span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ── Facilitator split (dark left, pale right) ─────────────────────────── */
.rd-split { display: grid; grid-template-columns: 1fr 1fr; margin-top: 70px; }
.rd-split-left { padding: 56px 24px 56px max(24px, calc((100vw - var(--rd-container)) / 2 + 24px)); color: #fff; background: linear-gradient(135deg, #173054 0%, #173054 55%, #17212f 100%); }
.rd-split-left h2 { margin: 0 0 6px; font: 800 28px/1.25 var(--rd-font-head); color: #fff; }
.rd-split-left .rd-sub { margin: 0 0 26px; font: 400 16px var(--rd-font-body); color: rgba(255,255,255,.88); }
.rd-split-left .rd-body { display: flex; gap: 20px; align-items: flex-start; }
.rd-split-left img { width: 164px; height: 166px; object-fit: cover; border-radius: 12px; flex-shrink: 0; }
.rd-split-left p { margin: 0 0 18px; font: 400 16px/1.5 var(--rd-font-body); color: rgba(255,255,255,.94); }
.rd-readmore { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 8px; background: linear-gradient(90deg,#f7f0e3,#e6edf7); color: #1f3d6e; font: 500 15px var(--rd-font-body); text-decoration: none; }
.rd-split-right { padding: 40px max(24px, calc((100vw - var(--rd-container)) / 2 + 24px)) 40px 70px; background: linear-gradient(135deg, #fff, #f2f6fb 55%, #f2f6fb); }
.rd-split-right .rd-row-head { justify-content: flex-start; margin-bottom: 18px; }
.rd-split-right h2 { margin: 0; font: 700 21px var(--rd-font-title); color: #173054; }
.rd-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: center; }
.rd-logos a { display: grid; place-items: center; height: 86px; padding: 10px; background: #fff; border-radius: 12px; box-shadow: 0 3px 12px rgba(15,23,42,.06); }
.rd-logos img { max-width: 100%; max-height: 62px; object-fit: contain; }

/* ── Top universities by country ───────────────────────────────────────── */
.rd-country { display: flex; flex-direction: column; background: #fff; border: 1px solid #e8ebf1; border-radius: 14px; padding: 10px; text-decoration: none; color: inherit; transition: box-shadow .18s, transform .18s; }
.rd-country:hover { box-shadow: 0 12px 28px rgba(15,23,42,.1); transform: translateY(-3px); }
.rd-country .rd-img { height: 120px; border-radius: 10px 10px 0 0; background: #dfe5ef center / cover no-repeat; }
.rd-country .rd-bar { display: flex; align-items: center; gap: 10px; height: 59px; padding: 0 14px; border-radius: 0 0 10px 10px; background: #c8c8c8; font: 500 16px var(--rd-font-title); color: #222; }
.rd-country .rd-bar img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.rd-country .rd-bar svg { margin-left: auto; }
.rd-country p { margin: 12px 4px 4px; font: 500 13px/1.45 var(--rd-font-title); color: #222; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ── Student voices band (keeps the real, user-submitted stories) ───────── */
.stories-section { background: linear-gradient(180deg, #f2f6fb, #e6edf7); padding: 70px 0; margin-top: 70px; }
.stories-section h2 { font: 700 26px var(--rd-font-title); background: linear-gradient(90deg, #1f3d6e, #2a5192); -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; }

/* ── Start Your Application card ───────────────────────────────────────── */
.rd-apply { padding: 90px 0; background: linear-gradient(135deg, #2a5192 0%, #1b78ad 55%, #1f3d6e 100%); }
.rd-apply-card { display: grid; grid-template-columns: 1fr 1fr; max-width: var(--rd-container); margin: 0 auto; border-radius: 28px; overflow: hidden; background: #fafafa; box-shadow: 0 30px 70px rgba(30,20,90,.35); }
.rd-apply-art { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 60px 40px; color: #fff; background: linear-gradient(160deg, #2a5192, #2a5192 60%, #2a5192); overflow: hidden; text-align: center; }
.rd-apply-art .cap { width: 160px; height: 160px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 14px 40px rgba(0,0,0,.2); }
.rd-apply-art h3 { margin: 0; font: 700 24px var(--rd-font-title); }
.rd-apply-art p { margin: 0; max-width: 360px; font: 400 15px/1.6 var(--rd-font-body); opacity: .92; }
.rd-apply-art .pill { padding: 12px 26px; border-radius: 999px; background: rgba(255,255,255,.18); font: 600 15px var(--rd-font-body); }
.rd-apply-art::before, .rd-apply-art::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.2); }
.rd-apply-art::before { width: 60px; height: 60px; top: 56px; left: 100px; }
.rd-apply-art::after { width: 50px; height: 50px; bottom: 90px; right: 90px; background: rgba(60,70,200,.45); }
.rd-apply-form { padding: 60px 56px; display: flex; flex-direction: column; justify-content: center; }
.rd-apply-form h3 { margin: 0 0 6px; text-align: center; font: 700 30px var(--rd-font-title); color: #1f2937; }
.rd-apply-form > p { margin: 0 0 24px; text-align: center; font: 400 17px var(--rd-font-body); color: #4b5563; }
.rd-apply-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.rd-apply-form input, .rd-apply-form select { width: 100%; height: 50px; padding: 0 16px; border: 1px solid #e3e6ee; border-radius: 12px; background: #fff; font: 400 15px var(--rd-font-body); color: #1f2937; box-sizing: border-box; }
.rd-apply-form input:focus, .rd-apply-form select:focus { outline: 2px solid #2a5192; outline-offset: 1px; }
.rd-apply-form .full { grid-column: 1 / -1; margin-bottom: 14px; }
.rd-apply-submit { width: 100%; height: 60px; border: 0; border-radius: 12px; background: linear-gradient(90deg, #289bd1, #2a5192); color: #fff; font: 700 20px var(--rd-font-body); cursor: pointer; box-shadow: 0 10px 26px rgba(91,115,242,.35); }
.rd-apply-note { margin: 12px 0 0; min-height: 20px; text-align: center; font: 400 13px var(--rd-font-body); color: #475569; }

/* ── FAQ tiles + accordion ─────────────────────────────────────────────── */
.rd-faq { padding: 70px 0; background: linear-gradient(135deg, #f2f6fb, #f2f6ff); }
.rd-faq h2 { margin: 0 0 36px; text-align: center; font: 700 38px var(--rd-font-title); color: #064e3b; }
.rd-faq-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; max-width: 1120px; margin: 0 auto; }
.rd-faq-tile { display: flex; align-items: center; gap: 16px; min-height: 62px; padding: 8px 18px 8px 10px; background: #fff; border: 0; border-radius: 10px; font: 500 16px var(--rd-font-title); color: #1f3d6e; text-align: left; cursor: pointer; box-shadow: 0 2px 8px rgba(15,23,42,.04); }
.rd-faq-tile:hover, .rd-faq-tile[aria-expanded="true"] { box-shadow: 0 8px 22px rgba(15,23,42,.1); color: var(--rd-orange); }
.rd-faq-tile .ic { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; background: #f2f6fb; font-size: 20px; flex-shrink: 0; }
.rd-faq-answer { max-width: 1120px; margin: 24px auto 0; padding: 22px 26px; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(15,23,42,.08); font: 400 15px/1.7 var(--rd-font-body); color: #374151; }
.rd-faq-answer[hidden] { display: none; }

/* ── Partner strip ─────────────────────────────────────────────────────── */
.rd-partners { padding: 0 24px 60px; }
.rd-partners-card { max-width: var(--rd-container); margin: 0 auto; padding: 36px 30px 40px; background: #fff; border-radius: 22px; box-shadow: 0 6px 30px rgba(15,23,42,.08); text-align: center; }
.rd-partners-card h3 { margin: 0 0 22px; font: 700 24px var(--rd-font-title); color: #4b5563; }
.rd-partners-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 22px 44px; margin-bottom: 26px; }
.rd-partners-row img { height: 60px; width: auto; max-width: 170px; object-fit: contain; }

/* ── Footer (reference: light, centred links, square social icons) ─────── */
.site-footer.rd-footer { background: #f3f3f3; color: #333; border-top: 0; padding: 40px 24px 28px; text-align: center; }
.rd-footer .rd-foot-brand { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.rd-footer .rd-foot-brand img { height: 64px; width: auto; }
.rd-foot-links { display: flex; justify-content: center; flex-wrap: wrap; margin: 0 0 22px; }
.rd-foot-links a { padding: 0 12px; font: 400 15px var(--rd-font-title); color: #222; text-decoration: none; border-left: 1px solid #aaa; line-height: 1.1; }
.rd-foot-links a:first-child { border-left: 0; }
.rd-foot-links a:hover { color: var(--rd-orange); }
.rd-foot-contact { margin: 0 0 20px; font: 400 14px/1.7 var(--rd-font-body); color: #444; }
.rd-foot-contact a { color: #444; text-decoration: none; }
.rd-foot-contact a:hover { color: var(--rd-orange); }
.rd-foot-contact .lm { font-weight: 600; }
.rd-foot-social { display: flex; justify-content: center; gap: 18px; margin-bottom: 24px; }
.rd-foot-social a { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 10px; background: #e9e9ee; border: 1px solid #d4d4dc; transition: background .15s, transform .15s; }
.rd-foot-social a:hover { background: #fff; transform: translateY(-2px); }
.rd-foot-social img { width: 20px; height: 20px; object-fit: contain; }
.rd-foot-copy { margin: 0; font: 400 14px var(--rd-font-title); color: #222; }
.rd-foot-legal { margin-top: 8px; font-size: 13px; }
.rd-foot-legal a { color: #666; text-decoration: none; margin: 0 8px; }
.rd-foot-legal a:hover { color: var(--rd-orange); }

/* ── Responsive (reference collapses to stacked cards, ≤ 768px) ────────── */
@media (max-width: 1200px) {
  .rd-courses { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rd-cards5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rd-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .rd-split { grid-template-columns: 1fr; }
  .rd-split-right { padding: 36px 24px; }
  .rd-split-left { padding: 40px 24px; }
  .rd-apply-card { grid-template-columns: 1fr; margin: 0 16px; }
  .rd-apply-art { padding: 40px 24px; }
  /* finder: the reference stacks an "Updates" bar, the notice, a black "Courses" bar and the form */
  .rd-finder { grid-template-columns: 1fr; }
  .rd-updates-label, .rd-finder-label { writing-mode: horizontal-tb; transform: none; padding: 9px; text-align: center; }
  .rd-updates-label { background: #4a4a4a; }
  .rd-finder-label { background: #000; }
  .rd-office-link { display: none; }
}
@media (max-width: 640px) {
  .rd-hero { min-height: 420px; }
  .rd-hero h1 { font-size: 26px; }
  .rd-title { font-size: 30px; margin-bottom: 26px; }
  .rd-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rd-cards5 { grid-template-columns: 1fr; }
  .rd-logos { grid-template-columns: repeat(2, 1fr); }
  .rd-split-left .rd-body { flex-direction: column; }
  .rd-apply-form { padding: 36px 20px; }
  .rd-apply-form .row { grid-template-columns: 1fr; }
  .rd-faq-grid { grid-template-columns: 1fr; gap: 12px; }
  .rd-finder-form { flex-direction: column; align-items: stretch; }
  .rd-cta-pill { height: 50px; padding: 0 22px; font-size: 15px; bottom: 16px; }
  .rd-tab-guide { display: none; }
  .rd-tab-portal { top: 170px; }
  .rd-tab-apply { top: 250px; }
  .rd-foot-links a { padding: 4px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-course, .rd-card, .rd-country, .rd-cta-pill, .rd-dd-menu { transition: none; }
}
:focus-visible { outline: 2px solid #1f3d6e; outline-offset: 2px; }

/* ── Universities search bar (moved from the old hero; still drives script.js) ── */
.rd-uni-search { margin: 0 0 22px; padding: 18px; border-radius: 14px; background: #f6f7fb; border: 1px solid #e8ebf1; }
.rd-uni-search .hero-search-area { margin: 0; padding: 0; background: none; box-shadow: none; }
.rd-uni-search .search-wrap { background: #fff; border: 1px solid #e3e6ee; box-shadow: none; }
.rd-uni-search .search-field input { color: #1f2937; }
.rd-uni-search .filters { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.rd-uni-search .filters button { border: 1px solid #dfe3ec; background: #fff; color: #374151; border-radius: 999px; padding: 8px 16px; font: 500 13px var(--rd-font-body); cursor: pointer; }
.rd-uni-search .filters button:hover { border-color: var(--rd-orange); color: var(--rd-orange); }
html { scroll-padding-top: 76px; }
.rd-footer .rd-foot-brand img { mix-blend-mode: multiply; }

/* ── University / programme pages: same header language as the rest of the site ── */
.detail-topbar { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); z-index: 1000; }
.detail-topbar-inner { max-width: var(--rd-container); }
.detail-brand img { height: 49px; width: auto; object-fit: contain; }
.detail-nav-row { border-top: 1px solid #eef0f4; background: #fff; }
.detail-nav-row .nav-links { display: flex; align-items: center; gap: 22px; max-width: var(--rd-container); margin: 0 auto; padding: 0 24px; }
.detail-nav-row .nav-links > a, .detail-nav-row .rd-dd > button { font: 500 14px/1.2 var(--rd-font-body); color: var(--rd-nav); padding: 11px 0; }
.detail-nav-row .nav-links > a:hover, .detail-nav-row .rd-dd > button:hover { color: var(--rd-orange); }
.detail-nav-row { overflow: visible; }
.detail-profile.is-guest { background: linear-gradient(90deg, var(--rd-orange), var(--rd-orange-2)); color: #fff; border: 0; border-radius: 8px; font: 600 14px var(--rd-font-body); box-shadow: 0 3px 10px rgba(31,61,110,.3); }
.detail-profile.is-guest:hover { background: linear-gradient(90deg, #1f3d6e, var(--rd-orange)); color: #fff; }
.detail-search > button[type="submit"] { background: var(--rd-orange); }
.detail-search > button[type="submit"]:hover { background: #1f3d6e; }

/* keep hero copy clear of the left-edge tabs on small screens */
@media (max-width: 900px) { .rd-hero .rd-wrap { padding-left: 44px; padding-right: 20px; } }

/* ═══ Site-wide palette: map the original design tokens onto the reference palette ═══
   styles.css, university-detail.css, visa-assistance.css and the converted account pages all read
   these tokens, so remapping them here keeps every page in one visual language. */
:root {
  --bg: #f6f7fb;
  --primary: var(--sg-navy-700);          /* AA on white (5.2:1) for both text and white-on-fill buttons */
  --primary-dark: var(--sg-navy-900);
  --primary-light: var(--sg-navy-600);
  --primary-glow: rgba(31,61,110,.12);
  --primary-50: var(--sg-navy-50);
  --primary-100: var(--sg-navy-100);
  --primary-200: var(--sg-navy-200);
  --primary-300: #9fb5d6;
  --border: rgba(249,115,22,.14);
  --muted: #4b5563;
  --subtle: #6b7280;
  --hero-gradient: linear-gradient(135deg, #173054 0%, #173054 55%, #17212f 100%);
  --grad-blue: linear-gradient(135deg, #1f3d6e, #1b78ad);
}
body, button, input, select, textarea { font-family: var(--rd-font-body); }
h1, h2, h3, h4 { font-family: var(--rd-font-title); }
a { color: inherit; }

/* ── Language selector ── */
.rd-lang { position: relative; }
.rd-lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid #dfe3ec; border-radius: 8px; background: #fff; color: #3a3a3a; font: 500 13px var(--rd-font-body); cursor: pointer; }
.rd-lang-btn svg { color: #1f3d6e; }
.rd-lang-btn:hover { border-color: var(--rd-orange); }
.rd-lang-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 150px; padding: 6px; background: #fff; border: 1px solid #eef0f4; border-radius: 12px; box-shadow: 0 14px 34px rgba(15,23,42,.16); z-index: 1100; }
.rd-lang-menu[hidden] { display: none; }
.rd-lang-menu button { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: none; text-align: left; font: 500 14px var(--rd-font-body); color: #3a3a3a; cursor: pointer; }
.rd-lang-menu button:hover { background: #f2f6fb; color: var(--rd-orange); }
/* hide Google's injected toolbar */
body { top: 0 !important; }
.skiptranslate iframe, #goog-gt-tt, .goog-te-banner-frame { display: none !important; }
.goog-te-gadget { display: none !important; }
@media (max-width: 900px) { .rd-lang-btn span { display: none; } }

/* ── Reference parity: tall header at the top of the page, compact once scrolled ── */
.top-nav { padding: 12px 0; transition: padding .2s; }
.top-nav .nav-inner { height: auto; min-height: 62px; }
.top-nav .brand-logo { height: 62px; transition: height .2s; }
.top-nav.is-compact { padding: 5px 0; }
.top-nav.is-compact .brand-logo { height: 49px; }
.top-nav .nav-right { margin-left: auto; margin-right: 0; gap: 18px; }
.rd-updates-label { background: #3b3b3b; color: #fff; writing-mode: vertical-rl; transform: rotate(180deg); display: grid; place-items: center; font: 600 13px var(--rd-font-body); }

/* ── Mobile / tablet header (reference): top row = Institutions | Offices | language, second row = logo + menu ── */
@media (max-width: 900px) {
  .top-nav { padding: 0; }
  .top-nav .nav-inner { flex-wrap: wrap; row-gap: 0; padding: 0 14px; min-height: 0; gap: 0; }
  .top-nav .nav-links:not(.nav-right) { display: none; }
  .top-nav .nav-right { order: 1; display: flex; flex: 1 1 60%; justify-content: space-around; margin: 0; padding: 8px 0 4px; gap: 0; }
  .top-nav .rd-lang { order: 2; flex: 0 0 auto; padding: 6px 0 2px; }
  .top-nav .rd-lang-btn { height: 32px; }
  .top-nav .rd-lang-btn span { display: inline; }
  .top-nav .brand { order: 3; flex: 1 1 auto; padding: 4px 0 8px; border-top: 1px solid #eef0f4; margin-top: 4px; }
  .top-nav .auth-actions { order: 4; padding: 4px 0 8px; border-top: 1px solid #eef0f4; margin-top: 4px; gap: 10px; }
  .top-nav .hamburger-btn { order: 5; padding-top: 0; border-top: 0; margin: 4px 0 8px 10px; border: 1px solid #cfd4dc; border-radius: 6px; background: #fff; }
  .top-nav .brand-logo, .top-nav.is-compact .brand-logo { height: 46px; }
  .top-nav .register-link { display: none; }
  .top-nav .nav-right a { flex-direction: column; gap: 2px; font-size: 13px; }
  .rd-tab-guide { display: block !important; top: 360px !important; }
}
@media (max-width: 640px) {
  .rd-tab-portal { top: 215px !important; }
  .rd-tab-guide { top: 345px !important; }
  .rd-tab-apply { top: 280px !important; }
  .rd-tab { padding: 14px 7px; font-size: 10px; }
}

/* ── Mobile hero + finder parity (reference: compact hero, stacked Updates / Courses bars) ── */
@media (max-width: 900px) {
  .rd-finder .rd-updates-label, .rd-finder .rd-finder-label { writing-mode: horizontal-tb; transform: none; display: block; padding: 9px; text-align: center; font: 600 15px var(--rd-font-body); }
  .rd-finder .rd-updates-label { background: #4a4a4a; }
  .rd-finder .rd-finder-label { background: #000; }
}
@media (max-width: 640px) {
  .rd-hero { min-height: 0; padding: 26px 0 24px; }
  .rd-hero .rd-wrap { padding-left: 40px; padding-right: 14px; }
  .rd-hero h1 { font-size: 17px; line-height: 1.35; margin-bottom: 10px; max-width: none; }
  .rd-hero p { font-size: 13.5px; line-height: 1.55; margin-bottom: 16px; max-width: none; }
  .rd-btn-orange { height: 40px; padding: 0 18px; font-size: 13px; }
  .rd-cta-pill { white-space: nowrap; height: 46px; padding: 0 20px; font-size: 14px; }
  .rd-title { font-size: 28px; }
}

@media (max-width: 640px) { .rd-finder-form select, .rd-finder-form button { height: 50px; } }

/* Home application form: honest primary path + optional email fallback */
.rd-apply-hint { margin: 12px 0 0; text-align: center; font: 400 13px/1.5 var(--rd-font-body); color: #64748b; }
.rd-apply-mail { margin-top: 16px; padding: 12px 14px; border: 1px dashed #cdd3e3; border-radius: 12px; }
.rd-apply-mail summary { cursor: pointer; font: 500 14px var(--rd-font-body); color: #4b5563; }
.rd-apply-mail .row, .rd-apply-mail .full { margin-top: 12px; }
.rd-apply-secondary { width: 100%; height: 46px; margin-top: 12px; border: 1px solid #2a5192; border-radius: 10px; background: #fff; color: #1f3d6e; font: 600 15px var(--rd-font-body); cursor: pointer; }
.rd-apply-secondary:hover { background: #f1f4ff; }
@media (max-width: 640px) {
  .rd-qa summary { flex-direction: column; text-align: center; gap: 8px; }
  .rd-qa .ic { width: 56px; height: 56px; font-size: 26px; }
  .rd-qa .rd-caret { margin: 0; }
}


/* ═══ Accessibility pass ═══ contrast >= 4.5:1, larger hit areas, skip link, visible focus ═══ */
:root { --rd-orange-ink: var(--sg-navy-700); --rd-btn-from: var(--sg-navy-700); --rd-btn-to: var(--sg-navy-600); }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 5000; padding: 10px 16px; border-radius: 8px; background: #111827; color: #fff; font: 600 14px var(--rd-font-body); text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid #1f3d6e; outline-offset: 2px; }
.rd-hero :focus-visible, .rd-cta-band :focus-visible, .rd-split-left :focus-visible, .rd-footer :focus-visible { outline-color: #fff; }
/* orange used as TEXT must be the darker ink */
.top-nav .nav-links a.is-active, .rd-dd.is-active > button, .top-nav .nav-links a.nav-accent, .top-nav .nav-links a.nav-accent .nav-ico,
.top-nav .nav-links > a:hover, .rd-dd > button:hover, .rd-viewall:hover, .rd-foot-links a:hover, .rd-foot-contact a:hover, .rd-foot-legal a:hover,
.rd-faq-answer a, .rd-qa-a a, .rd-sm-group a:hover, .rd-office-list a, .rd-lang-menu button:hover, .rd-dd-menu a:hover,
.rd-eyebrow, .rd-chips a:hover, .detail-breadcrumbs a:hover, .rd-faq-tile:hover, .rd-faq-tile[aria-expanded="true"] { color: var(--rd-orange-ink); }
.rd-office-list li > svg { color: var(--rd-orange-ink); }
/* white-on-orange controls */
.rd-btn-orange, .top-nav .login-btn, .detail-profile.is-guest, .rd-explore:hover, .rd-chips a:hover { background: linear-gradient(90deg, var(--rd-btn-from), var(--rd-btn-to)); color: #fff; }
.rd-chips a:hover { border-color: var(--rd-btn-from); }
.rd-btn-red { background: #1f3d6e; }
.rd-tab-guide { background: linear-gradient(180deg, #8a6a2f, #7d5f27); }
.rd-tab-apply { background: linear-gradient(180deg, #1f3d6e, #1f3d6e); }
.rd-cta-pill { background: linear-gradient(90deg, #1f3d6e, #2a5192); }
/* small grey captions */
.rd-course small, .rd-card .rd-cap small, .rd-uni .rd-cap small { color: #6b7280; }
/* larger touch targets for header links */
.top-nav .nav-links > a, .rd-dd > button { padding: 14px 4px; }
.rd-chips a { padding: 11px 18px; }
.rd-foot-links a { padding: 10px 12px; }
.rd-foot-legal a { display: inline-block; padding: 10px 8px; }
.rd-lang-btn { height: 40px; }
@media (max-width: 900px) { .top-nav .nav-right a { padding: 10px 6px; } }

/* Tablet header: keep "Institutions | Offices | language" on the first row at every width <= 900px */
@media (max-width: 900px) {
  .top-nav .nav-right { flex: 0 0 calc(100% - 150px); }
  .top-nav .rd-lang { flex: 0 0 150px; display: flex; justify-content: flex-end; }
  .top-nav .brand { flex: 1 1 0; }
}
@media (max-width: 900px) { .top-nav .brand { flex: 1 1 auto; min-width: 150px; } .top-nav .brand-logo, .top-nav.is-compact .brand-logo { height: 46px; width: auto; max-width: none; } }

/* Announcement popups */
.sg-popups{position:fixed;left:16px;bottom:84px;z-index:60;max-width:min(380px,calc(100vw - 32px))}
.sg-popup{position:relative;display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #d6dfdf;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:16px 36px 16px 16px}
.sg-popup[hidden]{display:none}
.sg-popup img{width:72px;height:72px;object-fit:cover;border-radius:8px;flex:none}
.sg-popup p{margin:4px 0 10px;font-size:14px;color:#3b4a4a}
.sg-popup .rd-btn-orange{display:inline-block;padding:8px 14px;font-size:14px}
.sg-popup-x{position:absolute;top:6px;right:8px;border:0;background:none;font-size:24px;line-height:1;cursor:pointer;color:#4b5b5b}
