/* ---------------------------------------------------------------------
   0. PAGE
   --------------------------------------------------------------------- */
.pa-home { background: var(--pa-paper); }

/* Home section heads read centred (marketing landing), unlike the
   left-aligned editorial heads on the trainings pages. */
.pa-home .pa-section__head {
    max-width: none;
    margin-inline: auto;
    text-align: center;
}
.pa-home .pa-section__head .pa-eyebrow { justify-content: center; }

/* Shared polished photo treatment */
.pa-photo {
    display: block;
    width: 100%;
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow-card);
    object-fit: cover;
}

/* Full-bleed — the hero and every section background span the whole
   viewport, whatever width the page's content area is set to.
   body{overflow-x:clip} absorbs the scrollbar-width overflow. */
.pa-hero-home,
.pa-home .pa-section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ---------------------------------------------------------------------
   1. HERO  —  split: copy left, photo (masked-fade) right
   --------------------------------------------------------------------- */
.pa-hero-home {
    position: relative;
    color: #fff;
    background-color: var(--pa-indigo);
    background-image:
        radial-gradient(120% 95% at 90% 0%, rgba(176,141,87,.22), transparent 60%),
        linear-gradient(158deg, #403a87 0%, var(--pa-indigo) 55%, var(--pa-indigo-deep) 100%);
    border-radius: 0 0 clamp(18px, 3vw, 38px) clamp(18px, 3vw, 38px);
}
.pa-hero-home::after {            /* hairline brass accent along the top */
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--pa-brass), transparent);
}

.pa-hero-home__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    padding-top: clamp(2.75rem, 6vw, 5rem);
}

.pa-hero-home__copy { max-width: 35rem; padding-block: clamp(1.5rem, 4vw, 3rem); }
.pa-hero-home .pa-eyebrow { color: #d9bd92; }
.pa-hero-home .pa-eyebrow::before { background: var(--pa-brass); }
.pa-hero-home__title {
    color: #fff;
    font-family: var(--pa-serif);
    font-weight: 400;
    font-size: clamp(2.3rem, 4.7vw, 3.75rem);
    line-height: 1.07;
    letter-spacing: -.018em;
    margin: 1rem 0 0;
}
.pa-hero-home__sub {
    font-size: clamp(1.02rem, 1.7vw, 1.2rem);
    line-height: 1.6;
    color: rgba(255,255,255,.82);
    margin-top: 1.15rem;
    max-width: 40ch;
}
.pa-hero-home__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: 1.9rem;
}

/* photo column — the image fades in from the indigo on its left edge */
.pa-hero-home__visual {
    position: relative;
    align-self: stretch;
    min-height: 340px;
    overflow: hidden;
}
.pa-hero-home__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%);
            mask-image: linear-gradient(to right, transparent 0%, #000 34%);
}

/* ---------------------------------------------------------------------
   2. STAT BAR  —  floats at the hero base, overhangs the next section
   --------------------------------------------------------------------- */
.pa-hero-home__stats {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--pa-surface);
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow-card);
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    margin-bottom: clamp(-5.5rem, -7vw, -3.75rem);
}
.pa-stat { text-align: center; padding: clamp(1.3rem, 3vw, 2rem) 1rem; }
.pa-stat + .pa-stat { border-left: 1px solid var(--pa-line); }
.pa-stat__num {
    font-family: var(--pa-serif);
    font-size: clamp(1.95rem, 3.6vw, 2.9rem);
    line-height: 1;
    color: var(--pa-indigo);
}
.pa-stat__label {
    margin-top: .55rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pa-slate-soft);
}

/* the first section after the hero must clear the floating stat bar */
.pa-hero-home + .pa-section { padding-top: clamp(6rem, 9vw, 8.5rem); }

/* keep "Partnering to Build Future-Ready Talent" on one line (desktop) */
@media (min-width: 881px) {
    .pa-hero-home + .pa-section .pa-section__title { white-space: nowrap; }
}

/* ---------------------------------------------------------------------
   3. ABOUT  (section 2 — two-column: photo + copy + feature list)
   --------------------------------------------------------------------- */
.pa-about {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.pa-about__media .pa-photo { aspect-ratio: 4 / 3; }
.pa-about__body > * + * { margin-top: 1.6rem; }

.pa-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.pa-feature { display: flex; align-items: flex-start; gap: .9rem; }
.pa-feature__icon {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--pa-indigo-tint);
    color: var(--pa-indigo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pa-feature__icon svg { width: 20px; height: 20px; fill: currentColor; }
.pa-feature__text {
    font-family: var(--pa-serif);
    font-size: 1.18rem;
    line-height: 1.3;
    color: var(--pa-ink);
    padding-top: .5rem;
}

/* ---------------------------------------------------------------------
   4. CARD GRID  (sections 5 & 8 — skills, HR solutions)
   --------------------------------------------------------------------- */
.pa-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.pa-card {
    background: var(--pa-surface);
    border: 1px solid var(--pa-line);
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow-soft);
    padding: clamp(1.5rem, 3vw, 2.1rem);
    transition: transform .3s var(--pa-ease), box-shadow .3s var(--pa-ease);
}
.pa-card:hover { transform: translateY(-4px); box-shadow: var(--pa-shadow-card); }
.pa-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--pa-radius-sm);
    background: var(--pa-indigo-tint);
    color: var(--pa-indigo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
}
.pa-card__icon svg { width: 24px; height: 24px; fill: currentColor; }
.pa-card__title {
    font-family: var(--pa-serif);
    font-weight: 400;
    font-size: 1.45rem;
    color: var(--pa-ink);
    margin: 0 0 .55rem;
}
.pa-card__text { color: var(--pa-slate); font-size: 1rem; line-height: 1.6; }
.pa-card__list {
    list-style: none;
    margin: .8rem 0 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}
.pa-card__list li {
    position: relative;
    padding-left: 1.35rem;
    color: var(--pa-slate);
}
.pa-card__list li::before {
    content: "";
    position: absolute;
    left: .1rem;
    top: .5em;
    width: .42rem;
    height: .42rem;
    background: var(--pa-brass);
    transform: rotate(45deg);
}

/* ---------------------------------------------------------------------
   5. CALLOUT  (section 5 — the "all programs customised" strip)
   --------------------------------------------------------------------- */
.pa-callout {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    margin-top: 1.5rem;
    background: var(--pa-indigo-tint);
    border-radius: var(--pa-radius);
    padding: clamp(1.3rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.4rem);
}
.pa-callout__icon { flex: none; color: var(--pa-indigo); }
.pa-callout__icon svg { width: 34px; height: 34px; fill: currentColor; }
.pa-callout__text {
    margin: 0;
    color: var(--pa-ink);
    font-size: 1.06rem;
    line-height: 1.6;
}
.pa-callout__text strong { color: var(--pa-indigo); font-weight: 600; }

/* ---------------------------------------------------------------------
   6. CERTIFICATIONS  (section 4)
   On a light .pa-section so the white-background badge artwork reads.
   --------------------------------------------------------------------- */
.pa-certs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin-top: .5rem;
}
.pa-cert {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    width: 160px;
}
.pa-cert img { height: 96px; width: auto; object-fit: contain; }
.pa-cert__label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--pa-slate);
    text-align: center;
    line-height: 1.4;
}

/* ---------------------------------------------------------------------
   7. CLIENT LOGO CAROUSEL  (section 6)
   --------------------------------------------------------------------- */
.pa-home .client-logo-carousel { margin-top: clamp(1rem, 3vw, 2rem); }
.pa-home .client-logo-carousel .splide__slide img {
    filter: grayscale(100%);
    opacity: .55;
    transition: filter .4s var(--pa-ease), opacity .4s var(--pa-ease);
}
.pa-home .client-logo-carousel .splide__slide:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* ---------------------------------------------------------------------
   8. MOMENTS  (section 8 — training-photo collage)
   --------------------------------------------------------------------- */
.pa-moments {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.pa-moments .pa-photo {
    aspect-ratio: 4 / 3;
    box-shadow: var(--pa-shadow-soft);
    transition: transform .3s var(--pa-ease), box-shadow .3s var(--pa-ease);
}
.pa-moments .pa-photo:hover {
    transform: translateY(-4px);
    box-shadow: var(--pa-shadow-card);
}

/* ---------------------------------------------------------------------
   9. CTA BAND  (section 10 — photo-backed "let's talk")
   --------------------------------------------------------------------- */
.pa-cta {
    position: relative;
    overflow: hidden;
    border-radius: var(--pa-radius);
    padding: clamp(2.5rem, 6vw, 4.75rem);
    text-align: center;
    color: #fff;
    background-color: var(--pa-indigo-deep);
    background-size: cover;
    background-position: center;
}
.pa-cta::before {           /* indigo wash over the photo for legibility */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(44,37,107,.93), rgba(57,49,133,.82));
}
.pa-cta > * { position: relative; z-index: 1; }
.pa-cta .pa-eyebrow { justify-content: center; color: #d9bd92; }
.pa-cta .pa-eyebrow::before { background: var(--pa-brass); }
.pa-cta__title {
    color: #fff;
    font-family: var(--pa-serif);
    font-weight: 400;
    font-size: clamp(1.8rem, 3.6vw, 2.8rem);
    line-height: 1.12;
    margin: .6rem auto 0;
    max-width: 20ch;
}
.pa-cta__text {
    margin: 1rem auto 0;
    max-width: 52ch;
    color: rgba(255,255,255,.84);
    font-size: 1.06rem;
    line-height: 1.6;
}
.pa-cta__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: 1.8rem;
}

/* Robust centring for the CTA card — higher specificity so it can't be
   knocked off-centre by inherited text-align / layout on page content. */
.pa-home .pa-cta { text-align: center; }
.pa-home .pa-cta__title,
.pa-home .pa-cta__text { margin-left: auto; margin-right: auto; }
.pa-home .pa-cta .pa-eyebrow,
.pa-home .pa-cta__actions { justify-content: center; }

/* ---------------------------------------------------------------------
   10. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 880px) {
    .pa-hero-home__grid { grid-template-columns: 1fr; padding-top: clamp(2.25rem, 7vw, 3.25rem); }
    .pa-hero-home__copy { max-width: none; padding-bottom: 1.5rem; }
    .pa-hero-home__visual { display: none; }   /* no hero photo on mobile */
    .pa-about { grid-template-columns: 1fr; }
    .pa-cards { grid-template-columns: 1fr; }
    .pa-moments { grid-template-columns: repeat(2, 1fr); }
    .pa-callout { flex-direction: column; text-align: center; }
}
@media (max-width: 600px) {
    .pa-hero-home__stats { grid-template-columns: 1fr; }
    .pa-stat + .pa-stat { border-left: none; border-top: 1px solid var(--pa-line); }
    .pa-hero-home__actions .pa-btn { width: 100%; }
    .pa-cta__actions .pa-btn { width: 100%; }
}