/* ==========================================================================
   Programmes section: "Three programmes. One is yours."
   Headline: Outfit (as in Figma). Everything else: Inter.
   Second section of the page, after the particle hero. Every rule is scoped to
   .programmes so nothing leaks into the hero above it.
   ========================================================================== */

.programmes {
  /* the page's type system (index.html :root): Outfit headings, Geist subheads, Inter text */
  --font-display: var(--font-head);
  --font-body: var(--font);

  --p-ink: #06123f;
  --p-ink-soft: #1f2e5c;
  --p-muted: #475569;
  --p-brand: #0052ff;
  --p-border: #cecece;
  --p-border-active: #e8e8e8;

  --academy: #e9f0ff;
  --intensive: #e4e0fc;
  --niat: #ecd3d4;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 0.85s;
}

.programmes,
.programmes *,
.programmes *::before,
.programmes *::after {
  box-sizing: border-box;
}

.programmes img {
  display: block;
  max-width: none;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.programmes svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Section + header
   -------------------------------------------------------------------------- */

.programmes {
  position: relative;
  z-index: 2;
  background: #fff;
  color: #000;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  padding: 72px 25px 56px;
  scroll-margin-top: 0;
}

.programmes__inner {
  max-width: 1436px;
  margin: 0 auto;
}

.programmes__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  margin-bottom: 119px;
}

.programmes__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--head-size);
  line-height: 1.12;
  letter-spacing: -0.01em;
  padding-bottom: .08em;
  width: fit-content;
  max-width: 100%;
  text-wrap: balance;
  background-image: var(--head-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.programmes__subtitle {
  margin: 0;
  font-family: var(--font-sub);
  font-size: var(--sub-size);
  line-height: 1.5;
  color: var(--sub-ink);
}

/* --------------------------------------------------------------------------
   Row of cards
   -------------------------------------------------------------------------- */

.programmes__row {
  --gap: 20px;
  /* 1 design px of the 1385px-wide Figma row (1345 = 1385 - 2 gaps) */
  --u: calc((100cqw - 2 * var(--gap)) / 1345);
  container-type: inline-size;
  display: flex;
  justify-content: center;
  gap: var(--gap);
  max-width: 1385px;
  height: 538px;
  margin: 0 auto;
}

.programme {
  --w-default: calc(314 * var(--u));
  --w-active: calc(1070 * var(--u));
  --w-collapsed: calc(137.5 * var(--u));

  position: relative;
  flex: 0 0 var(--w-default);
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--p-border);
  border-radius: 20px;
  cursor: pointer;
  outline: none;
  transition:
    flex-basis var(--dur) var(--ease),
    border-color 0.4s ease,
    box-shadow 0.9s var(--ease),
    transform 0.9s var(--ease);
}

.programme:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.35);
}

.programmes__row.has-active .programme {
  flex-basis: var(--w-collapsed);
}

.programmes__row.has-active .programme.is-active {
  flex-basis: var(--w-active);
  border-color: var(--p-border-active);
  cursor: default;
}

.programme--academy { --tint: var(--academy); --tint-0: rgba(233, 240, 255, 0); background: var(--academy); }
.programme--intensive { --tint: var(--intensive); --tint-0: rgba(228, 224, 252, 0); background: var(--intensive); }
.programme--niat { --tint: var(--niat); --tint-0: rgba(236, 211, 212, 0); background: #fff; }

/* --------------------------------------------------------------------------
   Preview layer: default (314px) + collapsed (137.5px) states
   -------------------------------------------------------------------------- */

.programme__preview {
  position: absolute;
  inset: 0;
  transition: opacity 0.6s ease 0.1s;
}

.programme.is-active .programme__preview {
  opacity: 0;
  transition-delay: 0s;
  transition-duration: 0.25s;
}

/* Photos are the Figma exports, already cropped to the visible card area,
   so they sit on the card's bottom edge. Default and collapsed crops cross-fade. */
.programme__photo {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: bottom center;
  transition: opacity 0.45s ease, transform 0.6s var(--ease);
}

.programme__photo--default {
  width: calc(var(--w-default) - 2px);
  height: var(--ph-h);
  object-fit: cover;
  object-position: var(--ph-x) 100%;
}

/* soften the top edge where the photo's background meets the card tint. The resting and
   collapsed photos are black and white, so the colour arrives with the card that opens. */
.programme__photo {
  filter: grayscale(1);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 90px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 90px);
}

.programme__photo--collapsed {
  width: calc(var(--w-collapsed) - 2px);
  height: var(--pc-h);
  object-fit: cover;
  object-position: var(--pc-x) 100%;
  opacity: 0;
}

/* the Figma cutouts, framed like the crops they replace (box size + where the people sit in it) */
.programme--academy   { --ph-h: 380px; --ph-x: 62%; --pc-h: 314px; --pc-x: 66%; }
.programme--intensive { --ph-h: 372px; --ph-x: 52%; --pc-h: 320px; --pc-x: 52%; }
.programme--niat      { --ph-h: 391px; --ph-x: 50%; --pc-h: 313px; --pc-x: 46%; }

.programmes__row.has-active .programme__photo--default { opacity: 0; }
.programmes__row.has-active .programme__photo--collapsed { opacity: 1; transition-delay: 0.1s; }

.programmes__row:not(.has-active) .programme:hover .programme__photo--default {
  transform: translateX(-50%) scale(1.03);
}

.programme__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 260px;
  background: linear-gradient(to bottom, var(--tint-0) 0%, var(--tint) 62%);
  transition: height var(--dur) var(--ease);
}

.programmes__row.has-active .programme__fade {
  height: 325px;
}

/* Logo */
.programme__logo {
  position: absolute;
  left: 50%;
  top: var(--logo-y);
  width: min(var(--logo-w), 84%);
  transform: translateX(-50%);
  transition:
    width var(--dur) var(--ease),
    top var(--dur) var(--ease);
}

.programme__logo img {
  width: 100%;
  height: auto;
}

/* the Academy logo export has a white background; multiply drops it onto the tint */
.programme__logo,
.detail__logo {
  mix-blend-mode: multiply;
}

.programme--academy   { --logo-w: 199px;   --logo-y: 41px; }
.programme--intensive { --logo-w: 201.6px; --logo-y: 42px; }
.programme--niat      { --logo-w: 197px;   --logo-y: 44px; }

.programmes__row.has-active .programme--academy   { --logo-w: 111.6px; --logo-y: 38px; }
.programmes__row.has-active .programme--intensive { --logo-w: 110px;   --logo-y: 37px; }
.programmes__row.has-active .programme--niat      { --logo-w: 36px;    --logo-y: 31px; }

/* NIAT swaps the full lock-up for the shield when collapsed */
.programme--niat .programme__logo {
  display: grid;
  justify-items: center;
}

.programme--niat .programme__logo > * {
  grid-area: 1 / 1;
  transition: opacity 0.3s ease;
}

.programme--niat .logo-mark {
  width: 36px;
  opacity: 0;
}

.programmes__row.has-active .programme--niat .logo-full { opacity: 0; }
.programmes__row.has-active .programme--niat .logo-mark { opacity: 1; }

/* Caption + CTAs (resting state only) */
.programme__caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: calc(var(--actions-h) + 30px);
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: #000;
  transition: opacity 0.3s ease 0.3s;
}

.programmes__row.has-active .programme__caption {
  opacity: 0;
  transition-delay: 0s;
}

.programme {
  --actions-h: 92px;
}

/* the CTAs sit on top of the photo, above the preview layer */
.programme__actions {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity 0.5s ease 0.15s, transform 0.6s var(--ease) 0.15s;
}

.programmes__row.has-active .programme__actions {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition-delay: 0s;
}

.programme__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.programme__btn--primary {
  background: #2563eb;
  color: #fff;
}

.programme__btn--primary:hover {
  background: #1d4ed8;
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.6);
}

.programme__btn--ghost {
  background: #fff;
  border-color: #d4d9e6;
  color: #1d4ed8;
}

.programme__btn--ghost:hover {
  border-color: #2563eb;
  background: #f5f8ff;
}

.programme__btn:focus-visible {
  outline: 3px solid rgba(0, 82, 255, 0.35);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Detail layer: expanded (1070px) state
   -------------------------------------------------------------------------- */

.programme__detail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* fixed at the expanded width so nothing reflows while the card grows */
  width: calc(var(--w-active) - 2px);
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.programme.is-active .programme__detail {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.45s ease 0.18s;
}

.detail__media {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  background: #fff;
}

.detail__photo {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--dp-w);
  transform: translateY(24px) scale(1.04);
  transform-origin: bottom center;
  transition: transform 0.9s var(--ease);
}

.detail__photo img {
  width: 100%;
  height: auto;
  filter: grayscale(1);
  transform-origin: 50% 100%;
  /* --mx/--my/--ms are eased every frame in programmes.js while the pointer is over the photo */
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(var(--ms, 1));
  transition: filter 0.8s ease 0.15s;
  will-change: transform;
}

/* the logo + intro drift the other way, so the photo reads as a layer behind them */
.detail__intro {
  z-index: 2;
  translate: calc(var(--mx, 0px) * -0.5) calc(var(--my, 0px) * -0.4);
}

/* a soft light that follows the pointer across the photo */
.detail__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--lx, 50%) var(--ly, 60%), rgba(255, 255, 255, 0.22), transparent 60%);
  opacity: var(--lo, 0);
  mix-blend-mode: soft-light;
}

/* no pointer to follow: a slow drift keeps the open photo alive */
@media (hover: none), (pointer: coarse) {
  .programme.is-active .detail__photo img {
    animation: photo-drift 9s ease-in-out 0.9s infinite alternate;
  }
}

@keyframes photo-drift {
  from { transform: scale(1); }
  to   { transform: translate3d(-10px, 0, 0) scale(1.05); }
}

.programme.is-active .detail__photo {
  transform: none;
}

.programme.is-active .detail__photo img {
  filter: none;
}

/* Export width as a share of the 751px media panel (cropped by Figma at the panel edges) */
.programme--academy   { --dp-w: 96.67%; }
.programme--intensive { --dp-w: 100%; }
.programme--niat      { --dp-w: 94.81%; }

.detail__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.programme--academy .detail__fade {
  height: 164.3px;
  background: linear-gradient(to bottom, rgba(233, 240, 255, 0) 0%, var(--academy) 147.71%);
}
.programme--intensive .detail__fade {
  height: 158.9px;
  background: linear-gradient(to bottom, rgba(228, 224, 252, 0) 0%, var(--intensive) 139.04%);
}
.programme--niat .detail__fade {
  height: 125.2px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 139.04%);
}

/* Pixel "steps" that dissolve the photo into the side panel */
.detail__steps {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.detail__steps span {
  position: absolute;
  background: var(--tint);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s var(--ease);
}

.programme.is-active .detail__steps span {
  transform: scaleX(1);
  transition-delay: calc(0.25s + var(--i) * 25ms);
}

.detail__intro {
  position: absolute;
  left: 11.2%;
  top: 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 29.3px;
  max-width: 80%;
}

.detail__intro > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.6s var(--ease);
}

.programme.is-active .detail__intro > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.6s var(--ease);
}

.programme.is-active .detail__intro > :nth-child(1) { transition-delay: 0.25s; }
.programme.is-active .detail__intro > :nth-child(2) { transition-delay: 0.35s; }

.detail__logo img {
  height: auto;
  max-width: 100%;
}

.programme--academy .detail__logo img { width: 318.6px; }
.programme--intensive .detail__logo img { width: 260.2px; }
.programme--niat .detail__logo img { width: 331px; }

.programme--intensive .detail__text { --text-w: 232px; }

.detail__brand {
  display: flex;
  flex-direction: column;
  gap: 7.6px;
}

.detail__mode {
  display: flex;
  align-items: center;
  gap: 10.5px;
  margin: 0;
  font-weight: 600;
  font-style: italic;
  font-size: 24.6px;
  line-height: 35.2px;
  color: var(--p-muted);
  white-space: nowrap;
}

.live-dot {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
}

.live-dot::before,
.live-dot::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #22c55e;
}

.live-dot::after {
  animation: pulse 1.8s ease-out infinite;
}

@keyframes pulse {
  from { transform: scale(1); opacity: 0.6; }
  to   { transform: scale(2.6); opacity: 0; }
}

.detail__text {
  margin: 0;
  max-width: var(--text-w, 300px);
  font-size: 16px;
  line-height: 1.2;
  color: #000;
}

/* Side panel */
.detail__panel {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 30px 28px;
  background: var(--tint);
}

.detail__body {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.detail__headline {
  margin: 0;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  color: var(--p-ink);
}

.features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 235px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.features li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  color: var(--p-ink-soft);
}

.features__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  color: var(--p-brand);
}

.features__icon svg {
  width: 20px;
  height: 20px;
}

.detail__headline,
.features li,
.programme__cta {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.45s ease, transform 0.6s var(--ease);
}

.programme.is-active .detail__headline,
.programme.is-active .features li,
.programme.is-active .programme__cta {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.6s var(--ease), background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.programme.is-active .detail__headline      { transition-delay: 0.28s; }
.programme.is-active .features li:nth-child(1) { transition-delay: 0.34s; }
.programme.is-active .features li:nth-child(2) { transition-delay: 0.39s; }
.programme.is-active .features li:nth-child(3) { transition-delay: 0.44s; }
.programme.is-active .features li:nth-child(4) { transition-delay: 0.49s; }
.programme.is-active .features li:nth-child(5) { transition-delay: 0.54s; }
.programme.is-active .programme__cta                   { transition-delay: 0.6s; }
.programme.is-active .programme__cta + .programme__cta { transition-delay: 0.66s; }

.detail__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   Fallbacks while exported Figma assets are missing (see assets/README.md)
   -------------------------------------------------------------------------- */

.wordmark {
  display: none;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1;
  color: #2b44ff;
  white-space: nowrap;
}

.wordmark small {
  display: block;
  font-size: 0.42em;
  letter-spacing: 0.02em;
}

.programme--niat .wordmark {
  color: #9b1c1c;
}

.is-missing > img[data-fallback] {
  display: none;
}

.is-missing > .wordmark {
  display: block;
}

.programme__logo .wordmark { font-size: 40px; text-align: center; }
.programmes__row.has-active .programme__logo .wordmark { font-size: 18px; }
.detail__logo .wordmark { font-size: 64px; }
.programme--niat .detail__logo .wordmark { font-size: 24px; line-height: 1.2; }

/* --------------------------------------------------------------------------
   Tablet: tighten the side panel
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .detail__panel {
    flex-basis: 290px;
    padding: 32px 26px;
  }
  .detail__body { gap: 28px; }
  .detail__intro { left: 7%; }
  .programme--academy .detail__logo img { width: 240px; }
  .programme--intensive .detail__logo img { width: 210px; }
  .programme--niat .detail__logo img { width: 260px; }
  .detail__mode { font-size: 19px; line-height: 28px; }
}

/* --------------------------------------------------------------------------
   Mobile: vertical accordion (tap to expand)
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .programmes {
    padding: 48px 16px;
  }

  .programmes__header {
    margin-bottom: 40px;
  }

  .programmes__row {
    flex-direction: column;
    height: auto;
    gap: 16px;
  }

  .programme,
  .programmes__row.has-active .programme,
  .programmes__row.has-active .programme.is-active {
    flex: none;
    width: 100%;
    height: 460px;
    transition: height var(--dur) var(--ease), border-color 0.4s ease;
  }

  /* open card grows to fit its content */
  .programmes__row.has-active .programme.is-active {
    height: auto;
  }

  .programme.is-active .programme__preview {
    display: none;
  }

  .programme.is-active .programme__detail {
    position: relative;
    animation: reveal 0.5s var(--ease);
  }

  /* keep the preview in its default look on mobile */
  .programmes__row.has-active .programme:not(.is-active) {
    --logo-w: 160px;
  }
  .programmes__row.has-active .programme--niat:not(.is-active) .logo-full { opacity: 1; }
  .programmes__row.has-active .programme--niat:not(.is-active) .logo-mark { opacity: 0; }
  .programmes__row.has-active .programme:not(.is-active) .programme__caption { opacity: 1; }
  .programmes__row.has-active .programme:not(.is-active) .programme__actions {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .programme.is-active .programme__actions { display: none; }

  .programme__photo--default,
  .programmes__row.has-active .programme:not(.is-active) .programme__photo--default {
    width: 100%;
    height: 330px;
    object-fit: cover;
    object-position: center top;
    opacity: 1;
  }

  .programme__photo--collapsed,
  .programmes__row.has-active .programme__photo--collapsed { display: none; }

  .programme__fade,
  .programmes__row.has-active .programme__fade { height: 220px; }

  .programme__logo .wordmark,
  .programmes__row.has-active .programme__logo .wordmark { font-size: 32px; }
  .detail__logo .wordmark { font-size: 40px; }

  .programme__detail {
    width: 100%;
    flex-direction: column;
  }

  .detail__media {
    flex: 0 0 400px;
  }

  .detail__steps { display: none; }

  .detail__intro {
    left: 20px;
    top: 24px;
    gap: 16px;
  }

  .programme--academy .detail__logo img { width: 220px; }
  .programme--intensive .detail__logo img { width: 190px; }
  .programme--niat .detail__logo img { width: 240px; }

  .programme--academy,
  .programme--niat,
  .programme--intensive {
    --dp-w: 100%;
  }

  .detail__panel {
    flex: 1 1 auto;
    padding: 28px 20px;
  }

  .detail__body { gap: 24px; }
  .features { max-width: none; }
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .programmes *,
  .programmes *::before,
  .programmes *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
}

/* ==========================================================================
   Open card — the Figma design (CCBP-v02, node 1030:488)

   The closed and collapsed states are unchanged. Once a card opens it becomes
   the white card from the file: both halves white, the photo fading up into
   white, one blue pill instead of the two resting buttons.
   ========================================================================== */

.programme.is-active .detail__media,
.programme.is-active .detail__panel { background: #fff; }
.programme.is-active .detail__steps span { background: #fff; }

.programme.is-active .detail__fade {
  height: 164.3px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 147.71%);
}

.programme.is-active .detail__panel { padding: 40px 34px; }
.programme.is-active .detail__body { gap: 40px; }
.programme.is-active .features { gap: 16px; }


/* --------------------------------------------------------------------------
   Pointer tilt: the open card turns toward the cursor, and the layers inside
   it travel by different amounts, so the photo sits in front of the logo and
   the logo in front of the panel. --nx/--ny/--rx/--ry are eased every frame in
   programmes.js; every layer reads the same pair, only the multiplier differs.
   -------------------------------------------------------------------------- */

.programmes__row { perspective: 1800px; }

.programme.is-active {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  box-shadow:
    calc(var(--nx, 0) * -26px) calc(16px + var(--ny, 0) * -10px) 54px -26px rgba(6, 18, 63, 0.3);
}

/* behind the photo (which follows the pointer at full --mx) and the logo (-0.5) */
.programme.is-active .detail__body    { translate: calc(var(--mx, 0px) * -0.22) calc(var(--my, 0px) * -0.18); }
.programme.is-active .detail__actions { translate: calc(var(--mx, 0px) * -0.34) calc(var(--my, 0px) * -0.26); }

@media (prefers-reduced-motion: reduce) {
  .programme.is-active { transform: none; }
  .programme.is-active .detail__body,
  .programme.is-active .detail__actions { translate: none; }
}

/* the intro is one row in the new file: logo left, the line of context at the far
   end of a 650px band centred in the 751px media half, both sitting on one baseline */
.programme.is-active .detail__intro {
  left: 50%;
  top: calc(45 * var(--u));
  translate: calc(-50% + var(--mx, 0px) * -0.5) calc(var(--my, 0px) * -0.4);
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  width: calc(650 * var(--u));
  max-width: none;
}

.programme.is-active .detail__logo img { width: auto; height: calc(75 * var(--u)); }
.programme--intensive.is-active .detail__logo img { height: calc(74 * var(--u)); }
.programme--niat.is-active .detail__logo img { height: calc(69 * var(--u)); }

.programme.is-active .detail__text {
  max-width: calc(240 * var(--u));
  font-size: calc(16 * var(--u));
}

/* the pixel-step edge belonged to the older card; the new one ends on the panel line */
.programme.is-active .detail__steps { display: none; }

/* both resting CTAs stay on the open card: Request Callback (filled) + Know More (outlined),
   both on the Figma card's pill (#0052ff, 28px radius) */
.detail__actions { gap: 10px; }

.detail__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px 14px 32px;
  border-radius: 28px;
  background: var(--p-brand);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  text-decoration: none;
}

.programme.is-active .detail__cta:hover {
  background: #1a64ff;
  box-shadow: 0 12px 30px -12px rgba(0, 82, 255, 0.7);
}

.detail__cta--ghost {
  background: #fff;
  border: 1px solid #d4d9e6;
  color: #1d4ed8;
  padding: 13px 28px;
}
.programme.is-active .detail__cta--ghost:hover {
  background: #f5f8ff;
  border-color: #2563eb;
  box-shadow: none;
}

/* ==========================================================================
   Card placement from the Figma file (CCBP-v02, node 1030:488), desktop row.
   Every number below is a Figma px on the 602px-tall card, multiplied by --u
   so the whole card scales with the row. The motion above is unchanged: this
   only says where each picture, logo and button sits in each state.
   ========================================================================== */
@media (min-width: 900px) {
  /* the Figma card is 602 tall on a 1385 row: the height follows the row's real width (the page
     column, 1296px on a 1440 window), so the card keeps the file's proportions at every size */
  .programmes__inner { container-type: inline-size; }
  .programmes__row { height: calc((100cqw - 40px) * 602 / 1345); }

  /* resting card: the black-and-white cutout, bottom-anchored, off-centre as in the file */
  .programme--academy   { --rp-x: -36.5;  --rp-b: -40.66; --rp-w: 494.56; }
  .programme--intensive { --rp-x: -45.93; --rp-b: 109;    --rp-w: 716.64; }
  .programme--niat      { --rp-x: -55.39; --rp-b: 15.6;   --rp-w: 780.32; }
  .programme__photo--default {
    left: calc(50% + var(--rp-x) * var(--u));
    bottom: calc(var(--rp-b) * var(--u));
    width: calc(var(--rp-w) * var(--u));
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .programme__fade,
  .programmes__row.has-active .programme__fade {
    height: calc(325.14 * var(--u));
    background: linear-gradient(to bottom, var(--tint-0) 0%, var(--tint) 75.8%);
  }
  .programme--academy   { --logo-w: calc(199 * var(--u));   --logo-y: calc(49 * var(--u)); }
  .programme--intensive { --logo-w: calc(201.6 * var(--u)); --logo-y: calc(48 * var(--u)); }
  .programme--niat      { --logo-w: calc(207.2 * var(--u)); --logo-y: calc(46.84 * var(--u)); }

  /* resting CTAs: a 252px stack, 27px off the bottom */
  .programme__actions {
    left: calc(31 * var(--u));
    right: calc(31 * var(--u));
    bottom: calc(26.67 * var(--u));
    gap: 12px;
  }
  .programme__btn { height: 44px; border-radius: 12px; font-size: 14px; }
  .programme__btn--ghost { height: 46px; background: #f6f5fa; border-color: #cbd5e1; }

  /* open card: the colour photo in the 751px media half, the side panel in the card's tint */
  .programme--academy   { --op-x: -103.9;  --op-b: -299.0; --op-w: 827.8; }
  .programme--intensive { --op-x: -270.6;  --op-b: -62.3;  --op-w: 1227.2; }
  .programme--niat      { --op-x: -150.87; --op-b: -69.38; --op-w: 1066.56; }
  .detail__photo {
    left: calc(var(--op-x) * var(--u));
    bottom: calc(var(--op-b) * var(--u));
    width: calc(var(--op-w) * var(--u));
  }
  .programme.is-active .detail__panel { background: var(--tint); }

  /* the logo alone, large and centred over the photo. Set for every state, not only the open
     one: the open layer is still fading while a card closes or the pointer moves to the next
     card, and the older intro (logo left, "Training Center / Online", the line of text) must
     never show through then */
  .programmes__row .programme .detail__intro {
    left: 50%;
    top: calc(70.49 * var(--u));
    translate: calc(-50% + var(--mx, 0px) * 0.35) calc(var(--my, 0px) * 0.3);
    flex-direction: row;
    justify-content: center;
    gap: 0;
    width: max-content;
    max-width: none;
  }
  .programmes__row .programme .detail__logo img { width: auto; height: calc(108.36 * var(--u)); }
  .detail__text,
  .detail__mode { display: none; }

  /* open-card CTAs match the resting ones in the file */
  .detail__actions { gap: 12px; }
  .detail__cta {
    height: 44px;
    padding: 0 32px;
    border-radius: 12px;
    background: #2563eb;
    font-weight: 500;
    font-size: 14px;
  }
  .detail__cta--ghost {
    height: 46px;
    padding: 0 32px;
    background: #f6f5fa;
    border-color: #cbd5e1;
  }
  .programme.is-active .detail__cta:hover { background: #1d4ed8; }
  .programme.is-active .detail__cta--ghost:hover { background: #eef2fb; }
}

/* ==========================================================================
   Opening, as one movement. The resting card and the open card crossfade over
   the same stretch of time while the card grows: the tint eases to the white
   of the open card, the black-and-white preview fades out as the colour photo
   fades in, with no gap between them (before, the preview went in 0.25s and
   the open layer only started 0.18s later, so the bare tint flashed through).
   Only the opening transitions change; closing keeps its own timing.
   Depth follows the file: the photo is in front, the logo behind it.
   ========================================================================== */
.programme {
  transition:
    flex-basis var(--dur) var(--ease),
    border-color 0.4s ease,
    box-shadow 0.9s var(--ease),
    transform 0.9s var(--ease),
    background-color 0.7s ease;
}
.programme.is-active { background-color: #fff; }

.programme.is-active .programme__preview {
  opacity: 0;
  transition: opacity 0.42s ease;
}
.programme.is-active .programme__detail {
  transition: opacity 0.6s ease;
}

/* the open photo is in colour from the first frame, so the colour arrives once, with the fade */
.detail__photo img,
.programme.is-active .detail__photo img { filter: none; }

/* photo in front of the logo; the white fade stays on top of the photo's lower edge */
.detail__photo { z-index: 1; }
.detail__fade { z-index: 2; }
.detail__intro { z-index: 0; }

/* the logo is the far layer now: it follows the pointer the same way as the photo, but less
   (the translate itself is set with the desktop placement above) */
@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .programmes__row .programme .detail__intro { translate: -50% 0; }
}

/* ==========================================================================
   The open card as a scaled copy of the Figma frame (1070 x 602): the side
   panel, its type, icons and buttons take the same --u as the width and the
   height, so nothing drifts from the file when the row is narrower than 1385.
   ========================================================================== */
@media (min-width: 900px) {
  .programmes__row .programme .detail__panel {
    flex: 0 0 calc(320 * var(--u));
    padding: calc(40 * var(--u)) calc(34 * var(--u));
  }
  .programmes__row .programme .detail__body { gap: calc(40 * var(--u)); }
  .programmes__row .programme .detail__headline { font-size: calc(22 * var(--u)); }
  .programmes__row .programme .features { gap: calc(16 * var(--u)); max-width: calc(235 * var(--u)); }
  /* the site's Inter sets a touch wider than Figma's; -0.01em gives the file's line breaks back */
  .programmes__row .programme .features li { gap: calc(16 * var(--u)); font-size: calc(15 * var(--u)); letter-spacing: -0.01em; }
  .programmes__row .programme .features__icon {
    width: calc(40 * var(--u));
    height: calc(40 * var(--u));
    border-radius: calc(12 * var(--u));
  }
  .programmes__row .programme .features__icon svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
  .programmes__row .programme .detail__actions { gap: calc(12 * var(--u)); margin-top: 0; }
  .programmes__row .programme .detail__cta {
    height: calc(44 * var(--u));
    padding: 0 calc(32 * var(--u));
    border-radius: calc(12 * var(--u));
    font-size: calc(14 * var(--u));
  }
  .programmes__row .programme .detail__cta--ghost { height: calc(46 * var(--u)); }
}

/* ==========================================================================
   Open card, Figma revision (CCBP-v02, node 1030:488, frames 1028:148,
   1028:207, 1029:332): #f8f8f8 media half and card, a white side panel,
   a smaller logo, per-programme icon tiles and a per-programme primary
   button. Figma px, scaled by --u like the rest of the card.
   ========================================================================== */
.programme--academy   { --o-icon: #0052ff; --o-tile: #e8efff; --o-cta: #2563eb; --o-cta-hover: #1d4ed8; }
.programme--intensive { --o-icon: #6138d3; --o-tile: #ede6ff; --o-cta: #6138d3; --o-cta-hover: #5028c0; }
.programme--niat      { --o-icon: #991b1b; --o-tile: #fff7e2; --o-cta: #991b1b; --o-cta-hover: #7f1515; }

@media (min-width: 900px) {
  .programme.is-active { background-color: #f8f8f8; }
  .programme.is-active .detail__media { background: #f8f8f8; }
  .programmes__row .programme .detail__panel { background: #fff; }
  .programme.is-active .detail__fade {
    height: calc(164.31 * var(--u));
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%);
  }

  /* photos, re-placed in the file */
  .programme--academy   { --op-x: -128.1; --op-b: -314.5; --op-w: 870.8; }
  .programme--intensive { --op-x: -284.7; --op-b: -62.3;  --op-w: 1222.0; }
  .programme--niat      { --op-x: -107.4; --op-b: -44.2;  --op-w: 965.8; }

  /* logo: 59.4 tall (NIAT 66.4), 60.7 from the top */
  .programmes__row .programme .detail__intro { top: calc(60.67 * var(--u)); }
  .programmes__row .programme .detail__logo img { height: calc(59.4 * var(--u)); }
  .programmes__row .programme--niat .detail__logo img { height: calc(66.43 * var(--u)); }

  .programmes__row .programme .features__icon { background: var(--o-tile); color: var(--o-icon); }

  .programmes__row .programme .detail__cta { background: var(--o-cta); }
  .programme.is-active .detail__cta:hover { background: var(--o-cta-hover); box-shadow: none; }
  .programmes__row .programme .detail__cta--ghost {
    background: #fff;
    border-color: #cbd5e1;
    color: #1f2e5c;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  }
  .programme.is-active .detail__cta--ghost:hover { background: #f8fafc; border-color: #94a3b8; }
}

/* Academy's open photo at 88% of the file's size: the plate is cropped tight on his hair and the
   pointer zoom (1.06, from the bottom edge) lifts it ~6%, which ran his hair into the logo. Top of
   the hair: 172 at rest, ~132 at full zoom, both below the logo's 120; centred where it was. */
@media (min-width: 900px) {
  .programme--academy { --op-x: -75.9; --op-b: -245.6; --op-w: 766.3; }
}

/* No white fade at the foot of the open photos: the pictures run clean to the card's edge. */
.programmes__row .programme .detail__fade { display: none; }

/* ==========================================================================
   Phones: every card is its open state, stacked. The media half keeps the
   Figma frame's proportions (751 x 600, so --u is the card's own width over
   751) with the same photo and logo placements, and the panel follows below:
   headline, features, the two buttons. No tap-to-open, no resting layer, no
   extra lines. programmes.js keeps every open layer live here.
   ========================================================================== */
@media (max-width: 899px) {
  .programme--academy   { --op-x: -75.9;   --op-b: -245.6; --op-w: 766.3; }
  .programme--intensive { --op-x: -284.7;  --op-b: -62.3;  --op-w: 1222.0; }
  .programme--niat      { --op-x: -107.4;  --op-b: -44.2;  --op-w: 965.8; }

  .programmes__row .programme,
  .programmes__row.has-active .programme,
  .programmes__row.has-active .programme.is-active {
    height: auto;
    container-type: inline-size;
    background: #f8f8f8;
    border-color: #e8e8e8;
    cursor: default;
    transform: none;
    box-shadow: none;
  }
  .programmes__row .programme .programme__preview,
  .programmes__row .programme .programme__actions { display: none; }

  .programmes__row .programme .programme__detail {
    position: relative;
    width: 100%;
    flex-direction: column;
    opacity: 1;
    pointer-events: auto;
    animation: none;
  }

  .programmes__row .programme .detail__media {
    --u: calc(100cqw / 751);
    flex: none;
    height: auto;
    aspect-ratio: 751 / 600;
    background: #f8f8f8;
  }
  .programmes__row .programme .detail__photo {
    left: calc(var(--op-x) * var(--u));
    bottom: calc(var(--op-b) * var(--u));
    width: calc(var(--op-w) * var(--u));
    transform: none;
  }
  .programmes__row .programme .detail__photo img { animation: none; transform: none; }
  .programmes__row .programme .detail__steps { display: none; }
  .programmes__row .programme .detail__intro {
    left: 50%;
    top: calc(60.67 * var(--u));
    translate: -50% 0;
    flex-direction: row;
    justify-content: center;
    gap: 0;
    width: max-content;
    max-width: none;
  }
  .programmes__row .programme .detail__intro > * { opacity: 1; transform: none; }
  .programmes__row .programme .detail__logo img { width: auto; height: calc(59.4 * var(--u)); }
  .programmes__row .programme--niat .detail__logo img { height: calc(66.43 * var(--u)); }
  .programmes__row .programme .detail__text,
  .programmes__row .programme .detail__mode { display: none; }

  .programmes__row .programme .detail__panel {
    flex: none;
    background: #fff;
    padding: 28px 24px 24px;
    gap: 28px;
  }
  .programmes__row .programme .detail__body { gap: 24px; }
  .programmes__row .programme .detail__headline,
  .programmes__row .programme .features li,
  .programmes__row .programme .programme__cta { opacity: 1; transform: none; }
  .programmes__row .programme .features { gap: 16px; max-width: none; }
  .programmes__row .programme .features__icon { background: var(--o-tile); color: var(--o-icon); }
  .programmes__row .programme .detail__actions { gap: 12px; margin-top: 0; }
  .programmes__row .programme .detail__cta {
    height: 44px;
    padding: 0 32px;
    border-radius: 12px;
    background: var(--o-cta);
    font-weight: 500;
    font-size: 14px;
  }
  .programmes__row .programme .detail__cta--ghost {
    height: 46px;
    background: #fff;
    border-color: #cbd5e1;
    color: #1f2e5c;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  }
}

/* Closed cards: a firmer fade, so the buttons sit on clean tint. It starts higher (342 up from the
   foot) and is solid from 52% down, i.e. ~160 up, before the buttons' top at 129. */
@media (min-width: 900px) {
  .programmes__row .programme__fade,
  .programmes__row.has-active .programme__fade {
    height: calc(342 * var(--u));
    background: linear-gradient(to bottom, var(--tint-0) 0%, var(--tint) 52%, var(--tint) 100%);
  }
}