/* =============================================================
   NAV GRADIENT OVERLAY
   ============================================================= */

.ap-nav-gradient {
    top: 0;
    left: 0;
    width: 100%;
    height: 176px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.30) 100%);
    pointer-events: none;
    z-index: 999;
}


/* =============================================================
   SECTION 0 — HERO
   ============================================================= */

.fs-hero {
    background: url('/Files/templates/main-2026/images/big_v.svg') center top no-repeat;
    background-size: 100% auto;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
}


.fs-hero__intro {
    padding-top: 24px;
}


.fs-hero__title {
    color: var(--vcc-midnight-violet, #2C1224);
    margin-bottom: 8px;
}


.fs-hero__tagline {
    font-family: "Outfit-Light";
    font-size: var(--font-lead, 24px);
    line-height: var(--lh-lead, 150%);
    color: var(--vcc-shadow-grey, #272932);
    margin: 0;
}

/* ── Feature cards row container */

.fs-hero__features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding-top: 24px;
    padding-bottom: 24px;
}

/* ── Individual card */

.fs-feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 250px;
    padding: 24px;
    background: #FFFFFF;
    border-radius: 1px;
    box-shadow: 0 3.283px 8.206px 0 rgba(44, 18, 36, 0.04);
}

.fs-feature-card__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 8px;
}

    .fs-feature-card__icon img {
        width: 64px;
        height: 64px;
        object-fit: contain;
    }

.fs-feature-card__title {
    font-family: "Outfit-Medium";
    font-size: var(--font-h3, 20px);
    line-height: var(--lh-h3, 120%);
    letter-spacing: 0.2px;
    color: var(--vcc-shadow-grey, #272932);
    text-align: center;
    margin-bottom: 8px;
}

.fs-feature-card__desc {
    font-family: "Outfit-Light";
    font-size: var(--font-p, 15px);
    line-height: var(--lh-p, 130%);
    color: var(--vcc-state-grey, #748386);
    text-align: center;
    margin: 0;
}


/* =============================================================
   SECTION 1 — DISCOVER YOUR CAREER PATH
   ─────────────────────────────────────────────────────────────
   Still inside .fs-hero — background continues.
   Two-column: text left, image right.
   ============================================================= */

.fs-discover {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    padding-top: 48px;
   /* padding-bottom: 64px;*/
}

.fs-discover__content {
    display: flex;
    flex-direction: column;
    align-items: start;
}

/* Eyebrow — same shape as .prog-overview__eyebrow */
.fs-discover__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 22px 0 15px;
    font-family: "Outfit-Medium";
    font-size: 15px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--vcc-shadow-grey, #272932);
    background: #C5CACF;
    border-radius: 0;
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    align-self: flex-start;
    margin-bottom: 16px;
}

/* h2 colour override — base.css handles font/size */
.fs-discover__title {
    color: var(--vcc-midnight-violet, #2C1224);
    margin-bottom: 24px;
}

.fs-discover__desc {
    margin-bottom: 16px;
}

    .fs-discover__desc p {
        font-family: "Outfit-Light";
        font-size: var(--font-p, 18px);
        line-height: var(--lh-p, 130%);
        color: var(--vcc-shadow-grey, #272932);
    }


.fs-discover__link {
    font-family: "Outfit-Regular";
    font-size: var(--font-p, 18px);
    color: var(--vcc-midnight-violet, #2C1224);
    text-decoration: underline;
    align-self: flex-start;
}

    .fs-discover__link:hover {
        color: var(--vcc-carmine, #BE1E2D);
    }

/* Image column */
.fs-discover__media {
    width: 100%;
}

    .fs-discover__media img {
        width: 100%;
        max-width: 520px;
        height: auto;
        display: block;
    }




/* =============================================================
   SECTION 2 — SUPPORT AT EVERY STEP
 
   ============================================================= */
.fs-support {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1440px;
    margin: 0 auto;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), url(<path-to-image>) lightgray -431px -187.637px / 183.611% 100.038% no-repeat;
    align-items: start
}


.fs-support__image {
    width: 100%;
    height: 100%;
   /* position: sticky;*/
    /*top: var(--nav-h, 80px);*/
}

#student-experience .fs-support {
    background: linear-gradient(0deg, rgba(44, 18, 36, 0.10) 0%, rgba(44, 18, 36, 0.10) 100%), #FBF9FF;
}

.fs-support__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.fs-support__content {
    display: flex;
    flex-direction: column;
    padding-top: 48px;
    padding-bottom: 48px;
    background: linear-gradient(0deg, rgba(44, 18, 36, 0.10) 0%, rgba(44, 18, 36, 0.10) 100%), #FBF9FF;
    /* wrapper class handles horizontal padding */
}

/* Eyebrow — same shape as discover/program eyebrow */
.fs-support__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 22px 0 15px;
    font-family: "Outfit-Medium";
    font-size: 15px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--vcc-shadow-grey, #272932);
    background: #C5CACF;
    border-radius: 0;
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    align-self: flex-start;
}

.fs-support__title {
    color: var(--vcc-midnight-violet, #2C1224);
    margin: 0;
}

.fs-support__intro {
    font-family: "Outfit-Light";
    font-size: var(--font-p, 18px);
    line-height: var(--lh-p, 130%);
    color: var(--vcc-shadow-grey, #272932);
    margin: 0;
}

/* Sub-section blocks */
.fs-support__sub {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.fs-support__sub-title {
    color: var(--vcc-midnight-violet, #2C1224);
    margin: 0;
}

.fs-support__sub-desc,
.fs-support__sub-desc p {
    font-family: "Outfit-Light";
    font-size: var(--font-p, 18px);
    line-height: var(--lh-p, 130%);
    color: var(--vcc-shadow-grey, #272932);
    margin: 0;
}

    /* Bullet list inside Career Support */
    .fs-support__sub-desc ul {
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .fs-support__sub-desc li {
        font-family: "Outfit-Light";
        font-size: var(--font-p, 18px);
        line-height: var(--lh-p, 130%);
        color: var(--vcc-shadow-grey, #272932);
    }

.fs-support__link {
    font-family: "Outfit-Regular";
    font-size: var(--font-p, 18px);
    color: var(--vcc-midnight-violet, #2C1224);
    text-decoration: underline;
    align-self: flex-start;
}

    .fs-support__link:hover {
        color: var(--vcc-carmine, #BE1E2D);
    }

.fs-support__eyebrow,
.fs-support__sub,
.fs-support__intro,
.fs-support__title {
    margin-bottom: 24px;
}
/* =============================================================
   SECTION 3 — WHY STUDENTS CHOOSE VCC + TESTIMONIALS
   Ported from prog-why / prog-testimonial with fs- prefix
   ============================================================= */

.fs-why {
    background: var(--vcc-snow);
    padding: 48px 0;
    max-width: 1440px;
    margin: 0 auto;
}

.fs-why__eyebrow-wrap {
    margin-bottom: 24px;
}

.fs-why__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 22px 0 15px;
    font-family: "Outfit-Medium";
    font-size: 15px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--vcc-shadow-grey);
    background: #C5CACF;
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}

.fs-why__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.fs-why__title {
    color: var(--vcc-midnight-violet);
    margin-bottom: 12px;
}

.fs-why__subtitle,
.fs-why__subtitle p {
    font-family: "Outfit-Light";
    font-size: 18px;
    color: var(--vcc-shadow-grey);
    margin-bottom: 20px;
    line-height: 150%;
}

.fs-why__desc,
.fs-why__desc p {
    font-family: "Outfit-Light";
    font-size: var(--font-p);
    color: var(--vcc-shadow-grey);
    line-height: 155%;
    margin-bottom: 24px;
}

    .fs-why__desc ul {
        list-style: none;
        padding: 0;
        margin: 0 0 28px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .fs-why__desc li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding-left: 8px;
        font-family: "Outfit-Light";
        font-size: var(--font-p);
        color: var(--vcc-shadow-grey);
        line-height: 145%;
    }

        .fs-why__desc li::before {
            content: '·';
            flex-shrink: 0;
            font-size: 28px;
            color: var(--vcc-shadow-grey);
            line-height: 0.85;
        }

.fs-why__cta-text {
    font-family: "Outfit-Light";
    font-size: var(--font-p);
    color: var(--vcc-shadow-grey);
    line-height: 155%;
}

.fs-why__cta-link {
    font-family: "Outfit-Light";
    font-size: var(--font-p);
    color: var(--vcc-shadow-grey);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Video */
.fs-why__video {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 2px;
    background: #111;
    margin-bottom: 16px;
}

    .fs-why__video iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
    }

.fs-why__video-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 14px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    color: rgba(255, 255, 255, 0.90);
}

.fs-why__video-name {
    font-family: "Outfit-SemiBold";
    font-size: 13px;
}

.fs-why__video-title {
    font-family: "Outfit-Light";
    font-size: 12px;
    font-style: italic;
}

/* Testimonials */
.fs-testimonials {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fs-testimonial {
    /*background: var(--vcc-section-grey-one);*/
    background: linear-gradient(0deg, rgba(44, 18, 36, 0.10) 0%, rgba(44, 18, 36, 0.10) 100%), #FBF9FF;
    border: 1px solid var(--vcc-state-grey-light);
    padding: 24px;
    border-radius: 2px;
    position: relative;
}

.fs-testimonials .fs-testimonial .fs-testimonial__icon * {
    color: var(--Shadow-Grey, #272932);
}


.fs-testimonials .fs-testimonial .fs-testimonial__icon .testimonial-icon {
    display: block;
    width: 48px;
    height: 48px;
/*    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='49' height='48' viewBox='0 0 49 48' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.0527 8.00012C28.0524 8.00031 27.3623 32.5462 5.55275 40.0001C3.61527 40.4845 1.20835 39.0918 2.86622 37.1759L3.04005 36.9894C3.07856 36.9503 7.4336 32.5208 8.55275 29.5001C-2.94628 26.4999 -0.948266 8.00024 12.0527 8.00012ZM37 8.00012C52.9999 8.00012 52.3099 32.5462 30.5 40.0001C28.5626 40.4842 26.156 39.0916 27.8135 37.1759L27.9873 36.9894C27.9873 36.9894 32.3759 32.5342 33.5 29.5001C22.0015 26.4996 23.9995 8.00061 37 8.00012ZM12.0527 9.42883C6.39645 9.42889 3.13933 13.3897 2.53029 17.8195C1.91553 22.2923 4.03527 26.8455 8.91408 28.1183L10.4414 28.5167L9.89259 29.9962C9.23738 31.7648 7.71129 33.8025 6.47462 35.2941C5.8358 36.0646 5.23428 36.7357 4.79298 37.214C4.57211 37.4534 4.3902 37.6462 4.26271 37.7794C4.19926 37.8457 4.14908 37.8979 4.11427 37.9337C4.097 37.9515 4.08275 37.966 4.07326 37.9757L4.05568 37.9933C3.87255 38.1787 3.79527 38.3081 3.76271 38.3781C3.85148 38.4556 4.03999 38.5642 4.33009 38.6251C4.60493 38.6828 4.90152 38.6813 5.16798 38.6212C15.5627 35.0399 20.7438 27.4782 21.5645 21.0245C21.9769 17.7804 21.2894 14.8773 19.7188 12.8185C18.1735 10.7931 15.657 9.42888 12.0527 9.42883ZM37 9.42883C31.3438 9.42908 28.0865 13.3897 27.4776 17.8195C26.8628 22.2922 28.9828 26.8453 33.8613 28.1183L35.3887 28.5167L34.8399 29.9962C34.1846 31.7649 32.6586 33.8024 31.4219 35.2941C30.783 36.0647 30.1815 36.7357 29.7402 37.214C29.5193 37.4535 29.3375 37.6462 29.21 37.7794C29.1464 37.8458 29.0963 37.8979 29.0615 37.9337C29.0442 37.9516 29.03 37.966 29.0205 37.9757L29.0029 37.9933C28.8196 38.1789 28.7424 38.3082 28.71 38.3781C28.7987 38.4555 28.9875 38.5641 29.2774 38.6251C29.5521 38.6828 29.8488 38.6813 30.1152 38.6212C40.5101 35.04 45.6911 27.4783 46.5117 21.0245C46.9242 17.7802 46.2367 14.8774 44.666 12.8185C43.1207 10.7931 40.6043 9.42883 37 9.42883Z' fill='%23272932'/%3E%3C/svg%3E");*/
    background-image: url("/Files/templates/main-2026/images/icons/quotes.svg");
}

.fs-testimonial__quote {
    font-family: "Outfit-Light";
    font-size: var(--font-p);
    color: var(--vcc-shadow-grey);
    line-height: var(--lh-p);
    margin-bottom: 10px;
   /* padding-right: 32px;*/
}

.fs-testimonial p {
    font-family: "Outfit-Light";
    color: var(--vcc-shadow-grey);
    line-height: var(--lh-p);
    margin-bottom: 24px;
   /* padding-right: 32px;*/
}

.fs-testimonial__attr {
    font-family: "Outfit-Regular";
    font-size: var(--font-sm);
    color: var(--vcc-shadow-grey);
    display: block;
    max-width: 246px;
}

.fs-testimonial__icon {
    position: absolute;
    bottom: 8px;
    right: 16px;
    width: 48px;
    height: 48px;
    aspect-ratio: 1/1;
    /*opacity: 0.18;*/
}

    .fs-testimonial__icon svg {
        width: 100%;
        height: 100%;
        display: block;
    }

section.pw-cta {
    max-width: 1440px;
    margin: 0 auto;
}
/* =============================================================
   Tablet  ≤ 1024px  
   ============================================================= */
@media only screen and (max-width: 1024px) {
    .ap-nav-gradient {
        display: none;
    }

    main.future-students {
        margin-top: var(--nav-h);
    }
}
/* =============================================================
   max-width: 960px — MOBILE
   ============================================================= */

@media only screen and (max-width: 960px) {

    /* Hide gradient on mobile — not in Figma mobile spec */
    .ap-nav-gradient {
        display: none;
    }

    .fs-hero__intro {
    }

    /* Single column stack */
    .fs-hero__features {
        grid-template-columns: 1fr;
    }

    .fs-feature-card {
        /*  flex-direction: row;*/
        align-items: flex-start;
        text-align: left;
        height: auto;
        padding: 16px;
    }

    .fs-feature-card__icon {
        /*  width: 48px;
        height: 48px;*/
        flex-shrink: 0;
        margin-bottom: 16px;
    }

        .fs-feature-card__icon img {
            /*     width: 48px;
            height: 48px;*/
        }

    .fs-feature-card__title {
        text-align: left;
        margin-bottom: 16px;
    }

    .fs-feature-card__desc {
        text-align: left;
    }

    .fs-discover {
        grid-template-columns: 1fr;
        gap: 0;
        padding-top: 32px;
        padding-bottom: 40px;
    }

    /* Dissolve content wrapper so children become direct grid items */
    .fs-discover__content {
        display: contents;
    }

    .fs-discover__eyebrow {
        order: 1;
        margin-left: calc(-1 * var(--wrapper-padding));
        margin-bottom: 16px;
        max-width: 140px;
        font-size: 14px;
    }

    .fs-discover__title {
        order: 2;
        margin-bottom: 24px;
    }

    .fs-discover__media {
        order: 3;
        margin-bottom: 24px;
    }

    .fs-discover__desc {
        order: 4;
        margin-bottom: 16px;
    }

    .fs-discover__link {
        order: 5;
    }

    /* Text block beside the icon */
    .fs-feature-card__text {
        display: flex;
        flex-direction: column;
    }

    /* ── Support section mobile ── */
    .fs-support {
        grid-template-columns: 1fr;
        background: linear-gradient(0deg, rgba(44, 18, 36, 0.10) 0%, rgba(44, 18, 36, 0.10) 100%), #FBF9FF;
    }

    /* Dissolve content wrapper so all children can be ordered */
    .fs-support__content {
        display: contents;
    }

    .fs-support__eyebrow {
        order: 1;
        max-width: 120px;
        padding: 0 22px 0 24px;
        margin-top: 24px;
        margin-bottom: 16px;
        font-size: 14px;
    }

    .about .fs-support__eyebrow {
        
        max-width: 180px;
       
    }

    .fs-support__title {
        order: 2;
        padding: 0 var(--wrapper-padding);
        margin-bottom: 16px;
    }

    .fs-support__intro {
        order: 3;
        padding: 0 var(--wrapper-padding);
        margin-bottom: 0;
    }

    .fs-support__image {
        order: 4;
        padding: 24px;
        background: unset;
        position: static;
    }


    .fs-support__sub:nth-child(4) {
        order: 5;
        padding: 0 var(--wrapper-padding);
    }

    .fs-support__sub:nth-child(5) {
        order: 6;
        padding: 0 var(--wrapper-padding);
    }

    .fs-support__sub:nth-child(6) {
        order: 7;
        padding: 0 var(--wrapper-padding);
        margin-bottom: 40px;
    }

    /* ── Why Choose section mobile ── */
    .fs-why__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .fs-why__title {
        font-size: 24px;
    }

    .fs-why__eyebrow {
        margin-left: calc(-1 * var(--wrapper-padding));
        padding: 0 22px 0 24px;
        font-size: 14px;
    }
}