/* Scoped to .tv-v2 (via :where(), so every rule keeps the specificity of the original design stylesheet) so sections of different designs can share a page. */
:where(.tv-v2) {
  /* Padding scale */
  --Padding-p-none: 0px;
  --Padding-p-tiny: 4px;
  --Padding-p-small: 8px;
  --Padding-p-medium: 16px;
  --Padding-p-regular: 24px;
  --Padding-p-large: 32px;
  --Padding-p-xl: 32px;
  --Padding-p-xxlarge: 48px;
  --Padding-p-xl2: 48px;
  --Padding-p-xl3: 64px;
  --Padding-p-xl4: 80px;

  /* Corner radius */
  --Corner-Radius-sharp: 0px;
  --Corner-Radius-small: 8px;
  --Corner-Radius-smooth-edge: 16px;
  --Corner-Radius-infinity: 9999px;

  /* Opacity */
  --Opacity-opacity-100: 1;

  /* Colours */
  --Colours-Shades-Neutral-N---50: #FFFFFF;
  --Colours-Shades-Neutral-N---100: #F7F7F7;
  --Colours-Shades-Neutral-N---200: #EAEAEA;
  --Colours-Shades-Neutral-N---300: #D6D6D6;
  --Colours-Shades-Neutral-N---700: #5C5C5C;
  --Colours-Shades-Neutral-N---800: #3D3D3D;
  --Colours-Shades-Neutral-N---900: #1A1A1A;
  --Colours-Shades-Secondary-S---50: #EFFAF4;
  --Colours-Shades-Secondary-S---100: #D6F2E4;
  --Colours-Shades-Secondary-S---400: #7AD9B0;
  --Colours-Shades-Secondary-S---500: #57CC99;
  --Colours-Shades-Secondary-S---600: #3FA87A;
  --Colours-Shades-Primary-P---50: #F2F5F7;
  --Colours-Shades-Primary-P---500: #22577A;
  --Colours-Shades-Primary-P---600: #1b4662;
  --green: #4CAF7D;
  --green-dark: #3d9468;
  --navy: #16365C;
  --navy-deep: #102c4d;
  --blue: #2B8EF5;
  --text-dark: #16365C;
  --text-body: #4A6381;
  --white: #FFFFFF;
  --yellow: #F5C04E;
  --pagination-active: #57CC99;
  --pagination-idle: #EAEAEA;

  /* Layout */
  --topbar-h: 56px;
  --topbar-pad-x: 40px;

  /* Bootstrap overrides */
  --bs-body-font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  --bs-body-color: var(--text-dark);
  --bs-border-radius-pill: var(--Corner-Radius-infinity);
}

:where(.tv-v2) {
  overflow-x: hidden;
}

:where(.tv-v2) a {
  text-decoration: none;
  color: inherit;
}

/* ---------- Top bar ---------- */
:where(.tv-v2) .topbar {
  height: var(--topbar-h);
  max-width: 1920px;
  background: var(--navy);
  color: #D7E3F2;
  font-size: 13px;
}

:where(.tv-v2) .topbar__left {
  background: var(--green);
  color: var(--white);
  padding-left: var(--topbar-pad-x);
  padding-right: calc(var(--topbar-pad-x) + 18px);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}

:where(.tv-v2) .topbar__dot {
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, .7);
}

:where(.tv-v2) .topbar__divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .25);
}

:where(.tv-v2) .topbar__right {
  padding-right: var(--topbar-pad-x);
}

:where(.tv-v2) .socials a {
  width: 22px;
  height: 22px;
  background: var(--white);
  color: var(--navy);
  transition: transform .2s ease;
}

:where(.tv-v2) .socials a:hover {
  transform: translateY(-2px);
}

:where(.tv-v2) .socials svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

/* ---------- Header / nav ---------- */
:where(.tv-v2) .header {
  box-shadow: 0 1px 0 rgba(22, 54, 92, .06);
}

:where(.tv-v2) .logo__img {
  height: 44px;
  width: auto;
}

:where(.tv-v2) .nav-link--main {
  padding: 6px 2px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 500;
  position: relative;
}

:where(.tv-v2) .nav-link--main::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--green);
  transition: width .25s ease;
}

:where(.tv-v2) .nav-link--main:hover::after,
:where(.tv-v2) .nav-link--main.active::after {
  width: 100%;
}

/* ---------- Buttons ---------- */
:where(.tv-v2) .btn {
  font-weight: 500;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

:where(.tv-v2) .btn:hover {
  transform: translateY(-1px);
}

:where(.tv-v2) .btn-navy {
  background: var(--navy);
  color: var(--white);
  padding: 10px 26px;
  font-size: 14px;
}

:where(.tv-v2) .btn-navy:hover {
  background: var(--navy-deep);
  color: var(--white);
}

:where(.tv-v2) .btn-green {
  background: var(--green);
  color: var(--white);
  padding: 10px 22px;
  font-size: 14px;
}

:where(.tv-v2) .btn-green:hover {
  background: var(--green-dark);
  color: var(--white);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--green) 35%, transparent);
}

/* Button / Primary / Default / Large / Only icon = On */
/* size-14 (56px), p-3 (12px), rounded-[999px] */
:where(.tv-v2) .btn-icon {
  width: 56px;
  height: 56px;
  gap: var(--Padding-p-none);
  padding: 12px;
  border-radius: 999px;
  opacity: var(--Opacity-opacity-100);
  background: var(--Colours-Shades-Primary-P---500);
  color: var(--white);
  transition: background .2s ease, transform .2s ease;
}

:where(.tv-v2) .btn-icon:hover {
  background: var(--Colours-Shades-Primary-P---600);
  color: var(--white);
}

:where(.tv-v2) .btn-icon:active {
  transform: scale(.94);
}

:where(.tv-v2) .btn-icon:focus-visible {
  outline: 3px solid rgba(34, 87, 122, .35);
  outline-offset: 2px;
}

:where(.tv-v2) .btn-icon svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

:where(.tv-v2) .lang svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* ---------- Variant 2: header ---------- */
:where(.tv-v2) .v2masthead {
  max-width: 1920px;
}

/* topbar: px-36 pb-3, N-50 bg */
:where(.tv-v2) .v2topbar {
  max-width: 1920px;
  padding-inline: 144px;
  padding-bottom: 12px;
  background: var(--Colours-Shades-Neutral-N---50);
  font-family: 'Ubuntu', system-ui, sans-serif;
}

:where(.tv-v2) .v2topbar__inner {
  max-width: 1620px;
  gap: var(--Padding-p-regular);
}

:where(.tv-v2) .v2topbar__side {
  flex: 1;
  height: 80px;
  padding-block: 12px;
  gap: 12px;
}

:where(.tv-v2) .v2topbar__label {
  color: var(--Colours-Shades-Neutral-N---900);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

:where(.tv-v2) .v2topbar__ci {
  padding: var(--Padding-p-small);
  background: var(--Colours-Shades-Neutral-N---100);
  border-radius: 24px;
  color: var(--Colours-Shades-Neutral-N---900);
}

:where(.tv-v2) .v2topbar__ci svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}

:where(.tv-v2) .v2topbar__divider {
  width: 1px;
  height: 24px;
  background: var(--Colours-Shades-Neutral-N---300);
}

:where(.tv-v2) .v2socials a {
  padding: var(--Padding-p-small);
  background: var(--Colours-Shades-Neutral-N---100);
  border-radius: 24px;
  color: var(--Colours-Shades-Neutral-N---900);
  transition: background .2s ease, color .2s ease;
}

:where(.tv-v2) .v2socials a:hover {
  background: var(--Colours-Shades-Secondary-S---500);
  color: var(--Colours-Shades-Neutral-N---50);
}

:where(.tv-v2) .v2socials svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}

/* badge: w-64 (256px), p-3, 24px bottom corners */
:where(.tv-v2) .v2logo {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 60;
  transform: translateX(-50%);
  width: 256px;
  padding: 12px;
  gap: 10px;
  border-bottom-right-radius: 24px;
  border-bottom-left-radius: 24px;
  background: var(--Colours-Shades-Primary-P---500);
  opacity: var(--Opacity-opacity-100);
}

:where(.tv-v2) .v2logo__img {
  width: 176px;
  height: 56px;
  object-fit: contain;
  display: block;
}

/* nav bar: h-20 (80px), px-36 py-6, S-500 */
:where(.tv-v2) .v2header {
  max-width: 1920px;
}

:where(.tv-v2) .v2nav {
  background: var(--brand-secondary, var(--Colours-Shades-Secondary-S---500));
  font-family: 'Ubuntu', system-ui, sans-serif;
}

:where(.tv-v2) .v2nav__inner {
  max-width: 1620px;
  min-height: 80px;
  padding-inline: 144px;
  padding-block: var(--Padding-p-regular);
}

/* link: px-3 py-1, 20px Ubuntu; hidden navy underline */
:where(.tv-v2) .v2nav__link {
  position: relative;
  z-index: 0;
  padding: 4px 12px;
  color: var(--brand-secondary-contrast, var(--Colours-Shades-Neutral-N---50));
  font-size: 20px;
  line-height: 32px;
  font-weight: 400;
}

/* 1px navy rule that grows up into a 38px pill behind the label
   (timeline: height 1 -> 38, translateY 0 -> -37, opacity 0 -> 100) */
:where(.tv-v2) .v2nav__link::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 1px;
  z-index: -1;
  height: 1px;
  border-radius: 4px;
  background: var(--Colours-Shades-Primary-P---500);
  opacity: 0;
  transition: height 1s cubic-bezier(.16, 1.1, .3, 1),
    opacity 1s cubic-bezier(.16, 1.1, .3, 1);
}

/* outrank Bootstrap's .navbar-nav .nav-link.active, which forces near-black */
:where(.tv-v2) .v2nav .v2nav__link,
:where(.tv-v2) .v2nav .v2nav__link:hover,
:where(.tv-v2) .v2nav .v2nav__link.active,
:where(.tv-v2) .v2nav .v2nav__link:focus {
  color: var(--brand-secondary-contrast, var(--Colours-Shades-Neutral-N---50));
}

/* label thickens on hover: timeline has the text 48 -> 55 and the item
   72 -> 79 with padding unchanged, i.e. the glyphs themselves get wider */
:where(.tv-v2) .v2nav .v2nav__link:hover,
:where(.tv-v2) .v2nav .v2nav__link.active {
  font-weight: 500;
}

:where(.tv-v2) .v2nav__link:hover::after,
:where(.tv-v2) .v2nav__link.active::after {
  height: 38px;
  opacity: 1;
}

:where(.tv-v2) .v2lang {
  padding: var(--Padding-p-small) var(--Padding-p-medium);
  border-radius: 4px;
  color: var(--brand-secondary-contrast, var(--Colours-Shades-Neutral-N---50));
  font-size: 20px;
  line-height: 32px;
  font-weight: 400;
  cursor: pointer;
}

:where(.tv-v2) .v2lang svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

:where(.tv-v2) .v2nav__actions {
  gap: var(--Padding-p-medium);
  padding-left: var(--Padding-p-medium);
  border-left: 1px solid var(--Colours-Shades-Neutral-N---50);
}

:where(.tv-v2) .v2btn-login,
:where(.tv-v2) .v2btn-admission {
  padding: var(--Padding-p-small) var(--Padding-p-medium);
  border-radius: 24px;
  font-family: 'Ubuntu', system-ui, sans-serif;
  font-size: 20px;
  line-height: 32px;
  font-weight: 400;
  white-space: nowrap;
}

:where(.tv-v2) .v2btn-login {
  background: var(--Colours-Shades-Neutral-N---50);
  color: var(--Colours-Shades-Neutral-N---900);
}

:where(.tv-v2) .v2btn-login:hover {
  background: var(--Colours-Shades-Neutral-N---100);
  color: var(--Colours-Shades-Neutral-N---900);
}

:where(.tv-v2) .v2btn-admission {
  background: var(--Colours-Shades-Primary-P---500);
  color: var(--Colours-Shades-Neutral-N---50);
}

:where(.tv-v2) .v2btn-admission:hover {
  background: var(--Colours-Shades-Primary-P---600);
  color: var(--Colours-Shades-Neutral-N---50);
}

@media (max-width: 1400px) {

  :where(.tv-v2) .v2nav__link,
:where(.tv-v2) .v2lang,
:where(.tv-v2) .v2btn-login,
:where(.tv-v2) .v2btn-admission {
    font-size: 16px;
    line-height: 24px;
  }
}

@media (max-width: 1200px) {
  :where(.tv-v2) .v2topbar {
    padding-inline: var(--topbar-pad-x);
  }

  :where(.tv-v2) .v2nav__inner {
    padding-inline: var(--topbar-pad-x);
  }
}

@media (max-width: 991.98px) {
  :where(.tv-v2) .v2logo {
    width: 190px;
  }

  :where(.tv-v2) .v2logo__img {
    width: 100%;
    height: 44px;
  }

  :where(.tv-v2) .v2nav__inner {
    flex-wrap: wrap;
    min-height: 0;
  }

  :where(.tv-v2) .v2nav .navbar-collapse {
    width: 100%;
  }

  :where(.tv-v2) .v2nav__actions {
    padding-left: 0;
    border-left: 0;
  }

  /* collapsed menu: the language selector and the buttons start where the labels of the links above do */
  :where(.tv-v2) .v2nav__cta {
    padding-inline: 12px;
  }

  :where(.tv-v2) .v2nav__cta .v2lang {
    padding-inline: 0;
  }
}

@media (max-width: 575.98px) {
  /* language on its own line, Login and Admission open together below it instead of wrapping one by one */
  :where(.tv-v2) .v2nav__lang {
    flex: 0 0 100%;
  }

  :where(.tv-v2) .v2logo {
    width: 150px;
  }

  :where(.tv-v2) .v2logo__img {
    height: 36px;
  }
}

/* ---------- Hero slider ---------- */
/* Hero Banner - Style 1: 1920×900, aspect-ratio 32/15 */
:where(.tv-v2) .hero {
  max-width: 1920px;
  height: 900px;
  max-height: 900px;
  padding-bottom: var(--Padding-p-large);
  aspect-ratio: 32 / 15;
  opacity: var(--Opacity-opacity-100);
}

:where(.tv-v2) .hero .carousel,
:where(.tv-v2) .hero .carousel-inner,
:where(.tv-v2) .hero .carousel-item {
  position: absolute;
  inset: 0;
}

:where(.tv-v2) .hero .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* arrow row: full 1920px, px-10, top 422px, space-between */
:where(.tv-v2) .hero__arrows {
  position: absolute;
  left: 0;
  top: 422px;
  width: 100%;
  max-width: 1920px;
  padding-inline: 40px;
  z-index: 4;
}

:where(.tv-v2) .hero__arrow:active {
  transform: scale(.94);
}

/* the slider arrows look the same under the pointer (no colour change, no lift) */
:where(.tv-v2) .hero__arrow:hover {
  background: var(--Colours-Shades-Primary-P---500);
  color: var(--white);
  transform: none;
}

/* Pagination - Style 1: p-2, rounded-2xl, N-50 bg, 1px N-200 outline */
:where(.tv-v2) .hero .carousel-indicators {
  position: relative;
  z-index: 4;
  margin: 0;
  padding: var(--Padding-p-small);
  gap: var(--Padding-p-small);
  background: var(--Colours-Shades-Neutral-N---50);
  border-radius: 16px;
  outline: 1px solid var(--Colours-Shades-Neutral-N---200);
  outline-offset: -1px;
}

:where(.tv-v2) .hero .carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  margin: 0;
  border: 0;
  border-radius: 24px;
  background-color: var(--Colours-Shades-Neutral-N---200);
  opacity: 1;
  text-indent: 0;
  transition: width 1.5s linear, background-color 1.5s linear;
}

:where(.tv-v2) .hero .carousel-indicators [data-bs-target].active {
  width: 28px;
  background-color: var(--Colours-Shades-Secondary-S---500);
}

/* ---------- About Us (v2) ---------- */
/* px-36 py-20, bg P-50, gap 24 */
:where(.tv-v2) .about {
  max-width: 1920px;
  padding: var(--Padding-p-xl4) 144px;
  gap: var(--Padding-p-regular);
  background: var(--Colours-Shades-Primary-P---50);
  font-family: 'Ubuntu', system-ui, sans-serif;
}

/* container 1620, gap 24, both columns h-[570px] */
:where(.tv-v2) .about__grid {
  max-width: 1620px;
  gap: var(--Padding-p-regular);
}

:where(.tv-v2) .about__media {
  flex: 1;
  min-height: 570px;
  gap: 10px;
}

:where(.tv-v2) .about__photo {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
  display: block;
}

/* right card: p-6, rounded-2xl, N-50, gap 16 */
:where(.tv-v2) .about__content {
  flex: 1;
  min-height: 570px;
  min-width: 0;
  padding: var(--Padding-p-regular);
  gap: var(--Padding-p-medium);
  background: var(--Colours-Shades-Neutral-N---50);
  border-radius: 16px;
}

:where(.tv-v2) .about__stack {
  flex: 1;
  gap: var(--Padding-p-regular);
}

/* tag: px-3 py-2, S-50 bg, 1px S-100 outline, rounded-xl */
:where(.tv-v2) .about__tag {
  padding: var(--Padding-p-small) 12px;
  border-radius: 12px;
  background: var(--Colours-Shades-Secondary-S---50);
  outline: 1px solid var(--Colours-Shades-Secondary-S---100);
  outline-offset: -1px;
  color: var(--Colours-Shades-Secondary-S---600);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

:where(.tv-v2) .about__tag svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* title: text-2xl medium leading-7 */
:where(.tv-v2) .about__title {
  color: var(--Colours-Shades-Neutral-N---900);
  font-size: 24px;
  line-height: 28px;
  font-weight: 500;
}

/* description: text-base, N-800, leading-6 */
:where(.tv-v2) .about__text {
  color: var(--Colours-Shades-Neutral-N---800);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

/* points: stacked rows, p-4, 1px N-200 outline, rounded-xl */
:where(.tv-v2) .about__points {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--Padding-p-medium);
}

:where(.tv-v2) .point {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: var(--Padding-p-medium);
  background: var(--Colours-Shades-Neutral-N---50);
  border-radius: 12px;
  outline: 1px solid var(--Colours-Shades-Neutral-N---200);
  outline-offset: -1px;
}

/* icon: size-11 (44px), p-3, S-500, rounded-3xl */
:where(.tv-v2) .point__icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 12px;
  border-radius: 24px;
  background: var(--Colours-Shades-Secondary-S---500);
  color: var(--Colours-Shades-Neutral-N---50);
}

:where(.tv-v2) .point__icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}

:where(.tv-v2) .point__body {
  flex: 1;
  min-width: 0;
  gap: var(--Padding-p-small);
}

:where(.tv-v2) .point__title {
  color: var(--Colours-Shades-Neutral-N---900);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}

:where(.tv-v2) .point__text {
  color: var(--Colours-Shades-Neutral-N---700);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Read More: pl-4 pr-2 py-2, P-500, rounded-3xl */
:where(.tv-v2) .btn-read {
  padding: var(--Padding-p-small) var(--Padding-p-small) var(--Padding-p-small) var(--Padding-p-medium);
  gap: var(--Padding-p-small);
  border-radius: 24px;
  background: var(--Colours-Shades-Primary-P---500);
  color: var(--Colours-Shades-Neutral-N---50);
  font-family: 'Ubuntu', system-ui, sans-serif;
  font-size: 20px;
  line-height: 32px;
  font-weight: 400;
}

:where(.tv-v2) .btn-read:hover {
  background: var(--Colours-Shades-Primary-P---600);
  color: var(--Colours-Shades-Neutral-N---50);
}

:where(.tv-v2) .btn-read i {
  padding: var(--Padding-p-tiny);
  border-radius: 16px;
  background: var(--Colours-Shades-Neutral-N---50);
}

:where(.tv-v2) .btn-read svg {
  width: 20px;
  height: 20px;
  fill: var(--Colours-Shades-Primary-P---500);
  display: block;
}

/* ---------- Programs (v2) ---------- */
/* green card: p-10, S-500, rounded-2xl, gap-10 */
:where(.tv-v2) .programs {
  max-width: 1620px;
  margin-inline: auto;
  padding: 40px;
  gap: 40px;
  background: var(--Colours-Shades-Secondary-S---500);
  border-radius: 16px;
  font-family: 'Ubuntu', system-ui, sans-serif;
}

:where(.tv-v2) .programs__wrap {
  max-width: 1920px;
  padding-inline: 144px;
}

:where(.tv-v2) .programs__head {
  width: 100%;
  max-width: 846px;
  gap: 12px;
}

/* tag: px-3 py-2, N-50 bg, 1px N-200 outline, rounded-xl */
:where(.tv-v2) .programs__tag {
  padding: var(--Padding-p-small) 12px;
  border-radius: 12px;
  background: var(--Colours-Shades-Neutral-N---50);
  outline: 1px solid var(--Colours-Shades-Neutral-N---200);
  outline-offset: -1px;
  color: var(--Colours-Shades-Neutral-N---900);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

:where(.tv-v2) .programs__tag svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

:where(.tv-v2) .programs__title {
  color: var(--Colours-Shades-Neutral-N---50);
  font-size: 24px;
  line-height: 28px;
  font-weight: 500;
}

:where(.tv-v2) .programs__text {
  color: var(--Colours-Shades-Neutral-N---50);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

/* track */
:where(.tv-v2) .programs__viewport {
  width: 100%;
  max-width: 1620px;
  overflow: hidden;
}

:where(.tv-v2) .programs__track {
  display: flex;
  gap: var(--Padding-p-regular);
  transition: transform .45s ease;
}

/* card: size-96 (384px), rounded-xl */
:where(.tv-v2) .program {
  position: relative;
  flex: 0 0 calc((100% - var(--Padding-p-regular) * 3) / 4);
  height: 384px;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(189, 189, 189, .16);
  overflow: hidden;
}

:where(.tv-v2) .program:focus-visible {
  outline: 2px solid var(--Colours-Shades-Primary-P---500);
  outline-offset: 2px;
}

:where(.tv-v2) .program__media {
  position: absolute;
  inset: 0;
}

:where(.tv-v2) .program__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* white panel: h-44 (176px) at top 310px; hover slides it to 130 */
/* panel is full-bleed and anchored to the card bottom */
:where(.tv-v2) .program__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--Colours-Shades-Neutral-N---50);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

/* grade strip: h-14, px-3 py-4, 1px N-200 outline; hover 48 → 24 */
:where(.tv-v2) .program__grade {
  height: 56px;
  padding: var(--Padding-p-medium) 12px;
  background: var(--Colours-Shades-Neutral-N---50);
  outline: 1px solid var(--Colours-Shades-Neutral-N---200);
  outline-offset: -1px;
  color: var(--Colours-Shades-Neutral-N---900);
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  border-radius: 0;
  overflow: hidden;
  transition:
    height .3s cubic-bezier(.42, 0, .58, 1),
    border-radius .3s cubic-bezier(.42, 0, .58, 1),
    background-color .3s cubic-bezier(.42, 0, .58, 1),
    color .3s cubic-bezier(.42, 0, .58, 1),
    outline-color .3s cubic-bezier(.42, 0, .58, 1);
}

/* revealed (pointer hover, keyboard focus, tap on a device that cannot hover): the strip shrinks, fills navy and
   the label goes white; hover is limited to devices that can hover so it does not stick after a tap */
:where(.tv-v2) .program:focus-visible .program__grade,
:where(.tv-v2) .program.is-open .program__grade {
  height: 48px;
  /* navy strip rounds off at the bottom once the white panel drops away */
  border-radius: 0 0 12px 12px;
  background: var(--Colours-Shades-Primary-P---500);
  outline-color: var(--Colours-Shades-Primary-P---500);
  color: var(--Colours-Shades-Neutral-N---50);
}

@media (hover: hover) and (pointer: fine) {
  :where(.tv-v2) .program:hover .program__grade {
    height: 48px;
    /* navy strip rounds off at the bottom once the white panel drops away */
    border-radius: 0 0 12px 12px;
    background: var(--Colours-Shades-Primary-P---500);
    outline-color: var(--Colours-Shades-Primary-P---500);
    color: var(--Colours-Shades-Neutral-N---50);
  }
}

:where(.tv-v2) .program__content {
  padding: var(--Padding-p-medium);
  gap: 4px;
  /* the card shows the name only (padding + one 32px line); the description slides up on hover, focus or tap.
     A program without a description has nothing to reveal and stays like this. */
  height: 64px;
  overflow: hidden;
  transition: height .3s cubic-bezier(.42, 0, .58, 1);
}

/* the name keeps its full line while the description is cut off below it */
:where(.tv-v2) .program__content > * {
  flex-shrink: 0;
}

:where(.tv-v2) .program:not(.program--plain):focus-visible .program__content,
:where(.tv-v2) .program:not(.program--plain).is-open .program__content {
  height: 144px;
}

@media (hover: hover) and (pointer: fine) {
  :where(.tv-v2) .program:not(.program--plain):hover .program__content {
    height: 144px;
  }
}

/* title: text-xl medium leading-8, 1 line; hover scales to .875 */
:where(.tv-v2) .program__name {
  color: var(--Colours-Shades-Neutral-N---900);
  font-size: 20px;
  line-height: 32px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  transform-origin: left center;
  transition: scale .3s cubic-bezier(.42, 0, .58, 1);
}

:where(.tv-v2) .program:focus-visible .program__name,
:where(.tv-v2) .program.is-open .program__name {
  scale: .875;
}

@media (hover: hover) and (pointer: fine) {
  :where(.tv-v2) .program:hover .program__name {
    scale: .875;
  }
}

/* description: text-base N-700 leading-6, 2 lines */
:where(.tv-v2) .program__text {
  color: var(--Colours-Shades-Neutral-N---700);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  opacity: 0;
  transition: opacity .3s cubic-bezier(.42, 0, .58, 1);
}

:where(.tv-v2) .program:focus-visible .program__text,
:where(.tv-v2) .program.is-open .program__text {
  -webkit-line-clamp: 3;
  line-clamp: 3;
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  :where(.tv-v2) .program:hover .program__text {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    opacity: 1;
  }
}

/* rail: S-400 track, white fill, h-2 */
:where(.tv-v2) .programs__foot {
  width: 100%;
  max-width: 1620px;
  gap: var(--Padding-p-regular);
}

:where(.tv-v2) .programs__rail {
  flex: 1;
  height: 8px;
  border-radius: 12px;
  background: var(--Colours-Shades-Secondary-S---400);
  overflow: hidden;
}

:where(.tv-v2) .programs__fill {
  height: 100%;
  border-radius: 8px;
  background: var(--Colours-Shades-Neutral-N---50);
  transition: width .45s ease;
}

/* nav: p-3, P-500, rounded-3xl */
:where(.tv-v2) .programs__nav {
  padding: 12px;
  border-radius: 24px;
  background: var(--Colours-Shades-Primary-P---500);
  color: var(--Colours-Shades-Neutral-N---50);
  transition: background .2s ease, transform .2s ease;
}

:where(.tv-v2) .programs__nav:hover {
  background: var(--Colours-Shades-Primary-P---600);
  color: var(--Colours-Shades-Neutral-N---50);
}

:where(.tv-v2) .programs__nav:active {
  transform: scale(.92);
}

:where(.tv-v2) .programs__nav svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}

/* ---------- Admission CTA (v2) ---------- */
/* section: px-36 py-20, transparent */
:where(.tv-v2) .cta {
  max-width: 1920px;
  padding: var(--Padding-p-xl4) 144px;
  gap: var(--Padding-p-regular);
  font-family: 'Ubuntu', system-ui, sans-serif;
}

/* card: 1620×384, p-10, P-500, rounded-2xl, gap-10 */
:where(.tv-v2) .cta__inner {
  width: 100%;
  max-width: 1620px;
  height: 384px;
  padding: 40px;
  gap: 40px;
  background: var(--Colours-Shades-Primary-P---500);
  border-radius: 16px;
  overflow: hidden;
}

:where(.tv-v2) .cta__left {
  flex: 1;
  gap: var(--Padding-p-xl);
}

/* tag: px-3 py-2, N-50 bg, 1px N-100 outline, rounded-xl */
:where(.tv-v2) .cta__tag {
  padding: var(--Padding-p-small) 12px;
  border-radius: 12px;
  background: var(--Colours-Shades-Neutral-N---50);
  outline: 1px solid var(--Colours-Shades-Neutral-N---100);
  outline-offset: -1px;
  color: var(--Colours-Shades-Neutral-N---900);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

:where(.tv-v2) .cta__tag svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* title: text-3xl bold leading-8 */
:where(.tv-v2) .cta__title {
  color: var(--Colours-Shades-Neutral-N---50);
  font-size: 30px;
  line-height: 32px;
  font-weight: 700;
}

:where(.tv-v2) .cta__text {
  color: var(--Colours-Shades-Neutral-N---50);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

/* Register Now: pl-4 pr-2 py-2, S-500, rounded-3xl */
:where(.tv-v2) .btn-register {
  padding: var(--Padding-p-small) var(--Padding-p-small) var(--Padding-p-small) var(--Padding-p-medium);
  gap: var(--Padding-p-small);
  border-radius: 24px;
  background: var(--Colours-Shades-Secondary-S---500);
  color: var(--Colours-Shades-Neutral-N---50);
  font-family: 'Ubuntu', system-ui, sans-serif;
  font-size: 20px;
  line-height: 32px;
  font-weight: 400;
}

:where(.tv-v2) .btn-register:hover {
  background: var(--Colours-Shades-Secondary-S---600);
  color: var(--Colours-Shades-Neutral-N---50);
}

:where(.tv-v2) .btn-register i {
  padding: var(--Padding-p-tiny);
  border-radius: 16px;
  background: var(--Colours-Shades-Neutral-N---50);
}

:where(.tv-v2) .btn-register svg {
  width: 20px;
  height: 20px;
  fill: var(--Colours-Shades-Secondary-S---500);
  display: block;
}

/* right: 621×384 stage */
:where(.tv-v2) .cta__right {
  flex: 0 0 621px;
  width: 621px;
  height: 384px;
}

/* green block: 621×320 at top 23px, rounded-3xl, top edge slopes up to the right */
:where(.tv-v2) .cta__panel {
  position: absolute;
  left: 0;
  top: 23px;
  width: 621px;
  height: 320px;
  background: var(--Colours-Shades-Secondary-S---500);
  border-radius: 24px;
  overflow: hidden;
}

/* wavy line texture over the green */
:where(.tv-v2) .cta__wash {
  position: absolute;
  z-index: 1;
  left: -10px;
  top: -3px;
  width: 661px;
  height: 384px;
  opacity: .10;
  background: var(--Colours-Shades-Neutral-N---50);
}

/* ring: size-52 with a 47px white outline, bleeding off the left */
:where(.tv-v2) .cta__ring {
  position: absolute;
  left: -79px;
  top: 7px;
  width: 208px;
  height: 208px;
  border-radius: 50%;
  outline: 47px solid var(--Colours-Shades-Neutral-N---50);
}

/* solid dot, bottom right */
:where(.tv-v2) .cta__dot {
  position: absolute;
  left: 464px;
  top: 229px;
  width: 224px;
  height: 224px;
  border-radius: 50%;
  background: var(--Colours-Shades-Neutral-N---50);
}

/* cutout: 288×384 at left 182, top -20 */
:where(.tv-v2) .cta__cutout {
  position: absolute;
  left: 182px;
  top: -20px;
  width: 273px;
  height: 389px;
  object-fit: contain;
  object-position: bottom center;
  z-index: 2;
}

/* ---------- Announcements (v2) ---------- */
:where(.tv-v2) .news {
  max-width: 1920px;
  padding: var(--Padding-p-xl4) 144px;
  font-family: 'Ubuntu', system-ui, sans-serif;
}

:where(.tv-v2) .news__grid {
  max-width: 1620px;
  gap: 40px;
}

/* left column */
:where(.tv-v2) .news__left {
  flex: 1;
  min-width: 0;
  gap: var(--Padding-p-xl);
}

:where(.tv-v2) .news__head {
  gap: 12px;
}

:where(.tv-v2) .news__tag {
  padding: var(--Padding-p-small) 12px;
  border-radius: 12px;
  background: var(--Colours-Shades-Secondary-S---50);
  outline: 1px solid var(--Colours-Shades-Secondary-S---100);
  outline-offset: -1px;
  color: var(--Colours-Shades-Secondary-S---600);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

:where(.tv-v2) .news__tag svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

:where(.tv-v2) .news__title {
  color: var(--Colours-Shades-Neutral-N---900);
  font-size: 24px;
  line-height: 28px;
  font-weight: 500;
}

:where(.tv-v2) .news__text {
  color: var(--Colours-Shades-Neutral-N---800);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

:where(.tv-v2) .news__photo {
  width: 100%;
  height: 496px;
  padding: 12px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}

/* right: 702px grey panel, p-6, rounded-2xl */
:where(.tv-v2) .news__panel {
  flex: 1;
  min-width: 0;
  height: 702px;
  padding: var(--Padding-p-regular);
  gap: 12px;
  background: var(--Colours-Shades-Neutral-N---100);
  border-radius: 16px;
  overflow: hidden;
}

:where(.tv-v2) .news__scroll {
  flex: 1;
  gap: var(--Padding-p-regular);
  overflow-y: auto;
  scrollbar-width: none;
}

:where(.tv-v2) .news__scroll::-webkit-scrollbar {
  display: none;
}

/* custom track */
:where(.tv-v2) .news__bar {
  flex: 0 0 6px;
  width: 6px;
  background: var(--Colours-Shades-Neutral-N---50);
  border-radius: 12px;
  overflow: hidden;
}

:where(.tv-v2) .news__thumb {
  width: 100%;
  background: var(--Colours-Shades-Neutral-N---300);
  border-radius: 8px;
}

/* notice card: p-6, N-50, 1px N-200 outline, rounded-xl */
:where(.tv-v2) .notice {
  position: relative;
  width: 100%;
  padding: var(--Padding-p-regular);
  gap: var(--Padding-p-regular);
  background: var(--Colours-Shades-Neutral-N---50);
  border-radius: 12px;
  outline: 1px solid var(--Colours-Shades-Neutral-N---200);
  outline-offset: -1px;
  overflow: hidden;
  transition: background-color .5s cubic-bezier(.2, .8, .3, 1);
}

/* accent bar: 2px at top; on hover it grows to fill the card */
:where(.tv-v2) .notice::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 2px;
  background: var(--Colours-Shades-Primary-P---500);
  transition: height .5s cubic-bezier(.2, .8, .3, 1);
  z-index: 0;
}

:where(.tv-v2) .notice:hover::before {
  height: 100%;
}

:where(.tv-v2) .notice>* {
  position: relative;
  z-index: 1;
}

/* calendar mark */
:where(.tv-v2) .notice__cal {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: var(--Corner-Radius-small);
  background: var(--Colours-Shades-Secondary-S---500);
  color: var(--Colours-Shades-Neutral-N---50);
  overflow: hidden;
}

:where(.tv-v2) .notice__cal::before,
:where(.tv-v2) .notice__cal::after {
  content: "";
  position: absolute;
  top: 4px;
  width: 4px;
  height: 10px;
  border-radius: 2px;
  background: var(--Colours-Shades-Neutral-N---50);
}

:where(.tv-v2) .notice__cal::before {
  left: 12px;
}

:where(.tv-v2) .notice__cal::after {
  right: 12px;
}

:where(.tv-v2) .notice__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 19px;
  height: 3px;
  background: var(--Colours-Shades-Neutral-N---50);
}

:where(.tv-v2) .notice__day {
  position: absolute;
  left: 0;
  right: 0;
  top: 22px;
  text-align: center;
  font-size: 30px;
  line-height: 32px;
  font-weight: 700;
}

:where(.tv-v2) .notice__month {
  color: var(--Colours-Shades-Neutral-N---700);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  transition: color .5s cubic-bezier(.2, .8, .3, 1);
}

:where(.tv-v2) .notice__divider {
  flex: 0 0 1px;
  width: 1px;
  align-self: stretch;
  background: var(--Colours-Shades-Neutral-N---200);
  transition: background-color .5s cubic-bezier(.2, .8, .3, 1);
}

:where(.tv-v2) .notice__body {
  flex: 1;
  min-width: 0;
  gap: var(--Padding-p-small);
}

:where(.tv-v2) .notice__name {
  color: var(--Colours-Shades-Neutral-N---900);
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  transition: color .5s cubic-bezier(.2, .8, .3, 1);
}

:where(.tv-v2) .notice__text {
  color: var(--Colours-Shades-Neutral-N---700);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  transition: color .5s cubic-bezier(.2, .8, .3, 1);
}

:where(.tv-v2) .notice__hr {
  width: 100%;
  height: 1px;
  background: var(--Colours-Shades-Neutral-N---200);
  transition: background-color .5s cubic-bezier(.2, .8, .3, 1);
}

:where(.tv-v2) .notice__foot {
  gap: var(--Padding-p-regular);
}

:where(.tv-v2) .notice__meta {
  flex: 1;
  min-width: 0;
  color: var(--Colours-Shades-Neutral-N---800);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .5s cubic-bezier(.2, .8, .3, 1);
}

/* View Details: pl-2 pr-1 py-1, rounded-3xl */
:where(.tv-v2) .notice__link {
  padding: 4px 4px 4px var(--Padding-p-small);
  gap: 4px;
  border-radius: 24px;
  color: var(--Colours-Shades-Primary-P---500);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  white-space: nowrap;
  background: transparent;
  transition: background-color .5s cubic-bezier(.2, .8, .3, 1), color .5s cubic-bezier(.2, .8, .3, 1);
}

:where(.tv-v2) .notice__link i {
  padding: 4px;
  border-radius: 24px;
  background: var(--Colours-Shades-Primary-P---500);
  transition: background-color .5s cubic-bezier(.2, .8, .3, 1);
}

:where(.tv-v2) .notice__link svg {
  width: 16px;
  height: 16px;
  fill: var(--Colours-Shades-Neutral-N---50);
  display: block;
  transition: fill .5s cubic-bezier(.2, .8, .3, 1);
}

/* hover: card turns navy, copy goes white */
:where(.tv-v2) .notice:hover .notice__name,
:where(.tv-v2) .notice:hover .notice__text,
:where(.tv-v2) .notice:hover .notice__month,
:where(.tv-v2) .notice:hover .notice__meta {
  color: var(--Colours-Shades-Neutral-N---50);
}

:where(.tv-v2) .notice:hover .notice__hr,
:where(.tv-v2) .notice:hover .notice__divider {
  background: rgba(255, 255, 255, .28);
}

:where(.tv-v2) .notice:hover .notice__link {
  background: var(--Colours-Shades-Neutral-N---50);
  color: var(--Colours-Shades-Primary-P---500);
}

:where(.tv-v2) .notice:hover .notice__link i {
  background: var(--Colours-Shades-Primary-P---500);
}

/* ---------- Achievements (v2) ---------- */
:where(.tv-v2) .stats {
  max-width: 1920px;
  padding: var(--Padding-p-xl4) 144px;
  font-family: 'Ubuntu', system-ui, sans-serif;
}

:where(.tv-v2) .stats__container {
  width: 100%;
  max-width: 1620px;
  gap: 40px;
}

:where(.tv-v2) .stats__head {
  width: 100%;
  max-width: 846px;
  gap: 12px;
}

/* tag: N-50 bg, 1px N-200 outline */
:where(.tv-v2) .stats__tag {
  padding: var(--Padding-p-small) 12px;
  border-radius: 12px;
  background: var(--Colours-Shades-Neutral-N---50);
  outline: 1px solid var(--Colours-Shades-Neutral-N---200);
  outline-offset: -1px;
  color: var(--Colours-Shades-Neutral-N---900);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

:where(.tv-v2) .stats__tag svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

:where(.tv-v2) .stats__title {
  color: var(--Colours-Shades-Neutral-N---900);
  font-size: 24px;
  line-height: 28px;
  font-weight: 500;
}

:where(.tv-v2) .stats__text {
  color: var(--Colours-Shades-Neutral-N---800);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

:where(.tv-v2) .stats__grid {
  width: 100%;
  max-width: 1620px;
  display: flex;
  align-items: stretch;
  gap: var(--Padding-p-regular);
}

/* tile: h-96 (384px), p-6, N-50, 2px N-200 outline, rounded-2xl */
:where(.tv-v2) .stat {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 384px;
  padding: var(--Padding-p-regular);
  background: var(--Colours-Shades-Neutral-N---50);
  border-radius: 16px;
  outline: 2px solid var(--Colours-Shades-Neutral-N---200);
  outline-offset: -2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* decoration: achivement2.svg inlined, so the colour follows the token;
   hover fades N-100 -> mint (timeline fill #F7F7F7 -> #EAF9F1) */
:where(.tv-v2) .stat__deco {
  position: absolute;
  right: 24px;
  top: 8px;
  width: 128px;
  height: 129px;
  color: var(--Colours-Shades-Neutral-N---100);
  z-index: 0;
  pointer-events: none;
  transition: color .6s cubic-bezier(.2, .8, .3, 1);
}

:where(.tv-v2) .stat__deco svg {
  width: 100%;
  height: 100%;
  display: block;
}

:where(.tv-v2) .stat:hover .stat__deco {
  color: var(--Colours-Shades-Secondary-S---50);
}

:where(.tv-v2) .stat__body {
  position: relative;
  z-index: 1;
  gap: var(--Padding-p-small);
}

:where(.tv-v2) .stat__value {
  color: var(--Colours-Shades-Neutral-N---800);
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
}

:where(.tv-v2) .stat__label {
  color: var(--Colours-Shades-Neutral-N---700);
  font-size: 18px;
  line-height: 20px;
  font-weight: 500;
  font-style: normal;
}

/* photo: inset 33px on the left, flush to the right edge. The width is
   explicit because an absolutely positioned <img> with width:auto falls
   back to its intrinsic size and ignores the `right` offset. */
:where(.tv-v2) .stat__photo {
  position: absolute;
  left: 33px;
  top: 124px;
  width: calc(100% - 33px);
  max-width: none;
  height: 288px;
  z-index: 1;
  border-radius: 12px;
  outline: 2px solid var(--Colours-Shades-Neutral-N---100);
  outline-offset: -2px;
  object-fit: cover;
  display: block;
}

/* ---------- Educators (v2) ---------- */
:where(.tv-v2) .staff {
  max-width: 1920px;
  padding: var(--Padding-p-xl4) 144px;
  gap: var(--Padding-p-regular);
  background: var(--Colours-Shades-Primary-P---500);
  font-family: 'Ubuntu', system-ui, sans-serif;
}

:where(.tv-v2) .staff__container {
  width: 100%;
  max-width: 1620px;
  gap: 40px;
}

:where(.tv-v2) .staff__head {
  width: 100%;
  max-width: 846px;
  gap: 12px;
}

:where(.tv-v2) .staff__tag {
  padding: var(--Padding-p-small) 12px;
  border-radius: 12px;
  background: var(--Colours-Shades-Neutral-N---50);
  outline: 1px solid var(--Colours-Shades-Neutral-N---100);
  outline-offset: -1px;
  color: var(--Colours-Shades-Neutral-N---900);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

:where(.tv-v2) .staff__tag svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

:where(.tv-v2) .staff__title {
  color: var(--Colours-Shades-Neutral-N---50);
  font-size: 24px;
  line-height: 28px;
  font-weight: 500;
}

:where(.tv-v2) .staff__text {
  color: var(--Colours-Shades-Neutral-N---50);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

/* stage: 1620×384, cards absolutely placed and centred on the active one */
:where(.tv-v2) .staff__stage {
  position: relative;
  width: 100%;
  max-width: 1620px;
  height: 460px;
  overflow: hidden;
}

/* card: inactive 386×390, active 427×431 with a green offset shadow */
:where(.tv-v2) .educator {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 386px;
  height: 390px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition:
    width .3s cubic-bezier(.42, 0, .58, 1),
    height .3s cubic-bezier(.42, 0, .58, 1),
    top .3s cubic-bezier(.42, 0, .58, 1),
    transform .3s cubic-bezier(.42, 0, .58, 1),
    box-shadow .3s cubic-bezier(.42, 0, .58, 1);
}

:where(.tv-v2) .educator img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
  display: block;
}

:where(.tv-v2) .educator.is-active {
  width: 427px;
  height: 431px;
  top: 16px;
  box-shadow: 8px 8px 0 0 var(--Colours-Shades-Secondary-S---500);
  z-index: 2;
}

/* name panel: inside the card when active, pushed below when not */
:where(.tv-v2) .educator__panel {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 100%;
  padding: var(--Padding-p-medium);
  gap: 4px;
  background: var(--Colours-Shades-Neutral-N---50);
  border-radius: 12px;
  transition: top .3s cubic-bezier(.42, 0, .58, 1);
}

:where(.tv-v2) .educator.is-active .educator__panel {
  top: 330px;
}

:where(.tv-v2) .educator__name {
  color: var(--Colours-Shades-Neutral-N---900);
  font-size: 18px;
  line-height: 20px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

:where(.tv-v2) .educator__role {
  color: var(--Colours-Shades-Neutral-N---700);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* ---------- FAQs (v2) ---------- */
:where(.tv-v2) .faq {
  max-width: 1920px;
  padding: var(--Padding-p-xl4) 144px;
  gap: var(--Padding-p-regular);
  background: var(--Colours-Shades-Neutral-N---50);
  font-family: 'Ubuntu', system-ui, sans-serif;
}

:where(.tv-v2) .faq__container {
  width: 100%;
  max-width: 1620px;
  gap: 40px;
}

:where(.tv-v2) .faq__head {
  width: 100%;
  max-width: 846px;
  gap: 12px;
}

:where(.tv-v2) .faq__tag {
  padding: var(--Padding-p-small) 12px;
  border-radius: 12px;
  background: var(--Colours-Shades-Secondary-S---50);
  outline: 1px solid var(--Colours-Shades-Secondary-S---100);
  outline-offset: -1px;
  color: var(--Colours-Shades-Secondary-S---600);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

:where(.tv-v2) .faq__tag svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

:where(.tv-v2) .faq__title {
  color: var(--Colours-Shades-Neutral-N---900);
  font-size: 24px;
  line-height: 28px;
  font-weight: 500;
}

:where(.tv-v2) .faq__text {
  color: var(--Colours-Shades-Neutral-N---800);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

/* accordion: 1038px wide, gap 16 */
:where(.tv-v2) .faq__list {
  width: 100%;
  max-width: 1038px;
  display: flex;
  flex-direction: column;
  gap: var(--Padding-p-medium);
}

/* item: p-4, rounded-xl, 1px N-200 outline; closed = N-50, open = N-100 */
:where(.tv-v2) .faq__list .accordion-item {
  background: var(--Colours-Shades-Neutral-N---50);
  border: 0;
  border-radius: 12px;
  outline: 1px solid var(--Colours-Shades-Neutral-N---200);
  outline-offset: -1px;
  overflow: hidden;
  transition: background-color .3s ease;
}

:where(.tv-v2) .faq__list .accordion-item:has(.accordion-button:not(.collapsed)) {
  background: var(--Colours-Shades-Neutral-N---100);
}

:where(.tv-v2) .faq__list .accordion-button {
  padding: var(--Padding-p-medium);
  gap: 12px;
  background: transparent;
  color: var(--Colours-Shades-Neutral-N---900);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  box-shadow: none;
}

:where(.tv-v2) .faq__list .accordion-button:not(.collapsed) {
  background: transparent;
  color: var(--Colours-Shades-Neutral-N---900);
}

:where(.tv-v2) .faq__list .accordion-button:focus {
  box-shadow: none;
}

/* closed: bare navy plus; open: navy pill with white minus */
:where(.tv-v2) .faq__list .accordion-button::after {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-left: auto;
  background-image: none;
  background-color: transparent;
  border-radius: 24px;
  color: var(--Colours-Shades-Primary-P---500);
  content: "+";
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  text-align: center;
  transform: none;
  transition: background-color .3s ease, color .3s ease;
}

:where(.tv-v2) .faq__list .accordion-button:not(.collapsed)::after {
  content: "–";
  background-color: var(--Colours-Shades-Primary-P---500);
  color: var(--Colours-Shades-Neutral-N---50);
}

:where(.tv-v2) .faq__list .accordion-body {
  padding: 0 var(--Padding-p-medium) var(--Padding-p-medium);
  color: var(--Colours-Shades-Neutral-N---800);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

/* ---------- Gallery (v2) ---------- */
:where(.tv-v2) .gallery {
  max-width: 1920px;
  padding: var(--Padding-p-xl4) 144px;
  gap: var(--Padding-p-regular);
  font-family: 'Ubuntu', system-ui, sans-serif;
}

:where(.tv-v2) .gallery__container {
  width: 100%;
  max-width: 1620px;
  gap: 40px;
}

:where(.tv-v2) .gallery__head {
  width: 100%;
  max-width: 846px;
  gap: 12px;
}

:where(.tv-v2) .gallery__tag {
  padding: var(--Padding-p-small) 12px;
  border-radius: 12px;
  background: var(--Colours-Shades-Neutral-N---50);
  outline: 1px solid var(--Colours-Shades-Neutral-N---200);
  outline-offset: -1px;
  color: var(--Colours-Shades-Neutral-N---900);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

:where(.tv-v2) .gallery__tag svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

:where(.tv-v2) .gallery__title {
  color: var(--Colours-Shades-Neutral-N---900);
  font-size: 24px;
  line-height: 28px;
  font-weight: 500;
}

:where(.tv-v2) .gallery__text {
  color: var(--Colours-Shades-Neutral-N---800);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

:where(.tv-v2) .gallery__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--Padding-p-medium);
}

/* row: p-6, N-50, 1px N-200 outline, rounded-xl */
:where(.tv-v2) .album {
  position: relative;
  width: 100%;
  padding: var(--Padding-p-regular);
  gap: var(--Padding-p-regular);
  background: var(--Colours-Shades-Neutral-N---50);
  border-radius: 12px;
  outline: 1px solid var(--Colours-Shades-Neutral-N---200);
  outline-offset: -1px;
  overflow: hidden;
  transition: background-color .5s cubic-bezier(.2, .8, .3, 1);
}

:where(.tv-v2) .album:hover {
  background: var(--Colours-Shades-Primary-P---500);
}

:where(.tv-v2) .album__body {
  flex: 1;
  min-width: 0;
  gap: var(--Padding-p-small);
  z-index: 1;
}

/* title shifts right 32px on hover, leaving room for the dash */
:where(.tv-v2) .album__name {
  color: var(--Colours-Shades-Neutral-N---900);
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  translate: 0 0;
  transition: color .5s cubic-bezier(.2, .8, .3, 1), translate .5s cubic-bezier(.2, .8, .3, 1);
}

:where(.tv-v2) .album:hover .album__name {
  color: var(--Colours-Shades-Neutral-N---50);
  translate: 32px 0;
}

/* dash that fades in to the left of the title */
:where(.tv-v2) .album__dash {
  position: absolute;
  left: 24px;
  top: 30px;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--Colours-Shades-Neutral-N---50);
  opacity: 0;
  transition: opacity .5s cubic-bezier(.2, .8, .3, 1);
  z-index: 1;
}

:where(.tv-v2) .album:hover .album__dash {
  opacity: 1;
}

:where(.tv-v2) .album__meta {
  gap: var(--Padding-p-small);
}

:where(.tv-v2) .album__meta span {
  color: var(--Colours-Shades-Neutral-N---700);
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  transition: color .5s cubic-bezier(.2, .8, .3, 1), font-size .5s cubic-bezier(.2, .8, .3, 1);
}

:where(.tv-v2) .album:hover .album__meta span {
  color: var(--Colours-Shades-Neutral-N---50);
  font-size: 16px;
}

:where(.tv-v2) .album__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--Colours-Shades-Neutral-N---300);
  transition: background-color .5s cubic-bezier(.2, .8, .3, 1);
}

:where(.tv-v2) .album:hover .album__dot {
  background: var(--Colours-Shades-Neutral-N---50);
}

/* arrow: p-3, 1px navy outline; fills green on hover */
:where(.tv-v2) .album__go {
  flex: 0 0 auto;
  padding: 12px;
  border-radius: 24px;
  outline: 1px solid var(--Colours-Shades-Primary-P---500);
  outline-offset: -1px;
  color: var(--Colours-Shades-Primary-P---500);
  background: transparent;
  z-index: 1;
  transition: background-color .5s cubic-bezier(.2, .8, .3, 1), outline-color .5s cubic-bezier(.2, .8, .3, 1), color .5s cubic-bezier(.2, .8, .3, 1);
}

:where(.tv-v2) .album:hover .album__go {
  background: var(--Colours-Shades-Secondary-S---500);
  outline-color: var(--Colours-Shades-Secondary-S---500);
  color: var(--Colours-Shades-Neutral-N---50);
}

:where(.tv-v2) .album__go svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}

/* photo fan: parked below the row, rises into view on hover */
:where(.tv-v2) .album__fan {
  position: absolute;
  right: 104px;
  top: 100%;
  width: 176px;
  height: 128px;
  translate: 0 24px;
  transition: translate .5s cubic-bezier(.2, .8, .3, 1);
  z-index: 0;
  pointer-events: none;
}

:where(.tv-v2) .album:hover .album__fan {
  translate: 0 -68px;
}

:where(.tv-v2) .album__fan img {
  position: absolute;
  width: 84px;
  height: 89px;
  border-radius: 8px;
  border: 1px solid var(--Colours-Shades-Neutral-N---50);
  object-fit: cover;
  transform-origin: top left;
}

:where(.tv-v2) .album__fan img:nth-child(1) {
  left: 67px;
  top: 19px;
  rotate: -13deg;
}

:where(.tv-v2) .album__fan img:nth-child(2) {
  left: 39px;
  top: 3px;
  rotate: 7deg;
  box-shadow: 0 7px 28px 6px rgba(189, 189, 189, .24);
}

:where(.tv-v2) .album__fan img:nth-child(3) {
  left: 0;
  top: 17px;
  rotate: -4deg;
}

/* ---------- Footer (v2) ---------- */
:where(.tv-v2) .footer {
  max-width: 1920px;
  background: var(--Colours-Shades-Neutral-N---50);
  font-family: 'Ubuntu', system-ui, sans-serif;
}

/* app strip: px-36 py-8, navy */
:where(.tv-v2) .footer__apps-strip {
  width: 100%;
  padding: var(--Padding-p-xl) 144px;
  gap: var(--Padding-p-xl);
  background: var(--Colours-Shades-Primary-P---500);
}

:where(.tv-v2) .footer__apps-inner {
  width: 100%;
  max-width: 1620px;
  gap: var(--Padding-p-regular);
}

:where(.tv-v2) .footer__apps-title {
  flex: 1;
  color: var(--Colours-Shades-Neutral-N---50);
  font-size: 24px;
  line-height: 28px;
  font-weight: 500;
}

:where(.tv-v2) .footer__apps {
  width: 100%;
  max-width: 1036px;
  display: flex;
  align-items: stretch;
  gap: var(--Padding-p-regular);
}

/* tile: p-4, N-50, 1px N-200 outline, rounded-lg */
:where(.tv-v2) .app-tile {
  flex: 1;
  min-width: 0;
  padding: var(--Padding-p-medium);
  gap: 12px;
  background: var(--Colours-Shades-Neutral-N---50);
  border-radius: 8px;
  outline: 1px solid var(--Colours-Shades-Neutral-N---200);
  outline-offset: -1px;
  transition: outline-color .2s ease;
}

:where(.tv-v2) .app-tile:hover {
  outline-color: var(--Colours-Shades-Secondary-S---500);
}

/* mark: size-11, p-2, S-500, rounded-3xl */
:where(.tv-v2) .app-tile__mark {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: var(--Padding-p-small);
  border-radius: 24px;
  background: var(--Colours-Shades-Secondary-S---500);
  color: var(--Colours-Shades-Neutral-N---50);
}

:where(.tv-v2) .app-tile__mark svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  display: block;
}

:where(.tv-v2) .app-tile__name {
  color: var(--Colours-Shades-Neutral-N---900);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
}

:where(.tv-v2) .app-tile__os {
  color: var(--Colours-Shades-Neutral-N---800);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

/* body: px-36 py-16 */
:where(.tv-v2) .footer__body-wrap {
  width: 100%;
  padding: var(--Padding-p-xl3) 144px;
  gap: var(--Padding-p-xl2);
}

:where(.tv-v2) .footer__body {
  width: 100%;
  max-width: 1620px;
  gap: var(--Padding-p-regular);
}

:where(.tv-v2) .footer__brand {
  flex: 1;
  min-width: 0;
  gap: var(--Padding-p-medium);
}

:where(.tv-v2) .footer__logo {
  width: 160px;
  height: 56px;
  object-fit: contain;
  display: block;
}

:where(.tv-v2) .footer__about {
  flex: 1;
  color: var(--Colours-Shades-Neutral-N---800);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

/* socials: p-2, 1px N-100 outline, rounded-3xl */
:where(.tv-v2) .footer__social a {
  padding: var(--Padding-p-small);
  border-radius: 24px;
  outline: 1px solid var(--Colours-Shades-Neutral-N---100);
  outline-offset: -1px;
  color: var(--Colours-Shades-Neutral-N---900);
  transition: background-color .2s ease, outline-color .2s ease, color .2s ease;
}

:where(.tv-v2) .footer__social a:hover {
  background: var(--Colours-Shades-Secondary-S---500);
  outline-color: var(--Colours-Shades-Secondary-S---500);
  color: var(--Colours-Shades-Neutral-N---50);
}

:where(.tv-v2) .footer__social svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  display: block;
}

/* link columns: w-80 (320px) */
:where(.tv-v2) .footer__col {
  width: 320px;
  flex: 0 0 320px;
  gap: var(--Padding-p-medium);
}

:where(.tv-v2) .footer__col--wide {
  flex: 1;
  width: auto;
  min-width: 0;
}

/* laptops and tablets in landscape: the four footer columns share the row. Two fixed 320px columns left
   the brand and contact columns ~100px wide (logo over the next column, e-mail and phone broken
   mid-word) and, below 1000px, pushed the page wider than the window */
@media (min-width: 861px) and (max-width: 1400px) {
  :where(.tv-v2) .footer__col {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }
}

:where(.tv-v2) .footer__title {
  color: var(--Colours-Shades-Neutral-N---900);
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}

:where(.tv-v2) .footer__rule {
  width: 176px;
  max-width: 100%;
  height: 1px;
  background: var(--Colours-Shades-Neutral-N---200);
}

:where(.tv-v2) .footer__links {
  gap: var(--Padding-p-medium);
}

:where(.tv-v2) .footer__links a {
  display: inline-block;
  color: var(--Colours-Shades-Neutral-N---800);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  translate: 0 0;
  transition: color .2s ease-out, translate .2s ease-out;
}

:where(.tv-v2) .footer__links a:hover {
  color: var(--Colours-Shades-Secondary-S---500);
  translate: 4px 0;
}

/* contact rows */
:where(.tv-v2) .footer__contact {
  width: 100%;
  gap: var(--Padding-p-regular);
}

:where(.tv-v2) .footer__ci {
  flex: 0 0 auto;
  padding: var(--Padding-p-small);
  border-radius: 24px;
  background: var(--Colours-Shades-Neutral-N---100);
  outline: 1px solid var(--Colours-Shades-Neutral-N---200);
  outline-offset: -1px;
  color: var(--Colours-Shades-Neutral-N---800);
}

:where(.tv-v2) .footer__ci svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}

:where(.tv-v2) .footer__cvalue {
  flex: 1;
  min-width: 0;
  color: var(--Colours-Shades-Neutral-N---800);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
}

/* copyright: px-36 py-4, N-100 */
:where(.tv-v2) .footer__bar {
  width: 100%;
  padding: var(--Padding-p-medium) 144px;
  background: var(--brand-secondary, var(--Colours-Shades-Neutral-N---100));
  color: var(--brand-secondary-contrast, var(--Colours-Shades-Neutral-N---900));
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

/* ---------- Responsive ---------- */

@media (max-width: 1200px) {
  :where(.tv-v2) .about {
    padding: var(--Padding-p-xl4) var(--topbar-pad-x);
  }

  :where(.tv-v2) .programs__wrap {
    padding-inline: var(--topbar-pad-x);
  }

  :where(.tv-v2) .program {
    flex: 0 0 calc((100% - var(--Padding-p-regular) * 2) / 3);
  }

  :where(.tv-v2) .cta {
    padding: var(--Padding-p-xl4) var(--topbar-pad-x);
  }

  :where(.tv-v2) .news {
    padding: var(--Padding-p-xl4) var(--topbar-pad-x);
  }

  :where(.tv-v2) .stats {
    padding: var(--Padding-p-xl4) var(--topbar-pad-x);
  }

  :where(.tv-v2) .news__grid {
    gap: var(--Padding-p-xl2);
  }

  :where(.tv-v2) .staff {
    padding: var(--Padding-p-xl4) var(--topbar-pad-x);
  }

  :where(.tv-v2) .faq {
    padding: var(--Padding-p-xl4) var(--topbar-pad-x);
  }

  :where(.tv-v2) .gallery {
    padding: var(--Padding-p-xl4) var(--topbar-pad-x);
  }

  :where(.tv-v2) .footer__apps-strip,
:where(.tv-v2) .footer__body-wrap,
:where(.tv-v2) .footer__bar {
    padding-inline: var(--topbar-pad-x);
  }

  :where(.tv-v2) .footer__apps {
    flex-wrap: wrap;
  }

  :where(.tv-v2) .app-tile {
    flex: 1 1 calc(50% - var(--Padding-p-regular));
  }
}

@media (max-width: 991.98px) {

  :where(.tv-v2) .about__media,
:where(.tv-v2) .about__content {
    height: auto;
    min-height: 0;
  }

  :where(.tv-v2) .about__media .about__photo {
    height: 380px;
  }

  :where(.tv-v2) .about__points {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(.tv-v2) .news__left,
:where(.tv-v2) .news__panel {
    flex: 1 1 auto;
    width: 100%;
  }

  :where(.tv-v2) .gallery__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  :where(.tv-v2) .cta__inner {
    flex-direction: column;
    height: auto;
  }

  :where(.tv-v2) .cta__left {
    flex: 1 1 auto;
    width: 100%;
  }

  :where(.tv-v2) .cta__right {
    flex: 0 0 auto;
    width: 100%;
    max-width: 621px;
  }

  :where(.tv-v2) .stats__grid {
    flex-wrap: wrap;
  }

  :where(.tv-v2) .stat {
    flex: 1 1 calc(50% - var(--Padding-p-regular));
  }
}

@media (max-width: 860px) {
  :where(.tv-v2) .program {
    flex: 0 0 calc((100% - var(--Padding-p-regular)) / 2);
  }

  :where(.tv-v2) .footer__col {
    flex: 1 1 calc(50% - var(--Padding-p-regular));
    width: auto;
  }
}

@media (max-width: 991.98px) {

  :where(.tv-v2) .about__media,
:where(.tv-v2) .about__content {
    height: auto;
    min-height: 0;
  }

  :where(.tv-v2) .about__media .about__photo {
    height: 380px;
  }

  :where(.tv-v2) .news__left,
:where(.tv-v2) .news__panel {
    flex: 1 1 auto;
    width: 100%;
  }
}


@media (max-width: 575.98px) {
  :where(.tv-v2) {
    --topbar-pad-x: 16px;
  }

  :where(.tv-v2) .topbar {
    font-size: 11px;
  }

  :where(.tv-v2) .logo__img {
    height: 34px;
  }

  :where(.tv-v2) .btn-icon {
    width: 44px;
    height: 44px;
    padding: 8px;
  }

  :where(.tv-v2) .btn-icon svg {
    width: 24px;
    height: 24px;
  }

  :where(.tv-v2) .about {
    padding-block: var(--Padding-p-xl2);
  }

  :where(.tv-v2) .about__title {
    font-size: 24px;
  }

  :where(.tv-v2) .about__media .about__photo {
    height: 260px;
  }

  :where(.tv-v2) .programs {
    padding: var(--Padding-p-regular);
  }

  :where(.tv-v2) .programs__title {
    font-size: 24px;
  }

  :where(.tv-v2) .program {
    flex: 0 0 100%;
  }

  :where(.tv-v2) .cta {
    padding-block: var(--Padding-p-xl2);
  }

  :where(.tv-v2) .cta__inner {
    padding: var(--Padding-p-regular);
  }

  :where(.tv-v2) .cta__title {
    font-size: 24px;
  }

  :where(.tv-v2) .cta__right {
    height: 300px;
  }

  :where(.tv-v2) .news {
    padding-block: var(--Padding-p-xl2);
  }

  :where(.tv-v2) .news__title {
    font-size: 24px;
  }

  :where(.tv-v2) .news__photo {
    height: 300px;
  }

  :where(.tv-v2) .news__panel {
    height: 560px;
  }

  :where(.tv-v2) .stats {
    padding-block: var(--Padding-p-xl2);
  }

  :where(.tv-v2) .stats__title {
    font-size: 24px;
  }

  :where(.tv-v2) .stat {
    flex: 1 1 100%;
    height: 330px;
  }

  :where(.tv-v2) .stat__photo {
    left: 24px;
    top: 118px;
    width: calc(100% - 48px);
    height: 188px;
  }

  :where(.tv-v2) .staff {
    padding-block: var(--Padding-p-xl2);
  }

  :where(.tv-v2) .staff__title {
    font-size: 24px;
  }

  :where(.tv-v2) .staff__stage {
    height: 380px;
  }

  :where(.tv-v2) .educator {
    width: 280px;
    height: 300px;
    top: 30px;
  }

  :where(.tv-v2) .educator.is-active {
    width: 300px;
    height: 330px;
    top: 16px;
  }

  :where(.tv-v2) .educator.is-active .educator__panel {
    top: 236px;
  }

  :where(.tv-v2) .faq {
    padding-block: var(--Padding-p-xl2);
  }

  :where(.tv-v2) .faq__title {
    font-size: 22px;
  }

  :where(.tv-v2) .gallery {
    padding-block: var(--Padding-p-xl2);
  }

  :where(.tv-v2) .gallery__title {
    font-size: 22px;
  }

  :where(.tv-v2) .album__fan {
    display: none;
  }

  :where(.tv-v2) .footer__col {
    flex: 1 1 100%;
  }

  :where(.tv-v2) .app-tile {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {

  :where(.tv-v2) .hero .carousel-item,
:where(.tv-v2) .hero .carousel-indicators [data-bs-target],
:where(.tv-v2) .program,
:where(.tv-v2) .program__panel,
:where(.tv-v2) .program__grade,
:where(.tv-v2) .program__text,
:where(.tv-v2) .program__content,
:where(.tv-v2) .program__name {
    transition: none;
  }
}

/* =====================================================================
   School website adaptations (the rules above are the design verbatim)
   Everything below makes the design cope with school-supplied content.
   ===================================================================== */

/* ---------- Masthead ---------- */
/* The school logo is whatever the school uploaded, so it sits on a white chip inside the badge */
:where(.tv-v2) .v2logo__img {
  width: 100%;
  padding: 6px 12px;
  background: var(--Colours-Shades-Neutral-N---50);
  border-radius: 12px;
}

/* top bar: phone / e-mail are links; long values shrink instead of running under the logo badge */
:where(.tv-v2) .v2topbar {
  --v2logo-w: 256px;
}

:where(.tv-v2) .v2topbar__side {
  min-width: 0;
}

:where(.tv-v2) .v2topbar__side:first-child {
  padding-right: calc(var(--v2logo-w) / 2);
}

:where(.tv-v2) .v2topbar__side:last-child {
  padding-left: calc(var(--v2logo-w) / 2);
}

:where(.tv-v2) .v2topbar__item {
  min-width: 0;
}

:where(.tv-v2) .v2topbar__ci {
  flex: 0 0 auto;
}

:where(.tv-v2) .v2topbar__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  :where(.tv-v2) .v2topbar {
    --v2logo-w: 190px;
  }
}

/* phones: the badge leaves no room for text, so phone / e-mail become icon links and the socials (also in the footer) are dropped */
@media (max-width: 575.98px) {
  :where(.tv-v2) .v2topbar {
    --v2logo-w: 150px;
  }

  :where(.tv-v2) .v2topbar__label {
    display: none;
  }

  :where(.tv-v2) .v2topbar__side:last-child {
    display: none !important;
  }
}

/* nav: gallery dropdown, language dropdown and login dropdown */
:where(.tv-v2) .v2nav__caret {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

:where(.tv-v2) .v2nav .v2nav__link.show,
:where(.tv-v2) .v2nav .show>.v2nav__link {
  color: var(--brand-secondary-contrast, var(--Colours-Shades-Neutral-N---50));
  font-weight: 500;
}

:where(.tv-v2) .v2nav__link.show::after {
  height: 38px;
  opacity: 1;
}

:where(.tv-v2) .v2nav .dropdown-menu {
  --bs-dropdown-font-size: 16px;
  --bs-dropdown-border-radius: 12px;
  --bs-dropdown-link-hover-bg: var(--Colours-Shades-Neutral-N---100);
  --bs-dropdown-link-active-bg: var(--Colours-Shades-Primary-P---500);
  font-family: 'Ubuntu', system-ui, sans-serif;
}

/* the design draws its own caret; the language pill is now a button */
:where(.tv-v2) button.v2lang {
  background: transparent;
  border: 0;
}

:where(.tv-v2) .v2lang:focus-visible {
  outline: 2px solid var(--Colours-Shades-Neutral-N---50);
  outline-offset: 2px;
}

:where(.tv-v2) .v2lang.dropdown-toggle::after,
:where(.tv-v2) .v2btn-login.dropdown-toggle::after {
  display: none;
}

/* ---------- Hero ---------- */
/* Height follows the design's own 32:15 ratio (900px at 1920) so uploaded banners are not over-cropped */
:where(.tv-v2) .hero {
  height: auto;
}

/* arrows centred on whatever height the hero has; the row itself must not swallow clicks on linked slides */
:where(.tv-v2) .hero__arrows {
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

:where(.tv-v2) .hero__arrow {
  pointer-events: auto;
}

:where(.tv-v2) .hero .carousel-item>a {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 575.98px) {
  :where(.tv-v2) .hero__arrows {
    padding-inline: 12px;
  }
}

/* ---------- Free text from the school settings ---------- */
:where(.tv-v2) .about__text,
:where(.tv-v2) .programs__text,
:where(.tv-v2) .cta__text,
:where(.tv-v2) .news__text,
:where(.tv-v2) .stats__text,
:where(.tv-v2) .staff__text,
:where(.tv-v2) .faq__text,
:where(.tv-v2) .gallery__text {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

:where(.tv-v2) .about__title,
:where(.tv-v2) .programs__title,
:where(.tv-v2) .cta__title,
:where(.tv-v2) .news__title,
:where(.tv-v2) .stats__title,
:where(.tv-v2) .staff__title,
:where(.tv-v2) .faq__title,
:where(.tv-v2) .gallery__title {
  overflow-wrap: anywhere;
}

/* heads/cards that start-align their children: short text must still span (and be centred/left in) the full width */
:where(.tv-v2) .programs__text,
:where(.tv-v2) .staff__text,
:where(.tv-v2) .cta__text {
  width: 100%;
}

/* ---------- Programs ---------- */
/* few programs: keep them centred instead of hugging the left edge */
:where(.tv-v2) .programs__track.is-static {
  justify-content: center;
}

/* ---------- Announcements ---------- */
/* the notice list really scrolls now (markup: .news__panel stretches it), so cards must not shrink;
   the panel is 702px at most but no longer a mostly empty box when there are only a few notices */
:where(.tv-v2) .news__scroll>.notice {
  flex-shrink: 0;
}

:where(.tv-v2) .news__panel {
  height: auto;
  max-height: 702px;
}

/* ---------- Educators ---------- */
/* transparent / placeholder portraits (default avatar, SVG) need a backdrop */
:where(.tv-v2) .educator {
  background: var(--Colours-Shades-Neutral-N---200);
}

/* name panel hugs the card bottom whatever its height (name only vs. name + qualification) */
:where(.tv-v2) .educator__panel {
  top: auto;
  bottom: 0;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.42, 0, .58, 1);
}

:where(.tv-v2) .educator.is-active .educator__panel {
  top: auto;
  transform: translateY(-16px);
}

/* ---------- Admission CTA ---------- */
/* card grows with a long description instead of clipping it */
:where(.tv-v2) .cta__inner {
  height: auto;
  min-height: 384px;
}

/* the transparent student cut-out becomes the school's rectangular photo, framed inside the green panel */
:where(.tv-v2) .cta__cutout {
  left: 25%;
  top: 6%;
  width: 67%;
  height: 84%;
  object-fit: cover;
  object-position: center;
  border-radius: 24px;
  box-shadow: 0 12px 32px 0 rgba(16, 44, 77, .25);
}

/* ---------- Gallery ---------- */
:where(.tv-v2) .album__name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Footer ---------- */
:where(.tv-v2) .footer__logo {
  object-position: left center;
}

:where(.tv-v2) .footer__links a,
:where(.tv-v2) .footer__cvalue {
  overflow-wrap: anywhere;
}

:where(.tv-v2) .footer__cvalue a:hover {
  color: var(--Colours-Shades-Secondary-S---500);
}

:where(.tv-v2) .footer__bar a {
  color: inherit;
  text-decoration: underline;
}

/* one or two app links: do not stretch the tiles across the whole strip */
@media (min-width: 1201px) {
  :where(.tv-v2) .app-tile {
    max-width: 260px;
  }
}
/* School secondary colour on the menu bar: the active item sits on the primary chip, so it keeps light text */
:where(.tv-v2) .v2nav .v2nav__link.active,
:where(.tv-v2) .v2nav .v2nav__link.active:hover,
:where(.tv-v2) .v2nav .v2nav__link.active:focus {
  color: var(--Colours-Shades-Neutral-N---50);
}

/* Educators: swipeable on touch screens; vertical page scrolling still works over the cards */
:where(.tv-v2) .staff__stage {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

:where(.tv-v2) .staff__stage .educator img {
  -webkit-user-drag: none;
  pointer-events: none;
}

/* cards follow the finger while dragging, then ease into place */
:where(.tv-v2) .staff__stage.is-dragging .educator {
  transition: none;
}

/* ---------- Hover effects ----------
   Counter tiles and about points lift and take the mint outline, the photo of a counter zooms a little, a
   teacher card that is not the open one shows the offset mint shadow of the open one, the FAQ items and
   the language selector react too. Only on devices that can hover (no sticky hover after a tap). */
@media (hover: hover) and (pointer: fine) {

  :where(.tv-v2) .stat,
  :where(.tv-v2) .point {
    transition: translate .35s cubic-bezier(.2, .8, .3, 1),
      box-shadow .35s cubic-bezier(.2, .8, .3, 1),
      outline-color .35s cubic-bezier(.2, .8, .3, 1);
  }

  :where(.tv-v2) .stat:hover,
  :where(.tv-v2) .point:hover {
    translate: 0 -6px;
    outline-color: var(--Colours-Shades-Secondary-S---500);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--Colours-Shades-Secondary-S---500) 24%, transparent);
  }

  :where(.tv-v2) .stat__value {
    transition: color .35s cubic-bezier(.2, .8, .3, 1);
  }

  :where(.tv-v2) .stat:hover .stat__value {
    color: var(--Colours-Shades-Primary-P---500);
  }

  :where(.tv-v2) .stat__photo {
    transition: scale .5s cubic-bezier(.2, .8, .3, 1);
  }

  :where(.tv-v2) .stat:hover .stat__photo {
    scale: 1.03;
  }

  :where(.tv-v2) .point__icon {
    transition: scale .35s cubic-bezier(.2, .8, .3, 1);
  }

  :where(.tv-v2) .point:hover .point__icon {
    scale: 1.1;
  }

  :where(.tv-v2) .educator:not(.is-active):hover {
    box-shadow: 6px 6px 0 0 var(--Colours-Shades-Secondary-S---500);
  }

  :where(.tv-v2) .faq__list .accordion-item:hover {
    background: var(--Colours-Shades-Neutral-N---100);
  }

  :where(.tv-v2) .faq__list .accordion-button {
    transition: color .25s ease;
  }

  :where(.tv-v2) .faq__list .accordion-button:hover {
    color: var(--Colours-Shades-Primary-P---500);
  }

  :where(.tv-v2) .v2lang,
  :where(.tv-v2) .v2topbar__item {
    transition: background-color .25s ease, opacity .25s ease;
  }

  :where(.tv-v2) .v2lang:hover {
    background: color-mix(in srgb, currentColor 14%, transparent);
  }

  :where(.tv-v2) .v2topbar__item:hover {
    opacity: .75;
  }

  /* hero pagination dots: the dot under the pointer takes the active colour (the slide change keeps its own timing) */
  :where(.tv-v2) .hero .carousel-indicators [data-bs-target]:not(.active):hover {
    background-color: var(--Colours-Shades-Secondary-S---500);
    cursor: pointer;
    transition: width 1.5s linear, background-color .25s ease;
  }
}

@media (prefers-reduced-motion: reduce) {

  :where(.tv-v2) .stat,
  :where(.tv-v2) .point,
  :where(.tv-v2) .stat__photo,
  :where(.tv-v2) .point__icon {
    transition: none;
    translate: none;
    scale: none;
  }
}