/**
 * home.css — Homepage Section Styles
 * TradeUp BC — Homepage Redesign v2
 *
 * Contents:
 *  1.  Hero Banner (Slider)
 *  2.  Info Strip (yellow bar)
 *  3.  Training Section ("Training for the Skilled Trades")
 *  4.  Explore Opportunities (Category Grid)
 *  5.  Feature Callout ("Train the Trainer")
 *  6.  Areas of Demand (dark green + icon grid)
 *  7.  Upcoming Events
 *  8.  Success Stories
 *  9.  FAQ / Why Short Courses
 *  10. Partner Logos
 */


/* =============================================================================
   SCROLL FADE-UP — sections animate in on scroll (JS adds .is-inview)
   ============================================================================= */

   .v2-fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.v2-fade-up.is-inview {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================================================
   1. HERO BANNER (SLIDER)
   ============================================================================= */

.v2-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--c-dark);
}

/* Each individual slide */
.v2-hero__slide {
    position: relative;
    width: 100%;
    min-height: 700px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex !important;
    align-items: center;
}

/* Remove container padding inside the hero */
.v2-hero .v2-container {
    padding-inline: 0;
}

/* Solid black overlay — left 50% only, no shadow/gradient feathering */
.v2-hero__slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.7) 0%,
        rgba(0,0,0,0.7) 50%,
        transparent     50%
    );
    z-index: 1;
}

/* At 1920px+ the container (max 1362px) is centred, so the overlay must track
   the content's right edge instead of staying fixed.
   Formula: (100vw − container-max) / 2 + content-max-width + right-gap
           = (100vw − 1362px) / 2 + 654px + 54px
           = (100vw − 1362px) / 2 + 708px
   At exactly 1920px this equals (558/2)+708 = 987px — same as before. */
@media (min-width: 1920px) {
    .v2-hero__slide::before {
        background: linear-gradient(
            to right,
            rgba(0,0,0,0.7) 0,
            rgba(0,0,0,0.7) calc((100vw - 1362px) / 2 + 708px),
            transparent     calc((100vw - 1362px) / 2 + 708px)
        );
    }
}

.v2-hero__content {
    position: relative;
    z-index: 2;
    /* Width: fills the left 50% overlay minus the 54px right breathing room.
       No container-pad subtracted since padding-inline is removed on the container. */
    width: calc(50vw - 54px);
    max-width: 654px;
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
}

.v2-hero__pretitle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--c-gold);
    margin-bottom: var(--space-5);
}

.v2-hero__pretitle::before {
    content: '';
    display: block;
    width: 32px;
    height: 3px;
    background-color: var(--c-gold);
    border-radius: 2px;
}

.v2-hero__heading {
    font-family: var(--font-heading);
    font-size: 50px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 56px;
    margin-bottom: 0.75rem; /* 12px */
    letter-spacing: 0;
}

.v2-hero__sub {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 0.75rem; /* 12px */
    font-style: normal;
    line-height: 45px;
    letter-spacing: 0;
}

.v2-hero__text {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 500;
    color: #ffffff;
    line-height: 30px;
    letter-spacing: 0.11px;
    margin-bottom: var(--space-8);
}

/* Override global p styles inside the description */
.v2-hero__text p {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 500;
    color: #ffffff;
    line-height: 30px;
    letter-spacing: 0.11px;
    margin-bottom: 0;
}

/* Arrow nav — outside the slide stacking context so it never fades.
   position/top/left/width are set dynamically by JS (positionHeroNav).
   On mobile (<768px) JS resets inline styles and CSS media queries take over. */
.v2-hero__nav {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 82px;
    z-index: 10;
}

/* Arrows inside the nav container */
.v2-hero__nav .slick-arrow {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: transparent;
    border: 4px solid rgba(255, 255, 255, 0.4);
    color: var(--c-white);
    font-size: 18px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--ease);
}

.v2-hero__nav .slick-arrow i {
    font-size: 45px;
    opacity: 0.4;
}

.v2-hero__nav i.ri-arrow-right-s-line {
    position: relative;
    left: 2px;
    top: 1px;
}

.v2-hero__nav i.ri-arrow-left-s-line {
    position: relative;
    left: -1px;
    top: 1px;
}

.v2-hero__nav .slick-arrow::before { display: none; }

.v2-hero__nav .slick-arrow:hover {
    background-color: var(--c-gold);
    border-color: var(--c-gold);
    color: var(--c-dark);
}

.v2-hero__nav .slick-arrow:hover i {
    opacity: 1;
}

/* Dots — hidden for now, kept for future use */
.v2-hero .slick-dots {
    bottom: var(--space-10);
    left: calc(var(--container-pad) + 110px);
    transform: none;
    display: none !important;
    align-items: center;
    gap: var(--space-2);
    width: auto;
}

.v2-hero .slick-dots li { margin: 0; width: auto; height: auto; }

.v2-hero .slick-dots li button {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.4);
    border: 2px solid rgba(255,255,255,0.6);
    transition: var(--ease);
}

.v2-hero .slick-dots li button::before { display: none; }

.v2-hero .slick-dots li.slick-active button {
    background-color: var(--c-gold);
    border-color: var(--c-gold);
    width: 24px;
    border-radius: 4px;
}


/* Hero CTA button overrides */
.v2-hero .v2-btn--primary {
    background: #E8C650;
    border: 2px solid #E8C650;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0;
    color: #004B37;
    text-transform: uppercase;
}

.v2-hero .v2-btn--primary:hover,
.v2-hero .v2-btn--primary:focus {
    background: #004B37;
    border-color: #004B37;
    color: #ffffff;
    transform: none;
    box-shadow: none;
}

/* =============================================================================
   PROMO BANNER (below hero — dismissible announcements)
   ============================================================================= */

.v2-promo-banner-wrap {
    overflow: hidden;
    max-height: 800px; /* enough so banner is never cut off; collapse still animates to 0 when dismissed */
    padding-top: 40px; /* slider → banner spacing */
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.v2-promo-banner-wrap.is-dismissed {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    transform: scaleY(0.98);
    pointer-events: none;
}

/* Keep section spacing even when banner is closed.
   - Banner visible: banner → training = 45px
   - Banner dismissed: slider → training = 40px */
.v2-promo-banner-wrap + .v2-training { margin-top: 45px; }
.v2-promo-banner-wrap.is-dismissed + .v2-training { margin-top: 40px; }
/* When promo banner is disabled in backend, training follows hero directly */
.v2-hero + .v2-training { margin-top: 40px; }

.v2-promo-banner {
    width: 100%;
    background: #E8C650 0% 0% no-repeat padding-box;
    border-radius: 12px;
    padding: 40px 22px 40px 64px; /* top right bottom left */
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    position: relative;
}

.v2-promo-banner__text {
    font: normal normal 600 26px/34px Barlow Semi Condensed, sans-serif;
    letter-spacing: 0px;
    color: #034B39;
    margin: 0;
    padding: 0;
    flex: 1;
    order: 1; /* text left on desktop */
}

.v2-promo-banner__close {
    order: 2; /* button right on desktop */
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #962D00;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.v2-promo-banner__close:hover,
.v2-promo-banner__close:focus {
    background-color: rgba(150, 45, 0, 0.12);
    color: #962D00;
}

.v2-promo-banner__close:focus-visible {
    outline: 2px solid #962D00;
    outline-offset: 2px;
}

.v2-promo-banner__close svg {
    display: block;
}

/* =============================================================================
   2. INFO STRIP (YELLOW BAR)
   ============================================================================= */

.v2-infostrip {
    background-color: var(--c-gold);
    padding-block: var(--space-5);
    position: relative;
    overflow: hidden;
}

.v2-infostrip__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.v2-infostrip__content {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex: 1;
    flex-wrap: wrap;
}

.v2-infostrip__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.v2-infostrip__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-gold-xdk);
    font-size: 20px;
    flex-shrink: 0;
}

.v2-infostrip__label {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--c-dark);
    line-height: 1.2;
}

.v2-infostrip__label span {
    display: block;
    font-weight: 400;
    font-size: var(--text-sm);
    color: var(--c-gold-xdk);
}

.v2-infostrip__logo {
    flex-shrink: 0;
}

.v2-infostrip__logo img {
    height: 52px;
    width: auto;
    object-fit: contain;
}


/* =============================================================================
   3. TRAINING SECTION ("TRAINING FOR THE SKILLED TRADES")
   ============================================================================= */

.v2-training {
    padding-top: 0;
    padding-bottom: 0;
    background-color: var(--c-white);
}

/* Gap between yellow promo banner and this section = 45px (banner has margin-bottom: 45px) */

.v2-training__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: 54px;
    align-items: start;
}

.v2-training__content {
    max-width: 1008px;
}

.v2-training__heading {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: 700;
    color: #034B39;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 22px;
}

.v2-training__sub {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--c-dark);
    margin-bottom: 22px;
    line-height: 1.4;
}

.v2-training__text {
    font: normal normal normal 18px/28px Barlow Semi Condensed, sans-serif;
    letter-spacing: 0.09px;
    color: #3C413F;
}

.v2-training__text p {
    font: normal normal normal 18px/28px Barlow Semi Condensed, sans-serif;
    letter-spacing: 0px;
    color: #3C413F;
    margin-bottom: var(--space-4);
}

.v2-training__text p:last-child {
    margin-bottom: 0;
}

.v2-training__media {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    max-width: 300px;
}

.v2-training__img {
    width: 100%;
    max-width: 300px;
    border-radius: var(--radius-md);
}

.v2-training__caption {
    font: normal normal normal 18px/28px Barlow Semi Condensed, sans-serif;
    letter-spacing: 0px;
    color: #3C413F;
    text-align: center;
    margin: 0;
    max-width: 236px;
}

.v2-training__logo {
    max-width: 200px;
    margin-top: var(--space-4);
}


/* =============================================================================
   4. EXPLORE OPPORTUNITIES (CATEGORY GRID)
   ============================================================================= */

.v2-explore {
    margin-top: 60px;
    padding: 0;
    background-color: var(--c-white);
    position: relative;
    overflow: hidden;
}

/* Gap between training and explore = 60px (training has padding-bottom: 0) */

/* Subtle watermark bg image */
.v2-explore__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.v2-explore__bg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 0.04;
}

.v2-explore__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    padding-inline: var(--container-pad);
    box-sizing: border-box;
}

/* Section header: H2 + subtitle, max 809px, centered, 40px to grid */
.v2-explore__header {
    max-width: 809px;
    margin-inline: auto;
    text-align: center;
    margin-bottom: 40px;
}

.v2-explore__heading {
    font: normal normal bold 40px/47px Rubik, sans-serif;
    letter-spacing: 0px;
    color: #962C08;
    text-transform: uppercase;
    margin: 0 0 var(--space-4) 0;
}

.v2-explore__sub {
    font: normal normal normal 18px/28px Barlow Semi Condensed, sans-serif;
    letter-spacing: 0px;
    color: #3C413F;
    margin: 0;
}

.v2-explore__sub p {
    font: normal normal normal 18px/28px Barlow Semi Condensed, sans-serif;
    letter-spacing: 0px;
    color: #3C413F;
    margin: 0;
}

/* Grid: flex wrap so row of 4 + row of 3 both justify center; cards max 418px, gap 54px, row-gap 47px */
.v2-explore__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 47px 54px;
    margin-bottom: var(--space-10);
}

/* CTA row below grid */
.v2-explore__cta {
    text-align: center;
}

/* View All Course Offerings button */
.v2-btn--explore-cta {
    display: inline-block;
    background: #E8C650 0% 0% no-repeat padding-box;
    border-radius: 8px;
    font: normal normal 600 20px/20px Barlow Semi Condensed, sans-serif;
    letter-spacing: 0px;
    color: #962D00;
    padding: 18px 32px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.v2-btn--explore-cta:hover,
.v2-btn--explore-cta:focus {
    background: #962D00;
    color: #fff;
}

/* Explore cards: image 408×235px, card width matches image, height automatic */
.v2-explore .v2-card-cat {
    display: flex;
    flex-direction: column;
    width: 408px;
    max-width: 100%;
    flex-shrink: 0;
    aspect-ratio: auto;
    background: transparent;
    border-radius: 0;
}

.v2-explore .v2-card-cat figure { display: none; }

.v2-explore .v2-card-cat__img-wrap {
    position: relative;
    width: 100%;
    height: 235px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.v2-explore .v2-card-cat__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms ease;
}

.v2-explore .v2-card-cat:hover .v2-card-cat__img-wrap img {
    transform: scale(1.06);
}

/* Corner button: small yellow square (top-left rounded), arrow icon inside */
.v2-explore .v2-card-cat__corner-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E8C650 0% 0% no-repeat padding-box;
    border: 3px solid #FFFFFF;
    border-radius: 8px 0px 0px 0px;
    color: #962D00;
    font-size: 22px;
    transition: background 0.2s ease, color 0.2s ease;
    border-bottom: 0;
    border-right: 0;
}

.v2-explore .v2-card-cat__corner-btn i {
    font-size: 22px;
    line-height: 1;
}

/* Inner circle around chevron (inside the yellow square) */
.v2-explore .v2-card-cat__corner-btn-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-explore .v2-card-cat__corner-btn-circle i {
    font-size: 30px;
    position: relative;
    left: 1px;
}

.v2-explore .v2-card-cat:hover .v2-card-cat__corner-btn {
    background: #962D00;
    color: #ffffff;
}

.v2-explore .v2-card-cat__title {
    font: normal normal 600 32px/36px Barlow Semi Condensed, sans-serif;
    letter-spacing: 0px;
    color: #034B39;
    margin: 10px 0 5px 0;
    text-align: center;
}

.v2-explore .v2-card-cat__text {
    font: normal normal normal 18px/28px Barlow Semi Condensed, sans-serif;
    letter-spacing: 0px;
    color: #3C413F;
    margin: 0;
    line-height: 1.55;
    text-align: center;
}


/* =============================================================================
   DIVIDER WITH BC LOGO (between Explore and Feature)
   ============================================================================= */

.v2-divider-bc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 73px;
    margin-bottom: 75px;
    width: 100%;
}

.v2-divider-bc__line {
    flex: 1;
    max-width: 100%;
    height: 2px;
    background-color: #002961;
    min-width: 0;
}

.v2-divider-bc__logo {
    flex-shrink: 0;
    display: block;
    width: 50px;
    height: auto;
    object-fit: contain;
}


/* =============================================================================
   5. FEATURE CALLOUT ("DISCOVER YOUR POTENTIAL" / "TRAIN THE TRAINER")
   ============================================================================= */

.v2-feature {
    padding-top: 0;
    padding-bottom: var(--section-py);
    overflow: hidden;
}

/* Container: grid so nav can sit in right column below content */
.v2-feature .v2-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    align-items: start;
}

.v2-feature__slider {
    grid-column: 1 / -1;
    width: 100%;
}

/* Slider container — each slide is a 2-col row */
.v2-feature__slider .slick-slide > div { height: 100%; }

.v2-feature__slide {
    display: flex !important;
    gap: 54px;
    align-items: stretch;
}

.v2-feature__media {
    flex: 0 0 auto;
    min-width: 654px;
    max-width: 50%;
}

.v2-feature__media img {
    width: 100%;
    max-height: 390px;
    aspect-ratio: 5/4;
    object-fit: cover;
    display: block;
}

.v2-feature__content {
    flex: 1;
    min-width: 0;
    max-width: 654px;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* "Featured Course" label */
.v2-feature__pretitle {
    display: inline-block;
    font: normal normal 600 26px/28px var(--font-body);
    letter-spacing: 0;
    color: #004B37;
    margin-bottom: 5px;
}

.v2-feature__heading {
    font: normal normal bold 40px/47px var(--font-heading);
    letter-spacing: 0;
    color: #962C08;
    text-transform: uppercase;
    margin: 0;
}

/* Description: fixed max height so button/logo don’t move; long text scrolls */
.v2-feature__text {
    font: normal normal normal 18px/28px var(--font-body);
    letter-spacing: 0.09px;
    color: #3C413F;
    margin-bottom: var(--space-8);
    max-height: 140px;
    overflow-y: auto;
    flex-shrink: 0;
}

/* Button (left) + logo (right) in one row — match "View All Course Offerings" button; stays put below description */
.v2-feature__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-top: auto;
    flex-shrink: 0;
}

.v2-feature__actions a {
    display: inline-block;
    min-width: 236px;
    text-align: center;
    background: #E8C650 0% 0% no-repeat padding-box;
    border-radius: 8px;
    font: normal normal 600 20px/20px Barlow Semi Condensed, sans-serif;
    letter-spacing: 0;
    color: #962D00;
    padding: 18px 32px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.v2-feature__actions a:hover,
.v2-feature__actions a:focus {
    background: #962D00;
    color: #fff;
}

.v2-feature__logo {
    max-width: 242px;
    height: auto;
    flex-shrink: 0;
}

/* Slider nav: no dots; arrows + "OTHER COURSES" — in right column, below button/logo, centered */
.v2-feature__slider .slick-dots {
    display: none !important;
}

.v2-feature__nav {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: 30px;
    position: relative;
    left: 35px;
}

.v2-feature__nav .slick-arrow {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #C2CAC8;
    background: var(--c-white);
    color: var(--c-gray);
    font-size: 20px;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.v2-feature__nav .slick-arrow i {
    font-size: 34px;
    color: #C2CAC8;
    position: relative;
    top: 2px;
    transition: color 0.2s ease;
}

/* Hover: keep background unchanged; only the chevron turns yellow */
.v2-feature__nav .slick-arrow:hover {
    background: var(--c-white);
    border-color: #C2CAC8;
    color: inherit;
}
.v2-feature__nav .slick-arrow:hover i {
    color: #E8C650;
}

.v2-feature__nav .slick-arrow::before { display: none; }

.v2-feature__nav-label {
    font: normal normal normal 18px / 28px var(--font-body);
    letter-spacing: 0.09px;
    color: #7C8482;
    min-width: 177px;
    text-align: center;
}


/* =============================================================================
   6. AREAS OF DEMAND (FULL-WIDTH BG IMAGE + 7 ICON COLUMNS)
   ============================================================================= */

/* Background: 1920×1200 image — avoid upscaling so it stays sharp */
.v2-demand {
    padding-top: 84px;
    padding-bottom: 99px;
    position: relative;
    overflow: hidden;
    background-color: var(--c-green-dk);
    background-image: url('../../img/demand-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* On viewports ≥1920px wide, don’t scale image up (prevents pixelation) */
@media (min-width: 1920px) {
    .v2-demand {
        background-size: 1920px auto;
    }
}

.v2-demand__inner { position: relative; z-index: 1; }

/* Title — 15px below to subcontent */
.v2-demand__header {
    margin-bottom: 15px;
    text-align: center;
    max-width: 100%;
}

.v2-demand__title {
    font: normal normal bold 40px/47px var(--font-heading);
    letter-spacing: 0;
    color: #E8C650;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.v2-demand__sub {
    font: normal normal normal 18px/28px var(--font-body);
    letter-spacing: 0.09px;
    color: #FFFFFF;
    max-width: 100%;
    margin-inline: auto;
}

/* 62px between subcontent and icons grid; centered when columns stack */
.v2-demand__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 182px));
    gap: 15px;
    justify-content: center;
    justify-items: center;
    margin-top: 62px;
    margin-bottom: 41px;
}

.v2-demand__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
    max-width: 182px;
    width: 100%;
}

.v2-demand__icon {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-demand__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.v2-demand__label {
    font: normal normal 600 22px/24px var(--font-body);
    letter-spacing: 0;
    color: #FFFFFF;
    max-width: 182px;
    min-height: 1.2em;
}

.v2-demand__cta {
    text-align: center;
}

/* Learn More — same as Register Now (feature section) */
.v2-btn--demand {
    display: inline-block;
    background: #E8C650 0% 0% no-repeat padding-box;
    border-radius: 8px;
    font: normal normal 600 20px/20px Barlow Semi Condensed, sans-serif;
    letter-spacing: 0;
    color: #962D00;
    padding: 18px 32px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.v2-btn--demand:hover,
.v2-btn--demand:focus {
    background: #962D00;
    color: #fff;
}


/* =============================================================================
   7. UPCOMING EVENTS (News posts: left 536px + thumbnail, right 772px)
   ============================================================================= */

.v2-events {
    margin-top: 93px;
    padding-top: 0;
    padding-bottom: 0;
    background-color: var(--c-white);
    border-bottom: 0;
    border-right: 0;
}

/* Title: H2, red, 40px; 40px below to content */
.v2-events__title {
    font: normal normal bold 40px/47px var(--font-heading);
    letter-spacing: 0;
    color: var(--c-red);
    text-transform: uppercase;
    margin-bottom: 40px;
    text-align: center;
}

/* Columns shrink proportionally when viewport is smaller than content; stack at 900px */
.v2-events__grid {
    display: grid;
    grid-template-columns: minmax(0, 536px) minmax(0, 772px);
    gap: 54px;
    align-items: start;
    justify-content: start;
}

/* Left column: most recent post — thumbnail scales with column, then date, title, description */
.v2-events__left {
    width: 100%;
    max-width: 536px;
    min-width: 0;
}

.v2-events__thumb-link {
    display: block;
    margin-bottom: 22px;
}

.v2-events__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 536 / 300;
    max-width: 100%;
    object-fit: cover;
    display: block;
}

.v2-events__date {
    font: normal normal 500 20px/28px var(--font-body);
    letter-spacing: 0.1px;
    color: #000000;
    margin-bottom: 5px;
}

.v2-events__post-title {
    font: normal normal 600 26px/34px var(--font-body);
    letter-spacing: 0;
    margin-bottom: 6px;
}

.v2-events__post-title a {
    font: normal normal 600 26px/34px Barlow Semi Condensed, sans-serif;
    letter-spacing: 0px;
    color: #005C99;
    text-decoration: underline;
}

.v2-events__post-title a:hover {
    text-decoration: none;
}

.v2-events__desc {
    font: normal normal normal 18px/28px var(--font-body);
    letter-spacing: 0.09px;
    color: #3C413F;
}

/* Right column: 2nd and 3rd posts, no thumbnail; 21px between posts; button 27px below last post */
.v2-events__right {
    min-width: 0;
    max-width: 772px;
}

.v2-events__item {
    margin-bottom: 21px;
}

.v2-events__item .v2-events__date { margin-bottom: 5px; }
.v2-events__item .v2-events__post-title { margin-bottom: 6px; }

.v2-events__cta {
    margin-top: 27px;
    text-align: center;
}

.v2-events__cta .v2-btn--demand {
    display: inline-block;
    width: 240px;
}

/* =============================================================================
   CONTENT PADDING — when viewport < 1362px so content doesn’t touch edges
   Applies to homepage sections only (not header/footer). Areas of demand:
   padding is on .v2-container inside the section so background stays full width.
   ============================================================================= */
@media (max-width: 1362px) {
    .v2-container {
        padding-left: 30px;
        padding-right: 30px;
    }

    .v2-hero .v2-container {
        padding-inline: 30px;
    }

    .v2-explore__inner {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* Stack events: left (most recent) on top, right (other events) below — standard breakpoint */
@media (max-width: 900px) {
    .v2-events__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .v2-events__left {
        width: 100%;
        max-width: 100%;
    }

    .v2-events__thumb {
        width: 100%;
        height: auto;
        max-height: 300px;
        aspect-ratio: auto;
    }

    .v2-events__right {
        max-width: 100%;
    }
}


/* =============================================================================
   8. SUCCESS STORIES (title + intro max 1126px, two cards 654px, gap 54px)
   ============================================================================= */

.v2-stories {
    padding: 0;
    margin-top: 0;
    background-color: transparent;
}

/* Title: same as Upcoming Events / Explore */
.v2-stories__title {
    font: normal normal bold 40px/47px var(--font-heading);
    letter-spacing: 0;
    color: #962C08;
    text-transform: uppercase;
    margin: 0;
    text-align: center;
}

/* Intro body text: same as Explore subtitle; max-width 1126px; 37px below to grid; centered */
.v2-stories__intro-text-wrap {
    max-width: 1126px;
    margin-inline: auto;
    margin-bottom: 37px;
    text-align: center;
}

.v2-stories__intro-text {
    font: normal normal normal 18px/28px var(--font-body);
    letter-spacing: 0;
    color: #000000;
    margin: 0;
}

.v2-stories__intro-text p {
    font: inherit;
    color: inherit;
    margin: 0;
}

/* Two cards side by side: max 654px each, gap 54px; 92px margin below */
.v2-stories__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 654px));
    gap: 54px;
    justify-content: center;
    margin-bottom: 31px;
}

.v2-card-story {
    max-width: 654px;
    min-width: 0;
    box-shadow: none;
    border-radius: 0;
}

/* No hover effect on card (override components.css) */
.v2-stories .v2-card-story:hover {
    transform: none;
    box-shadow: none;
}

.v2-stories .v2-card-story:hover .v2-card-story__media img {
    transform: none;
}

/* Image: height 390px; yellow badge top-left; no shadow or radius */
.v2-card-story__media {
    position: relative;
    width: 100%;
    height: 390px;
    overflow: hidden;
    box-shadow: none;
    border-radius: 0;
}

.v2-card-story__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.v2-card-story__badge {
    position: absolute;
    top: 0;
    left: 0;
    background: #E8C650 0% 0% no-repeat padding-box;
    border: 3px solid #FFFFFF;
    border-top: 0;
    border-left: 0;
    border-radius: 0 0 8px 0;
    min-width: 236px;
    padding: 10px 14px;
    font: normal normal 600 18px/22px var(--font-body);
    color: #962C08;
    text-transform: uppercase;
    text-align: center;
}

/* Body: no padding; 9px gap from image (margin-top); content full width, align left */
.v2-card-story__body {
    padding: 0;
    margin-top: 9px;
    width: 100%;
    text-align: left;
}

.v2-card-story__name {
    font: normal normal 600 32px/36px var(--font-body);
    letter-spacing: 0;
    color: #034B39;
    margin: 0 0 10px 0;
}

.v2-card-story__role {
    font: normal normal 500 22px/26px Barlow Semi Condensed, sans-serif;
    letter-spacing: 0.11px;
    color: #962D00;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

/* Company name (dark) */
.v2-card-story__company {
    font: normal normal 500 22px/28px var(--font-body);
    letter-spacing: 0.11px;
    color: #000000;
    margin: 0 0 10px 0;
}

/* Quote: icon + content column (text and link aligned left) */
.v2-card-story__quote {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.v2-card-story__quote-icon {
    font-size: 24px;
    line-height: 29px;
    color: #32A07D;
    flex-shrink: 0;
}

.v2-card-story__quote-icon i {
    font-size: inherit;
    color: inherit;
}

.v2-card-story__quote-content {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.v2-card-story__quote-text {
    font: normal normal normal 18px/28px var(--font-body);
    letter-spacing: 0.09px;
    color: #3C413F;
    margin: 0 0 0.5em 0;
}

.v2-card-story__link {
    font: normal normal 600 18px/20px var(--font-body);
    letter-spacing: 0;
    color: #005C99;
    text-transform: uppercase;
    text-decoration: underline;
    margin-top: 10px;
}

.v2-card-story__link:hover {
    text-decoration: underline;
}

/* Your future starts here: H3 + 13px + two outline buttons */
.v2-stories__cta-block {
    text-align: center;
}

/* Your future starts here */
.v2-stories__cta-heading {
    font: normal normal 600 32px/36px var(--font-body);
    letter-spacing: 0;
    color: #034B39;
    text-transform: uppercase;
    margin: 0 0 13px 0;
}

.v2-stories__cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
}

@media (min-width: 768px) {
    .v2-stories__cta-buttons {
        gap: 53px;
    }
}

/* Start Your Career Journey: same as View All Events / Learn More — yellow bg, red text; hover: red bg, white text */
.v2-btn--stories-primary {
    display: inline-block;
    background: #E8C650 0% 0% no-repeat padding-box;
    border: 2px solid #E8C650;
    border-radius: 8px;
    font: normal normal 600 20px/20px Barlow Semi Condensed, sans-serif;
    letter-spacing: 0;
    color: #962D00;
    padding: 18px 32px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.v2-btn--stories-primary:hover,
.v2-btn--stories-primary:focus {
    background: #962D00;
    border-color: #962D00;
    color: #fff;
}

/* Read More Success Stories: red text, yellow border; hover: red bg, white text (same as other buttons) */
.v2-btn--stories-outline {
    display: inline-block;
    border: 2px solid #E8C650;
    border-radius: 8px;
    background: transparent;
    font: normal normal 600 20px/20px Barlow Semi Condensed, sans-serif;
    letter-spacing: 0;
    color: #962D00;
    padding: 18px 32px;
    text-decoration: none;
    text-transform: uppercase;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.v2-btn--stories-outline:hover,
.v2-btn--stories-outline:focus {
    background: #962D00;
    border-color: #962D00;
    color: #fff;
}


/* =============================================================================
   9. FAQ — Frequently Asked Questions (accordion)
   ============================================================================= */

.v2-faq {
    padding-top: 0;
    padding-bottom: 120px;
    background-color: var(--c-white);
}

/* FAQ section title */
.v2-faq__title {
    font: normal normal 600 32px/34px Barlow Semi Condensed, var(--font-heading);
    letter-spacing: 0;
    color: #034B39;
    text-transform: uppercase;
    margin: 0 0 30px 0;
    text-align: center;
}

/* List of accordion items */
.v2-faq__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

/* Each question box: max-width when collapsed/expanded */
.v2-faq .v2-accordion__item {
    width: 100%;
    max-width: 1125px;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    transition: background-color 0.2s ease;
}

.v2-faq .v2-accordion__item:first-child {
    border-top: none;
}

/* Collapsed: gray background, yellow border */
.v2-faq .v2-accordion__trigger {
    width: 100%;
    padding: 20px 24px 20px 30px;
    background: #EAEBEB 0% 0% no-repeat padding-box;
    border: 1px solid #E8C650;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: background-color 0.2s ease;
}

/* Expanded: white background; bottom border transparent so no flash when collapsing */
.v2-faq .v2-accordion__item.is-active .v2-accordion__trigger {
    background: #FFFFFF;
    border-color: #E8C650;
    border-bottom-color: transparent;
    border-radius: 8px 8px 0 0;
}

/* Question text */
.v2-faq .v2-accordion__question {
    font: normal normal 500 26px/30px Barlow Semi Condensed, var(--font-heading);
    letter-spacing: 0;
    color: #034B39;
    transition: none;
    text-align: left;
}

.v2-faq .v2-accordion__trigger:hover .v2-accordion__question {
    color: #034B39;
}

/* Chevron down — collapsed color */
.v2-faq .v2-accordion__icon {
    flex-shrink: 0;
    color: #962D00;
    background: transparent;
    border-radius: 0;
    transform: none;
}

.v2-faq .v2-accordion__icon i {
    font-size: 26px;
    line-height: 31px;
}

/* Expanded: rotate chevron up */
.v2-faq .v2-accordion__item.is-active .v2-accordion__icon {
    color: #32A07D;
    background: transparent;
    transform: rotate(180deg);
}

.v2-faq .v2-accordion__item.is-active .v2-accordion__question {
    color: #034B39;
}

/* Panel (answer) — white area below trigger when expanded */
.v2-faq .v2-accordion__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 400ms ease;
}

.v2-faq .v2-accordion__item.is-active .v2-accordion__panel {
    max-height: 1200px;
}

.v2-faq .v2-accordion__panel-inner {
    padding: 0 30px 20px 30px;
    background: #FFFFFF;
    border: 1px solid #E8C650;
    border-top: none;
    border-radius: 0 0 8px 8px;
    font: normal normal normal 18px/28px Barlow Semi Condensed, var(--font-body);
    letter-spacing: 0.09px;
    color: #3C413F;
}

.v2-faq .v2-accordion__panel-inner p {
    margin: 0 0 0.75em 0;
    font: inherit;
    color: inherit;
}

.v2-faq .v2-accordion__panel-inner p:last-child {
    margin-bottom: 0;
}


/* =============================================================================
   10. PARTNER LOGOS
   ============================================================================= */

.v2-partners {
    padding-block: var(--space-10);
    background-color: #ffffff;
}

.v2-partners__title {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-gray);
    text-align: center;
    margin-bottom: var(--space-8);
}

.v2-partners__grid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-6);
}

.v2-partners__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    filter: grayscale(100%);
    opacity: 0.55;
    transition: var(--ease);
}

.v2-partners__logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.v2-partners__logo img {
    height: 50px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
}


/* =============================================================================
   RESPONSIVE — ALL HOME SECTIONS
   ============================================================================= */

/* Tablet: max-width 1024px */
/* Between 769px and 1024px: reduce hero heading and sub by 5px each,
   and add left padding so content doesn't touch the viewport edge */
@media (min-width: 769px) and (max-width: 1024px) {
    .v2-hero__content {
        padding-left: 20px;
    }

    .v2-hero__heading {
        font-size: 40px;
        line-height: 46px;
    }

    .v2-hero__sub {
        font-size: 30px;
        line-height: 35px;
    }
}

@media (max-width: 1200px) {
    .v2-training__inner {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    .v2-training__content {
        max-width: 100%;
    }

    .v2-training__media {
        max-width: 100%;
    }

    .v2-training__img {
        max-width: 300px;
    }

    /* Feature: allow image/content to shrink below 1200px */
    .v2-feature__media {
        min-width: 0;
    }
    .v2-feature__content {
        max-width: none;
    }
}

@media (max-width: 1024px) {
    .v2-divider-bc {
        margin-top: 60px;
        margin-bottom: 50px;
    }

    .v2-explore {
        margin-top: 43px;
    }

    .v2-explore .v2-card-cat {
        width: calc( (100% - 54px) / 2 );
        max-width: 408px;
    }

    .v2-demand__grid {
        grid-template-columns: repeat(4, minmax(0, 182px));
        justify-content: center;
        gap: 15px;
    }

    .v2-stories__grid {
        grid-template-columns: 1fr;
    }

    /* Feature slider — card mode from 1024px down: no shadow, logo above button, spacing, consistent button/logo size */
    .v2-feature .v2-container { overflow: hidden; }
    .v2-feature__slider,
    .v2-feature__slider .slick-list { overflow: hidden; max-width: 100%; }
    .v2-feature__slide {
        display: flex !important;
        flex-direction: column;
        gap: 0;
        background: var(--c-white);
        border-radius: 12px;
        overflow: hidden;
        min-width: 0;
        width: 100%;
    }
    .v2-feature__media {
        flex: none;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: 210px;
        overflow: hidden;
        position: relative;
    }
    .v2-feature__media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
        object-position: center;
    }
    .v2-feature__content { padding: 0; max-width: 100%; }
    .v2-feature__pretitle { font-size: 18px; color: #034B39; margin-bottom: 6px; }
    .v2-feature__heading { font-size: var(--text-2xl); line-height: 1.2; color: #962C08; margin-bottom: var(--space-4); }
    .v2-feature__text { margin-bottom: 0; max-height: none; }
    .v2-feature__actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 19px;
        margin-top: 30px;
    }
    /* Logo first, button second on all slides — force order so it works for every slide */
    .v2-feature__actions .v2-feature__logo { order: 1 !important; }
    .v2-feature__actions a,
    .v2-feature__actions > *:not(.v2-feature__logo) { order: 2 !important; }
    /* Register Now button: same size on every slide, min-width 267px */
    .v2-feature__actions a {
        min-width: 267px;
        width: 267px;
        max-width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
    /* Logo same size on every slide */
    .v2-feature__logo {
        width: 100%;
        max-width: 242px;
        height: auto;
        object-fit: contain;
    }
    .v2-feature__nav { grid-column: 1; left: 0; margin-top: 30px; }

}

/* Mobile: max-width 767px — stacked layout: photo on top, red block below */
@media (max-width: 767px) {

    /* Homepage: all h2 at 36px; Success Stories h3 at 24px (mobile only) */
    h2 {
        font-size: 36px;
    }
    .v2-stories h3 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    /* Promo banner — column layout, close button top-right above text */
    .v2-promo-banner {
        flex-direction: column;
        align-items: stretch;
        padding: 29px 21px 28px;
        gap: 0;
    }
    .v2-promo-banner__text {
        margin: 0;
        padding: 0;
        flex: none;
        order: 2; /* text below button in column layout */
    }
    .v2-promo-banner__close {
        align-self: flex-end;
        flex-shrink: 0;
        order: 1; /* button on top in column layout */
    }

    /* Training — explicit rem so variables don’t override */
    .v2-training__heading {
        font-size: 2.375rem; /* 38px */
        margin-bottom: 2px;
    }
    .v2-training__sub {
        margin-bottom: 0.625rem; /* 10px */
    }

    /* Explore — explicit values so variables don’t override */
    .v2-explore__heading {
        font: normal normal bold 2.25rem/47px Rubik, sans-serif; /* 36px */
        letter-spacing: 0;
        color: #962C08;
        text-transform: uppercase;
        margin: 0 0 var(--space-4) 0;
        margin-bottom: 0;
    }
    .v2-explore__header {
        max-width: 809px;
        margin-inline: auto;
        text-align: center;
        margin-bottom: 3.4375rem; /* 55px */
    }
    .v2-explore__grid {
        gap: 3.125rem; /* 50px */
    }

    /* Feature slider */
    .v2-feature__slide {
        border-radius: 0;
        gap: 20px;
    }

    /* Demand */
    .v2-demand__icon {
        width: 80px;
        height: 80px;
    }

    /* Events */
    .v2-events__title {
        font-size: 2.25rem; /* 36px */
    }
    .v2-events__post-title {
        margin-top: 22px;
        margin-bottom: 2px;
    }
    .v2-events__cta .v2-btn--demand {
        width: 236px;
    }

    /* Success Stories */
    .v2-stories__title {
        font-size: 2.25rem; /* 36px */
    }
    .v2-stories__intro-text-wrap {
        margin-bottom: 43px;
    }
    .v2-stories__grid {
        margin-bottom: 43px;
    }
    .v2-card-story__badge {
        font-size: 1.25rem; /* 20px */
    }
    .v2-card-story__media {
        height: 210px;
    }
    .v2-card-story__media img {
        max-height: 210px;
    }
    .v2-card-story__name {
        margin-bottom: 10px;
    }
    .v2-card-story__role {
        margin-bottom: 12px;
    }
    .v2-card-story__body {
        margin-top: 0.625rem; /* 10px */
    }

    /* FAQ */
    .v2-faq {
        padding-bottom: 80px;
    }
    .v2-faq__title {
        font-size: 1.625rem; /* 26px */
        margin-bottom: 1.25rem; /* 20px */
    }
    .v2-faq .v2-accordion__question {
        font: normal normal 500 1.375rem/1.625rem Barlow Semi Condensed, var(--font-heading); /* 22px/26px */
    }

    /* Partner bar */
    .partner-bar {
        padding-top: 0;
    }

    /* Section gap (demand → events): half on mobile so it doesn’t look too tall */
    .v2-events { margin-top: 47px; }

    /* Slide: vertical flex column, swaps to mobile background image.
       No 100vh — slide height is content-based only. */
    .v2-hero__slide {
        flex-direction: column;
        align-items: stretch;
        min-height: auto;
        background-image: var(--mobile-bg) !important;
        background-position: center top;
        background-size: 100%;
    }

    /* Container wraps content only; no flex growth */
    .v2-hero__slide .v2-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    /* Transparent flex item — reveals the photo above the red block.
       min-height: 280px ensures the image is always legible. */
    .v2-hero__slide::before {
        content: '';
        display: block;
        position: relative;
        inset: auto;
        min-height: 280px;
        background: none;
        z-index: 0;
    }

    /* Red content block — height from content only (no flex: 1).
       padding-bottom = 28px (below arrows) + 44px (arrow height) + 31px (button→arrows) = 103px */
    .v2-hero__content {
        position: relative;
        z-index: 1;
        background-color: #962d00;
        width: 100%;
        max-width: 100%;
        padding-top: 20px;
        padding-right: 30px;
        padding-bottom: 103px;
        padding-left: 30px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Red rectangle under the content: fills the space below so no image/grey shows.
       Positioned at bottom of container, behind content but in front of slide image. */
    .v2-hero__content::after {
        content: '';
        position: absolute;
        top: 98%;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #962d00;
        z-index: 0;
    }

    /* Keep text and button above the ::after red fill */
    .v2-hero__content > * {
        position: relative;
        z-index: 1;
    }

    /* Title: bold 38px/42px Rubik, gold, uppercase */
    .v2-hero__heading {
        font-family: var(--font-heading);
        font-size: 38px;
        font-weight: 700;
        line-height: 42px;
        letter-spacing: 0;
        color: #E8C650;
        text-transform: uppercase;
        margin-bottom: 15px;
    }

    /* Subtitle: 600 26px/34px Barlow Semi Condensed, white */
    .v2-hero__sub {
        font-family: var(--font-body);
        font-size: 26px;
        font-weight: 600;
        line-height: 34px;
        letter-spacing: 0;
        color: #ffffff;
        font-style: normal;
        margin-bottom: 8px;
    }

    /* Description: medium 22px/30px Barlow Semi Condensed, white */
    .v2-hero__text {
        font-family: var(--font-body);
        font-size: 22px;
        font-weight: 500;
        line-height: 30px;
        letter-spacing: 0.11px;
        color: #ffffff;
        margin-bottom: 38px;
    }
    .v2-hero__text p {
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        letter-spacing: inherit;
        color: inherit;
        margin-bottom: 0;
    }

    /* Nav arrows: 28px from bottom of section (= 28px below arrow bottom = user's padding-bottom) */
    .v2-hero__nav {
        position: absolute;
        bottom: 28px;
        left: 0;
        width: 100%;
        max-width: 100%;
        justify-content: center;
    }

    /* Training — stacked: text on top, logo/caption on bottom (no order change) */
    .v2-training__inner {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .v2-training__heading { font-size: 2.375rem; } /* 38px — keep mobile intent from above */

    /* Explore — single column when under 768px */
    .v2-explore .v2-card-cat {
        width: 100%;
        max-width: 100%;
    }

    .v2-explore__grid {
        gap: 3.125rem; /* 50px — match mobile block above */
    }

    /* Feature — stack image above content, allow image to shrink */
    .v2-feature__slide {
        flex-direction: column;
        gap: 1.25rem; /* 20px — match mobile block above */
    }

    .v2-feature .v2-container {
        grid-template-columns: 1fr;
    }

    .v2-feature__nav {
        grid-column: 1;
        margin-top: var(--space-6);
    }

    .v2-feature__media {
        flex: none;
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    .v2-feature__content {
        max-width: 100%;
    }

    .v2-feature__heading { font-size: var(--text-3xl); }

    /* Demand — padding, 3 cols, everything centered (labels + button) */
    .v2-demand {
        padding-top: 50px;
        padding-bottom: 50px;
        text-align: center;
    }
    .v2-demand__inner {
        text-align: center;
    }
    .v2-demand__header,
    .v2-demand__sub {
        text-align: center;
    }
    /* Flexbox so the last item (e.g. Advanced Safety Skills) centers when alone on a row */
    .v2-demand__grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    .v2-demand__item {
        flex: 0 0 calc(50% - 8px);
        max-width: 182px;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
    }
    .v2-demand__label {
        display: block;
        width: 100%;
        text-align: center;
        font-size: clamp(1rem, 4vw, 22px);
    }
    .v2-demand__icon { width: 80px; height: 80px; } /* match mobile block above */
    .v2-demand__title { font-size: var(--text-3xl); }
    .v2-demand__cta {
        display: flex;
        justify-content: center;
        text-align: center;
    }
    .v2-demand__cta .v2-btn--demand {
        width: 190px;
    }

    /* Infostrip */
    .v2-infostrip__inner { flex-direction: column; align-items: flex-start; }
    .v2-infostrip__content { gap: var(--space-5); }

    /* Stories */
    .v2-stories__grid { grid-template-columns: 1fr; }
}

/* Mobile: max-width 575px */
@media (max-width: 575px) {

    /* Hero — inherits stacked layout from 767px block; image keeps min-height: 280px */
    .v2-hero__slide { min-height: auto; }
    .v2-hero__nav { bottom: 28px; }

    /* Explore — remains single column (set at 767px) */

    /* Demand — same flex layout (2 per row, last item centered); inherits from 767px */
    .v2-demand__grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    .v2-demand__item {
        flex: 0 0 calc(50% - 8px);
        max-width: 182px;
    }

    /* Partners */
    .v2-partners__grid { gap: var(--space-4); }
    .v2-partners__logo img { height: 38px; }
}

/* Explore — single column when narrow (cards stack); keep 50px gap from mobile design */
@media (max-width: 480px) {
    .v2-explore .v2-card-cat {
        width: 100%;
        max-width: 100%;
    }
    .v2-explore__grid {
        gap: 3.125rem; /* 50px */
    }
}

/* Extra-small screens (<430px) — hero and utility bar tweaks */
@media (max-width: 430px) {
    .v2-hero__slide {
        background-size: auto;
    }
}