/* Partners in learning: a full-bleed band, the list on the left and a photo stage on the right.
   The glow behind the list takes each partner's color; partners.js drives the rest (see its header). */
@property --partner-glow { syntax: '<color>'; inherits: true; initial-value: #05d9ab; }

.partners-section { --partners-edge: max(32px, calc((100cqw - var(--content-width)) / 2)); --partner-duration: 7s; --partner-ease: cubic-bezier(.7, 0, .2, 1); --partners-large: 22px; --partners-small: 17px; container-type: inline-size; padding-top: 0; padding-bottom: 90px; scroll-margin-top: 38px; transition: --partner-glow 1.2s ease; }
.partners-section[data-active-partner="babson"] { --partner-glow: #f2b46d; }
.partners-section[data-active-partner="hsbc"] { --partner-glow: #ee8f62; }
.partners-section[data-active-partner="microsoft"] { --partner-glow: #4cc8e6; }
@media (max-width: 650px) { .partners-section { --partners-edge: 23px; } }

.partners-shell { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: clamp(720px, 92svh, 940px); overflow: hidden; background: radial-gradient(80% 50% at 0% 100%, color-mix(in srgb, var(--partner-glow) 22%, transparent), transparent 75%), radial-gradient(50% 35% at 100% 0%, rgb(170 241 172 / .05), transparent 70%), #12302b; color: #fff; }
.partners-side { display: flex; flex-direction: column; gap: 48px; min-width: 0; padding: 88px 56px 72px var(--partners-edge); }
.partners-heading h2 { max-width: 8em; margin: 0; color: #fff; font-size: clamp(48px, 5vw, 76px); font-weight: 500; line-height: 1; letter-spacing: -.045em; }
.partners-heading > p { max-width: 380px; margin: 24px 0 0; color: #b6c8bf; font-size: var(--partners-small); line-height: 1.6; text-wrap: pretty; }

.partners-choices { display: grid; margin-top: auto; border-top: 1px solid #ffffff1f; }
.partner-choice { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: baseline; gap: 0 14px; width: 100%; min-height: 88px; padding: 28px 0; border: 0; border-bottom: 1px solid #ffffff1f; background: transparent; color: #93aba1; text-align: left; cursor: pointer; }
.partner-choice-index { color: #6d897f; font-size: var(--partners-small); font-variant-numeric: tabular-nums; }
.partner-choice-name { min-width: 0; font-size: var(--partners-large); font-weight: 500; line-height: 1.15; letter-spacing: -.025em; transition: transform .5s var(--ease); }
.partner-choice-kind { min-width: 0; font-size: var(--partners-small); line-height: 1.4; text-align: right; }
.partner-choice:hover, .partner-choice[aria-pressed="true"] { color: #fff; }
.partner-choice:hover .partner-choice-name, .partner-choice[aria-pressed="true"] .partner-choice-name { transform: translateX(10px); }
.partner-choice[aria-pressed="true"] .partner-choice-index { color: var(--partner-glow); }
.partner-choice:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; border-radius: 2px; }
/* The active line fills over --partner-duration while the rotation runs, and stays full when it stops. */
.partner-choice-progress { position: absolute; inset: auto 0 -1px; height: 2px; background: var(--partner-glow); transform: scaleX(0); transform-origin: left; }
.partner-choice[aria-pressed="true"] .partner-choice-progress { transform: scaleX(1); }
.partners-section[data-autoplay="on"] .partner-choice[aria-pressed="true"] .partner-choice-progress { animation: partner-progress var(--partner-duration) linear both; }
/* Same selector as the rule above plus [data-hold]: a shorter one loses to it, and its shorthand sets the state back to running. */
.partners-section[data-autoplay="on"][data-hold] .partner-choice[aria-pressed="true"] .partner-choice-progress { animation-play-state: paused; }
@keyframes partner-progress { from { transform: scaleX(0); } }

.partner-panel { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; overflow: hidden; padding: 56px; background: #0d2420; touch-action: pan-y; }
.partner-panel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0a1f1c66 0%, #0a1f1c00 22%, #0a1f1c1a 45%, #091d1ad1 74%, #091d1af7 100%); pointer-events: none; }
.partner-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.partner-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; opacity: 0; }
.partner-photo.is-active { z-index: 2; opacity: 1; }
.partner-photo.is-leaving { z-index: 1; opacity: 1; }

.partner-story { max-width: min(560px, 100% - 190px); }
.partner-logo { display: block; width: auto; max-width: min(300px, 100%); height: 44px; object-fit: contain; object-position: left center; }
.partner-logo[data-logo-fit="babson"] { height: 33px; }
.partner-logo[data-logo-fit="microsoft"] { height: 38px; }
.partner-description { margin: 26px 0; color: #fff; font-size: var(--partners-large); line-height: 1.55; text-wrap: pretty; }
.partner-more { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 16px 10px 20px; border: 1px solid #ffffff70; border-radius: var(--button-radius); background: #ffffff0d; color: #fff; font-size: var(--partners-small); line-height: 1.4; text-decoration: none; }
.partner-more .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.partner-more:hover { border-color: #ffffffad; background: #ffffff1f; }
.partner-more:hover .icon { transform: translate(2px, -2px); }
.partner-more:focus-visible { outline: 3px solid var(--mint); outline-offset: 4px; }

.partner-controls { position: absolute; right: 56px; bottom: 56px; display: flex; gap: 8px; }
.partner-controls[hidden] { display: none; }
.partner-control { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid #ffffff4d; border-radius: 50%; background: rgb(8 28 25 / .3); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.partner-control[hidden] { display: none; }
.partner-control:hover { border-color: #ffffffad; background: rgb(255 255 255 / .16); }
.partner-control:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.partner-control .icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.partner-control--prev .icon { transform: scaleX(-1); }
#partner-next:hover .icon { transform: translateX(3px); }
.partner-control--prev:hover .icon { transform: scaleX(-1) translateX(3px); }

@media (prefers-reduced-motion: no-preference) {
  /* The new photo wipes in from the side the visitor moved toward while the old one slides away under it. */
  .partner-photo.is-entering { animation: partner-wipe 1.1s var(--partner-ease) both, partner-settle calc(var(--partner-duration) + 1.5s) cubic-bezier(.2, .7, .2, 1) both; }
  .partner-panel[data-direction="back"] .partner-photo.is-entering { animation-name: partner-wipe-back, partner-settle; }
  .partner-photo.is-leaving { animation: partner-leave 1.1s var(--partner-ease) both; }
  .partner-panel[data-direction="back"] .partner-photo.is-leaving { animation-name: partner-leave-back; }
  .partner-story.is-leaving > * { opacity: 0; transform: translateY(-10px); transition: opacity .22s ease, transform .22s ease; }
  .partner-story.is-entering > * { animation: partner-rise .75s cubic-bezier(.2, .7, .2, 1) both; }
  .partner-story.is-entering > :nth-child(2) { animation-delay: .08s; }
  .partner-story.is-entering > :nth-child(3) { animation-delay: .16s; }

  /* Entrance: partners.js adds .is-ready, then .is-revealed when the band first comes into view. */
  .partners-section.is-ready .partners-heading > *, .partners-section.is-ready .partner-choice { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .partners-section.is-ready .partner-media { clip-path: inset(0 0 0 100%); transition: clip-path 1.4s var(--partner-ease) .1s; }
  .partners-section.is-revealed .partners-heading > *, .partners-section.is-revealed .partner-choice { opacity: 1; transform: none; }
  .partners-section.is-revealed .partner-media { clip-path: inset(0); }
  .partners-heading > p { transition-delay: .08s; }
  .partner-choice:nth-child(1) { transition-delay: .2s; }
  .partner-choice:nth-child(2) { transition-delay: .28s; }
  .partner-choice:nth-child(3) { transition-delay: .36s; }
  .partner-choice:nth-child(4) { transition-delay: .44s; }

  @keyframes partner-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
  @keyframes partner-wipe-back { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
  @keyframes partner-settle { from { transform: scale(1.16); } to { transform: scale(1.03); } }
  @keyframes partner-leave { to { transform: translateX(-12%) scale(1.03); } }
  @keyframes partner-leave-back { to { transform: translateX(12%) scale(1.03); } }
  @keyframes partner-rise { from { opacity: 0; transform: translateY(20px); } }
}
/* A slow parallax on the stage where scroll-driven animations exist. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .partner-media { inset: -7% 0; animation: partner-parallax linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes partner-parallax { from { transform: translateY(-5%); } to { transform: translateY(5%); } }
  }
}

@media (max-width: 1150px) {
  .partners-side { gap: 40px; padding: 72px 40px 56px var(--partners-edge); }
  .partner-panel { padding: 44px; }
  .partner-controls { right: 44px; bottom: 44px; }
  .partner-choice { grid-template-columns: 32px minmax(0, 1fr) auto; min-height: 80px; padding-block: 24px; }
  .partners-section { --partners-large: 20px; }
}
/* Phones and tablets: heading, then the stage, then the list. */
@media (max-width: 850px) {
  .partners-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "stage" "list"; min-height: 0; }
  .partners-side { display: contents; }
  .partners-heading { grid-area: heading; padding: 64px var(--partners-edge) 36px; }
  .partners-heading h2 { max-width: none; font-size: clamp(40px, 7vw, 56px); }
  .partners-heading > p { max-width: 500px; margin-top: 18px; }
  .partner-panel { grid-area: stage; height: min(130vw, 680px); padding: 32px var(--partners-edge); }
  .partner-controls { right: var(--partners-edge); bottom: 32px; }
  .partner-story { max-width: 560px; }
  .partners-choices { grid-area: list; margin: 0; padding: 12px var(--partners-edge) 48px; border-top: 0; }
  .partner-choice:hover .partner-choice-name { transform: none; }
}
@media (max-width: 650px) {
  .partners-section { --partners-large: 19px; --partners-small: 16px; padding-bottom: 60px; scroll-margin-top: 24px; }
  .partners-heading { padding: 52px var(--partners-edge) 30px; }
  .partners-heading h2 { font-size: 42px; }
  .partner-panel { height: min(150vw, 640px); padding-bottom: 28px; }
  .partner-controls { bottom: 28px; gap: 6px; }
  .partner-story { max-width: none; }
  .partner-description { margin: 20px 0; }
  .partner-logo { max-width: 100%; height: 36px; }
  .partner-logo[data-logo-fit="babson"] { height: 28px; }
  .partner-logo[data-logo-fit="microsoft"] { height: 32px; }
  .partner-choice { grid-template-columns: 30px minmax(0, 1fr) auto; min-height: 68px; padding-block: 20px; }
  .partner-choice-kind { max-width: 11em; }
  .partner-choice[aria-pressed="true"] .partner-choice-name { transform: translateX(6px); }
}
@media (max-width: 374px) {
  .partner-choice { grid-template-columns: 26px minmax(0, 1fr); }
  .partner-choice-kind { grid-column: 2; text-align: left; }
}