/* ========================================
   GLOBAL
======================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #17324d;
    background-color: #ffffff;
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}


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

.header {
    background-color: #ffffff;
    border-bottom: 1px solid #e8edf1;
}

.navbar {
    height: 100px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* Brand */

.brand-name {
    font-size: 24px;
    font-weight: 700;

    color: #164f63;

    line-height: 1.1;
}

.brand-subtitle {
    margin-top: 5px;

    font-size: 10px;
    letter-spacing: 3px;

    color: #70838c;
}


/* Desktop Navigation */

.nav-links {
    display: flex;
    align-items: center;

    gap: 34px;
}

.nav-links a {
    text-decoration: none;

    color: #304b59;

    font-size: 15px;
    font-weight: 500;

    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: #16859a;
}


/* Contact Button */

.contact-button {
    padding: 11px 22px;

    background-color: #176c7e;
    color: #ffffff;

    text-decoration: none;

    border-radius: 5px;

    font-size: 14px;
    font-weight: 500;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.contact-button:hover {
    background-color: #125c6c;
    transform: translateY(-1px);
}


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

.hero {
    background-color: #f4f8f8;

    padding: 90px 0;
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 70px;
}


/* Hero Text */

.hero-text {
    width: 52%;
}

.hero-label {
    margin-bottom: 20px;

    color: #16859a;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.8px;
}

.hero h1 {
    margin-bottom: 25px;

    color: #173f50;

    font-size: 54px;
    font-weight: 700;

    line-height: 1.12;
}

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

    margin-bottom: 35px;

    color: #5b7079;

    font-size: 18px;

    line-height: 1.75;
}


/* Hero Buttons */

.hero-buttons {
    display: flex;

    gap: 15px;
}

.primary-button,
.secondary-button {
    display: inline-block;

    padding: 13px 25px;

    border-radius: 5px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.primary-button {
    background-color: #176c7e;
    color: #ffffff;
}

.primary-button:hover {
    background-color: #125c6c;
    transform: translateY(-2px);
}

.secondary-button {
    border: 1px solid #176c7e;

    color: #176c7e;

    background-color: transparent;
}

.secondary-button:hover {
    background-color: #176c7e;
    color: #ffffff;

    transform: translateY(-2px);
}


/* Hero Image */

.hero-image {
    width: 48%;
}

.hero-photo {
    display: block;

    width: 100%;
    height: 430px;

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

    border-radius: 12px;
}


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

.section-heading {
    max-width: 700px;

    margin-bottom: 55px;
}

.section-label {
    margin-bottom: 15px;

    color: #16859a;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.8px;
}

.section-heading h2,
.about-text h2,
.support-text h2 {
    margin-bottom: 20px;

    color: #173f50;

    font-size: 40px;

    line-height: 1.2;
}

.section-heading p,
.about-text p,
.support-text p {
    color: #5b7079;

    font-size: 17px;

    line-height: 1.75;
}


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

.services {
    padding: 100px 0;

    background-color: #ffffff;
}

.services-grid {
    display: grid;

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

    gap: 24px;
}

.service-card {
    padding: 38px;

    background-color: #ffffff;

    border: 1px solid #e1e9eb;
    border-radius: 10px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.service-card:hover {
    transform: translateY(-4px);

    box-shadow: 0 12px 30px rgba(23, 63, 80, 0.08);
}

.service-number {
    margin-bottom: 20px;

    color: #16859a;

    font-size: 13px;
    font-weight: 700;
}

.service-card h3 {
    margin-bottom: 12px;

    color: #173f50;

    font-size: 21px;
}

.service-card p {
    color: #647982;

    font-size: 15px;

    line-height: 1.7;
}


/* ========================================
   WHO WE SUPPORT
======================================== */

.support-section {
    padding: 100px 0;

    background-color: #f4f8f8;
}

.support-content {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;
}

.support-list {
    display: flex;
    flex-direction: column;
}

.support-item {
    display: flex;

    gap: 25px;

    padding: 25px 0;

    border-bottom: 1px solid #dbe5e7;
}

.support-item:first-child {
    padding-top: 0;
}

.support-item span {
    color: #16859a;

    font-size: 13px;
    font-weight: 700;
}

.support-item h3 {
    margin-bottom: 7px;

    color: #173f50;

    font-size: 20px;
}

.support-item p {
    color: #647982;

    font-size: 15px;

    line-height: 1.7;
}


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

.about {
    padding: 110px 0;

    background-color: #ffffff;
}

.about-content {
    display: flex;

    align-items: center;

    gap: 80px;
}

.about-image,
.about-text {
    width: 50%;
}

.about-placeholder {
    height: 460px;

    background-color: #dce8e9;

    border-radius: 12px;

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

    color: #70838c;

    font-size: 14px;
}

.about-text p {
    margin-bottom: 18px;
}


/* ========================================
   FOR REFERRERS
======================================== */

.referrers {
    padding: 100px 0;

    background-color: #174f61;
}

.referrer-content {
    max-width: 800px;
}

.light-label {
    color: #78c5d1;
}

.referrers h2 {
    max-width: 650px;

    margin-bottom: 25px;

    color: #ffffff;

    font-size: 44px;

    line-height: 1.2;
}

.referrers p {
    max-width: 750px;

    margin-bottom: 35px;

    color: #d6e5e9;

    font-size: 17px;

    line-height: 1.8;
}

.light-button {
    display: inline-block;

    padding: 13px 24px;

    background-color: #ffffff;
    color: #174f61;

    text-decoration: none;

    border-radius: 5px;

    font-weight: 600;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}

.light-button:hover {
    background-color: #edf5f6;

    transform: translateY(-2px);
}


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

.contact-section {
    padding: 100px 0;

    background-color: #ffffff;
}

.contact-grid {
    display: grid;

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

    gap: 25px;
}

.contact-item {
    padding: 30px 0;

    border-top: 2px solid #176c7e;
}

.contact-label {
    margin-bottom: 10px;

    color: #16859a;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.6px;
}

.contact-item h3 {
    color: #173f50;

    font-size: 18px;
    font-weight: 600;

    word-break: break-word;
}


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

.footer {
    padding: 60px 0 25px;

    background-color: #102f3a;

    color: #ffffff;
}

.footer-content {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    padding-bottom: 45px;
}

.footer-brand {
    font-size: 25px;
    font-weight: 700;
}

.footer-subtitle {
    margin-top: 4px;

    color: #a9bdc4;

    font-size: 9px;

    letter-spacing: 3px;
}

.footer-description {
    margin-top: 20px;

    color: #9db2ba;

    font-size: 14px;
}

.footer-links {
    display: flex;

    gap: 30px;
}

.footer-links a {
    color: #d9e4e7;

    text-decoration: none;

    font-size: 14px;

    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #ffffff;
}

.footer-bottom {
    padding-top: 22px;

    border-top: 1px solid #31505b;
}

.footer-bottom p {
    color: #829ca5;

    font-size: 12px;
}


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

@media (max-width: 1000px) {

    .nav-links {
        gap: 20px;
    }

    .hero h1 {
        font-size: 46px;
    }

    .hero-content {
        gap: 45px;
    }

    .about-content {
        gap: 50px;
    }

    .support-content {
        gap: 55px;
    }
}


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

@media (max-width: 800px) {

    .container {
        width: 88%;
    }


    /* Header */

    .navbar {
        height: 78px;
    }

    .nav-links {
        display: none;
    }

    .brand-name {
        font-size: 21px;
    }

    .brand-subtitle {
        font-size: 8px;

        letter-spacing: 2.5px;
    }

    .contact-button {
        padding: 10px 16px;

        font-size: 13px;
    }


    /* Hero */

    .hero {
        padding: 50px 0;
    }

    .hero-content {
        flex-direction: column;

        gap: 35px;
    }

    .hero-text,
    .hero-image {
        width: 100%;
    }

    .hero-label {
        margin-bottom: 18px;

        font-size: 10px;

        line-height: 1.5;

        letter-spacing: 1.3px;
    }

    .hero h1 {
        margin-bottom: 22px;

        font-size: 31px;

        line-height: 1.15;
    }

    .hero-description {
        margin-bottom: 26px;

        font-size: 15px;

        line-height: 1.65;
    }

    .hero-buttons {
        gap: 10px;
    }

    .primary-button,
    .secondary-button {
        padding: 11px 16px;

        font-size: 13px;
    }

    .hero-photo {
        height: 260px;
    }


    /* Shared Sections */

    .services,
    .support-section,
    .about,
    .referrers,
    .contact-section {
        padding: 70px 0;
    }

    .section-heading {
        margin-bottom: 35px;
    }

    .section-heading h2,
    .about-text h2,
    .support-text h2 {
        font-size: 30px;
    }

    .section-heading p,
    .about-text p,
    .support-text p {
        font-size: 16px;
    }


    /* Services */

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

    .service-card {
        padding: 28px;
    }


    /* Who We Support */

    .support-content {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    /* About */

    .about-content {
        flex-direction: column;

        gap: 40px;
    }

    .about-image,
    .about-text {
        width: 100%;
    }

    .about-placeholder {
        height: 300px;
    }


    /* Referrers */

    .referrers h2 {
        font-size: 32px;
    }

    .referrers p {
        font-size: 16px;
    }


    /* Contact */

    .contact-grid {
        grid-template-columns: 1fr;
    }


    /* Footer */

    .footer-content {
        flex-direction: column;

        gap: 35px;
    }

    .footer-links {
        flex-direction: column;

        gap: 12px;
    }
}


/* ========================================
   SMALL PHONES
======================================== */

@media (max-width: 420px) {

    .brand-name {
        font-size: 19px;
    }

    .contact-button {
        padding: 9px 13px;

        font-size: 12px;
    }

    .hero h1 {
        font-size: 29px;
    }

    .hero-buttons {
        width: 100%;
    }

    .primary-button,
    .secondary-button {
        flex: 1;

        text-align: center;
    }

    .hero-photo {
        height: 240px;
    }
}
/* ========================================
   MULTI-PAGE COMMON
======================================== */

.brand-link {
    text-decoration: none;
}

.nav-links a.active {
    color: #16859a;
}


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

.page-hero {
    padding: 95px 0;

    background-color: #f4f8f8;
}

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

.page-hero h1 {
    max-width: 760px;

    margin-bottom: 25px;

    color: #173f50;

    font-size: 52px;

    line-height: 1.12;
}

.page-hero-content>p:last-child {
    max-width: 680px;

    color: #5b7079;

    font-size: 18px;

    line-height: 1.75;
}


/* ========================================
   SERVICES INTRO
======================================== */

.services-intro {
    padding: 100px 0;
}

.services-intro-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;
}

.services-intro h2 {
    max-width: 520px;

    color: #173f50;

    font-size: 40px;

    line-height: 1.2;
}

.services-intro-grid>div:last-child p {
    margin-bottom: 20px;

    color: #5b7079;

    font-size: 17px;

    line-height: 1.8;
}


/* ========================================
   SERVICE DETAIL
======================================== */

.service-detail {
    padding: 90px 0;

    border-top: 1px solid #e4ebed;
}

.alt-section {
    background-color: #f7fafb;
}

.service-detail-grid {
    display: grid;

    grid-template-columns: 120px 1fr;

    gap: 60px;
}

.service-detail-number {
    color: #16859a;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 2px;
}

.service-detail-content {
    max-width: 800px;
}

.service-detail-content h2 {
    margin-bottom: 22px;

    color: #173f50;

    font-size: 38px;

    line-height: 1.2;
}

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

    color: #5b7079;

    font-size: 17px;

    line-height: 1.8;
}


/* Service Points */

.service-points {
    display: grid;

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

    gap: 12px 30px;

    margin-top: 32px;
}

.service-points div {
    padding: 14px 0 14px 20px;

    color: #34525e;

    font-size: 15px;

    border-left: 2px solid #16859a;
}


/* ========================================
   SERVICES CTA
======================================== */

.services-cta {
    padding: 85px 0;

    background-color: #174f61;
}

.services-cta-content {
    display: flex;

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

    gap: 60px;
}

.services-cta h2 {
    margin-bottom: 15px;

    color: #ffffff;

    font-size: 38px;
}

.services-cta p {
    max-width: 620px;

    color: #d6e5e9;

    font-size: 16px;

    line-height: 1.7;
}


/* ========================================
   MULTI-PAGE MOBILE
======================================== */

@media (max-width: 800px) {

    .page-hero {
        padding: 65px 0;
    }

    .page-hero h1 {
        font-size: 36px;
    }

    .page-hero-content>p:last-child {
        font-size: 16px;
    }


    .services-intro {
        padding: 70px 0;
    }

    .services-intro-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .services-intro h2 {
        font-size: 30px;
    }


    .service-detail {
        padding: 65px 0;
    }

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

        gap: 20px;
    }

    .service-detail-content h2 {
        font-size: 29px;
    }

    .service-detail-content>p {
        font-size: 16px;
    }


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


    .services-cta {
        padding: 65px 0;
    }

    .services-cta-content {
        flex-direction: column;

        align-items: flex-start;

        gap: 30px;
    }

    .services-cta h2 {
        font-size: 30px;
    }
}

/* ========================================
   ABOUT PAGE
======================================== */


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

.about-page-intro {
    padding: 110px 0;

    background-color: #ffffff;
}

.about-page-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 80px;
}

.about-page-placeholder {
    height: 500px;

    background-color: #dce8e9;

    border-radius: 12px;

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

    color: #70838c;

    font-size: 14px;
}

.about-page-text h2 {
    margin-bottom: 25px;

    color: #173f50;

    font-size: 40px;

    line-height: 1.2;
}

.about-page-text>p {
    margin-bottom: 18px;

    color: #5b7079;

    font-size: 17px;

    line-height: 1.8;
}


/* ---------- Our Approach ---------- */

.approach-section {
    padding: 100px 0;

    background-color: #f4f8f8;
}

.approach-grid {
    display: grid;

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

    gap: 24px;
}

.approach-card {
    padding: 38px;

    background-color: #ffffff;

    border-radius: 10px;

    border: 1px solid #e1e9eb;
}

.approach-number {
    margin-bottom: 25px;

    color: #16859a;

    font-size: 13px;
    font-weight: 700;
}

.approach-card h3 {
    margin-bottom: 12px;

    color: #173f50;

    font-size: 22px;
}

.approach-card p {
    color: #647982;

    font-size: 15px;

    line-height: 1.75;
}


/* ---------- Our Focus ---------- */

.about-focus {
    padding: 110px 0;

    background-color: #ffffff;
}

.about-focus-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;
}

.about-focus-heading h2 {
    max-width: 480px;

    color: #173f50;

    font-size: 40px;

    line-height: 1.2;
}

.about-focus-content {
    display: flex;

    flex-direction: column;
}

.focus-item {
    display: flex;

    gap: 25px;

    padding: 25px 0;

    border-bottom: 1px solid #e1e9eb;
}

.focus-item:first-child {
    padding-top: 0;
}

.focus-item span {
    color: #16859a;

    font-size: 13px;

    font-weight: 700;
}

.focus-item h3 {
    margin-bottom: 7px;

    color: #173f50;

    font-size: 20px;
}

.focus-item p {
    color: #647982;

    font-size: 15px;

    line-height: 1.7;
}


/* ---------- Why Forward Path ---------- */

.why-forward {
    padding: 100px 0;

    background-color: #174f61;
}

.why-forward-content {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 80px;
}

.why-forward-content>div {
    max-width: 760px;
}

.why-forward h2 {
    max-width: 720px;

    margin-bottom: 25px;

    color: #ffffff;

    font-size: 42px;

    line-height: 1.2;
}

.why-forward p {
    color: #d6e5e9;

    font-size: 17px;

    line-height: 1.8;
}


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

.about-contact {
    padding: 90px 0;

    background-color: #ffffff;
}

.about-contact-content {
    display: flex;

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

    gap: 60px;
}

.about-contact-content>div {
    max-width: 700px;
}

.about-contact h2 {
    margin-bottom: 15px;

    color: #173f50;

    font-size: 36px;

    line-height: 1.2;
}

.about-contact p {
    color: #5b7079;

    font-size: 16px;

    line-height: 1.7;
}


/* ========================================
   ABOUT PAGE MOBILE
======================================== */

@media (max-width: 800px) {

    .about-page-intro,
    .approach-section,
    .about-focus,
    .why-forward,
    .about-contact {
        padding: 70px 0;
    }


    /* Introduction */

    .about-page-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .about-page-placeholder {
        height: 320px;
    }

    .about-page-text h2 {
        font-size: 30px;
    }

    .about-page-text>p {
        font-size: 16px;
    }


    /* Approach */

    .approach-grid {
        grid-template-columns: 1fr;
    }

    .approach-card {
        padding: 28px;
    }


    /* Focus */

    .about-focus-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .about-focus-heading h2 {
        font-size: 30px;
    }


    /* Why Forward Path */

    .why-forward-content {
        flex-direction: column;

        align-items: flex-start;

        gap: 30px;
    }

    .why-forward h2 {
        font-size: 31px;
    }

    .why-forward p {
        font-size: 16px;
    }


    /* Contact */

    .about-contact-content {
        flex-direction: column;

        align-items: flex-start;

        gap: 30px;
    }

    .about-contact h2 {
        font-size: 30px;
    }
}
/* ========================================
   REFERRERS PAGE
======================================== */


/* ---------- Intro ---------- */

.referrer-intro {
    padding: 100px 0;
    background-color: #ffffff;
}

.referrer-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
}

.referrer-intro h2 {
    max-width: 520px;

    color: #173f50;

    font-size: 40px;
    line-height: 1.2;
}

.referrer-intro-text p {
    margin-bottom: 20px;

    color: #5b7079;

    font-size: 17px;
    line-height: 1.8;
}


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

.referrer-partners {
    padding: 100px 0;

    background-color: #f4f8f8;
}

.referrer-partner-grid {
    display: grid;

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

    gap: 24px;
}

.referrer-partner-card {
    padding: 38px;

    background-color: #ffffff;

    border: 1px solid #e1e9eb;
    border-radius: 10px;
}

.referrer-number {
    margin-bottom: 22px;

    color: #16859a;

    font-size: 13px;
    font-weight: 700;
}

.referrer-partner-card h3 {
    margin-bottom: 12px;

    color: #173f50;

    font-size: 21px;
}

.referrer-partner-card p {
    color: #647982;

    font-size: 15px;
    line-height: 1.75;
}


/* ---------- What Referrers Can Expect ---------- */

.referrer-expect {
    padding: 110px 0;

    background-color: #ffffff;
}

.referrer-expect-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;
}

.referrer-expect-heading h2 {
    max-width: 500px;

    margin-bottom: 20px;

    color: #173f50;

    font-size: 40px;
    line-height: 1.2;
}

.referrer-expect-heading>p:last-child {
    color: #5b7079;

    font-size: 17px;
    line-height: 1.75;
}

.expect-item {
    display: flex;

    gap: 25px;

    padding: 25px 0;

    border-bottom: 1px solid #e1e9eb;
}

.expect-item:first-child {
    padding-top: 0;
}

.expect-item span {
    color: #16859a;

    font-size: 13px;
    font-weight: 700;
}

.expect-item h3 {
    margin-bottom: 7px;

    color: #173f50;

    font-size: 20px;
}

.expect-item p {
    color: #647982;

    font-size: 15px;
    line-height: 1.7;
}


/* ---------- Referral Process ---------- */

.referral-process {
    padding: 100px 0;

    background-color: #f4f8f8;
}

.referral-steps {
    display: grid;

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

    gap: 20px;
}

.referral-step {
    padding: 30px;

    background-color: #ffffff;

    border-radius: 10px;

    border: 1px solid #e1e9eb;
}

.referral-step-number {
    margin-bottom: 25px;

    color: #16859a;

    font-size: 13px;
    font-weight: 700;
}

.referral-step h3 {
    margin-bottom: 12px;

    color: #173f50;

    font-size: 20px;
}

.referral-step p {
    color: #647982;

    font-size: 14px;
    line-height: 1.7;
}


/* ---------- Referral Information ---------- */

.referral-information {
    padding: 100px 0;

    background-color: #174f61;
}

.referral-information-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;
}

.referral-information h2 {
    max-width: 520px;

    margin-bottom: 20px;

    color: #ffffff;

    font-size: 40px;
    line-height: 1.2;
}

.referral-information p {
    max-width: 570px;

    color: #d6e5e9;

    font-size: 16px;
    line-height: 1.8;
}

.referral-information-list {
    display: flex;

    flex-direction: column;
}

.referral-information-list div {
    padding: 17px 0;

    color: #ffffff;

    font-size: 16px;

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

.referral-information-list div::before {
    content: "→";

    margin-right: 15px;

    color: #78c5d1;
}


/* ---------- Contact CTA ---------- */

.referrer-contact-cta {
    padding: 90px 0;

    background-color: #ffffff;
}

.referrer-contact-content {
    display: flex;

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

    gap: 60px;
}

.referrer-contact-content>div {
    max-width: 700px;
}

.referrer-contact-content h2 {
    margin-bottom: 15px;

    color: #173f50;

    font-size: 36px;
    line-height: 1.2;
}

.referrer-contact-content p {
    color: #5b7079;

    font-size: 16px;
    line-height: 1.7;
}


/* ========================================
   REFERRERS PAGE MOBILE
======================================== */

@media (max-width: 800px) {

    .referrer-intro,
    .referrer-partners,
    .referrer-expect,
    .referral-process,
    .referral-information,
    .referrer-contact-cta {
        padding: 70px 0;
    }


    /* Intro */

    .referrer-intro-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .referrer-intro h2 {
        font-size: 30px;
    }

    .referrer-intro-text p {
        font-size: 16px;
    }


    /* Partners */

    .referrer-partner-grid {
        grid-template-columns: 1fr;
    }

    .referrer-partner-card {
        padding: 28px;
    }


    /* What to Expect */

    .referrer-expect-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .referrer-expect-heading h2 {
        font-size: 30px;
    }


    /* Referral Process */

    .referral-steps {
        grid-template-columns: 1fr;
    }

    .referral-step {
        padding: 28px;
    }


    /* Referral Information */

    .referral-information-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .referral-information h2 {
        font-size: 30px;
    }


    /* CTA */

    .referrer-contact-content {
        flex-direction: column;

        align-items: flex-start;

        gap: 30px;
    }

    .referrer-contact-content h2 {
        font-size: 30px;
    }
}
/* ========================================
   CONTACT PAGE
======================================== */


/* ---------- Contact Details ---------- */

.contact-page-details {
    padding: 100px 0;

    background-color: #ffffff;
}

.contact-page-heading {
    max-width: 700px;

    margin-bottom: 55px;
}

.contact-page-heading h2 {
    margin-bottom: 18px;

    color: #173f50;

    font-size: 40px;

    line-height: 1.2;
}

.contact-page-heading>p:last-child {
    color: #5b7079;

    font-size: 17px;

    line-height: 1.75;
}


/* Contact Cards */

.contact-card-grid {
    display: grid;

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

    gap: 24px;
}

.contact-card {
    padding: 36px;

    background-color: #ffffff;

    border: 1px solid #e1e9eb;

    border-radius: 10px;
}

.contact-card-number {
    margin-bottom: 28px;

    color: #16859a;

    font-size: 13px;

    font-weight: 700;
}

.contact-card-label {
    margin-bottom: 8px;

    color: #16859a;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.contact-card h3 {
    margin-bottom: 15px;

    color: #173f50;

    font-size: 20px;

    word-break: break-word;
}

.contact-card>p:last-child {
    color: #647982;

    font-size: 15px;

    line-height: 1.7;
}


/* ========================================
   CONTACT INFORMATION
======================================== */

.contact-information {
    padding: 100px 0;

    background-color: #f4f8f8;
}

.contact-information-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;
}

.contact-information-heading h2 {
    margin-bottom: 15px;

    color: #173f50;

    font-size: 40px;

    line-height: 1.2;
}

.contact-information-heading>p:last-child {
    color: #5b7079;

    font-size: 17px;
}


/* Information Rows */

.contact-info-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 23px 0;

    border-bottom: 1px solid #d8e3e5;
}

.contact-info-row:first-child {
    padding-top: 0;
}

.contact-info-row span {
    color: #70838c;

    font-size: 14px;
}

.contact-info-row strong {
    color: #173f50;

    font-size: 16px;

    font-weight: 600;

    text-align: right;

    word-break: break-word;
}


/* ========================================
   CONTACT REFERRALS
======================================== */

.contact-referrals {
    padding: 100px 0;

    background-color: #174f61;
}

.contact-referrals-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;
}

.contact-referrals h2 {
    max-width: 540px;

    margin-bottom: 22px;

    color: #ffffff;

    font-size: 40px;

    line-height: 1.2;
}

.contact-referrals p {
    margin-bottom: 18px;

    color: #d6e5e9;

    font-size: 16px;

    line-height: 1.8;
}


/* Referral Details */

.contact-referral-label {
    color: #78c5d1 !important;

    font-size: 11px !important;

    font-weight: 700;

    letter-spacing: 1.5px;

    margin-bottom: 15px !important;
}

.contact-referral-details>div {
    padding: 16px 0;

    color: #ffffff;

    font-size: 15px;

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

.contact-referral-details>div::before {
    content: "→";

    margin-right: 14px;

    color: #78c5d1;
}

.contact-referrer-button {
    margin-top: 30px;
}


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

.contact-final-cta {
    padding: 90px 0;

    background-color: #ffffff;
}

.contact-final-content {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 60px;
}

.contact-final-content>div:first-child {
    max-width: 650px;
}

.contact-final-content h2 {
    margin-bottom: 15px;

    color: #173f50;

    font-size: 36px;

    line-height: 1.2;
}

.contact-final-content p {
    color: #5b7079;

    font-size: 16px;

    line-height: 1.7;
}

.contact-final-actions {
    display: flex;

    gap: 12px;
}


/* ========================================
   CONTACT PAGE MOBILE
======================================== */

@media (max-width: 800px) {

    .contact-page-details,
    .contact-information,
    .contact-referrals,
    .contact-final-cta {
        padding: 70px 0;
    }


    /* Cards */

    .contact-page-heading {
        margin-bottom: 35px;
    }

    .contact-page-heading h2 {
        font-size: 30px;
    }

    .contact-page-heading>p:last-child {
        font-size: 16px;
    }

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

    .contact-card {
        padding: 28px;
    }


    /* Contact Information */

    .contact-information-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .contact-information-heading h2 {
        font-size: 30px;
    }

    .contact-info-row {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }

    .contact-info-row strong {
        text-align: left;
    }


    /* Referrals */

    .contact-referrals-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .contact-referrals h2 {
        font-size: 30px;
    }


    /* Final CTA */

    .contact-final-content {
        flex-direction: column;

        align-items: flex-start;

        gap: 30px;
    }

    .contact-final-content h2 {
        font-size: 30px;
    }

    .contact-final-actions {
        width: 100%;
    }

    .contact-final-actions .primary-button,
    .contact-final-actions .secondary-button {
        flex: 1;

        text-align: center;
    }
}


/* ========================================
   SMALL PHONE
======================================== */

@media (max-width: 420px) {

    .contact-final-actions {
        flex-direction: column;
    }

}

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

/* Hide hamburger on desktop */

.mobile-menu-button {
    display: none;

    width: 42px;
    height: 42px;

    padding: 8px;

    background: transparent;

    border: none;

    cursor: pointer;
}


/* Hamburger Lines */

.mobile-menu-button span {
    display: block;

    width: 24px;
    height: 2px;

    margin: 5px auto;

    background-color: #174f61;

    border-radius: 2px;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


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

@media (max-width: 800px) {

    .header {
        position: relative;

        z-index: 1000;
    }


    .navbar {
        position: relative;
    }


    /* Hide desktop contact button */

    .contact-button {
        display: none;
    }


    /* Show hamburger */

    .mobile-menu-button {
        display: block;
    }


    /* Mobile dropdown */

    .nav-links {
        display: none;

        position: absolute;

        top: 78px;
        left: -6%;
        right: -6%;

        padding: 20px 6% 25px;

        background-color: #ffffff;

        border-top: 1px solid #e8edf1;
        border-bottom: 1px solid #e8edf1;

        box-shadow: 0 12px 30px rgba(23, 63, 80, 0.08);

        flex-direction: column;

        align-items: stretch;

        gap: 0;
    }


    /* Open Menu */

    .nav-links.mobile-open {
        display: flex;
    }


    /* Links */

    .nav-links a {
        padding: 14px 0;

        font-size: 16px;

        border-bottom: 1px solid #edf2f3;
    }


    .nav-links a:last-child {
        border-bottom: none;
    }


    .nav-links a.active {
        color: #16859a;

        font-weight: 600;
    }


    /* Animate hamburger into X */

    .mobile-menu-button.open span:nth-child(1) {
        transform:
            translateY(7px) rotate(45deg);
    }


    .mobile-menu-button.open span:nth-child(2) {
        opacity: 0;
    }


    .mobile-menu-button.open span:nth-child(3) {
        transform:
            translateY(-7px) rotate(-45deg);
    }

}
/* ========================================
   TEAM SECTION
======================================== */

.team-section {
    padding: 100px 0;
    background-color: #f4f8f8;
}


.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}


/* Team Card */

.team-card {
    background-color: #ffffff;

    border: 1px solid #e1e9eb;
    border-radius: 12px;

    overflow: hidden;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.team-card:hover {
    transform: translateY(-4px);

    box-shadow: 0 12px 30px rgba(23, 63, 80, 0.08);
}


/* Staff Photo */

.team-photo-wrapper {
    width: 100%;
    height: 380px;

    overflow: hidden;

    background-color: #dce8e9;
}


.team-photo {
    display: block;

    width: 100%;
    height: 100%;

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


/* Content */

.team-card-content {
    padding: 30px;
}


.team-card h3 {
    margin-bottom: 4px;

    color: #173f50;

    font-size: 24px;
}


.team-title {
    margin-bottom: 25px;

    color: #16859a;

    font-size: 15px;
    font-weight: 600;
}


/* Areas of Focus */

.team-focus {
    padding-top: 20px;

    border-top: 1px solid #e5edef;
}


.team-focus-label {
    margin-bottom: 14px;

    color: #70838c;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


.team-focus ul {
    list-style: none;

    padding: 0;
    margin: 0;
}


.team-focus li {
    position: relative;

    padding: 7px 0 7px 18px;

    color: #526b75;

    font-size: 15px;
}


.team-focus li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 16px;

    width: 6px;
    height: 6px;

    background-color: #16859a;

    border-radius: 50%;
}


.team-more {
    margin-top: 40px;
}


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

@media (max-width: 800px) {

    .team-section {
        padding: 70px 0;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    .team-photo-wrapper {
        height: 340px;
    }

    .team-card-content {
        padding: 25px;
    }

}

/* ========================================
   STAFF PROFILES
======================================== */

.team-profile-section {
    padding: 110px 0;
    background-color: #ffffff;
}


/* Individual Staff */

.staff-profile {
    display: grid;

    grid-template-columns: 42% 58%;

    align-items: stretch;

    margin-bottom: 80px;

    background-color: #f4f8f8;

    border-radius: 12px;

    overflow: hidden;
}


.staff-profile:last-child {
    margin-bottom: 0;
}


/* Reverse second profile */

.staff-profile-reverse {
    grid-template-columns: 58% 42%;
}


.staff-profile-reverse .staff-profile-image {
    order: 2;
}


.staff-profile-reverse .staff-profile-content {
    order: 1;
}


/* Photo */

.staff-profile-image {
    min-height: 520px;

    background-color: #dce8e9;
}


.staff-profile-image img {
    width: 100%;
    height: 100%;

    display: block;

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


/* Profile Content */

.staff-profile-content {
    padding: 55px;
}


.staff-profile-label {
    margin-bottom: 12px;

    color: #16859a;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.6px;
}


.staff-profile-content h2 {
    margin-bottom: 4px;

    color: #173f50;

    font-size: 36px;

    line-height: 1.2;
}


.staff-position {
    margin-bottom: 25px;

    color: #16859a;

    font-size: 16px;
    font-weight: 600;
}


.staff-bio {
    margin-bottom: 35px;

    color: #5b7079;

    font-size: 16px;

    line-height: 1.8;
}


/* Details */

.staff-detail-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    padding-top: 28px;

    border-top: 1px solid #d8e4e6;
}


.staff-detail-label {
    margin-bottom: 14px;

    color: #70838c;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


.staff-detail ul {
    list-style: none;

    margin: 0;
    padding: 0;
}


.staff-detail li {
    position: relative;

    padding: 6px 0 6px 17px;

    color: #526b75;

    font-size: 14px;

    line-height: 1.5;
}


.staff-detail li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 14px;

    width: 6px;
    height: 6px;

    background-color: #16859a;

    border-radius: 50%;
}


/* ========================================
   ABOUT INTRO SIMPLE
======================================== */

.about-intro-simple {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;
}


.about-intro-simple h2 {
    max-width: 520px;

    color: #173f50;

    font-size: 40px;

    line-height: 1.2;
}


.about-intro-text p {
    margin-bottom: 18px;

    color: #5b7079;

    font-size: 17px;

    line-height: 1.8;
}


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

@media (max-width: 800px) {

    .team-profile-section {
        padding: 70px 0;
    }


    .about-intro-simple {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .about-intro-simple h2 {
        font-size: 30px;
    }


    .about-intro-text p {
        font-size: 16px;
    }


    .staff-profile,
    .staff-profile-reverse {
        grid-template-columns: 1fr;

        margin-bottom: 45px;
    }


    .staff-profile-reverse .staff-profile-image,
    .staff-profile-reverse .staff-profile-content {
        order: initial;
    }


    .staff-profile-image {
        min-height: 0;
        height: 390px;
    }


    .staff-profile-content {
        padding: 30px;
    }


    .staff-profile-content h2 {
        font-size: 30px;
    }


    .staff-detail-grid {
        grid-template-columns: 1fr;

        gap: 28px;
    }

}


/* Very small phones */

@media (max-width: 420px) {

    .staff-profile-image {
        height: 330px;
    }

}

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

.footer-info {
    max-width: 420px;
}

.footer-contact-item {
    margin-top: 28px;
}

.footer-contact-label {
    margin-bottom: 8px;

    color: #78c5d1;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.footer-address {
    display: inline-block;

    color: #d9e4e7;

    text-decoration: none;

    font-size: 14px;

    line-height: 1.7;

    transition: color 0.2s ease;
}

.footer-address:hover {
    color: #ffffff;
    text-decoration: underline;
}
/* ========================================
   FAQ
======================================== */

.faq-section {
    padding: 100px 0;
    background-color: #f4f8f8;
}

.faq-layout {
    display: grid;
    grid-template-columns: 38% 62%;
    gap: 80px;
}

.faq-heading {
    max-width: 420px;
}

.faq-heading h2 {
    margin-bottom: 18px;
    color: #173f50;
    font-size: 40px;
    line-height: 1.2;
}

.faq-heading>p:last-child {
    color: #5b7079;
    font-size: 16px;
    line-height: 1.75;
}


/* FAQ Items */

.faq-item {
    border-bottom: 1px solid #d8e3e5;
}

.faq-item:first-child {
    border-top: 1px solid #d8e3e5;
}

.faq-question {
    width: 100%;
    padding: 23px 0;

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

    gap: 25px;

    background: transparent;
    border: none;

    color: #173f50;

    font-family: inherit;
    font-size: 18px;
    font-weight: 600;

    text-align: left;
    cursor: pointer;
}

.faq-icon {
    flex-shrink: 0;

    color: #16859a;

    font-size: 25px;
    font-weight: 400;

    transition: transform 0.25s ease;
}


/* Answer hidden by default */

.faq-answer {
    display: none;

    padding: 0 45px 24px 0;
}

.faq-answer p {
    color: #5b7079;

    font-size: 15px;
    line-height: 1.75;
}


/* Open FAQ */

.faq-item.open .faq-answer {
    display: block;
}

.faq-item.open .faq-icon {
    transform: rotate(45deg);
}


/* Links */

.faq-link {
    display: inline-block;

    margin-top: 12px;

    color: #176c7e;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;
}

.faq-link:hover {
    text-decoration: underline;
}


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

@media (max-width: 800px) {

    .faq-section {
        padding: 70px 0;
    }

    .faq-layout {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .faq-heading h2 {
        font-size: 30px;
    }

    .faq-question {
        padding: 20px 0;

        font-size: 16px;
    }

    .faq-answer {
        padding-right: 20px;
    }

}

/* ========================================
   FAQ PAGE
======================================== */

.faq-page-section {
    padding: 110px 0;
    background-color: #ffffff;
}

.faq-page-layout {
    display: grid;
    grid-template-columns: 36% 64%;
    gap: 90px;
}

.faq-page-heading {
    max-width: 390px;
}

.faq-page-heading h2 {
    margin-bottom: 18px;

    color: #173f50;

    font-size: 40px;
    line-height: 1.2;
}

.faq-page-heading>p {
    margin-bottom: 30px;

    color: #5b7079;

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


/* ========================================
   FAQ PAGE MOBILE
======================================== */

@media (max-width: 800px) {

    .faq-page-section {
        padding: 70px 0;
    }

    .faq-page-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .faq-page-heading h2 {
        font-size: 30px;
    }

}

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

.footer-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px 28px;
}


/* Mobile Footer Navigation */

@media (max-width: 800px) {

    .footer-links {
        width: 100%;

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

        gap: 14px 12px !important;
    }

    .footer-links a {
        font-size: 13px;

        text-align: left;
    }

}

/* ========================================
   MOBILE CONTACT LINK
======================================== */

/* Desktop: hide Contact Us inside nav */
.mobile-contact-link {
    display: none;
}


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

    /* Desktop contact button remains hidden */
    .contact-button {
        display: none;
    }

    /* Show Contact Us inside hamburger menu */
    .nav-links .mobile-contact-link {
        display: block;
        color: #176c7e;
        font-weight: 600;
    }

}

@media (max-width: 800px) {

    .nav-links .mobile-contact-link {
        margin-top: 10px;
        padding: 12px 16px;

        background-color: #176c7e;
        color: #ffffff;

        border-radius: 5px;

        text-align: center;
    }

}

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

.header-logo {
    display: block;

    width: 125px;
    height: 76px;

    object-fit: contain;
}
/* ========================================
   HEADER HIGHLIGHT BAR
======================================== */

.header-highlight {
    background-color: #172350;
}

.header-highlight-content {
    min-height: 34px;

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

    gap: 16px;

    color: #ffffff;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 1.1px;

    text-align: center;
}

.highlight-divider {
    color: #d4ad45;
    font-size: 13px;
}

@media (max-width: 800px) {

    .navbar {
        height: 72px;
    }

    .header-logo {
        width: 78px;
        height: 54px;
        object-fit: contain;
    }



    .header-highlight-content {
        min-height: 36px;

        padding: 7px 0;

        gap: 7px;

        font-size: 9px;
        line-height: 1.4;

        letter-spacing: 0.7px;
    }

    .header-highlight-content span:nth-child(4),
    .header-highlight-content span:nth-child(5) {
        display: none;
    }

}
/* ========================================
   SERVICES OVERVIEW PAGE
======================================== */

.service-overview {
    padding: 90px 0 110px;
    background-color: #ffffff;
}

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


/* Card */

.service-overview-card {
    overflow: hidden;

    background-color: #ffffff;

    border: 1px solid #e3eaec;
    border-radius: 14px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.service-overview-card:hover {
    transform: translateY(-5px);

    box-shadow: 0 14px 35px rgba(23, 63, 80, 0.10);
}


/* Image */

.service-overview-image {
    width: 100%;
    height: 230px;

    overflow: hidden;

    background-color: #dce8e9;
}

.service-overview-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.35s ease;
}

.service-overview-card:hover .service-overview-image img {
    transform: scale(1.04);
}


/* Content */

.service-overview-content {
    min-height: 170px;

    padding: 25px;

    display: flex;
    flex-direction: column;
}

.service-category {
    margin-bottom: 10px;

    color: #16859a;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.4px;
}

.service-overview-content h3 {
    margin-bottom: 22px;

    color: #173f50;

    font-size: 20px;
    line-height: 1.4;
}

.service-learn-more {
    margin-top: auto;

    color: #176c7e;

    font-size: 14px;
    font-weight: 600;

    text-decoration: underline;

    text-underline-offset: 4px;
}

.service-learn-more:hover {
    color: #104f5d;
}


/* Tablet */

@media (max-width: 1000px) {

    .service-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* Mobile */

@media (max-width: 800px) {

    .service-overview {
        padding: 65px 0 75px;
    }

    .service-overview-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .service-overview-image {
        height: 230px;
    }

    .service-overview-content {
        min-height: auto;
    }

}

/* ========================================
   INDIVIDUAL SERVICE PAGE
======================================== */


/* ========================================
   SERVICE PAGE HERO
======================================== */

.service-page-hero {
    padding: 45px 0 75px;

    background-color: #f4f8f8;
}


/* Breadcrumb */

.breadcrumb {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 42px;

    font-size: 11px;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.breadcrumb a {
    color: #7b929b;

    text-decoration: none;
}


.breadcrumb a:hover {
    color: #176c7e;
}


.breadcrumb span {
    color: #a2b2b8;
}


/* Service Hero */

.service-page-hero-content {
    max-width: 850px;
}


.service-page-hero-content h1 {
    margin-bottom: 24px;

    color: #173f50;

    font-size: 54px;

    line-height: 1.1;
}


.service-page-hero-content>p:last-child {
    max-width: 720px;

    color: #5b7079;

    font-size: 18px;

    line-height: 1.75;
}




/* ========================================
   SERVICE DETAIL LAYOUT
======================================== */

.individual-service-page {
    padding: 90px 0 110px;

    background-color: #ffffff;
}


.individual-service-layout {
    display: grid;

    grid-template-columns: 280px minmax(0, 1fr);

    gap: 75px;

    align-items: start;
}




/* ========================================
   SERVICE SIDEBAR
======================================== */

.service-sidebar {
    position: sticky;

    top: 30px;

    padding: 32px 28px;

    background-color: #f7fafb;

    border: 1px solid #e3eaec;

    border-radius: 14px;
}


.service-sidebar-title {
    margin-bottom: 20px;

    color: #71858d;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
}


.service-sidebar-nav {
    display: flex;

    flex-direction: column;
}


.service-sidebar-nav a {
    padding: 11px 0;

    color: #365461;

    font-size: 14px;

    line-height: 1.45;

    text-decoration: none;

    border-bottom: 1px solid #e1e9eb;

    transition:
        color 0.2s ease,
        padding-left 0.2s ease;
}


.service-sidebar-nav a:hover {
    color: #16859a;

    padding-left: 5px;
}


.service-sidebar-nav a.active {
    color: #16859a;

    font-weight: 700;
}


.sidebar-contact {
    width: 100%;

    margin-top: 28px;

    text-align: center;
}




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

.individual-service-content {
    max-width: 830px;

    min-width: 0;
}


.service-content-label {
    margin-bottom: 10px;

    color: #16859a;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.6px;
}


.individual-service-content>h2 {
    margin-bottom: 25px;

    color: #173f50;

    font-size: 44px;

    line-height: 1.15;
}


.individual-service-content>p {
    margin-bottom: 18px;

    color: #5b7079;

    font-size: 17px;

    line-height: 1.85;
}


.service-introduction {
    font-size: 18px !important;

    color: #405e69 !important;
}




/* ========================================
   CONTENT SECTIONS
======================================== */

.service-content-section {
    padding-top: 42px;

    margin-top: 42px;

    border-top: 1px solid #e3eaec;
}


.service-content-section h3 {
    margin-bottom: 18px;

    color: #173f50;

    font-size: 29px;

    line-height: 1.25;
}


.service-content-section>p {
    margin-bottom: 17px;

    color: #5b7079;

    font-size: 16px;

    line-height: 1.8;
}




/* ========================================
   SERVICE LIST
======================================== */

.service-content-list {
    margin: 24px 0 0;

    padding: 0;

    list-style: none;

    display: grid;

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

    gap: 12px 30px;
}


.service-content-list li {
    position: relative;

    padding: 12px 12px 12px 22px;

    color: #506b76;

    font-size: 15px;

    line-height: 1.55;
}


.service-content-list li::before {
    content: "";

    position: absolute;

    left: 0;

    top: 21px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background-color: #16859a;
}




/* ========================================
   ASSESSMENT PROCESS
======================================== */

.assessment-process {
    margin-top: 25px;
}


.assessment-process-item {
    display: grid;

    grid-template-columns: 50px 1fr;

    gap: 18px;

    padding: 22px 0;

    border-bottom: 1px solid #e3eaec;
}


.assessment-process-item:first-child {
    padding-top: 5px;
}


.assessment-process-item>span {
    color: #16859a;

    font-size: 12px;

    font-weight: 700;
}


.assessment-process-item h4 {
    margin-bottom: 6px;

    color: #173f50;

    font-size: 18px;
}


.assessment-process-item p {
    color: #647982;

    font-size: 15px;

    line-height: 1.7;
}




/* ========================================
   REFERRAL BOX
======================================== */

.service-referral-box {
    margin-top: 55px;

    padding: 38px;

    background-color: #f4f8f8;

    border-left: 4px solid #16859a;

    border-radius: 8px;
}


.service-referral-box h3 {
    margin-bottom: 14px;

    color: #173f50;

    font-size: 25px;

    line-height: 1.25;
}


.service-referral-box>p:not(.section-label) {
    margin-bottom: 24px;

    color: #5b7079;

    font-size: 15px;

    line-height: 1.75;
}




/* ========================================
   OTHER SERVICES
======================================== */

.other-services-section {
    padding: 90px 0;

    background-color: #f4f8f8;
}


.other-services-grid {
    display: grid;

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

    gap: 22px;
}


.other-service-card {
    padding: 30px;

    background-color: #ffffff;

    border: 1px solid #e1e9eb;

    border-radius: 12px;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.other-service-card:hover {
    transform: translateY(-4px);

    box-shadow: 0 12px 30px rgba(23, 63, 80, 0.08);
}


.other-service-card>span {
    display: block;

    margin-bottom: 22px;

    color: #16859a;

    font-size: 11px;

    font-weight: 700;
}


.other-service-card h3 {
    margin-bottom: 18px;

    color: #173f50;

    font-size: 19px;

    line-height: 1.4;
}


.other-service-card p {
    color: #176c7e;

    font-size: 13px;

    font-weight: 600;
}


.other-services-button {
    margin-top: 35px;
}




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

@media (max-width: 1000px) {

    .individual-service-layout {
        grid-template-columns: 230px minmax(0, 1fr);

        gap: 45px;
    }


    .service-page-hero-content h1 {
        font-size: 46px;
    }


    .individual-service-content>h2 {
        font-size: 38px;
    }

}




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

@media (max-width: 800px) {

    /* Hero */

    .service-page-hero {
        padding: 35px 0 55px;
    }


    .breadcrumb {
        margin-bottom: 30px;

        font-size: 9px;
    }


    .service-page-hero-content h1 {
        font-size: 34px;
    }


    .service-page-hero-content>p:last-child {
        font-size: 16px;
    }



    /* Layout */

    .individual-service-page {
        padding: 60px 0 70px;
    }


    .individual-service-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }



    /* Sidebar */

    .service-sidebar {
        position: static;

        padding: 25px;
    }


    .service-sidebar-nav a {
        padding: 12px 0;
    }



    /* Main */

    .individual-service-content>h2 {
        font-size: 31px;
    }


    .individual-service-content>p {
        font-size: 16px;
    }


    .service-introduction {
        font-size: 16px !important;
    }



    /* Sections */

    .service-content-section {
        padding-top: 34px;

        margin-top: 34px;
    }


    .service-content-section h3 {
        font-size: 25px;
    }



    /* Lists */

    .service-content-list {
        grid-template-columns: 1fr;

        gap: 4px;
    }



    /* Referral */

    .service-referral-box {
        padding: 28px 24px;

        margin-top: 40px;
    }


    .service-referral-box h3 {
        font-size: 23px;
    }



    /* Other Services */

    .other-services-section {
        padding: 70px 0;
    }


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

}

/* ========================================
   FEATURED DRIVING REHAB PROGRAM
======================================== */

.featured-program {
    margin-top: 90px;
}


.featured-program-heading {
    max-width: 700px;

    margin-bottom: 30px;
}


.featured-program-heading h2 {
    margin-top: 8px;

    color: #173f50;

    font-size: 34px;
    line-height: 1.25;
}


/* ========================================
   PROGRAM CARD
======================================== */

.featured-program-card {
    display: grid;

    grid-template-columns: 55% 45%;

    min-height: 430px;

    overflow: hidden;

    background-color: #173f50;

    border-radius: 16px;

    text-decoration: none;

    box-shadow: 0 12px 35px rgba(23, 63, 80, 0.10);

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


.featured-program-card:hover {
    transform: translateY(-5px);

    box-shadow: 0 18px 45px rgba(23, 63, 80, 0.16);
}


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

.featured-program-image {
    min-height: 430px;

    overflow: hidden;
}


.featured-program-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.45s ease;
}


.featured-program-card:hover .featured-program-image img {
    transform: scale(1.035);
}


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

.featured-program-content {
    padding: 55px 48px;

    display: flex;
    flex-direction: column;

    justify-content: center;
}


.featured-program-category {
    margin-bottom: 16px;

    color: #8fd1da;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.8px;
}


.featured-program-content h3 {
    margin-bottom: 22px;

    color: #ffffff;

    font-size: 32px;
    line-height: 1.25;
}


.featured-program-content p {
    margin-bottom: 30px;

    color: #d5e1e5;

    font-size: 15px;
    line-height: 1.8;
}


.featured-program-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;
}


.featured-program-link>span {
    transition: transform 0.25s ease;
}


.featured-program-card:hover .featured-program-link>span {
    transform: translateX(5px);
}


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

@media (max-width: 800px) {

    .featured-program {
        margin-top: 60px;
    }


    .featured-program-heading h2 {
        font-size: 28px;
    }


    .featured-program-card {
        grid-template-columns: 1fr;

        min-height: auto;
    }


    .featured-program-image {
        min-height: 0;

        height: 260px;
    }


    .featured-program-content {
        padding: 35px 27px 38px;
    }


    .featured-program-content h3 {
        font-size: 26px;
    }


    .featured-program-content p {
        font-size: 14px;
    }

}

/* ========================================
   PRODUCT-STYLE PROGRAM PAGE
======================================== */

.program-product-breadcrumb {
    padding: 35px 0 5px;

    background-color: #ffffff;
}



/* ========================================
   MAIN PRODUCT AREA
======================================== */

.program-product-page {
    padding: 40px 0 100px;

    background-color: #ffffff;
}


.program-product-layout {
    display: grid;

    grid-template-columns: 54% 46%;

    gap: 75px;

    align-items: start;
}



/* ========================================
   PRODUCT IMAGE
======================================== */

.program-product-gallery {
    position: sticky;

    top: 30px;
}


.program-main-image {
    width: 100%;

    height: 610px;

    overflow: hidden;

    background-color: #f1f4f5;
}


.program-main-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}



/* ========================================
   PRODUCT DETAILS
======================================== */

.program-product-details {
    padding-top: 10px;
}


.program-detail-category {
    margin-bottom: 13px;

    color: #16859a;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.7px;
}


.program-product-details h1 {
    margin-bottom: 17px;

    color: #173f50;

    font-size: 45px;

    line-height: 1.1;
}


.program-detail-subtitle {
    color: #637982;

    font-size: 17px;

    line-height: 1.7;
}


.program-detail-divider {
    height: 1px;

    margin: 28px 0;

    background-color: #e1e8ea;
}



/* Description */

.program-detail-description p {
    margin-bottom: 17px;

    color: #5b7079;

    font-size: 15px;

    line-height: 1.8;
}



/* ========================================
   PRODUCT INFORMATION TABLE
======================================== */

.program-information-table {
    margin: 30px 0;

    border-top: 1px solid #e2e9eb;
}


.program-information-row {
    display: grid;

    grid-template-columns: 120px 1fr;

    gap: 20px;

    padding: 15px 0;

    border-bottom: 1px solid #e2e9eb;
}


.program-information-row span {
    color: #84969d;

    font-size: 12px;
}


.program-information-row strong {
    color: #36535e;

    font-size: 13px;

    font-weight: 600;
}



/* ========================================
   DISCUSS BUTTON
======================================== */

.program-discuss-button {
    display: block;

    width: 100%;

    padding: 17px 25px;

    background-color: #176c7e;

    color: #ffffff;

    text-align: center;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    border-radius: 4px;

    transition: background-color 0.2s ease;
}


.program-discuss-button:hover {
    background-color: #125a69;
}


.program-discuss-note {
    margin-top: 15px;

    color: #85969d;

    font-size: 12px;

    line-height: 1.6;

    text-align: center;
}



/* ========================================
   PROGRAM INFORMATION
======================================== */

.program-product-information {
    padding: 100px 0;

    background-color: #f4f8f8;
}


.program-info-layout {
    display: grid;

    grid-template-columns: 35% 65%;

    gap: 85px;
}


.program-info-title h2 {
    color: #173f50;

    font-size: 38px;

    line-height: 1.2;
}


.program-info-content {
    max-width: 750px;
}


.program-info-content>p {
    margin-bottom: 18px;

    color: #5b7079;

    font-size: 16px;

    line-height: 1.85;
}


.program-info-content h3 {
    margin-top: 35px;

    margin-bottom: 20px;

    color: #173f50;

    font-size: 25px;
}


.program-info-content ul {
    display: grid;

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

    gap: 12px 30px;

    padding: 0;

    list-style: none;
}


.program-info-content li {
    position: relative;

    padding-left: 20px;

    color: #4e6974;

    font-size: 14px;

    line-height: 1.6;
}


.program-info-content li::before {
    content: "✓";

    position: absolute;

    left: 0;

    color: #16859a;

    font-weight: 700;
}



/* ========================================
   RELATED SERVICE
======================================== */

.program-related-service {
    padding: 80px 0;

    background-color: #173f50;
}


.program-related-layout {
    display: grid;

    grid-template-columns: 70% 30%;

    gap: 50px;

    align-items: center;
}


.program-related-layout h2 {
    margin-bottom: 13px;

    color: #ffffff;

    font-size: 34px;
}


.program-related-layout p:not(.section-label) {
    max-width: 650px;

    color: #d6e3e6;

    font-size: 15px;

    line-height: 1.75;
}


.program-related-button {
    justify-self: end;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 19px;

    color: #ffffff;

    text-decoration: none;

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

    border-radius: 4px;
}



/* ========================================
   FINAL DISCUSS
======================================== */

.program-final-discuss {
    padding: 100px 0;
}


.program-final-discuss-inner {
    max-width: 700px;

    margin: 0 auto;

    text-align: center;
}


.program-final-discuss-inner h2 {
    margin-bottom: 15px;

    color: #173f50;

    font-size: 38px;
}


.program-final-discuss-inner>p:not(.section-label) {
    margin-bottom: 28px;

    color: #5b7079;

    font-size: 16px;

    line-height: 1.8;
}



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

@media (max-width: 800px) {

    .program-product-page {
        padding: 25px 0 70px;
    }


    .program-product-layout {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .program-product-gallery {
        position: static;
    }


    .program-main-image {
        height: 390px;
    }


    .program-product-details h1 {
        font-size: 34px;
    }


    .program-information-row {
        grid-template-columns: 95px 1fr;
    }



    .program-product-information {
        padding: 70px 0;
    }


    .program-info-layout {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .program-info-title h2 {
        font-size: 30px;
    }


    .program-info-content ul {
        grid-template-columns: 1fr;
    }



    .program-related-service {
        padding: 60px 0;
    }


    .program-related-layout {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .program-related-button {
        justify-self: start;
    }



    .program-final-discuss {
        padding: 70px 0;
    }


    .program-final-discuss-inner h2 {
        font-size: 30px;
    }

}

/* ========================================
   DRIVING REHAB - STORE STYLE PAGE
======================================== */


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

.rehab-shop-hero {
    position: relative;

    height: 560px;

    overflow: hidden;

    background-color: #eef3f4;
}


.rehab-shop-hero-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.rehab-shop-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.93) 0%,
            rgba(255, 255, 255, 0.78) 32%,
            rgba(255, 255, 255, 0.12) 65%,
            rgba(255, 255, 255, 0) 100%);
}


.rehab-shop-hero-content {
    position: relative;

    z-index: 2;

    height: 100%;

    display: flex;
    flex-direction: column;

    justify-content: center;

    align-items: flex-start;
}


.rehab-shop-eyebrow {
    margin-bottom: 14px;

    color: #176c7e;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.7px;
}


.rehab-shop-hero-content h1 {
    max-width: 650px;

    margin-bottom: 22px;

    color: #173f50;

    font-size: 53px;

    line-height: 1.08;
}


.rehab-shop-hero-content>p {
    max-width: 550px;

    margin-bottom: 27px;

    color: #4f6872;

    font-size: 16px;

    line-height: 1.75;
}


.rehab-shop-hero-button {
    display: inline-block;

    padding: 15px 24px;

    background-color: #176c7e;

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    border-radius: 4px;
}



/* ========================================
   CATEGORY SECTION
======================================== */

.rehab-category-section {
    padding: 90px 0 105px;

    background-color: #ffffff;
}


.rehab-category-heading {
    margin-bottom: 40px;
}


.rehab-category-heading h2 {
    color: #173f50;

    font-size: 36px;
}


.rehab-category-grid {
    display: grid;

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

    gap: 28px;
}


.rehab-category-card {
    color: #173f50;

    text-decoration: none;
}


.rehab-category-image {
    height: 270px;

    margin-bottom: 18px;

    overflow: hidden;

    background-color: #f4f6f6;
}


.rehab-category-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.35s ease;
}


.rehab-category-card:hover img {
    transform: scale(1.035);
}


.rehab-category-card h3 {
    font-size: 18px;

    line-height: 1.4;

    font-weight: 600;
}



/* ========================================
   CATALOGUE
======================================== */

.rehab-catalogue {
    padding: 95px 0 110px;

    background-color: #f8fafb;

    scroll-margin-top: 120px;
}


.rehab-catalogue-top {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 42px;
}


.rehab-catalogue-top h2 {
    color: #173f50;

    font-size: 38px;
}


.rehab-catalogue-enquiry {
    color: #176c7e;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;
}



/* ========================================
   PRODUCT STYLE GRID
======================================== */

.rehab-product-grid {
    display: grid;

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

    gap: 45px 28px;
}


.rehab-product-card {
    background-color: transparent;

    scroll-margin-top: 130px;
}



/* Image */

.rehab-product-image {
    position: relative;

    height: 350px;

    overflow: hidden;

    background-color: #ffffff;
}


.rehab-product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.35s ease;
}


.rehab-product-card:hover .rehab-product-image img {
    transform: scale(1.035);
}



/* Hover */

.rehab-product-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: rgba(23, 63, 80, 0.15);

    opacity: 0;

    transition: opacity 0.25s ease;
}


.rehab-product-card:hover .rehab-product-overlay {
    opacity: 1;
}


.rehab-quick-discuss {
    min-width: 145px;

    padding: 14px 22px;

    background-color: #176c7e;

    color: #ffffff;

    text-align: center;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    border-radius: 24px;
}



/* Info */

.rehab-product-info {
    padding: 19px 0 0;
}


.rehab-product-category {
    margin-bottom: 8px;

    color: #82969d;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.4px;
}


.rehab-product-info h3 {
    margin-bottom: 8px;

    color: #173f50;

    font-size: 18px;

    line-height: 1.4;
}


.rehab-product-status {
    margin-bottom: 13px;

    color: #647982;

    font-size: 14px;
}


.rehab-product-link {
    color: #176c7e;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;
}



/* ========================================
   FEATURE BANNER
======================================== */

.rehab-feature-banner {
    padding: 95px 0;

    background-color: #ffffff;
}


.rehab-feature-banner-inner {
    display: grid;

    grid-template-columns: 45% 55%;

    min-height: 390px;

    background-color: #edf5f5;
}


.rehab-feature-text {
    padding: 55px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.rehab-feature-text h2 {
    margin-bottom: 15px;

    color: #173f50;

    font-size: 34px;
}


.rehab-feature-text>p:not(.section-label) {
    margin-bottom: 25px;

    color: #5b7079;

    font-size: 15px;

    line-height: 1.75;
}


.rehab-banner-button {
    align-self: flex-start;

    display: inline-block;

    padding: 13px 20px;

    background-color: #176c7e;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;
}


.rehab-feature-image {
    overflow: hidden;
}


.rehab-feature-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}



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

.rehab-process-section {
    padding: 100px 0;

    background-color: #f4f8f8;
}


.rehab-process-heading {
    margin-bottom: 45px;
}


.rehab-process-heading h2 {
    color: #173f50;

    font-size: 36px;
}


.rehab-process-grid {
    display: grid;

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

    gap: 25px;
}


.rehab-process-item {
    padding-top: 25px;

    border-top: 2px solid #d8e4e6;
}


.rehab-process-item span {
    display: block;

    margin-bottom: 22px;

    color: #16859a;

    font-size: 11px;
    font-weight: 700;
}


.rehab-process-item h3 {
    margin-bottom: 10px;

    color: #173f50;

    font-size: 20px;
}


.rehab-process-item p {
    color: #647982;

    font-size: 14px;

    line-height: 1.65;
}



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

.rehab-shop-cta {
    padding: 85px 0;

    background-color: #173f50;
}


.rehab-shop-cta-inner {
    display: grid;

    grid-template-columns: 70% 30%;

    align-items: center;

    gap: 50px;
}


.rehab-shop-cta-inner h2 {
    margin-bottom: 12px;

    color: #ffffff;

    font-size: 34px;
}


.rehab-shop-cta-inner p:not(.section-label) {
    max-width: 650px;

    color: #d6e2e5;

    line-height: 1.7;
}



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

@media (max-width: 1000px) {

    .rehab-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .rehab-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}



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

@media (max-width: 800px) {


    /* Hero */

    .rehab-shop-hero {
        height: auto;

        padding-top: 300px;
    }


    .rehab-shop-hero-image {
        height: 300px;

        bottom: auto;
    }


    .rehab-shop-hero-overlay {
        display: none;
    }


    .rehab-shop-hero-content {
        padding-top: 36px;
        padding-bottom: 48px;

        background-color: #f4f8f8;
    }


    .rehab-shop-hero-content h1 {
        font-size: 35px;
    }



    /* Categories */

    .rehab-category-section {
        padding: 65px 0;
    }


    .rehab-category-heading h2 {
        font-size: 29px;
    }


    .rehab-category-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 25px 14px;
    }


    .rehab-category-image {
        height: 180px;
    }


    .rehab-category-card h3 {
        font-size: 15px;
    }



    /* Catalogue */

    .rehab-catalogue {
        padding: 70px 0;
    }


    .rehab-catalogue-top {
        display: block;
    }


    .rehab-catalogue-top h2 {
        margin-bottom: 14px;

        font-size: 30px;
    }


    .rehab-product-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 35px 14px;
    }


    .rehab-product-image {
        height: 220px;
    }


    .rehab-product-overlay {
        display: none;
    }


    .rehab-product-info h3 {
        font-size: 15px;
    }


    .rehab-product-status {
        font-size: 12px;
    }



    /* Banner */

    .rehab-feature-banner {
        padding: 65px 0;
    }


    .rehab-feature-banner-inner {
        grid-template-columns: 1fr;
    }


    .rehab-feature-text {
        padding: 32px 25px;
    }


    .rehab-feature-text h2 {
        font-size: 28px;
    }


    .rehab-feature-image {
        height: 260px;
    }



    /* Process */

    .rehab-process-section {
        padding: 70px 0;
    }


    .rehab-process-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 35px 20px;
    }



    /* CTA */

    .rehab-shop-cta {
        padding: 65px 0;
    }


    .rehab-shop-cta-inner {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .rehab-shop-cta-inner h2 {
        font-size: 28px;
    }

}

/* ========================================
   DRIVING EQUIPMENT CATALOGUE
======================================== */

html {
    scroll-behavior: smooth;
}



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

.equipment-hero {
    position: relative;

    min-height: 540px;

    overflow: hidden;

    background-color: #edf3f4;
}


.equipment-hero-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.equipment-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.88) 30%,
            rgba(255, 255, 255, 0.28) 60%,
            rgba(255, 255, 255, 0.03) 100%);
}


.equipment-hero-content {
    position: relative;

    z-index: 2;

    min-height: 540px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;
}


.equipment-hero-label {
    margin-bottom: 15px;

    color: #176c7e;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.7px;
}


.equipment-hero-content h1 {
    max-width: 620px;

    margin-bottom: 20px;

    color: #173f50;

    font-size: 52px;

    line-height: 1.08;
}


.equipment-hero-content>p {
    max-width: 560px;

    margin-bottom: 28px;

    color: #536d77;

    font-size: 16px;

    line-height: 1.8;
}



/* ========================================
   CATEGORY AREA
======================================== */

.equipment-categories {
    padding: 95px 0 110px;

    background-color: #ffffff;

    scroll-margin-top: 110px;
}


.equipment-section-heading {
    margin-bottom: 45px;
}


.equipment-section-heading h2 {
    margin-bottom: 13px;

    color: #173f50;

    font-size: 38px;

    line-height: 1.2;
}


.equipment-section-heading>p:last-child {
    max-width: 650px;

    color: #657982;

    font-size: 15px;

    line-height: 1.75;
}



/* Category Grid */

.equipment-category-grid {
    display: grid;

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

    gap: 30px;
}


.equipment-category-card {
    display: block;

    color: inherit;

    text-decoration: none;
}


.equipment-category-image {
    height: 340px;

    overflow: hidden;

    background-color: #f1f4f4;
}


.equipment-category-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;
}


.equipment-category-card:hover .equipment-category-image img {
    transform: scale(1.035);
}



.equipment-category-info {
    padding-top: 20px;
}


.equipment-category-info span {
    display: block;

    margin-bottom: 8px;

    color: #8b9ca2;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.3px;
}


.equipment-category-info h3 {
    margin-bottom: 8px;

    color: #173f50;

    font-size: 22px;

    line-height: 1.35;
}


.equipment-category-info p {
    color: #176c7e;

    font-size: 13px;

    font-weight: 600;
}



/* ========================================
   SHOPPING SECTIONS
======================================== */

.equipment-shopping-section {
    padding: 100px 0 115px;

    background-color: #ffffff;

    scroll-margin-top: 120px;
}


.equipment-shopping-alt {
    background-color: #f7f9f9;
}



.equipment-shopping-header {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 40px;

    margin-bottom: 45px;
}


.equipment-shopping-header h2 {
    margin-bottom: 12px;

    color: #173f50;

    font-size: 38px;

    line-height: 1.2;
}


.equipment-shopping-header div>p:last-child {
    max-width: 690px;

    color: #667b84;

    font-size: 15px;

    line-height: 1.75;
}


.equipment-back-link {
    flex-shrink: 0;

    color: #176c7e;

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;
}



/* ========================================
   PRODUCT GRID
======================================== */

.equipment-product-grid {
    display: grid;

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

    gap: 50px 26px;
}



/* ========================================
   PRODUCT CARD
======================================== */

.equipment-product-card {
    min-width: 0;
}



/* Product Image */

.equipment-product-image {
    position: relative;

    height: 310px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background-color: #ffffff;
}


.equipment-shopping-section:not(.equipment-shopping-alt) .equipment-product-image {
    background-color: #f7f9f9;
}


.equipment-product-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: transform 0.3s ease;
}


.equipment-product-card:hover .equipment-product-image img {
    transform: scale(1.035);
}



/* ========================================
   PRODUCT INFORMATION
======================================== */

.equipment-product-info {
    padding-top: 18px;
}


.equipment-product-category {
    margin-bottom: 7px;

    color: #87989f;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.25px;
}


.equipment-product-info h3 {
    margin-bottom: 9px;

    color: #173f50;

    font-size: 17px;

    line-height: 1.4;
}


.equipment-product-info>p:not(.equipment-product-category) {
    margin-bottom: 14px;

    color: #6a7d85;

    font-size: 13px;

    line-height: 1.65;
}


.equipment-product-link {
    color: #176c7e;

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;
}


.equipment-product-link:hover {
    text-decoration: underline;
}



/* ========================================
   GUIDANCE CTA
======================================== */

.equipment-guidance-section {
    padding: 85px 0;

    background-color: #173f50;
}


.equipment-guidance-inner {
    display: grid;

    grid-template-columns: 70% 30%;

    gap: 50px;

    align-items: center;
}


.equipment-guidance-inner h2 {
    margin-bottom: 12px;

    color: #ffffff;

    font-size: 34px;
}


.equipment-guidance-inner p:not(.section-label) {
    max-width: 680px;

    color: #d5e2e5;

    font-size: 15px;

    line-height: 1.75;
}



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

@media (max-width: 1100px) {

    .equipment-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }


    .equipment-category-image {
        height: 290px;
    }

}



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

@media (max-width: 800px) {


    /* Hero */

    .equipment-hero {
        min-height: auto;

        padding-top: 290px;
    }


    .equipment-hero-image {
        height: 290px;

        bottom: auto;
    }


    .equipment-hero-overlay {
        display: none;
    }


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

        padding-top: 38px;
        padding-bottom: 50px;

        background-color: #f4f8f8;
    }


    .equipment-hero-content h1 {
        font-size: 35px;
    }



    /* Categories */

    .equipment-categories {
        padding: 65px 0 75px;
    }


    .equipment-section-heading h2 {
        font-size: 30px;
    }


    .equipment-category-grid {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    .equipment-category-image {
        height: 285px;
    }



    /* Shopping Section */

    .equipment-shopping-section {
        padding: 70px 0 80px;

        scroll-margin-top: 100px;
    }


    .equipment-shopping-header {
        display: block;

        margin-bottom: 35px;
    }


    .equipment-shopping-header h2 {
        font-size: 29px;
    }


    .equipment-back-link {
        display: inline-block;

        margin-top: 17px;
    }



    /*
       2-column mobile catalogue,
       similar to shopping sites
    */

    .equipment-product-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 38px 14px;
    }


    .equipment-product-image {
        height: 205px;
    }


    .equipment-product-info h3 {
        font-size: 14px;
    }


    .equipment-product-info>p:not(.equipment-product-category) {
        font-size: 11px;
    }


    .equipment-product-link {
        font-size: 11px;
    }



    /* CTA */

    .equipment-guidance-section {
        padding: 65px 0;
    }


    .equipment-guidance-inner {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .equipment-guidance-inner h2 {
        font-size: 28px;
    }

}

/* ========================================
   EQUIPMENT FEATURE SECTIONS
   Category 2 & 3
======================================== */

.equipment-feature-section {
    padding: 105px 0;

    background-color: #ffffff;

    scroll-margin-top: 120px;
}


.equipment-feature-alt {
    background-color: #f7f9f9;
}


.equipment-feature-grid {
    display: grid;

    grid-template-columns: 47% 53%;

    gap: 75px;

    align-items: center;
}


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

.equipment-feature-image {
    height: 620px;

    overflow: hidden;

    background-color: #eef3f4;

    border-radius: 12px;
}


.equipment-feature-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


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

.equipment-feature-content {
    min-width: 0;
}


.equipment-feature-content h2 {
    margin-bottom: 20px;

    color: #173f50;

    font-size: 40px;

    line-height: 1.2;
}


.equipment-feature-intro {
    margin-bottom: 17px;

    color: #45636e;

    font-size: 17px !important;

    line-height: 1.8;
}


.equipment-feature-content>p:not(.section-label) {
    margin-bottom: 18px;

    color: #607680;

    font-size: 15px;

    line-height: 1.8;
}


/* ========================================
   FEATURE LIST
======================================== */

.equipment-feature-list {
    margin-top: 32px;

    border-top: 1px solid #dfe7e9;
}


.equipment-feature-list>div {
    display: grid;

    grid-template-columns: 48px 1fr;

    gap: 18px;

    padding: 20px 0;

    border-bottom: 1px solid #dfe7e9;
}


.equipment-feature-list>div>span {
    padding-top: 3px;

    color: #16859a;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1px;
}


.equipment-feature-list h3 {
    margin-bottom: 5px;

    color: #173f50;

    font-size: 17px;

    line-height: 1.4;
}


.equipment-feature-list p {
    color: #697d85;

    font-size: 13px;

    line-height: 1.65;
}


/* ========================================
   ACTIONS
======================================== */

.equipment-feature-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 24px;

    margin-top: 32px;
}


.equipment-feature-actions .equipment-back-link {
    margin: 0;
}


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

@media (max-width: 1000px) {

    .equipment-feature-grid {
        gap: 45px;
    }


    .equipment-feature-image {
        height: 520px;
    }


    .equipment-feature-content h2 {
        font-size: 34px;
    }

}


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

@media (max-width: 800px) {

    .equipment-feature-section {
        padding: 70px 0;

        scroll-margin-top: 100px;
    }


    .equipment-feature-grid {
        grid-template-columns: 1fr;

        gap: 36px;
    }


    .equipment-feature-image {
        height: 300px;

        border-radius: 9px;
    }


    .equipment-feature-content h2 {
        font-size: 29px;
    }


    .equipment-feature-intro {
        font-size: 15px !important;
    }


    .equipment-feature-list>div {
        grid-template-columns: 38px 1fr;

        gap: 10px;
    }


    .equipment-feature-actions {
        align-items: flex-start;

        flex-direction: column;

        gap: 18px;
    }

}

/* ========================================
   OT DRIVING REHAB INTRODUCTION
======================================== */

.driving-rehab-intro {
    padding: 105px 0 0;

    background-color: #ffffff;
}


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

.driving-rehab-intro-grid {
    display: grid;

    grid-template-columns: 42% 58%;

    gap: 85px;

    padding-bottom: 100px;
}


.driving-rehab-intro-heading h2 {
    max-width: 520px;

    color: #173f50;

    font-size: 42px;

    line-height: 1.18;
}


.driving-rehab-intro-copy {
    max-width: 740px;
}


.driving-rehab-intro-copy p {
    margin-bottom: 18px;

    color: #60757e;

    font-size: 16px;

    line-height: 1.85;
}


.driving-rehab-intro-copy .driving-rehab-lead {
    color: #365560;

    font-size: 18px;

    line-height: 1.8;
}



/* ========================================
   WHAT THE PROGRAM INVOLVES
======================================== */

.driving-rehab-involve {
    padding: 95px 0;

    border-top: 1px solid #e1e9eb;
}


.driving-rehab-section-heading {
    max-width: 760px;

    margin-bottom: 48px;
}


.driving-rehab-section-heading h2 {
    margin-bottom: 16px;

    color: #173f50;

    font-size: 38px;

    line-height: 1.2;
}


.driving-rehab-section-heading>p:last-child {
    color: #637982;

    font-size: 15px;

    line-height: 1.8;
}



/* Items */

.driving-rehab-involve-grid {
    display: grid;

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

    gap: 0 50px;

    border-top: 1px solid #e0e8ea;
}


.driving-rehab-involve-item {
    display: grid;

    grid-template-columns: 45px 1fr;

    gap: 15px;

    min-height: 105px;

    padding: 23px 0;

    border-bottom: 1px solid #e0e8ea;
}


.driving-rehab-involve-item span {
    padding-top: 2px;

    color: #16859a;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;
}


.driving-rehab-involve-item p {
    color: #536c76;

    font-size: 14px;

    line-height: 1.7;
}



/* ========================================
   PSYCHOLOGICAL REHAB
======================================== */

.driving-rehab-psychology {
    padding: 85px 70px;

    background-color: #173f50;

    border-radius: 15px;
}


.driving-rehab-psychology-grid {
    display: grid;

    grid-template-columns: 40% 60%;

    gap: 75px;
}


.driving-rehab-psychology-heading h2 {
    margin-bottom: 20px;

    color: #ffffff;

    font-size: 37px;

    line-height: 1.2;
}


.driving-rehab-psychology-heading>p:not(.section-label) {
    color: #d1e0e4;

    font-size: 15px;

    line-height: 1.8;
}


.driving-rehab-psychology-content>p {
    margin-bottom: 25px;

    color: #d6e3e6;

    font-size: 15px;

    line-height: 1.8;
}



/* Psychology List */

.driving-rehab-psychology-list {
    display: grid;

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

    gap: 0 30px;

    margin-bottom: 28px;

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


.driving-rehab-psychology-list div {
    position: relative;

    padding: 15px 0 15px 22px;

    color: #ffffff;

    font-size: 13px;

    line-height: 1.5;

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


.driving-rehab-psychology-list div::before {
    content: "✓";

    position: absolute;

    left: 0;

    color: #8fd0da;

    font-weight: 700;
}


.driving-rehab-psychology-note {
    color: #b9ced3 !important;

    font-size: 13px !important;
}



/* ========================================
   OUR GOAL
======================================== */

.driving-rehab-goal {
    display: grid;

    grid-template-columns: 25% 75%;

    gap: 60px;

    padding: 100px 0;
}


.driving-rehab-goal-number {
    padding-top: 8px;

    color: #16859a;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.7px;
}


.driving-rehab-goal-content {
    max-width: 800px;
}


.driving-rehab-goal-content h2 {
    margin-bottom: 20px;

    color: #173f50;

    font-size: 40px;

    line-height: 1.2;
}


.driving-rehab-goal-content p {
    margin-bottom: 17px;

    color: #60757e;

    font-size: 16px;

    line-height: 1.85;
}



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

@media (max-width: 1000px) {

    .driving-rehab-intro-grid {
        gap: 50px;
    }


    .driving-rehab-psychology {
        padding: 60px 45px;
    }


    .driving-rehab-psychology-grid {
        gap: 50px;
    }

}



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

@media (max-width: 800px) {

    .driving-rehab-intro {
        padding-top: 70px;
    }


    /* Intro */

    .driving-rehab-intro-grid {
        grid-template-columns: 1fr;

        gap: 30px;

        padding-bottom: 70px;
    }


    .driving-rehab-intro-heading h2 {
        font-size: 31px;
    }


    .driving-rehab-intro-copy .driving-rehab-lead {
        font-size: 16px;
    }


    .driving-rehab-intro-copy p {
        font-size: 15px;
    }



    /* Involvement */

    .driving-rehab-involve {
        padding: 70px 0;
    }


    .driving-rehab-section-heading h2 {
        font-size: 30px;
    }


    .driving-rehab-involve-grid {
        grid-template-columns: 1fr;
    }


    .driving-rehab-involve-item {
        min-height: auto;

        grid-template-columns: 38px 1fr;
    }



    /* Psychology */

    .driving-rehab-psychology {
        padding: 45px 25px;

        border-radius: 10px;
    }


    .driving-rehab-psychology-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .driving-rehab-psychology-heading h2 {
        font-size: 29px;
    }


    .driving-rehab-psychology-list {
        grid-template-columns: 1fr;
    }



    /* Goal */

    .driving-rehab-goal {
        grid-template-columns: 1fr;

        gap: 18px;

        padding: 70px 0;
    }


    .driving-rehab-goal-content h2 {
        font-size: 30px;
    }


    .driving-rehab-goal-content p {
        font-size: 15px;
    }

}

/* ========================================
   EQUIPMENT FEATURE SUMMARY
======================================== */

.equipment-feature-summary {
    margin-top: 35px;

    padding: 28px 30px;

    background-color: #eef5f5;

    border-left: 3px solid #16859a;

    border-radius: 6px;
}


.equipment-feature-summary-label {
    margin-bottom: 10px !important;

    color: #16859a !important;

    font-size: 9px !important;
    font-weight: 700;

    letter-spacing: 1.4px;
}


.equipment-feature-summary h3 {
    margin-bottom: 12px;

    color: #173f50;

    font-size: 20px;

    line-height: 1.4;
}


.equipment-feature-summary p:not(.equipment-feature-summary-label) {
    margin-bottom: 10px;

    color: #5f747d;

    font-size: 13px;

    line-height: 1.75;
}


.equipment-feature-summary p:last-child {
    margin-bottom: 0;
}


@media (max-width: 800px) {

    .equipment-feature-summary {
        padding: 24px 20px;
    }

}

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

.faq-answer-list {
    margin: 15px 0 18px;
    padding: 0;

    list-style: none;
}


.faq-answer-list li {
    position: relative;

    margin-bottom: 9px;

    padding-left: 22px;

    color: #5b7079;

    font-size: 14px;
    line-height: 1.7;
}


.faq-answer-list li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 0;

    color: #16859a;

    font-weight: 700;
}


.faq-answer .faq-link {
    display: inline-block;

    margin-top: 8px;
}
/* ========================================
   REFERRAL FORM
======================================== */

.referral-form-section {
    padding: 105px 0;

    background-color: #f4f8f8;

    scroll-margin-top: 110px;
}


.referral-form-heading {
    max-width: 720px;

    margin: 0 auto 45px;

    text-align: center;
}


.referral-form-heading h2 {
    margin-bottom: 15px;

    color: #173f50;

    font-size: 42px;

    line-height: 1.2;
}


.referral-form-heading>p:last-child {
    color: #637982;

    font-size: 16px;

    line-height: 1.75;
}



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

.referral-form-card {
    max-width: 900px;

    margin: 0 auto;

    padding: 55px 60px;

    background-color: #ffffff;

    border: 1px solid #e3eaec;

    border-radius: 16px;

    box-shadow: 0 16px 45px rgba(23, 63, 80, 0.06);
}



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

.referral-form-block {
    padding-bottom: 45px;

    margin-bottom: 45px;

    border-bottom: 1px solid #e2e9eb;
}


.referral-form-block-heading {
    display: grid;

    grid-template-columns: 44px 1fr;

    gap: 15px;

    margin-bottom: 30px;
}


.referral-form-block-heading>span {
    padding-top: 4px;

    color: #16859a;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1px;
}


.referral-form-block-heading h3 {
    margin-bottom: 5px;

    color: #173f50;

    font-size: 23px;
}


.referral-form-block-heading p {
    color: #71858d;

    font-size: 13px;

    line-height: 1.6;
}



/* ========================================
   FIELDS
======================================== */

.referral-fields-grid {
    display: grid;

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

    gap: 24px 28px;
}


.referral-field {
    min-width: 0;
}


.referral-field-full {
    width: 100%;
}


.referral-field label {
    display: block;

    margin-bottom: 9px;

    color: #405b66;

    font-size: 13px;

    font-weight: 600;
}


.referral-field label span {
    color: #bd4a4a;
}



/* ========================================
   INPUTS
======================================== */

.referral-field input,
.referral-field select,
.referral-field textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 14px 15px;

    background-color: #ffffff;

    border: 1px solid #cad6d9;

    border-radius: 5px;

    color: #334f59;

    font: inherit;

    font-size: 14px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.referral-field textarea {
    min-height: 140px;

    resize: vertical;
}


.referral-field input:focus,
.referral-field select:focus,
.referral-field textarea:focus {
    border-color: #16859a;

    box-shadow: 0 0 0 3px rgba(22, 133, 154, 0.08);
}


.referral-field input::placeholder,
.referral-field textarea::placeholder {
    color: #9aa9ae;
}



/* ========================================
   FIELD NOTE
======================================== */

.referral-field-note {
    margin-top: 9px;

    color: #86979d;

    font-size: 11px;

    line-height: 1.6;
}



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

.referral-consent {
    margin-bottom: 30px;
}


.referral-checkbox {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    cursor: pointer;
}


.referral-checkbox input {
    width: 17px;
    height: 17px;

    margin-top: 3px;

    flex: 0 0 auto;
}


.referral-checkbox span {
    color: #627780;

    font-size: 12px;

    line-height: 1.7;
}



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

.referral-submit-area {
    text-align: center;
}


.referral-submit-button {
    min-width: 250px;

    border: 0;

    cursor: pointer;
}


.referral-submit-area>p {
    max-width: 500px;

    margin: 15px auto 0;

    color: #829399;

    font-size: 11px;

    line-height: 1.6;
}



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

.referral-form-message {
    display: none;

    margin-bottom: 25px;

    padding: 14px 17px;

    border-radius: 5px;

    font-size: 13px;

    line-height: 1.6;
}


.referral-form-message.error {
    display: block;

    background-color: #fff2f2;

    color: #8b3838;

    border: 1px solid #efd4d4;
}


.referral-form-message.success {
    display: block;

    background-color: #eef8f6;

    color: #28675d;

    border: 1px solid #cfe7e2;
}



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

@media (max-width: 800px) {

    .referral-form-section {
        padding: 70px 0;
    }


    .referral-form-heading {
        text-align: left;
    }


    .referral-form-heading h2 {
        font-size: 31px;
    }


    .referral-form-card {
        padding: 32px 22px;

        border-radius: 10px;
    }


    .referral-fields-grid {
        grid-template-columns: 1fr;

        gap: 21px;
    }


    .referral-form-block {
        padding-bottom: 35px;

        margin-bottom: 35px;
    }


    .referral-form-block-heading {
        grid-template-columns: 36px 1fr;

        margin-bottom: 25px;
    }


    .referral-form-block-heading h3 {
        font-size: 21px;
    }


    .referral-submit-button {
        width: 100%;

        min-width: 0;
    }

}

/* =========================================================
   FINAL HOMEPAGE DESIGN SYSTEM
   Scoped only to index.html through body.home-page
========================================================= */


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

.home-page .header {
    background-color: #ffffff;

    border-bottom: 1px solid #e7edef;
}


/* Navbar */

.home-page .navbar {
    height: 76px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* Logo */

.home-page .brand-link {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    text-decoration: none;
}


.home-page .header .header-logo {
    display: block;

    width: 108px;
    height: 64px;

    max-width: 108px;
    max-height: 64px;

    object-fit: contain;
}



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

.home-page .nav-links {
    display: flex;

    align-items: center;

    gap: 34px;
}


.home-page .nav-links a {
    position: relative;

    color: #294754;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.4;

    text-decoration: none;

    transition: color 0.2s ease;
}


.home-page .nav-links a:hover {
    color: #16859a;
}


.home-page .nav-links a.active {
    color: #16859a;

    font-weight: 800;
}


.home-page .nav-links a.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -8px;

    height: 2px;

    background-color: #16859a;

    border-radius: 2px;
}



/* Desktop Contact Button */

.home-page .contact-button {
    padding: 12px 23px;

    background-color: #176c7e;

    color: #ffffff;

    border-radius: 6px;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.4;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


.home-page .contact-button:hover {
    background-color: #125c6c;

    transform: translateY(-1px);
}



/* =========================================================
   HEADER HIGHLIGHT BAR
========================================================= */

.home-page .header-highlight {
    background-color: #172350;
}


.home-page .header-highlight-content {
    min-height: 42px;

    display: flex;

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

    gap: 17px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 1px;

    text-align: center;
}


.home-page .highlight-divider {
    color: #d4ad45;

    font-size: 16px;

    line-height: 1;
}



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

.home-page .hero {
    padding: 52px 0 66px;

    background-color: #f4f8f8;
}


.home-page .hero-content {
    display: flex;

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

    gap: 70px;
}


.home-page .hero-text {
    width: 52%;
}


.home-page .hero-label {
    margin-bottom: 20px;

    color: #16859a;

    font-size: 14px;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 1.7px;
}


.home-page .hero h1 {
    margin-bottom: 26px;

    color: #173f50;

    font-size: 54px;
    font-weight: 700;

    line-height: 1.12;
}


.home-page .hero-description {
    max-width: 600px;

    margin-bottom: 34px;

    color: #536b75;

    font-size: 18px;

    line-height: 1.75;
}


.home-page .hero-image {
    width: 48%;
}


.home-page .hero-photo {
    display: block;

    width: 100%;
    height: 430px;

    object-fit: cover;

    border-radius: 12px;
}



/* =========================================================
   BUTTON SYSTEM
========================================================= */

.home-page .primary-button,
.home-page .secondary-button,
.home-page .light-button {
    display: inline-block;

    padding: 13px 24px;

    border-radius: 6px;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.4;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.home-page .primary-button {
    background-color: #176c7e;

    color: #ffffff;
}


.home-page .primary-button:hover {
    background-color: #125c6c;

    transform: translateY(-2px);
}


.home-page .secondary-button {
    border: 1px solid #176c7e;

    color: #176c7e;

    background-color: transparent;
}


.home-page .secondary-button:hover {
    background-color: #176c7e;

    color: #ffffff;

    transform: translateY(-2px);
}


.home-page .light-button {
    background-color: #ffffff;

    color: #174f61;
}


.home-page .light-button:hover {
    background-color: #edf5f6;

    transform: translateY(-2px);
}



/* =========================================================
   UNIVERSAL HOMEPAGE SECTION TYPOGRAPHY
========================================================= */

/*
   Label = 15px
   H2    = 42px
   Body  = 18px
*/

.home-page .home-section-heading>.section-label {
    margin-bottom: 17px;

    color: #16859a;

    font-size: 15px;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 1.7px;
}


.home-page .home-section-heading>h2 {
    margin-bottom: 22px;

    color: #173f50;

    font-size: 42px;
    font-weight: 700;

    line-height: 1.17;
}


.home-page .home-section-heading>p:not(.section-label) {
    color: #536b75;

    font-size: 18px;

    line-height: 1.75;
}


.home-page .home-section-heading>p:not(.section-label)+p {
    margin-top: 17px;
}



/* =========================================================
   DARK HEADING VARIANT
========================================================= */

.home-page .home-section-heading-dark>.section-label {
    color: #91d2dc;
}


.home-page .home-section-heading-dark>h2 {
    color: #ffffff;
}


.home-page .home-section-heading-dark>p:not(.section-label) {
    color: #d6e5e9;
}



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

.home-page .services {
    padding: 100px 0;

    background-color: #ffffff;
}


.home-page .services .home-section-heading {
    max-width: 740px;

    margin-bottom: 55px;
}


.home-page .services-grid {
    display: grid;

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

    gap: 26px;
}



/* Service Cards */

.home-page .service-card {
    padding: 38px 40px;

    background-color: #ffffff;

    border: 1px solid #dce6e9;

    border-radius: 11px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.home-page .service-card:hover {
    transform: translateY(-4px);

    border-color: #c8dce1;

    box-shadow:
        0 14px 34px rgba(23, 63, 80, 0.08);
}



/* Service Numbers */

.home-page .service-number {
    display: inline-flex;

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

    min-width: 50px;
    height: 42px;

    margin-bottom: 25px;

    padding: 0 13px;

    background-color: #eaf5f6;

    border: 1px solid #cce4e8;

    border-radius: 999px;

    color: #117c90;

    font-size: 17px;
    font-weight: 800;

    line-height: 1;
}


.home-page .service-card h3 {
    margin-bottom: 12px;

    color: #173f50;

    font-size: 22px;
    font-weight: 700;

    line-height: 1.4;
}


.home-page .service-card p {
    color: #607680;

    font-size: 16px;

    line-height: 1.72;
}


.home-page .services-button-wrapper {
    margin-top: 42px;
}



/* =========================================================
   WHO WE SUPPORT
========================================================= */

.home-page .support-section {
    padding: 100px 0;

    background-color: #f4f8f8;
}


.home-page .support-content {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(0, 1fr);

    gap: 85px;

    align-items: start;
}


.home-page .support-text {
    max-width: 570px;
}


.home-page .support-list {
    display: flex;

    flex-direction: column;
}



/* Support Item */

.home-page .support-item {
    display: grid;

    grid-template-columns: 52px 1fr;

    gap: 24px;

    padding: 29px 0;

    border-bottom: 1px solid #d8e4e7;
}


.home-page .support-item:first-child {
    padding-top: 0;
}


.home-page .support-item>span {
    display: inline-flex;

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

    width: 50px;
    height: 42px;

    background-color: #eaf5f6;

    border: 1px solid #cce4e8;

    border-radius: 999px;

    color: #117c90;

    font-size: 17px;
    font-weight: 800;

    line-height: 1;
}


.home-page .support-item h3 {
    margin-bottom: 7px;

    color: #173f50;

    font-size: 22px;
    font-weight: 700;

    line-height: 1.35;
}


.home-page .support-item p {
    color: #607680;

    font-size: 16px;

    line-height: 1.7;
}



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

.home-page .about {
    padding: 100px 0;

    background-color: #f4f8f8;
}


.home-page .about-content {
    display: flex;

    align-items: center;

    gap: 70px;
}


.home-page .about-image,
.home-page .about-text {
    width: 50%;
}


.home-page .about-photo {
    display: block;

    width: 100%;
    height: 460px;

    object-fit: cover;

    object-position: center;

    border-radius: 12px;
}


.home-page .about-text .primary-button {
    margin-top: 10px;
}



/* =========================================================
   REFERRERS
========================================================= */

.home-page .referrers {
    padding: 100px 0;

    background-color: #174f61;
}


.home-page .referrer-content {
    max-width: 820px;
}



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

.home-page .faq-section {
    padding: 100px 0;

    background-color: #f4f8f8;
}


.home-page .faq-layout {
    display: grid;

    grid-template-columns: 38% 62%;

    gap: 80px;
}


.home-page .faq-heading {
    max-width: 430px;
}


.home-page .faq-view-all {
    margin-top: 25px;
}



/* FAQ Items */

.home-page .faq-item {
    border-bottom: 1px solid #d7e2e5;
}


.home-page .faq-item:first-child {
    border-top: 1px solid #d7e2e5;
}


.home-page .faq-question {
    width: 100%;

    padding: 25px 0;

    display: flex;

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

    gap: 25px;

    background: transparent;

    border: none;

    color: #173f50;

    font-family: inherit;

    font-size: 18px;
    font-weight: 700;

    line-height: 1.45;

    text-align: left;

    cursor: pointer;
}


.home-page .faq-icon {
    flex-shrink: 0;

    color: #16859a;

    font-size: 26px;

    font-weight: 400;
}


.home-page .faq-answer {
    display: none;

    padding: 0 45px 24px 0;
}


.home-page .faq-item.open .faq-answer {
    display: block;
}


.home-page .faq-answer p {
    color: #5b7079;

    font-size: 16px;

    line-height: 1.75;
}


.home-page .faq-link {
    display: inline-block;

    margin-top: 12px;

    color: #176c7e;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
}



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

.home-page .contact-section {
    padding: 95px 0 105px;

    background-color: #ffffff;
}


.home-page .contact-section .section-heading {
    max-width: 720px;

    margin-bottom: 35px;
}



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

@media (max-width: 1000px) {

    .home-page .nav-links {
        gap: 22px;
    }


    .home-page .nav-links a {
        font-size: 15px;
    }


    .home-page .hero h1 {
        font-size: 46px;
    }


    .home-page .support-content {
        gap: 55px;
    }


    .home-page .about-content {
        gap: 50px;
    }

}



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

@media (max-width: 800px) {


    /* Header */

    .home-page .navbar {
        height: 72px;
    }


    .home-page .brand-link {
        width: auto;
        height: 58px;

        max-width: 165px;

        overflow: hidden;
    }


    .home-page .header .header-logo {
        width: auto;
        height: 54px;

        max-width: 155px;
        max-height: 54px;

        object-fit: contain;
    }



    /* Desktop Contact hidden */

    .home-page .contact-button {
        display: none;
    }



    /* Mobile menu */

    .home-page .nav-links {
        display: none;
    }


    .home-page .nav-links.mobile-open {
        display: flex;
    }


    .home-page .nav-links a {
        padding: 15px 0;

        font-size: 17px;
        font-weight: 650;
    }


    .home-page .nav-links a.active::after {
        display: none;
    }



    /* Highlight Bar */

    .home-page .header-highlight-content {
        min-height: 42px;

        padding: 7px 0;

        gap: 7px;

        font-size: 9px;
        font-weight: 750;

        line-height: 1.4;

        letter-spacing: 0.55px;
    }


    .home-page .header-highlight-content span:nth-child(4),

    .home-page .header-highlight-content span:nth-child(5) {
        display: none;
    }



    /* Hero */

    .home-page .hero {
        padding: 55px 0;
    }


    .home-page .hero-content {
        flex-direction: column;

        gap: 36px;
    }


    .home-page .hero-text,
    .home-page .hero-image {
        width: 100%;
    }


    .home-page .hero-label {
        font-size: 12px;

        letter-spacing: 1.4px;
    }


    .home-page .hero h1 {
        font-size: 34px;

        line-height: 1.15;
    }


    .home-page .hero-description {
        font-size: 16px;

        line-height: 1.7;
    }


    .home-page .hero-photo {
        height: 270px;
    }



    /* Universal Section Type */

    .home-page .home-section-heading>.section-label {
        margin-bottom: 13px;

        font-size: 12px;
        font-weight: 800;

        letter-spacing: 1.4px;
    }


    .home-page .home-section-heading>h2 {
        margin-bottom: 18px;

        font-size: 31px;

        line-height: 1.2;
    }


    .home-page .home-section-heading>p:not(.section-label) {
        font-size: 16px;

        line-height: 1.7;
    }



    /* Sections */

    .home-page .services,
    .home-page .support-section,
    .home-page .about,
    .home-page .referrers,
    .home-page .faq-section,
    .home-page .contact-section {
        padding: 70px 0;
    }



    /* Services */

    .home-page .services-grid {
        grid-template-columns: 1fr;

        gap: 22px;
    }


    .home-page .service-card {
        padding: 30px 27px;
    }


    .home-page .service-number {
        min-width: 46px;
        height: 39px;

        font-size: 16px;
    }


    .home-page .service-card h3 {
        font-size: 20px;
    }


    .home-page .service-card p {
        font-size: 15px;
    }



    /* Support */

    .home-page .support-content {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .home-page .support-text {
        max-width: none;
    }


    .home-page .support-item {
        grid-template-columns: 46px 1fr;

        gap: 16px;

        padding: 24px 0;
    }


    .home-page .support-item>span {
        width: 44px;
        height: 38px;

        font-size: 15px;
    }


    .home-page .support-item h3 {
        font-size: 20px;
    }


    .home-page .support-item p {
        font-size: 15px;
    }



    /* About */

    .home-page .about-content {
        flex-direction: column;

        gap: 40px;
    }


    .home-page .about-image,
    .home-page .about-text {
        width: 100%;
    }


    .home-page .about-photo {
            height: 300px;
    }



    /* FAQ */

    .home-page .faq-layout {
        grid-template-columns: 1fr;

        gap: 42px;
    }


    .home-page .faq-heading {
        max-width: none;
    }


    .home-page .faq-question {
        padding: 21px 0;

        font-size: 17px;
    }



    /* Buttons */

    .home-page .primary-button,
    .home-page .secondary-button,
    .home-page .light-button {
        font-size: 15px;
    }

}



/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 420px) {

    .home-page .hero h1 {
        font-size: 31px;
    }


    .home-page .home-section-heading>h2 {
        font-size: 29px;
    }


    .home-page .hero-buttons {
        width: 100%;
    }


    .home-page .hero-buttons .primary-button,
    .home-page .hero-buttons .secondary-button {
        flex: 1;

        text-align: center;
    }

}

/* =========================================================
   SERVICES PAGE FINAL DESIGN
   Matched to Homepage Visual Style
========================================================= */


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

.services-page .header {
    background-color: #ffffff;

    border-bottom: 1px solid #e7edef;
}


.services-page .navbar {
    height: 76px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}



/* Logo */

.services-page .brand-link {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    text-decoration: none;
}


.services-page .header .header-logo {
    display: block;

    width: 108px;
    height: 64px;

    max-width: 108px;
    max-height: 64px;

    object-fit: contain;
}



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

.services-page .nav-links {
    display: flex;

    align-items: center;

    gap: 34px;
}


.services-page .nav-links a {
    position: relative;

    color: #294754;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.4;

    text-decoration: none;

    transition: color 0.2s ease;
}


.services-page .nav-links a:hover {
    color: #16859a;
}


.services-page .nav-links a.active {
    color: #16859a;

    font-weight: 800;
}


.services-page .nav-links a.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: -8px;

    height: 2px;

    background-color: #16859a;

    border-radius: 2px;
}



/* Contact Button */

.services-page .contact-button {
    padding: 12px 23px;

    background-color: #176c7e;

    color: #ffffff;

    border-radius: 6px;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.4;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


.services-page .contact-button:hover {
    background-color: #125c6c;

    transform: translateY(-1px);
}



/* =========================================================
   HIGHLIGHT BAR
========================================================= */

.services-page .header-highlight {
    background-color: #172350;
}


.services-page .header-highlight-content {
    min-height: 42px;

    display: flex;

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

    gap: 17px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 1px;

    text-align: center;
}


.services-page .highlight-divider {
    color: #d4ad45;

    font-size: 16px;

    line-height: 1;
}



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

.services-page .page-hero {
    padding: 62px 0 68px;

    background-color: #f4f8f8;
}


.services-page .page-hero-content {
    max-width: 800px;
}


.services-page .page-hero .hero-label {
    margin-bottom: 17px;

    color: #16859a;

    font-size: 14px;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 1.7px;
}


.services-page .page-hero h1 {
    max-width: 760px;

    margin-bottom: 22px;

    color: #173f50;

    font-size: 50px;
    font-weight: 700;

    line-height: 1.12;
}


.services-page .page-hero-content>p:last-child {
    max-width: 700px;

    color: #536b75;

    font-size: 18px;

    line-height: 1.75;
}



/* =========================================================
   SERVICES OVERVIEW
========================================================= */

.services-page .service-overview {
    padding: 85px 0 105px;

    background-color: #ffffff;
}


.services-page .service-overview-grid {
    display: grid;

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

    gap: 28px;
}



/* Cards */

.services-page .service-overview-card {
    overflow: hidden;

    background-color: #ffffff;

    border: 1px solid #dce6e9;

    border-radius: 14px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.services-page .service-overview-card:hover {
    transform: translateY(-5px);

    border-color: #c9dce1;

    box-shadow:
        0 14px 35px rgba(23, 63, 80, 0.10);
}



/* Image */

.services-page .service-overview-image {
    width: 100%;
    height: 230px;

    overflow: hidden;

    background-color: #dce8e9;
}


.services-page .service-overview-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.35s ease;
}


.services-page .service-overview-card:hover .service-overview-image img {
    transform: scale(1.035);
}



/* Content */

.services-page .service-overview-content {
    min-height: 180px;

    padding: 27px;

    display: flex;

    flex-direction: column;
}



/* Category */

.services-page .service-category {
    margin-bottom: 12px;

    color: #16859a;

    font-size: 12px;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 1.4px;
}



/* Card Title */

.services-page .service-overview-content h3 {
    margin-bottom: 23px;

    color: #173f50;

    font-size: 22px;
    font-weight: 700;

    line-height: 1.38;
}



/* Learn More */

.services-page .service-learn-more {
    margin-top: auto;

    color: #176c7e;

    font-size: 15px;
    font-weight: 700;

    text-decoration: underline;

    text-underline-offset: 4px;
}


.services-page .service-learn-more:hover {
    color: #104f5d;
}



/* =========================================================
   FEATURED PROGRAM HEADING
========================================================= */

.services-page .featured-program {
    margin-top: 90px;
}


.services-page .featured-program-heading {
    max-width: 700px;

    margin-bottom: 32px;
}


.services-page .featured-program-heading .section-label {
    margin-bottom: 14px;

    color: #16859a;

    font-size: 14px;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 1.6px;
}


.services-page .featured-program-heading h2 {
    margin: 0;

    color: #173f50;

    font-size: 38px;
    font-weight: 700;

    line-height: 1.2;
}



/* =========================================================
   FEATURED PROGRAM CARD
========================================================= */

.services-page .featured-program-category {
    margin-bottom: 16px;

    color: #8fd1da;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.6px;
}


.services-page .featured-program-content h3 {
    margin-bottom: 22px;

    color: #ffffff;

    font-size: 32px;
    font-weight: 700;

    line-height: 1.25;
}


.services-page .featured-program-content p {
    margin-bottom: 30px;

    color: #d5e1e5;

    font-size: 16px;

    line-height: 1.75;
}


.services-page .featured-program-link {
    font-size: 15px;

    font-weight: 700;
}



/* =========================================================
   SERVICES CTA
========================================================= */

.services-page .services-cta {
    padding: 80px 0;

    background-color: #174f61;
}


.services-page .services-cta-content {
    display: flex;

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

    gap: 60px;
}


.services-page .services-cta .section-label {
    margin-bottom: 15px;

    color: #91d2dc;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 1.6px;
}


.services-page .services-cta h2 {
    margin-bottom: 16px;

    color: #ffffff;

    font-size: 40px;
    font-weight: 700;

    line-height: 1.18;
}


.services-page .services-cta p {
    max-width: 640px;

    color: #d6e5e9;

    font-size: 17px;

    line-height: 1.75;
}


.services-page .light-button {
    display: inline-block;

    padding: 13px 24px;

    background-color: #ffffff;

    color: #174f61;

    border-radius: 6px;

    font-size: 16px;
    font-weight: 700;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}


.services-page .light-button:hover {
    background-color: #edf5f6;

    transform: translateY(-2px);
}



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

.services-page .footer {
    padding: 60px 0 25px;

    background-color: #102f3a;

    color: #ffffff;
}


.services-page .footer-content {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 70px;

    padding-bottom: 45px;
}


.services-page .footer-info {
    max-width: 430px;
}


.services-page .footer-brand {
    color: #ffffff;

    font-size: 27px;
    font-weight: 700;

    line-height: 1.25;
}


.services-page .footer-subtitle {
    margin-top: 5px;

    color: #a9bdc4;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 3px;
}


.services-page .footer-description {
    margin-top: 19px;

    color: #aabdc4;

    font-size: 15px;

    line-height: 1.7;
}


.services-page .footer-contact-item {
    margin-top: 27px;
}


.services-page .footer-contact-label {
    margin-bottom: 8px;

    color: #78c5d1;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.services-page .footer-address {
    display: inline-block;

    color: #d9e4e7;

    font-size: 15px;

    line-height: 1.7;

    text-decoration: none;
}


.services-page .footer-address:hover {
    color: #ffffff;

    text-decoration: underline;
}



/* Footer Navigation */

.services-page .footer-links {
    display: flex;

    flex-direction: row;
    flex-wrap: wrap;

    gap: 18px 28px;
}


.services-page .footer-links a {
    color: #d9e4e7;

    font-size: 15px;
    font-weight: 500;

    line-height: 1.4;

    text-decoration: none;

    transition: color 0.2s ease;
}


.services-page .footer-links a:hover {
    color: #ffffff;
}


.services-page .footer-bottom {
    padding-top: 22px;

    border-top: 1px solid #31505b;
}


.services-page .footer-bottom p {
    color: #829ca5;

    font-size: 13px;
}



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

@media (max-width: 1000px) {

    .services-page .nav-links {
        gap: 22px;
    }


    .services-page .nav-links a {
        font-size: 15px;
    }


    .services-page .service-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}



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

@media (max-width: 800px) {


    /* Header */

    .services-page .navbar {
        height: 72px;
    }


    .services-page .brand-link {
        width: auto;
        height: 58px;

        max-width: 165px;

        overflow: hidden;
    }


    .services-page .header .header-logo {
        width: auto;
        height: 54px;

        max-width: 155px;
        max-height: 54px;

        object-fit: contain;
    }



    /* Contact */

    .services-page .contact-button {
        display: none;
    }



    /* Mobile Navigation */

    .services-page .nav-links {
        display: none;
    }


    .services-page .nav-links.mobile-open {
        display: flex;
    }


    .services-page .nav-links a {
        padding: 15px 0;

        font-size: 17px;
        font-weight: 700;
    }


    .services-page .nav-links a.active::after {
        display: none;
    }



    /* Highlight */

    .services-page .header-highlight-content {
        min-height: 42px;

        padding: 7px 0;

        gap: 7px;

        font-size: 9px;
        font-weight: 700;

        line-height: 1.4;

        letter-spacing: 0.55px;
    }


    .services-page .header-highlight-content span:nth-child(4),

    .services-page .header-highlight-content span:nth-child(5) {
        display: none;
    }



    /* Page Hero */

    .services-page .page-hero {
        padding: 50px 0 55px;
    }


    .services-page .page-hero .hero-label {
        font-size: 12px;

        letter-spacing: 1.4px;
    }


    .services-page .page-hero h1 {
        font-size: 34px;
    }


    .services-page .page-hero-content>p:last-child {
        font-size: 16px;
    }



    /* Cards */

    .services-page .service-overview {
        padding: 65px 0 75px;
    }


    .services-page .service-overview-grid {
        grid-template-columns: 1fr;

        gap: 22px;
    }


    .services-page .service-overview-content {
        min-height: auto;

        padding: 27px;
    }


    .services-page .service-category {
        font-size: 11px;
    }


    .services-page .service-overview-content h3 {
        font-size: 20px;
    }



    /* Featured Program */

    .services-page .featured-program-heading h2 {
        font-size: 30px;
    }


    .services-page .featured-program-heading .section-label {
        font-size: 12px;
    }


    .services-page .featured-program-content h3 {
        font-size: 26px;
    }


    .services-page .featured-program-content p {
        font-size: 15px;
    }



    /* CTA */

    .services-page .services-cta {
        padding: 65px 0;
    }


    .services-page .services-cta-content {
        flex-direction: column;

        align-items: flex-start;

        gap: 30px;
    }


    .services-page .services-cta .section-label {
        font-size: 12px;
    }


    .services-page .services-cta h2 {
        font-size: 31px;
    }


    .services-page .services-cta p {
        font-size: 16px;
    }



    /* Footer */

    .services-page .footer-content {
        flex-direction: column;

        gap: 38px;
    }


    .services-page .footer-links {
        width: 100%;

        display: grid !important;

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

        gap: 14px 12px !important;
    }


    .services-page .footer-links a {
        font-size: 13px;

        text-align: left;
    }

}

/* =========================================================
   GLOBAL INNER PAGE HEADER + FOOTER
   Used by service pages and program pages
========================================================= */


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

.site-page .header {
    background-color: #ffffff;

    border-bottom: 1px solid #e7edef;
}


.site-page .navbar {
    height: 76px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}



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

.site-page .brand-link {
    display: flex;

    align-items: center;

    flex: 0 0 auto;

    text-decoration: none;
}


.site-page .header .header-logo {
    display: block;

    width: 108px;
    height: 64px;

    max-width: 108px;
    max-height: 64px;

    object-fit: contain;
}



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

.site-page .nav-links {
    display: flex;

    align-items: center;

    gap: 34px;
}


.site-page .nav-links a {
    position: relative;

    color: #294754;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.4;

    text-decoration: none;

    transition: color 0.2s ease;
}


.site-page .nav-links a:hover {
    color: #16859a;
}


.site-page .nav-links a.active {
    color: #16859a;

    font-weight: 800;
}



/* Active underline */

.site-page .nav-links a.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: -8px;

    height: 2px;

    background-color: #16859a;

    border-radius: 2px;
}



/* =========================================================
   CONTACT BUTTON
========================================================= */

.site-page .contact-button {
    padding: 12px 23px;

    background-color: #176c7e;

    color: #ffffff;

    border-radius: 6px;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.4;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


.site-page .contact-button:hover {
    background-color: #125c6c;

    transform: translateY(-1px);
}



/* =========================================================
   HIGHLIGHT BAR
========================================================= */

.site-page .header-highlight {
    background-color: #172350;
}


.site-page .header-highlight-content {
    min-height: 42px;

    display: flex;

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

    gap: 17px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 1px;

    text-align: center;
}


.site-page .highlight-divider {
    color: #d4ad45;

    font-size: 16px;

    line-height: 1;
}



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

.site-page .footer {
    padding: 60px 0 25px;

    background-color: #102f3a;

    color: #ffffff;
}


.site-page .footer-content {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 70px;

    padding-bottom: 45px;
}



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

.site-page .footer-info {
    max-width: 430px;
}


.site-page .footer-brand {
    color: #ffffff;

    font-size: 27px;
    font-weight: 700;

    line-height: 1.25;
}


.site-page .footer-subtitle {
    margin-top: 5px;

    color: #a9bdc4;

    font-size: 10px;
    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 3px;
}


.site-page .footer-description {
    margin-top: 19px;

    color: #aabdc4;

    font-size: 15px;

    line-height: 1.7;
}



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

.site-page .footer-contact-item {
    margin-top: 27px;
}


.site-page .footer-contact-label {
    margin-bottom: 8px;

    color: #78c5d1;

    font-size: 11px;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 1.5px;
}


.site-page .footer-address {
    display: inline-block;

    color: #d9e4e7;

    font-size: 15px;

    line-height: 1.7;

    text-decoration: none;

    transition: color 0.2s ease;
}


.site-page .footer-address:hover {
    color: #ffffff;

    text-decoration: underline;
}



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

.site-page .footer-links {
    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    gap: 18px 28px;
}


.site-page .footer-links a {
    color: #d9e4e7;

    font-size: 15px;
    font-weight: 500;

    line-height: 1.4;

    text-decoration: none;

    transition: color 0.2s ease;
}


.site-page .footer-links a:hover {
    color: #ffffff;
}



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

.site-page .footer-bottom {
    padding-top: 22px;

    border-top: 1px solid #31505b;
}


.site-page .footer-bottom p {
    color: #829ca5;

    font-size: 13px;

    line-height: 1.6;
}



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

@media (max-width: 1000px) {

    .site-page .nav-links {
        gap: 22px;
    }


    .site-page .nav-links a {
        font-size: 15px;
    }

}



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

@media (max-width: 800px) {


    /* Header */

    .site-page .navbar {
        height: 72px;
    }



    /* Logo */

    .site-page .brand-link {
        width: auto;
        height: 58px;

        max-width: 165px;

        overflow: hidden;
    }


    .site-page .header .header-logo {
        width: auto;
        height: 54px;

        max-width: 155px;
        max-height: 54px;

        object-fit: contain;
    }



    /* Hide desktop contact */

    .site-page .contact-button {
        display: none;
    }



    /* Navigation */

    .site-page .nav-links {
        display: none;
    }


    .site-page .nav-links.mobile-open {
        display: flex;
    }


    .site-page .nav-links a {
        padding: 15px 0;

        font-size: 17px;
        font-weight: 700;
    }


    .site-page .nav-links a.active::after {
        display: none;
    }



    /* Mobile Contact */

    .site-page .nav-links .mobile-contact-link {
        display: block;

        margin-top: 10px;

        padding: 13px 16px;

        background-color: #176c7e;

        color: #ffffff;

        border-radius: 6px;

        text-align: center;
    }



    /* Highlight */

    .site-page .header-highlight-content {
        min-height: 42px;

        padding: 7px 0;

        gap: 7px;

        font-size: 9px;
        font-weight: 700;

        line-height: 1.4;

        letter-spacing: 0.55px;
    }


    .site-page .header-highlight-content span:nth-child(4),

    .site-page .header-highlight-content span:nth-child(5) {
        display: none;
    }



    /* Footer */

    .site-page .footer {
        padding: 50px 0 24px;
    }


    .site-page .footer-content {
        flex-direction: column;

        gap: 38px;

        padding-bottom: 35px;
    }


    .site-page .footer-links {
        width: 100%;

        display: grid !important;

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

        gap: 14px 12px !important;
    }


    .site-page .footer-links a {
        font-size: 13px;

        text-align: left;
    }


    .site-page .footer-brand {
        font-size: 25px;
    }


    .site-page .footer-description {
        font-size: 14px;
    }


    .site-page .footer-address {
        font-size: 14px;
    }

}

/* =========================================================
   SERVICE DETAIL PAGE
   TYPOGRAPHY REFINEMENT
========================================================= */


/* =========================================================
   SIDEBAR
========================================================= */

.service-detail-page .service-sidebar-title {
    font-size: 14px;
    font-weight: 800;

    letter-spacing: 1.7px;
}


.service-detail-page .service-sidebar-nav a {
    padding: 14px 0;

    font-size: 16px;
    font-weight: 600;

    line-height: 1.5;
}


.service-detail-page .service-sidebar-nav a.active {
    font-weight: 800;
}



/* =========================================================
   MAIN CONTENT
========================================================= */

/* Main service heading */

.service-detail-page .individual-service-content>h2 {
    font-size: 42px;

    line-height: 1.18;
}


/* Main paragraphs */

.service-detail-page .individual-service-content>p {
    font-size: 18px;

    line-height: 1.8;
}


/* Intro paragraph */

.service-detail-page .service-introduction {
    font-size: 19px !important;

    line-height: 1.8 !important;
}



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

.service-detail-page .service-content-section h3 {
    font-size: 30px;
    font-weight: 700;

    line-height: 1.3;
}


.service-detail-page .service-content-section p {
    font-size: 17px;

    line-height: 1.75;
}



/* =========================================================
   ASSESSMENT PROCESS
========================================================= */

.service-detail-page .assessment-process-item {
    grid-template-columns: 52px 1fr;

    gap: 22px;

    padding: 27px 0;
}


/* 01 / 02 / 03 / 04 */

.service-detail-page .assessment-process-item>span {
    width: 50px;
    height: 42px;

    font-size: 17px;
    font-weight: 800;
}


/* Process title */

.service-detail-page .assessment-process-item h4 {
    margin-bottom: 8px;

    font-size: 21px;
    font-weight: 700;

    line-height: 1.4;
}


/* Process description */

.service-detail-page .assessment-process-item p {
    font-size: 17px;

    line-height: 1.72;
}



/* =========================================================
   CONTENT LIST
========================================================= */

.service-detail-page .service-content-list li {
    font-size: 17px;

    line-height: 1.65;
}



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

@media (max-width: 800px) {

    .service-detail-page .service-sidebar-title {
        font-size: 12px;
    }


    .service-detail-page .service-sidebar-nav a {
        font-size: 15px;
    }


    .service-detail-page .individual-service-content>h2 {
        font-size: 31px;
    }


    .service-detail-page .individual-service-content>p {
        font-size: 16px;
    }


    .service-detail-page .service-introduction {
        font-size: 17px !important;
    }


    .service-detail-page .service-content-section h3 {
        font-size: 25px;
    }


    .service-detail-page .service-content-section p {
        font-size: 16px;
    }


    .service-detail-page .assessment-process-item h4 {
        font-size: 19px;
    }


    .service-detail-page .assessment-process-item p {
        font-size: 16px;
    }


    .service-detail-page .service-content-list li {
        font-size: 16px;
    }

}

/* =========================================================
   OTHER SERVICES
   TYPOGRAPHY REFINEMENT
========================================================= */


/* Section label */

.service-detail-page .other-services-section .section-label {
    margin-bottom: 15px;

    font-size: 15px;
    font-weight: 800;

    letter-spacing: 1.7px;
}


/* Section heading */

.service-detail-page .other-services-section .section-heading h2 {
    font-size: 40px;
    font-weight: 700;

    line-height: 1.2;
}



/* =========================================================
   OTHER SERVICE CARDS
========================================================= */

.service-detail-page .other-service-card {
    padding: 34px 32px;
}


/* 01 / 02 / 03 */

.service-detail-page .other-service-card>span {
    display: inline-flex;

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

    min-width: 48px;
    height: 40px;

    margin-bottom: 24px;

    padding: 0 12px;

    background-color: #eaf5f6;

    border: 1px solid #cce4e8;

    border-radius: 999px;

    color: #117c90;

    font-size: 16px;
    font-weight: 800;

    line-height: 1;
}


/* Service name */

.service-detail-page .other-service-card h3 {
    margin-bottom: 18px;

    color: #173f50;

    font-size: 22px;
    font-weight: 700;

    line-height: 1.4;
}


/* Learn More */

.service-detail-page .other-service-card p {
    color: #176c7e;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.5;
}



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

.service-detail-page .other-services-button .secondary-button {
    padding: 14px 25px;

    font-size: 16px;
    font-weight: 700;
}



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

@media (max-width: 800px) {

    .service-detail-page .other-services-section .section-label {
        font-size: 12px;
    }


    .service-detail-page .other-services-section .section-heading h2 {
        font-size: 30px;
    }


    .service-detail-page .other-service-card {
        padding: 29px 26px;
    }


    .service-detail-page .other-service-card>span {
        min-width: 44px;
        height: 37px;

        font-size: 15px;
    }


    .service-detail-page .other-service-card h3 {
        font-size: 20px;
    }


    .service-detail-page .other-service-card p {
        font-size: 14px;
    }


    .service-detail-page .other-services-button .secondary-button {
        font-size: 15px;
    }

}

/* =========================================================
   DRIVING REHABILITATION PROGRAM
   FINAL VISUAL & TYPOGRAPHY SYSTEM
========================================================= */


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

.driving-program-page .equipment-hero {
    min-height: 540px;
}


.driving-program-page .equipment-hero-content {
    min-height: 540px;
}


/* Hero Label */

.driving-program-page .equipment-hero-label {
    margin-bottom: 17px;

    color: #176c7e;

    font-size: 14px;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 1.7px;
}


/* Hero H1 */

.driving-program-page .equipment-hero-content h1 {
    max-width: 650px;

    margin-bottom: 22px;

    color: #173f50;

    font-size: 52px;
    font-weight: 700;

    line-height: 1.1;
}


/* Hero Description */

.driving-program-page .equipment-hero-content>p {
    max-width: 590px;

    margin-bottom: 30px;

    color: #536d77;

    font-size: 18px;

    line-height: 1.75;
}



/* =========================================================
   COMMON SECTION LABELS
========================================================= */

.driving-program-page .section-label {
    font-size: 14px;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 1.6px;
}



/* =========================================================
   DRIVING REHABILITATION INTRODUCTION
========================================================= */

.driving-program-page .driving-rehab-intro {
    padding: 100px 0 0;
}


.driving-program-page .driving-rehab-intro-grid {
    grid-template-columns: 42% 58%;

    gap: 80px;

    padding-bottom: 95px;
}


/* Introduction heading */

.driving-program-page .driving-rehab-intro-heading h2 {
    max-width: 530px;

    color: #173f50;

    font-size: 42px;
    font-weight: 700;

    line-height: 1.18;
}


/* Introduction body */

.driving-program-page .driving-rehab-intro-copy p {
    margin-bottom: 19px;

    color: #60757e;

    font-size: 18px;

    line-height: 1.8;
}


/* Introduction first paragraph */

.driving-program-page .driving-rehab-intro-copy .driving-rehab-lead {
    color: #365560;

    font-size: 19px;

    line-height: 1.8;
}



/* =========================================================
   WHAT DOES THE PROGRAM INVOLVE?
========================================================= */

.driving-program-page .driving-rehab-involve {
    padding: 90px 0;

    border-top: 1px solid #e1e9eb;
}


.driving-program-page .driving-rehab-section-heading {
    max-width: 780px;

    margin-bottom: 45px;
}


.driving-program-page .driving-rehab-section-heading h2 {
    margin-bottom: 17px;

    color: #173f50;

    font-size: 40px;
    font-weight: 700;

    line-height: 1.2;
}


.driving-program-page .driving-rehab-section-heading>p:last-child {
    color: #637982;

    font-size: 17px;

    line-height: 1.75;
}



/* Program items */

.driving-program-page .driving-rehab-involve-grid {
    display: grid;

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

    gap: 0 50px;

    border-top: 1px solid #e0e8ea;
}


.driving-program-page .driving-rehab-involve-item {
    display: grid;

    grid-template-columns: 50px 1fr;

    gap: 17px;

    min-height: 110px;

    padding: 23px 0;

    border-bottom: 1px solid #e0e8ea;
}



/* Program item numbers */

.driving-program-page .driving-rehab-involve-item span {
    display: inline-flex;

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

    width: 46px;
    height: 38px;

    background-color: #eaf5f6;

    border: 1px solid #cce4e8;

    border-radius: 999px;

    color: #117c90;

    font-size: 15px;
    font-weight: 800;

    line-height: 1;
}


/* Program item text */

.driving-program-page .driving-rehab-involve-item p {
    padding-top: 5px;

    color: #536c76;

    font-size: 16px;

    line-height: 1.7;
}



/* =========================================================
   PSYCHOLOGICAL REHABILITATION INTRO BLOCK
========================================================= */

.driving-program-page .driving-rehab-psychology {
    padding: 80px 65px;

    background-color: #173f50;

    border-radius: 15px;
}


.driving-program-page .driving-rehab-psychology-grid {
    grid-template-columns: 40% 60%;

    gap: 70px;
}


.driving-program-page .driving-rehab-psychology-heading h2 {
    margin-bottom: 21px;

    color: #ffffff;

    font-size: 39px;
    font-weight: 700;

    line-height: 1.2;
}


.driving-program-page .driving-rehab-psychology-heading>p:not(.section-label) {
    color: #d1e0e4;

    font-size: 17px;

    line-height: 1.8;
}


.driving-program-page .driving-rehab-psychology-content>p {
    margin-bottom: 25px;

    color: #d6e3e6;

    font-size: 17px;

    line-height: 1.8;
}



/* Psychology List */

.driving-program-page .driving-rehab-psychology-list {
    display: grid;

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

    gap: 0 30px;

    margin-bottom: 28px;

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


.driving-program-page .driving-rehab-psychology-list div {
    position: relative;

    padding: 17px 0 17px 24px;

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.55;

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


.driving-program-page .driving-rehab-psychology-list div::before {
    content: "✓";

    position: absolute;

    left: 0;

    color: #8fd0da;

    font-weight: 800;
}


.driving-program-page .driving-rehab-psychology-note {
    color: #b9ced3 !important;

    font-size: 14px !important;

    line-height: 1.7 !important;
}



/* =========================================================
   OUR GOAL
========================================================= */

.driving-program-page .driving-rehab-goal {
    display: grid;

    grid-template-columns: 22% 78%;

    gap: 55px;

    padding: 95px 0;
}


.driving-program-page .driving-rehab-goal-number {
    padding-top: 7px;

    color: #16859a;

    font-size: 14px;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 1.7px;
}


.driving-program-page .driving-rehab-goal-content h2 {
    margin-bottom: 20px;

    color: #173f50;

    font-size: 40px;
    font-weight: 700;

    line-height: 1.2;
}


.driving-program-page .driving-rehab-goal-content p {
    margin-bottom: 18px;

    color: #60757e;

    font-size: 17px;

    line-height: 1.8;
}



/* =========================================================
   PROGRAM CATEGORIES
========================================================= */

.driving-program-page .equipment-categories {
    padding: 90px 0 105px;
}


.driving-program-page .equipment-section-heading {
    margin-bottom: 45px;
}


.driving-program-page .equipment-section-heading h2 {
    margin-bottom: 15px;

    color: #173f50;

    font-size: 40px;
    font-weight: 700;

    line-height: 1.2;
}


.driving-program-page .equipment-section-heading>p:last-child {
    max-width: 690px;

    color: #657982;

    font-size: 17px;

    line-height: 1.75;
}



/* Category Cards */

.driving-program-page .equipment-category-info {
    padding-top: 21px;
}


.driving-program-page .equipment-category-info span {
    display: block;

    margin-bottom: 9px;

    color: #7d9299;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.4px;
}


.driving-program-page .equipment-category-info h3 {
    margin-bottom: 10px;

    color: #173f50;

    font-size: 22px;
    font-weight: 700;

    line-height: 1.35;
}


.driving-program-page .equipment-category-info p {
    color: #176c7e;

    font-size: 15px;
    font-weight: 700;
}



/* =========================================================
   CATEGORY 02 & 03 FEATURE SECTIONS
========================================================= */

.driving-program-page .equipment-feature-section {
    padding: 100px 0;
}


.driving-program-page .equipment-feature-grid {
    grid-template-columns: 47% 53%;

    gap: 70px;
}


/* Feature Heading */

.driving-program-page .equipment-feature-content h2 {
    margin-bottom: 21px;

    color: #173f50;

    font-size: 40px;
    font-weight: 700;

    line-height: 1.2;
}


/* Lead text */

.driving-program-page .equipment-feature-intro {
    margin-bottom: 18px;

    color: #45636e;

    font-size: 18px !important;

    line-height: 1.8;
}


/* Regular body */

.driving-program-page .equipment-feature-content>p:not(.section-label) {
    margin-bottom: 18px;

    color: #607680;

    font-size: 17px;

    line-height: 1.8;
}



/* =========================================================
   FEATURE LIST
========================================================= */

.driving-program-page .equipment-feature-list {
    margin-top: 32px;

    border-top: 1px solid #dfe7e9;
}


.driving-program-page .equipment-feature-list>div {
    display: grid;

    grid-template-columns: 50px 1fr;

    gap: 18px;

    padding: 22px 0;

    border-bottom: 1px solid #dfe7e9;
}



/* Feature numbers */

.driving-program-page .equipment-feature-list>div>span {
    display: inline-flex;

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

    width: 44px;
    height: 36px;

    background-color: #eaf5f6;

    border: 1px solid #cce4e8;

    border-radius: 999px;

    color: #117c90;

    font-size: 14px;
    font-weight: 800;

    line-height: 1;
}


/* Feature title */

.driving-program-page .equipment-feature-list h3 {
    margin-bottom: 6px;

    color: #173f50;

    font-size: 20px;
    font-weight: 700;

    line-height: 1.4;
}


/* Feature description */

.driving-program-page .equipment-feature-list p {
    color: #697d85;

    font-size: 15px;

    line-height: 1.7;
}



/* =========================================================
   FEATURE SUMMARY BOX
========================================================= */

.driving-program-page .equipment-feature-summary {
    margin-top: 35px;

    padding: 30px 32px;

    background-color: #eef5f5;

    border-left: 3px solid #16859a;

    border-radius: 7px;
}


.driving-program-page .equipment-feature-summary-label {
    margin-bottom: 11px !important;

    color: #16859a !important;

    font-size: 12px !important;
    font-weight: 800;

    letter-spacing: 1.4px;
}


.driving-program-page .equipment-feature-summary h3 {
    margin-bottom: 13px;

    color: #173f50;

    font-size: 22px;
    font-weight: 700;

    line-height: 1.4;
}


.driving-program-page .equipment-feature-summary p:not(.equipment-feature-summary-label) {
    margin-bottom: 10px;

    color: #5f747d;

    font-size: 15px;

    line-height: 1.75;
}



/* =========================================================
   EQUIPMENT CATALOGUE / SHOPPING SECTIONS
========================================================= */

.driving-program-page .equipment-shopping-section {
    padding: 95px 0 105px;
}


.driving-program-page .equipment-shopping-header h2 {
    margin-bottom: 13px;

    color: #173f50;

    font-size: 40px;
    font-weight: 700;

    line-height: 1.2;
}


.driving-program-page .equipment-shopping-header div>p:last-child {
    max-width: 700px;

    color: #667b84;

    font-size: 17px;

    line-height: 1.75;
}


.driving-program-page .equipment-back-link {
    color: #176c7e;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
}



/* =========================================================
   PRODUCT INFORMATION
========================================================= */

.driving-program-page .equipment-product-category {
    margin-bottom: 8px;

    color: #7c9097;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.25px;
}


.driving-program-page .equipment-product-info h3 {
    margin-bottom: 10px;

    color: #173f50;

    font-size: 19px;
    font-weight: 700;

    line-height: 1.4;
}


.driving-program-page .equipment-product-info>p:not(.equipment-product-category) {
    margin-bottom: 15px;

    color: #657b84;

    font-size: 15px;

    line-height: 1.65;
}


.driving-program-page .equipment-product-link {
    color: #176c7e;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
}


.driving-program-page .equipment-product-link:hover {
    text-decoration: underline;
}



/* =========================================================
   FINAL GUIDANCE CTA
========================================================= */

.driving-program-page .equipment-guidance-section {
    padding: 80px 0;

    background-color: #173f50;
}


.driving-program-page .equipment-guidance-inner h2 {
    margin-bottom: 14px;

    color: #ffffff;

    font-size: 38px;
    font-weight: 700;

    line-height: 1.2;
}


.driving-program-page .equipment-guidance-inner p:not(.section-label) {
    max-width: 700px;

    color: #d5e2e5;

    font-size: 17px;

    line-height: 1.75;
}



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

@media (max-width: 1000px) {

    .driving-program-page .equipment-feature-grid {
        gap: 45px;
    }


    .driving-program-page .driving-rehab-intro-grid {
        gap: 50px;
    }


    .driving-program-page .driving-rehab-psychology-grid {
        gap: 45px;
    }

}



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

@media (max-width: 800px) {


    /* Hero */

    .driving-program-page .equipment-hero-label {
        font-size: 12px;
    }


    .driving-program-page .equipment-hero-content h1 {
        font-size: 35px;
    }


    .driving-program-page .equipment-hero-content>p {
        font-size: 16px;
    }



    /* Intro */

    .driving-program-page .driving-rehab-intro {
        padding-top: 65px;
    }


    .driving-program-page .driving-rehab-intro-grid {
        grid-template-columns: 1fr;

        gap: 30px;

        padding-bottom: 65px;
    }


    .driving-program-page .driving-rehab-intro-heading h2 {
        font-size: 31px;
    }


    .driving-program-page .driving-rehab-intro-copy p {
        font-size: 16px;
    }


    .driving-program-page .driving-rehab-intro-copy .driving-rehab-lead {
        font-size: 17px;
    }



    /* What Program Involves */

    .driving-program-page .driving-rehab-involve {
        padding: 65px 0;
    }


    .driving-program-page .driving-rehab-section-heading h2 {
        font-size: 30px;
    }


    .driving-program-page .driving-rehab-section-heading>p:last-child {
        font-size: 16px;
    }


    .driving-program-page .driving-rehab-involve-grid {
        grid-template-columns: 1fr;
    }


    .driving-program-page .driving-rehab-involve-item p {
        font-size: 15px;
    }



    /* Psychology */

    .driving-program-page .driving-rehab-psychology {
        padding: 42px 24px;

        border-radius: 10px;
    }


    .driving-program-page .driving-rehab-psychology-grid {
        grid-template-columns: 1fr;

        gap: 34px;
    }


    .driving-program-page .driving-rehab-psychology-heading h2 {
        font-size: 30px;
    }


    .driving-program-page .driving-rehab-psychology-heading>p:not(.section-label),

    .driving-program-page .driving-rehab-psychology-content>p {
        font-size: 16px;
    }


    .driving-program-page .driving-rehab-psychology-list {
        grid-template-columns: 1fr;
    }


    .driving-program-page .driving-rehab-psychology-list div {
        font-size: 14px;
    }



    /* Goal */

    .driving-program-page .driving-rehab-goal {
        grid-template-columns: 1fr;

        gap: 18px;

        padding: 65px 0;
    }


    .driving-program-page .driving-rehab-goal-content h2 {
        font-size: 30px;
    }


    .driving-program-page .driving-rehab-goal-content p {
        font-size: 16px;
    }



    /* Categories */

    .driving-program-page .equipment-categories {
        padding: 65px 0 75px;
    }


    .driving-program-page .equipment-section-heading h2 {
        font-size: 30px;
    }


    .driving-program-page .equipment-section-heading>p:last-child {
        font-size: 16px;
    }


    .driving-program-page .equipment-category-info span {
        font-size: 11px;
    }


    .driving-program-page .equipment-category-info h3 {
        font-size: 20px;
    }


    .driving-program-page .equipment-category-info p {
        font-size: 14px;
    }



    /* Category Feature Sections */

    .driving-program-page .equipment-feature-section {
        padding: 70px 0;
    }


    .driving-program-page .equipment-feature-grid {
        grid-template-columns: 1fr;

        gap: 36px;
    }


    .driving-program-page .equipment-feature-content h2 {
        font-size: 30px;
    }


    .driving-program-page .equipment-feature-intro {
        font-size: 17px !important;
    }


    .driving-program-page .equipment-feature-content>p:not(.section-label) {
        font-size: 16px;
    }


    .driving-program-page .equipment-feature-list>div {
        grid-template-columns: 44px 1fr;

        gap: 13px;
    }


    .driving-program-page .equipment-feature-list h3 {
        font-size: 18px;
    }


    .driving-program-page .equipment-feature-list p {
        font-size: 14px;
    }



    /* Summary */

    .driving-program-page .equipment-feature-summary {
        padding: 25px 21px;
    }


    .driving-program-page .equipment-feature-summary h3 {
        font-size: 20px;
    }


    .driving-program-page .equipment-feature-summary p:not(.equipment-feature-summary-label) {
        font-size: 14px;
    }



    /* Catalogue */

    .driving-program-page .equipment-shopping-section {
        padding: 70px 0 80px;
    }


    .driving-program-page .equipment-shopping-header h2 {
        font-size: 30px;
    }


    .driving-program-page .equipment-shopping-header div>p:last-child {
        font-size: 16px;
    }



    /* Products */

    .driving-program-page .equipment-product-category {
        font-size: 10px;
    }


    .driving-program-page .equipment-product-info h3 {
        font-size: 16px;
    }


    .driving-program-page .equipment-product-info>p:not(.equipment-product-category) {
        font-size: 13px;
    }


    .driving-program-page .equipment-product-link {
        font-size: 13px;
    }



    /* Final CTA */

    .driving-program-page .equipment-guidance-section {
        padding: 65px 0;
    }


    .driving-program-page .equipment-guidance-inner h2 {
        font-size: 30px;
    }


    .driving-program-page .equipment-guidance-inner p:not(.section-label) {
        font-size: 16px;
    }

}

/* =========================================================
   DRIVING REHAB INTRO
   CONSISTENT BODY TYPOGRAPHY
========================================================= */

.driving-program-page .driving-rehab-intro-copy p {
    margin-bottom: 20px;

    color: #60757e;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.8;
}


.driving-program-page .driving-rehab-intro-copy .driving-rehab-lead {
    color: #60757e;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.8;
}

/* =========================================================
   PSYCHOLOGICAL REHABILITATION
   SPACING FIX
========================================================= */

.driving-program-page .driving-rehab-psychology {
    width: 100%;

    box-sizing: border-box;

    padding: 80px 72px;

    overflow: hidden;
}


.driving-program-page .driving-rehab-psychology-grid {
    display: grid;

    /*
       Do NOT use 40% + 60% + gap.
       fr units account for the gap correctly.
    */

    grid-template-columns:
        minmax(0, 0.9fr) minmax(0, 1.35fr);

    gap: 72px;

    align-items: start;
}


.driving-program-page .driving-rehab-psychology-heading,

.driving-program-page .driving-rehab-psychology-content {
    min-width: 0;
}


.driving-program-page .driving-rehab-psychology-list {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 0 32px;
}


.driving-program-page .driving-rehab-psychology-note {
    max-width: 100%;

    padding-right: 5px;
}

/* =========================================================
   EQUIPMENT PRODUCT CARDS
   ALIGN DISCUSS LINKS
========================================================= */

.driving-program-page .equipment-product-grid {
    align-items: stretch;
}


.driving-program-page .equipment-product-card {
    display: flex;

    flex-direction: column;

    height: 100%;

    min-width: 0;
}


/* Keep all images consistent */

.driving-program-page .equipment-product-image {
    flex: 0 0 auto;
}


/* Product information becomes flexible */

.driving-program-page .equipment-product-info {
    display: flex;

    flex-direction: column;

    flex: 1;

    padding-top: 20px;
}


/* Description */

.driving-program-page .equipment-product-info>p:not(.equipment-product-category) {
    margin-bottom: 0;
}


/* Push Discuss link to the bottom */

.driving-program-page .equipment-product-link {
    display: inline-block;

    align-self: flex-start;

    margin-top: auto;

    padding-top: 18px;
}
/* =========================================================
   DRIVING PROGRAM FEATURE SECTION
   BETTER TWO-COLUMN ALIGNMENT
========================================================= */


/* Category 01 / 02 feature sections */

.driving-program-page .equipment-feature-section {
    padding: 85px 0 95px;
}


/* =========================================================
   TWO COLUMN LAYOUT
========================================================= */

.driving-program-page .equipment-feature-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 46%) minmax(0, 54%);

    gap: 68px;

    /*
       IMPORTANT:
       Align image with the TOP of the content,
       rather than vertically centering it.
    */
    align-items: start;
}



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

.driving-program-page .equipment-feature-image {
    width: 100%;
    height: 560px;

    margin: 0;

    overflow: hidden;

    background-color: #eef3f4;

    border-radius: 12px;

    /*
       Keeps the image visible while reading
       the longer content on the right.
    */
    position: sticky;

    top: 120px;
}


.driving-program-page .equipment-feature-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    border-radius: inherit;
}



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

.driving-program-page .equipment-feature-content {
    min-width: 0;

    padding-top: 0;
}


/* Category label starts exactly at the top */

.driving-program-page .equipment-feature-content>.section-label {
    margin-top: 0;

    margin-bottom: 16px;
}



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

@media (max-width: 1000px) {

    .driving-program-page .equipment-feature-grid {
        grid-template-columns:
            minmax(0, 44%) minmax(0, 56%);

        gap: 45px;

        align-items: start;
    }


    .driving-program-page .equipment-feature-image {
        height: 500px;

        top: 110px;
    }

}



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

@media (max-width: 800px) {

    .driving-program-page .equipment-feature-section {
        padding: 65px 0 70px;
    }


    .driving-program-page .equipment-feature-grid {
        grid-template-columns: 1fr;

        gap: 34px;
    }


    .driving-program-page .equipment-feature-image {
        height: 300px;

        /*
           Disable sticky on phone
        */
        position: static;

        top: auto;
    }

}
/* =========================================================
   FINAL MOBILE FIX
   DRIVING REHAB PSYCHOLOGICAL SECTION
   MUST REMAIN AT VERY BOTTOM OF FILE
========================================================= */

@media (max-width: 800px) {


    /* =====================================================
       PSYCHOLOGICAL REHABILITATION CONTAINER
    ===================================================== */

    .driving-program-page .driving-rehab-psychology {
        width: 100%;

        box-sizing: border-box;

        padding: 45px 24px;

        overflow: hidden;

        border-radius: 10px;
    }



    /* =====================================================
       FORCE DESKTOP TWO-COLUMN LAYOUT INTO ONE COLUMN
    ===================================================== */

    .driving-program-page .driving-rehab-psychology-grid {
        display: grid;

        grid-template-columns: minmax(0, 1fr);

        gap: 32px;

        width: 100%;

        align-items: start;
    }



    /* Prevent grid children from forcing overflow */

    .driving-program-page .driving-rehab-psychology-heading,

    .driving-program-page .driving-rehab-psychology-content {
        width: 100%;

        min-width: 0;

        max-width: 100%;
    }



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

    .driving-program-page .driving-rehab-psychology .section-label {
        margin-bottom: 14px;

        font-size: 12px;

        font-weight: 800;

        line-height: 1.4;

        letter-spacing: 1.5px;
    }



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

    .driving-program-page .driving-rehab-psychology-heading h2 {
        max-width: 100%;

        margin-bottom: 18px;

        font-size: 31px;

        font-weight: 700;

        line-height: 1.16;
    }



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

    .driving-program-page .driving-rehab-psychology-heading>p:not(.section-label) {
        max-width: 100%;

        margin-bottom: 0;

        font-size: 16px;

        line-height: 1.7;
    }



    /* =====================================================
       RIGHT INTRO PARAGRAPH
    ===================================================== */

    .driving-program-page .driving-rehab-psychology-content>p {
        max-width: 100%;

        margin-bottom: 24px;

        font-size: 16px;

        line-height: 1.7;
    }



    /* =====================================================
       PSYCHOLOGICAL FEATURE LIST
       DESKTOP 2 COLUMNS -> MOBILE 1 COLUMN
    ===================================================== */

    .driving-program-page .driving-rehab-psychology-list {
        display: grid;

        grid-template-columns: minmax(0, 1fr);

        gap: 0;

        width: 100%;

        margin-bottom: 25px;

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



    /* Individual item */

    .driving-program-page .driving-rehab-psychology-list div {
        position: relative;

        width: 100%;

        box-sizing: border-box;

        padding: 16px 0 16px 25px;

        color: #ffffff;

        font-size: 15px;

        font-weight: 600;

        line-height: 1.55;

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



    /* Check mark */

    .driving-program-page .driving-rehab-psychology-list div::before {
        content: "✓";

        position: absolute;

        left: 0;

        top: 16px;

        color: #8fd0da;

        font-weight: 800;
    }



    /* =====================================================
       FINAL NOTE
    ===================================================== */

    .driving-program-page .driving-rehab-psychology-note {
        width: 100%;

        max-width: 100%;

        margin: 0;

        padding: 0;

        color: #b9ced3 !important;

        font-size: 14px !important;

        line-height: 1.7 !important;
    }

}



/* =========================================================
   EXTRA SMALL PHONE
========================================================= */

@media (max-width: 480px) {

    .driving-program-page .driving-rehab-psychology {
        padding: 40px 20px;
    }


    .driving-program-page .driving-rehab-psychology-grid {
        gap: 28px;
    }


    .driving-program-page .driving-rehab-psychology-heading h2 {
        font-size: 29px;

        line-height: 1.16;
    }


    .driving-program-page .driving-rehab-psychology-heading>p:not(.section-label),

    .driving-program-page .driving-rehab-psychology-content>p {
        font-size: 16px;

        line-height: 1.68;
    }


    .driving-program-page .driving-rehab-psychology-list div {
        font-size: 14px;

        line-height: 1.55;
    }

}

/* =========================================================
   FINAL MOBILE FIX
   DRIVING REHAB HERO BUTTON
========================================================= */

@media (max-width: 800px) {

    .driving-program-page .equipment-hero-content .primary-button {
        /* Stop the global mobile flex rule */
        flex: 0 0 auto;

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

        align-self: flex-start;

        padding: 13px 22px;

        font-size: 15px;
        font-weight: 700;

        line-height: 1.4;

        text-align: center;

        border-radius: 6px;
    }

}



/* =========================================================
   EXTRA SMALL PHONE
========================================================= */

@media (max-width: 420px) {

    .driving-program-page .equipment-hero-content .primary-button {
        flex: 0 0 auto;

        width: auto;
        height: auto;

        align-self: flex-start;

        padding: 12px 20px;

        font-size: 14px;
    }

}

/* =========================================================
   DRIVING ASSESSMENT
   NSW GOVERNMENT INFORMATION BOX
========================================================= */

.service-detail-page .driving-assessment-info-box {
    display: flex;

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

    gap: 35px;

    margin: 45px 0;

    padding: 32px 34px;

    background-color: #f1f7f7;

    border-left: 4px solid #16859a;

    border-radius: 10px;
}


.service-detail-page .driving-assessment-info-copy {
    max-width: 620px;
}


.service-detail-page .driving-assessment-info-copy .section-label {
    margin-bottom: 10px;

    color: #16859a;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.service-detail-page .driving-assessment-info-copy h3 {
    margin-bottom: 10px;

    color: #173f50;

    font-size: 24px;
    font-weight: 700;

    line-height: 1.35;
}


.service-detail-page .driving-assessment-info-copy p:not(.section-label) {
    margin: 0;

    color: #5b7079;

    font-size: 16px;

    line-height: 1.7;
}


.service-detail-page .driving-assessment-info-button {
    flex: 0 0 auto;

    white-space: nowrap;
}



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

@media (max-width: 800px) {

    .service-detail-page .driving-assessment-info-box {
        flex-direction: column;

        align-items: flex-start;

        gap: 24px;

        margin: 36px 0;

        padding: 26px 22px;
    }


    .service-detail-page .driving-assessment-info-copy h3 {
        font-size: 21px;
    }


    .service-detail-page .driving-assessment-info-copy p:not(.section-label) {
        font-size: 15px;
    }


    .service-detail-page .driving-assessment-info-button {
        width: 100%;

        white-space: normal;

        text-align: center;
    }

}

/* =========================================================
   ABOUT PAGE
   FINAL VISUAL & TYPOGRAPHY SYSTEM
========================================================= */


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

.about-page .page-hero {
    padding: 62px 0 68px;

    background-color: #f4f8f8;
}


.about-page .page-hero-content {
    max-width: 820px;
}


.about-page .page-hero .hero-label {
    margin-bottom: 17px;

    color: #16859a;

    font-size: 14px;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 1.7px;
}


.about-page .page-hero h1 {
    max-width: 780px;

    margin-bottom: 22px;

    color: #173f50;

    font-size: 50px;
    font-weight: 700;

    line-height: 1.12;
}


.about-page .page-hero-content>p:last-child {
    max-width: 720px;

    color: #536b75;

    font-size: 18px;

    line-height: 1.75;
}



/* =========================================================
   SHARED ABOUT LABELS
========================================================= */

.about-page .section-label {
    margin-bottom: 15px;

    color: #16859a;

    font-size: 15px;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 1.7px;
}



/* =========================================================
   WHO WE ARE
========================================================= */

.about-page .about-page-intro {
    padding: 95px 0;

    background-color: #ffffff;
}


.about-page .about-intro-simple {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr) minmax(0, 1.08fr);

    gap: 85px;

    align-items: start;
}


.about-page .about-intro-simple h2 {
    max-width: 520px;

    margin: 0;

    color: #173f50;

    font-size: 42px;
    font-weight: 700;

    line-height: 1.18;
}


.about-page .about-intro-text p {
    margin-bottom: 20px;

    color: #536b75;

    font-size: 18px;

    line-height: 1.8;
}


.about-page .about-intro-text p:last-child {
    margin-bottom: 0;
}



/* =========================================================
   OUR APPROACH
========================================================= */

.about-page .approach-section {
    padding: 95px 0 105px;

    background-color: #f4f8f8;
}


.about-page .approach-section .section-heading {
    max-width: 720px;

    margin-bottom: 48px;
}


.about-page .approach-section .section-heading h2 {
    margin-bottom: 19px;

    color: #173f50;

    font-size: 42px;
    font-weight: 700;

    line-height: 1.18;
}


.about-page .approach-section .section-heading>p:not(.section-label) {
    color: #536b75;

    font-size: 18px;

    line-height: 1.75;
}



/* Approach Grid */

.about-page .approach-grid {
    display: grid;

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

    gap: 26px;
}



/* Approach Card */

.about-page .approach-card {
    padding: 36px 34px;

    background-color: #ffffff;

    border: 1px solid #dce6e9;

    border-radius: 12px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.about-page .approach-card:hover {
    transform: translateY(-4px);

    border-color: #c8dce1;

    box-shadow:
        0 14px 34px rgba(23, 63, 80, 0.08);
}



/* 01 / 02 / 03 */

.about-page .approach-number {
    display: inline-flex;

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

    min-width: 50px;
    height: 42px;

    margin-bottom: 24px;

    padding: 0 13px;

    background-color: #eaf5f6;

    border: 1px solid #cce4e8;

    border-radius: 999px;

    color: #117c90;

    font-size: 17px;
    font-weight: 800;

    line-height: 1;
}


.about-page .approach-card h3 {
    margin-bottom: 12px;

    color: #173f50;

    font-size: 22px;
    font-weight: 700;

    line-height: 1.4;
}


.about-page .approach-card p {
    color: #607680;

    font-size: 16px;

    line-height: 1.75;
}



/* =========================================================
   OUR FOCUS
========================================================= */

.about-page .about-focus {
    padding: 100px 0;

    background-color: #ffffff;
}


.about-page .about-focus-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr) minmax(0, 1.1fr);

    gap: 85px;

    align-items: start;
}


.about-page .about-focus-heading h2 {
    max-width: 500px;

    margin: 0;

    color: #173f50;

    font-size: 42px;
    font-weight: 700;

    line-height: 1.18;
}



/* Focus items */

.about-page .about-focus-content {
    display: flex;

    flex-direction: column;
}


.about-page .focus-item {
    display: grid;

    grid-template-columns: 52px 1fr;

    gap: 22px;

    padding: 26px 0;

    border-bottom: 1px solid #dce6e9;
}


.about-page .focus-item:first-child {
    padding-top: 0;
}



/* Focus number */

.about-page .focus-item>span {
    display: inline-flex;

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

    width: 50px;
    height: 42px;

    background-color: #eaf5f6;

    border: 1px solid #cce4e8;

    border-radius: 999px;

    color: #117c90;

    font-size: 17px;
    font-weight: 800;

    line-height: 1;
}


.about-page .focus-item h3 {
    margin-bottom: 7px;

    color: #173f50;

    font-size: 22px;
    font-weight: 700;

    line-height: 1.4;
}


.about-page .focus-item p {
    margin: 0;

    color: #607680;

    font-size: 16px;

    line-height: 1.7;
}



/* =========================================================
   WHY FORWARD PATH
========================================================= */

.about-page .why-forward {
    padding: 90px 0;

    background-color: #174f61;
}


.about-page .why-forward-content {
    display: flex;

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

    gap: 70px;
}


.about-page .why-forward-content>div {
    max-width: 780px;
}


.about-page .why-forward .section-label {
    color: #91d2dc;
}


.about-page .why-forward h2 {
    max-width: 720px;

    margin-bottom: 21px;

    color: #ffffff;

    font-size: 42px;
    font-weight: 700;

    line-height: 1.18;
}


.about-page .why-forward p {
    max-width: 720px;

    color: #d6e5e9;

    font-size: 17px;

    line-height: 1.8;
}



/* Light Button */

.about-page .why-forward .light-button {
    flex: 0 0 auto;

    padding: 13px 24px;

    background-color: #ffffff;

    color: #174f61;

    border-radius: 6px;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.4;

    text-decoration: none;

    white-space: nowrap;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}


.about-page .why-forward .light-button:hover {
    background-color: #edf5f6;

    transform: translateY(-2px);
}



/* =========================================================
   CONTACT CTA
========================================================= */

.about-page .about-contact {
    padding: 85px 0 95px;

    background-color: #ffffff;
}


.about-page .about-contact-content {
    display: flex;

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

    gap: 60px;
}


.about-page .about-contact-content>div {
    max-width: 720px;
}


.about-page .about-contact h2 {
    margin-bottom: 16px;

    color: #173f50;

    font-size: 38px;
    font-weight: 700;

    line-height: 1.2;
}


.about-page .about-contact p {
    color: #536b75;

    font-size: 17px;

    line-height: 1.75;
}


.about-page .about-contact .primary-button {
    flex: 0 0 auto;

    padding: 13px 24px;

    font-size: 16px;
    font-weight: 700;

    white-space: nowrap;
}



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

@media (max-width: 1000px) {

    .about-page .about-intro-simple,
    .about-page .about-focus-grid {
        gap: 55px;
    }


    .about-page .approach-grid {
        gap: 20px;
    }


    .about-page .approach-card {
        padding: 30px 27px;
    }

}



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

@media (max-width: 800px) {


    /* Hero */

    .about-page .page-hero {
        padding: 48px 0 55px;
    }


    .about-page .page-hero .hero-label {
        font-size: 12px;

        letter-spacing: 1.4px;
    }


    .about-page .page-hero h1 {
        font-size: 34px;

        line-height: 1.15;
    }


    .about-page .page-hero-content>p:last-child {
        font-size: 16px;

        line-height: 1.7;
    }



    /* Shared Labels */

    .about-page .section-label {
        margin-bottom: 13px;

        font-size: 12px;

        letter-spacing: 1.4px;
    }



    /* Section spacing */

    .about-page .about-page-intro,
    .about-page .approach-section,
    .about-page .about-focus,
    .about-page .why-forward,
    .about-page .about-contact {
        padding: 65px 0;
    }



    /* Who We Are */

    .about-page .about-intro-simple {
        grid-template-columns: 1fr;

        gap: 32px;
    }


    .about-page .about-intro-simple h2 {
        font-size: 31px;
    }


    .about-page .about-intro-text p {
        font-size: 16px;

        line-height: 1.72;
    }



    /* Approach */

    .about-page .approach-section .section-heading {
        margin-bottom: 35px;
    }


    .about-page .approach-section .section-heading h2 {
        font-size: 31px;
    }


    .about-page .approach-section .section-heading>p:not(.section-label) {
        font-size: 16px;
    }


    .about-page .approach-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .about-page .approach-card {
        padding: 28px 25px;
    }


    .about-page .approach-number {
        min-width: 46px;
        height: 39px;

        font-size: 16px;
    }


    .about-page .approach-card h3 {
        font-size: 20px;
    }


    .about-page .approach-card p {
        font-size: 15px;
    }



    /* Our Focus */

    .about-page .about-focus-grid {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    .about-page .about-focus-heading h2 {
        font-size: 31px;
    }


    .about-page .focus-item {
        grid-template-columns: 46px 1fr;

        gap: 16px;

        padding: 23px 0;
    }


    .about-page .focus-item>span {
        width: 44px;
        height: 38px;

        font-size: 15px;
    }


    .about-page .focus-item h3 {
        font-size: 20px;
    }


    .about-page .focus-item p {
        font-size: 15px;
    }



    /* Why Forward Path */

    .about-page .why-forward-content {
        flex-direction: column;

        align-items: flex-start;

        gap: 28px;
    }


    .about-page .why-forward h2 {
        font-size: 31px;
    }


    .about-page .why-forward p {
        font-size: 16px;
    }



    /* Contact CTA */

    .about-page .about-contact-content {
        flex-direction: column;

        align-items: flex-start;

        gap: 28px;
    }


    .about-page .about-contact h2 {
        font-size: 30px;
    }


    .about-page .about-contact p {
        font-size: 16px;
    }


    .about-page .about-contact .primary-button {
        width: 100%;

        white-space: normal;

        text-align: center;
    }

}



/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 420px) {

    .about-page .page-hero h1 {
        font-size: 31px;
    }


    .about-page .about-intro-simple h2,

    .about-page .approach-section .section-heading h2,

    .about-page .about-focus-heading h2,

    .about-page .why-forward h2 {
        font-size: 29px;
    }

}

/* =========================================================
   REFERRERS PAGE
   FINAL VISUAL & TYPOGRAPHY SYSTEM
========================================================= */


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

.referrer-page .page-hero {
    padding: 62px 0 68px;

    background-color: #f4f8f8;
}


.referrer-page .page-hero-content {
    max-width: 820px;
}


.referrer-page .page-hero .hero-label {
    margin-bottom: 17px;

    color: #16859a;

    font-size: 14px;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 1.7px;
}


.referrer-page .page-hero h1 {
    max-width: 780px;

    margin-bottom: 22px;

    color: #173f50;

    font-size: 50px;
    font-weight: 700;

    line-height: 1.12;
}


.referrer-page .page-hero-content>p:last-child {
    max-width: 720px;

    color: #536b75;

    font-size: 18px;

    line-height: 1.75;
}



/* =========================================================
   SHARED LABELS
========================================================= */

.referrer-page .section-label {
    margin-bottom: 15px;

    color: #16859a;

    font-size: 15px;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 1.7px;
}



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

.referrer-page .referrer-intro {
    padding: 95px 0;

    background-color: #ffffff;
}


.referrer-page .referrer-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr) minmax(0, 1.08fr);

    gap: 85px;

    align-items: start;
}


.referrer-page .referrer-intro h2 {
    max-width: 540px;

    margin: 0;

    color: #173f50;

    font-size: 42px;
    font-weight: 700;

    line-height: 1.18;
}


.referrer-page .referrer-intro-text p {
    margin-bottom: 20px;

    color: #536b75;

    font-size: 18px;

    line-height: 1.8;
}


.referrer-page .referrer-intro-text p:last-child {
    margin-bottom: 0;
}



/* =========================================================
   WHO WE WORK WITH
========================================================= */

.referrer-page .referrer-partners {
    padding: 95px 0 105px;

    background-color: #f4f8f8;
}


.referrer-page .referrer-partners .section-heading {
    max-width: 740px;

    margin-bottom: 48px;
}


.referrer-page .referrer-partners .section-heading h2 {
    margin-bottom: 18px;

    color: #173f50;

    font-size: 42px;
    font-weight: 700;

    line-height: 1.18;
}


.referrer-page .referrer-partners .section-heading>p:not(.section-label) {
    color: #536b75;

    font-size: 18px;

    line-height: 1.75;
}



/* Partner Grid */

.referrer-page .referrer-partner-grid {
    display: grid;

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

    gap: 26px;
}


.referrer-page .referrer-partner-card {
    padding: 35px 34px;

    background-color: #ffffff;

    border: 1px solid #dce6e9;

    border-radius: 12px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.referrer-page .referrer-partner-card:hover {
    transform: translateY(-4px);

    border-color: #c8dce1;

    box-shadow:
        0 14px 34px rgba(23, 63, 80, 0.08);
}



/* 01 / 02 / 03 / 04 */

.referrer-page .referrer-number {
    display: inline-flex;

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

    min-width: 50px;
    height: 42px;

    margin-bottom: 23px;

    padding: 0 13px;

    background-color: #eaf5f6;

    border: 1px solid #cce4e8;

    border-radius: 999px;

    color: #117c90;

    font-size: 17px;
    font-weight: 800;

    line-height: 1;
}


.referrer-page .referrer-partner-card h3 {
    margin-bottom: 12px;

    color: #173f50;

    font-size: 22px;
    font-weight: 700;

    line-height: 1.4;
}


.referrer-page .referrer-partner-card p {
    color: #607680;

    font-size: 16px;

    line-height: 1.75;
}



/* =========================================================
   WHAT YOU CAN EXPECT
========================================================= */

.referrer-page .referrer-expect {
    padding: 100px 0;

    background-color: #ffffff;
}


.referrer-page .referrer-expect-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr) minmax(0, 1.1fr);

    gap: 85px;

    align-items: start;
}


.referrer-page .referrer-expect-heading h2 {
    max-width: 520px;

    margin-bottom: 19px;

    color: #173f50;

    font-size: 42px;
    font-weight: 700;

    line-height: 1.18;
}


.referrer-page .referrer-expect-heading>p:last-child {
    max-width: 520px;

    color: #536b75;

    font-size: 17px;

    line-height: 1.75;
}



/* Expect Items */

.referrer-page .expect-item {
    display: grid;

    grid-template-columns: 52px 1fr;

    gap: 22px;

    padding: 26px 0;

    border-bottom: 1px solid #dce6e9;
}


.referrer-page .expect-item:first-child {
    padding-top: 0;
}


.referrer-page .expect-item>span {
    display: inline-flex;

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

    width: 50px;
    height: 42px;

    background-color: #eaf5f6;

    border: 1px solid #cce4e8;

    border-radius: 999px;

    color: #117c90;

    font-size: 17px;
    font-weight: 800;

    line-height: 1;
}


.referrer-page .expect-item h3 {
    margin-bottom: 7px;

    color: #173f50;

    font-size: 22px;
    font-weight: 700;

    line-height: 1.4;
}


.referrer-page .expect-item p {
    margin: 0;

    color: #607680;

    font-size: 16px;

    line-height: 1.7;
}



/* =========================================================
   REFERRAL PROCESS
========================================================= */

.referrer-page .referral-process {
    padding: 95px 0 105px;

    background-color: #f4f8f8;
}


.referrer-page .referral-process .section-heading {
    max-width: 720px;

    margin-bottom: 48px;
}


.referrer-page .referral-process .section-heading h2 {
    margin-bottom: 18px;

    color: #173f50;

    font-size: 42px;
    font-weight: 700;

    line-height: 1.18;
}


.referrer-page .referral-process .section-heading>p:not(.section-label) {
    color: #536b75;

    font-size: 17px;

    line-height: 1.75;
}



/* Referral Steps */

.referrer-page .referral-steps {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 22px;
}


.referrer-page .referral-step {
    display: flex;

    flex-direction: column;

    min-height: 260px;

    padding: 31px 28px;

    background-color: #ffffff;

    border: 1px solid #dce6e9;

    border-radius: 12px;
}


.referrer-page .referral-step-number {
    display: inline-flex;

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

    width: 48px;
    height: 40px;

    margin-bottom: 23px;

    background-color: #eaf5f6;

    border: 1px solid #cce4e8;

    border-radius: 999px;

    color: #117c90;

    font-size: 16px;
    font-weight: 800;
}


.referrer-page .referral-step h3 {
    margin-bottom: 11px;

    color: #173f50;

    font-size: 21px;
    font-weight: 700;

    line-height: 1.4;
}


.referrer-page .referral-step p {
    color: #607680;

    font-size: 15px;

    line-height: 1.7;
}



/* =========================================================
   REFERRAL INFORMATION
========================================================= */

.referrer-page .referral-information {
    padding: 90px 0;

    background-color: #174f61;
}


.referrer-page .referral-information-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr) minmax(0, 1.05fr);

    gap: 85px;

    align-items: start;
}


.referrer-page .referral-information .section-label {
    color: #91d2dc;
}


.referrer-page .referral-information h2 {
    max-width: 580px;

    margin-bottom: 18px;

    color: #ffffff;

    font-size: 40px;
    font-weight: 700;

    line-height: 1.2;
}


.referrer-page .referral-information p:not(.section-label) {
    color: #d6e5e9;

    font-size: 17px;

    line-height: 1.75;
}


.referrer-page .referral-information-note {
    margin-top: 20px;

    padding-left: 16px;

    border-left: 3px solid #78c5d1;

    color: #bdd2d7 !important;

    font-size: 14px !important;
}



/* Information List */

.referrer-page .referral-information-list {
    display: flex;

    flex-direction: column;
}


.referrer-page .referral-information-list div {
    position: relative;

    padding: 17px 0 17px 28px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 600;

    line-height: 1.55;

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


.referrer-page .referral-information-list div::before {
    content: "✓";

    position: absolute;

    left: 0;

    color: #8fd0da;

    font-weight: 800;
}



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

.referrer-page .referral-form-section {
    padding: 95px 0 105px;

    background-color: #f4f8f8;

    scroll-margin-top: 110px;
}


.referrer-page .referral-form-heading {
    max-width: 720px;

    margin: 0 auto 45px;

    text-align: center;
}


.referrer-page .referral-form-heading h2 {
    margin-bottom: 15px;

    color: #173f50;

    font-size: 42px;
    font-weight: 700;

    line-height: 1.2;
}


.referrer-page .referral-form-heading>p:last-child {
    color: #637982;

    font-size: 17px;

    line-height: 1.75;
}



/* Form Card */

.referrer-page .referral-form-card {
    max-width: 900px;

    margin: 0 auto;

    padding: 52px 58px;

    background-color: #ffffff;

    border: 1px solid #e0e8ea;

    border-radius: 14px;

    box-shadow:
        0 15px 42px rgba(23, 63, 80, 0.06);
}



/* Form Blocks */

.referrer-page .referral-form-block {
    padding-bottom: 42px;

    margin-bottom: 42px;

    border-bottom: 1px solid #e2e9eb;
}


.referrer-page .referral-form-block-heading {
    display: grid;

    grid-template-columns: 50px 1fr;

    gap: 16px;

    margin-bottom: 29px;
}


.referrer-page .referral-form-block-heading>span {
    display: inline-flex;

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

    width: 46px;
    height: 38px;

    background-color: #eaf5f6;

    border: 1px solid #cce4e8;

    border-radius: 999px;

    color: #117c90;

    font-size: 15px;
    font-weight: 800;
}


.referrer-page .referral-form-block-heading h3 {
    margin-bottom: 5px;

    color: #173f50;

    font-size: 23px;
    font-weight: 700;

    line-height: 1.4;
}


.referrer-page .referral-form-block-heading p {
    color: #71858d;

    font-size: 14px;

    line-height: 1.6;
}



/* Fields */

.referrer-page .referral-fields-grid {
    display: grid;

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

    gap: 24px 28px;
}


.referrer-page .referral-field label {
    display: block;

    margin-bottom: 9px;

    color: #405b66;

    font-size: 14px;
    font-weight: 600;
}


.referrer-page .referral-field input,

.referrer-page .referral-field select,

.referrer-page .referral-field textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 14px 15px;

    background-color: #ffffff;

    border: 1px solid #cad6d9;

    border-radius: 6px;

    color: #334f59;

    font: inherit;

    font-size: 15px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.referrer-page .referral-field input:focus,

.referrer-page .referral-field select:focus,

.referrer-page .referral-field textarea:focus {
    border-color: #16859a;

    box-shadow:
        0 0 0 3px rgba(22, 133, 154, 0.08);
}


.referrer-page .referral-field textarea {
    min-height: 150px;

    resize: vertical;
}


.referrer-page .referral-field-note {
    margin-top: 10px;

    color: #788c94;

    font-size: 13px;

    line-height: 1.6;
}



/* Privacy */

.referrer-page .referral-checkbox span {
    color: #627780;

    font-size: 14px;

    line-height: 1.65;
}



/* Submit */

.referrer-page .referral-submit-button {
    min-width: 255px;

    padding: 14px 24px;

    font-size: 16px;
    font-weight: 700;
}


.referrer-page .referral-submit-area>p {
    max-width: 520px;

    margin: 15px auto 0;

    color: #788c94;

    font-size: 13px;

    line-height: 1.6;
}



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

.referrer-page .referrer-contact-cta {
    padding: 85px 0 95px;

    background-color: #ffffff;
}


.referrer-page .referrer-contact-content {
    display: flex;

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

    gap: 60px;
}


.referrer-page .referrer-contact-content>div {
    max-width: 720px;
}


.referrer-page .referrer-contact-content h2 {
    margin-bottom: 16px;

    color: #173f50;

    font-size: 38px;
    font-weight: 700;

    line-height: 1.2;
}


.referrer-page .referrer-contact-content p {
    color: #536b75;

    font-size: 17px;

    line-height: 1.75;
}


.referrer-page .referrer-contact-content .primary-button {
    flex: 0 0 auto;

    white-space: nowrap;
}



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

@media (max-width: 1000px) {

    .referrer-page .referral-steps {
        grid-template-columns:
            repeat(2, 1fr);
    }

}



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

@media (max-width: 800px) {


    /* Hero */

    .referrer-page .page-hero {
        padding: 48px 0 55px;
    }


    .referrer-page .page-hero .hero-label {
        font-size: 12px;
    }


    .referrer-page .page-hero h1 {
        font-size: 34px;
    }


    .referrer-page .page-hero-content>p:last-child {
        font-size: 16px;
    }



    /* Labels */

    .referrer-page .section-label {
        font-size: 12px;
    }



    /* Section spacing */

    .referrer-page .referrer-intro,

    .referrer-page .referrer-partners,

    .referrer-page .referrer-expect,

    .referrer-page .referral-process,

    .referrer-page .referral-information,

    .referrer-page .referral-form-section,

    .referrer-page .referrer-contact-cta {
        padding: 65px 0;
    }



    /* Intro */

    .referrer-page .referrer-intro-grid {
        grid-template-columns: 1fr;

        gap: 32px;
    }


    .referrer-page .referrer-intro h2 {
        font-size: 31px;
    }


    .referrer-page .referrer-intro-text p {
        font-size: 16px;
    }



    /* Partners */

    .referrer-page .referrer-partner-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .referrer-page .referrer-partners .section-heading h2 {
        font-size: 31px;
    }


    .referrer-page .referrer-partners .section-heading>p:not(.section-label) {
        font-size: 16px;
    }


    .referrer-page .referrer-partner-card {
        padding: 28px 25px;
    }



    /* What to Expect */

    .referrer-page .referrer-expect-grid {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    .referrer-page .referrer-expect-heading h2 {
        font-size: 31px;
    }



    /* Referral Process */

    .referrer-page .referral-process .section-heading h2 {
        font-size: 31px;
    }


    .referrer-page .referral-steps {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .referrer-page .referral-step {
        min-height: 0;

        padding: 27px 24px;
    }



    /* Referral Information */

    .referrer-page .referral-information-grid {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    .referrer-page .referral-information h2 {
        font-size: 30px;
    }


    .referrer-page .referral-information p:not(.section-label) {
        font-size: 16px;
    }



    /* Form */

    .referrer-page .referral-form-heading {
        margin-bottom: 35px;

        text-align: left;
    }


    .referrer-page .referral-form-heading h2 {
        font-size: 31px;
    }


    .referrer-page .referral-form-heading>p:last-child {
        font-size: 16px;
    }


    .referrer-page .referral-form-card {
        padding: 31px 22px;

        border-radius: 10px;
    }


    .referrer-page .referral-fields-grid {
        grid-template-columns: 1fr;

        gap: 21px;
    }


    .referrer-page .referral-form-block-heading {
        grid-template-columns: 44px 1fr;
    }


    .referrer-page .referral-form-block-heading h3 {
        font-size: 21px;
    }


    .referrer-page .referral-submit-button {
        width: 100%;

        min-width: 0;
    }



    /* CTA */

    .referrer-page .referrer-contact-content {
        flex-direction: column;

        align-items: flex-start;

        gap: 28px;
    }


    .referrer-page .referrer-contact-content h2 {
        font-size: 30px;
    }


    .referrer-page .referrer-contact-content p {
        font-size: 16px;
    }


    .referrer-page .referrer-contact-content .primary-button {
        width: 100%;

        white-space: normal;

        text-align: center;
    }

}

/* =========================================================
   FAQ PAGE
   FINAL VISUAL & TYPOGRAPHY SYSTEM
========================================================= */


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

.faq-page .page-hero {
    padding: 62px 0 68px;

    background-color: #f4f8f8;
}


.faq-page .page-hero-content {
    max-width: 820px;
}


.faq-page .page-hero .hero-label {
    margin-bottom: 17px;

    color: #16859a;

    font-size: 14px;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 1.7px;
}


.faq-page .page-hero h1 {
    max-width: 760px;

    margin-bottom: 22px;

    color: #173f50;

    font-size: 50px;
    font-weight: 700;

    line-height: 1.12;
}


.faq-page .page-hero-content>p:last-child {
    max-width: 700px;

    color: #536b75;

    font-size: 18px;

    line-height: 1.75;
}



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

.faq-page .section-label {
    margin-bottom: 15px;

    color: #16859a;

    font-size: 15px;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 1.7px;
}



/* =========================================================
   FAQ SECTION
========================================================= */

.faq-page .faq-page-section {
    padding: 95px 0 105px;

    background-color: #ffffff;
}


.faq-page .faq-page-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.78fr) minmax(0, 1.22fr);

    gap: 90px;

    align-items: start;
}



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

.faq-page .faq-page-heading {
    max-width: 430px;
}


.faq-page .faq-page-heading h2 {
    margin-bottom: 18px;

    color: #173f50;

    font-size: 42px;
    font-weight: 700;

    line-height: 1.18;
}


.faq-page .faq-page-heading>p:not(.section-label) {
    margin-bottom: 28px;

    color: #536b75;

    font-size: 17px;

    line-height: 1.75;
}


.faq-page .faq-page-heading .primary-button {
    display: inline-block;

    flex: 0 0 auto;

    padding: 13px 24px;

    font-size: 16px;
    font-weight: 700;
}



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

.faq-page .faq-list {
    min-width: 0;
}


.faq-page .faq-item {
    border-bottom: 1px solid #d8e3e5;
}


.faq-page .faq-item:first-child {
    border-top: 1px solid #d8e3e5;
}



/* =========================================================
   QUESTION
========================================================= */

.faq-page .faq-question {
    display: flex;

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

    gap: 30px;

    width: 100%;

    padding: 25px 0;

    background: transparent;

    border: none;

    color: #173f50;

    font-family: inherit;

    font-size: 19px;
    font-weight: 700;

    line-height: 1.45;

    text-align: left;

    cursor: pointer;
}


.faq-page .faq-question:hover {
    color: #176c7e;
}



/* Plus icon */

.faq-page .faq-icon {
    display: inline-flex;

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

    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    color: #16859a;

    font-size: 27px;
    font-weight: 400;

    line-height: 1;

    transition: transform 0.25s ease;
}


.faq-page .faq-item.open .faq-icon {
    transform: rotate(45deg);
}



/* =========================================================
   ANSWER
========================================================= */

.faq-page .faq-answer {
    display: none;

    max-width: 680px;

    padding: 0 52px 27px 0;
}


.faq-page .faq-item.open .faq-answer {
    display: block;
}


.faq-page .faq-answer p {
    margin-bottom: 15px;

    color: #5b7079;

    font-size: 16px;

    line-height: 1.75;
}


.faq-page .faq-answer p:last-of-type {
    margin-bottom: 0;
}



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

.faq-page .faq-answer-list {
    margin: 17px 0 19px;

    padding: 0;

    list-style: none;
}


.faq-page .faq-answer-list li {
    position: relative;

    margin-bottom: 10px;

    padding-left: 25px;

    color: #5b7079;

    font-size: 16px;

    line-height: 1.7;
}


.faq-page .faq-answer-list li::before {
    content: "✓";

    position: absolute;

    left: 0;

    color: #16859a;

    font-weight: 800;
}



/* =========================================================
   FAQ LINKS
========================================================= */

.faq-page .faq-link {
    display: inline-block;

    margin-top: 16px;

    color: #176c7e;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.5;

    text-decoration: none;
}


.faq-page .faq-link:hover {
    text-decoration: underline;
}



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

@media (max-width: 1000px) {

    .faq-page .faq-page-layout {
        grid-template-columns:
            minmax(0, 0.7fr) minmax(0, 1.3fr);

        gap: 55px;
    }

}



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

@media (max-width: 800px) {


    /* Hero */

    .faq-page .page-hero {
        padding: 48px 0 55px;
    }


    .faq-page .page-hero .hero-label {
        font-size: 12px;

        letter-spacing: 1.4px;
    }


    .faq-page .page-hero h1 {
        font-size: 34px;

        line-height: 1.15;
    }


    .faq-page .page-hero-content>p:last-child {
        font-size: 16px;

        line-height: 1.7;
    }



    /* FAQ section */

    .faq-page .faq-page-section {
        padding: 65px 0 70px;
    }


    .faq-page .faq-page-layout {
        grid-template-columns: 1fr;

        gap: 40px;
    }



    /* Left heading */

    .faq-page .faq-page-heading {
        max-width: 100%;
    }


    .faq-page .section-label {
        font-size: 12px;

        letter-spacing: 1.4px;
    }


    .faq-page .faq-page-heading h2 {
        font-size: 31px;
    }


    .faq-page .faq-page-heading>p:not(.section-label) {
        font-size: 16px;
    }



    /* Contact button */

    .faq-page .faq-page-heading .primary-button {
        flex: 0 0 auto;

        width: auto;

        padding: 12px 20px;

        font-size: 15px;
    }



    /* FAQ question */

    .faq-page .faq-question {
        gap: 18px;

        padding: 21px 0;

        font-size: 17px;

        line-height: 1.45;
    }


    .faq-page .faq-icon {
        width: 30px;
        height: 30px;

        font-size: 24px;
    }



    /* Answers */

    .faq-page .faq-answer {
        max-width: 100%;

        padding:
            0 10px 23px 0;
    }


    .faq-page .faq-answer p {
        font-size: 15px;

        line-height: 1.72;
    }


    .faq-page .faq-answer-list li {
        font-size: 15px;

        line-height: 1.65;
    }


    .faq-page .faq-link {
        font-size: 14px;
    }

}



/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 420px) {

    .faq-page .page-hero h1 {
        font-size: 31px;
    }


    .faq-page .faq-page-heading h2 {
        font-size: 29px;
    }


    .faq-page .faq-question {
        font-size: 16px;
    }

}

/* =========================================================
   CONTACT PAGE
   FINAL VISUAL & TYPOGRAPHY SYSTEM
========================================================= */


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

.contact-page .page-hero {
    padding: 62px 0 68px;

    background-color: #f4f8f8;
}


.contact-page .page-hero-content {
    max-width: 820px;
}


.contact-page .page-hero .hero-label {
    margin-bottom: 17px;

    color: #16859a;

    font-size: 14px;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 1.7px;
}


.contact-page .page-hero h1 {
    max-width: 780px;

    margin-bottom: 22px;

    color: #173f50;

    font-size: 50px;
    font-weight: 700;

    line-height: 1.12;
}


.contact-page .page-hero-content>p:last-child {
    max-width: 720px;

    color: #536b75;

    font-size: 18px;

    line-height: 1.75;
}



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

.contact-page .section-label {
    margin-bottom: 15px;

    color: #16859a;

    font-size: 15px;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 1.7px;
}



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

.contact-page .contact-page-details {
    padding: 95px 0 105px;

    background-color: #ffffff;
}


.contact-page .contact-page-heading {
    max-width: 760px;

    margin-bottom: 48px;
}


.contact-page .contact-page-heading h2 {
    margin-bottom: 18px;

    color: #173f50;

    font-size: 42px;
    font-weight: 700;

    line-height: 1.18;
}


.contact-page .contact-page-heading>p:not(.section-label) {
    color: #536b75;

    font-size: 18px;

    line-height: 1.75;
}



/* =========================================================
   CONTACT CARDS
========================================================= */

.contact-page .contact-card-grid {
    display: grid;

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

    gap: 25px;
}


.contact-page .contact-card {
    min-width: 0;

    padding: 35px 33px;

    background-color: #ffffff;

    border: 1px solid #dce6e9;

    border-radius: 12px;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.contact-page .contact-card:hover {
    transform: translateY(-4px);

    border-color: #c7dce1;

    box-shadow:
        0 14px 34px rgba(23, 63, 80, 0.08);
}



/* Number */

.contact-page .contact-card-number {
    display: inline-flex;

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

    min-width: 50px;
    height: 42px;

    margin-bottom: 24px;

    padding: 0 13px;

    background-color: #eaf5f6;

    border: 1px solid #cce4e8;

    border-radius: 999px;

    color: #117c90;

    font-size: 17px;
    font-weight: 800;

    line-height: 1;
}



/* PHONE / LOCATION / SERVICE AREA */

.contact-page .contact-card-label {
    margin-bottom: 9px;

    color: #16859a;

    font-size: 12px;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 1.5px;
}


.contact-page .contact-card h3 {
    margin-bottom: 14px;

    color: #173f50;

    font-size: 22px;
    font-weight: 700;

    line-height: 1.4;

    word-break: normal;
}


.contact-page .contact-card h3 a {
    color: inherit;

    text-decoration: none;
}


.contact-page .contact-card h3 a:hover {
    color: #16859a;
}


.contact-page .contact-card>p:last-child {
    margin: 0;

    color: #607680;

    font-size: 16px;

    line-height: 1.75;
}



/* =========================================================
   CONTACT INFORMATION
========================================================= */

.contact-page .contact-information {
    padding: 100px 0;

    background-color: #f4f8f8;
}


.contact-page .contact-information-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr) minmax(0, 1.1fr);

    gap: 85px;

    align-items: start;
}


.contact-page .contact-information-heading h2 {
    max-width: 520px;

    margin-bottom: 16px;

    color: #173f50;

    font-size: 42px;
    font-weight: 700;

    line-height: 1.18;
}


.contact-page .contact-information-heading>p:last-child {
    max-width: 500px;

    color: #536b75;

    font-size: 17px;

    line-height: 1.75;
}



/* Information Rows */

.contact-page .contact-information-list {
    min-width: 0;
}


.contact-page .contact-info-row {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 35px;

    padding: 23px 0;

    border-bottom: 1px solid #d8e3e5;
}


.contact-page .contact-info-row:first-child {
    padding-top: 0;
}


.contact-page .contact-info-row span {
    flex: 0 0 auto;

    color: #70838c;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.6;
}


.contact-page .contact-info-row strong {
    max-width: 65%;

    color: #173f50;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.6;

    text-align: right;
}


.contact-page .contact-info-row strong a {
    color: inherit;

    text-decoration: none;
}


.contact-page .contact-info-row strong a:hover {
    color: #16859a;

    text-decoration: underline;
}



/* =========================================================
   REFERRAL SECTION
========================================================= */

.contact-page .contact-referrals {
    padding: 90px 0;

    background-color: #174f61;
}


.contact-page .contact-referrals-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr) minmax(0, 1.08fr);

    gap: 85px;

    align-items: start;
}


.contact-page .contact-referrals .section-label {
    color: #91d2dc;
}


.contact-page .contact-referrals h2 {
    max-width: 560px;

    margin-bottom: 20px;

    color: #ffffff;

    font-size: 40px;
    font-weight: 700;

    line-height: 1.2;
}


.contact-page .contact-referrals>.container>div>div:first-child>p:not(.section-label) {
    margin-bottom: 17px;

    color: #d6e5e9;

    font-size: 17px;

    line-height: 1.75;
}



/* =========================================================
   REFERRAL LIST
========================================================= */

.contact-page .contact-referral-details {
    min-width: 0;
}


.contact-page .contact-referral-label {
    margin-bottom: 14px !important;

    color: #91d2dc !important;

    font-size: 12px !important;
    font-weight: 800;

    line-height: 1.5 !important;

    letter-spacing: 1.4px;
}


.contact-page .contact-referral-details>div {
    position: relative;

    padding: 16px 0 16px 27px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 600;

    line-height: 1.55;

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


.contact-page .contact-referral-details>div::before {
    content: "✓";

    position: absolute;

    left: 0;

    color: #8fd0da;

    font-weight: 800;
}



/* Referral Button */

.contact-page .contact-referrer-button {
    display: inline-block;

    margin-top: 28px;

    padding: 13px 23px;

    background-color: #ffffff;

    color: #174f61;

    border-radius: 6px;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.4;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}


.contact-page .contact-referrer-button:hover {
    background-color: #edf5f6;

    transform: translateY(-2px);
}



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

.contact-page .contact-final-cta {
    padding: 85px 0 95px;

    background-color: #ffffff;
}


.contact-page .contact-final-content {
    display: flex;

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

    gap: 60px;
}


.contact-page .contact-final-content>div:first-child {
    max-width: 690px;
}


.contact-page .contact-final-content h2 {
    margin-bottom: 16px;

    color: #173f50;

    font-size: 38px;
    font-weight: 700;

    line-height: 1.2;
}


.contact-page .contact-final-content p {
    color: #536b75;

    font-size: 17px;

    line-height: 1.75;
}



/* Actions */

.contact-page .contact-final-actions {
    display: flex;

    flex: 0 0 auto;

    gap: 13px;
}


.contact-page .contact-final-actions .primary-button,

.contact-page .contact-final-actions .secondary-button {
    flex: 0 0 auto;

    padding: 13px 23px;

    font-size: 16px;
    font-weight: 700;

    text-align: center;

    white-space: nowrap;
}



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

@media (max-width: 1000px) {

    .contact-page .contact-card {
        padding: 30px 27px;
    }


    .contact-page .contact-information-grid,

    .contact-page .contact-referrals-grid {
        gap: 55px;
    }

}



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

@media (max-width: 800px) {


    /* Hero */

    .contact-page .page-hero {
        padding: 48px 0 55px;
    }


    .contact-page .page-hero .hero-label {
        font-size: 12px;

        letter-spacing: 1.4px;
    }


    .contact-page .page-hero h1 {
        font-size: 34px;

        line-height: 1.15;
    }


    .contact-page .page-hero-content>p:last-child {
        font-size: 16px;

        line-height: 1.7;
    }



    /* Shared label */

    .contact-page .section-label {
        font-size: 12px;

        letter-spacing: 1.4px;
    }



    /* Section spacing */

    .contact-page .contact-page-details,

    .contact-page .contact-information,

    .contact-page .contact-referrals,

    .contact-page .contact-final-cta {
        padding: 65px 0;
    }



    /* Contact heading */

    .contact-page .contact-page-heading {
        margin-bottom: 35px;
    }


    .contact-page .contact-page-heading h2 {
        font-size: 31px;
    }


    .contact-page .contact-page-heading>p:not(.section-label) {
        font-size: 16px;
    }



    /* Cards */

    .contact-page .contact-card-grid {
        grid-template-columns: 1fr;

        gap: 19px;
    }


    .contact-page .contact-card {
        padding: 28px 25px;
    }


    .contact-page .contact-card-number {
        min-width: 46px;
        height: 39px;

        font-size: 16px;
    }


    .contact-page .contact-card h3 {
        font-size: 20px;
    }


    .contact-page .contact-card>p:last-child {
        font-size: 15px;
    }



    /* Contact Information */

    .contact-page .contact-information-grid {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    .contact-page .contact-information-heading h2 {
        font-size: 31px;
    }


    .contact-page .contact-info-row {
        flex-direction: column;

        align-items: flex-start;

        gap: 5px;

        padding: 18px 0;
    }


    .contact-page .contact-info-row strong {
        max-width: 100%;

        font-size: 16px;

        text-align: left;
    }



    /* Referrals */

    .contact-page .contact-referrals-grid {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    .contact-page .contact-referrals h2 {
        font-size: 30px;
    }


    .contact-page .contact-referrals>.container>div>div:first-child>p:not(.section-label) {
        font-size: 16px;
    }


    .contact-page .contact-referral-details>div {
        font-size: 15px;
    }



    /* Final CTA */

    .contact-page .contact-final-content {
        flex-direction: column;

        align-items: flex-start;

        gap: 28px;
    }


    .contact-page .contact-final-content h2 {
        font-size: 30px;
    }


    .contact-page .contact-final-content p {
        font-size: 16px;
    }


    .contact-page .contact-final-actions {
        width: 100%;

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 11px;
    }


    .contact-page .contact-final-actions .primary-button,

    .contact-page .contact-final-actions .secondary-button {
        width: 100%;

        box-sizing: border-box;

        white-space: normal;
    }

}



/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 420px) {

    .contact-page .page-hero h1 {
        font-size: 31px;
    }


    .contact-page .contact-page-heading h2,

    .contact-page .contact-information-heading h2,

    .contact-page .contact-referrals h2,

    .contact-page .contact-final-content h2 {
        font-size: 29px;
    }


    .contact-page .contact-final-actions {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   CONTACT PAGE — 4 CONTACT CARDS
========================================================= */

.contact-page .contact-card-grid {
    display: grid;

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

    gap: 24px;
}


/* Long email address */

.contact-page .contact-card .contact-email {
    font-size: 20px;

    overflow-wrap: anywhere;
}


/* Mobile */

@media (max-width: 800px) {

    .contact-page .contact-card-grid {
        grid-template-columns: 1fr;

        gap: 19px;
    }


    .contact-page .contact-card .contact-email {
        font-size: 19px;
    }

}

/* =========================================================
   FINAL MOBILE NAV CONTACT BUTTON FIX
   KEEP AT ABSOLUTE BOTTOM OF STYLE.CSS
========================================================= */

@media (max-width: 800px) {

    .header .nav-links .mobile-contact-link {

        /* Button layout */
        display: flex !important;

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

        align-self: center;

        flex: none !important;

        width: 100%;
        max-width: 260px;

        min-height: 52px;
        height: auto;

        box-sizing: border-box;


        /* Spacing */
        margin: 20px auto 4px !important;

        padding: 14px 24px !important;


        /* Appearance */
        background-color: #176c7e !important;

        color: #ffffff !important;

        border: none !important;
        border-bottom: none !important;

        border-radius: 6px;


        /* Text */
        font-size: 16px !important;
        font-weight: 700 !important;

        line-height: 1.2 !important;

        text-align: center;

        white-space: nowrap;

        text-decoration: none;
    }


    .header .nav-links .mobile-contact-link:hover {

        background-color: #125c6c !important;

        color: #ffffff !important;
    }

}

/* =========================================================
   SERVICE OVERVIEW
   FULL CARD CLICKABLE
========================================================= */

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

    color: inherit;

    text-decoration: none;

    cursor: pointer;
}


/* Keep title colour */

.service-overview-card h3 {
    color: #173f50;
}


/* Learn More stays styled like a link */

.service-overview-card .service-learn-more {
    display: inline-block;

    margin-top: auto;

    color: #176c7e;

    font-weight: 700;

    text-decoration: none;
}


/* Optional arrow */

.service-overview-card .service-learn-more::after {
    content: " →";
}


/* Hover */

.service-overview-card:hover .service-learn-more {
    color: #16859a;
}


/* Keyboard accessibility */

.service-overview-card:focus-visible {
    outline: 3px solid rgba(22, 133, 154, 0.35);

    outline-offset: 3px;
}

/* =========================================================
   SERVICE OVERVIEW
   FULL CARD LINK - FINAL CLEANUP
========================================================= */

.service-overview-card,
.service-overview-card:link,
.service-overview-card:visited,
.service-overview-card:hover,
.service-overview-card:active {
    color: inherit;

    text-decoration: none !important;
}


/* Prevent any text inside the card from being underlined */

.service-overview-card *,
.service-overview-card:hover *,
.service-overview-card:active * {
    text-decoration: none !important;
}


/* Learn More */

.service-overview-card .service-learn-more {
    display: inline-block;

    margin-top: auto;

    color: #176c7e;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none !important;
}


/* Keep subtle interaction without underline */

.service-overview-card:hover .service-learn-more {
    color: #16859a;

    text-decoration: none !important;
}

/* =========================================================
   MOBILE SERVICE DETAIL
   HIDE LEFT SIDEBAR
========================================================= */

@media (max-width: 800px) {

    .service-sidebar {
        display: none !important;
    }

}