/* =========================================================
   FIT FUN FLY
   MAIN STYLESHEET
========================================================= */


/* =========================================================
   BRAND COLORS
========================================================= */

:root {

    --color-black: #0B0D12;

    --color-white: #FFFFFF;

    --color-off-white: #F5F4F0;

    --color-lime: #98B82A;

    --color-purple: #8F4090;

    --color-soft-purple: #E8DCE8;

    --color-lime-soft: #EEF3D9;

}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family: Arial, Helvetica, sans-serif;

    background: var(--color-white);

    color: var(--color-black);

    line-height: 1.6;
}


a {
    text-decoration: none;
    color: inherit;
}


img {
    max-width: 100%;
    display: block;
}


/* =========================================================
   CONTAINER
========================================================= */

.container {

    width: min(1200px, 90%);

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.site-header {

    position: relative;

    width: 100%;

    background: var(--color-black);

    color: var(--color-white);

    z-index: 100;

}


.header-inner {

    min-height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


/* =========================================================
   LOGO
========================================================= */

.logo {

    display: block;

    width: 155px;

}

.logo img {

    width: 100%;

    height: auto;

    display: block;

}


/* =========================================================
   NAVIGATION
========================================================= */

.main-navigation {

    display: flex;

    align-items: center;

    gap: 35px;

}


.main-navigation a {

    position: relative;

    color: var(--color-white);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.5px;

}


.main-navigation a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 2px;

    background: var(--color-lime);

    transition: width 0.3s ease;

}


.main-navigation a:hover::after,
.main-navigation a.active::after {

    width: 100%;

}

/* =========================================================
   MOBILE MENU TOGGLE
========================================================= */

.mobile-menu-toggle {

    display: none;

    width: 44px;
    height: 44px;

    padding: 10px;

    border: none;

    background: transparent;

    cursor: pointer;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 5px;

}


.mobile-menu-toggle span {

    display: block;

    width: 23px;
    height: 2px;

    background: var(--color-black);

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;

}
@media (max-width: 800px) {

    .header-inner {

        position: relative;

    }


    .main-navigation {

        display: none;

        position: absolute;

        top: calc(100% + 1px);

        left: 0;
        right: 0;

        z-index: 100;

        flex-direction: column;

        align-items: stretch;

        padding: 20px;

        background: var(--color-white);

        border-top: 1px solid rgba(11, 13, 18, 0.08);

        box-shadow:
            0 15px 35px rgba(11, 13, 18, 0.10);

    }


    .main-navigation.is-open {

        display: flex;

    }


    .main-navigation a {

        padding: 14px 5px;

        font-size: 12px;

    }


    .header-button {

        display: none;

    }


    .mobile-menu-toggle {

        display: flex;

        margin-left: auto;

    }


    /* Hamburger → X */

    .mobile-menu-toggle.is-open span:nth-child(1) {

        transform: translateY(7px) rotate(45deg);

    }


    .mobile-menu-toggle.is-open span:nth-child(2) {

        opacity: 0;

    }


    .mobile-menu-toggle.is-open span:nth-child(3) {

        transform: translateY(-7px) rotate(-45deg);

    }

}
.mobile-menu-toggle span { background: #fff; }
.main-navigation.is-open { background: #000; }
/* =========================================================
   HEADER BUTTON
========================================================= */

.header-button {

    background: var(--color-lime);

    color: var(--color-black);

    padding: 13px 22px;

    font-size: 12px;

    font-weight: 700;

    border-radius: 3px;

    transition: 0.3s ease;

}


.header-button:hover {

    background: var(--color-white);

}


/* =========================================================
   HERO
========================================================= */

.hero {

    min-height: 600px;

    background:

        linear-gradient(
            90deg,
            rgba(11, 13, 18, 1) 0%,
            rgba(11, 13, 18, 0.95) 35%,
            rgba(11, 13, 18, 0.35) 70%,
            rgba(11, 13, 18, 0.1) 100%
        ),

        var(--color-black);

    color: var(--color-white);

    display: flex;

    align-items: center;

}


.hero-content {

    display: flex;

    align-items: center;

}


.hero-text {

    max-width: 650px;

    padding: 80px 0;

}


/* =========================================================
   EYEBROW
========================================================= */

.eyebrow {

    color: var(--color-purple);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 18px;

}


/* =========================================================
   HERO TITLE
========================================================= */

.hero h1 {

    font-size: clamp(44px, 6vw, 76px);

    line-height: 1.05;

    letter-spacing: -2px;

    margin-bottom: 28px;

}


.hero h1 span {

    color: var(--color-lime);

}


.hero h1 strong {

    color: var(--color-purple);

    font-weight: inherit;

}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.hero-description {

    max-width: 520px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 17px;

    margin-bottom: 35px;

}


/* =========================================================
   BUTTONS
========================================================= */

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 15px;

}


.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 15px 24px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.5px;

    transition: 0.3s ease;

}


.button-primary {

    background: var(--color-lime);

    color: var(--color-black);

}


.button-primary:hover {

    background: var(--color-white);

}


.button-outline {

    border: 1px solid rgba(255, 255, 255, 0.8);

    color: var(--color-white);

}


.button-outline:hover {

    background: var(--color-white);

    color: var(--color-black);

}


/* =========================================================
   TEST SECTION
========================================================= */

.test-section {

    padding: 100px 0;

    background: var(--color-off-white);

}


.test-section .eyebrow {

    color: var(--color-purple);

}


.test-section h2 {

    max-width: 700px;

    font-size: clamp(36px, 5vw, 58px);

    line-height: 1.1;

    margin-bottom: 25px;

}


.test-section h2 span {

    color: var(--color-lime);

}


.test-section p:last-child {

    max-width: 600px;

    font-size: 18px;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .main-navigation {

        gap: 18px;

    }


    .main-navigation a {

        font-size: 11px;

    }


    .header-button {

        display: none;

    }

}


@media (max-width: 700px) {

    .header-inner {

        min-height: 70px;

    }


    .main-navigation {

        display: none;

    }


    .hero {

        min-height: 650px;

    }


    .hero-text {

        padding: 70px 0;

    }


    .hero h1 {

        font-size: 46px;

        letter-spacing: -1px;

    }


    .hero-description {

        font-size: 16px;

    }


    .hero-buttons {

        flex-direction: column;

        align-items: flex-start;

    }


    .test-section {

        padding: 70px 0;

    }

}

/* =========================================================
   /* =========================================================
   HOMEPAGE HERO - FULL BACKGROUND IMAGE
========================================================= */

.hero {
    position: relative;
    min-height: 650px;
    overflow: hidden;

    background: var(--color-off-white);
    color: var(--color-black);

    display: flex;
    align-items: center;
}


/* Full hero photograph */

.hero-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background-image: url("../images/home/hero-pilates.jpg");
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;

    z-index: 1;
}


/* Soft white overlay for text readability */

.hero-image::before {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(245, 244, 240, 0.97) 0%,
        rgba(245, 244, 240, 0.88) 28%,
        rgba(245, 244, 240, 0.35) 52%,
        rgba(245, 244, 240, 0) 72%
    );
}


/* Hero content */

.hero .hero-content {
    position: relative;
    z-index: 2;

    width: min(1200px, 90%);
    margin: 0 auto;
    min-height: 650px;

    display: flex;
    align-items: center;
}


.hero .hero-text {
    width: 55%;
    max-width: 650px;

    padding: 70px 0;
}


/* Hero eyebrow */

.hero .eyebrow {
    color: var(--color-purple);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;

    margin-bottom: 20px;
}


/* Main heading */

.hero h1 {
    max-width: 650px;

    color: var(--color-black);

    font-size: clamp(43px, 5.2vw, 72px);
    line-height: 1.04;
    letter-spacing: -2px;

    margin-bottom: 27px;
}


.hero h1 span {
    color: var(--color-lime);
}


.hero h1 strong {
    color: var(--color-purple);
    font-weight: inherit;
}


/* Description */

.hero .hero-description {
    max-width: 500px;

    color: rgba(11, 13, 18, 0.68);

    font-size: 16px;
    line-height: 1.75;

    margin-bottom: 34px;
}


/* Buttons */

.hero .hero-buttons {
    display: flex;

    align-items: center;

    gap: 14px;
}


.hero .button-outline {
    border: 1px solid rgba(11, 13, 18, 0.45);
    color: var(--color-black);
}


.hero .button-outline:hover {
    background: var(--color-black);
    color: var(--color-white);
}

/* Hero eyebrow */

.hero .eyebrow {
    color: var(--color-purple);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;

    margin-bottom: 20px;
}


/* Main heading */

.hero h1 {
    max-width: 650px;

    color: var(--color-black);

    font-size: clamp(43px, 5.2vw, 72px);
    line-height: 1.04;
    letter-spacing: -2px;

    margin-bottom: 27px;
}


.hero h1 span {
    color: var(--color-lime);
}


.hero h1 strong {
    color: var(--color-purple);
    font-weight: inherit;
}


/* Description */

.hero .hero-description {
    max-width: 500px;

    color: rgba(11, 13, 18, 0.68);

    font-size: 16px;
    line-height: 1.75;

    margin-bottom: 34px;
}


/* Buttons */

.hero .hero-buttons {
    display: flex;

    align-items: center;

    gap: 14px;
}


.hero .button-outline {
    border: 1px solid rgba(11, 13, 18, 0.45);
    color: var(--color-black);
}


.hero .button-outline:hover {
    background: var(--color-black);
    color: var(--color-white);
}


/* =========================================================
   HERO MOBILE
========================================================= */

@media (max-width: 700px) {

    .hero {
        min-height: auto;

        display: block;
    }


    .hero-image {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;

        width: 100%;
        height: 330px;

        background-size: cover;
        background-position: center center;
    }


    .hero-image::before {
        display: none;
    }


    .hero .hero-content {
        min-height: auto;

        display: block;
    }


    .hero .hero-text {
        width: 100%;
        max-width: none;

        padding: 55px 0 60px;
    }


    .hero .eyebrow {
        font-size: 10px;
        letter-spacing: 1.6px;

        margin-bottom: 16px;
    }


    .hero h1 {
        font-size: 42px;

        line-height: 1.06;
        letter-spacing: -1px;

        margin-bottom: 22px;
    }


    .hero .hero-description {
        font-size: 15px;
        line-height: 1.7;

        margin-bottom: 28px;
    }


    .hero .hero-buttons {
        align-items: stretch;

        flex-direction: column;

        width: fit-content;
    }


    .hero .button {
        width: 210px;
    }

}

/* =========================================================
   MORE THAN FITNESS / LIFESTYLE SECTION
========================================================= */

.lifestyle-section {

    background: var(--color-off-white);

    padding: 90px 0;

}


.lifestyle-inner {

    display: grid;

    grid-template-columns:
        minmax(260px, 1.2fr)
        1px
        minmax(280px, 1.5fr)
        auto;

    align-items: center;

    gap: 40px;

}


/* Small purple section label */

.lifestyle-section .eyebrow {

    color: var(--color-purple);

    margin-bottom: 18px;

}


/* Main heading */

.lifestyle-heading h2 {

    font-size: clamp(36px, 4vw, 56px);

    line-height: 1.08;

    letter-spacing: -1.5px;

    color: var(--color-black);

}


.lifestyle-heading h2 span {

    color: var(--color-lime);

}


/* Vertical divider */

.lifestyle-divider {

    width: 1px;

    height: 115px;

    background: rgba(11, 13, 18, 0.18);

}


/* Description */

.lifestyle-text p {

    max-width: 560px;

    font-size: 17px;

    line-height: 1.7;

    color: rgba(11, 13, 18, 0.78);

}


/* Our story button */

.story-button {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding: 15px 20px;

    border: 1px solid var(--color-lime);

    color: var(--color-black);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.5px;

    white-space: nowrap;

    transition: 0.3s ease;

}


.story-button span {

    font-size: 18px;

    line-height: 1;

}


.story-button:hover {

    background: var(--color-lime);

}


/* =========================================================
   LIFESTYLE SECTION - MOBILE
========================================================= */

@media (max-width: 850px) {

    .lifestyle-section {

        padding: 75px 0;

    }


    .lifestyle-inner {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .lifestyle-divider {

        width: 70px;

        height: 1px;

    }


    .lifestyle-text p {

        font-size: 16px;

    }


    .lifestyle-action {

        margin-top: 5px;

    }

}
/* =========================================================
   SERVICES PREVIEW
========================================================= */

.services-preview {

    background: var(--color-white);

    padding: 105px 0;

}


/* =========================================================
   SERVICES HEADING
========================================================= */

.services-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;

    margin-bottom: 55px;

}


.services-heading .eyebrow {

    color: var(--color-purple);

    margin-bottom: 18px;

}


.services-heading h2 {

    font-size: clamp(38px, 4.5vw, 58px);

    line-height: 1.05;

    letter-spacing: -1.5px;

}


.services-heading h2 span {

    color: var(--color-lime);

}


/* =========================================================
   VIEW ALL BUTTON
========================================================= */

.services-view-all {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    padding: 14px 20px;

    min-height: 52px;

    border: 1px solid var(--color-black);

    color: var(--color-black);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.5px;

    white-space: nowrap;

    transition:
        background 0.3s ease,
        color 0.3s ease;

}


.services-view-all span {

    font-size: 17px;

}


.services-view-all:hover {

    background: var(--color-black);

    color: var(--color-white);

}


/* =========================================================
   SERVICES GRID — 3 × 2
========================================================= */

.services-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

}


/* =========================================================
   SERVICE CARD
========================================================= */

.service-card {

    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    background: var(--color-off-white);

    border-radius: 0;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.service-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(11, 13, 18, 0.10);

}


/* =========================================================
   SERVICE IMAGE
========================================================= */

.service-image {

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

}


.service-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.5s ease;

}


.service-card:hover
.service-image img {

    transform: scale(1.04);

}


/* =========================================================
   SERVICE CONTENT
========================================================= */

.service-content {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 27px 24px 30px;

}


.service-content h3 {

    font-size: 22px;

    line-height: 1.15;

    letter-spacing: -0.4px;

    margin-bottom: 13px;

}


.service-content p {

    font-size: 14px;

    line-height: 1.65;

    color: rgba(11, 13, 18, 0.70);

    margin: 0;

}


/* =========================================================
   LEARN MORE
========================================================= */

.service-link {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: auto;

    padding-top: 25px;

    color: var(--color-black);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.7px;

}


.service-link span {

    color: var(--color-lime);

    font-size: 16px;

    transition:
        transform 0.3s ease;

}


.service-link:hover span {

    transform: translateX(5px);

}


/* =========================================================
   SERVICES — TABLET
========================================================= */

@media (max-width: 1050px) {

    .services-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 22px;

    }

}


/* =========================================================
   SERVICES — MOBILE
========================================================= */

@media (max-width: 700px) {

    .services-preview {

        padding: 75px 0;

    }


    .services-heading {

        align-items: flex-start;

        flex-direction: column;

        gap: 25px;

        margin-bottom: 40px;

    }


    .services-heading h2 {

        font-size: 40px;

    }


    .services-view-all {

        width: 100%;

    }


    .services-grid {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .service-image {

        aspect-ratio: 4 / 3;

    }


    .service-content {

        padding: 25px 22px 28px;

    }


    .service-content h3 {

        font-size: 22px;

    }


    .service-content p {

        font-size: 14px;

    }

}
/* =========================================================
   MISSION / VISION / VALUES
========================================================= */

.values-section {

    background: var(--color-black);

    color: var(--color-white);

    padding: 110px 0;

}


/* Heading */

.values-heading {

    max-width: 850px;

    margin-bottom: 65px;

}


.values-heading .eyebrow {

    color: var(--color-purple);

    margin-bottom: 18px;

}


.values-heading h2 {

    font-size: clamp(42px, 5vw, 66px);

    line-height: 1.04;

    letter-spacing: -2px;

    margin-bottom: 25px;

}


.values-heading h2 span {

    color: var(--color-lime);

}


.values-intro {

    max-width: 650px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 17px;

    line-height: 1.7;

}


/* Cards */

.values-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1px;

    background: rgba(255, 255, 255, 0.16);

}


.value-card {

    min-height: 300px;

    padding: 35px 32px;

    background: var(--color-black);

    border: 1px solid rgba(255, 255, 255, 0.08);

    transition:
        background 0.3s ease,
        transform 0.3s ease;

}


.value-card:hover {

    background: #151820;

    transform: translateY(-4px);

}


/* Number */

.value-number {

    color: var(--color-lime);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 65px;

}


/* Card heading */

.value-card h3 {

    font-size: 27px;

    margin-bottom: 16px;

}


/* Card text */

.value-card p {

    max-width: 330px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 15px;

    line-height: 1.7;

}


/* =========================================================
   VALUES - MOBILE
========================================================= */

@media (max-width: 800px) {

    .values-section {

        padding: 80px 0;

    }


    .values-heading {

        margin-bottom: 45px;

    }


    .values-heading h2 {

        font-size: 43px;

    }


    .values-grid {

        grid-template-columns: 1fr;

        gap: 1px;

    }


    .value-card {

        min-height: auto;

        padding: 30px 25px 35px;

    }


    .value-number {

        margin-bottom: 40px;

    }

}
/* =========================================================
   OUR COMMUNITY
========================================================= */

.community-section {

    background: var(--color-off-white);

    padding: 105px 0;

}


.community-inner {

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    align-items: center;

    gap: 80px;

}


/* Content */

.community-content {

    max-width: 520px;

}


.community-content .eyebrow {

    color: var(--color-purple);

    margin-bottom: 18px;

}


.community-content h2 {

    font-size: clamp(42px, 5vw, 64px);

    line-height: 1.04;

    letter-spacing: -2px;

    margin-bottom: 25px;

}


.community-content h2 span {

    color: var(--color-lime);

}


.community-description {

    max-width: 470px;

    color: rgba(11, 13, 18, 0.72);

    font-size: 17px;

    line-height: 1.7;

    margin-bottom: 32px;

}


/* Button */

.community-button {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding: 15px 20px;

    background: var(--color-black);

    color: var(--color-white);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.6px;

    transition: 0.3s ease;

}


.community-button span {

    color: var(--color-lime);

    font-size: 17px;

}


.community-button:hover {

    background: var(--color-lime);

    color: var(--color-black);

}


.community-button:hover span {

    color: var(--color-black);

}


/* Visual */

.community-visual {

    width: 100%;

    overflow: hidden;

}


.community-visual img {

    width: 100%;

    height: auto;

    display: block;

    transition: transform 0.5s ease;

}


.community-visual:hover img {

    transform: scale(1.02);

}


/* =========================================================
   COMMUNITY - MOBILE
========================================================= */

@media (max-width: 800px) {

    .community-section {

        padding: 80px 0;

    }


    .community-inner {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .community-content h2 {

        font-size: 44px;

    }


    .community-description {

        font-size: 16px;

    }

}
/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {

    padding: 55px 0;

    background: var(--color-white);

}


.final-cta-inner {

    position: relative;

    display: grid;

    grid-template-columns: 80px 1fr auto;

    align-items: center;

    gap: 35px;

    padding: 55px 60px;

    overflow: hidden;

    border-radius: 12px;

    background:
        linear-gradient(
            110deg,
            #7f347f 0%,
            var(--color-purple) 55%,
            #a653a0 100%
        );

    color: var(--color-white);

}


/* Decorative soft shape */

.final-cta-inner::after {

    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    right: -100px;

    top: -160px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50%;

}


/* Icon */

.final-cta-icon {

    position: relative;

    z-index: 2;

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: 50%;

}


.final-cta-icon span {

    font-size: 30px;

    color: var(--color-white);

}


/* Content */

.final-cta-content {

    position: relative;

    z-index: 2;

}


.final-cta-content .eyebrow {

    color: var(--color-lime);

    margin-bottom: 10px;

}


.final-cta-content h2 {

    font-size: clamp(34px, 4vw, 52px);

    line-height: 1.05;

    letter-spacing: -1.5px;

    margin-bottom: 13px;

}


.final-cta-content h2 span {

    color: var(--color-lime);

}


.final-cta-content p {

    color: rgba(255, 255, 255, 0.82);

    font-size: 15px;

    line-height: 1.6;

}


/* Button */

.final-cta-action {

    position: relative;

    z-index: 2;

}


.final-cta-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    padding: 17px 25px;

    background: var(--color-lime);

    color: var(--color-black);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.6px;

    white-space: nowrap;

    transition: 0.3s ease;

}


.final-cta-button span {

    font-size: 18px;

}


.final-cta-button:hover {

    background: var(--color-white);

}


/* =========================================================
   FINAL CTA - MOBILE
========================================================= */

@media (max-width: 800px) {

    .final-cta {

        padding: 35px 0;

    }


    .final-cta-inner {

        grid-template-columns: 1fr;

        gap: 25px;

        padding: 45px 30px;

    }


    .final-cta-icon {

        width: 54px;

        height: 54px;

    }


    .final-cta-content h2 {

        font-size: 40px;

    }


    .final-cta-action {

        margin-top: 5px;

    }


    .final-cta-button {

        width: 100%;

    }

}

/* =========================================================
   FOOTER
========================================================= */

.site-footer {

    background: var(--color-black);

    color: var(--color-white);

}


/* Main footer */

.footer-main {

    display: grid;

    grid-template-columns:
        1.5fr
        0.8fr
        1fr
        0.9fr
        1.2fr;

    gap: 55px;

    padding-top: 60px;

    padding-bottom: 45px;

}


/* Brand */

.footer-brand {

    max-width: 270px;

}


.footer-logo {

    display: block;

    width: 150px;

    margin-bottom: 10px;

}


.footer-logo img {

    width: 100%;

    height: auto;

    display: block;

}


.footer-tagline {

    color: rgba(255, 255, 255, 0.65);

    font-size: 8px;

    letter-spacing: 2px;

    margin-bottom: 25px;

}


.footer-mantra {

    color: rgba(255, 255, 255, 0.72);

    font-size: 13px;

    line-height: 1.8;

}


/* Social links */

.footer-socials {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 25px;

}


.footer-socials a {

    color: rgba(255, 255, 255, 0.65);

    font-size: 10px;

    font-weight: 600;

    transition: color 0.3s ease;

}


.footer-socials a:hover {

    color: var(--color-lime);

}


/* Footer columns */

.footer-column {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}


.footer-column h3 {

    color: var(--color-white);

    font-size: 11px;

    letter-spacing: 1px;

    margin-bottom: 22px;

}


.footer-column a {

    color: rgba(255, 255, 255, 0.68);

    font-size: 13px;

    line-height: 1.6;

    margin-bottom: 11px;

    transition: color 0.3s ease;

}


.footer-column a:hover {

    color: var(--color-lime);

}


.footer-contact-note {

    color: rgba(255, 255, 255, 0.48);

    font-size: 12px;

    line-height: 1.6;

    margin-bottom: 18px;

    max-width: 180px;

}


/* Newsletter */

.footer-newsletter > p {

    color: rgba(255, 255, 255, 0.62);

    font-size: 13px;

    line-height: 1.6;

    margin-bottom: 18px;

    max-width: 220px;

}


.newsletter-form {

    display: flex;

    width: 100%;

    max-width: 280px;

}


.newsletter-form input {

    min-width: 0;

    flex: 1;

    padding: 13px 12px;

    border: 1px solid rgba(255, 255, 255, 0.18);

    background: rgba(255, 255, 255, 0.05);

    color: var(--color-white);

    outline: none;

    font-family: inherit;

    font-size: 11px;

}


.newsletter-form input::placeholder {

    color: rgba(255, 255, 255, 0.4);

}


.newsletter-form button {

    border: none;

    padding: 0 15px;

    background: var(--color-lime);

    color: var(--color-black);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.5px;

    cursor: pointer;

    transition: 0.3s ease;

}


.newsletter-form button:hover {

    background: var(--color-white);

}


/* Footer bottom */

.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding: 22px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.10);

}


.footer-bottom p {

    color: rgba(255, 255, 255, 0.45);

    font-size: 10px;

}


.footer-bottom div {

    display: flex;

    gap: 25px;

}


.footer-bottom a {

    color: rgba(255, 255, 255, 0.45);

    font-size: 10px;

    transition: color 0.3s ease;

}


.footer-bottom a:hover {

    color: var(--color-lime);

}


/* =========================================================
   FOOTER - TABLET
========================================================= */

@media (max-width: 1000px) {

    .footer-main {

        grid-template-columns:
            1.5fr
            1fr
            1fr;

    }

}


/* =========================================================
   FOOTER - MOBILE
========================================================= */

@media (max-width: 700px) {

    .footer-main {

        grid-template-columns: 1fr;

        gap: 30px;

        padding-top: 45px;

        padding-bottom: 35px;

    }


    .footer-brand {

        max-width: 100%;

    }


    .footer-column {

        width: 100%;

    }


    .footer-bottom {

        align-items: flex-start;

        flex-direction: column;

    }


    .footer-bottom div {

        flex-wrap: wrap;

        gap: 15px;

    }

}

/* =========================================================
   ABOUT HERO
========================================================= */

.about-hero {

    position: relative;

    min-height: 650px;

    overflow: hidden;

    background: var(--color-black);

    color: var(--color-white);

}


.about-hero-image {

    position: absolute;

    inset: 0;

    background-image:
        url("../images/home/fit-fun-fly-hero.png");

    background-size: cover;

    background-position: center center;

    z-index: 1;

}


/* Dark left-side gradient */

.about-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(11, 13, 18, 0.98) 0%,
            rgba(11, 13, 18, 0.90) 28%,
            rgba(11, 13, 18, 0.55) 52%,
            rgba(11, 13, 18, 0.16) 78%,
            rgba(11, 13, 18, 0.05) 100%
        );

    z-index: 2;

}


/* Content */

.about-hero-content {

    position: relative;

    z-index: 3;

    min-height: 650px;

    display: flex;

    align-items: center;

}


.about-hero-text {

    max-width: 650px;

    padding: 80px 0;

}


/* Eyebrow */

.about-hero .eyebrow {

    color: var(--color-purple);

    margin-bottom: 20px;

}


/* Heading */

.about-hero h1 {

    font-size: clamp(46px, 5.5vw, 76px);

    line-height: 1.04;

    letter-spacing: -2px;

    margin-bottom: 28px;

}


.about-hero h1 span {

    color: var(--color-lime);

}


/* Description */

.about-hero-description {

    max-width: 540px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 17px;

    line-height: 1.7;

    margin-bottom: 35px;

}


/* =========================================================
   ABOUT HERO - MOBILE
========================================================= */

@media (max-width: 700px) {

    .about-hero {

        min-height: 680px;

    }


    .about-hero-image {

        background-position: 65% center;

    }


    .about-hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(11, 13, 18, 0.97) 0%,
                rgba(11, 13, 18, 0.78) 55%,
                rgba(11, 13, 18, 0.30) 100%
            );

    }


    .about-hero-content {

        min-height: 680px;

    }


    .about-hero-text {

        padding: 75px 0 60px;

    }


    .about-hero h1 {

        font-size: 45px;

        letter-spacing: -1px;

    }


    .about-hero-description {

        font-size: 16px;

    }

}

/* =========================================================
   ABOUT — OUR STORY
========================================================= */

.about-story {

    background: var(--color-off-white);

    padding: 110px 0;

}


.about-story-inner {

    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    align-items: center;

    gap: 80px;

}


/* Story text */

.about-story-content {

    max-width: 500px;

}


.about-story-content .eyebrow {

    color: var(--color-purple);

    margin-bottom: 18px;

}


.about-story-content h2 {

    font-size: clamp(42px, 5vw, 62px);

    line-height: 1.05;

    letter-spacing: -1.8px;

    margin-bottom: 28px;

}


.about-story-content h2 span {

    color: var(--color-purple);

}


.about-story-content > p {

    color: rgba(11, 13, 18, 0.72);

    font-size: 16px;

    line-height: 1.75;

    margin-bottom: 20px;

}


/* Founder */

.founder-signature {

    margin-top: 35px;

}


.signature-name {

    font-family: "Brush Script MT",
                 "Segoe Script",
                 cursive;

    font-size: 32px;

    font-style: italic;

    color: var(--color-black);

    margin-bottom: 5px;

}


.founder-signature p {

    color: var(--color-purple);

    font-size: 13px;

    font-weight: 700;

}


/* =========================================================
   STORY VISUAL
========================================================= */

.about-story-visual {

    position: relative;

    min-height: 500px;

}


.about-story-visual > img {

    width: 100%;

    height: 500px;

    object-fit: cover;

    object-position: center;

    display: block;

    border-radius: 18px;

}


/* Quote card */

.story-quote {

    position: absolute;

    right: -35px;

    bottom: -35px;

    width: 285px;

    padding: 30px;

    background: var(--color-white);

    border-radius: 14px;

    box-shadow:
        0 20px 50px rgba(11, 13, 18, 0.14);

}


.quote-mark {

    color: var(--color-purple);

    font-size: 58px;

    line-height: 0.7;

    font-family: Georgia, serif;

    margin-bottom: 18px;

}


.story-quote p {

    color: var(--color-black);

    font-size: 15px;

    line-height: 1.65;

    font-weight: 600;

}


.quote-line {

    width: 100%;

    height: 2px;

    margin: 20px 0 12px;

    background: var(--color-lime);

}


.quote-signature {

    font-family: "Brush Script MT",
                 "Segoe Script",
                 cursive;

    font-size: 28px;

    font-style: italic;

    color: var(--color-purple);

}


/* =========================================================
   ABOUT STORY — TABLET
========================================================= */

@media (max-width: 950px) {

    .about-story-inner {

        grid-template-columns: 1fr;

        gap: 55px;

    }


    .about-story-content {

        max-width: 700px;

    }


    .about-story-visual {

        padding-right: 25px;

    }

}


/* =========================================================
   ABOUT STORY — MOBILE
========================================================= */

@media (max-width: 700px) {

    .about-story {

        padding: 80px 0;

    }


    .about-story-content h2 {

        font-size: 44px;

    }


    .about-story-visual {

        min-height: auto;

        padding-right: 0;

    }


    .about-story-visual > img {

        height: 390px;

    }


    .story-quote {

        position: relative;

        right: auto;

        bottom: auto;

        width: calc(100% - 25px);

        margin: -55px auto 0;

    }

}

/* =========================================================
   ABOUT — OUR APPROACH
========================================================= */

.about-approach {

    background: var(--color-black);

    color: var(--color-white);

    padding: 105px 0;

}


/* Heading */

.approach-heading {

    text-align: center;

    margin-bottom: 65px;

}


.approach-heading .eyebrow {

    color: var(--color-purple);

    margin-bottom: 18px;

}


.approach-heading h2 {

    font-size: clamp(42px, 5vw, 64px);

    line-height: 1.04;

    letter-spacing: -2px;

}


.approach-heading h2 span {

    color: var(--color-lime);

}


/* Four columns */

.approach-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid rgba(255, 255, 255, 0.14);

    border-bottom: 1px solid rgba(255, 255, 255, 0.14);

}


/* Individual card */

.approach-card {

    min-height: 300px;

    padding: 38px 32px;

    border-right: 1px solid rgba(255, 255, 255, 0.14);

}


.approach-card:last-child {

    border-right: none;

}


/* Icon */

.approach-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 45px;

    border-radius: 50%;

    font-size: 27px;

    font-weight: 400;

}


.approach-icon.lime {

    color: var(--color-black);

    background: var(--color-lime);

}


.approach-icon.purple {

    color: var(--color-white);

    background: var(--color-purple);

}


/* Title */

.approach-card h3 {

    font-size: 25px;

    margin-bottom: 15px;

}


/* Description */

.approach-card p {

    max-width: 230px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   APPROACH — TABLET
========================================================= */

@media (max-width: 900px) {

    .approach-grid {

        grid-template-columns: repeat(2, 1fr);

    }


    .approach-card:nth-child(2) {

        border-right: none;

    }


    .approach-card:nth-child(-n + 2) {

        border-bottom: 1px solid rgba(255, 255, 255, 0.14);

    }

}


/* =========================================================
   APPROACH — MOBILE
========================================================= */

@media (max-width: 600px) {

    .about-approach {

        padding: 80px 0;

    }


    .approach-heading {

        margin-bottom: 45px;

    }


    .approach-heading h2 {

        font-size: 43px;

    }


    .approach-grid {

        grid-template-columns: 1fr;

    }


    .approach-card {

        min-height: auto;

        padding: 32px 25px 38px;

        border-right: none;

        border-bottom: 1px solid rgba(255, 255, 255, 0.14);

    }


    .approach-card:nth-child(2) {

        border-bottom: 1px solid rgba(255, 255, 255, 0.14);

    }


    .approach-card:last-child {

        border-bottom: none;

    }


    .approach-icon {

        margin-bottom: 30px;

    }

}

/* =========================================================
   ABOUT — MISSION / VISION / VALUES
========================================================= */

.about-mission {

    background: var(--color-off-white);

    padding: 105px 0;

}


.about-mission-heading {

    text-align: center;

    margin-bottom: 60px;

}


.about-mission-heading .eyebrow {

    color: var(--color-purple);

    margin-bottom: 18px;

}


.about-mission-heading h2 {

    font-size: clamp(42px, 5vw, 62px);

    line-height: 1.05;

    letter-spacing: -2px;

}


.about-mission-heading h2 span {

    color: var(--color-lime);

}


/* Cards */

.mission-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

}


.mission-card {

    background: var(--color-white);

    min-height: 300px;

    padding: 38px 32px;

    border: 1px solid rgba(11, 13, 18, 0.07);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.mission-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 18px 40px rgba(11, 13, 18, 0.10);

}


/* Icon */

.mission-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    margin-bottom: 35px;

    font-size: 25px;

}


.mission-icon.lime {

    background: var(--color-lime);

    color: var(--color-black);

}


.mission-icon.purple {

    background: var(--color-purple);

    color: var(--color-white);

}


/* Label */

.mission-label {

    color: var(--color-purple);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 18px;

}


/* Text */

.mission-text {

    max-width: 350px;

    color: rgba(11, 13, 18, 0.76);

    font-size: 16px;

    line-height: 1.7;

}


/* =========================================================
   MISSION — TABLET
========================================================= */

@media (max-width: 850px) {

    .mission-grid {

        grid-template-columns: 1fr;

    }


    .mission-card {

        min-height: auto;

    }

}


/* =========================================================
   MISSION — MOBILE
========================================================= */

@media (max-width: 600px) {

    .about-mission {

        padding: 80px 0;

    }


    .about-mission-heading {

        margin-bottom: 45px;

    }


    .about-mission-heading h2 {

        font-size: 43px;

    }


    .mission-card {

        padding: 30px 25px 35px;

    }

}

/* =========================================================
   ABOUT — FINAL CTA
========================================================= */

.about-final-cta {

    background: var(--color-white);

    padding: 55px 0;

}


.about-final-cta-inner {

    position: relative;

    display: grid;

    grid-template-columns: 80px 1fr auto;

    align-items: center;

    gap: 35px;

    padding: 55px 60px;

    overflow: hidden;

    border-radius: 12px;

    background:
        linear-gradient(
            110deg,
            #7f347f 0%,
            var(--color-purple) 55%,
            #a653a0 100%
        );

    color: var(--color-white);

}


.about-final-cta-inner::after {

    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    right: -100px;

    top: -160px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50%;

}


.about-final-cta-icon {

    position: relative;

    z-index: 2;

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: 50%;

}


.about-final-cta-icon span {

    font-size: 30px;

}


.about-final-cta-content {

    position: relative;

    z-index: 2;

}


.about-final-cta-content .eyebrow {

    color: var(--color-lime);

    margin-bottom: 10px;

}


.about-final-cta-content h2 {

    max-width: 760px;

    font-size: clamp(32px, 4vw, 50px);

    line-height: 1.06;

    letter-spacing: -1.5px;

    margin-bottom: 13px;

}


.about-final-cta-content h2 span {

    color: var(--color-lime);

}


.about-final-cta-content p {

    color: rgba(255, 255, 255, 0.82);

    font-size: 15px;

    line-height: 1.6;

}


.about-final-cta-action {

    position: relative;

    z-index: 2;

}


.about-final-cta-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    padding: 17px 25px;

    background: var(--color-lime);

    color: var(--color-black);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.6px;

    white-space: nowrap;

    transition: 0.3s ease;

}


.about-final-cta-button span {

    font-size: 18px;

}


.about-final-cta-button:hover {

    background: var(--color-white);

}


/* =========================================================
   ABOUT CTA — MOBILE
========================================================= */

@media (max-width: 800px) {

    .about-final-cta {

        padding: 35px 0;

    }


    .about-final-cta-inner {

        grid-template-columns: 1fr;

        gap: 25px;

        padding: 45px 30px;

    }


    .about-final-cta-content h2 {

        font-size: 39px;

    }


    .about-final-cta-button {

        width: 100%;

    }

}

/* =========================================================
   SERVICES HERO
========================================================= */

.services-hero {

    position: relative;

    min-height: 680px;

    overflow: hidden;

    background: var(--color-black);

    color: var(--color-white);

}


.services-hero-image {

    position: absolute;

    inset: 0;

    z-index: 1;

    background-image:
        url("../images/services/services-hero.jpg");

    background-size: cover;

    background-position: center center;

}


/* Dark overlay — text readability */

.services-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(11, 13, 18, 0.98) 0%,
            rgba(11, 13, 18, 0.90) 28%,
            rgba(11, 13, 18, 0.60) 53%,
            rgba(11, 13, 18, 0.22) 78%,
            rgba(11, 13, 18, 0.08) 100%
        );

}


/* Content */

.services-hero-content {

    position: relative;

    z-index: 3;

    min-height: 680px;

    display: flex;

    align-items: center;

}


.services-hero-text {

    max-width: 700px;

    padding: 90px 0;

}


/* Eyebrow */

.services-hero .eyebrow {

    color: var(--color-purple);

    margin-bottom: 20px;

}


/* Heading */

.services-hero h1 {

    font-size: clamp(45px, 5.5vw, 74px);

    line-height: 1.03;

    letter-spacing: -2px;

    margin-bottom: 28px;

}


.services-hero h1 span {

    color: var(--color-lime);

}


/* Description */

.services-hero-description {

    max-width: 560px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 17px;

    line-height: 1.7;

    margin-bottom: 35px;

}


/* Buttons */

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;

}


.hero-buttons .button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

}


/* Secondary outline button */

.button-outline {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 20px;

    border: 1px solid rgba(255, 255, 255, 0.65);

    color: var(--color-white);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.5px;

    transition: 0.3s ease;

}


.button-outline:hover {

    border-color: var(--color-lime);

    background: var(--color-lime);

    color: var(--color-black);

}


/* =========================================================
   SERVICES HERO — MOBILE
========================================================= */

@media (max-width: 700px) {

    .services-hero {

        min-height: 720px;

    }


    .services-hero-image {

        background-position: 62% center;

    }


    .services-hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(11, 13, 18, 0.97) 0%,
                rgba(11, 13, 18, 0.82) 55%,
                rgba(11, 13, 18, 0.35) 100%
            );

    }


    .services-hero-content {

        min-height: 720px;

    }


    .services-hero-text {

        padding: 75px 0 60px;

    }


    .services-hero h1 {

        font-size: 45px;

        letter-spacing: -1px;

    }


    .services-hero-description {

        font-size: 16px;

    }


    .hero-buttons {

        align-items: stretch;

        flex-direction: column;

    }


    .hero-buttons .button,
    .hero-buttons .button-outline {

        width: 100%;

    }

}

/* =========================================================
   SERVICES — WHAT WE OFFER
========================================================= */

.services-offer {

    background: var(--color-off-white);

    padding: 110px 0;

}


/* =========================================================
   SECTION HEADING
========================================================= */

.services-offer-heading {

    display: grid;

    grid-template-columns: 1fr 0.75fr;

    align-items: end;

    gap: 70px;

    margin-bottom: 65px;

}


.services-offer-heading .eyebrow {

    color: var(--color-purple);

    margin-bottom: 18px;

}


.services-offer-heading h2 {

    font-size: clamp(43px, 5vw, 64px);

    line-height: 1.04;

    letter-spacing: -2px;

}


.services-offer-heading h2 span {

    color: var(--color-lime);

}


.services-offer-intro {

    max-width: 440px;

    padding-bottom: 5px;

}


.services-offer-intro p {

    color: rgba(11, 13, 18, 0.68);

    font-size: 16px;

    line-height: 1.75;

}


/* =========================================================
   SERVICE CARDS GRID
========================================================= */

.services-cards {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 28px;

}


/* =========================================================
   SERVICE CARD
========================================================= */

.service-detail-card {

    display: grid;

    grid-template-columns: 0.92fr 1.08fr;

    min-height: 430px;

    overflow: hidden;

    background: var(--color-white);

    border: 1px solid rgba(11, 13, 18, 0.07);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

}


.service-detail-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 22px 50px rgba(11, 13, 18, 0.12);

}


/* =========================================================
   CARD IMAGE
========================================================= */

.service-detail-image {

    position: relative;

    min-height: 430px;

    overflow: hidden;

}


.service-detail-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(11, 13, 18, 0.02),
            rgba(11, 13, 18, 0.14)
        );

    pointer-events: none;

}


.service-detail-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition: transform 0.6s ease;

}


.service-detail-card:hover
.service-detail-image img {

    transform: scale(1.04);

}


/* =========================================================
   CARD CONTENT
========================================================= */

.service-detail-body {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    padding: 38px 34px;

}


/* Icon */

.service-detail-icon {

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    margin-bottom: 25px;

    font-size: 23px;

}


.service-detail-icon.lime {

    background: var(--color-lime);

    color: var(--color-black);

}


.service-detail-icon.purple {

    background: var(--color-purple);

    color: var(--color-white);

}


/* Title */

.service-detail-body h3 {

    font-size: 27px;

    line-height: 1.15;

    letter-spacing: -0.5px;

    margin-bottom: 13px;

}


/* Accent */

.service-accent {

    width: 42px;

    height: 3px;

    margin-bottom: 19px;

}


.service-accent.lime {

    background: var(--color-lime);

}


.service-accent.purple {

    background: var(--color-purple);

}


/* Description */

.service-detail-body > p {

    color: rgba(11, 13, 18, 0.68);

    font-size: 14px;

    line-height: 1.65;

    margin-bottom: 18px;

}


/* Bullet list */

.service-detail-body ul {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin: 0 0 22px;

    padding: 0;

    list-style: none;

}


.service-detail-body li {

    position: relative;

    padding-left: 17px;

    color: rgba(11, 13, 18, 0.72);

    font-size: 12px;

    line-height: 1.45;

}


.service-detail-body li::before {

    content: "•";

    position: absolute;

    left: 0;

    top: -1px;

    font-size: 15px;

}


.service-detail-card:nth-child(odd)
.service-detail-body li::before {

    color: var(--color-lime);

}


.service-detail-card:nth-child(even)
.service-detail-body li::before {

    color: var(--color-purple);

}


/* Learn More */

.service-detail-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: auto;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.7px;

    transition: gap 0.25s ease;

}


.service-detail-link span {

    font-size: 16px;

}


.service-detail-link:hover {

    gap: 15px;

}


.lime-text {

    color: var(--color-black);

}


.lime-text span {

    color: var(--color-lime);

}


.purple-text {

    color: var(--color-black);

}


.purple-text span {

    color: var(--color-purple);

}


/* =========================================================
   SERVICES — TABLET
========================================================= */

@media (max-width: 1000px) {

    .services-offer-heading {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .services-offer-intro {

        max-width: 650px;

    }


    .services-cards {

        grid-template-columns: 1fr;

    }


    .service-detail-card {

        grid-template-columns: 0.9fr 1.1fr;

    }

}


/* =========================================================
   SERVICES — MOBILE
========================================================= */

@media (max-width: 650px) {

    .services-offer {

        padding: 80px 0;

    }


    .services-offer-heading {

        margin-bottom: 45px;

    }


    .services-offer-heading h2 {

        font-size: 43px;

    }


    .services-cards {

        gap: 22px;

    }


    .service-detail-card {

        grid-template-columns: 1fr;

    }


    .service-detail-image {

        min-height: 300px;

        height: 300px;

    }


    .service-detail-body {

        padding: 30px 25px 32px;

    }


    .service-detail-body h3 {

        font-size: 25px;

    }

}

/* =========================================================
   SERVICES — OUR PROMISE
========================================================= */

.services-promise {

    background: var(--color-off-white);

    padding: 55px 0 85px;

}


.services-promise-inner {

    display: grid;

    grid-template-columns:
        1fr
        1.15fr
        1.55fr;

    align-items: center;

    gap: 0;

    padding: 48px 50px;

    background: var(--color-black);

    border-radius: 14px;

    color: var(--color-white);

}


/* =========================================================
   PROMISE MAIN
========================================================= */

.promise-main {

    padding-right: 45px;

}


.promise-icon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 22px;

    border-radius: 50%;

    font-size: 24px;

}


.promise-icon.lime {

    background: var(--color-lime);

    color: var(--color-black);

}


.promise-main .eyebrow {

    color: var(--color-purple);

    margin-bottom: 12px;

}


.promise-main h2 {

    font-size: clamp(34px, 3.4vw, 48px);

    line-height: 1.05;

    letter-spacing: -1.5px;

}


.promise-main h2 span {

    color: var(--color-lime);

}


/* =========================================================
   PROMISE DESCRIPTION
========================================================= */

.promise-description {

    padding: 8px 45px;

    border-left: 1px solid rgba(255, 255, 255, 0.16);

    border-right: 1px solid rgba(255, 255, 255, 0.16);

}


.promise-description p {

    color: rgba(255, 255, 255, 0.72);

    font-size: 14px;

    line-height: 1.7;

}


.promise-description p + p {

    margin-top: 20px;

}


/* =========================================================
   PROMISE FEATURES
========================================================= */

.promise-features {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

    padding-left: 45px;

}


.promise-feature {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}


.promise-feature-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 13px;

    border-radius: 50%;

    font-size: 17px;

}


.promise-feature-icon.lime {

    background: var(--color-lime);

    color: var(--color-black);

}


.promise-feature-icon.purple {

    background: var(--color-purple);

    color: var(--color-white);

}


.promise-feature > span {

    color: rgba(255, 255, 255, 0.78);

    font-size: 11px;

    line-height: 1.45;

}


.promise-feature strong {

    display: block;

    color: var(--color-white);

    font-weight: 700;

}


/* =========================================================
   PROMISE — TABLET
========================================================= */

@media (max-width: 1100px) {

    .services-promise-inner {

        grid-template-columns: 1fr 1fr;

        gap: 35px;

    }


    .promise-description {

        border-right: none;

        padding-right: 0;

    }


    .promise-features {

        grid-column: 1 / -1;

        grid-template-columns: repeat(3, 1fr);

        padding-left: 0;

        padding-top: 30px;

        border-top: 1px solid rgba(255, 255, 255, 0.16);

    }

}


/* =========================================================
   PROMISE — MOBILE
========================================================= */

@media (max-width: 650px) {

    .services-promise {

        padding: 35px 0 65px;

    }


    .services-promise-inner {

        grid-template-columns: 1fr;

        gap: 30px;

        padding: 38px 28px;

    }


    .promise-main {

        padding-right: 0;

    }


    .promise-main h2 {

        font-size: 39px;

    }


    .promise-description {

        padding: 25px 0 0;

        border-left: none;

        border-right: none;

        border-top: 1px solid rgba(255, 255, 255, 0.16);

    }


    .promise-features {

        grid-template-columns: repeat(2, 1fr);

        gap: 28px 20px;

        padding-top: 28px;

    }

}

/* =========================================================
   SERVICES — FINAL CTA
========================================================= */

.services-final-cta {

    background: var(--color-off-white);

    padding: 55px 0;

}


.services-final-cta-inner {

    position: relative;

    display: grid;

    grid-template-columns: 80px 1fr auto;

    align-items: center;

    gap: 35px;

    padding: 55px 60px;

    overflow: hidden;

    border-radius: 14px;

    background:
        linear-gradient(
            110deg,
            #7f347f 0%,
            var(--color-purple) 55%,
            #a653a0 100%
        );

    color: var(--color-white);

}


.services-final-cta-inner::after {

    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    right: -100px;

    top: -160px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50%;

}


.services-final-cta-icon {

    position: relative;

    z-index: 2;

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: 50%;

}


.services-final-cta-icon span {

    font-size: 30px;

}


.services-final-cta-content {

    position: relative;

    z-index: 2;

}


.services-final-cta-content .eyebrow {

    color: var(--color-lime);

    margin-bottom: 10px;

}


.services-final-cta-content h2 {

    font-size: clamp(34px, 4vw, 50px);

    line-height: 1.06;

    letter-spacing: -1.5px;

    margin-bottom: 13px;

}


.services-final-cta-content h2 span {

    color: var(--color-lime);

}


.services-final-cta-content p {

    max-width: 600px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 15px;

    line-height: 1.6;

}


.services-final-cta-action {

    position: relative;

    z-index: 2;

}


.services-final-cta-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    padding: 17px 25px;

    background: var(--color-lime);

    color: var(--color-black);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.6px;

    white-space: nowrap;

    transition: 0.3s ease;

}


.services-final-cta-button span {

    font-size: 18px;

}


.services-final-cta-button:hover {

    background: var(--color-white);

}


/* =========================================================
   SERVICES CTA — MOBILE
========================================================= */

@media (max-width: 800px) {

    .services-final-cta {

        padding: 35px 0;

    }


    .services-final-cta-inner {

        grid-template-columns: 1fr;

        gap: 25px;

        padding: 45px 30px;

    }


    .services-final-cta-content h2 {

        font-size: 39px;

    }


    .services-final-cta-button {

        width: 100%;

    }

}

/* =========================================================
   WHY FIT FUN FLY — HERO
========================================================= */

.why-hero {

    position: relative;

    min-height: 650px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--color-black);

    color: var(--color-white);

}


.why-hero::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    right: -150px;

    top: -130px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(167, 222, 61, 0.18) 0%,
            rgba(167, 222, 61, 0.05) 42%,
            transparent 70%
        );

}


.why-hero::after {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    right: 140px;

    bottom: -260px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(126, 52, 126, 0.25) 0%,
            rgba(126, 52, 126, 0.06) 45%,
            transparent 70%
        );

}


.why-hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

}


.why-hero-text {

    max-width: 800px;

    padding: 90px 0;

}


.why-hero .eyebrow {

    color: var(--color-purple);

    margin-bottom: 20px;

}


.why-hero h1 {

    font-size: clamp(55px, 7vw, 92px);

    line-height: 0.98;

    letter-spacing: -3.5px;

    margin-bottom: 30px;

}


.why-hero h1 span {

    color: var(--color-lime);

}


.why-hero-description {

    max-width: 520px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 18px;

    line-height: 1.7;

    margin-bottom: 35px;

}


/* =========================================================
   WHY HERO — MOBILE
========================================================= */

@media (max-width: 700px) {

    .why-hero {

        min-height: 620px;

    }


    .why-hero-text {

        padding: 80px 0;

    }


    .why-hero h1 {

        font-size: 55px;

        letter-spacing: -2px;

    }


    .why-hero-description {

        font-size: 16px;

    }


    .why-hero::before {

        width: 350px;

        height: 350px;

        right: -180px;

    }


    .why-hero::after {

        width: 300px;

        height: 300px;

        right: -100px;

    }

}

/* =========================================================
   WHY FIT FUN FLY — OUR APPROACH
========================================================= */

.why-approach {

    background: var(--color-off-white);

    padding: 110px 0;

}


/* =========================================================
   APPROACH HEADING
========================================================= */

.why-approach-heading {

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    align-items: end;

    gap: 70px;

    margin-bottom: 75px;

}


.why-approach-heading .eyebrow {

    color: var(--color-purple);

    margin-bottom: 18px;

}


.why-approach-heading h2 {

    font-size: clamp(43px, 5vw, 65px);

    line-height: 1.04;

    letter-spacing: -2px;

}


.why-approach-heading h2 span {

    color: var(--color-purple);

}


.why-approach-intro {

    max-width: 480px;

}


.why-approach-intro p {

    color: rgba(11, 13, 18, 0.68);

    font-size: 16px;

    line-height: 1.75;

}


.why-approach-intro p + p {

    margin-top: 18px;

}


/* =========================================================
   FOUR PILLARS
========================================================= */

.why-pillars {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid rgba(11, 13, 18, 0.12);

    border-bottom: 1px solid rgba(11, 13, 18, 0.12);

}


.why-pillar {

    position: relative;

    min-height: 330px;

    padding: 38px 30px;

    border-right: 1px solid rgba(11, 13, 18, 0.12);

}


.why-pillar:last-child {

    border-right: none;

}


/* =========================================================
   ICON
========================================================= */

.why-pillar-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    margin-bottom: 28px;

    font-size: 25px;

}


.why-pillar-icon.lime {

    background: var(--color-lime);

    color: var(--color-black);

}


.why-pillar-icon.purple {

    background: var(--color-purple);

    color: var(--color-white);

}


/* Number */

.why-pillar-number {

    position: absolute;

    top: 42px;

    right: 30px;

    color: rgba(11, 13, 18, 0.25);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

}


/* Title */

.why-pillar h3 {

    font-size: 27px;

    line-height: 1.1;

    margin-bottom: 12px;

}


/* Accent */

.pillar-line {

    width: 38px;

    height: 3px;

    margin-bottom: 20px;

}


.pillar-line.lime {

    background: var(--color-lime);

}


.pillar-line.purple {

    background: var(--color-purple);

}


/* Description */

.why-pillar p {

    max-width: 245px;

    color: rgba(11, 13, 18, 0.67);

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   APPROACH — TABLET
========================================================= */

@media (max-width: 950px) {

    .why-approach-heading {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .why-approach-intro {

        max-width: 650px;

    }


    .why-pillars {

        grid-template-columns: repeat(2, 1fr);

    }


    .why-pillar:nth-child(2) {

        border-right: none;

    }


    .why-pillar:nth-child(-n + 2) {

        border-bottom: 1px solid rgba(11, 13, 18, 0.12);

    }

}


/* =========================================================
   APPROACH — MOBILE
========================================================= */

@media (max-width: 650px) {

    .why-approach {

        padding: 80px 0;

    }


    .why-approach-heading {

        margin-bottom: 50px;

    }


    .why-approach-heading h2 {

        font-size: 43px;

    }


    .why-pillars {

        grid-template-columns: 1fr;

    }


    .why-pillar {

        min-height: auto;

        padding: 32px 25px 38px;

        border-right: none;

        border-bottom: 1px solid rgba(11, 13, 18, 0.12);

    }


    .why-pillar:nth-child(2) {

        border-right: none;

    }


    .why-pillar:last-child {

        border-bottom: none;

    }

}

/* =========================================================
   WHY FIT FUN FLY — WHAT MAKES US DIFFERENT
========================================================= */

.why-different {

    background: var(--color-black);

    color: var(--color-white);

    padding: 110px 0;

}


.why-different-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    align-items: center;

}


/* =========================================================
   LEFT
========================================================= */

.why-different-heading .eyebrow {

    color: var(--color-purple);

    margin-bottom: 20px;

}


.why-different-heading h2 {

    font-size: clamp(48px, 5.5vw, 70px);

    line-height: 1;

    letter-spacing: -2.5px;

}


.why-different-heading h2 span {

    color: var(--color-lime);

}


/* =========================================================
   RIGHT
========================================================= */

.why-different-content {

    max-width: 560px;

}


.why-different-content > p {

    color: rgba(255, 255, 255, 0.72);

    font-size: 16px;

    line-height: 1.75;

}


.why-different-content > p + p {

    margin-top: 18px;

}


/* =========================================================
   DIFFERENCE POINTS
========================================================= */

.difference-points {

    margin-top: 45px;

    border-top: 1px solid rgba(255, 255, 255, 0.14);

}


.difference-point {

    display: grid;

    grid-template-columns: 50px 1fr;

    gap: 20px;

    align-items: center;

    padding: 22px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.14);

}


.difference-point-number {

    color: var(--color-purple);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

}


.difference-point strong {

    display: block;

    color: var(--color-white);

    font-size: 18px;

    margin-bottom: 4px;

}


.difference-point span {

    color: rgba(255, 255, 255, 0.58);

    font-size: 13px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .why-different-grid {

        grid-template-columns: 1fr;

        gap: 55px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .why-different {

        padding: 80px 0;

    }


    .why-different-heading h2 {

        font-size: 45px;

    }


    .difference-points {

        margin-top: 35px;

    }

}

/* =========================================================
   WHY FIT FUN FLY — FAQ
========================================================= */

.why-faq {

    background: var(--color-off-white);

    padding: 110px 0;

}


.why-faq-grid {

    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 90px;

    align-items: start;

}


/* =========================================================
   FAQ INTRO
========================================================= */

.why-faq-intro {

    position: sticky;

    top: 120px;

}


.why-faq-intro .eyebrow {

    color: var(--color-purple);

    margin-bottom: 18px;

}


.why-faq-intro h2 {

    font-size: clamp(44px, 5vw, 64px);

    line-height: 1.03;

    letter-spacing: -2px;

    margin-bottom: 25px;

}


.why-faq-intro h2 span {

    color: var(--color-purple);

}


.why-faq-intro > p:not(.eyebrow) {

    max-width: 350px;

    color: rgba(11, 13, 18, 0.68);

    font-size: 15px;

    line-height: 1.7;

}


/* Contact button */

.faq-contact-button {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    margin-top: 30px;

    padding: 14px 20px;

    border: 1px solid var(--color-lime);

    color: var(--color-black);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.6px;

    transition: 0.3s ease;

}


.faq-contact-button span {

    font-size: 17px;

    color: var(--color-purple);

}


.faq-contact-button:hover {

    background: var(--color-lime);

}


/* =========================================================
   FAQ LIST
========================================================= */

.faq-list {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.faq-item {

    overflow: hidden;

    background: var(--color-white);

    border: 1px solid rgba(11, 13, 18, 0.07);

    border-radius: 10px;

}


.faq-item summary {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding: 23px 25px;

    cursor: pointer;

    list-style: none;

    font-size: 15px;

    font-weight: 700;

}


.faq-item summary::-webkit-details-marker {

    display: none;

}


.faq-icon {

    flex-shrink: 0;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--color-purple);

    color: var(--color-white);

    font-size: 20px;

    font-weight: 400;

}


/* Answer */

.faq-answer {

    padding: 0 25px 25px;

}


.faq-answer p {

    color: rgba(11, 13, 18, 0.67);

    font-size: 14px;

    line-height: 1.7;

}


.faq-answer p + p {

    margin-top: 14px;

}


/* =========================================================
   FAQ — OPEN STATE
========================================================= */

.faq-item[open] {

    box-shadow:
        0 12px 30px rgba(11, 13, 18, 0.07);

}


.faq-item[open] .faq-icon {

    background: var(--color-lime);

    color: var(--color-black);

}


/* =========================================================
   FAQ — TABLET
========================================================= */

@media (max-width: 850px) {

    .why-faq-grid {

        grid-template-columns: 1fr;

        gap: 55px;

    }


    .why-faq-intro {

        position: static;

    }


    .why-faq-intro > p:not(.eyebrow) {

        max-width: 600px;

    }

}


/* =========================================================
   FAQ — MOBILE
========================================================= */

@media (max-width: 600px) {

    .why-faq {

        padding: 80px 0;

    }


    .why-faq-intro h2 {

        font-size: 44px;

    }


    .faq-item summary {

        padding: 20px;

        font-size: 14px;

    }


    .faq-answer {

        padding: 0 20px 22px;

    }

}

/* =========================================================
   WHY FIT FUN FLY — MISSION / VISION / VALUES
========================================================= */

.why-mvv {

    background: var(--color-off-white);

    padding: 80px 0 110px;

}


.why-mvv-inner {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    background: var(--color-white);

    border: 1px solid rgba(11, 13, 18, 0.07);

    border-radius: 14px;

    overflow: hidden;

}


.mvv-card {

    position: relative;

    min-height: 340px;

    padding: 42px 40px;

}


.mvv-card + .mvv-card {

    border-left: 1px solid rgba(11, 13, 18, 0.10);

}


/* =========================================================
   ICON
========================================================= */

.mvv-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    margin-bottom: 27px;

    font-size: 24px;

}


.mvv-icon.lime {

    background: var(--color-lime);

    color: var(--color-black);

}


.mvv-icon.purple {

    background: var(--color-purple);

    color: var(--color-white);

}


/* =========================================================
   LABEL
========================================================= */

.mvv-card .eyebrow {

    color: var(--color-purple);

    margin-bottom: 13px;

}


/* =========================================================
   HEADING
========================================================= */

.mvv-card h3 {

    max-width: 280px;

    font-size: 30px;

    line-height: 1.08;

    letter-spacing: -0.7px;

    margin-bottom: 20px;

}


.mvv-card h3 span {

    color: var(--color-lime);

}


/* =========================================================
   TEXT
========================================================= */

.mvv-text {

    max-width: 330px;

    color: rgba(11, 13, 18, 0.67);

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .why-mvv-inner {

        grid-template-columns: 1fr;

    }


    .mvv-card {

        min-height: auto;

    }


    .mvv-card + .mvv-card {

        border-left: none;

        border-top: 1px solid rgba(11, 13, 18, 0.10);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .why-mvv {

        padding: 55px 0 80px;

    }


    .mvv-card {

        padding: 35px 27px;

    }


    .mvv-card h3 {

        font-size: 27px;

    }

}

/* =========================================================
   WHY FIT FUN FLY — FINAL CTA
========================================================= */

.why-final-cta {

    background: var(--color-off-white);

    padding: 55px 0;

}


.why-final-cta-inner {

    position: relative;

    overflow: hidden;

    padding: 70px 60px;

    border-radius: 14px;

    text-align: center;

    background:
        linear-gradient(
            110deg,
            #7f347f 0%,
            var(--color-purple) 55%,
            #a653a0 100%
        );

    color: var(--color-white);

}


/* Decorative circle */

.why-final-cta-inner::before {

    content: "";

    position: absolute;

    width: 360px;

    height: 360px;

    left: -170px;

    bottom: -220px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50%;

}


.why-final-cta-inner::after {

    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    right: -130px;

    top: -190px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50%;

}


.why-final-cta-inner > * {

    position: relative;

    z-index: 2;

}


/* Eyebrow */

.why-final-cta .eyebrow {

    color: var(--color-lime);

    margin-bottom: 15px;

}


/* Heading */

.why-final-cta h2 {

    max-width: 800px;

    margin: 0 auto 18px;

    font-size: clamp(40px, 5vw, 64px);

    line-height: 1.03;

    letter-spacing: -2px;

}


.why-final-cta h2 span {

    color: var(--color-lime);

}


/* Description */

.why-final-cta-inner > p:not(.eyebrow) {

    max-width: 580px;

    margin: 0 auto 32px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 16px;

    line-height: 1.7;

}


/* Button */

.why-final-cta .button-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

}


.why-final-cta .button-primary span {

    font-size: 18px;

}


/* =========================================================
   WHY FINAL CTA — MOBILE
========================================================= */

@media (max-width: 600px) {

    .why-final-cta {

        padding: 35px 0;

    }


    .why-final-cta-inner {

        padding: 55px 25px;

    }


    .why-final-cta h2 {

        font-size: 42px;

        letter-spacing: -1px;

    }


    .why-final-cta-inner > p:not(.eyebrow) {

        font-size: 15px;

    }


    .why-final-cta .button-primary {

        width: 100%;

    }

}

/* =========================================================
   CONTACT — HERO
========================================================= */

.contact-hero {

    position: relative;

    overflow: hidden;

    background: var(--color-black);

    color: var(--color-white);

    padding: 105px 0 100px;

}


.contact-hero::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    right: -180px;

    top: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(167, 222, 61, 0.18) 0%,
            rgba(167, 222, 61, 0.04) 48%,
            transparent 72%
        );

}


.contact-hero::after {

    content: "";

    position: absolute;

    width: 430px;

    height: 430px;

    left: -220px;

    bottom: -300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(126, 52, 126, 0.25) 0%,
            rgba(126, 52, 126, 0.05) 48%,
            transparent 72%
        );

}


.contact-hero-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

}


.contact-hero .eyebrow {

    color: var(--color-lime);

    margin-bottom: 20px;

}


.contact-hero h1 {

    max-width: 900px;

    font-size: clamp(54px, 7vw, 88px);

    line-height: 0.98;

    letter-spacing: -3px;

    margin-bottom: 30px;

}


.contact-hero h1 span {

    color: var(--color-purple);

}


.contact-hero p:not(.eyebrow) {

    max-width: 560px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 18px;

    line-height: 1.7;

}


/* =========================================================
   CONTACT — MAIN
========================================================= */

.contact-main {

    background: var(--color-off-white);

    padding: 110px 0;

}


.contact-grid {

    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    gap: 90px;

    align-items: start;

}


/* =========================================================
   CONTACT INFO
========================================================= */

.contact-info {

    padding-top: 15px;

}


.contact-info .eyebrow {

    color: var(--color-purple);

    margin-bottom: 18px;

}


.contact-info h2 {

    max-width: 520px;

    font-size: clamp(43px, 5vw, 65px);

    line-height: 1.03;

    letter-spacing: -2px;

    margin-bottom: 25px;

}


.contact-info h2 span {

    color: var(--color-purple);

}


.contact-intro {

    max-width: 470px;

    color: rgba(11, 13, 18, 0.67);

    font-size: 16px;

    line-height: 1.75;

}


/* =========================================================
   CONTACT DETAILS
========================================================= */

.contact-detail {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    margin-top: 38px;

    padding-top: 28px;

    border-top: 1px solid rgba(11, 13, 18, 0.12);

}


.contact-detail-icon {

    flex-shrink: 0;

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 20px;

}


.contact-detail-icon.lime {

    background: var(--color-lime);

    color: var(--color-black);

}


.contact-detail-icon.purple {

    background: var(--color-purple);

    color: var(--color-white);

}


.contact-detail span {

    display: block;

    margin-bottom: 7px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    color: rgba(11, 13, 18, 0.48);

}


.contact-detail a {

    color: var(--color-black);

    font-size: 17px;

    font-weight: 700;

}


.contact-detail a:hover {

    color: var(--color-purple);

}


.contact-detail p {

    max-width: 330px;

    color: rgba(11, 13, 18, 0.67);

    font-size: 14px;

    line-height: 1.65;

}


/* =========================================================
   CONTACT FORM WRAPPER
========================================================= */

.contact-form-wrapper {

    padding: 48px;

    background: var(--color-white);

    border: 1px solid rgba(11, 13, 18, 0.07);

    border-radius: 14px;

    box-shadow:
        0 18px 50px rgba(11, 13, 18, 0.06);

}


.contact-form-heading {

    margin-bottom: 35px;

}


.contact-form-heading .eyebrow {

    color: var(--color-purple);

    margin-bottom: 12px;

}


.contact-form-heading h2 {

    font-size: 39px;

    line-height: 1.05;

    letter-spacing: -1px;

    margin-bottom: 12px;

}


.contact-form-heading h2 span {

    color: var(--color-purple);

}


.contact-form-heading > p {

    color: rgba(11, 13, 18, 0.62);

    font-size: 14px;

    line-height: 1.6;

}


/* =========================================================
   FORM
========================================================= */

.contact-form {

    display: flex;

    flex-direction: column;

    gap: 22px;

}


.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

}


.form-field {

    display: flex;

    flex-direction: column;

    gap: 9px;

}


.form-field label {

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.5px;

}


.form-field label > span {

    color: var(--color-purple);

}


.form-field label small {

    margin-left: 5px;

    color: rgba(11, 13, 18, 0.42);

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 0;

}


.form-field input,
.form-field select,
.form-field textarea {

    width: 100%;

    padding: 15px 16px;

    border: 1px solid rgba(11, 13, 18, 0.13);

    border-radius: 6px;

    background: var(--color-white);

    color: var(--color-black);

    font-family: inherit;

    font-size: 14px;

    outline: none;

    transition: 0.25s ease;

}


.form-field input::placeholder,
.form-field textarea::placeholder {

    color: rgba(11, 13, 18, 0.35);

}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {

    border-color: var(--color-purple);

    box-shadow:
        0 0 0 3px rgba(126, 52, 126, 0.08);

}


.form-field textarea {

    min-height: 145px;

    resize: vertical;

}


/* =========================================================
   CONTACT METHOD NOTE
========================================================= */

.contact-method-note {

    margin-top: -8px;

    color: rgba(11, 13, 18, 0.52);

    font-size: 11px;

    line-height: 1.5;

}


/* =========================================================
   CONSENT
========================================================= */

.form-consent {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding-top: 3px;

}


.form-consent input {

    flex-shrink: 0;

    width: 16px;

    height: 16px;

    margin-top: 2px;

    accent-color: var(--color-purple);

}


.form-consent label {

    color: rgba(11, 13, 18, 0.58);

    font-size: 11px;

    line-height: 1.55;

}


.form-consent label span {

    color: var(--color-purple);

}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.contact-submit {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    width: 100%;

    padding: 17px 25px;

    border: none;

    border-radius: 0;

    background: var(--color-purple);

    color: var(--color-white);

    font-family: inherit;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.7px;

    cursor: pointer;

    transition: 0.3s ease;

}


.contact-submit span {

    font-size: 18px;

}


.contact-submit:hover {

    background: var(--color-black);

}


/* =========================================================
   FORM STATUS
========================================================= */

.form-status {

    min-height: 20px;

    font-size: 12px;

    line-height: 1.5;

}


.form-status.success {

    color: #4d7a18;

}


.form-status.error {

    color: #a33d3d;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .contact-grid {

        grid-template-columns: 1fr;

        gap: 60px;

    }


    .contact-info {

        padding-top: 0;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .contact-hero {

        padding: 80px 0;

    }


    .contact-hero h1 {

        font-size: 53px;

        letter-spacing: -2px;

    }


    .contact-main {

        padding: 80px 0;

    }


    .contact-info h2 {

        font-size: 44px;

    }


    .contact-form-wrapper {

        padding: 30px 22px;

    }


    .contact-form-heading h2 {

        font-size: 34px;

    }


    .form-row {

        grid-template-columns: 1fr;

        gap: 22px;

    }

}

/* =========================================================
   CONTACT — WHAT HAPPENS NEXT
========================================================= */

.contact-process {

    background: var(--color-white);

    padding: 105px 0;

}


.contact-process-heading {

    max-width: 700px;

    margin-bottom: 65px;

}


.contact-process-heading .eyebrow {

    color: var(--color-purple);

    margin-bottom: 18px;

}


.contact-process-heading h2 {

    font-size: clamp(44px, 5vw, 64px);

    line-height: 1.03;

    letter-spacing: -2px;

}


.contact-process-heading h2 span {

    color: var(--color-purple);

}


/* =========================================================
   PROCESS GRID
========================================================= */

.contact-process-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid rgba(11, 13, 18, 0.12);

    border-bottom: 1px solid rgba(11, 13, 18, 0.12);

}


.contact-process-step {

    position: relative;

    min-height: 275px;

    padding: 38px 35px;

}


.contact-process-step + .contact-process-step {

    border-left: 1px solid rgba(11, 13, 18, 0.12);

}


/* =========================================================
   NUMBER
========================================================= */

.process-number {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 30px;

    border-radius: 50%;

    background: var(--color-lime);

    color: var(--color-black);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.5px;

}


.contact-process-step:nth-child(2) .process-number {

    background: var(--color-purple);

    color: var(--color-white);

}


.contact-process-step:nth-child(3) .process-number {

    background: var(--color-lime);

    color: var(--color-black);

}


/* =========================================================
   STEP CONTENT
========================================================= */

.contact-process-step h3 {

    font-size: 25px;

    line-height: 1.15;

    margin-bottom: 13px;

}


.contact-process-step p {

    max-width: 300px;

    color: rgba(11, 13, 18, 0.64);

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   HOVER
========================================================= */

.contact-process-step {

    transition: background 0.3s ease;

}


.contact-process-step:hover {

    background: var(--color-off-white);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .contact-process-grid {

        grid-template-columns: 1fr;

    }


    .contact-process-step {

        min-height: auto;

        padding: 35px 28px;

    }


    .contact-process-step + .contact-process-step {

        border-left: none;

        border-top: 1px solid rgba(11, 13, 18, 0.12);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .contact-process {

        padding: 80px 0;

    }


    .contact-process-heading {

        margin-bottom: 50px;

    }


    .contact-process-heading h2 {

        font-size: 43px;

    }

}

/* =========================================================
   CONTACT — FINAL CTA
========================================================= */

.contact-final-cta {

    background: var(--color-off-white);

    padding: 55px 0 95px;

}


.contact-final-cta-inner {

    position: relative;

    overflow: hidden;

    padding: 70px 50px;

    border-radius: 14px;

    text-align: center;

    background:
        linear-gradient(
            110deg,
            #7f347f 0%,
            var(--color-purple) 55%,
            #a653a0 100%
        );

    color: var(--color-white);

}


/* Decorative circles */

.contact-final-cta-inner::before {

    content: "";

    position: absolute;

    width: 360px;

    height: 360px;

    left: -170px;

    bottom: -230px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50%;

}


.contact-final-cta-inner::after {

    content: "";

    position: absolute;

    width: 330px;

    height: 330px;

    right: -140px;

    top: -200px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50%;

}


.contact-final-cta-inner > * {

    position: relative;

    z-index: 2;

}


/* Eyebrow */

.contact-final-cta .eyebrow {

    color: var(--color-lime);

    margin-bottom: 15px;

}


/* Heading */

.contact-final-cta h2 {

    margin: 0 auto 18px;

    font-size: clamp(44px, 5vw, 68px);

    line-height: 1.02;

    letter-spacing: -2px;

}


.contact-final-cta h2 span {

    color: var(--color-lime);

}


/* Description */

.contact-final-cta-inner > p:not(.eyebrow) {

    max-width: 540px;

    margin: 0 auto 32px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 16px;

    line-height: 1.7;

}


/* Button */

.contact-final-cta .button-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

}


.contact-final-cta .button-primary span {

    font-size: 18px;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .contact-final-cta {

        padding: 35px 0 70px;

    }


    .contact-final-cta-inner {

        padding: 55px 25px;

    }


    .contact-final-cta h2 {

        font-size: 43px;

        letter-spacing: -1px;

    }


    .contact-final-cta-inner > p:not(.eyebrow) {

        font-size: 15px;

    }


    .contact-final-cta .button-primary {

        width: 100%;

    }

}
/* Contact form spam protection */
/* ==========================================================
   CONTACT FORM — HONEYPOT SPAM PROTECTION
========================================================== */

.contact-form .form-honeypot {
    position: fixed !important;
    top: -10000px !important;
    left: -10000px !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;
    z-index: -1 !important;
}
/* =========================================================
   ABOUT — DOCX CONTENT DESIGN
   Real content source: fit fun fly about.docx
========================================================= */

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.about-docx-hero {

    min-height: 560px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            135deg,
            var(--color-black) 0%,
            #17121a 55%,
            var(--color-purple) 100%
        );

    color: var(--color-white);

}


.about-docx-hero-content {

    max-width: 900px;

    padding: 95px 0;

}


.about-docx-hero .eyebrow {

    color: var(--color-lime);

    margin-bottom: 20px;

}


.about-docx-hero h1 {

    font-size: clamp(54px, 7vw, 88px);

    line-height: 0.98;

    letter-spacing: -3px;

    margin-bottom: 24px;

}


.about-docx-hero h1 span {

    color: var(--color-lime);

}


.about-docx-hero-subtitle {

    max-width: 760px;

    font-size: clamp(25px, 3vw, 40px);

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -1px;

    margin-bottom: 25px;

}


.about-docx-hero-description {

    max-width: 680px;

    color: rgba(255,255,255,0.78);

    font-size: 17px;

    line-height: 1.75;

}



/* ---------------------------------------------------------
   GENERAL ABOUT DOCUMENT CONTENT
--------------------------------------------------------- */

.about-docx-content {

    max-width: 900px;

    margin: 0 auto;

}


.about-docx-content .eyebrow,
.about-docx-section-heading .eyebrow {

    color: var(--color-purple);

    margin-bottom: 18px;

}


.about-docx-content h2,
.about-docx-section-heading h2 {

    font-size: clamp(40px, 5vw, 64px);

    line-height: 1.05;

    letter-spacing: -2px;

    margin-bottom: 38px;

}


.about-docx-content h2 span,
.about-docx-section-heading h2 span {

    color: var(--color-purple);

}


.about-docx-content p {

    max-width: 850px;

    color: rgba(11,13,18,0.76);

    font-size: 17px;

    line-height: 1.85;

    margin-bottom: 25px;

}


.about-docx-highlight {

    position: relative;

    max-width: 820px;

    margin: 35px 0 !important;

    padding: 28px 30px;

    border-left: 4px solid var(--color-lime);

    background: var(--color-white);

    color: var(--color-black) !important;

    font-size: 19px !important;

    line-height: 1.65 !important;

    font-weight: 600;

}



/* ---------------------------------------------------------
   STORY
--------------------------------------------------------- */

.about-docx-story {

    background: var(--color-off-white);

    padding: 105px 0;

}


.about-docx-story .about-docx-content {

    max-width: 920px;

}



/* ---------------------------------------------------------
   MISSION
--------------------------------------------------------- */

.about-docx-mission {

    background: var(--color-black);

    color: var(--color-white);

    padding: 105px 0;

}


.about-docx-mission .about-docx-section-heading {

    max-width: 900px;

    margin: 0 auto 45px;

}


.about-docx-mission .about-docx-section-heading .eyebrow {

    color: var(--color-lime);

}


.about-docx-mission .about-docx-section-heading h2 {

    color: var(--color-white);

}


.about-docx-mission .about-docx-section-heading h2 span {

    color: var(--color-lime);

}


.about-docx-text-block {

    max-width: 900px;

    margin: 0 auto;

}


.about-docx-text-block p {

    color: rgba(255,255,255,0.78);

    font-size: 17px;

    line-height: 1.85;

    margin-bottom: 25px;

}



/* ---------------------------------------------------------
   VISION
--------------------------------------------------------- */

.about-docx-vision {

    background: var(--color-white);

    padding: 105px 0;

}


.about-docx-vision .about-docx-section-heading {

    max-width: 900px;

    margin: 0 auto 45px;

}


.about-docx-vision .about-docx-text-block p {

    color: rgba(11,13,18,0.76);

}


/* =========================================================
   ABOUT — VISION
========================================================= */

.about-docx-vision {

    background: var(--color-off-white);

    padding: 110px 0;

}


.about-docx-vision-grid {

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    align-items: stretch;

    gap: 70px;

}


/* =========================================================
   VISION CONTENT
========================================================= */

.about-docx-vision-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 30px 0;

}


.about-docx-vision .about-docx-section-heading {

    margin-bottom: 35px;

}


.about-docx-vision .about-docx-section-heading .eyebrow {

    color: var(--color-purple);

    margin-bottom: 18px;

}


.about-docx-vision .about-docx-section-heading h2 {

    font-size: clamp(48px, 5vw, 68px);

    line-height: 1.02;

    letter-spacing: -2px;

}


.about-docx-vision .about-docx-section-heading h2 span {

    color: var(--color-lime);

}


/* =========================================================
   VISION TEXT
========================================================= */

.about-docx-vision .about-docx-text-block {

    max-width: 540px;

}


.about-docx-vision .about-docx-text-block p {

    color: rgba(11, 13, 18, 0.70);

    font-size: 16px;

    line-height: 1.75;

}


.about-docx-vision .about-docx-text-block p + p {

    margin-top: 25px;

}


/* =========================================================
   VISION IMAGE
========================================================= */

.about-docx-vision-image {

    position: relative;

    min-height: 650px;

    overflow: hidden;

    border-radius: 14px;

}


.about-docx-vision-image img {

    width: 75%;


    display: block;

    object-fit: cover;

    object-position: center;

}


/* =========================================================
   VISION — TABLET
========================================================= */

@media (max-width: 900px) {

    .about-docx-vision {

        padding: 85px 0;

    }


    .about-docx-vision-grid {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .about-docx-vision-content {

        padding: 0;

    }


    .about-docx-vision-image {

        min-height: 600px;

    }

}


/* =========================================================
   VISION — MOBILE
========================================================= */

@media (max-width: 600px) {

    .about-docx-vision {

        padding: 70px 0;

    }


    .about-docx-vision-grid {

        gap: 35px;

    }


    .about-docx-vision .about-docx-section-heading h2 {

        font-size: 45px;

    }


    .about-docx-vision .about-docx-text-block p {

        font-size: 15px;

    }


    .about-docx-vision-image {

        min-height: 520px;

        border-radius: 10px;

    }

}
/* ---------------------------------------------------------
   QUALIFICATIONS
--------------------------------------------------------- */

.about-qualifications {

    background: var(--color-off-white);

    padding: 105px 0;

}


.about-qualifications .about-docx-section-heading {

    max-width: 900px;

    margin: 0 auto 60px;

    text-align: center;

}


.qualifications-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

}


.qualification-card {

    display: flex;

    flex-direction: column;

    background: var(--color-white);

    padding: 38px 32px;

    border: 1px solid rgba(11,13,18,0.07);

    min-height: 100%;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.qualification-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 18px 40px rgba(11,13,18,0.10);

}


.qualification-card h3 {

    color: var(--color-black);

    font-size: 25px;

    line-height: 1.2;

    margin-bottom: 20px;

}


.qualification-card p {

    color: rgba(11,13,18,0.72);

    font-size: 15px;

    line-height: 1.75;

    margin-bottom: 20px;

}


.qualification-card ul {

    padding-left: 20px;

    margin: 0 0 25px;

}


.qualification-card li {

    color: rgba(11,13,18,0.76);

    font-size: 15px;

    line-height: 1.7;

    margin-bottom: 10px;

}


.qualification-card li::marker {

    color: var(--color-purple);

}



/* ---------------------------------------------------------
   CORE VALUES
--------------------------------------------------------- */

.about-core-values {

    background: var(--color-black);

    color: var(--color-white);

    padding: 105px 0;

}


.about-core-values .about-docx-section-heading {

    max-width: 900px;

    margin: 0 auto 60px;

    text-align: center;

}


.about-core-values .about-docx-section-heading .eyebrow {

    color: var(--color-lime);

}


.about-core-values .about-docx-section-heading h2 {

    color: var(--color-white);

}


.about-core-values .about-docx-section-heading h2 span {

    color: var(--color-lime);

}


.core-values-grid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    border-top: 1px solid rgba(255,255,255,0.14);

    border-bottom: 1px solid rgba(255,255,255,0.14);

}


.core-value-card {

    min-height: 290px;

    padding: 35px 27px;

    border-right: 1px solid rgba(255,255,255,0.14);

}


.core-value-card:last-child {

    border-right: none;

}


.core-value-card h3 {

    color: var(--color-white);

    font-size: 21px;

    line-height: 1.25;

    margin-bottom: 20px;

}


.core-value-card h3::before {

    content: "";

    display: block;

    width: 42px;

    height: 4px;

    margin-bottom: 28px;

    background: var(--color-lime);

}


.core-value-card:nth-child(even) h3::before {

    background: var(--color-purple);

}


.core-value-card p {

    color: rgba(255,255,255,0.68);

    font-size: 14px;

    line-height: 1.75;

}



/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 950px) {

    .qualifications-grid {

        grid-template-columns: 1fr;

    }


    .qualification-card {

        min-height: auto;

    }


    .core-values-grid {

        grid-template-columns: repeat(2, 1fr);

    }


    .core-value-card:nth-child(2) {

        border-right: none;

    }


    .core-value-card:nth-child(-n + 3) {

        border-bottom: 1px solid rgba(255,255,255,0.14);

    }

}


@media (max-width: 700px) {

    .about-docx-hero {

        min-height: auto;

    }


    .about-docx-hero-content {

        padding: 80px 0 75px;

    }


    .about-docx-hero h1 {

        font-size: 52px;

        letter-spacing: -1.5px;

    }


    .about-docx-hero-subtitle {

        font-size: 27px;

    }


    .about-docx-hero-description {

        font-size: 16px;

    }


    .about-docx-story,
    .about-docx-mission,
    .about-docx-vision,
    .about-qualifications,
    .about-core-values {

        padding: 80px 0;

    }


    .about-docx-content h2,
    .about-docx-section-heading h2 {

        font-size: 43px;

    }


    .about-docx-content p,
    .about-docx-text-block p {

        font-size: 16px;

    }


    .about-docx-highlight {

        padding: 22px 20px;

        font-size: 17px !important;

    }


    .core-values-grid {

        grid-template-columns: 1fr;

    }


    .core-value-card {

        min-height: auto;

        padding: 32px 25px 38px;

        border-right: none;

        border-bottom: 1px solid rgba(255,255,255,0.14);

    }


    .core-value-card:nth-child(2) {

        border-right: none;

    }


    .core-value-card:last-child {

        border-bottom: none;

    }

}

/* =========================================================
   SERVICES — DOCX CONTENT
========================================================= */

.services-info {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(11, 13, 18, 0.10);
}

.services-info p {
    margin: 0 0 7px;
    color: rgba(11, 13, 18, 0.68);
    font-size: 13px;
    line-height: 1.5;
}

.services-info strong {
    color: var(--color-black);
}

.service-benefits-title {
    margin: 4px 0 10px !important;
    color: var(--color-purple) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.service-detail-body > p + .service-benefits-title {
    margin-top: 4px;
}

@media (max-width: 650px) {

    .services-info {
        margin-top: 20px;
        padding-top: 17px;
    }

    .services-info p {
        font-size: 12px;
    }

}

/* =========================================================
   SERVICES — DOCX CONTENT
========================================================= */

.services-session-info {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-top: 22px;

    padding-top: 20px;

    border-top: 1px solid rgba(11, 13, 18, 0.10);

    color: rgba(11, 13, 18, 0.70);

    font-size: 13px;

    line-height: 1.5;

}


.services-session-info strong {

    color: var(--color-black);

}


.service-benefits-title {

    margin-top: 5px;

    margin-bottom: 8px !important;

    color: var(--color-purple) !important;

    font-size: 10px !important;

    font-weight: 800;

    letter-spacing: 1px;

}


.service-detail-body ul {

    margin-bottom: 0;

}


@media (max-width: 650px) {

    .services-session-info {

        font-size: 12px;

    }

}
/* =========================================================
   SERVICES — TEXT ONLY CARDS
========================================================= */

.services-cards {
    align-items: start;
}

.service-detail-card {
    display: block;
    min-height: 0;
    height: auto;
}

.service-detail-body {
    padding: 42px 40px 40px;
}

.service-detail-body h3 {
    margin-bottom: 13px;
}

.service-detail-body > p {
    margin-bottom: 18px;
}

.service-detail-body ul {
    margin-bottom: 0;
}

@media (max-width: 650px) {

    .service-detail-card {
        min-height: 0;
    }

    .service-detail-body {
        padding: 32px 25px 35px;
    }

}


/* =========================================================
   SERVICES FINAL CTA — FIX
========================================================= */

.services-final-cta-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 50px;
    padding: 55px 60px;
    min-height: 300px;
    overflow: hidden;
}

/* Icon sits independently on the left */

.services-final-cta-icon {
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;

    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}

/* Main content */

.services-final-cta-content {
    position: relative;
    z-index: 2;

    max-width: 760px;
    padding-left: 100px;
}

.services-final-cta-content .eyebrow {
    margin-bottom: 12px;
}

.services-final-cta-content h2 {
    max-width: 700px;
    margin-bottom: 15px;

    font-size: clamp(38px, 4vw, 54px);
    line-height: 1.05;
    letter-spacing: -1.5px;
}

.services-final-cta-content p {
    max-width: 560px;

    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.6;
}

/* Button */

.services-final-cta-action {
    position: relative;
    z-index: 3;
}

.services-final-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    padding: 17px 25px;

    white-space: nowrap;
}

/* =========================================================
   SERVICES CTA — MOBILE FIX
========================================================= */

@media (max-width: 800px) {

    .services-final-cta-inner {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 45px 30px;
    }

    .services-final-cta-icon {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
    }

    .services-final-cta-content {
        padding-left: 0;
        max-width: none;
    }

    .services-final-cta-content h2 {
        font-size: 39px;
    }

    .services-final-cta-content p {
        max-width: none;
    }

    .services-final-cta-button {
        width: 100%;
    }

}
/* =========================================================
   WHY FIT FUN FLY — DOCUMENT CONTENT
========================================================= */

.why-docx-section {

    padding: 105px 0;

    background: var(--color-off-white);

}


.why-docx-section:nth-of-type(even) {

    background: var(--color-white);

}


/* =========================================================
   WHY HERO — TEXT ONLY
========================================================= */

.why-docx-hero {

    min-height: 680px;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            110deg,
            #0b0d12 0%,
            #17121b 55%,
            #24172a 100%
        );

    color: var(--color-white);

}


.why-docx-hero-content {

    max-width: 760px;

    padding: 100px 0;

}


.why-docx-hero .eyebrow {

    color: var(--color-lime);

    margin-bottom: 20px;

}


.why-docx-hero h1 {

    font-size: clamp(48px, 6vw, 78px);

    line-height: 1.02;

    letter-spacing: -2.5px;

    margin-bottom: 25px;

}


.why-docx-hero h1 span {

    color: var(--color-lime);

}


.why-docx-hero-subtitle {

    max-width: 650px;

    margin-bottom: 20px;

    color: rgba(255,255,255,0.92);

    font-size: 23px;

    line-height: 1.4;

    font-weight: 500;

}


.why-docx-hero-description {

    max-width: 620px;

    margin-bottom: 35px;

    color: rgba(255,255,255,0.68);

    font-size: 16px;

    line-height: 1.75;

}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.why-docx-section-heading {

    max-width: 850px;

    margin-bottom: 45px;

}


.why-docx-section-heading .eyebrow {

    color: var(--color-purple);

    margin-bottom: 16px;

}


.why-docx-section-heading h2 {

    font-size: clamp(38px, 5vw, 62px);

    line-height: 1.06;

    letter-spacing: -2px;

}


.why-docx-section-heading h2 span {

    color: var(--color-lime);

}


/* =========================================================
   MISSION / VISION TEXT
========================================================= */

.why-docx-text {

    max-width: 850px;

}


.why-docx-text p {

    color: rgba(11,13,18,0.70);

    font-size: 16px;

    line-height: 1.85;

}


.why-docx-text p + p {

    margin-top: 22px;

}


.why-mission {

    background: var(--color-off-white);

}


.why-vision {

    background: var(--color-white);

}


/* =========================================================
   VALUES
========================================================= */

.why-docx-values {

    padding: 110px 0;

    background: var(--color-off-white);

}


.why-values-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;

}


.why-value-card {

    position: relative;

    min-height: 270px;

    padding: 35px 32px;

    background: var(--color-white);

    border: 1px solid rgba(11,13,18,0.07);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.why-value-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 18px 45px rgba(11,13,18,0.10);

}


.why-value-number {

    margin-bottom: 28px;

    color: var(--color-purple);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

}


.why-value-card h3 {

    margin-bottom: 14px;

    font-size: 24px;

    line-height: 1.2;

}


.why-value-card p {

    color: rgba(11,13,18,0.66);

    font-size: 14px;

    line-height: 1.7;

}


/* alternating accent */

.why-value-card:nth-child(odd) {

    border-top: 3px solid var(--color-lime);

}


.why-value-card:nth-child(even) {

    border-top: 3px solid var(--color-purple);

}


/* =========================================================
   PHILOSOPHY
========================================================= */

.why-docx-philosophy {

    padding: 105px 0;

    background: var(--color-black);

    color: var(--color-white);

}


.why-philosophy-inner {

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 80px;

    align-items: center;

}


.why-docx-philosophy
.why-docx-section-heading {

    margin-bottom: 0;

}


.why-docx-philosophy
.why-docx-section-heading .eyebrow {

    color: var(--color-lime);

}


.why-docx-philosophy
.why-docx-section-heading h2 {

    color: var(--color-white);

}


.why-docx-philosophy
.why-docx-section-heading h2 span {

    color: var(--color-lime);

}


.why-philosophy-content {

    max-width: 650px;

    padding-left: 45px;

    border-left: 1px solid rgba(255,255,255,0.18);

}


.why-philosophy-content p {

    color: rgba(255,255,255,0.70);

    font-size: 16px;

    line-height: 1.8;

}


.why-philosophy-content p + p {

    margin-top: 22px;

}


.why-philosophy-content .philosophy-lead {

    color: var(--color-white);

    font-size: 25px;

    line-height: 1.4;

    font-weight: 500;

}


/* =========================================================
   WHY FAQ — KEEP EXISTING FAQ STYLING
========================================================= */

.why-docx-faq {

    background: var(--color-white);

}


/* =========================================================
   FINAL CTA TEXT
========================================================= */

.why-docx-final-cta
.why-final-cta-text {

    color: rgba(255,255,255,0.78);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .why-values-grid {

        grid-template-columns: repeat(2, 1fr);

    }


    .why-philosophy-inner {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .why-philosophy-content {

        padding-left: 30px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .why-docx-section {

        padding: 75px 0;

    }


    .why-docx-hero {

        min-height: 650px;

    }


    .why-docx-hero-content {

        padding: 75px 0 60px;

    }


    .why-docx-hero h1 {

        font-size: 47px;

        letter-spacing: -1.5px;

    }


    .why-docx-hero-subtitle {

        font-size: 20px;

    }


    .why-docx-hero-description {

        font-size: 15px;

    }


    .why-docx-section-heading {

        margin-bottom: 32px;

    }


    .why-docx-section-heading h2 {

        font-size: 40px;

        letter-spacing: -1px;

    }


    .why-docx-text p {

        font-size: 15px;

        line-height: 1.75;

    }


    .why-docx-values {

        padding: 75px 0;

    }


    .why-values-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }


    .why-value-card {

        min-height: auto;

        padding: 30px 27px;

    }


    .why-docx-philosophy {

        padding: 75px 0;

    }


    .why-philosophy-content {

        padding-left: 22px;

    }


    .why-philosophy-content .philosophy-lead {

        font-size: 21px;

    }

}
/* =========================================================
   SERVICES — CONTENT BASED CARDS
========================================================= */

.service-detail-card {
    min-height: 0;
    height: auto;
    align-items: stretch;
}

.service-detail-image {
    min-height: 0;
    height: auto;
}

.service-detail-image img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
}

.service-detail-body {
    padding: 38px 34px;
    min-height: 0;
}

.service-detail-body > p {
    margin-bottom: 18px;
}

.service-benefits-title {
    margin: 2px 0 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.service-detail-body ul {
    margin-bottom: 0;
}
@media (min-width: 1001px) {

    .service-detail-card {
        min-height: 520px;
    }

    .service-detail-image {
        min-height: 520px;
    }

}
@media (max-width: 650px) {

    .service-detail-card {
        min-height: 0;
    }

    .service-detail-image {
        height: 300px;
        min-height: 300px;
    }

    .service-detail-image img {
        height: 300px;
        min-height: 300px;
    }

    .service-detail-body {
        padding: 30px 25px 32px;
    }

}
/* =========================================================
   SERVICES — FINAL CARD FIX
========================================================= */

.services-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}


/* CARD */

.service-detail-card {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;

    height: 100%;
    min-height: 0;

    overflow: hidden;

    background: var(--color-white);
    border: 1px solid rgba(11, 13, 18, 0.07);
}


/* IMAGE */

.service-detail-image {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: 0;

    overflow: hidden;

    background: transparent;
}


/* IMPORTANT:
   Make image fill the entire image column.
*/

.service-detail-image img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


/* CONTENT */

.service-detail-body {
    min-width: 0;
    min-height: 0;

    padding: 38px 34px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


/* BENEFITS TITLE */

.service-benefits-title {
    margin: 2px 0 12px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
}


/* LIST */

.service-detail-body ul {
    margin: 0;
}


/* =========================================================
   SERVICES — TABLET
========================================================= */

@media (max-width: 1000px) {

    .services-cards {
        grid-template-columns: 1fr;
    }

    .service-detail-card {
        grid-template-columns: 0.9fr 1.1fr;
    }

}


/* =========================================================
   SERVICES — MOBILE
========================================================= */

@media (max-width: 650px) {

    .services-cards {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .service-detail-card {
        display: grid;
        grid-template-columns: 1fr;
        height: auto;
    }

    .service-detail-image {
        position: relative;

        width: 100%;
        height: 300px;
        min-height: 300px;
    }

    .service-detail-image img {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 300px;

        object-fit: cover;
    }

    .service-detail-body {
        padding: 30px 25px 32px;
    }

}
/* =========================================================
   SERVICES — FINAL VISUAL FIX
========================================================= */

/* Anchor links should leave breathing room above the card */
.service-detail-card {
    scroll-margin-top: 110px;
}


/* Keep image and content perfectly aligned */
.service-detail-card {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    align-items: stretch;
}


/* Image column */
.service-detail-image {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}


/* Image fills the complete column */
.service-detail-image img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


/* Content */
.service-detail-body {
    min-width: 0;
    min-height: 0;
    height: 100%;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .service-detail-card {
        grid-template-columns: 1fr;
        scroll-margin-top: 90px;
    }

    .service-detail-image {
        height: 300px;
        min-height: 300px;
    }

    .service-detail-image img {
        height: 300px;
    }

    .service-detail-body {
        height: auto;
    }

}
/* =========================================================
   SERVICES CARDS — FINAL LAYOUT
========================================================= */

.services-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}

.service-detail-card {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    align-items: stretch;

    min-height: 0;
    height: auto;

    overflow: hidden;
    background: var(--color-white);
}


/* IMAGE */

.service-detail-image {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: 0;

    overflow: hidden;
}

.service-detail-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
}


/* CONTENT */

.service-detail-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    box-sizing: border-box;

    width: 100%;
    min-width: 0;
    height: auto;

    padding: 42px 34px;
}


/* Remove artificial spacing */

.service-detail-body > p {
    margin-bottom: 18px;
}

.service-detail-body ul {
    margin-bottom: 0;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 1000px) {

    .services-cards {
        grid-template-columns: 1fr;
    }

    .service-detail-card {
        grid-template-columns: 0.9fr 1.1fr;
    }

}


@media (max-width: 650px) {

    .services-cards {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .service-detail-card {
        grid-template-columns: 1fr;
    }

    .service-detail-image {
        height: 300px;
        min-height: 300px;
    }

    .service-detail-image img {
        height: 300px;
    }

    .service-detail-body {
        height: auto;
        padding: 30px 25px 32px;
    }

}
.service-detail-card {
    scroll-margin-top: 120px;
}
/* =========================================================
   SERVICES CARDS — 3 COLUMN IMAGE TOP / CONTENT BOTTOM
========================================================= */

.services-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}


/* CARD */

.service-detail-card {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: auto;
    min-height: 0;

    overflow: hidden;

    background: var(--color-white);

    border: 1px solid rgba(11, 13, 18, 0.07);
    border-radius: 14px;
}


/* IMAGE */

.service-detail-image {
    position: relative;

    width: 100%;
    height: 255px;
    min-height: 255px;

    overflow: hidden;

    flex-shrink: 0;
}


.service-detail-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    margin: 0;
}


/* CONTENT */

.service-detail-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    flex: 1;

    width: 100%;
    min-width: 0;
    box-sizing: border-box;

    padding: 28px 30px 32px;
}


/* ICON */

.service-detail-icon {
    width: 60px;
    height: 60px;

    flex-shrink: 0;

    margin-bottom: 20px;
}


/* TITLE */

.service-detail-body h3 {
    font-size: 27px;
    line-height: 1.12;

    margin-bottom: 12px;
}


/* ACCENT */

.service-accent {
    width: 45px;
    height: 3px;

    margin-bottom: 18px;
}


/* DESCRIPTION */

.service-detail-body > p {
    font-size: 14px;
    line-height: 1.65;

    margin-bottom: 18px;
}


/* BENEFITS */

.service-detail-body ul {
    display: flex;
    flex-direction: column;

    gap: 8px;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* Remove forced bottom positioning */

.service-detail-link {
    margin-top: 20px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .services-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .services-cards {
        grid-template-columns: 1fr;
        gap: 22px;
    }


    .service-detail-image {
        height: 260px;
        min-height: 260px;
    }


    .service-detail-body {
        padding: 28px 25px 32px;
    }

}
/* =========================================================
   YOUR SESSION — PREMIUM LAYOUT
========================================================= */

.session-section {
    background: var(--color-off-white);
    padding: 110px 0;
}

.session-section .community-inner {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 75px;
}

/* Left content */

.session-section .community-content {
    max-width: 560px;
}

.session-section .eyebrow {
    display: inline-block;
    margin-bottom: 20px;
    padding: 5px 9px;
    background: var(--color-soft-purple);
    color: var(--color-purple);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.session-section h2 {
    max-width: 520px;
    margin-bottom: 30px;
    font-size: clamp(44px, 5vw, 68px);
    line-height: 1.02;
    letter-spacing: -2px;
}

.session-section .community-content > p {
    max-width: 500px;
    margin-bottom: 18px;
    color: rgba(11, 13, 18, 0.72);
    font-size: 16px;
    line-height: 1.75;
}

.session-section .session-highlight {
    margin: 38px 0 35px;
    padding: 25px 28px;
    border-left: 3px solid var(--color-lime);
    background: rgba(255, 255, 255, 0.55);
}

.session-section .session-highlight .eyebrow {
    padding: 0;
    margin-bottom: 13px;
    background: transparent;
}

.session-section .session-highlight p {
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(11, 13, 18, 0.72);
}

.session-section .session-highlight p:last-child {
    margin-bottom: 0;
}

/* Premium CTA button */

.session-section .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 175px;
    padding: 15px 25px;
    background: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-black);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.session-section .btn-primary:hover {
    background: var(--color-lime);
    border-color: var(--color-lime);
    color: var(--color-black);
    transform: translateY(-2px);
}

/* Image */

.session-section .session-visual {
    width: 100%;
    overflow: hidden;
}

.session-section .session-visual img {
    width: 100%;
    height: 620px;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s ease;
}

.session-section .session-visual:hover img {
    transform: scale(1.02);
}

/* Tablet */

@media (max-width: 900px) {

    .session-section {
        padding: 80px 0;
    }

    .session-section .community-inner {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .session-section .community-content {
        max-width: 700px;
    }

    .session-section .session-visual {
        order: -1;
    }

    .session-section .session-visual img {
        height: 520px;
    }
}

/* Mobile */

@media (max-width: 600px) {

    .session-section {
        padding: 65px 0;
    }

    .session-section .community-inner {
        gap: 38px;
    }

    .session-section h2 {
        font-size: 43px;
        letter-spacing: -1.2px;
        margin-bottom: 24px;
    }

    .session-section .community-content > p {
        font-size: 15px;
        line-height: 1.7;
    }

    .session-section .session-highlight {
        margin: 30px 0;
        padding: 22px 20px;
    }

    .session-section .btn-primary {
        width: 100%;
        min-width: 0;
    }

    .session-section .session-visual img {
        height: 430px;
    }
}


/* YOUR SESSION — SHOW FULL IMAGE */
.session-section .session-visual img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 900px) {
    .session-section .session-visual img {
        height: auto;
    }
}

@media (max-width: 600px) {
    .session-section .session-visual img {
        height: auto;
    }
}


/* =========================================================
   YOUR SESSION — STICKY IMAGE
========================================================= */

.session-section .community-inner {
    align-items: start;
}

.session-section .session-visual {
    position: sticky;
    top: 0;
    align-self: start;
}

@media (max-width: 900px) {
    .session-section .session-visual {
        position: relative;
        top: auto;
    }
}


/* YOUR SESSION — STICKY SAFE ZONE */
@media (min-width: 901px) {
    .session-section .session-visual {
        top: 80px;
    }
}


/* =========================================================
   HOME FINAL CTA — AWARENESS
========================================================= */

.final-cta {
    background: var(--color-white);
    padding: 85px 0 110px;
}

.final-cta-inner {
    position: relative;
    display: grid;
    grid-template-columns: 70px 1fr auto;
    align-items: center;
    gap: 35px;
    padding: 55px 60px;
    background: var(--color-black);
    color: var(--color-white);
    overflow: hidden;
}

/* Decorative lime circle */

.final-cta-inner::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -120px;
    top: -170px;
    border: 1px solid rgba(152, 184, 42, 0.35);
    border-radius: 50%;
}

/* Decorative purple circle */

.final-cta-inner::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    left: -130px;
    bottom: -150px;
    border: 1px solid rgba(143, 64, 144, 0.45);
    border-radius: 50%;
}

/* Icon */

.final-cta-icon {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-lime);
    color: var(--color-lime);
    font-size: 25px;
}

/* Content */

.final-cta-content {
    position: relative;
    z-index: 2;
}

.final-cta-content .eyebrow {
    color: var(--color-lime);
    margin-bottom: 13px;
}

.final-cta-content h2 {
    max-width: 700px;
    margin-bottom: 15px;
    font-size: clamp(38px, 4.5vw, 60px);
    line-height: 1.04;
    letter-spacing: -1.8px;
}

.final-cta-content h2 span {
    color: var(--color-lime);
}

.final-cta-content > p {
    max-width: 570px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    line-height: 1.7;
}

/* Button */

.final-cta-action {
    position: relative;
    z-index: 2;
}

.final-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-width: 175px;
    padding: 16px 24px;
    background: var(--color-lime);
    color: var(--color-black);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.final-cta-button span {
    font-size: 17px;
    transition: transform 0.3s ease;
}

.final-cta-button:hover {
    background: var(--color-white);
    transform: translateY(-2px);
}

.final-cta-button:hover span {
    transform: translateX(4px);
}

/* Tablet */

@media (max-width: 900px) {

    .final-cta {
        padding: 70px 0 90px;
    }

    .final-cta-inner {
        grid-template-columns: 55px 1fr;
        gap: 25px;
        padding: 45px 40px;
    }

    .final-cta-action {
        grid-column: 2;
    }

}

/* Mobile */

@media (max-width: 600px) {

    .final-cta {
        padding: 55px 0 75px;
    }

    .final-cta-inner {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 40px 25px;
    }

    .final-cta-icon {
        width: 50px;
        height: 50px;
    }

    .final-cta-content h2 {
        font-size: 40px;
        letter-spacing: -1px;
    }

    .final-cta-content > p {
        font-size: 15px;
    }

    .final-cta-action {
        grid-column: auto;
    }

    .final-cta-button {
        width: 100%;
    }

}


/* MY STORY - align content with page container */

.about-docx-story .about-docx-content {
    max-width: 920px;
    margin: 0 auto;
}


/* MY STORY - wider body text */

.about-docx-story .about-docx-content p {
    max-width: 1050px;
}


/* MY STORY - SECTION VISUAL HIERARCHY */

.about-story-extra {
    padding: 100px 0;
    background: var(--color-off-white);
}

.about-story-extra .about-docx-content {
    max-width: 1050px;
}

.about-story-extra h2 {
    margin-bottom: 35px;
}

/* Approach */
.about-story-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 50px;
}

.about-story-pillars > div {
    padding: 32px;
    background: var(--color-white);
    border: 1px solid rgba(11,13,18,0.08);
}

.about-story-pillars h3 {
    margin: 14px 0 10px;
}

/* Qualifications */
.about-story-alt {
    background: var(--color-white);
}

.about-story-alt .about-docx-content {
    max-width: 950px;
}

/* Values */
.about-story-values {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 45px;
}

.about-story-values > div {
    padding: 30px;
    background: var(--color-off-white);
    border: 1px solid rgba(11,13,18,0.08);
}

.about-story-values h3 {
    margin: 0 0 10px;
}

.about-story-values p {
    margin-bottom: 0 !important;
}

/* Final Journey */
.about-story-journey {
    background: var(--color-black);
    color: var(--color-white);
    text-align: center;
}

.about-story-journey .about-docx-content {
    max-width: 850px;
}

.about-story-journey h2 {
    color: var(--color-white);
}

.about-story-journey h2 span {
    color: var(--color-lime);
}

.about-story-journey p {
    color: rgba(255,255,255,0.78);
}

.about-story-journey .eyebrow {
    color: var(--color-lime);
}

.about-story-journey .btn {
    margin-top: 20px;
}

/* Mobile */
@media (max-width: 800px) {
    .about-story-extra {
        padding: 70px 0;
    }

    .about-story-pillars,
    .about-story-values {
        grid-template-columns: 1fr;
    }
}

/* RECONNECT PAGE */

.reconnect-pillars {
    padding: 100px 0;
    background: var(--color-black);
    color: var(--color-white);
}

.reconnect-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.reconnect-pillar {
    padding: 40px 32px;
    border: 1px solid rgba(255,255,255,0.16);
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.reconnect-pillar .eyebrow {
    color: var(--color-lime);
    margin-bottom: 18px;
}

.reconnect-pillar h3 {
    color: var(--color-white);
    font-size: 24px;
    line-height: 1.35;
    margin: 0;
}

.reconnect-closing {
    background: var(--color-off-white);
    text-align: center;
}

.reconnect-closing .about-docx-content {
    max-width: 900px;
}

.reconnect-closing .about-docx-content p:last-child {
    font-size: 20px;
    line-height: 1.7;
}

@media (max-width: 800px) {

    .reconnect-pillars {
        padding: 70px 0;
    }

    .reconnect-pillars-grid {
        grid-template-columns: 1fr;
    }

    .reconnect-pillar {
        min-height: 180px;
    }

    .reconnect-closing .about-docx-content p:last-child {
        font-size: 18px;
    }
}
/* =========================================================
   RECONNECT — HERO FIX
========================================================= */

.reconnect-pillars {
    padding: 105px 0;
    background: var(--color-black);
    color: var(--color-white);
}

.reconnect-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.reconnect-pillar {
    min-height: 230px;
    padding: 36px 30px;
    border: 1px solid rgba(255,255,255,0.15);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.reconnect-pillar .eyebrow {
    color: var(--color-lime);
    margin-bottom: 16px;
}

.reconnect-pillar h3 {
    color: var(--color-white);
    font-size: 24px;
    line-height: 1.35;
    margin: 0;
}

.reconnect-closing {
    background: var(--color-white);
    text-align: center;
}

.reconnect-closing .about-docx-content {
    max-width: 900px;
}

.reconnect-closing .about-docx-content p:last-child {
    font-size: 20px;
    line-height: 1.7;
}


/* Reconnect hero */

.reconnect-page-hero {
    position: relative;
}

.reconnect-page-hero h1 {
    max-width: 800px;
}


/* Mobile */

@media (max-width: 800px) {

    .reconnect-pillars {
        padding: 75px 0;
    }

    .reconnect-pillars-grid {
        grid-template-columns: 1fr;
    }

    .reconnect-pillar {
        min-height: 190px;
    }

    .reconnect-closing .about-docx-content p:last-child {
        font-size: 18px;
    }
}
/* RECONNECT HERO - CONTENT ALIGNMENT */

.reconnect-page-hero .about-hero-content {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.reconnect-page-hero .about-hero-content .eyebrow {
    margin-bottom: 20px;
}

.reconnect-page-hero .about-hero-content h1 {
    max-width: 800px;
    margin-bottom: 28px;
}

.reconnect-page-hero .about-hero-content > p {
    max-width: 540px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
    line-height: 1.7;
}
/* RECONNECT - CLOSING SECTION */

.reconnect-closing {
    padding: 85px 0;
}

.reconnect-closing .about-docx-content p {
    margin-bottom: 24px;
}

.reconnect-closing .about-docx-content p:last-child {
    max-width: 850px;
    margin: 35px auto 0;
    font-size: 21px;
    line-height: 1.65;
}