/* ============================================================
   Learncross — Website Prototype V5
   Static styles, started from the Prototype V4 stylesheet,
   which remains unchanged.
   V5 additions are grouped in the clearly marked V5 section near
   the end of this file; the V4 base above it is preserved.
   System font stack only (final typography not yet approved).
   Colour values are the approved Learncross brand palette; neutral
   surface/border tones below are provisional and unapproved
   (see internal project notes). This file is independent of Prototype V1/V2/
   V3's styles.css files and does not modify or depend on them.
   ============================================================ */

/* ---- Design tokens ---- */
:root {
  /* Approved brand colours — use exact values, do not alter */
  --brand-burgundy: #780116;
  --brand-orange: #F57804;
  --brand-gold: #C9A24A;
  --brand-black: #070601;

  /* Functional mapping (per Brand Guidelines §7.7 / Design System §6.5) */
  --color-primary: var(--brand-burgundy);
  --color-accent-energy: var(--brand-orange);
  --color-accent-premium: var(--brand-gold);
  --color-text-primary: var(--brand-black);
  --color-text-inverse: #FFFFFF;

  /* Provisional neutrals — not approved brand tokens, restrained
     placeholders only until a neutral scale is defined. */
  --color-surface: #FFFFFF;
  --color-surface-alt: #F6F4F1;
  --color-surface-dark: var(--brand-black);
  --color-border: #E4E0D9;
  --color-border-on-dark: rgba(255, 255, 255, 0.18);

  /* Type */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Spacing scale (conceptual tokens per Design System, provisional values) */
  --space-2: 0.25rem;
  --space-3: 0.5rem;
  --space-4: 0.75rem;
  --space-6: 1rem;
  --space-8: 1.5rem;
  --space-10: 2rem;
  --space-12: 2.5rem;
  --space-16: 3.5rem;
  --space-20: 4.5rem;
  --space-24: 6rem;

  /* Layout */
  --container-max: 1200px;
  --gutter: 1.5rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Motion */
  --motion-duration: 150ms;
  --motion-easing: ease;
}

/* ---- Reset & base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  display: block;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin: 0 0 var(--space-6) 0;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-6) 0;
  line-height: 1.2;
  font-weight: 700;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

/* ---- Accessibility: focus & motion ---- */
:focus-visible {
  outline: 3px solid var(--color-accent-energy);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-4) var(--space-6);
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Anchor scroll offset (sticky header) ---- */
#top,
#programs,
#internship,
#certifications,
#partners,
#about,
#contact,
#why-learncross {
  scroll-margin-top: 84px;
}

/* ---- Layout helpers ---- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section-eyebrow-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.section-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.section-index--on-dark {
  background-color: var(--color-accent-premium);
  color: var(--color-text-primary);
}

.section-eyebrow-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
}

.section-eyebrow-label--on-dark {
  color: var(--color-accent-premium);
}

.section-heading {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  margin-bottom: var(--space-8);
}

.section-intro {
  max-width: 62ch;
  color: var(--color-text-primary);
  opacity: 0.85;
}

.section-intro--on-dark {
  color: var(--color-text-inverse);
  opacity: 0.85;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 var(--space-4) 0;
}

.eyebrow--on-dark {
  color: var(--color-accent-premium);
}

.prototype-note {
  font-size: 0.9rem;
  color: var(--color-text-primary);
  opacity: 0.75;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
  margin-top: var(--space-8);
}

.prototype-note--on-dark {
  border-top-color: var(--color-border-on-dark);
  color: var(--color-text-inverse);
  opacity: 0.75;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: filter var(--motion-duration) var(--motion-easing),
    background-color var(--motion-duration) var(--motion-easing);
  min-height: 44px;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  filter: brightness(0.9);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn-secondary.btn-on-dark {
  color: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
}

.btn-secondary.btn-on-dark:hover,
.btn-secondary.btn-on-dark:focus-visible {
  background-color: var(--color-text-inverse);
  color: var(--color-primary);
}

.btn-tertiary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-border);
  padding: var(--space-3) var(--space-6);
  font-size: 0.95rem;
}

.btn-tertiary:hover,
.btn-tertiary:focus-visible {
  border-color: var(--color-primary);
}

/* ---- Header ---- */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-block: var(--space-6);
}

.wordmark {
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  color: var(--color-primary);
  text-decoration: none;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.site-nav__list a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
  border-bottom-color: var(--color-primary);
}

.site-nav__list a[aria-current="page"] {
  border-bottom-color: var(--color-primary);
}

/* ---- Hero ---- */
.hero {
  padding-block: var(--space-24) var(--space-16);
  background-color: var(--color-surface);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--space-16);
}

.hero__content h1 {
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  max-width: 20ch;
}

.hero__lead {
  font-size: 1.1rem;
  max-width: 54ch;
  opacity: 0.85;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__graphic {
  width: 100%;
  max-width: 320px;
}

.hg-ring {
  fill: none;
  stroke-width: 1.5;
}

.hg-ring--outer {
  stroke: var(--color-border);
}

.hg-ring--mid {
  stroke: var(--color-accent-premium);
}

.hg-ring--inner {
  stroke: var(--color-accent-energy);
}

.hg-dot {
  fill: var(--color-primary);
}

.hg-line {
  stroke: var(--color-border);
  stroke-width: 1.5;
}

/* ---- Trust strip ---- */
.trust-strip {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-8);
  background-color: var(--color-surface-alt);
}

.trust-strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-12);
  justify-content: center;
  text-align: center;
}

.trust-strip__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.trust-strip__item svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
}

/* ---- Value proposition ---- */
.value-prop {
  padding-block: var(--space-20);
  background-color: var(--color-surface);
}

.value-prop__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-10);
}

.value-card {
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-10) var(--space-8);
}

.value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-6);
  color: var(--color-primary);
}

.value-card__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.value-card h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-3);
}

.value-card p {
  font-size: 0.95rem;
  opacity: 0.85;
  margin-bottom: 0;
}

/* ---- Programme sections (shared) ---- */
.program-section {
  padding-block: var(--space-20);
}

.program-section--tint {
  background-color: var(--color-surface-alt);
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-6);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.badge--primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.badge--gold {
  background-color: var(--color-accent-premium);
  color: var(--color-text-primary);
}

/* ---- Programme head layout ---- */
.program-head {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-16);
  align-items: start;
  margin-bottom: var(--space-16);
}

.program-head h2 {
  max-width: 22ch;
}

.program-actions {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

.stat-card {
  background-color: var(--color-primary);
  border-radius: var(--radius-lg);
  color: var(--color-text-inverse);
  padding: var(--space-10);
}

.stat-card__tag {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: var(--space-2) var(--space-6);
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: var(--space-8);
}

.stat-card__figure {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--color-accent-premium);
  margin-bottom: var(--space-2);
  line-height: 1.1;
}

.stat-card__label {
  font-size: 0.95rem;
  opacity: 0.92;
  margin-bottom: var(--space-8);
}

.stat-card__fact {
  border-top: 1px solid var(--color-border-on-dark);
  padding-top: var(--space-6);
  font-size: 0.92rem;
  opacity: 0.92;
  margin-bottom: 0;
}

.stat-card__fact strong {
  color: var(--color-accent-premium);
}

.feat-list {
  border-top: 1px solid var(--color-border);
}

.feat-row {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-8);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.feat-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.feat-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feat-row h4 {
  font-size: 1.05rem;
  margin-bottom: var(--space-2);
}

.feat-row p {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.85;
}

.stipend-note {
  margin-top: var(--space-10);
  padding: var(--space-8);
  background-color: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
}

.stipend-note h4 {
  font-size: 0.95rem;
  margin-bottom: var(--space-3);
}

.stipend-note p {
  margin-bottom: 0;
  opacity: 0.85;
}

.certification-note {
  margin-top: var(--space-8);
  padding: var(--space-8);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent-premium);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
}

.certification-note h4 {
  font-size: 0.95rem;
  margin-bottom: var(--space-3);
}

.certification-note p {
  margin-bottom: 0;
  opacity: 0.85;
}

/* ---- Programme audience cards ---- */
.program-intro {
  max-width: 62ch;
  margin-bottom: var(--space-12);
}

.duo-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.audience-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-10);
}

.audience-card h3 {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 1.1rem;
  margin-bottom: var(--space-6);
}

.audience-card h3 svg {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.audience-card ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.audience-card li {
  display: flex;
  gap: var(--space-3);
  font-size: 0.93rem;
  opacity: 0.88;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.audience-card li:first-child {
  padding-top: 0;
  border-top: 0;
}

.audience-card li svg {
  width: 15px;
  height: 15px;
  color: var(--color-accent-energy);
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.program-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-12);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);
}

.program-cta-row h3 {
  margin: 0;
  font-size: 1.1rem;
  max-width: 42ch;
}

/* ---- Institutional partners (dark band) ---- */
.partners {
  padding-block: var(--space-20);
  background-color: var(--color-surface-dark);
  color: var(--color-text-inverse);
}

.partners h2 {
  color: var(--color-text-inverse);
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  margin-block: var(--space-10);
}

.partner-tile {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 176px;
  text-align: center;
}

.partner-tile__name {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text-primary);
  max-width: 22ch;
}

.partner-tile img {
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* AKTU and SVVV source files are low native resolution (100x100 and
   132x123 respectively). Constrain their rendered size below the
   standard tile max-height so they are not upscaled beyond their
   native pixel density. */
.partner-tile img.is-low-res {
  max-height: 44px;
}

.partners-statement {
  max-width: 72ch;
  color: var(--color-text-inverse);
  opacity: 0.85;
  font-size: 0.98rem;
  margin-top: var(--space-8);
}

/* ---- About ---- */
.about {
  padding-block: var(--space-20);
}

.about__inner {
  max-width: 68ch;
}

/* ---- Contact ---- */
.contact {
  padding-block: var(--space-20);
  background-color: var(--color-surface-alt);
}

.contact__inner {
  max-width: 70ch;
}

.contact__lead {
  font-size: 1.05rem;
  opacity: 0.88;
  max-width: 65ch;
}

.contact__actions {
  margin-top: var(--space-10);
}

/* ---- Dedicated Contact page (contact.html) ---- */
.contact-page {
  padding-block: var(--space-20);
}

.contact-page__inner {
  max-width: 74ch;
}

.contact-page__lead {
  font-size: 1.05rem;
  opacity: 0.9;
  max-width: 70ch;
}

.contact-page__operator {
  font-weight: 600;
  margin-top: var(--space-6);
}

.contact-page__disclaimer {
  font-size: 0.92rem;
  background-color: var(--color-surface-alt);
  border-left: 4px solid var(--color-accent-premium);
  border-radius: var(--radius-sm);
  padding: var(--space-6) var(--space-8);
  margin: var(--space-8) 0;
}

.contact-form-wrap {
  margin-top: var(--space-12);
  max-width: 100%;
}

.contact-form-wrap__frame-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  background-color: transparent;
  overflow: hidden;
}

.contact-form-wrap__frame-container iframe {
  display: block;
  width: 100%;
  height: 1550px;
  max-width: 100%;
  border: 0;
}

.contact-form-wrap__fallback {
  margin-top: var(--space-6);
  font-size: 0.92rem;
}

.contact-form-wrap__fallback a {
  color: var(--color-primary);
  font-weight: 600;
}

.contact-page__disclosure {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-top: var(--space-10);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
}

/* ---- Footer ---- */
.site-footer {
  padding-block: var(--space-16);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface-dark);
  color: var(--color-text-inverse);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-10);
}

.wordmark--footer {
  font-size: 1.2rem;
  color: var(--color-text-inverse);
  margin-bottom: var(--space-3);
}

.site-footer__brand p {
  margin-bottom: var(--space-2);
  font-size: 0.9rem;
  opacity: 0.85;
  color: var(--color-text-inverse);
}

.site-footer__status {
  font-weight: 600;
  opacity: 1 !important;
  color: var(--color-accent-premium) !important;
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-text-inverse);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition: background-color var(--motion-duration) var(--motion-easing),
    color var(--motion-duration) var(--motion-easing);
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  background-color: var(--color-accent-premium);
  color: var(--color-text-primary);
}

.site-footer__social svg {
  width: 20px;
  height: 20px;
}

.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: 0.85rem;
}

.site-footer__legal a {
  color: var(--color-text-inverse);
  opacity: 0.85;
  text-decoration: underline;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  opacity: 1;
}

.site-footer__legal .is-pending {
  opacity: 0.6;
  text-decoration: none;
}

.site-footer__copyright {
  opacity: 0.6;
  display: inline-block;
}

/* ============================================================
   Responsive breakpoints
   Tablet: <= 960px · Mobile: <= 600px
   ============================================================ */

@media (max-width: 960px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__visual {
    order: -1;
    max-width: 220px;
    margin-inline: auto;
  }

  .value-prop__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .program-head {
    grid-template-columns: 1fr;
  }

  .duo-col {
    grid-template-columns: 1fr;
  }

  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .container {
    padding-inline: var(--space-6);
  }

  .site-header__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-nav__list {
    gap: var(--space-6);
  }

  .hero {
    padding-block: var(--space-16) var(--space-12);
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .value-prop__grid {
    grid-template-columns: 1fr;
  }

  .feat-row {
    grid-template-columns: 2.5rem 1fr;
    gap: var(--space-4);
  }

  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .program-cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-form-wrap__frame-container iframe {
    height: 1750px;
  }

  .site-footer__inner {
    flex-direction: column;
  }
}

/* ============================================================
   V5 ADDITIONS
   Everything above this line is the Prototype V4 base (with only
   the anchor list and legacy programme class names updated).
   Everything below is new in Prototype V5. No external font,
   framework, icon library, tracker, or analytics dependency is
   used anywhere in this file.
   ============================================================ */

/* ---- V5: expanded eight-item navigation + mobile menu ---- */
.site-header__inner {
  position: relative;
  flex-wrap: nowrap;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}

.nav-toggle__bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 18px;
  height: 12px;
}

.nav-toggle__bars span {
  display: block;
  height: 2px;
  background-color: currentColor;
}

.site-nav__list {
  gap: var(--space-6);
  row-gap: var(--space-3);
  justify-content: flex-end;
}

.site-nav__list a {
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Current-page state is carried by aria-current, and reinforced
   visually by weight + underline (never colour alone). */
.site-nav__list a[aria-current="page"] {
  border-bottom-color: var(--color-primary);
  font-weight: 700;
}

/* ---- V5: homepage banner carousel ---- */
.carousel {
  background-color: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

.carousel__viewport {
  position: relative;
}

/* No-JS baseline: only the first slide is shown. */
.carousel__slide + .carousel__slide {
  display: none;
}

/* With JS, visibility is driven entirely by the hidden attribute. */
.carousel[data-js="true"] .carousel__slide {
  display: block;
}

.carousel[data-js="true"] .carousel__slide[hidden] {
  display: none;
}

.carousel__slide {
  padding-block: var(--space-20);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.carousel__slide-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: var(--space-16);
}

.carousel__label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  margin: 0 0 var(--space-4) 0;
}

.carousel__heading {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  max-width: 18ch;
  margin-bottom: var(--space-6);
}

.carousel__copy {
  font-size: 1.05rem;
  max-width: 50ch;
  margin-bottom: var(--space-10);
}

/* Decorative, CSS-only slide artwork — no images, no logos. */
.carousel__art {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: 1px solid currentColor;
  overflow: hidden;
  opacity: 0.55;
}

.carousel__art::before,
.carousel__art::after {
  content: "";
  position: absolute;
  display: block;
}

.carousel__art::before {
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    currentColor 0 1px,
    transparent 1px 14px
  );
  opacity: 0.6;
}

.carousel__art::after {
  width: 52%;
  aspect-ratio: 1;
  right: -8%;
  bottom: -12%;
  border-radius: 50%;
  border: 2px solid currentColor;
}

/* Per-slide colour treatments — all pairings meet WCAG 2.2 AA for
   body text against their own background. */
.carousel__slide--burgundy {
  background-color: var(--brand-burgundy);
  color: var(--color-text-inverse);
}

.carousel__slide--black {
  background-color: var(--brand-black);
  color: var(--color-text-inverse);
}

.carousel__slide--orange {
  background-color: var(--brand-orange);
  color: var(--brand-black);
}

.carousel__slide--gold {
  background-color: var(--brand-gold);
  color: var(--brand-black);
}

.carousel__slide--burgundy .carousel__label {
  color: var(--brand-gold);
}

.carousel__slide--black .carousel__label {
  color: var(--brand-gold);
}

.carousel__slide--orange .carousel__label,
.carousel__slide--gold .carousel__label {
  color: var(--brand-burgundy);
}

/* Slide CTAs */
.carousel__cta {
  background-color: var(--color-text-inverse);
  color: var(--brand-burgundy);
  border-color: var(--color-text-inverse);
}

.carousel__slide--black .carousel__cta {
  background-color: var(--brand-gold);
  color: var(--brand-black);
  border-color: var(--brand-gold);
}

.carousel__slide--orange .carousel__cta,
.carousel__slide--gold .carousel__cta {
  background-color: var(--brand-burgundy);
  color: var(--color-text-inverse);
  border-color: var(--brand-burgundy);
}

.carousel__cta:hover,
.carousel__cta:focus-visible {
  filter: brightness(0.92);
}

/* ---- Compact rotator controls (23 Sept 2026 refinement) ----
   Shared Pause/Play icon button for the banner carousel and the
   IBM Internship highlights. The visible label is an inline SVG
   icon; site.js keeps the accessible name, tooltip and data-state
   in step. Hit area 40 x 40 px. */
.rotator-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: transparent;
  color: inherit;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}

.rotator-toggle__icon {
  display: block;
  fill: currentColor;
}

.rotator-toggle__icon--play,
.rotator-toggle[data-state="paused"] .rotator-toggle__icon--pause {
  display: none;
}

.rotator-toggle[data-state="paused"] .rotator-toggle__icon--play {
  display: block;
}

/* Reduced motion: automatic rotation is unavailable, so the
   Play icon is shown as inactive (V5 correction B-01). */
.rotator-toggle[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Carousel controls: one small cluster at the lower centre of the
   banner, drawn inside the slides' bottom padding so it never sits
   over slide text or CTAs. A light pill keeps the burgundy dots
   and dark icon legible on every slide colour. Hidden without JS,
   since the controls would do nothing. */
.carousel {
  position: relative;
}

.carousel__controls {
  display: none;
  position: absolute;
  left: 50%;
  bottom: var(--space-4);
  z-index: 1;
  transform: translateX(-50%);
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-2) 2px var(--space-3);
  background-color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(7, 6, 1, 0.12);
  border-radius: 999px;
}

.carousel[data-js="true"] .carousel__controls {
  display: flex;
}

.carousel__dots {
  display: flex;
  align-items: center;
}

/* Visible dot 10px; the button itself is 32 x 40 px. */
.carousel__dot {
  width: 32px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--brand-burgundy);
}

.carousel__dot::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background-color: transparent;
}

.carousel__dot:hover::before {
  background-color: rgba(120, 1, 22, 0.3);
}

/* Active state is a filled dot (shape change, not colour alone). */
.carousel__dot[aria-current="true"]::before {
  background-color: currentColor;
}

.carousel__toggle {
  color: var(--brand-black);
}

.carousel__toggle:hover {
  background-color: rgba(7, 6, 1, 0.08);
}

/* Focus is drawn inside the pill so it is visible on every slide. */
.carousel__dot:focus-visible,
.carousel__toggle:focus-visible {
  outline: 2px solid var(--brand-burgundy);
  outline-offset: -2px;
}

/* ---- V5: Inaugural Offer badge ---- */
.badge--offer {
  background-color: var(--brand-gold);
  color: var(--brand-black);
  border: 1px solid rgba(7, 6, 1, 0.25);
}

.badge--soon {
  background-color: transparent;
  border: 1px solid currentColor;
  color: inherit;
}

.carousel__slide .badge {
  margin-bottom: var(--space-6);
}

.carousel__slide--gold .badge--offer {
  background-color: var(--brand-black);
  color: var(--brand-gold);
  border-color: var(--brand-black);
}

/* ---- V5: inner-page heroes ---- */
.page-hero {
  padding-block: var(--space-20) var(--space-16);
  background-color: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
}

.page-hero__inner {
  max-width: 72ch;
}

.page-hero h1 {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem);
}

.page-hero__lead {
  font-size: 1.08rem;
  opacity: 0.9;
  max-width: 62ch;
}

.page-hero__sub {
  font-size: 0.98rem;
  opacity: 0.85;
  max-width: 62ch;
}

/* ---- V5: page-shell placeholder regions ---- */
.shell-sections {
  padding-block: var(--space-20);
}

.shell-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

.shell-block {
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent-premium);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-alt);
  padding: var(--space-10) var(--space-8);
}

.shell-block h2,
.shell-block h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-4);
}

.shell-block p {
  font-size: 0.95rem;
  opacity: 0.85;
  margin-bottom: 0;
}

.status-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-primary);
  background-color: var(--color-surface);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- V5: Hackathons page ---- */
.feature-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-alt);
  padding: var(--space-12) var(--space-10);
  margin-bottom: var(--space-16);
}

.feature-block h2 {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  margin-bottom: var(--space-4);
}

.feature-block p {
  max-width: 68ch;
  opacity: 0.88;
  margin-bottom: 0;
}

/* ---- V5: Events & Experiences cards ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
}

.experience-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  padding: var(--space-8);
}

.experience-card h2 {
  font-size: 1.02rem;
  margin-bottom: 0;
}

.experience-card p {
  font-size: 0.92rem;
  opacity: 0.85;
  margin-bottom: 0;
}

.section-closing {
  margin-top: var(--space-16);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);
}

.section-closing p {
  max-width: 66ch;
  opacity: 0.88;
}

/* ---- V5: homepage programme summary sections ---- */
.programme-summary__head {
  max-width: 68ch;
}

.programme-summary__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  margin-block: var(--space-10);
}

.programme-summary__point {
  border-top: 3px solid var(--color-accent-premium);
  padding-top: var(--space-6);
}

.programme-summary__point h3 {
  font-size: 1rem;
  margin-bottom: var(--space-3);
}

.programme-summary__point p {
  font-size: 0.93rem;
  opacity: 0.85;
  margin-bottom: 0;
}

.programme-summary__qualifier {
  font-size: 0.88rem;
  opacity: 0.8;
  max-width: 72ch;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
}

/* ---- V5: long-form legal pages ---- */
.legal-page {
  padding-block: var(--space-16) var(--space-20);
}

.legal-page__inner {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: start;
}

.legal-meta {
  font-size: 0.92rem;
  opacity: 0.85;
}

.legal-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

/* Table of contents */
.legal-toc {
  position: sticky;
  top: 96px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-alt);
  padding: var(--space-8);
}

.legal-toc h2 {
  font-size: 0.95rem;
  margin-bottom: var(--space-4);
}

.legal-toc ol {
  list-style: decimal;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: 0.9rem;
}

.legal-toc a {
  color: var(--color-primary);
  text-decoration: underline;
}

.legal-cross-link {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
}

.legal-cross-link a {
  color: var(--color-primary);
  font-weight: 600;
}

/* Long-form legal body */
.legal-body {
  max-width: 78ch;
}

.legal-body h2 {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  margin-top: var(--space-16);
  margin-bottom: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  scroll-margin-top: 96px;
}

.legal-body > h2:first-of-type {
  margin-top: var(--space-10);
}

.legal-body h3 {
  font-size: 1.02rem;
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.legal-body p {
  font-size: 0.97rem;
  line-height: 1.75;
}

.legal-body ul,
.legal-body ol {
  list-style: disc;
  padding-left: 1.5em;
  margin: 0 0 var(--space-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.legal-body ol {
  list-style: decimal;
}

.legal-body li {
  font-size: 0.97rem;
  line-height: 1.7;
}

.legal-body a {
  color: var(--color-primary);
}

.legal-back-to-top {
  display: inline-block;
  margin-top: var(--space-16);
  font-size: 0.9rem;
  color: var(--color-primary);
  font-weight: 600;
}

/* ============================================================
   V5 responsive additions
   ============================================================ */

@media (max-width: 1080px) {
  .site-nav__list {
    gap: var(--space-4);
  }

  .site-nav__list a {
    font-size: 0.85rem;
  }

  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .carousel__slide-inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .carousel__art {
    display: none;
  }

  .legal-page__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .legal-toc {
    position: static;
  }

  .programme-summary__points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shell-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile navigation: collapse the eight-item bar behind a button. */
@media (max-width: 860px) {
  .site-header__inner {
    flex-wrap: wrap;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    flex-basis: 100%;
  }

  .site-nav[data-collapsed="true"] {
    display: none;
  }

  .site-nav__list {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding-bottom: var(--space-6);
  }

  .site-nav__list li + li {
    border-top: 1px solid var(--color-border);
  }

  .site-nav__list a {
    display: block;
    padding: var(--space-4) 0;
    font-size: 0.95rem;
    border-bottom: 0;
    border-left: 3px solid transparent;
    padding-left: var(--space-4);
  }

  .site-nav__list a:hover,
  .site-nav__list a:focus-visible {
    border-bottom-color: transparent;
    border-left-color: var(--color-primary);
  }

  .site-nav__list a[aria-current="page"] {
    border-bottom-color: transparent;
    border-left-color: var(--color-primary);
  }
}

@media (max-width: 600px) {
  /* The V4 base switches the header to a column at this width; V5
     keeps the wordmark and menu button on one row instead. */
  .site-header__inner {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .carousel__slide {
    padding-block: var(--space-16);
  }

  /* Keep room for the overlaid indicator cluster (46px tall,
     12px from the bottom) below the slide content. */
  .carousel[data-js="true"] .carousel__slide {
    padding-bottom: var(--space-20);
  }

  .card-grid,
  .programme-summary__points {
    grid-template-columns: 1fr;
  }

  .feature-block {
    padding: var(--space-10) var(--space-8);
  }

  .legal-body h2 {
    margin-top: var(--space-12);
  }
}

/* ============================================================
   V5 ADDITIONS — IBM Internship page (internship.html) and the
   homepage IBM Internship highlight strip.
   Everything in this block is new in the IBM Internship task.
   No external font, framework, icon library, image, tracker or
   analytics dependency is introduced. Every domain mark below is
   drawn in CSS only.
   ============================================================ */

/* Anchor scroll offset for the Internship page in-page sections. */
#overview,
#why,
#domains,
#gains,
#how,
#journey,
#milestone,
#stipend,
#recognition,
#register-interest {
  scroll-margin-top: 96px;
}

/* ---- Programme content bands ---- */
.programme-band {
  padding-block: var(--space-20);
  background-color: var(--color-surface);
}

.programme-band--tint {
  background-color: var(--color-surface-alt);
}

.programme-band--primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.programme-band--dark {
  background-color: var(--color-surface-dark);
  color: var(--color-text-inverse);
}

.section-heading--on-dark {
  color: var(--color-text-inverse);
}

/* ---- Programme page hero additions ---- */
.page-hero--programme .page-hero__inner {
  max-width: 76ch;
}

.page-hero__tagline {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.8rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-primary);
  max-width: 26ch;
  margin: 0 0 var(--space-6) 0;
}

.page-hero--programme .badge {
  margin-bottom: var(--space-8);
}

/* ---- Value strip (shared: homepage section + programme overview) ---- */
.value-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-12);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);
}

.value-strip__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.value-strip__figure {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-primary);
}

.value-strip__label {
  font-size: 0.92rem;
  opacity: 0.85;
}

/* ---- Why Choose This Internship ---- */
.reason-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

.reason-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent-premium);
  border-radius: var(--radius-md);
  padding: var(--space-10) var(--space-8);
}

.reason-card h3 {
  font-size: 1.05rem;
  margin-bottom: var(--space-3);
}

.reason-card p {
  font-size: 0.94rem;
  opacity: 0.85;
  margin-bottom: 0;
}

/* ---- Seven technology domains ---- */
.domain-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-10);
}

.domain-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}

.domain-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.domain-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: 700;
  font-size: 0.85rem;
}

.domain-card h3 {
  font-size: 1.02rem;
  margin-bottom: var(--space-3);
}

.domain-card p {
  font-size: 0.92rem;
  opacity: 0.85;
  margin-bottom: 0;
}

/* Domain marks are matched both by the original modifier classes and
   by data-mark="<imageKey>", which the data-driven renderer sets. A
   future domain without a dedicated mark shows the plain tinted tile;
   its media placeholder above still carries a visual. */
/* Domain marks — CSS-drawn only. Decorative, aria-hidden in markup,
   and never the sole carrier of meaning: each card also shows its
   number and its domain name in text. */
.domain-card__mark {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-alt);
  overflow: hidden;
}

.domain-card__mark::before,
.domain-card__mark::after {
  content: "";
  position: absolute;
  display: block;
}

/* 01 Artificial Intelligence — node grid */
.domain-card__mark--ai::before,
.domain-card__mark[data-mark="artificial-intelligence"]::before {
  inset: 8px;
  background-image: radial-gradient(
    circle,
    var(--color-primary) 0 1.7px,
    transparent 2px
  );
  background-size: 11px 11px;
  background-position: center;
}

/* 02 Generative AI — concentric rings */
.domain-card__mark--genai::before,
.domain-card__mark[data-mark="generative-ai"]::before {
  inset: 0;
  background-image: radial-gradient(
    circle at 50% 50%,
    var(--color-primary) 0 3px,
    transparent 3px 8px,
    var(--color-primary) 8px 9.5px,
    transparent 9.5px 15px,
    var(--color-primary) 15px 16.5px,
    transparent 16.5px
  );
}

/* 03 Blockchain — linked blocks on a diagonal */
.domain-card__mark--blockchain::before,
.domain-card__mark[data-mark="blockchain"]::before {
  inset: 0;
  background-image: linear-gradient(var(--color-primary), var(--color-primary)),
    linear-gradient(var(--color-primary), var(--color-primary)),
    linear-gradient(var(--color-primary), var(--color-primary));
  background-size: 11px 11px, 11px 11px, 11px 11px;
  background-position: 7px 7px, 18px 18px, 29px 29px;
  background-repeat: no-repeat;
}

/* 04 Cloud Computing — stacked platform layers */
.domain-card__mark--cloud::before,
.domain-card__mark[data-mark="cloud-computing"]::before {
  inset: 0;
  background-image: linear-gradient(var(--color-primary), var(--color-primary)),
    linear-gradient(var(--color-primary), var(--color-primary)),
    linear-gradient(var(--color-primary), var(--color-primary));
  background-size: 26px 3px, 20px 3px, 14px 3px;
  background-position: 11px 15px, 14px 22px, 17px 29px;
  background-repeat: no-repeat;
}

/* 05 Cybersecurity — shield outline with a secured core */
.domain-card__mark--cyber::before,
.domain-card__mark[data-mark="cybersecurity"]::before {
  width: 22px;
  height: 22px;
  top: 12px;
  left: 12px;
  border: 2px solid var(--color-primary);
  transform: rotate(45deg);
}

.domain-card__mark--cyber::after,
.domain-card__mark[data-mark="cybersecurity"]::after {
  width: 7px;
  height: 7px;
  top: 20px;
  left: 20px;
  border-radius: 50%;
  background-color: var(--color-primary);
}

/* 06 Web & Mobile Development — framed viewport */
.domain-card__mark--web::before,
.domain-card__mark[data-mark="web-mobile-development"]::before {
  top: 12px;
  left: 10px;
  width: 28px;
  height: 24px;
  border: 2px solid var(--color-primary);
  border-radius: 2px;
}

.domain-card__mark--web::after,
.domain-card__mark[data-mark="web-mobile-development"]::after {
  top: 12px;
  left: 10px;
  width: 28px;
  height: 7px;
  background-color: var(--color-primary);
}

/* 07 Internet of Things — connected nodes */
.domain-card__mark--iot::before,
.domain-card__mark[data-mark="internet-of-things"]::before {
  inset: 0;
  background-image: radial-gradient(
      circle at 50% 50%,
      var(--color-primary) 0 4.5px,
      transparent 5px
    ),
    radial-gradient(circle at 50% 14%, var(--color-primary) 0 3px, transparent 3.4px),
    radial-gradient(circle at 50% 86%, var(--color-primary) 0 3px, transparent 3.4px),
    radial-gradient(circle at 14% 50%, var(--color-primary) 0 3px, transparent 3.4px),
    radial-gradient(circle at 86% 50%, var(--color-primary) 0 3px, transparent 3.4px);
}

.domain-card__mark--iot::after,
.domain-card__mark[data-mark="internet-of-things"]::after {
  inset: 0;
  background-image: linear-gradient(var(--color-primary), var(--color-primary)),
    linear-gradient(var(--color-primary), var(--color-primary));
  background-size: 1.5px 26px, 26px 1.5px;
  background-position: center, center;
  background-repeat: no-repeat;
  opacity: 0.45;
}

/* ============================================================
   Data-driven offering cards — shared media slot and states
   Used by any card rendered from assets/data/ (Internship
   domains today; Certification pathways and other catalogues
   later). No image files are required: until an approved image
   exists, a CSS-only placeholder fills the same 8:5 slot, so
   dimensions never change and no broken-image icon can appear.
   Placeholders contain no text, numbers or logos.
   ============================================================ */

.offering-media {
  --media-accent: var(--brand-orange);
  --media-accent-2: var(--brand-gold);
  --media-glow-x: 78%;
  --media-glow-y: 22%;
  position: relative;
  display: block;
  aspect-ratio: 8 / 5;
  /* Bleeds to the card edges; the card keeps its own padding. */
  margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) var(--space-8);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--brand-black);
  overflow: hidden;
}

.offering-media__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder: charcoal-to-burgundy field, one restrained warm
   light source, and a technology-specific abstract pattern. */
.offering-media__placeholder {
  position: absolute;
  inset: 0;
  display: block;
  /* Fallback for browsers without color-mix(). */
  background-image: linear-gradient(135deg, #1A1413 0%, var(--brand-burgundy) 100%);
  background-image:
    radial-gradient(
      circle at var(--media-glow-x) var(--media-glow-y),
      color-mix(in srgb, var(--media-accent) 45%, transparent) 0,
      transparent 55%
    ),
    linear-gradient(135deg, #1A1413 0%, var(--brand-burgundy) 100%);
}

.offering-media__placeholder::before,
.offering-media__placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
}

/* Default pattern (any key without a dedicated treatment):
   a fine technical grid. */
.offering-media__placeholder::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Thin gold baseline shared by every placeholder. */
.offering-media__placeholder::after {
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--media-accent-2), var(--media-accent));
  opacity: 0.85;
}

/* ---- Per-key treatments (shared by Internship and Certification
   keys of the same name). Only CSS custom properties and the
   ::before pattern change, so dimensions stay identical. ---- */

/* Artificial Intelligence — neural node field */
.offering-media[data-image-key="artificial-intelligence"] .offering-media__placeholder::before {
  background-image: radial-gradient(circle, rgba(245, 120, 4, 0.75) 0 2px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.18) 0 1px, transparent 1.5px);
  background-size: 28px 28px, 14px 14px;
  background-position: 0 0, 7px 7px;
}

/* Generative AI — expanding generative rings */
.offering-media[data-image-key="generative-ai"] {
  --media-glow-x: 50%;
  --media-glow-y: 50%;
  --media-accent: var(--brand-gold);
}
.offering-media[data-image-key="generative-ai"] .offering-media__placeholder::before {
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(245, 120, 4, 0.6) 0 5px,
    transparent 5px 22px,
    rgba(201, 162, 74, 0.6) 22px 24px,
    transparent 24px 44px,
    rgba(201, 162, 74, 0.6) 44px 46px,
    transparent 46px 68px,
    rgba(201, 162, 74, 0.35) 68px 70px,
    transparent 70px 94px,
    rgba(201, 162, 74, 0.2) 94px 96px,
    transparent 96px
  );
  background-size: auto;
}

/* Blockchain — linked blocks on a diagonal lattice */
.offering-media[data-image-key="blockchain"] .offering-media__placeholder::before {
  background-image:
    conic-gradient(from 270deg at 12px 12px, rgba(245, 120, 4, 0.7) 25%, transparent 0),
    linear-gradient(45deg, transparent 49%, rgba(201, 162, 74, 0.4) 49% 51%, transparent 51%);
  background-size: 48px 48px, 48px 48px;
  background-position: 18px 18px, 0 0;
}

/* Cloud Computing — layered platform strata */
.offering-media[data-image-key="cloud-computing"] {
  --media-glow-x: 30%;
  --media-glow-y: 20%;
}
.offering-media[data-image-key="cloud-computing"] .offering-media__placeholder::before {
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 16px,
    rgba(255, 255, 255, 0.16) 16px 18px,
    transparent 18px 26px,
    rgba(245, 120, 4, 0.35) 26px 27px
  );
  -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 60%, #000 30%, transparent 75%);
  background-size: auto;
}

/* Cybersecurity (and Cybersecurity & IT Support) — secure lattice */
.offering-media[data-image-key="cybersecurity"],
.offering-media[data-image-key="cybersecurity-it-support"] {
  --media-accent: var(--brand-gold);
  --media-glow-x: 50%;
  --media-glow-y: 45%;
}
.offering-media[data-image-key="cybersecurity"] .offering-media__placeholder::before,
.offering-media[data-image-key="cybersecurity-it-support"] .offering-media__placeholder::before {
  background-image:
    repeating-linear-gradient(45deg, rgba(201, 162, 74, 0.35) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(201, 162, 74, 0.35) 0 1px, transparent 1px 22px);
  background-size: auto;
}

/* Web & Mobile Development (and Software Development & Full
   Stack) — interface panels */
.offering-media[data-image-key="web-mobile-development"] .offering-media__placeholder::before,
.offering-media[data-image-key="software-development-full-stack"] .offering-media__placeholder::before {
  background-image:
    conic-gradient(from 270deg at 36px 5px, rgba(245, 120, 4, 0.7) 25%, transparent 0),
    linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 96px 64px;
  background-position: 12px 12px, 0 0, 0 0;
}

/* Internet of Things — connected sensor network */
.offering-media[data-image-key="internet-of-things"] .offering-media__placeholder::before {
  background-image:
    radial-gradient(circle, rgba(245, 120, 4, 0.8) 0 3px, transparent 3.5px),
    linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: 20px 20px, 0 20px, 20px 0;
}

/* Data Science & Machine Learning — analytic columns */
.offering-media[data-image-key="data-science-machine-learning"] .offering-media__placeholder::before {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(201, 162, 74, 0.5) 0 8px,
    transparent 8px 20px
  );
  -webkit-mask-image: linear-gradient(20deg, #000 0 35%, transparent 70%);
  mask-image: linear-gradient(20deg, #000 0 35%, transparent 70%);
  background-size: auto;
}

/* Business Intelligence — horizontal dashboard bars */
.offering-media[data-image-key="business-intelligence"] {
  --media-glow-x: 82%;
  --media-glow-y: 75%;
}
.offering-media[data-image-key="business-intelligence"] .offering-media__placeholder::before {
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 12px,
    rgba(245, 120, 4, 0.55) 12px 20px,
    transparent 20px 26px
  );
  -webkit-mask-image: linear-gradient(90deg, #000 0 30%, rgba(0, 0, 0, 0.4) 55%, transparent 80%);
  mask-image: linear-gradient(90deg, #000 0 30%, rgba(0, 0, 0, 0.4) 55%, transparent 80%);
  background-size: auto;
}

/* Big Data & Analytics — high-volume data streams */
.offering-media[data-image-key="big-data-analytics"] .offering-media__placeholder::before {
  background-image: repeating-linear-gradient(
    115deg,
    transparent 0 10px,
    rgba(245, 120, 4, 0.4) 10px 11px,
    transparent 11px 18px,
    rgba(255, 255, 255, 0.12) 18px 19px
  );
  background-size: auto;
}

/* Databases — structured storage tiers */
.offering-media[data-image-key="databases"] {
  --media-glow-x: 50%;
  --media-glow-y: 85%;
}
.offering-media[data-image-key="databases"] .offering-media__placeholder::before {
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 14px,
    rgba(201, 162, 74, 0.6) 14px 17px,
    transparent 17px 22px,
    rgba(255, 255, 255, 0.14) 22px 23px
  );
  -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 32%, #000 68%, transparent 78%);
  mask-image: linear-gradient(90deg, transparent 22%, #000 32%, #000 68%, transparent 78%);
  background-size: auto;
}

/* DevOps, Agile & Cloud-Native — continuous delivery loops */
.offering-media[data-image-key="devops-agile-cloud-native"] {
  --media-glow-x: 50%;
  --media-glow-y: 50%;
}
.offering-media[data-image-key="devops-agile-cloud-native"] .offering-media__placeholder::before {
  background-image:
    radial-gradient(circle at 38% 50%, transparent 0 32px, rgba(245, 120, 4, 0.6) 32px 35px, transparent 35px),
    radial-gradient(circle at 62% 50%, transparent 0 32px, rgba(201, 162, 74, 0.6) 32px 35px, transparent 35px);
  background-size: auto;
}

/* ---- Status label (text, never colour alone) ---- */
.offering-status,
.domain-card .offering-status {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-alt);
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 1;
}

.domain-card[data-offering-status="unavailable"] .domain-card__description {
  opacity: 0.7;
}

/* ---- No-JavaScript and error fallback ---- */
.offering-fallback {
  margin-top: var(--space-10);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent-premium);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-alt);
  max-width: 60ch;
}

.offering-fallback--error {
  border-left-color: var(--color-primary);
}

.offering-fallback[hidden],
[data-offering-collection][hidden] {
  display: none;
}

/* ---- What Students Gain ---- */
.gain-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-10) var(--space-8);
  margin-top: var(--space-10);
}

.gain-card {
  border-left: 3px solid var(--color-accent-premium);
  padding-left: var(--space-6);
}

.gain-card h3 {
  font-size: 1rem;
  margin-bottom: var(--space-3);
}

.gain-card p {
  font-size: 0.92rem;
  opacity: 0.85;
  margin-bottom: 0;
}

/* ---- How the Internship Works ---- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-10);
}

.step-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}

.step-card__num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.step-card h3 {
  font-size: 1rem;
  margin-bottom: var(--space-3);
}

.step-card p {
  font-size: 0.92rem;
  opacity: 0.85;
  margin-bottom: 0;
}

/* ---- Learning journey ---- */
.journey {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-block: var(--space-10);
}

.journey__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 44px;
  padding: var(--space-3) var(--space-8) var(--space-3) var(--space-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
}

.journey__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: 0.82rem;
}

/* Decorative connector only. The visible step numbers and the ordered
   list carry the sequence, so nothing is lost when it is hidden. */
.journey__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  transform: translateY(-50%) rotate(45deg);
}

.journey__note {
  max-width: 72ch;
  opacity: 0.85;
  margin-bottom: 0;
}

/* ---- Student milestone ---- */
.milestone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
  border-top: 1px solid var(--color-border-on-dark);
  padding-top: var(--space-10);
}

.milestone__figure {
  font-size: clamp(2.75rem, 2rem + 3vw, 4.25rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent-premium);
  margin: 0;
}

.milestone__lead {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--color-text-inverse);
}

.milestone__support {
  font-size: 0.95rem;
  opacity: 0.88;
  margin-bottom: 0;
  max-width: 70ch;
}

/* ---- Stipend opportunity ---- */
.stipend-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent-premium);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-10);
}

.stipend-callout__figure {
  font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-primary);
  margin: 0;
}

.stipend-callout__body p {
  max-width: 70ch;
}

.stipend-callout__note {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 0;
}

/* ---- University recognition ---- */
.recognition-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.recognition-item {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-8);
  font-size: 0.95rem;
  font-weight: 600;
}

.recognition-note {
  font-size: 0.9rem;
  opacity: 0.8;
  max-width: 78ch;
  margin-top: var(--space-10);
  margin-bottom: 0;
}

/* ---- Final CTA ---- */
.final-cta {
  max-width: 70ch;
}

.final-cta__lead {
  font-size: 1.05rem;
  color: var(--color-text-inverse);
  opacity: 0.9;
  margin-bottom: 0;
}

.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

/* Gold primary button for dark bands — burgundy on black would not
   hold a comfortable contrast ratio. */
.btn-primary--on-dark {
  background-color: var(--color-accent-premium);
  color: var(--brand-black);
}

/* ============================================================
   IBM Internship responsive additions
   ============================================================ */

@media (max-width: 1080px) {
  .domain-grid,
  .gain-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .value-strip,
  .reason-grid,
  .domain-grid,
  .gain-grid,
  .recognition-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .milestone,
  .stipend-callout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

@media (max-width: 600px) {
  .value-strip,
  .reason-grid,
  .domain-grid,
  .gain-grid,
  .recognition-grid,
  .steps-grid {
    grid-template-columns: 1fr;
  }

  .journey {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .journey__item {
    justify-content: flex-start;
  }

  /* The decorative chevron points sideways; stacked, it would point
     into nothing, so it is removed and the numbers carry the order. */
  .journey__item:not(:last-child)::after {
    display: none;
  }

  .stipend-callout {
    padding: var(--space-10) var(--space-8);
  }

  .final-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* The homepage points grid already carries its own bottom margin. */
.programme-summary__points + .value-strip {
  margin-top: 0;
}

/* ============================================================
   V5 ADDITIONS — IBM Certifications catalogue (certifications.html)
   and the homepage IBM Certifications section.
   Everything in this block is new in the IBM Certifications task.
   No external font, framework, icon library, image, tracker or
   analytics dependency is introduced. Every visual marker below is
   drawn in CSS only, using the approved brand palette tokens.
   ============================================================ */

/* Anchor offset for the in-page catalogue links. */
#why,
#who,
#catalogue,
#how,
#institutional {
  scroll-margin-top: 96px;
}

/* The audience section uses three columns rather than the
   four-column default of the shared gain grid. */
.gain-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---- Shared bullet list ---- */
.cert-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.cert-list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: 0.94rem;
  line-height: 1.55;
}

.cert-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 2px;
  background-color: var(--color-accent-premium);
}

.cert-list--on-dark li {
  color: var(--color-text-inverse);
  opacity: 0.92;
}

/* ---- Search and filter controls ---- */
.cert-controls {
  margin-top: var(--space-10);
  display: grid;
  gap: var(--space-8);
}

.cert-search {
  max-width: 34rem;
}

.cert-field__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-3);
}

.cert-search__input,
.cert-field__select {
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.cert-search__input:focus-visible,
.cert-field__select:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.cert-field__help {
  margin: var(--space-3) 0 0 0;
  font-size: 0.85rem;
  opacity: 0.75;
}

.cert-filters {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
  align-items: end;
  background-color: var(--color-surface-alt);
}

.cert-filters__legend {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  padding-inline: var(--space-3);
}

.cert-field--action {
  display: flex;
  align-items: flex-end;
}

.cert-clear {
  width: 100%;
}

.cert-clear:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---- Results summary and active filters ---- */
.cert-summary {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.cert-summary__status {
  margin: 0;
  font-weight: 600;
  color: var(--color-primary);
}

.cert-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cert-active__label {
  font-size: 0.85rem;
  opacity: 0.75;
}

.cert-active__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.cert-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 34px;
  padding: var(--space-2) var(--space-4);
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--color-primary);
  background-color: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  cursor: pointer;
}

.cert-chip:hover {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.cert-chip:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.cert-chip__remove {
  font-size: 1rem;
  line-height: 1;
}

/* ---- Catalogue card grid ---- */
.cert-grid {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

.cert-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}

.cert-card[hidden] {
  display: none;
}

.cert-card__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cert-card__tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

.cert-card__title {
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0;
}

.cert-card__description {
  font-size: 0.9rem;
  line-height: 1.55;
  opacity: 0.85;
  margin: 0;
}

.cert-card__meta {
  margin: 0;
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.cert-card__meta-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--space-4);
  font-size: 0.85rem;
}

.cert-card__meta-label {
  font-weight: 600;
  opacity: 0.7;
}

.cert-card__meta-value {
  margin: 0;
}

/* Pushes the action to the foot of the card so buttons align
   across a row regardless of description length. */
.cert-card__action {
  margin-top: auto;
  align-self: flex-start;
}

.cert-empty {
  margin-top: var(--space-10);
  padding: var(--space-10);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-alt);
  text-align: center;
}

.cert-empty[hidden] {
  display: none;
}

.cert-note {
  margin-top: var(--space-10);
  font-size: 0.85rem;
  opacity: 0.75;
  max-width: 80ch;
}

/* ---- Institutional section ---- */
.cert-institution {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-10);
  align-items: center;
  margin-top: var(--space-8);
}

/* ---- Pathway detail dialog ---- */
.cert-dialog {
  width: min(56rem, calc(100vw - 2rem));
  max-width: 100%;
  max-height: min(86vh, 56rem);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  overflow: hidden;
}

.cert-dialog::backdrop {
  background-color: rgba(7, 6, 1, 0.6);
}

.cert-dialog__inner {
  display: flex;
  flex-direction: column;
  max-height: min(86vh, 56rem);
}

.cert-dialog__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-10);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-surface-alt);
}

.cert-dialog__title {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0;
  flex: 1 1 auto;
}

/* The heading takes focus when the dialog opens, so it keeps a
   visible focus treatment of its own. */
.cert-dialog__title:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 4px;
}

.cert-dialog__close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-primary);
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.cert-dialog__close:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.cert-dialog__close:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.cert-dialog__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-8) var(--space-10);
  display: grid;
  gap: var(--space-8);
}

.cert-dialog__section {
  display: grid;
  gap: var(--space-4);
}

.cert-dialog__heading {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0;
}

.cert-dialog__section p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
}

.cert-dialog__info {
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.cert-dialog__info-row {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: var(--space-4);
  font-size: 0.9rem;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.cert-dialog__info-row dt {
  font-weight: 600;
  opacity: 0.7;
}

.cert-dialog__info-row dd {
  margin: 0;
}

.cert-modules {
  margin: 0;
  padding-left: var(--space-8);
  display: grid;
  gap: var(--space-3);
}

.cert-modules__item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: 0.9rem;
  line-height: 1.5;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.cert-modules__name {
  flex: 1 1 18rem;
  min-width: 0;
}

.cert-modules__duration {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

.cert-dialog__qualifier {
  font-size: 0.88rem;
  opacity: 0.85;
}

.cert-dialog__actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-10);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface-alt);
}

/* ---- IBM Certifications responsive additions ---- */
@media (max-width: 1080px) {
  .cert-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cert-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .gain-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cert-institution {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 600px) {
  .gain-grid--three,
  .cert-grid,
  .cert-filters {
    grid-template-columns: 1fr;
  }

  .cert-card__meta-row,
  .cert-dialog__info-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .cert-dialog {
    width: calc(100vw - 1rem);
    max-height: 92vh;
  }

  .cert-dialog__inner {
    max-height: 92vh;
  }

  .cert-dialog__head,
  .cert-dialog__body,
  .cert-dialog__actions {
    padding-inline: var(--space-6);
  }

  .cert-dialog__actions .btn {
    width: 100%;
  }

  .cert-card__action {
    width: 100%;
  }
}

/* ============================================================
   V5 data-driven collections: Hackathons, Events & Experiences
   and Institutional Partners (rendered by site.js from
   assets/data/). Reuses the shared .offering-media slot and
   status styles above; carousel styles are unchanged.
   ============================================================ */

/* Rendered lists use <ul>; keep the grid layouts list-neutral. */
ul.card-grid,
.hackathon-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- Events & Experiences cards ---- */
.experience-card h3 {
  font-size: 1.02rem;
  margin-bottom: 0;
}

.experience-card .offering-media {
  margin-bottom: var(--space-4);
}

.experience-card .status-tag {
  align-self: flex-start;
  margin-bottom: 0;
}

.offering-cta {
  align-self: flex-start;
  margin-top: auto;
}

/* ---- Hackathon cards ---- */
.hackathon-list {
  display: grid;
  gap: var(--space-10);
  margin-bottom: var(--space-16);
}

.hackathon-card.feature-block {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  align-items: center;
  gap: var(--space-10);
  margin-bottom: 0;
}

/* The image slot sits inside the card padding here (no bleed). */
.hackathon-card .offering-media {
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.hackathon-card__body > * + * {
  margin-top: var(--space-4);
}

.hackathon-card__body .status-tag {
  margin-bottom: 0;
}

.hackathon-card__body > .offering-details {
  margin-top: var(--space-6);
}

.hackathon-card__host {
  font-weight: 600;
}

.hackathon-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ---- Optional record details (shown only when data exists) ---- */
.offering-details {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  font-size: 0.9rem;
}

.offering-details__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
}

.offering-details dt {
  font-weight: 700;
}

.offering-details dt::after {
  content: ":";
}

.offering-details dd {
  margin: 0;
}

/* ---- Institutional Partners: placeholder and states ---- */
.partner-tile__placeholder {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background:
    radial-gradient(circle, var(--color-accent-premium) 0 5px, transparent 6px),
    var(--color-surface-alt);
}

.partner-tile__relationship {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-text-primary);
  opacity: 0.8;
  margin: 0;
  max-width: 26ch;
}

/* Fallback message on the dark partners band stays readable. */
.partners .offering-fallback {
  color: var(--color-text-primary);
}

.partners .offering-fallback a {
  color: var(--color-primary);
}

/* ---- Image placeholders: Hackathons and Events & Experiences
   keys (see the internal image register). Same 8:5 slot and base field as
   every other key; only the accent, light position and a
   restrained abstract pattern change. No text, numbers or logos. */

/* Hackathons */
.offering-media[data-image-key="hackathon-innovation"] {
  --media-glow-x: 70%;
  --media-glow-y: 30%;
}
.offering-media[data-image-key="hackathon-innovation"] .offering-media__placeholder::before {
  background-image:
    linear-gradient(45deg, transparent 48%, rgba(245, 120, 4, 0.45) 49% 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(255, 255, 255, 0.10) 49% 51%, transparent 52%);
  background-size: 48px 48px;
}

.offering-media[data-image-key="hackathon-collaboration"] {
  --media-glow-x: 30%;
  --media-glow-y: 60%;
  --media-accent: var(--brand-gold);
}
.offering-media[data-image-key="hackathon-collaboration"] .offering-media__placeholder::before {
  background-image:
    radial-gradient(circle, rgba(201, 162, 74, 0.7) 0 3px, transparent 3.5px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 36px 36px, 36px 36px;
}

.offering-media[data-image-key="hackathon-showcase"] {
  --media-glow-x: 50%;
  --media-glow-y: 20%;
}
.offering-media[data-image-key="hackathon-showcase"] .offering-media__placeholder::before {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06) 0 2px,
    transparent 2px 28px
  );
}

/* Events & Experiences */
.offering-media[data-image-key="model-united-nations"] {
  --media-glow-x: 50%;
  --media-glow-y: 50%;
  --media-accent: var(--brand-gold);
}
.offering-media[data-image-key="model-united-nations"] .offering-media__placeholder::before {
  background-image: radial-gradient(
    circle at 50% 50%,
    transparent 0 30px,
    rgba(201, 162, 74, 0.45) 30px 31px,
    transparent 31px 52px,
    rgba(255, 255, 255, 0.14) 52px 53px,
    transparent 53px
  );
}

.offering-media[data-image-key="workshops-masterclasses"] .offering-media__placeholder::before {
  background-image:
    linear-gradient(rgba(245, 120, 4, 0.35) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 100% 32px, 32px 32px;
}

.offering-media[data-image-key="expert-sessions"] {
  --media-glow-x: 25%;
  --media-glow-y: 35%;
}
.offering-media[data-image-key="expert-sessions"] .offering-media__placeholder::before {
  background-image: radial-gradient(circle at 25% 35%, transparent 0 40px, rgba(255, 255, 255, 0.12) 40px 41px, transparent 41px 70px, rgba(245, 120, 4, 0.35) 70px 71px, transparent 71px);
}

.offering-media[data-image-key="student-contests"] {
  --media-accent: var(--brand-gold);
}
.offering-media[data-image-key="student-contests"] .offering-media__placeholder::before {
  background-image: linear-gradient(
    to top,
    rgba(201, 162, 74, 0.35) 0 30%,
    transparent 30%
  ),
  repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, 0.08) 22px 24px);
  background-size: 100% 100%, 100% 100%;
}

.offering-media[data-image-key="faculty-development"] {
  --media-glow-x: 80%;
  --media-glow-y: 70%;
}
.offering-media[data-image-key="faculty-development"] .offering-media__placeholder::before {
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(45deg, rgba(245, 120, 4, 0.25) 1px, transparent 1px);
  background-size: 22px 22px, 44px 44px;
}

.offering-media[data-image-key="conferences-summits"] {
  --media-glow-x: 50%;
  --media-glow-y: 100%;
  --media-accent: var(--brand-gold);
}
.offering-media[data-image-key="conferences-summits"] .offering-media__placeholder::before {
  background-image: repeating-radial-gradient(
    circle at 50% 110%,
    transparent 0 18px,
    rgba(255, 255, 255, 0.09) 18px 19px
  );
}

.offering-media[data-image-key="campus-engagement"] .offering-media__placeholder::before {
  background-image:
    radial-gradient(circle, rgba(245, 120, 4, 0.6) 0 2px, transparent 2.5px),
    radial-gradient(circle, rgba(201, 162, 74, 0.5) 0 2px, transparent 2.5px);
  background-size: 40px 40px, 40px 40px;
  background-position: 0 0, 20px 20px;
}

.offering-media[data-image-key="leadership-employability"] {
  --media-glow-x: 85%;
  --media-glow-y: 15%;
}
.offering-media[data-image-key="leadership-employability"] .offering-media__placeholder::before {
  background-image: linear-gradient(
    30deg,
    transparent 45%,
    rgba(245, 120, 4, 0.4) 46% 47%,
    transparent 48%
  ),
  linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 100% 100%, 28px 28px;
}

@media (max-width: 860px) {
  .hackathon-card.feature-block {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* ---- V5: Certification cards with the shared media slot ----
   Cards are generated from assets/data/certification-pathways.js
   and now carry the shared 8:5 offering-media slot (CSS
   placeholder until approved category images exist). The media
   slot's gold baseline replaces the card's top accent, and the
   space below the slot is reduced because the card already uses
   a flex gap. */
.cert-card {
  border-top-width: 1px;
  border-top-color: var(--color-border);
  overflow: hidden;
}

.cert-card > .offering-media {
  margin-bottom: 0;
  border-radius: 0;
}

/* ============================================================
   V5 layout stability (CLS correction)
   Problem: site.js is deferred, so the browser can paint the
   page before it runs. Anything site.js then collapses, reveals
   or fills moved the page (measured CLS up to 0.45 at 390px).
   Rule: the first paint must already have the final geometry.

   Every rule below applies only when scripting is enabled, so
   true no-JavaScript visitors keep the existing fallbacks
   unchanged. Browsers without the `scripting` media feature
   ignore the block and behave exactly as before.

   Safety release: if JavaScript is on but site.js never runs
   (file missing or broken), a 4-second, zero-length animation
   releases every reservation and shows every fallback, so no
   content or navigation can stay hidden. When site.js runs
   normally the selectors stop matching before the delay ends.
   ============================================================ */

@keyframes lc-stability-release {
  to {
    visibility: visible;
    max-height: none;
    min-height: 0;
  }
}

@keyframes lc-nav-release {
  to {
    visibility: visible;
    max-height: none;
  }
}

@keyframes lc-header-gap-release {
  to {
    row-gap: var(--space-4);
  }
}

/* 1. Mobile navigation: start collapsed before site.js runs.
      site.js always sets data-collapsed, so this selector only
      matches the pre-initialisation frame. */
@media (max-width: 860px) and (scripting: enabled) {
  .site-nav:not([data-collapsed]) {
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    animation: lc-nav-release 0s linear 4s forwards;
  }

  /* The nav wraps onto its own flex row; drop the header's row gap
     above it while the nav is still uninitialised and empty. */
  .site-header__inner:has(> .site-nav:not([data-collapsed])) {
    row-gap: 0;
    animation: lc-header-gap-release 0s linear 4s forwards;
  }
}

/* 2. Homepage carousel.
      a) Stack all slides in one grid cell, so the banner is
         always as tall as its tallest slide and rotation never
         moves the content below it. Inactive slides stay out of
         view, out of the accessibility tree and unfocusable
         (visibility: hidden), exactly as with display: none.
      b) Reserve the banner's space before site.js renders it. */
.carousel[data-js="true"] .carousel__viewport {
  display: grid;
}

.carousel[data-js="true"] .carousel__slide {
  grid-area: 1 / 1;
  display: grid;
  align-content: center;
}

.carousel[data-js="true"] .carousel__slide[hidden] {
  display: grid;
  visibility: hidden;
}

/* Keep the slide's .container at its normal full width inside the
   slide grid (auto margins would otherwise shrink it to content). */
.carousel[data-js="true"] .carousel__slide-inner {
  width: 100%;
}

:root {
  /* Floor for the banner height, set at or just below its
     measured natural height (tallest slide; the compact controls
     are overlaid inside the slide padding and add no height) so
     it never adds empty space. Measured 23 Sept 2026 with the
     current four slides: 484-491px below 359px wide, 464-481px
     up to 600px, 497-523px up to 960px, 523-537px up to 1199px
     and 538px from 1200px.
     min-height never clips; longer copy simply grows the banner. */
  --carousel-reserve: 33.5rem;
}

@media (max-width: 1199px) {
  :root { --carousel-reserve: 32.5rem; }
}

@media (max-width: 960px) {
  :root { --carousel-reserve: 31rem; }
}

@media (max-width: 600px) {
  :root { --carousel-reserve: 29rem; }
}

@media (max-width: 358px) {
  :root { --carousel-reserve: 30.25rem; }
}

@media (scripting: enabled) {
  .carousel {
    min-height: var(--carousel-reserve);
  }

  .carousel[hidden]:not([data-carousel-state="unavailable"]) {
    display: block;
    visibility: hidden;
    animation: lc-stability-release 0s linear 4s forwards;
  }

  .carousel[data-carousel-state="unavailable"] {
    display: none;
  }
}

/* 2b. Homepage carousel — approved banner images (six-slide
       integration, 4 Oct 2026; generic, driven by
       assets/data/carousel-slides.js).
       - A banner is shown whole inside a frame with the banner's
         own aspect ratio (1920:700 desktop/tablet, 800:1000 at
         600px and narrower). The image is centred with
         max-width/max-height, so it is never stretched, cropped
         or enlarged beyond its native size; any spare space shows
         the slide's imageBackground colour.
       - All widths: a slim band below the banner holds the
         dots and Pause/Play, so the controls never cover banner
         text or embedded CTAs (mobile band added 5 Oct 2026; the
         Hackathons and Events & Experiences mobile artwork places
         its CTA near the lower edge).
       - All slides stay stacked in one grid cell (section 2
         above), so the carousel is as tall as its tallest slide
         and never changes height during rotation. */
:root {
  --carousel-control-band: 4.5rem; /* 12px gap + 46px controls + 14px */
  --carousel-media-deep-burgundy: #45030d;
  --carousel-media-deep-burgundy: color-mix(in srgb, var(--brand-burgundy) 55%, var(--brand-black));
  --carousel-media-deep-burgundy-mobile: #610113;
  --carousel-media-deep-burgundy-mobile: color-mix(in srgb, var(--brand-burgundy) 80%, var(--brand-black));
  --carousel-media-light: var(--color-surface);
}

.carousel[data-js="true"] .carousel__slide--media {
  padding: 0;
  align-content: stretch;
}

.carousel__slide--bg-deep-burgundy {
  --carousel-media-bg: var(--carousel-media-deep-burgundy);
}

.carousel__slide--bg-light {
  --carousel-media-bg: var(--carousel-media-light);
}

.carousel__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: var(--carousel-control-band);
  background-color: var(--carousel-media-bg, var(--carousel-media-deep-burgundy));
}

.carousel__frame {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1920px;
  aspect-ratio: 1920 / 700;
  color: inherit;
}

.carousel__picture {
  display: block;
}

.carousel__image {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* Focus ring for a clickable banner: a black and white double ring
   drawn over the image edge, visible on light and dark artwork. */
.carousel__frame--link:focus-visible {
  outline: none;
}

.carousel__frame--link:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 3px solid var(--brand-black);
  box-shadow: inset 0 0 0 3px var(--color-text-inverse);
  pointer-events: none;
}

/* CSS/text treatment inside a mixed slide (e.g. Why Learncross on
   mobile): same spacing as an ordinary CSS slide. */
.carousel__panel {
  display: grid;
  align-content: center;
  padding-block: var(--space-20);
}

/* Exactly one treatment per breakpoint in a mixed slide.
   Matches the <source media="(max-width: 600px)"> in site.js. */
.carousel .carousel__only-mobile {
  display: none;
}

@media (max-width: 600px) {
  .carousel .carousel__only-desktop {
    display: none;
  }

  .carousel .carousel__media.carousel__only-mobile {
    display: flex;
  }

  .carousel .carousel__panel.carousel__only-mobile {
    display: grid;
  }

  .carousel__slide--bg-deep-burgundy {
    --carousel-media-bg: var(--carousel-media-deep-burgundy-mobile);
  }

  /* The control band (padding-bottom from the base rule) is kept
     at this width too, so the controls sit below the artwork. */
  .carousel__frame {
    aspect-ratio: 800 / 1000;
  }

  .carousel__panel {
    padding-top: var(--space-16);
    padding-bottom: var(--space-20);
  }
}

/* Reserve the banner's height before site.js renders it: the
   larger of the CSS-slide floor above and the banner frame
   (plus the control band on desktop/tablet). The viewport takes
   the same floor so the slides fill it with no gap. */
@media (scripting: enabled) {
  .carousel {
    min-height: max(
      var(--carousel-reserve),
      calc(min(100vw, 1920px) * 700 / 1920 + var(--carousel-control-band))
    );
  }

  .carousel[data-js="true"] .carousel__viewport {
    min-height: inherit;
  }
}

@media (scripting: enabled) and (max-width: 600px) {
  .carousel {
    min-height: max(var(--carousel-reserve), calc(125vw + var(--carousel-control-band)));
  }
}

/* 3. Data-driven card lists (Internship domains, Hackathons,
      Events & Experiences, Institutional Partners).
      Before site.js renders the cards, keep the list in the flow
      and reserve space down to the fold, so the content after
      it is already below the visible area and cannot jump. The
      "needs JavaScript" notice is not flashed to visitors who
      have JavaScript; it still appears for no-JS visitors, on a
      data error (site.js marks the list), or after the release. */
@media (scripting: enabled) {
  [data-offering-collection][hidden]:not([data-offering-state="error"]) {
    display: block;
    visibility: hidden;
    min-height: 100vh;
    min-height: 100svh;
    animation: lc-stability-release 0s linear 4s forwards;
  }

  [data-offering-fallback]:not(.offering-fallback--error):not([hidden]) {
    visibility: hidden;
    animation: lc-stability-release 0s linear 4s forwards;
  }
}

/* ============================================================
   V5 ADDITIONS — Homepage programme sections restyle
   (23 Sept 2026). Scoped to index.html only via the new
   .home-prog* classes; no existing shared rule above is altered,
   so internship.html and certifications.html are unaffected.
   Composition adapted from Homepage Prototype V3 (two-column
   header, burgundy highlight panel, contained audience cards);
   no V3 wording or claims are reused. CSS-only markers; no
   images, icon fonts or external dependencies.
   ============================================================ */

.home-prog {
  padding-block: var(--space-24);
}

/* Clear separation between the two programme sections */
.home-prog--certifications {
  border-top: 1px solid var(--color-border);
}

.home-prog__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-16);
  align-items: center;
}

.home-prog__head--certifications {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
}

.home-prog__intro h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 22ch;
  margin-bottom: var(--space-8);
}

.home-prog__badge {
  margin-block: var(--space-4) var(--space-6);
}

.home-prog__qualifier {
  max-width: 62ch;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-primary);
  opacity: 0.8;
  padding-left: var(--space-6);
  border-left: 3px solid var(--color-accent-premium);
  margin-block: var(--space-8) 0;
}

.home-prog__qualifier--footer {
  max-width: 78ch;
  margin-top: var(--space-12);
}

.home-prog__actions {
  margin-top: var(--space-10);
}

/* ---- 01 IBM Internship: burgundy highlight panel ---- */
.home-prog-panel {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  border-top: 4px solid var(--color-accent-premium);
}

.home-prog-panel__title {
  font-size: 1.2rem;
  margin-bottom: var(--space-2);
}

.home-prog-panel__sub {
  font-size: 0.92rem;
  opacity: 0.9;
  margin-bottom: var(--space-10);
}

.home-prog-panel__stat {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.home-prog-panel__figure {
  font-size: clamp(4rem, 3rem + 3vw, 5.75rem);
  font-weight: 700;
  line-height: 0.9;
  color: var(--color-accent-premium);
}

.home-prog-panel__figure-label {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  max-width: 14ch;
}

.home-prog-panel__list {
  border-top: 1px solid var(--color-border-on-dark);
}

.home-prog-panel__list li {
  position: relative;
  padding: var(--space-4) 0 var(--space-4) var(--space-8);
  border-bottom: 1px solid var(--color-border-on-dark);
  font-size: 0.95rem;
}

.home-prog-panel__list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Small gold diamond marker (decorative) */
.home-prog-panel__list li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 1.2rem;
  width: 0.45rem;
  height: 0.45rem;
  background-color: var(--color-accent-premium);
  transform: rotate(45deg);
}

/* ---- 01 IBM Internship: benefit row ---- */
.home-prog-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-10);
  margin-top: var(--space-20);
}

.home-prog-benefits__item {
  border-top: 3px solid var(--color-accent-energy);
  padding-top: var(--space-6);
}

.home-prog-benefits__item h3 {
  font-size: 1.05rem;
  margin-bottom: var(--space-3);
}

.home-prog-benefits__item p {
  font-size: 0.93rem;
  opacity: 0.85;
  margin-bottom: 0;
}

/* ---- 02 IBM Certifications: contained value tiles ---- */
.home-prog-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.home-prog-values__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent-premium);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}

.home-prog-values__figure {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-primary);
}

.home-prog-values__label {
  font-size: 0.9rem;
  opacity: 0.85;
}

/* ---- 02 IBM Certifications: audience cards ---- */
.home-prog-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-16);
}

.home-prog-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-10);
}

.home-prog-card h3 {
  font-size: 1.1rem;
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: 2px solid var(--color-primary);
}

.home-prog-card ul {
  display: flex;
  flex-direction: column;
}

.home-prog-card li {
  position: relative;
  padding: var(--space-4) 0 var(--space-4) var(--space-8);
  border-top: 1px solid var(--color-border);
  font-size: 0.93rem;
  line-height: 1.5;
}

.home-prog-card li:first-child {
  border-top: 0;
  padding-top: 0;
}

/* CSS-drawn tick (decorative) */
.home-prog-card li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: calc(var(--space-4) + 0.3rem);
  width: 0.4rem;
  height: 0.75rem;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg);
}

.home-prog-card li:first-child::before {
  top: 0.3rem;
}

/* ---- Responsive ---- */
@media (max-width: 1080px) {
  .home-prog-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-10) var(--space-12);
  }
}

@media (max-width: 960px) {
  .home-prog {
    padding-block: var(--space-20);
  }

  .home-prog__head,
  .home-prog__head--certifications {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
  }

  .home-prog__intro h2 {
    max-width: 26ch;
  }

  .home-prog-panel {
    max-width: 40rem;
  }

  .home-prog-values {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-prog-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
}

@media (max-width: 720px) {
  .home-prog-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .home-prog {
    padding-block: var(--space-16);
  }

  .home-prog-panel {
    padding: var(--space-8);
  }

  .home-prog-panel__sub,
  .home-prog-panel__stat {
    margin-bottom: var(--space-6);
  }

  .home-prog-panel__figure {
    font-size: 3.5rem;
  }

  .home-prog-panel__figure-label {
    font-size: 1.05rem;
  }

  .home-prog-benefits {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    margin-top: var(--space-16);
  }

  .home-prog-values__item {
    padding: var(--space-6);
  }

  .home-prog-card {
    padding: var(--space-8);
  }

  .home-prog__actions .btn {
    width: 100%;
  }
}

/* ============================================================
   V5 ADDITIONS — IBM Internship rotating highlights
   (23 Sept 2026). Scoped to the burgundy panel on index.html
   via new .home-hl* classes; no existing rule above is altered.
   Behaviour: site.js (initInternshipHighlights).
   Content: assets/data/internship-homepage-highlights.js.

   Stable dimensions: every highlight sits in the same grid cell
   of the stage, so the stage is always as tall as the tallest
   highlight at the current width and never resizes while
   rotating. Inactive highlights are hidden with visibility
   (which keeps their space) plus aria-hidden/inert from JS.
   Transition: a short opacity fade only (removed under reduced
   motion by the global rule above).
   ============================================================ */

.home-hl {
  margin-bottom: var(--space-10);
}

.home-hl__stage {
  display: grid;
}

.home-hl__item {
  grid-area: 1 / 1;
  min-width: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms ease, visibility 0s linear 250ms;
}

.home-hl__item[data-active="true"] {
  visibility: visible;
  opacity: 1;
  transition: opacity 250ms ease, visibility 0s linear 0s;
}

.home-hl__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.home-hl__value {
  font-size: clamp(3rem, 2.4rem + 2.2vw, 4.25rem);
  font-weight: 700;
  line-height: 0.95;
  color: var(--color-accent-premium);
  font-variant-numeric: lining-nums;
  overflow-wrap: anywhere;
}

.home-hl__headline {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}

.home-hl__text {
  font-size: 0.92rem;
  line-height: 1.55;
  opacity: 0.9;
  max-width: 44ch;
}

/* Compact controls (23 Sept 2026 refinement): indicator dots and
   an icon-only Pause/Play, left-aligned under the highlight text.
   Hidden without JS (they would do nothing). The negative inline
   margin lines the first visible dot up with the text edge while
   keeping each button's full hit area. */
.home-hl__controls {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  margin-left: -11px;
}

.home-hl[data-js="true"] .home-hl__controls {
  display: flex;
}

.home-hl__dots {
  display: flex;
  align-items: center;
}

/* Visible dot 10px; the button itself is 32 x 40 px. */
.home-hl__dot {
  width: 32px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: rgba(246, 244, 241, 0.7);
}

.home-hl__dot::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background-color: transparent;
}

.home-hl__dot:hover {
  color: var(--color-text-inverse);
}

/* Active: Golden Tan and filled (shape change, not colour alone). */
.home-hl__dot[aria-current="true"] {
  color: var(--color-accent-premium);
}

.home-hl__dot[aria-current="true"]::before {
  background-color: currentColor;
}

.home-hl__toggle {
  color: var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.4);
  margin-left: var(--space-2);
}

.home-hl__toggle:hover {
  border-color: var(--color-accent-premium);
  color: var(--color-accent-premium);
}

/* White focus ring: high contrast on burgundy, not colour-only. */
.home-hl__dot:focus-visible,
.home-hl__toggle:focus-visible {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: 0;
}

@media (max-width: 600px) {
  .home-hl {
    margin-bottom: var(--space-6);
  }

  .home-hl__value {
    font-size: 3rem;
  }

  .home-hl__headline {
    font-size: 1.05rem;
  }
}