/* RIPS website styles. Mobile first, WCAG 2.1 AA, RTL-ready (logical properties only).
   Design rules: Doc 06 Q27 (type 16px/1.5, headings 30/24/20/18, 4px spacing base, radius 6px, 44px targets). */

/* ---------- Fonts ----------
   Display serif for headings (approved 17 Oct 2026, CR-01 item 3); body text stays the system sans-serif
   (Doc 06 Q27). Instrument Serif, SIL Open Font License (assets/fonts/OFL-instrument-serif.txt). */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-serif-400.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-serif-400-italic.woff2") format("woff2"); }

/* ---------- Tokens ----------
   Palette PROPOSED from the logo's navy and gold, pending the Director's sign-off (Doc 06 Q05, Q27).
   Swap these values to re-theme the whole site; every pair below was checked for contrast. */
:root {
  --c-brand: #0d2740;        /* navy from the logo */
  --c-brand-2: #163a5f;
  --c-accent: #e1c482;       /* gold from the logo; only on navy or as a fill behind navy text */
  --c-gold-ink: #8a6a1f;     /* gold for small text and accents on white: 5:1 */
  --c-action: #e1c482;       /* primary action (Enquire) fill */
  --c-action-ink: #0d2740;   /* text on the action fill: 10:1 */
  --c-action-hover: #ecd6a2;
  --c-ink: #1b2430;          /* body text on white: 15:1 */
  --c-muted: #4d5966;        /* secondary text on white: 7:1 */
  --c-line: #c9d1da;
  --c-line-strong: #6b7785;  /* input borders: 4.6:1 */
  --c-bg: #ffffff;
  --c-bg-soft: #f3f5f8;
  --c-link: #1a4f86;         /* 8:1 on white */
  --c-focus: #1a4f86;
  --c-whatsapp: #0f7a35;     /* white text 5.4:1 */
  --c-success: #1d6b36;
  --c-success-bg: #e6f4ea;
  --c-warning: #7a4b00;
  --c-warning-bg: #fff4dc;
  --c-error: #b3261e;
  --c-error-bg: #fdecea;
  --c-tbc: #6a3d00;
  --c-tbc-bg: #fff1c2;

  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --font-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif; /* for /ur/ pages later (OD-11) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --radius: 6px;
  --target: 44px;
  --max: 72rem;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-block-start: 88px; }
body { margin: 0; font: 1rem/1.5 var(--font); color: var(--c-ink); background: var(--c-bg); overflow-wrap: break-word; }
:lang(ur) { font-family: var(--font-urdu); line-height: 2; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 var(--s3); color: var(--c-brand); }
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em; line-height: 1.1; }
h1 em, h2 em { font-style: italic; color: var(--c-gold-ink, inherit); }
h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; margin-block-start: var(--s6); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
p, ul, ol, dl, table { margin: 0 0 var(--s4); }
a { color: var(--c-link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.site-footer :focus-visible, .on-dark :focus-visible { outline-color: #fff; }
[hidden] { display: none !important; } /* filters and the form hide items that are styled flex or grid */
.visually-hidden {
  position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.wrap { max-inline-size: var(--max); margin-inline: auto; padding-inline: var(--s4); }
main { display: block; padding-block: var(--s5) var(--s7); }
main:focus { outline: none; }
.lead { font-size: 1.125rem; color: var(--c-muted); }
.muted { color: var(--c-muted); }
.small { font-size: .875rem; }

/* Visible placeholder for unconfirmed facts: [TO CONFIRM — …, OD-xx] */
.tbc { background: var(--c-tbc-bg); color: var(--c-tbc); padding: 0 var(--s1); border-radius: 3px; font-size: .9375em; font-weight: 600; }
.sample-tag { display: inline-block; background: var(--c-tbc-bg); color: var(--c-tbc); font-size: .75rem; font-weight: 700; letter-spacing: .04em; padding: 0 var(--s2); border-radius: 3px; vertical-align: middle; }

/* ---------- Skip link ---------- */
.skip-link { position: absolute; inset-inline-start: var(--s2); inset-block-start: -10rem; z-index: 100; background: #fff; color: var(--c-brand); padding: var(--s3) var(--s4); border-radius: var(--radius); font-weight: 700; }
.skip-link:focus { inset-block-start: var(--s2); }

/* ---------- Header ----------
   A white bar that stays at the top of the screen (CR-02). Below 1024px the menu drops down under it. */
.site-header { position: relative; z-index: 40; background: #fff; color: var(--c-brand); border-block-end: 1px solid var(--c-line); box-shadow: 0 2px 12px rgba(13,39,64,.06); }
/* Without JavaScript the phone menu is a wrapped list inside the header, so it sticks only as one short row. */
.js .site-header { position: sticky; inset-block-start: 0; }
.header-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); min-block-size: 68px; padding-block: var(--s2); }
.brand { display: flex; align-items: center; gap: var(--s2); color: var(--c-brand); text-decoration: none; margin-inline-end: auto; min-block-size: var(--target); }
.brand img { inline-size: 44px; block-size: auto; }
.brand-name { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name strong { font-size: 1.125rem; letter-spacing: .08em; }
.brand-name span { font-size: .75rem; color: var(--c-muted); }
.brand-long { display: none; }
.header-enquire { padding-inline: var(--s3); }
.menu-toggle { display: none; }
.js .menu-toggle { display: inline-flex; align-items: center; gap: var(--s2); min-block-size: var(--target); padding-inline: var(--s3); background: #fff; color: var(--c-brand); border: 1px solid var(--c-line-strong); border-radius: var(--radius); font: inherit; font-weight: 600; cursor: pointer; }
.menu-icon, .menu-icon::before { display: block; inline-size: 18px; block-size: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease; }
.menu-icon { position: relative; transform: translateY(-3px); }
.menu-icon::before { content: ""; position: absolute; inset-block-start: 6px; }
.menu-toggle[aria-expanded="true"] .menu-icon { transform: translateY(0) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::before { transform: translateY(-6px) rotate(-90deg); }
.nav-list { list-style: none; margin: 0; padding: 0; }
.site-nav a { display: flex; align-items: center; min-block-size: var(--target); padding-inline: var(--s3); color: var(--c-brand); text-decoration: none; border-radius: var(--radius); font-weight: 600; }
.site-nav a:hover { background: var(--c-bg-soft); }
.site-nav a[aria-current="page"], .site-nav a.is-section { box-shadow: inset 0 -3px 0 var(--c-accent); }
/* No JavaScript: the menu is a wrapped row under the logo. */
.site-nav { inline-size: 100%; order: 5; padding-block-end: var(--s2); }
.nav-list { display: flex; flex-wrap: wrap; gap: 0 var(--s1); }
/* With JavaScript, below 1024px: a list that drops down under the header. */
@media (max-width: 1023px) {
  .js .site-nav {
    display: none; position: absolute; inset-inline: 0; inset-block-start: 100%; order: 0; inline-size: auto;
    padding: var(--s2) var(--s4) var(--s4); background: #fff; border-block-end: 1px solid var(--c-line);
    box-shadow: 0 16px 28px rgba(13,39,64,.14); max-block-size: calc(100vh - 68px); overflow-y: auto;
  }
  .js .site-nav.is-open { display: block; }
  .js .nav-list { flex-direction: column; gap: 0; }
  .js .site-nav li + li { border-block-start: 1px solid var(--c-line); }
  .js .site-nav a { min-block-size: 48px; padding-inline: var(--s3); border-radius: 0; border-inline-start: 4px solid transparent; }
  .js .site-nav a[aria-current="page"], .js .site-nav a.is-section { box-shadow: none; border-inline-start-color: var(--c-accent); background: var(--c-bg-soft); }
}
@media (min-width: 600px) { .brand-long { display: inline; } }
/* 1024–1439px: the full name gives way so the menu, icons and Enquire stay on one row. */
.site-nav a { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1439px) { .brand-long { display: none; } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-nav a { padding-inline: var(--s2); }
}
@media (min-width: 1024px) {
  .site-header { position: sticky; inset-block-start: 0; }
  .js .menu-toggle { display: none; }
  .header-bar { flex-wrap: nowrap; }
  .site-nav { inline-size: auto; order: 0; padding: 0; }
  .nav-list { flex-wrap: nowrap; }
  .nav-enquire { display: none; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-block-size: var(--target); padding: var(--s2) var(--s4); border-radius: var(--radius); border: 2px solid transparent; font: inherit; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; }
.btn-primary { background: var(--c-action); color: var(--c-action-ink); border-color: var(--c-action); }
.btn-primary:hover { background: var(--c-action-hover); }
.btn-primary:active, .btn-secondary:active { transform: translateY(1px); }
.btn-secondary { background: #fff; color: var(--c-brand); border-color: var(--c-brand); }
.btn-secondary:hover { background: var(--c-bg-soft); }
.on-dark .btn-secondary { background: transparent; color: #fff; border-color: #fff; }
.btn-whatsapp { background: var(--c-whatsapp); color: #fff; border-color: var(--c-whatsapp); }
.btn-text { background: none; border: 0; padding-inline: 0; color: var(--c-link); text-decoration: underline; font-weight: 600; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .7; cursor: progress; }
.btn-block { display: flex; inline-size: 100%; }
/* A trailing "(opens …)" or "(PDF, …)" note wraps under the label instead of becoming a second column. */
.btn:has(> .small) { flex-wrap: wrap; column-gap: .35em; row-gap: 0; }
.btn > .small { font-weight: 400; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block: var(--s4); }
.spinner { inline-size: 1em; block-size: 1em; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs ol { list-style: none; padding: 0; margin: 0 0 var(--s4); display: flex; flex-wrap: wrap; gap: var(--s1); font-size: .9375rem; }
.breadcrumbs li + li::before { content: "›"; margin-inline-end: var(--s1); color: var(--c-muted); }
[dir="rtl"] .breadcrumbs li + li::before { content: "‹"; }
.breadcrumbs a { display: inline-block; padding-block: var(--s2); }
.breadcrumbs [aria-current="page"] { color: var(--c-muted); padding-block: var(--s2); display: inline-block; }

/* ---------- Layout helpers ---------- */
.grid { display: grid; gap: var(--s4); grid-template-columns: 1fr; padding: 0; list-style: none; }
@media (min-width: 600px) { .grid-2, .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.section { margin-block: var(--s7); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.section-head h2 { margin-block-start: 0; }
.panel { background: var(--c-bg-soft); border-radius: var(--radius); padding: var(--s5); }
.two-col { display: grid; gap: var(--s5); }
@media (min-width: 1024px) { .two-col { grid-template-columns: 2fr 1fr; align-items: start; } }

/* ---------- Card (faculty) ---------- */
.card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; block-size: 100%; }
.card-body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.card-body h3 { margin: 0; font-size: 1.125rem; }
.card-body h3 a { text-decoration: none; }
.card-body h3 a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card:hover { border-color: var(--c-brand); }
.card:focus-within { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.card-body h3 a:focus-visible { outline: none; }
.card-meta { margin: 0; color: var(--c-muted); font-size: .9375rem; }

/* ---------- Intake badge (status by words, never colour alone: Doc 06 Q24) ---------- */
.badge { display: inline-flex; align-items: center; gap: var(--s1); padding: 2px var(--s2); border-radius: 999px; font-size: .8125rem; font-weight: 700; border: 1px solid currentColor; background: #fff; white-space: nowrap; }
.badge::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; }
.badge-open { color: var(--c-success); background: var(--c-success-bg); }
.badge-closing-soon { color: var(--c-warning); background: var(--c-warning-bg); }
.badge-closed, .badge-withdrawn { color: var(--c-error); background: var(--c-error-bg); }
.badge-upcoming, .badge-not-offered { color: var(--c-muted); background: var(--c-bg-soft); }

/* ---------- Key facts ---------- */
.key-facts { border: 2px solid var(--c-brand); border-radius: var(--radius); padding: var(--s4); margin-block: var(--s4); }
.key-facts h2 { margin: 0 0 var(--s3); font-size: 1.125rem; }
.key-facts dl { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: var(--s2) var(--s4); margin: 0; }
.key-facts dt { font-weight: 700; color: var(--c-muted); }
.key-facts dd { margin: 0; }

/* ---------- Notice row ---------- */
.notice-list { list-style: none; padding: 0; margin: 0 0 var(--s4); border-block-start: 1px solid var(--c-line); }
.notice-row { border-block-end: 1px solid var(--c-line); padding-block: var(--s3); display: grid; gap: var(--s1); }
.notice-row h2, .notice-row h3 { font-family: var(--font); font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; margin: 0; }
.notice-row p { margin: 0; color: var(--c-muted); font-size: .9375rem; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.notice-type { font-weight: 700; color: var(--c-brand); }

/* ---------- Filters ---------- */
.filters { display: grid; gap: var(--s3); grid-template-columns: 1fr; margin-block: var(--s4); padding: var(--s4); background: var(--c-bg-soft); border-radius: var(--radius); border: 0; }
.filters legend { font-weight: 700; padding: 0; margin-block-end: var(--s2); float: inline-start; inline-size: 100%; }
@media (min-width: 600px) { .filters { grid-template-columns: repeat(3, 1fr) auto; align-items: end; } .filters legend { grid-column: 1 / -1; } }
.filter-count { font-weight: 600; margin-block: var(--s2); }

/* ---------- Fee table → stacked cards below 600px (Doc 06 Q22) ---------- */
.fee-table { inline-size: 100%; border-collapse: collapse; }
.fee-table caption { text-align: start; font-weight: 700; color: var(--c-brand); padding-block-end: var(--s2); font-size: 1.125rem; }
.fee-table th, .fee-table td { text-align: start; padding: var(--s3); border-block-end: 1px solid var(--c-line); vertical-align: top; }
.fee-table thead th { background: var(--c-brand); color: #fff; }
.fee-table td.amount, .fee-table th.amount { text-align: end; }
@media (max-width: 599px) {
  .fee-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .fee-table, .fee-table caption, .fee-table tbody, .fee-table tr, .fee-table th, .fee-table td { display: block; inline-size: 100%; }
  .fee-table tr { border: 1px solid var(--c-line); border-radius: var(--radius); margin-block-end: var(--s3); padding: var(--s2) var(--s3); }
  .fee-table th[scope="row"] { border: 0; padding: var(--s1) 0 var(--s2); font-size: 1.0625rem; color: var(--c-brand); }
  .fee-table td { display: flex; justify-content: space-between; gap: var(--s3); border: 0; border-block-start: 1px solid var(--c-line); padding: var(--s2) 0; }
  .fee-table td::before { content: attr(data-label); font-weight: 700; color: var(--c-muted); }
  .fee-table td.amount { text-align: end; }
}

/* ---------- Forms ---------- */
.form { max-inline-size: 36rem; }
.field { margin-block-end: var(--s5); }
.field label, .field legend { display: block; font-weight: 700; margin-block-end: var(--s1); }
.req { color: var(--c-error); }
.opt { font-weight: 400; color: var(--c-muted); }
.hint { display: block; color: var(--c-muted); font-size: .9375rem; margin-block-end: var(--s2); }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field input[type="number"], .field select, .field textarea {
  display: block; inline-size: 100%; min-block-size: var(--target); padding: var(--s2) var(--s3); font: inherit; color: var(--c-ink);
  background: #fff; border: 2px solid var(--c-line-strong); border-radius: var(--radius);
}
.field textarea { min-block-size: 7rem; resize: vertical; }
.field [aria-invalid="true"] { border-color: var(--c-error); }
.field-error { display: flex; gap: var(--s1); align-items: flex-start; color: var(--c-error); font-weight: 600; margin-block-start: var(--s1); }
.field-error .icon { fill: currentColor; margin-block-start: 2px; }
.check { display: flex; gap: var(--s3); align-items: flex-start; }
.check input { inline-size: 24px; block-size: 24px; margin: 0; flex: none; margin-block-start: 2px; accent-color: var(--c-brand); }
.check label { font-weight: 400; margin: 0; }
.honeypot { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.counter { font-size: .875rem; color: var(--c-muted); text-align: end; margin-block-start: var(--s1); }
.required-note { color: var(--c-muted); }
fieldset.field { border: 0; padding: 0; margin-inline: 0; }

/* ---------- Alerts and error summary ---------- */
.alert { border-inline-start: 6px solid; border-radius: var(--radius); padding: var(--s4); margin-block: var(--s4); }
.alert > :last-child { margin-block-end: 0; }
.alert-title { font-weight: 700; margin-block-end: var(--s2); }
.alert-info { border-color: var(--c-link); background: #e9f1fa; }
.alert-success { border-color: var(--c-success); background: var(--c-success-bg); }
.alert-warning { border-color: var(--c-warning); background: var(--c-warning-bg); }
.alert-error { border-color: var(--c-error); background: var(--c-error-bg); }
.error-summary:focus { outline: 3px solid var(--c-error); outline-offset: 2px; }
.error-summary ul { margin: 0; padding-inline-start: var(--s5); }
.error-summary a { color: var(--c-error); font-weight: 600; }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: var(--s6) var(--s4); border: 2px dashed var(--c-line); border-radius: var(--radius); color: var(--c-muted); }
.empty-state .icon { inline-size: 32px; block-size: 32px; fill: var(--c-muted); display: block; margin: 0 auto var(--s2); }
.empty-state p { margin-block-end: var(--s2); }

/* ---------- FAQ ---------- */
.faq details { border-block-end: 1px solid var(--c-line); }
.faq summary { cursor: pointer; font-weight: 700; padding-block: var(--s3); min-block-size: var(--target); color: var(--c-brand); }
.faq details > div { padding-block-end: var(--s3); }

/* ---------- Pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; padding: 0; }
.pagination button { min-inline-size: var(--target); min-block-size: var(--target); border: 2px solid var(--c-brand); background: #fff; color: var(--c-brand); border-radius: var(--radius); font: inherit; font-weight: 700; cursor: pointer; }
.pagination button[aria-current="page"] { background: var(--c-brand); color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-brand); color: #dbe3ec; padding-block: var(--s6) calc(var(--s7) + var(--s6)); font-size: .9375rem; }
.site-footer h2 { color: var(--c-accent); font-family: var(--font); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--s2); }
.site-footer a { color: #fff; }
.site-footer .brand-name span { color: var(--c-accent); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li a { display: inline-block; padding-block: var(--s2); }
.footer-grid { display: grid; gap: var(--s5); }
@media (min-width: 600px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.site-footer .tbc { background: #3a3110; color: #ffe39a; }
.footer-legal { margin-block-start: var(--s5); padding-block-start: var(--s4); border-block-start: 1px solid rgba(255,255,255,.2); }

/* ---------- Floating WhatsApp button ---------- */
.whatsapp-float { position: fixed; inset-inline-end: var(--s4); inset-block-end: var(--s4); z-index: 30; display: inline-flex; align-items: center; gap: var(--s2); min-block-size: 48px; padding-inline: var(--s4); border-radius: 999px; background: var(--c-whatsapp); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.whatsapp-float:hover { background: #0b6229; }
.whatsapp-float .icon { inline-size: 24px; block-size: 24px; }

/* ---------- Text pages ---------- */
.prose { max-inline-size: 42rem; }
.prose li { margin-block-end: var(--s2); }
.local-nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s5); }
.local-nav a { display: inline-flex; align-items: center; min-block-size: var(--target); padding-inline: var(--s3); border: 1px solid var(--c-line); border-radius: 999px; text-decoration: none; }
.local-nav a[aria-current="page"] { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.last-updated { color: var(--c-muted); font-size: .9375rem; margin-block-start: var(--s6); }
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li { counter-increment: step; position: relative; padding-inline-start: 3rem; margin-block-end: var(--s4); min-block-size: 2.25rem; }
.steps li::before { content: counter(step); position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: var(--c-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }

/* ---------- Extra buttons ---------- */
.btn-lg { min-block-size: 52px; padding-inline: var(--s5); font-size: 1.0625rem; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn-navy { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.btn-navy:hover { background: var(--c-brand-2); }
.btn-link { background: none; border-color: transparent; padding-inline: var(--s2); color: var(--c-link); }
.btn-link:hover { text-decoration: underline; }
.on-dark .btn-link { color: var(--c-accent); }
.eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-gold-ink); margin: 0 0 var(--s2); }
.on-dark .eyebrow { color: var(--c-accent); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: #fff; }
.on-dark h1 em, .on-dark h2 em { color: var(--c-accent); }

/* ---------- Light-page sections ---------- */
.home main { padding: 0; }
.band { padding-block: var(--s7); }
.band-soft { background: var(--c-bg-soft); }
.band h2 { font-size: 1.875rem; margin: 0; }
@media (min-width: 1024px) { .band { padding-block: 88px; } .band h2 { font-size: 2.75rem; } }
.section-head { margin-block-end: var(--s5); align-items: flex-end; }
.see-all { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: var(--s1); min-block-size: var(--target); font-weight: 700; text-decoration: none; }
.see-all:hover { text-decoration: underline; }

.program-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .program-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .program-grid { grid-template-columns: repeat(3, 1fr); } }
.program-card { position: relative; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); background: #fff; border: 1px solid var(--c-line); border-radius: 12px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.program-card:hover { border-color: var(--c-brand); box-shadow: 0 12px 28px rgba(13,39,64,.12); transform: translateY(-2px); }
.program-card:focus-within { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.program-icon-wrap { display: inline-flex; align-items: center; justify-content: center; inline-size: 56px; block-size: 56px; border-radius: 50%; background: var(--c-brand); color: var(--c-accent); margin-block-end: var(--s2); }
.program-card h3 { margin: 0; font-size: 1.1875rem; }
.program-card h3 a { color: var(--c-brand); text-decoration: none; }
.program-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.program-card h3 a:focus-visible { outline: none; }
.program-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: auto 0 0; padding-block-start: var(--s2); }


/* About: text with campus photos beside it on wide screens, after it on phones. */
.about-layout { display: grid; gap: var(--s6); }
.about-photos { display: grid; gap: var(--s5); align-content: start; }
.about-photos figure { margin: 0; }
.about-photos img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.about-photos figcaption { margin-block-start: var(--s2); font-size: .875rem; color: var(--c-muted); }
.about-photos .photo-note { margin: 0; }
@media (min-width: 1024px) {
  .about-layout { grid-template-columns: minmax(0, 42rem) minmax(0, 1fr); gap: var(--s7); }
  .about-photos { padding-block-start: var(--s6); }
}

.photo-note { margin: var(--s5) 0 0; font-size: .875rem; color: var(--c-muted); }

/* Section intros and fact grids (Why RIPS? page). */
.section-intro { text-align: center; max-inline-size: 44rem; margin: 0 auto var(--s6); }
.section-intro h2 { margin: 0; }
.feature-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 600px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s6) var(--s5); } }
.feature-grid li { padding-block-start: var(--s4); border-block-start: 3px solid var(--c-accent); }
.feature-grid h3 { margin: 0 0 var(--s2); font-size: .9375rem; font-weight: 700; }
.feature-grid p { margin: 0; color: var(--c-muted); }

.footer-tagline { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--c-accent); }

/* ---------- Cinematic pages (CR-04): Home and Why RIPS? ----------
   ISL's homepage layout (CR-03 permission) in the colours of the RIPS logo: deep navy sections with its
   gold. Scoped to body.cine-page so every other page keeps the light theme. Contrast: --x-text on
   --x-deep 16:1, --x-muted on --x-navy 8:1, --x-gold on --x-navy 9:1, --x-navy on --x-gold 9:1.
   Headings use Poppins (SIL Open Font License, assets/fonts/OFL-poppins.txt). */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/poppins-600.woff2") format("woff2"); }
.cine-page {
  --x-deep: #051f3a; --x-navy: #0d2740; --x-navy-2: #17395e; --x-bar: #0d2740;
  --x-gold: #e1c482; --x-gold-2: #c9a961; --x-gold-hi: #f3e2b4; --x-line: rgba(225,196,130,.38);
  --x-text: #f5f2ea; --x-muted: #c3ccd6;
  --font-head: "Poppins", var(--font);
  background: var(--x-deep); color: var(--x-text);
}
.cine-page main { padding: 0; }
.cine-page :focus-visible { outline-color: var(--x-gold); }
.cine-page a { color: var(--x-gold); }
.cine-page h1, .cine-page h2, .cine-page h3 { color: var(--x-text); font-family: var(--font-head); font-weight: 600; }

/* Slim header bar: crest and gold name on the left, a quiet row of links on the right */
.cine-page .site-header { background: var(--x-bar); color: var(--x-text); border-block-end: 1px solid rgba(225,196,130,.18); box-shadow: none; }
.cine-page .header-bar { min-block-size: 64px; padding-block: var(--s1); }
.cine-page .brand-name strong { color: var(--x-gold); font-family: var(--font-head); font-weight: 600; letter-spacing: .12em; }
.cine-page .brand-name span { color: var(--x-gold); text-transform: uppercase; letter-spacing: .08em; font-size: .6875rem; }
.cine-page .site-nav a { color: var(--x-text); font-weight: 400; font-size: .9375rem; }
.cine-page .site-nav a:hover { background: transparent; color: var(--x-gold); }
.cine-page .site-nav a[aria-current="page"], .cine-page .site-nav a.is-section { box-shadow: none; color: var(--x-gold); }
.cine-page .header-icon { color: var(--x-gold); border-color: var(--x-line); }
.cine-page .header-enquire { background: transparent; color: var(--x-gold); border: 2px solid var(--x-gold); border-radius: 999px; }
.cine-page .header-enquire:hover { background: var(--x-gold); color: var(--x-navy); }
.js .cine-page .menu-toggle { background: transparent; color: var(--x-text); border-color: var(--x-line); }
@media (max-width: 1023px) {
  .js .cine-page .site-nav { background: var(--x-bar); border-block-end-color: var(--x-line); }
  .js .cine-page .site-nav li + li { border-block-start-color: rgba(255,255,255,.1); }
  .js .cine-page .site-nav a[aria-current="page"], .js .cine-page .site-nav a.is-section { background: var(--x-navy); border-inline-start-color: var(--x-gold); }
}
@media (min-width: 1024px) and (max-width: 1279px) { .cine-page .site-nav a { font-size: .875rem; } }

.cine-page .whatsapp-float { color: #fff; }
/* Footer on cinematic pages */
.cine-page .site-footer { background: var(--x-bar); border-block-start: 1px solid rgba(225,196,130,.18); }

/* Scroll reveals (home.js adds .reveal-on only when motion is allowed) */
.reveal-on .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal-on .reveal.is-in { opacity: 1; transform: none; }

/* Why RIPS? page */
.page-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-block-size: 46vh; overflow: hidden; }
.page-hero-media img { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,31,58,.5), rgba(5,31,58,.94)); }
.page-hero-body { inline-size: 100%; padding-block: 48px; }
.page-hero h1 { font-size: 2.5rem; letter-spacing: .06em; text-transform: uppercase; color: var(--x-gold); margin: 0 0 var(--s2); }
.page-hero .hero-lead { margin: 0; color: var(--x-text); font-family: var(--font); font-style: normal; font-size: .875rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
.cine-page .breadcrumbs, .cine-page .breadcrumbs a { color: var(--x-muted); }
@media (min-width: 1024px) { .page-hero { min-block-size: 56vh; } .page-hero h1 { font-size: 4rem; } }
.cine-page .band { background: var(--x-deep); }
.cine-page .band-soft { background: var(--x-navy); }
.why-intro { max-inline-size: 46rem; margin: 0 auto; text-align: center; font-size: 1.25rem; line-height: 1.6; color: var(--x-text); }
.why-facts { list-style: none; padding: 0; margin: 48px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); max-inline-size: 46rem; }
.why-facts li { display: grid; gap: var(--s1); text-align: center; padding-inline: var(--s3); }
.why-facts li + li { border-inline-start: 1px solid var(--x-line); }
.why-facts strong { font-family: var(--font-head); font-size: 2.5rem; font-weight: 600; line-height: 1; color: var(--x-gold); }
.why-facts span { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--x-muted); }
.cine-page .section-intro { text-align: center; max-inline-size: 46rem; margin: 0 auto 48px; }
.cine-page .section-intro .eyebrow { color: var(--x-gold); }
.cine-page .section-intro h2 { font-size: 2rem; letter-spacing: .04em; text-transform: uppercase; }
@media (min-width: 1024px) { .cine-page .section-intro h2 { font-size: 3rem; } }
.reason-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 56px; }
.reason { display: grid; gap: var(--s5); align-items: center; scroll-margin-block-start: 80px; }
.reason img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.reason-num { margin: 0 0 var(--s2); font-family: var(--font-head); font-size: 2.5rem; font-weight: 600; line-height: 1; color: var(--x-gold); }
.reason h3 { margin: 0 0 var(--s3); font-size: 1.375rem; letter-spacing: .04em; text-transform: uppercase; }
.reason p { color: var(--x-muted); font-size: 1.0625rem; }
.reason .see-all { color: var(--x-gold); }
@media (min-width: 900px) {
  .reason { grid-template-columns: 1.15fr 1fr; gap: 64px; }
  .reason:nth-child(even) img { order: 2; }
  .reason h3 { font-size: 1.75rem; }
}
.cine-page .feature-grid li { border-block-start-color: var(--x-gold); }
.cine-page .feature-grid h3 { color: var(--x-text); letter-spacing: .1em; text-transform: uppercase; font-size: .9375rem; }
.cine-page .feature-grid p { color: var(--x-muted); }
.cine-page .photo-note { color: var(--x-muted); text-align: center; }
.cta-band { background: var(--x-navy); border-block: 1px solid var(--x-line); padding-block: 72px; text-align: center; }
.cta-band h2 { margin: 0; font-size: 2rem; text-transform: uppercase; letter-spacing: .04em; }
.cta-band p { color: var(--x-muted); margin: var(--s4) 0 0; }
.cta-band .btn-row { justify-content: center; margin-block-start: var(--s5); }
.cta-band .btn-primary { background: transparent; color: var(--x-gold); border: 3px solid var(--x-gold); border-radius: 999px; }
.cta-band .btn-primary:hover { background: var(--x-gold); color: var(--x-navy); }
.cta-band .btn-ghost { border-radius: 999px; }
@media (min-width: 1024px) { .cta-band h2 { font-size: 3rem; } }

/* ---------- Home (CR-05): ISL's homepage composition in near-black and RIPS gold ----------
   Scoped to body.home; Why RIPS? keeps the CR-04 navy above. Near-black and charcoal sections, deliberate
   white for the Why RIPS? lead-in, RIPS logo gold with a brighter yellow-gold for the hero pill, and the
   RIPS logo navy as the second programme colour. Condensed tile headings use Oswald (SIL Open Font
   License, assets/fonts/OFL-oswald.txt). Contrast: --h-text on --h-black 17:1, --h-muted on --h-char 9:1,
   --h-gold on --h-black 11:1, --h-black on --h-gold 11:1, #fff on --x-navy 15:1. */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/oswald-500.woff2") format("woff2"); }
.home {
  --h-black: #0a0a0a; --h-char: #161616; --h-char-2: #202020; --h-line: rgba(225,196,130,.45);
  --h-gold: #e1c482; --h-gold-2: #b8954f; --h-gold-hi: #f6e6b8; --h-yellow: #f4cb3a;
  --h-text: #f4f1ea; --h-muted: #c9c5bc;
  --font-cond: "Oswald", "Arial Narrow", var(--font);
  --hdr: 70px;
  background: var(--h-black);
}
.home main a { text-decoration: none; }
.home h2 { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; line-height: 1.1; }

/* Header: a near-black bar, crest and name on the left, a compact row of light links on the right */
.home .site-header { background: var(--h-black); border-block-end: 1px solid rgba(225,196,130,.22); }
.home .header-bar { min-block-size: var(--hdr); max-inline-size: 82rem; gap: var(--s2); }
.home .brand img { inline-size: 40px; }
.home .brand-name strong { font-size: 1.0625rem; }
.home .brand-name span { font-size: .625rem; letter-spacing: .1em; }
.home .site-nav a { color: #e9e6df; font-size: .875rem; font-weight: 500; letter-spacing: .02em; padding-inline: 10px; }
.home .header-icon { inline-size: 40px; block-size: 40px; }
.home .header-enquire { min-block-size: 40px; padding-inline: 20px; font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border-width: 1px; white-space: nowrap; }
.home .header-enquire:hover { color: var(--h-black); }
@media (max-width: 1023px) {
  .home .header-enquire { display: none; }
  .js .home .site-nav { background: var(--h-black); max-block-size: calc(100vh - var(--hdr)); }
  .js .home .site-nav a { font-size: 1rem; }
  .js .home .site-nav a[aria-current="page"], .js .home .site-nav a.is-section { background: var(--h-char-2); }
  .home .nav-enquire a { color: var(--h-gold); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .home .site-nav a { padding-inline: 7px; font-size: .8125rem; } .home .header-icon { display: none; } }

/* Hero: three tall video panels in one row; the crest, the name and one pill rise over them */
.isl-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; block-size: calc(100vh - var(--hdr)); min-block-size: 560px; background: #000; text-align: center; }
@supports (block-size: 100svh) { .isl-hero { block-size: calc(100svh - var(--hdr)); } }
.isl-panels { position: absolute; inset: 0; z-index: -2; display: flex; gap: 4px; background: #000; }
.isl-panel { position: relative; flex: 1 1 0; overflow: hidden; }
.isl-panel img, .isl-panel video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.isl-panel video { opacity: 0; transition: opacity .8s ease; }
.isl-panel video.is-playing { opacity: 1; }
/* The footage shows first; the shade and the brand arrive after it (no animation with reduced motion). */
.isl-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 62% at 50% 50%, rgba(0,0,0,.62), rgba(0,0,0,.42) 70%, rgba(0,0,0,.3)), linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 72%, rgba(0,0,0,.75)); animation: isl-shade 1.4s .5s ease backwards; }
.isl-brand { display: flex; flex-direction: column; align-items: center; padding: 24px var(--s4) 56px; max-inline-size: 70rem; }
.isl-brand > * { animation: isl-rise 1.1s cubic-bezier(.2,.7,.2,1) backwards; }
.isl-crest { inline-size: 112px; block-size: auto; margin: 0 0 18px; filter: drop-shadow(0 6px 22px rgba(0,0,0,.7)); animation-delay: .9s; }
.home .isl-wordmark { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; line-height: 1.25; letter-spacing: .16em; text-transform: uppercase; text-wrap: balance; color: var(--h-gold); background: linear-gradient(180deg, var(--h-gold-hi) 0%, var(--h-gold) 48%, var(--h-gold-2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 10px rgba(0,0,0,.6)); animation-delay: 1.1s; }
.isl-tagline { margin: 14px 0 28px; color: var(--h-text); font-size: .6875rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.8); animation-delay: 1.25s; }
.isl-pill { display: inline-flex; align-items: center; justify-content: center; min-block-size: 52px; padding: 8px 34px; border: 3px solid var(--h-yellow); border-radius: 999px; background: rgba(0,0,0,.25); color: var(--h-gold-hi) !important; font-family: var(--font-head); font-size: .9375rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; transition: background-color .25s ease, color .25s ease; }
.isl-pill:hover { background: var(--h-yellow); color: var(--h-black) !important; }
.isl-pill:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.isl-brand .isl-pill { animation-delay: 1.4s; }
.isl-pill-sm { min-block-size: var(--target); padding-inline: 24px; border-width: 2px; font-size: .8125rem; }
.isl-pill-solid { background: var(--h-gold); border-color: var(--h-gold); color: var(--h-black) !important; }
.isl-pill-solid:hover { background: var(--h-yellow); border-color: var(--h-yellow); }
.isl-links { display: flex; justify-content: center; align-items: center; gap: var(--s1); margin: 10px 0 0; animation-delay: 1.5s; }
.isl-links a { display: inline-flex; align-items: center; min-block-size: var(--target); padding-inline: var(--s3); color: var(--h-text) !important; font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.isl-links a:hover { color: var(--h-gold) !important; }
.isl-links span { color: var(--h-gold); }
.isl-status { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s2); margin: 4px 0 0; color: var(--h-text); font-size: .8125rem; text-shadow: 0 1px 8px rgba(0,0,0,.9); animation-delay: 1.6s; }
.isl-pause { position: absolute; inset-inline-start: var(--s3); inset-block-end: var(--s3); display: inline-flex; align-items: center; gap: var(--s2); min-block-size: 40px; padding-inline: var(--s3); background: rgba(0,0,0,.6); color: var(--h-text); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; font: inherit; font-size: .75rem; letter-spacing: .06em; cursor: pointer; }
.isl-pause:hover { border-color: var(--h-gold); color: var(--h-gold); }
.isl-pause-icon { inline-size: 10px; block-size: 12px; border-inline: 3px solid currentColor; }
.isl-pause[aria-pressed="true"] .isl-pause-icon { border: 0; border-block: 6px solid transparent; border-inline-start: 10px solid currentColor; inline-size: 0; block-size: 0; }
@keyframes isl-shade { from { opacity: 0; } }
@keyframes isl-rise { from { opacity: 0; transform: translateY(22px); } }
@media (min-width: 720px) {
  .isl-panels { gap: 6px; }
  .isl-crest { inline-size: 190px; margin-block-end: 22px; }
  .home .isl-wordmark { max-inline-size: 22em; font-size: clamp(2rem, 3.2vw, 3rem); letter-spacing: .16em; line-height: 1.15; }
  .isl-tagline { font-size: .8125rem; margin-block: 16px 34px; }
  .isl-brand .isl-pill { min-block-size: 64px; padding-inline: 48px; font-size: 1.0625rem; }
}
@media (min-width: 1024px) {
  .isl-hero { block-size: 72vh; min-block-size: 600px; max-block-size: 860px; }
  .isl-pause { inset-inline-start: var(--s5); inset-block-end: var(--s5); }
}

/* Our campus: a gold heading band, then the campus edge to edge with its caption */
.isl-band { padding: 26px var(--s4); background: linear-gradient(90deg, #6f5526 0%, #b8954f 22%, var(--h-gold) 50%, #b8954f 78%, #6f5526 100%); text-align: center; }
.isl-band h2 { margin: 0; color: var(--h-black); font-size: 1.75rem; letter-spacing: .16em; }
.isl-campus-view { position: relative; isolation: isolate; background: var(--h-char); }
.isl-campus-view > img { display: block; inline-size: 100%; block-size: 300px; object-fit: cover; }
.isl-campus-caption { padding: 28px var(--s4) 32px; border-block-start: 1px solid var(--h-line); }
.isl-kicker { margin: 0 0 6px; color: var(--h-gold); font-family: var(--font-cond); font-size: .875rem; letter-spacing: .24em; text-transform: uppercase; }
.isl-campus-name { margin: 0 0 18px; color: var(--h-text); font-family: var(--font-head); font-size: 1.625rem; font-weight: 600; letter-spacing: .06em; line-height: 1.15; text-transform: uppercase; }
.isl-chips { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.isl-chips a { display: inline-flex; align-items: center; min-block-size: var(--target); padding: 0 14px; border: 1px solid var(--h-line); color: var(--h-text) !important; font-family: var(--font-cond); font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; transition: border-color .25s ease, color .25s ease, background-color .25s ease; }
.isl-chips a:hover { border-color: var(--h-gold); color: var(--h-gold) !important; background: rgba(225,196,130,.08); }
.isl-photo-note { margin: 0; padding: 14px var(--s4); background: var(--h-black); color: var(--h-muted); font-size: .8125rem; text-align: center; }
@media (min-width: 900px) {
  .isl-band { padding-block: 34px; }
  .isl-band h2 { font-size: 3rem; }
  .isl-campus-view > img { block-size: min(72vh, 680px); min-block-size: 460px; }
  .isl-campus-view::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.5) 38%, rgba(0,0,0,0) 70%), linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0) 40%); pointer-events: none; }
  .isl-campus-caption { position: absolute; z-index: 1; inset-block-end: 56px; inset-inline-start: max(var(--s5), calc((100% - 72rem) / 2)); max-inline-size: 34rem; padding: 0; border: 0; }
  .isl-campus-name { font-size: 3rem; }
}

/* Vision and mission over the campus at dusk, darkened; the key phrases in gold */
.isl-statements { position: relative; isolation: isolate; overflow: hidden; padding: 80px var(--s4); background: var(--h-black); }
.isl-bg { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; }
.isl-statements::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.86), rgba(0,0,0,.74) 50%, rgba(0,0,0,.9)); }
.isl-statements-inner { display: grid; gap: 64px; max-inline-size: 64rem; margin-inline: auto; }
.isl-statement { max-inline-size: 32rem; padding-inline-start: 22px; border-inline-start: 2px solid var(--h-gold); }
.isl-statement-end { justify-self: end; padding-inline: 0 22px; border-inline-start: 0; border-inline-end: 2px solid var(--h-gold); text-align: end; }
.isl-statement h2 { margin: 0 0 18px; color: var(--h-text); font-size: 2rem; }
.isl-statement h2 span { color: var(--h-gold); }
.isl-statement p { margin: 0; color: var(--h-text); font-size: 1.0625rem; line-height: 1.65; }
.isl-statement strong { color: var(--h-gold-hi); font-weight: 600; }
@media (min-width: 1024px) {
  .isl-statements { padding-block: 128px; }
  .isl-statements-inner { gap: 88px; }
  .isl-statement h2 { font-size: 3rem; }
  .isl-statement p { font-size: 1.25rem; line-height: 1.6; }
}

/* Why RIPS?: a white lead-in, then a ruled grid of charcoal tiles; hover or focus shows each tile's text */
.isl-why { background: var(--h-black); padding-block-end: 72px; }
.isl-why-head { margin: 0; padding: 72px var(--s4) 64px; background: #fff; text-align: center; }
.isl-why-head h2 { margin: 0 auto; color: var(--h-black); font-size: 2.5rem; letter-spacing: .08em; }
.isl-why-head p { max-inline-size: 40rem; margin: 18px auto 0; color: #3d3a35; font-size: 1.125rem; line-height: 1.6; }
.isl-why-head::after { content: ""; display: block; inline-size: 72px; block-size: 3px; margin: 28px auto 0; background: var(--h-gold-2); }
.isl-tiles { list-style: none; margin: 64px auto 0; padding: 0 var(--s4); display: grid; grid-template-columns: 1fr; gap: 0; max-inline-size: 72rem; }
.isl-tile { margin: 0 0 -1px; }
.isl-tile a { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-block-size: 200px; padding: 28px 24px; overflow: hidden; background: var(--h-char); border: 1px solid var(--h-line); color: var(--h-gold) !important; text-align: center; transition: background-color .35s ease; }
.isl-tile img { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .18; filter: grayscale(.4); transition: opacity .5s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.isl-tile a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(22,22,22,.55), rgba(22,22,22,.9)); }
.isl-tile-title { font-family: var(--font-cond); font-size: 1.625rem; font-weight: 500; line-height: 1.15; letter-spacing: .08em; text-transform: uppercase; }
.isl-tile-text { max-inline-size: 22rem; color: var(--h-text); font-size: .9375rem; line-height: 1.55; }
.isl-tile a:hover, .isl-tile a:focus-visible { background: var(--h-char-2); }
.isl-tile a:hover img, .isl-tile a:focus-visible img { opacity: .4; transform: scale(1.06); }
.isl-tile a:focus-visible { outline: 3px solid var(--h-gold); outline-offset: -4px; }
.isl-more { margin: 48px 0 0; padding-inline: var(--s4); text-align: center; }
@media (min-width: 600px) {
  .isl-tiles { grid-template-columns: repeat(2, 1fr); }
  .isl-tile { margin: 0 -1px -1px 0; }
}
@media (min-width: 1024px) {
  .isl-why { padding-block-end: 96px; }
  .isl-why-head { padding-block: 104px 88px; }
  .isl-why-head h2 { font-size: 4rem; }
  .isl-tiles { grid-template-columns: repeat(3, 1fr); margin-block-start: 88px; }
  .isl-tile a { aspect-ratio: 4 / 3; min-block-size: 0; }
  .isl-tile-title { font-size: 2rem; }
}
@media (hover: hover) and (min-width: 600px) {
  .isl-tile-text { max-block-size: 0; opacity: 0; overflow: hidden; transition: max-block-size .45s ease, opacity .35s ease; }
  .isl-tile a:hover .isl-tile-text, .isl-tile a:focus-visible .isl-tile-text { max-block-size: 8em; opacity: 1; }
}

/* Learning at RIPS: a heading, then one wide photo in a thin gold frame */
.isl-learning { padding: 72px var(--s4) 80px; background: var(--h-char); text-align: center; }
.isl-learning h2 { margin: 0 0 40px; color: var(--h-text); font-size: 2rem; }
.isl-learning h2 span { color: var(--h-gold); }
.isl-learning figure { max-inline-size: 72rem; margin: 0 auto; }
.isl-learning img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; padding: 8px; border: 1px solid var(--h-line); background: var(--h-black); box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.isl-learning figcaption { margin-block-start: 16px; color: var(--h-muted); font-size: .8125rem; }
@media (min-width: 720px) { .isl-learning img { aspect-ratio: 8 / 3; padding: 12px; } }
@media (min-width: 1024px) { .isl-learning { padding-block: 104px 112px; } .isl-learning h2 { font-size: 3rem; margin-block-end: 56px; } }

/* Programs: rectangular field buttons over a blurred, darkened campus photo, gold alternating with navy */
.isl-programs { position: relative; isolation: isolate; overflow: hidden; padding: 80px var(--s4); text-align: center; }
.isl-programs .isl-bg { filter: blur(8px) saturate(.8); transform: scale(1.12); }
.isl-programs::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.74); }
.isl-programs h2 { margin: 0 0 44px; color: var(--h-gold); font-size: 2.25rem; letter-spacing: .1em; }
.isl-fields { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; max-inline-size: 60rem; }
.isl-fields li { display: flex; }
.isl-field { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 60px; padding: 10px 22px; background: var(--h-gold); border: 1px solid var(--h-gold); color: var(--h-black) !important; font-family: var(--font-cond); font-size: 1.1875rem; font-weight: 500; letter-spacing: .08em; text-align: start; text-transform: uppercase; transition: background-color .25s ease, color .25s ease, transform .25s ease; }
.isl-fields li:nth-child(4n+2) .isl-field, .isl-fields li:nth-child(4n+3) .isl-field { background: var(--x-navy); border-color: var(--h-line); color: #fff !important; }
.isl-field > span { flex: none; min-inline-size: 2em; padding: 2px 8px; border: 1px solid currentColor; font-family: var(--font); font-size: .8125rem; font-weight: 700; letter-spacing: 0; text-align: center; }
.isl-field:hover { background: var(--h-yellow); border-color: var(--h-yellow); color: var(--h-black) !important; transform: translateY(-2px); }
.isl-fields li:nth-child(4n+2) .isl-field:hover, .isl-fields li:nth-child(4n+3) .isl-field:hover { background: #17395e; border-color: var(--h-gold); color: #fff !important; }
.isl-field:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.isl-programs .isl-more { margin-block-start: 44px; }
@media (min-width: 720px) {
  .isl-fields { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .isl-programs h2 { font-size: 3rem; }
}
@media (min-width: 1024px) { .isl-programs { padding-block: 120px; } .isl-programs h2 { font-size: 3.5rem; margin-block-end: 56px; } .isl-field { min-block-size: 68px; font-size: 1.375rem; } }

/* Latest notices: dated rows on charcoal, each with a gold rule */
.isl-notices { padding: 64px var(--s4); background: var(--h-black); border-block-start: 1px solid rgba(225,196,130,.2); }
.isl-notices-inner { max-inline-size: 60rem; margin-inline: auto; }
.isl-notices-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s3); margin-block-end: 28px; }
.isl-notices-head h2 { margin: 0; color: var(--h-text); font-size: 1.75rem; }
.home .isl-notices .notice-list { display: grid; gap: 10px; margin: 0; border: 0; }
.home .isl-notices .notice-row { padding: 16px 20px; background: var(--h-char); border: 0; border-inline-start: 3px solid var(--h-gold); }
.home .isl-notices .notice-row h3 { font-size: 1.0625rem; }
.home .isl-notices .notice-row a { color: var(--h-text); }
.home .isl-notices .notice-row a:hover { color: var(--h-gold); }
.home .isl-notices .notice-row p { color: var(--h-muted); font-size: .875rem; }
.home .notice-type { color: var(--h-gold); font-family: var(--font-cond); letter-spacing: .1em; text-transform: uppercase; }
.home .isl-notices .empty-state { color: var(--h-muted); }
.home .isl-notices .empty-state a { color: var(--h-gold); text-decoration: underline; }
@media (min-width: 1024px) { .isl-notices { padding-block: 88px; } .isl-notices-head h2 { font-size: 2.5rem; } }

/* Contact: four balanced black columns divided by hairlines, white icons, gold headings and buttons */
.isl-contact { background: #000; border-block-start: 1px solid rgba(225,196,130,.25); }
.isl-contact-grid { display: grid; grid-template-columns: 1fr; max-inline-size: 82rem; margin-inline: auto; }
.isl-contact-grid > div { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px var(--s4); text-align: center; }
.isl-contact-grid > div + div { border-block-start: 1px solid rgba(255,255,255,.14); }
.isl-icon { color: #fff; margin-block-end: 4px; }
.isl-contact h3 { margin: 0; color: var(--h-gold); font-family: var(--font-cond); font-size: 1.375rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.isl-contact p { margin: 0; color: var(--h-text); overflow-wrap: anywhere; }
.isl-contact p a { color: var(--h-text) !important; }
.isl-contact p a:hover { color: var(--h-gold) !important; }
.isl-big { font-size: 1.1875rem; }
.isl-small { color: var(--h-muted) !important; font-size: .875rem; }
.isl-flat { display: inline-flex; justify-content: center; align-items: center; min-block-size: var(--target); min-inline-size: 12.5rem; padding: 6px 18px; background: var(--h-gold); color: var(--h-black) !important; font-family: var(--font-cond); font-size: .9375rem; letter-spacing: .12em; text-transform: uppercase; transition: background-color .25s ease; }
.isl-contact .isl-flat { color: var(--h-black) !important; }
.isl-contact .isl-flat:hover { background: var(--h-yellow); color: var(--h-black) !important; }
.isl-email { font-size: 1.0625rem; overflow-wrap: break-word !important; }
@media (min-width: 600px) {
  .isl-contact-grid { grid-template-columns: repeat(2, 1fr); }
  .isl-contact-grid > div + div { border-block-start: 0; }
  .isl-contact-grid > div:nth-child(even) { border-inline-start: 1px solid rgba(255,255,255,.14); }
  .isl-contact-grid > div:nth-child(n+3) { border-block-start: 1px solid rgba(255,255,255,.14); }
}
@media (min-width: 1024px) {
  .isl-contact-grid { grid-template-columns: repeat(4, 1fr); }
  .isl-contact-grid > div { padding-block: 56px; justify-content: flex-start; }
  .isl-contact-grid > div:nth-child(n+3) { border-block-start: 0; }
  .isl-contact-grid > div + div { border-inline-start: 1px solid rgba(255,255,255,.14); }
}
.home .site-footer { background: #000; border-block-start: 1px solid rgba(255,255,255,.1); }
.home .site-footer h2 { color: var(--h-gold); }
.home .site-footer a { color: #e9e6df; text-decoration: none; }
.home .site-footer a:hover { color: var(--h-gold); }
.home .site-footer .whatsapp-float, .home .site-footer .whatsapp-float:hover { color: #fff; }
.home .footer-legal a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .program-card:hover { transform: none; }
}

/* ---------- Header call and WhatsApp icons (wide screens only, Doc 05 Q08) ---------- */
.header-icon { display: none; }
@media (min-width: 1024px) {
  .header-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--target); block-size: var(--target); border-radius: 50%; color: var(--c-brand); border: 1px solid var(--c-line-strong); flex: none; }
  .header-icon:hover { color: var(--c-gold-ink); border-color: var(--c-gold-ink); }
}

/* ---------- Inner pages ---------- */
.nowrap { white-space: nowrap; }
.h3 { font-family: var(--font); font-size: 1.25rem; font-weight: 700; letter-spacing: 0; line-height: 1.25; margin-block-start: 0; }
.staging-banner { margin: 0; padding: var(--s2) var(--s4); background: var(--c-error); color: #fff; font-weight: 700; text-align: center; }
.admissions-status, .program-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.filters-2 { grid-template-columns: 1fr; }
@media (min-width: 600px) { .filters-2 { grid-template-columns: repeat(2, 1fr) auto; } }
.filters .field { margin: 0; }
.filter-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.related { margin-block-start: var(--s7); }
.related-list { padding-inline-start: var(--s5); }
.related-list li { margin-block-end: var(--s2); }
.news-list { list-style: none; padding: 0; margin: 0; }
.news-row { padding-block: var(--s4); border-block-end: 1px solid var(--c-line); }
.news-row p { margin-block-end: var(--s1); }
.pagination-links a { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--target); min-block-size: var(--target); border: 2px solid var(--c-brand); border-radius: var(--radius); font-weight: 700; text-decoration: none; }
.pagination-links a[aria-current="page"] { background: var(--c-brand); color: #fff; }
.contact-cards { display: grid; gap: var(--s4); grid-template-columns: 1fr; margin-block: var(--s5) var(--s7); }
@media (min-width: 600px) { .contact-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .contact-cards { grid-template-columns: repeat(4, 1fr); } }
.contact-cards .panel { display: flex; flex-direction: column; }
.contact-cards .panel > :last-child { margin-block-start: auto; margin-block-end: 0; }
.contact-form h2 { margin-block-start: 0; }
.faculty-initials { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--c-brand-2); color: var(--c-accent); font-family: var(--font-display); font-size: 3rem; }
.faculty-card img { aspect-ratio: 1; object-fit: cover; inline-size: 100%; }
.affiliation-list { list-style: none; padding: 0; }
.affiliation-list li { padding-block: var(--s4); border-block-end: 1px solid var(--c-line); }

@media print {
  .site-header, .site-nav, .site-footer, .whatsapp-float, .btn, .skip-link, .breadcrumbs, .filters { display: none !important; }
  body { color: #000; }
  a { color: #000; }
  main { padding: 0; }
}