@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --blue: #126287;
  --navy: #0c4d7f;
  --orange: #ffe402;
  --ink: #0c4d7f;
  --muted: #4d4d4d;
  --sky: #2fa3da;
  --wash: #f1f8fc;
  --line: #d5e6ee;
}
body { color: var(--muted); font-family: Poppins, sans-serif; }
h1, h2, h3 { color: var(--navy); font-family: Poppins, sans-serif; font-weight: 600; letter-spacing: -.035em; }
button, input, select, textarea { font-family: inherit; }
[dir=rtl] body, [dir=rtl] h1, [dir=rtl] h2, [dir=rtl] h3 { font-family: 'Noto Sans Arabic', Tahoma, sans-serif; letter-spacing: 0; }
header.wrap { background: white; color: var(--navy); min-height: 96px; }
header .logo { width: 164px; height: auto; display: block; }
header .region { color: var(--blue); border-color: var(--line); }
.top, footer, .catalogue-note { background: var(--navy); }
.about { background: var(--blue); }
header.wrap { border-block-end: 3px solid var(--orange); }
.about h1, .about h2, .catalogue-note h2, footer h3 { color: white; }
.about p, .about .large, .catalogue-note p, .footer-grid p, .footer-bottom, .footer-links a { color: #eaf6fc; }
.about .eyebrow, .about a, .footer-grid a:hover, .footer-links a:hover { color: var(--orange); }
footer .footer-grid img { padding: 8px; width: 155px; border-radius: 5px; }
.eyebrow, .number, .resource-index { color: var(--blue); }
.button { background: var(--orange); color: var(--navy); border-radius: 5px; }
.button:hover { background: var(--navy); color: white; transform: translateY(-1px); }
.brand-hero .button:hover { background: white; color: var(--navy); }
.button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.course-menu, .pathway-tool, .admissions-note, .catalogue-grid article { border-color: var(--line); border-block-start-color: var(--blue); }
.catalogue-grid article { border-block-start-width: 3px; }
.courses article::before { background: var(--blue); }
.admissions-note, [dir=rtl] .admissions-note { border-inline-start-color: var(--blue); }
.coverage-section, .catalogue-hero, .registration, .resources-section, .pathway-section, .compact-cta { background: var(--wash); }
.country-card, .courses article, .admissions-grid article, .registration form, .resource-grid > a { border-color: var(--line); }
.country-code, .coverage-intro span { color: var(--navy); background: var(--wash); }
.register-grid li::before { color: var(--navy); }

.brand-hero { background: var(--blue); color: white; }
.brand-hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(30px, 5vw, 74px); padding-block: clamp(38px, 6vw, 78px); }
.brand-hero h1 { color: white; font-size: clamp(38px, 5.2vw, 72px); line-height: 1.08; margin: 0; max-width: 13ch; }
.brand-hero h1 span { color: var(--orange); }
.brand-hero .eyebrow { color: white; margin-block-end: 14px; }
.brand-hero p:not(.eyebrow) { color: white; max-width: 45ch; font-size: clamp(14px, 1.4vw, 17px); margin-block: 22px 26px; }
.brand-hero .actions { align-items: center; flex-direction: row; }
.brand-hero .text-link { color: white; }
.brand-hero figure { margin: 0; overflow: hidden; border-radius: 5px 5px 36px 5px; border-block-end: 5px solid var(--blue); }
.brand-hero img { display: block; width: 100%; height: auto; aspect-ratio: 1.28; object-fit: cover; }
[dir=rtl] .brand-hero h1 { font-size: clamp(33px, 4.5vw, 59px); line-height: 1.52; max-width: none; }
[dir=rtl] .brand-hero figure { border-radius: 5px 5px 5px 36px; }
.home-courses { padding-block: clamp(44px, 6vw, 76px); }
.home-courses .section-heading { margin-bottom: 26px; }
.home-courses .courses article { padding-block: 22px; }
.home-courses .courses h3 { margin-block-start: 0; }
.home-courses .courses p { margin-block-end: 18px; }
.compact-cta { border-block-start: 1px solid var(--line); }
.compact-cta .eyebrow { display: none; }
@media (max-width: 700px) {
  header .logo { width: 135px; }
  .brand-hero .wrap { grid-template-columns: 1fr; gap: 28px; }
  .brand-hero h1 { font-size: clamp(36px, 9vw, 53px); }
  .brand-hero img { aspect-ratio: 1.6; }
}


/* The shared palette uses all five iTTi brand colours. */
.brand-hero { background: linear-gradient(125deg, var(--navy), var(--blue)); }
.brand-hero figure { border-block-end-color: var(--sky); }
.brand-hero img { aspect-ratio: 1.5; }
header.wrap { border-block-end-color: var(--sky); }
.course-menu, .pathway-tool, .catalogue-grid article { border-block-start-color: var(--sky); }
.courses article::before { background: var(--sky); }
.admissions-note, [dir=rtl] .admissions-note { border-inline-start-color: var(--sky); }