/* Ignite SAP Xcelerate — home page.
   Sizes follow the 1920px design; the container is the design's 1240px content column.
   Every content section uses the same vertical rhythm (--section-y) top and bottom. */

:root {
    --orange: #f39122;
    --orange-dark: #dd7c0e;
    --orange-soft: #fff3e4;
    --navy: #224680;
    --navy-dark: #18345f;
    --navy-soft: #eaf1fb;
    --hero-bg: #e8f5fe;
    --peach: #feeddb;
    --text: #1d2433;
    --text-muted: #4b5563;
    --white: #ffffff;
    --card-border: #f0c38a;

    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-display: 'Montserrat', var(--font-body);
    --font-faq: 'Plus Jakarta Sans', var(--font-body);

    --container: 1160px;
    --header-h: 104px;
    --gutter: 24px;
    --radius: 12px;

    /* One spacing scale for the whole page */
    --section-y: clamp(56px, 5.5vw, 88px);
    --head-gap: clamp(28px, 3vw, 44px);

    --ease: cubic-bezier(.22, .61, .36, 1);
    --shadow-sm: 0 4px 14px rgba(34, 70, 128, .08);
    --shadow-lg: 0 22px 44px rgba(34, 70, 128, .16);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

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

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 3px;
}

.container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* ---------- Scroll reveal ---------- */

/* Only hidden when JavaScript is running, so the page never stays blank without it. */
.js .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: var(--delay, 0ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@keyframes rise-in {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

@keyframes slide-in-right {
    from { opacity: 0; transform: translateX(60px); }
    to { opacity: 1; transform: none; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: .6; }
    100% { transform: scale(1.7); opacity: 0; }
}

/* ---------- Buttons & links ---------- */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    border: 0;
    border-radius: 8px;
    font: 600 15px/1.2 var(--font-body);
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: background-color .2s ease, transform .2s var(--ease), box-shadow .2s ease;
}
.btn-primary { background: var(--orange); color: var(--white); box-shadow: 0 6px 16px rgba(243, 145, 34, .28); }
.btn-primary:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(243, 145, 34, .38); }
.btn-primary:active { transform: translateY(0); }

/* A light sheen that sweeps across on hover */
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .6s var(--ease);
}
.btn-primary:hover::after { transform: translateX(120%); }

.btn-sm { padding: 10px 22px; font-size: 14.5px; border-radius: 7px; }
.btn-lg { padding: 15px 44px; font-size: 16px; border-radius: 9px; }

.btn-arrow { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }

.link-arrow {
    font: 600 15px/1.2 var(--font-body);
    color: var(--navy);
    text-decoration: none;
}
.link-arrow span { display: inline-block; transition: transform .2s var(--ease); }
.link-arrow:hover span { transform: translateX(5px); }
.link-arrow:hover { color: var(--orange-dark); }

/* ---------- Hero ---------- */

.hero {
    position: relative;
    /* The banner's own background tone, so the space above it is seamless */
    background: #f6f4f5;
    /* Fills the first screen below the sticky header; the rest of the page
       starts just under the fold. svh keeps a phone's toolbar out of it. */
    min-height: max(460px, calc(100vh - var(--header-h)));
    min-height: max(460px, calc(100svh - var(--header-h)));
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Scroll cue at the bottom of the hero */
.hero-scroll {
    position: absolute;
    left: 50%; bottom: 26px;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 8px;
    transform: translateX(-50%);
    color: var(--navy);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    opacity: .75;
    transition: opacity .2s ease;
}
.hero-scroll:hover { opacity: 1; }
.hero-scroll-mouse {
    position: relative;
    width: 24px; height: 38px;
    border: 2px solid currentColor;
    border-radius: 14px;
}
.hero-scroll-mouse::before {
    content: '';
    position: absolute;
    left: 50%; top: 7px;
    width: 4px; height: 8px;
    margin-left: -2px;
    border-radius: 2px;
    background: var(--orange);
    animation: scroll-wheel 1.8s ease-in-out infinite;
}
@keyframes scroll-wheel {
    0% { transform: translateY(0); opacity: 1; }
    70% { transform: translateY(12px); opacity: 0; }
    100% { transform: translateY(0); opacity: 0; }
}
/* On a wide screen the cue sits on the banner's empty text side; once the
   hero stacks it isn't needed. */
@media (min-width: 1101px) { .hero-scroll { left: 25%; } }
@media (max-width: 1100px) { .hero-scroll { display: none; } }

/* Soft decorative glows behind the text */
.hero::before {
    content: '';
    position: absolute;
    width: 520px; height: 520px;
    left: -160px; top: -200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 145, 34, .14), transparent 65%);
    animation: float 9s ease-in-out infinite;
}

/* The banner along the bottom at its own shape (1920 x 706): its left
   side is a pale, empty area made for the text and the people sit on the
   right. Stretching it to the hero's full height would zoom the people
   across the heading, so it stays at its proportions and its top fades
   into the hero's matching background instead. Never shorter than 60% of
   the hero, cropping the empty left side first when it has to. */
.hero-media {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: max(60%, calc(100vw * 706 / 1920));
    animation: hero-fade 1.2s var(--ease) both;
}
.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right bottom;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
    mask-image: linear-gradient(180deg, transparent 0, #000 22%);
}
@keyframes hero-fade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }

.hero-inner { position: relative; }

/* The banner grows with the screen but the page's 1160px column doesn't,
   so on a large screen the text drifted to the middle, far from the left
   edge and close to the people. The hero and the header above it (kept
   aligned with each other) widen to 84% of the screen instead, which
   leaves a laptop-size screen exactly as it was. */
.hero,
.site-header { --container: max(1160px, 84vw - 48px); }

@media (min-width: 1600px) {
    .hero .hero-content { max-width: 40vw; }
    .hero .hero-title { font-size: 2.5vw; }
    .hero .hero-text { max-width: 34vw; font-size: max(17px, .95vw); }
}

.hero-content { max-width: 600px; padding: 56px 0; }

.hero-animate > * { animation: rise-in .8s var(--ease) both; }
.hero-animate > :nth-child(2) { animation-delay: .15s; }
.hero-animate > :nth-child(3) { animation-delay: .3s; }

.hero-title {
    font: 700 clamp(32px, 3vw, 42px)/1.12 var(--font-display);
    text-transform: uppercase;
    letter-spacing: .005em;
}
.hero-title span { display: block; }
.hero-title-accent { color: var(--orange); }
.hero-title-main { color: var(--navy); }

.hero-text {
    max-width: 540px;
    margin-top: 28px;
    font-size: 17px;
    line-height: 1.62;
    color: #2b2f38;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 56px;
}

/* ---------- Partners ---------- */

.partners { background: var(--orange); padding: 28px 0; }

.partners-inner {
    display: flex;
    justify-content: center;
    gap: 108px;
}

.partner-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 183px;
    height: 73px;
    padding: 8px 12px;
    background: var(--white);
    border-radius: 8px;
    transition: transform .3s var(--ease), box-shadow .3s ease, opacity .7s var(--ease);
}
.partner-card.is-visible:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(120, 60, 0, .22); }
.partner-card img { width: 100%; height: 100%; object-fit: contain; }
/* The Ignite logo file carries wide empty margins; crop into them */
.partner-card--padded img { object-fit: cover; }

/* ---------- Sections ---------- */

.section { padding: var(--section-y) 0; }

.section-head { margin-bottom: var(--head-gap); }

.section-title {
    font: 700 30px/1.2 var(--font-body);
    color: var(--navy);
}
.section-title-center { text-align: center; }
.section-title-lg { font-size: 36px; letter-spacing: -.01em; }
.section-title-light { color: var(--white); }

.section-lead { margin-top: 12px; font-size: 16px; color: var(--text-muted); }

/* ---------- About ---------- */

.about-text {
    max-width: 1124px;
    margin: 24px auto 0;
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
    color: #222;
}

.video-card {
    position: relative;
    display: block;
    width: 100%;
    max-width: 820px;
    margin: var(--head-gap) auto 0;
    padding: 0;
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    background: #000;
    box-shadow: var(--shadow-lg);
}
.video-link { display: block; cursor: pointer; }
.video-card img,
.video-card iframe {
    width: 100%;
    aspect-ratio: 900 / 506;
    object-fit: cover;
    transition: transform .8s var(--ease), filter .4s ease;
}
.video-card iframe { display: block; width: 100%; height: auto; border: 0; }
.video-link:hover img { transform: scale(1.04); filter: brightness(.88); }

.video-play {
    position: absolute;
    top: 50%; left: 50%;
    width: 128px; height: 128px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(220, 38, 38, .6);
    color: var(--white);
    transition: background-color .2s ease, transform .3s var(--ease);
}
.video-play svg { position: relative; width: 64px; height: 64px; }
.video-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .7);
    animation: pulse-ring 2s ease-out infinite;
}
.video-link:hover .video-play,
.video-link:focus-visible .video-play { background: rgba(220, 38, 38, .85); transform: translate(-50%, -50%) scale(1.08); }

/* ---------- Courses ---------- */

.course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.course-card {
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--card-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: transform .4s var(--ease), box-shadow .4s ease, border-color .3s ease, opacity .7s var(--ease);
}
.course-card.is-visible:hover,
.course-card.is-visible.is-open,
.course-card.is-visible:has(:focus-visible) { transform: translateY(-6px); }
.course-card:hover,
.course-card.is-open,
.course-card:has(:focus-visible) { box-shadow: var(--shadow-lg); border-color: var(--orange); }

/* The title and the info panel share one grid cell, so the image area is
   always tall enough for the panel and opening it never moves the layout. */
/* Image, then the course name, then the buttons. The info panel spans the
   image and name rows; the image keeps its own shape, and the panel is
   written to fit in that space. */
.course-media {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    flex: 1;
    overflow: hidden;
    background: var(--white);
    cursor: default;
}
/* At the image's own shape, so it is barely enlarged: the module images
   are small (339 x 186) and blur as soon as they are stretched. */
.course-image {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 339 / 186;
    object-fit: cover;
}

.course-title {
    grid-area: 2 / 1;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 18px 22px 4px;
    transition: opacity .35s ease, transform .45s var(--ease);
}
.course-code {
    font: 700 12.5px/1.2 var(--font-display);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange-dark);
}
.course-name {
    margin-top: 6px;
    font: 700 20px/1.25 var(--font-display);
    color: var(--navy);
}
.course-name::after {
    content: '';
    display: block;
    width: 36px;
    height: 3px;
    margin-top: 12px;
    border-radius: 2px;
    background: var(--orange);
}
/* Shown only where there is no hover, so a phone user knows to tap */
.course-hint {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 1;
    display: none;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--navy);
    font-size: 12px;
    font-weight: 700;
    transition: opacity .3s ease;
}
@media (hover: none) { .course-hint { display: block; } }

.course-panel {
    grid-area: 1 / 1 / 3 / 2;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: 18px 22px 14px;
    background: linear-gradient(170deg, var(--navy) 0%, var(--navy-dark) 100%);
    color: rgba(255, 255, 255, .88);
    font-size: 13.5px;
    line-height: 1.5;
    /* Wiped open from the bottom edge rather than moved: a moving panel
       slid past its own area into the button strip on the way out. */
    clip-path: inset(100% 0 0 0);
    visibility: hidden;
    /* Closing eases in and out evenly, so it is seen sliding all the way down */
    transition: clip-path .5s cubic-bezier(.45, 0, .25, 1), visibility 0s linear .5s;
}
.course-panel > * { opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .4s var(--ease); }

.course-card.is-open .course-panel,
.course-card:has(.course-panel :focus-visible) .course-panel { clip-path: inset(0); visibility: visible; transition: clip-path .5s cubic-bezier(.2, .75, .25, 1), visibility 0s; }
.course-card.is-open .course-panel > *,
.course-card:has(.course-panel :focus-visible) .course-panel > * { opacity: 1; transform: none; }
.course-card.is-open .course-title { opacity: 0; transform: translateY(-16px); }
.course-card.is-open .course-hint { opacity: 0; }
@media (hover: hover) {
    .course-card:hover .course-panel { clip-path: inset(0); visibility: visible; transition: clip-path .5s cubic-bezier(.2, .75, .25, 1), visibility 0s; }
    .course-card:hover .course-panel > * { opacity: 1; transform: none; }
    .course-card:hover .course-title { opacity: 0; transform: translateY(-16px); }
}
/* Panel contents rise in one after another */
.course-panel > :nth-child(2) { transition-delay: .08s; }
.course-panel > :nth-child(3) { transition-delay: .12s; }
.course-panel > :nth-child(4) { transition-delay: .16s; }
.course-panel > :nth-child(5) { transition-delay: .2s; }
.course-panel > :nth-child(6) { transition-delay: .24s; }
.course-panel > :nth-child(7) { transition-delay: .28s; }
.course-panel > :nth-child(8) { transition-delay: .32s; }

.course-info-title {
    margin: 12px 0 4px;
}
.course-info-title:first-child { margin-top: 0; }
/* The module the panel describes, above its details */
.course-panel-name {
    margin-bottom: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    font: 700 15px/1.3 var(--font-display);
    color: var(--white);
}
.course-panel-name span {
    margin-right: 4px;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #ffb45c;
}
.course-panel-name + .course-info-title { margin-top: 0; }
/* "You will learn:" and "Career direction:" lead their own paragraph */
.course-info-runin { margin-top: 10px; }
.course-info-runin .course-info-title { display: inline; margin: 0; }
.course-info-title {
    font: 700 13px/1.3 var(--font-display);
    color: #ffb45c;
}
.course-info-list { display: grid; gap: 1px; padding: 0; list-style: none; }
.course-info-list li { position: relative; padding-left: 16px; }
.course-info-list li::before {
    content: '';
    position: absolute;
    left: 2px; top: .65em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--orange);
}

/* Apply Now and the course outline sit under the course name, below the
   info panel, always visible */
.course-actions {
    grid-area: 3 / 1;
    position: relative;
    z-index: 3;
    display: flex;
    gap: 10px;
    padding: 14px 22px 22px;
}
.course-actions .btn-primary { flex: 1; }
.btn-outline {
    gap: 8px;
    background: transparent;
    color: var(--navy);
    box-shadow: inset 0 0 0 1.5px var(--navy);
}
.btn-outline:hover { background: var(--navy); color: var(--white); transform: translateY(-2px); }
.btn-outline svg { width: 17px; height: 17px; flex: none; transition: transform .25s var(--ease); }
.btn-outline:hover svg { transform: translateY(2px); }

/* ---------- Program features ---------- */

.features {
    position: relative;
    background: var(--navy);
    padding: var(--section-y) 0;
    overflow: hidden;
}
/* Faint diagonal accent echoing the orange slash in the icons */
.features::after {
    content: '';
    position: absolute;
    right: -140px; top: -120px;
    width: 420px; height: 420px;
    background: linear-gradient(135deg, rgba(243, 145, 34, .18), transparent 60%);
    transform: rotate(25deg);
    pointer-events: none;
}

.feature-grid {
    position: relative;
    z-index: 1;
    /* Flex, not grid, so an odd last row of features sits centred */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    max-width: 1240px;
    margin: var(--head-gap) auto 0;
}

.feature {
    flex: 0 1 calc((100% - 3 * 24px) / 4);
    padding: 36px 16px 32px;
    border-radius: 16px;
    border: 1px solid transparent;
    text-align: center;
    transition: background-color .35s ease, border-color .35s ease, transform .4s var(--ease), opacity .7s var(--ease);
}
.feature.is-visible:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .14);
}
.feature-icon { display: block; width: 104px; height: 78px; margin: 0 auto; transition: transform .5s var(--ease); }
/* The supplied icons are white only; the design's orange triangle sits behind them */
span.feature-icon { position: relative; }
.feature-icon-shape { position: absolute; inset: 0; width: 100%; height: 100%; }
span.feature-icon img {
    position: relative;
    display: block;
    width: auto;
    height: 74%;
    max-width: 70%;
    margin: 8% auto 0;
    object-fit: contain;
}
.feature:hover .feature-icon { transform: scale(1.1) rotate(-3deg); }
.feature-title {
    max-width: 240px;
    margin: 22px auto 0;
    font: 700 17px/1.35 var(--font-body);
    color: var(--white);
}

/* ---------- Testimonials ---------- */

.testimonials {
    padding: var(--section-y) 0;
    background: linear-gradient(180deg, var(--white) 0%, var(--peach) 16%, #fdf0e3 72%, var(--white) 100%);
    overflow: hidden;
}

.testimonials-title {
    font: 400 40px/1.25 var(--font-body);
    color: var(--navy);
    text-align: center;
}
.testimonials-title strong { font-weight: 800; font-variant-numeric: tabular-nums; }

.testimonial-stage {
    position: relative;
    max-width: 1340px;
    margin: 0 auto;
    padding: 110px 0 20px;
}

.testimonial-stack {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
    padding-bottom: 52px;
}
/* The two paler cards peeking out under the main one */
.testimonial-stack::before,
.testimonial-stack::after {
    content: '';
    position: absolute;
    left: 50%;
    height: 60px;
    border-radius: 0 0 18px 18px;
    transform: translateX(-50%);
}
.testimonial-stack::before { bottom: 26px; width: 93%; background: #f7f9fd; box-shadow: 0 8px 20px rgba(34, 70, 128, .05); }
.testimonial-stack::after { bottom: 0; width: 85%; background: #eef3fb; z-index: -1; }

.testimonial-card {
    position: relative;
    z-index: 1;
    margin: 0;
    min-height: 340px;
    padding: 100px 48px 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(34, 70, 128, .08);
    text-align: center;
}

.testimonial-mark {
    position: absolute;
    top: 56px; left: 50%;
    width: 180px;
    transform: translateX(-50%);
    color: #e4e9f1;
}

.testimonial-quote,
.testimonial-author { position: relative; transition: opacity .25s ease, transform .25s ease; }
.testimonial-card.is-changing .testimonial-quote,
.testimonial-card.is-changing .testimonial-author { opacity: 0; transform: translateY(10px); }

.testimonial-quote {
    margin: 0;
    font-size: 21px;
    font-weight: 400;
    color: #8a96a8;
}

.testimonial-author { font-size: 17px; color: #111; }
.testimonial-author strong { font-weight: 700; }

.testimonial-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 803px;
    margin: 10px auto 0;
    padding: 0 90px;
}

.testimonial-dots { display: flex; gap: 8px; }
.testimonial-dot {
    width: 10px; height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d4c3ad;
    cursor: pointer;
    transition: width .3s var(--ease), background-color .3s ease;
}
.testimonial-dot[aria-current="true"] { width: 28px; background: var(--orange); }

.testimonial-arrows { display: flex; gap: 20px; }

.testimonial-arrow {
    width: 56px; height: 36px;
    padding: 0;
    background: none;
    border: 0;
    color: #a3a3a3;
    cursor: pointer;
    transition: color .2s ease, transform .2s var(--ease);
}
.testimonial-arrow svg { width: 34px; }
.testimonial-arrow.is-next { color: #111; }
.testimonial-arrow.is-next svg { width: 54px; }
.testimonial-arrow:hover { color: var(--orange); transform: translateX(-3px); }
.testimonial-arrow.is-next:hover { transform: translateX(3px); }

/* Student photos: three down each side of the card, the middle one on each
   side smaller and set outward. Below 1100px they become one row above the
   card instead, so they are never hidden. */
.testimonial-people {
    position: absolute;
    top: 70px;
    bottom: 90px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: calc((100% - 700px) / 2);
}
.testimonial-people--left { left: 0; }
.testimonial-people--right { right: 0; }
.testimonial-people--left .avatar-sm { align-self: flex-start; margin-left: 4%; }
.testimonial-people--right .avatar-sm { align-self: flex-end; margin-right: 4%; }

.avatar {
    --size: 112px;
    position: relative;
    flex: none;
    width: var(--size);
    height: var(--size);
    padding: 0;
    overflow: hidden;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 16px 28px rgba(34, 70, 128, .18);
    cursor: pointer;
    animation: float 6s ease-in-out infinite;
    transition: border-color .4s ease, box-shadow .3s ease;
}
.avatar-sm { --size: 78px; }
.avatar:hover { box-shadow: 0 18px 32px rgba(34, 70, 128, .28); }
.avatar.is-active { border-color: var(--orange); }
.avatar:nth-child(2) { animation-delay: -2s; }
.avatar:nth-child(3) { animation-delay: -4s; }
.testimonial-people--right .avatar { animation-delay: -1s; }
.testimonial-people--right .avatar:nth-child(2) { animation-delay: -3s; }
.testimonial-people--right .avatar:nth-child(3) { animation-delay: -5s; }

/* Two of the photo files carry a drop shadow around a smaller circle; the
   inline --zoom/--x/--y values crop each one to its real circle. */
.avatar img {
    position: absolute;
    top: calc(-1 * var(--y, 0%));
    left: calc(-1 * var(--x, 0%));
    width: calc(var(--zoom, 1) * 100%);
    max-width: none;
    height: auto;
    filter: saturate(.85);
    transition: filter .4s ease;
}
.avatar.is-active img,
.avatar:hover img { filter: none; }

/* ---------- Call to action ---------- */

.cta-section { padding: var(--section-y) 0; }

.cta {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 380px;
    padding: 56px 88px;
    border-radius: 20px;
    color: var(--white);
    background:
        linear-gradient(90deg, rgba(8, 36, 80, .96) 0%, rgba(10, 46, 98, .82) 38%, rgba(14, 60, 125, .25) 100%),
        url('../images/home-page/sap-journey.jpg') right center / cover no-repeat;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}


.cta-title { font: 700 34px/1.2 var(--font-body); }
.cta-text { margin-top: 14px; font-size: 17px; color: rgba(255, 255, 255, .92); }
.cta .btn { margin-top: 30px; }

/* ---------- FAQ ---------- */

.faq-inner { max-width: 900px; }

.faq-title {
    font: 600 36px/1.2 var(--font-faq);
    color: #0b0b0b;
    text-align: center;
    letter-spacing: -.01em;
}

.faq-list { margin-top: var(--head-gap); }

.faq-item {
    border-bottom: 1px solid #eceef2;
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.faq-heading { font: inherit; }

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 22px 0;
    background: none;
    border: 0;
    font: 600 17px/1.4 var(--font-faq);
    color: #141a2a;
    text-align: left;
    cursor: pointer;
    transition: color .2s ease;
}
.faq-question:hover,
.faq-question[aria-expanded="true"] { color: var(--navy); }

.faq-icon {
    position: relative;
    flex: 0 0 38px;
    width: 38px; height: 38px;
    border-radius: 50%;
    transition: background-color .3s ease, color .3s ease, transform .4s var(--ease);
}
.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    top: 50%; left: 8px;
    width: 22px; height: 3px;
    border-radius: 2px;
    background: currentColor;
    transform: translateY(-50%);
    transition: transform .35s var(--ease);
}
.faq-icon::after { transform: translateY(-50%) rotate(90deg); }
.faq-question:hover .faq-icon { background: var(--orange-soft); }
.faq-question[aria-expanded="true"] .faq-icon { background: var(--orange); color: var(--white); transform: rotate(180deg); }
.faq-question[aria-expanded="true"] .faq-icon::after { transform: translateY(-50%) rotate(0deg); }

/* Smooth open/close: the row animates from 0fr to 1fr. Collapsed content is
   also made invisible so it is skipped by screen readers and the keyboard. */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .4s var(--ease), visibility 0s linear .4s;
}
.faq-item.is-open .faq-answer {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .4s var(--ease), visibility 0s;
}
.faq-answer-inner { overflow: hidden; }
.faq-answer p { padding: 0 60px 22px 0; font: 400 15.5px/1.7 var(--font-body); color: var(--text-muted); }

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

@media (max-width: 1100px) {
    .testimonial-stage { padding-top: var(--head-gap); }
    .testimonial-stage { display: flex; flex-wrap: wrap; justify-content: center; }
    .testimonial-people {
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        width: auto;
        margin: 0 7px 28px;
    }
    .testimonial-people .avatar-sm { align-self: center; margin: 0; }
    .avatar { --size: 72px; border-width: 3px; }
    .avatar-sm { --size: 56px; }
    .testimonial-stack,
    .testimonial-controls { flex: 0 0 100%; }
    :root { --header-h: 84px; }


    .hero { flex-direction: column; align-items: stretch; }
    /* Stacked: the text on the banner's pale tone, then the banner's
       people side, which fills whatever height the hero has left. */
    .hero-media { position: relative; flex: 1; width: 100%; height: auto; min-height: 300px; order: 2; }
    .hero-media img { position: absolute; inset: 0; object-position: 78% center; -webkit-mask-image: none; mask-image: none; }
    .hero-content { padding: var(--section-y) 0; }
    .hero-actions { margin-top: 40px; }

    .partners-inner { gap: 32px; }


    .feature { flex-basis: calc((100% - 24px) / 2); }

    .cta { padding: 50px 56px; min-height: 380px; }

}

/* Three course columns hold down to here, so each card stays near the
   images' own 339px width and they stay sharp. */
@media (max-width: 1060px) {
    .course-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
    .testimonial-people { gap: 8px; margin: 0 4px 22px; }
    .avatar { --size: 50px; }
    .avatar-sm { --size: 38px; }
    :root { --gutter: 16px; --section-y: 56px; --head-gap: 28px; }

    .hero-title { font-size: 26px; }
    :root { --header-h: 68px; }
    .hero-text { font-size: 16px; margin-top: 18px; }
    .hero-actions { flex-wrap: wrap; gap: 20px; }
    .hero-media { min-height: 240px; }

    .partners-inner { gap: 10px; }
    .partner-card { flex: 1; width: auto; height: 56px; padding: 6px 8px; }

    .section-title { font-size: 24px; }
    .section-title-lg { font-size: 28px; }
    .section-lead { font-size: 16px; }
    .about-text { font-size: 15px; line-height: 1.75; }
    .video-card { border-radius: 14px; }
    .video-play { width: 80px; height: 80px; }
    .video-play svg { width: 40px; height: 40px; }

    .course-grid { grid-template-columns: 1fr; gap: 20px; }

    .feature { flex-basis: calc((100% - 24px) / 2); padding: 24px 12px; }
    .feature-title { font-size: 15.5px; }
    .feature-icon { width: 84px; }

    .testimonials-title { font-size: 28px; }
    .testimonial-card { min-height: 280px; padding: 76px 22px 32px; gap: 28px; }
    .testimonial-mark { width: 150px; top: 40px; }
    .testimonial-quote { font-size: 18px; }
    .testimonial-author { font-size: 16px; }
    .testimonial-controls { padding: 0 8px; }

    .cta { padding: 40px 24px; min-height: 0; border-radius: 14px; }
    .cta-title { font-size: 26px; }
    .cta-text { font-size: 15.5px; }
    .btn-lg { padding: 14px 36px; font-size: 16px; }

    .faq-title { font-size: 28px; }
    .faq-question { font-size: 16px; }
    .faq-answer p { padding-right: 0; font-size: 15px; }

}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation: none !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
    .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Home page, dynamic course states ---------- */

/* No offering open yet: in place of Apply Now, plainly not a button */
.btn-soon {
    flex: 1;
    background: var(--navy-soft);
    color: var(--navy);
    cursor: default;
}
.courses-empty { color: var(--text-muted); font-size: 16px; }
.courses-empty a { color: var(--navy); font-weight: 600; }