/* =========================================
   Large Laptop
========================================= */

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


/* =========================================
   Laptop
========================================= */

@media (max-width: 992px) {
    .hero {
        padding-top: 150px;
        padding-bottom: 90px;
    }

    .hero-grid {
        gap: 50px;
    }

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

    .hero h2 {
        font-size: 24px;
    }

    .hero p {
        font-size: 18px;
    }

    .what-is {
        padding: 80px 0;
    }

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

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

    .what-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .what-content p {
        font-size: 20px;
    }

    .what-content h4 {
        font-size: 24px;
    }

    .pillars {
        padding: 80px 0;
    }

    .pillars-heading {
        margin-bottom: 50px;
    }

    .pillars-heading h2 {
        font-size: 38px;
    }

    .pillars-grid {
        gap: 20px;
    }

    .pillar-content h3 {
        font-size: 22px;
    }

    .origin {
        padding: 90px 0;
    }

    .origin-grid {
        grid-template-columns: 320px 1fr;
        gap: 45px;
    }

    .origin-content h2 {
        font-size: 36px;
        margin-bottom: 28px;
    }

    .origin-content p {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .author {
        margin-top: 35px;
    }

    .start-today {
        padding: 80px 0;
    }

    .start-header {
        margin-bottom: 50px;
    }

    .start-header h2 {
        font-size: 36px;
    }

    .steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .step-card {
        padding: 30px;
    }

    .step-card p {
        font-size: 18px;
    }

    .footer {
        padding: 50px 0 25px;
    }

    .footerGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .footerBrand {
        max-width: 100%;
    }

    .footerBrand p {
        font-size: 17px;
    }
}


/* =========================================
   Tablet
========================================= */

@media (max-width: 768px) {

    .nav-wrapper {
        height: 75px;
    }

    .brand {
        font-size: 20px;
        gap: 10px;
    }

    .mk {
        width: 38px;
        height: 38px;
    }

    .mk svg {
        width: 20px;
        height: 20px;
    }

    .hamburger {
        display: block;
        z-index: 1001;
    }

    nav {
        position: fixed;
        top: 75px;
        left: 0;
        width: 100%;
        background: var(--navy);
    }

    .nav-links {
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 0;
        background: var(--navy);
        transition: .35s ease;
        padding: 15px 0;
    }

    .nav-links li {
        width: 100%;
        text-align: center;
    }

    .nav-links a {
        display: block;
        padding: 16px;
        font-size: 16px;
    }

    .nav-links.active {
        left: 0;
    }

    .hero {
        padding-top: 120px;
        padding-bottom: 70px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
        text-align: center;
    }

    .hero-content {
        order: 2;
    }

    .hero-image {
        order: 1;
    }

    .hero-image img {
        width: 100%;
        max-width: 500px;
        margin: auto;
    }

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

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

    .hero h2 {
        font-size: 22px;
        max-width: 100%;
        margin: 0 auto 22px;
    }

    .hero p {
        max-width: 100%;
        margin: 0 auto 32px;
        font-size: 18px;
    }

    .hero-buttons {
        justify-content: center;
    }

    .text-link {
        margin-top: 22px;
    }

    .what-is {
        padding: 70px 0;
    }

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

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

    .what-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 45px;
    }

    .what-card {
        padding: 30px 25px;
    }

    .icon {
        width: 60px;
        height: 60px;
        font-size: 26px;
        margin-bottom: 20px;
    }

    .what-card h3 {
        font-size: 20px;
    }

    .what-card p {
        font-size: 16px;
    }

    .what-content p {
        font-size: 18px;
        line-height: 1.7;
    }

    .what-content h4 {
        font-size: 22px;
    }

    .pillars {
        padding: 70px 0;
    }

    .pillars-heading {
        margin-bottom: 40px;
    }

    .pillars-heading h2 {
        font-size: 32px;
        line-height: 1.3;
    }

    .pillars-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pillar-card {
        padding: 20px;
        gap: 15px;
    }

    .pillar-number {
        width: 34px;
        height: 34px;
        min-width: 34px;
        font-size: 15px;
    }

    .pillar-content h3 {
        font-size: 20px;
    }

    .pillar-content p {
        font-size: 16px;
    }

    .pillar-btn {
        margin-top: 40px;
    }

    .origin {
        padding: 70px 0;
    }

    .origin-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .origin-image {
        max-width: 450px;
        margin: 0 auto;
    }

    .origin-content {
        text-align: center;
    }

    .origin-content h2 {
        font-size: 30px;
        line-height: 1.35;
        margin-bottom: 22px;
    }

    .origin-content p {
        font-size: 17px;
        line-height: 1.8;
        margin-bottom: 18px;
    }

    .author {
        margin-top: 30px;
        border-left: none;
        border-top: 3px solid var(--gold);
        padding-left: 0;
        padding-top: 18px;
        text-align: center;
    }

    .author h4 {
        font-size: 20px;
    }

    .start-today {
        padding: 70px 0;
    }

    .start-header {
        margin-bottom: 40px;
    }

    .start-header h2 {
        font-size: 30px;
        line-height: 1.35;
    }

    .steps {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .step-card {
        padding: 25px;
    }

    .step-number {
        padding: 7px 16px;
        margin-bottom: 18px;
        font-size: 14px;
    }

    .step-card p {
        font-size: 17px;
        line-height: 1.7;
    }

    .start-buttons {
        flex-direction: column;
        align-items: center;
        gap: 18px;
        margin-top: 40px;
    }

    .btn-primary,
    .btn-outline {
        width: 100%;
        max-width: 350px;
        text-align: center;
        padding: 16px;
    }

    .footer {
        padding: 45px 0 22px;
    }

    .footerGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
        text-align: left;
    }

    .footerBrand {
        grid-column: 1 / -1;
        max-width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

    .footerBrand .logo {
        display: flex;
        justify-content: center;
        margin-bottom: 18px;
    }

    .footerColumn {
        text-align: center;
    }

    .footerColumn h4 {
        margin-bottom: 12px;
    }

    .footerColumn li {
        margin-bottom: 8px;
    }

    .footerColumn a {
        font-size: 15px;
    }

    .footerBottom {
        padding-top: 22px;
    }

}


/* =========================================
   Mobile
========================================= */

@media (max-width: 576px) {
    .container {
        width: 92%;
    }

    .brand {
        font-size: 17px;
    }

    .brand b {
        display: none;
    }

    .mk {
        width: 34px;
        height: 34px;
    }

    .mk svg {
        width: 18px;
        height: 18px;
    }

    .hero {
        padding-top: 110px;
        padding-bottom: 60px;
    }

    .hero h1 {
        font-size: 36px;
        line-height: 1.15;
    }

    .hero h2 {
        font-size: 18px;
    }

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

    .hero-label {
        font-size: 12px;
        letter-spacing: 1px;
    }

    .btn-primary {
        width: 100%;
        padding: 16px;
    }

    .text-link {
        font-size: 15px;
    }

    .what-is {
        padding: 60px 0;
    }

    .section-heading h2 {
        font-size: 28px;
        line-height: 1.3;
    }

    .what-card {
        padding: 25px 20px;
    }

    .what-card h3 {
        font-size: 18px;
    }

    .what-card p {
        font-size: 15px;
    }

    .what-content p {
        font-size: 17px;
    }

    .what-content h4 {
        font-size: 20px;
    }

    .pillars {
        padding: 60px 0;
    }

    .pillars-heading span {
        font-size: 12px;
        letter-spacing: 1px;
    }

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

    .pillar-card {
        padding: 18px;
    }

    .pillar-content h3 {
        font-size: 18px;
    }

    .pillar-content p {
        font-size: 15px;
        line-height: 1.6;
    }

    .origin {
        padding: 60px 0;
    }

    .origin-content h2 {
        font-size: 26px;
    }

    .origin-content p {
        font-size: 16px;
        line-height: 1.7;
    }

    .author h4 {
        font-size: 18px;
    }

    .author span {
        font-size: 15px;
    }

    .start-today {
        padding: 60px 0;
    }

    .start-header h2 {
        font-size: 26px;
    }

    .step-card {
        padding: 20px;
    }

    .step-card p {
        font-size: 16px;
    }

    .btn-outline {
        max-width: 100%;
    }

    .footerGrid {
        grid-template-columns: 1fr 1fr;
        gap: 25px 15px;
    }

    .footerBrand {
        grid-column: 1/-1;
    }

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

    .footerColumn h4 {
        font-size: 14px;
    }

    .footerColumn a {
        font-size: 14px;
    }

    .footerBottom p {
        font-size: 13px;
    }

    .footerQuote {
        font-size: 17px;
    }
}

@media (max-width:375px) {

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

    .hero h2 {
        font-size: 17px;
    }

    .hero p {
        font-size: 15px;
    }

}

/*=========================================
    ABOUT HERO - TABLET
=========================================*/

@media (max-width:992px) {

    .about-hero {
        padding: 130px 20px 90px;
    }

    .about-hero .container {
        max-width: 760px;
    }

    .about-hero h2 {
        font-size: 1.3rem;
    }

}

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

@media (max-width:768px) {

    .about-hero {
        padding: 110px 20px 70px;
    }

    .about-hero .container {
        max-width: 100%;
    }

    .about-hero .hero-label {
        font-size: 12px;
        padding: 8px 18px;
        letter-spacing: 1px;
        margin-bottom: 25px;
    }

    .about-hero h1 {
        font-size: 2.4rem;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .about-hero h2 {
        font-size: 1.1rem;
        line-height: 1.7;
    }

}

@media (max-width:576px) {

    .about-hero {
        padding: 100px 15px 60px;
    }

    .about-hero .hero-label {
        font-size: 11px;
        padding: 8px 16px;
    }

    .about-hero h1 {
        font-size: 2rem;
    }

    .about-hero h2 {
        font-size: 1rem;
        line-height: 1.6;
    }

}

/*=========================================
    ABOUT ORIGIN - TABLET
=========================================*/

@media (max-width:992px) {

    .origin {
        padding: 90px 20px;
    }

    .origin-grid {
        grid-template-columns: 1fr 1fr;
        gap: 45px;
    }

    .origin h2 {
        font-size: 2.5rem;
        margin-bottom: 25px;
    }

    .origin p {
        font-size: 1.05rem;
        line-height: 1.9;
        margin-bottom: 20px;
    }

    .origin blockquote {
        font-size: 1.6rem;
        margin: 28px 0;
    }

    .origin-highlight {
        padding: 22px;
        margin: 30px 0;
    }

}

/*=========================================
    ABOUT ORIGIN - MOBILE
=========================================*/

@media (max-width:768px) {

    .origin {
        padding: 70px 20px;
    }

    .origin-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .origin-content {
        order: 1;
    }

    .origin-image {
        order: 2;
        max-width: 500px;
        margin: auto;
    }

    .section-label {
        font-size: 12px;
        letter-spacing: 1px;
    }

    .origin h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .origin p {
        font-size: 1rem;
        line-height: 1.8;
    }

    .origin blockquote {
        font-size: 1.4rem;
        padding-left: 18px;
        margin: 25px 0;
    }

    .origin-highlight {
        padding: 20px;
    }

    .origin-highlight strong {
        font-size: 1.1rem;
    }

}

@media (max-width:576px) {

    .origin {
        padding: 60px 15px;
    }

    .origin h2 {
        font-size: 1.75rem;
    }

    .origin p {
        font-size: .95rem;
    }

    .origin blockquote {
        font-size: 1.2rem;
        padding-left: 15px;
    }

    .origin-highlight {
        padding: 18px;
    }

    .origin-highlight strong {
        font-size: 1rem;
    }

}

/*=========================================
    FOUNDERS - TABLET
=========================================*/

@media (max-width:992px) {

    .founders {
        padding: 90px 20px;
    }

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

    .section-heading h2 {
        font-size: 2.5rem;
    }

    .founder {
        grid-template-columns: 320px 1fr;
        gap: 45px;
        margin-bottom: 90px;
    }

    .founder.reverse {
        grid-template-columns: 1fr 320px;
    }

    .founder-content h3 {
        font-size: 2rem;
    }

    .founder-content p {
        font-size: 1rem;
        line-height: 1.9;
    }

    .founder-quote {
        padding: 24px;
        font-size: 1.15rem;
    }

}

/*=========================================
    FOUNDERS - MOBILE
=========================================*/

@media (max-width:768px) {

    .founders {
        padding: 70px 20px;
    }

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

    .section-heading h2 {
        font-size: 2rem;
    }

    .founder,
    .founder.reverse {

        grid-template-columns: 1fr;
        gap: 35px;
        margin-bottom: 70px;

    }

    /* Remove reverse ordering */

    .founder.reverse .founder-image,
    .founder.reverse .founder-content {

        order: unset;

    }

    .founder-image {

        max-width: 420px;
        margin: auto;

    }

    .founder-content {

        text-align: left;

    }

    .founder-content h3 {

        font-size: 1.8rem;
        margin-bottom: 18px;

    }

    .founder-content p {

        font-size: 1rem;
        line-height: 1.8;
    }

    .founder-quote {

        margin-top: 30px;
        padding: 22px;
        font-size: 1.1rem;
        text-align: left;

    }

}

@media (max-width:576px) {

    .founders {

        padding: 60px 15px;

    }

    .section-heading span {

        font-size: 12px;
        letter-spacing: 1px;

    }

    .section-heading h2 {

        font-size: 1.75rem;

    }

    .founder {

        margin-bottom: 55px;

    }

    .founder-content h3 {

        font-size: 1.5rem;

    }

    .founder-content p {

        font-size: .95rem;

    }

    .founder-quote {

        padding: 18px;
        font-size: 1rem;

    }

}

/*=========================================
    BELIEFS - TABLET
=========================================*/

@media (max-width:992px) {

    .beliefs {
        padding: 90px 20px;
    }

    .belief-heading {
        margin-bottom: 60px;
    }

    .belief-heading h2 {
        font-size: 2.5rem;
    }

    .belief-item {
        padding: 30px;
        gap: 25px;
    }

    .belief-item h3 {
        font-size: 1.3rem;
    }

    .belief-item p {
        font-size: 1rem;
    }

    .belief-quote {
        margin-top: 70px;
        padding: 50px 35px;
    }

    .belief-quote p {
        font-size: 1.7rem;
    }

}

/*=========================================
    BELIEFS - MOBILE
=========================================*/

@media (max-width:768px) {

    .beliefs {
        padding: 70px 20px;
    }

    .belief-heading {
        margin-bottom: 45px;
    }

    .belief-heading span {
        font-size: 12px;
        letter-spacing: 1px;
    }

    .belief-heading h2 {
        font-size: 2rem;
    }

    .belief-heading p {
        font-size: 1rem;
        line-height: 1.8;
    }

    .belief-item {
        padding: 24px;
        gap: 18px;
    }

    .belief-icon {
        width: 55px;
        height: 55px;
        font-size: 1.5rem;
    }

    .belief-item h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .belief-item p {
        font-size: .95rem;
        line-height: 1.8;
    }

    .belief-quote {
        margin-top: 50px;
        padding: 35px 25px;
    }

    .belief-quote p {
        font-size: 1.4rem;
    }

}

@media (max-width:576px) {

    .beliefs {
        padding: 60px 15px;
    }

    .belief-heading h2 {
        font-size: 1.75rem;
    }

    .belief-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .belief-icon {
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
    }

    .belief-item h3 {
        font-size: 1.1rem;
    }

    .belief-item p {
        font-size: .92rem;
    }

    .belief-quote {
        padding: 30px 20px;
    }

    .belief-quote p {
        font-size: 1.2rem;
        line-height: 1.5;
    }

}

/*=========================================
    AUDIENCE - TABLET
=========================================*/

@media (max-width:992px) {

    .audience {
        padding: 90px 20px;
    }

    .audience-grid {
        grid-template-columns: 1fr 1fr;
        gap: 45px;
    }

    .audience-content h2 {
        font-size: 2.5rem;
    }

    .intro {
        font-size: 1rem;
        margin-bottom: 28px;
    }

    .audience li {
        margin-bottom: 18px;
    }

    .conversation-box {
        padding: 28px;
    }

    .conversation-box blockquote {
        font-size: 1.5rem;
    }

}

/*=========================================
    AUDIENCE - MOBILE
=========================================*/

@media (max-width:768px) {

    .audience {
        padding: 70px 20px;
    }

    .audience-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .audience-image {
        max-width: 500px;
        margin: auto;
    }

    .audience-content h2 {
        font-size: 2rem;
        margin: 15px 0 20px;
    }

    .intro {
        font-size: 1rem;
        line-height: 1.8;
        margin-bottom: 25px;
    }

    .audience li {
        padding-left: 32px;
        margin-bottom: 16px;
        font-size: .95rem;
    }

    .conversation-box {
        padding: 24px;
        margin-bottom: 30px;
    }

    .conversation-box h3 {
        margin-bottom: 15px;
    }

    .conversation-box p {
        margin-bottom: 15px;
    }

    .conversation-box blockquote {
        font-size: 1.35rem;
        line-height: 1.5;
    }

    .audience-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .audience-buttons .btn-primary,
    .audience-buttons .btn-outline {
        width: 100%;
        text-align: center;
    }

}

@media (max-width:576px) {

    .audience {
        padding: 60px 15px;
    }

    .audience-content h2 {
        font-size: 1.75rem;
    }

    .intro {
        font-size: .95rem;
    }

    .audience li {
        font-size: .92rem;
        padding-left: 28px;
    }

    .conversation-box {
        padding: 20px;
    }

    .conversation-box blockquote {
        font-size: 1.2rem;
    }

}

/*=========================================
    CONSTELLATION - TABLET
=========================================*/

@media (max-width:992px) {

    .constellation {
        padding: 90px 20px;
    }

    .constellation-grid {
        grid-template-columns: 1fr 1fr;
        gap: 45px;
    }

    .constellation-content h2 {
        font-size: 2.5rem;
        margin-bottom: 25px;
    }

    .constellation-content p {
        font-size: 1rem;
        margin-bottom: 20px;
    }

    .country-list {
        gap: 12px;
        margin: 35px 0;
    }

    .country-list span {
        padding: 9px 16px;
        font-size: .9rem;
    }

    .constellation blockquote {
        font-size: 1.4rem;
    }

}

/*=========================================
    CONSTELLATION - MOBILE
=========================================*/

@media (max-width:768px) {

    .constellation {
        padding: 70px 20px;
    }

    .constellation-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .constellation-map {
        max-width: 500px;
        margin: auto;
        order: 1;
    }

    .constellation-content {
        order: 2;
    }

    .constellation-content h2 {
        font-size: 2rem;
        margin: 15px 0 20px;
    }

    .constellation-content p {
        font-size: 1rem;
        line-height: 1.8;
    }

    .country-list {
        gap: 10px;
        margin: 30px 0;
    }

    .country-list span {
        padding: 8px 14px;
        font-size: .85rem;
    }

    .constellation blockquote {
        font-size: 1.25rem;
        line-height: 1.6;
        padding-left: 18px;
        margin-top: 30px;
    }

}

@media (max-width:576px) {

    .constellation {
        padding: 60px 15px;
    }

    .constellation-content h2 {
        font-size: 1.75rem;
    }

    .constellation-content p {
        font-size: .95rem;
    }

    .country-list {
        justify-content: center;
    }

    .country-list span {
        font-size: .8rem;
        padding: 8px 12px;
    }

    .constellation blockquote {
        font-size: 1.1rem;
        padding-left: 15px;
    }

}

/*=========================================
    ABOUT CTA - TABLET
=========================================*/

@media (max-width:992px) {

    .about-cta {
        padding: 100px 20px;
    }

    .about-cta h2 {
        font-size: 3rem;
    }

    .about-cta p {
        font-size: 1.1rem;
        margin-bottom: 35px;
    }

    .about-cta blockquote {
        font-size: 1.8rem;
        margin-bottom: 45px;
    }

}

/*=========================================
    ABOUT CTA - MOBILE
=========================================*/

@media (max-width:768px) {

    .about-cta {
        padding: 80px 20px;
    }

    .cta-label {
        padding: 8px 18px;
        font-size: 12px;
        letter-spacing: 1px;
        margin-bottom: 20px;
    }

    .about-cta h2 {
        font-size: 2.3rem;
        line-height: 1.2;
        margin-bottom: 25px;
    }

    .about-cta p {
        font-size: 1rem;
        line-height: 1.8;
        margin-bottom: 30px;
    }

    .about-cta blockquote {
        font-size: 1.5rem;
        margin-bottom: 35px;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .cta-buttons .btn-primary,
    .cta-buttons .btn-secondary {
        width: 100%;
        max-width: 340px;
        text-align: center;
    }

}

@media (max-width:576px) {

    .about-cta {
        padding: 70px 15px;
    }

    .about-cta h2 {
        font-size: 1.9rem;
    }

    .about-cta p {
        font-size: .95rem;
    }

    .about-cta blockquote {
        font-size: 1.25rem;
        line-height: 1.5;
    }

}

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

@media (max-width:992px) {

    .startHero {
        padding: 100px 0 80px;
    }

    .startHero .container {
        grid-template-columns: 1fr 360px;
        gap: 45px;
    }

    .heroContent h1 {
        font-size: 3.2rem;
    }

    .heroContent p {
        font-size: 1.05rem;
    }

    .roadmap {
        margin-top: 20px;
        padding: 30px;
    }

}

@media (max-width:768px) {

    .startHero {

        padding: 110px 0 70px;

    }

    .startHero .container {

        grid-template-columns: 1fr;
        gap: 45px;

    }

    .heroContent {

        text-align: center;

    }

    .heroContent h1 {

        font-size: 2.6rem;
        margin-bottom: 18px;

    }

    .heroContent p {

        max-width: 100%;
        font-size: 1rem;
        margin-bottom: 28px;

    }

    .heroButtons {

        flex-direction: column;
        align-items: center;
        gap: 14px;

    }

    .primaryBtn,
    .secondaryBtn {

        width: 100%;
        max-width: 340px;
        text-align: center;

    }

    /* ---------- Roadmap ---------- */

    .heroVisual {

        height: auto;

    }

    .roadmap {

        margin-top: 0;
        padding: 28px 22px;
        border-radius: 22px;

    }

    .roadStep {

        flex-direction: column;
        text-align: center;
        gap: 12px;

    }

    .stepNumber {

        width: 56px;
        height: 56px;
        font-size: 1.2rem;

    }

    .roadStep h4 {

        font-size: 1.2rem;
        margin: 0;

    }

    .roadStep p {

        font-size: .95rem;
        max-width: 260px;
        margin: auto;

    }

    .roadLine {

        width: 100%;
        height: 1px;
        margin: 22px 0;
        background: rgba(196, 154, 42, .35);

    }

}

@media (max-width:576px) {

    .startHero {

        padding: 100px 0 60px;

    }

    .heroTag {

        font-size: 11px;
        padding: 8px 16px;

    }

    .heroContent h1 {

        font-size: 2rem;

    }

    .heroContent p {

        font-size: .95rem;

    }

    .roadmap {

        padding: 22px 18px;

    }

    .stepNumber {

        width: 48px;
        height: 48px;
        font-size: 1rem;

    }

    .roadStep h4 {

        font-size: 1.1rem;

    }

    .roadStep p {

        font-size: .9rem;

    }

}

/*=========================================
STEP 1 - TABLET
=========================================*/

@media (max-width:992px) {

    .stepSection {
        padding: 80px 0;
    }

    .stepGrid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .stepVisual {
        max-width: 600px;
        margin: 0 auto;
        width: 100%;
    }

    .stepContent h2 {
        font-size: 2.3rem;
    }

    .questionCard {
        padding: 30px;
    }

    .visualCard {
        padding: 38px;
    }

}

/*=========================================
STEP 1 - MOBILE
=========================================*/

@media (max-width:768px) {

    .stepSection {
        padding: 65px 0;
    }

    .stepGrid {
        gap: 35px;
    }

    .sectionTag {
        font-size: 12px;
        padding: 8px 16px;
        letter-spacing: 1px;
    }

    .stepContent h2 {
        font-size: 2rem;
        margin-bottom: 16px;
    }

    .introText {
        font-size: 1rem;
        margin-bottom: 22px;
    }

    .stepContent p {
        font-size: 16px;
        line-height: 1.8;
    }

    /* Question Card */

    .questionCard {
        padding: 24px;
        margin: 25px 0;
    }

    .questionLabel {
        font-size: 11px;
    }

    .questionCard h3 {
        font-size: 1.35rem;
        line-height: 1.5;
    }

    /* Listen Box */

    .listenBox {
        padding: 20px;
        gap: 16px;
        margin-top: 28px;
    }

    .listenIcon {
        width: 56px;
        height: 56px;
        font-size: 1.4rem;
    }

    .listenBox h4 {
        font-size: 1.1rem;
    }

    /* Visual */

    .visualCard {
        padding: 30px 24px;
    }

    .circle {
        width: 90px;
        height: 90px;
        margin-bottom: 20px;
        font-size: 2.3rem;
    }

    .visualCard h3 {
        font-size: 1.45rem;
    }

    .visualCard p {
        margin-bottom: 22px;
    }

}

@media (max-width:576px) {

    .stepSection {
        padding: 55px 0;
    }

    .stepContent h2 {
        font-size: 1.75rem;
    }

    .questionCard {
        padding: 20px;
    }

    .questionCard h3 {
        font-size: 1.15rem;
    }

    .listenBox {
        flex-direction: column;
        align-items: flex-start;
    }

    .listenIcon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .visualCard {
        padding: 24px 18px;
    }

    .circle {
        width: 76px;
        height: 76px;
        font-size: 2rem;
    }

    .visualCard h3 {
        font-size: 1.25rem;
    }

    .miniPoints {
        gap: 10px;
    }

    .miniPoints div {
        padding: 12px;
        font-size: 15px;
    }

}

/*=========================================
STEP 2 - TABLET
=========================================*/

@media (max-width:992px) {

    .watchSection {
        padding: 80px 0;
    }

    .sectionHeading {
        margin-bottom: 45px;
    }

    .sectionHeading h2 {
        font-size: 2.3rem;
    }

    .sectionHeading p {
        font-size: 1rem;
    }

    .videoGrid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .videoCard {
        max-width: 650px;
        width: 100%;
        margin: 0 auto;
    }

    .videoThumbnail {
        height: 240px;
    }

}

/*=========================================
STEP 2 - MOBILE
=========================================*/

@media (max-width:768px) {

    .watchSection {
        padding: 65px 0;
    }

    .sectionHeading {
        margin-bottom: 35px;
    }

    .sectionHeading h2 {
        font-size: 2rem;
        margin: 15px 0;
    }

    .sectionHeading p {
        font-size: 16px;
        line-height: 1.7;
    }

    .videoGrid {
        gap: 24px;
    }

    .videoThumbnail {
        height: 200px;
    }

    .playButton {
        width: 70px;
        height: 70px;
        font-size: 1.4rem;
    }

    .videoTime {
        top: 16px;
        right: 16px;
        padding: 7px 14px;
        font-size: 13px;
    }

    .videoContent {
        padding: 24px;
    }

    .videoBadge {
        font-size: 12px;
        padding: 7px 15px;
    }

    .videoContent h3 {
        font-size: 1.3rem;
    }

    .videoContent p {
        font-size: 16px;
        line-height: 1.7;
    }

    .watchButton {
        margin-top: 35px;
    }

    .watchButton .primaryBtn {
        width: 100%;
        max-width: 340px;
        text-align: center;
    }

}

@media (max-width:576px) {

    .watchSection {
        padding: 55px 0;
    }

    .sectionHeading h2 {
        font-size: 1.75rem;
    }

    .videoThumbnail {
        height: 170px;
    }

    .playButton {
        width: 60px;
        height: 60px;
        font-size: 1.2rem;
    }

    .videoContent {
        padding: 20px;
    }

    .videoContent h3 {
        font-size: 1.15rem;
    }

    .videoContent p {
        font-size: 15px;
    }

}

/*=========================================
    STARTER KIT - TABLET
=========================================*/

@media (max-width:992px) {

    .starterSection {
        padding: 80px 0;
    }

    .weekGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin: 45px 0;
    }

    .starterFeatures {
        gap: 16px;
        margin-bottom: 45px;
    }

    .downloadCard {
        padding: 40px;
    }

    .downloadCard h3 {
        font-size: 1.8rem;
    }

    .starterForm {
        flex-direction: column;
    }

    .starterForm input,
    .starterForm button {
        width: 100%;
    }

}

/*=========================================
    STARTER KIT - MOBILE
=========================================*/

@media (max-width:768px) {

    .starterSection {
        padding: 65px 0;
    }

    .weekGrid {
        grid-template-columns: 1fr;
        gap: 18px;
        margin: 35px 0;
    }

    .weekCard {
        padding: 24px 20px;
    }

    .weekCard h3 {
        font-size: 1.15rem;
    }

    .starterFeatures {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 35px;
    }

    .featureItem {
        padding: 16px 18px;
        font-size: 15px;
    }

    .downloadCard {
        padding: 30px 24px;
    }

    .downloadCard h3 {
        font-size: 1.6rem;
    }

    .downloadCard p {
        font-size: 16px;
        margin-bottom: 25px;
    }

    .starterForm {
        gap: 14px;
    }

    .starterForm input {
        padding: 16px 18px;
        border-radius: 16px;
    }

    .starterForm button {
        width: 100%;
    }

    .downloadCard small {
        font-size: 13px;
    }

}

@media (max-width:576px) {

    .starterSection {
        padding: 55px 0;
    }

    .weekCard {
        padding: 20px 18px;
    }

    .weekNumber {
        font-size: 12px;
        padding: 7px 14px;
    }

    .weekCard h3 {
        font-size: 1rem;
    }

    .downloadCard {
        padding: 24px 18px;
        border-radius: 18px;
    }

    .downloadCard h3 {
        font-size: 1.35rem;
    }

    .downloadCard p {
        font-size: 15px;
    }

    .starterForm input {
        font-size: 15px;
        border-radius: 14px;
    }

}

/*=========================================
    JOURNEY SECTION - TABLET
=========================================*/

@media (max-width:992px) {

    .journeySection {
        padding: 80px 0;
    }

    .journeyGrid {
        grid-template-columns: 1fr;
        gap: 35px;
        margin-top: 45px;
    }

    .timelineCard,
    .journeyCard {
        max-width: 700px;
        width: 100%;
        margin: 0 auto;
    }

    .timelineCard {
        padding: 35px;
    }

    .journeyCard {
        padding: 35px;
    }

    .journeyCard h3 {
        font-size: 1.8rem;
        margin-bottom: 28px;
    }

}

/*=========================================
    JOURNEY SECTION - MOBILE
=========================================*/

@media (max-width:768px) {

    .journeySection {
        padding: 65px 0;
    }

    .journeyGrid {
        gap: 28px;
        margin-top: 35px;
    }

    /* Timeline */

    .timelineCard {
        padding: 24px;
    }

    .timelineItem {
        gap: 16px;
    }

    .timelineDot {
        width: 16px;
        height: 16px;
        margin-top: 6px;
    }

    .timelineItem h4 {
        font-size: 1.1rem;
    }

    .timelineItem p {
        font-size: 15px;
    }

    .timelineLine {
        margin: 8px 0 8px 7px;
        height: 36px;
    }

    .timelineEnd {
        margin-left: 24px;
        font-size: 15px;
    }

    /* Journey Card */

    .journeyCard {
        padding: 28px 24px;
    }

    .journeyCard h3 {
        font-size: 1.6rem;
        margin-bottom: 24px;
    }

    .journeyFeature {
        gap: 15px;
        padding-bottom: 18px;
        margin-bottom: 18px;
    }

    .featureIcon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        font-size: 1.4rem;
    }

    .journeyFeature h4 {
        font-size: 1.05rem;
    }

    .journeyFeature p {
        font-size: 15px;
    }

    .journeyButtons {
        flex-direction: column;
        gap: 14px;
    }

    .journeyButtons a {
        width: 100%;
    }

}

@media (max-width:576px) {

    .journeySection {
        padding: 55px 0;
    }

    .timelineCard,
    .journeyCard {
        padding: 20px 18px;
        border-radius: 18px;
    }

    .timelineItem h4 {
        font-size: 1rem;
    }

    .timelineItem p {
        font-size: 14px;
    }

    .timelineEnd {
        font-size: 14px;
    }

    .journeyCard h3 {
        font-size: 1.35rem;
    }

    .featureIcon {
        width: 46px;
        height: 46px;
        font-size: 1.2rem;
    }

    .journeyFeature h4 {
        font-size: 1rem;
    }

    .journeyFeature p {
        font-size: 14px;
    }

}

/*=========================================
FULL COURSE - TABLET
=========================================*/

@media (max-width:992px) {

    .courseSection {
        padding: 80px 0;
    }

    .courseCard {

        grid-template-columns: 1fr;
        gap: 40px;

        padding: 45px;

        text-align: center;

    }

    .courseContent h2 {

        font-size: 2.2rem;

    }

    .courseFeatures {

        max-width: 650px;
        margin: 0 auto 35px;

    }

    .courseVisual {

        justify-content: center;

    }

}

/*=========================================
FULL COURSE - MOBILE
=========================================*/

@media (max-width:768px) {

    .courseSection {
        padding: 65px 0;
    }

    .courseCard {

        padding: 30px 24px;
        border-radius: 24px;

    }

    .courseTag {

        font-size: 12px;
        padding: 8px 16px;

    }

    .courseContent h2 {

        font-size: 2rem;
        margin-bottom: 16px;

    }

    .courseContent p {

        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 28px;

    }

    .courseFeatures {

        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 30px;

    }

    .courseFeature {

        padding: 15px 16px;
        text-align: left;

    }

    .courseContent .primaryBtn {

        width: 100%;
        max-width: 340px;
        margin: 0 auto;

        display: block;

    }

    .courseMockup {

        width: 240px;

    }

    .mockupBody {

        padding: 35px 24px;

    }

}

@media (max-width:576px) {

    .courseSection {
        padding: 55px 0;
    }

    .courseCard {

        padding: 22px 18px;
        border-radius: 18px;

    }

    .courseContent h2 {

        font-size: 1.7rem;

    }

    .courseContent p {

        font-size: 15px;

    }

    .courseFeature {

        font-size: 15px;

    }

    .courseMockup {

        width: 210px;

    }

    .mockupHeader {

        padding: 18px;

    }

    .mockupBody {

        padding: 28px 18px;

    }

}

/*=========================================
BOOKS HERO - TABLET
=========================================*/

@media (max-width:992px) {

    .booksHero {
        padding: 110px 0 70px;
    }

    .booksHero .sectionHeading {
        max-width: 700px;
    }

    .booksHero h1 {
        margin-bottom: 22px;
    }

    .booksHero p {
        max-width: 650px;
    }

}

/*=========================================
BOOKS HERO - MOBILE
=========================================*/

@media (max-width:768px) {

    .booksHero {
        padding: 100px 0 60px;
    }

    .booksHero .sectionHeading {
        max-width: 100%;
    }

    .booksHero h1 {
        margin-bottom: 18px;
    }

    .booksHero p {
        max-width: 100%;
        margin-bottom: 16px;
    }

}

@media (max-width:576px) {

    .booksHero {
        padding: 90px 0 50px;
    }

}

/*=========================================
BOOK SECTION - TABLET
=========================================*/

@media (max-width:992px) {

    .bookSection {
        padding: 80px 0;
    }

    .bookGrid {

        grid-template-columns: 1fr;
        gap: 45px;

        text-align: center;

    }

    .bookGrid.reverse {

        grid-template-columns: 1fr;

    }

    .bookGrid.reverse .bookContent,
    .bookGrid.reverse .bookImage {

        order: initial;

    }

    .bookImage {

        max-width: 340px;
        margin: 0 auto;

    }

}

/*=========================================
BOOK SECTION - MOBILE
=========================================*/

@media (max-width:768px) {

    .bookSection {
        padding: 65px 0;
    }

    .bookGrid {
        gap: 35px;
    }

    .bookImage {
        max-width: 280px;
    }

    .bookContent .sectionTag {
        margin-bottom: 16px;
    }

    .bookContent h2 {
        margin-bottom: 14px;
    }

    .bookContent h3 {
        margin-bottom: 12px;
    }

    .authors {
        margin-bottom: 22px;
        font-size: 15px;
    }

    .bookContent p {
        margin-bottom: 18px;
    }

}

@media (max-width:576px) {

    .bookSection {
        padding: 55px 0;
    }

    .bookImage {
        max-width: 220px;
    }

    .bookGrid {
        gap: 28px;
    }

}

/*=========================================
BOOK DETAILS - TABLET
=========================================*/

@media (max-width:992px) {

    .bookDetails {
        padding-bottom: 80px;
    }

    .bookInfoCard {
        padding: 40px;
    }

    .bookInfoCard h3 {
        margin-bottom: 24px;
    }

    .bookContents {
        margin-bottom: 30px;
    }

    .bookButtons {
        margin-top: 30px;
    }

}

/*=========================================
BOOK DETAILS - MOBILE
=========================================*/

@media (max-width:768px) {

    .bookDetails {
        padding-bottom: 65px;
    }

    .bookInfoCard {
        padding: 28px 24px;
        border-radius: 20px;
    }

    .bookInfoCard h3 {
        margin-bottom: 20px;
    }

    .bookContents {
        margin-bottom: 24px;
    }

    .bookContents li {
        padding-left: 28px;
        margin-bottom: 16px;
        line-height: 1.7;
    }

    .bookFormat {
        padding-top: 24px;
    }

    .bookFormat h4 {
        margin-bottom: 10px;
    }

    .bookButtons {
        flex-direction: column;
        gap: 14px;
        margin-top: 28px;
    }

    .bookButtons a {
        width: 100%;
        text-align: center;
    }

}

@media (max-width:576px) {

    .bookDetails {
        padding-bottom: 55px;
    }

    .bookInfoCard {
        padding: 22px 18px;
        border-radius: 18px;
    }

    .bookContents li {
        font-size: 15px;
    }

    .bookFormat p {
        line-height: 1.8;
    }

}

/*=========================================
AUTHORS SECTION - TABLET
=========================================*/

@media (max-width:992px) {

    .authorsSection {
        padding: 80px 0;
    }

    .authorsGrid {
        grid-template-columns: 1fr;
        gap: 45px;
        margin-top: 45px;
        text-align: center;
    }

    .authorsImage {
        max-width: 340px;
        margin: 0 auto;
    }

}

/*=========================================
AUTHORS SECTION - MOBILE
=========================================*/

@media (max-width:768px) {

    .authorsSection {
        padding: 65px 0;
    }

    .authorsGrid {
        gap: 35px;
        margin-top: 35px;
    }

    .authorsImage {
        max-width: 280px;
    }

    .authorsContent p {
        margin-bottom: 18px;
    }

    .authorsContent p:last-of-type {
        margin-bottom: 28px;
    }

    .foundationCard {
        padding: 24px;
        border-radius: 20px;
        text-align: left;
    }

}

@media (max-width:576px) {

    .authorsSection {
        padding: 55px 0;
    }

    .authorsImage {
        max-width: 220px;
    }

    .foundationCard {
        padding: 20px 18px;
        border-radius: 18px;
    }

}

/*=========================================
CONTACT SECTION - TABLET
=========================================*/

@media (max-width:992px) {

    .contactSection {
        padding: 80px 0;
    }

    .contactGrid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .contactContent {
        text-align: center;
    }

    .contactContent img {
        max-width: 500px;
        margin: 30px auto 0;
    }

}

/*=========================================
CONTACT SECTION - MOBILE
=========================================*/

@media (max-width:768px) {

    .contactSection {
        padding: 65px 0;
    }

    .contactGrid {
        gap: 35px;
    }

    .contactFormWrapper {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .formGroup {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 16px;
    }

    .formGroup small {
        margin-top: 0;
    }

    .contactContent img {
        border-radius: 18px;
    }

    .contactFormWrapper .primaryBtn {
        width: 100%;
        margin-top: 18px;
        text-align: center;
    }

}

@media (max-width:576px) {

    .contactSection {
        padding: 55px 0;
    }

    .contactFormWrapper {
        padding: 20px 18px;
        border-radius: 18px;
    }

    .formGroup input,
    .formGroup select,
    .formGroup textarea {
        padding: 13px 15px;
        border-radius: 12px;
    }

    .contactContent img {
        border-radius: 16px;
        margin-top: 24px;
    }

}

/*=========================================
FAQ SECTION - TABLET
=========================================*/

@media (max-width:992px) {

    .faqSection {
        padding: 80px 0;
    }

    .faqContainer {
        margin-top: 45px;
    }

}

/*=========================================
FAQ SECTION - MOBILE
=========================================*/

@media (max-width:768px) {

    .faqSection {
        padding: 65px 0;
    }

    .faqContainer {
        margin-top: 35px;
    }

    .faqItem {
        border-radius: 18px;
        margin-bottom: 16px;
    }

    .faqItem summary {
        padding: 20px 56px 20px 20px;
        line-height: 1.6;
        font-size: 16px;
    }

    .faqItem summary::after {
        right: 20px;
        font-size: 22px;
    }

    .faqItem p {
        padding: 0 20px 20px;
        line-height: 1.8;
    }

}

@media (max-width:576px) {

    .faqSection {
        padding: 55px 0;
    }

    .faqItem {
        border-radius: 16px;
    }

    .faqItem summary {
        padding: 18px 50px 18px 18px;
        font-size: 15px;
    }

    .faqItem summary::after {
        right: 18px;
        font-size: 20px;
    }

    .faqItem p {
        padding: 0 18px 18px;
        font-size: 15px;
    }

}

/*=========================================
CONTACT HERO - TABLET
=========================================*/

@media (max-width:992px) {

    .contactHero {
        padding-top: 150px;
        padding-bottom: 90px;
    }

    .contactHeroContent {
        max-width: 700px;
    }

    .contactHeroContent h1 {
        margin: 16px 0 22px;
    }

    .contactHeroContent .heroIntro {
        max-width: 620px;
    }

}

/*=========================================
CONTACT HERO - MOBILE
=========================================*/

@media (max-width:768px) {

    .contactHero {
        padding-top: 130px;
        padding-bottom: 70px;
    }

    .contactHeroContent {
        max-width: 100%;
    }

    .contactHeroContent h1 {
        margin: 14px 0 20px;
    }

    .contactHeroContent .heroIntro {
        max-width: 100%;
        font-size: 1rem;
        line-height: 1.8;
    }

}

@media (max-width:576px) {

    .contactHero {
        padding-top: 115px;
        padding-bottom: 55px;
    }

    .contactHeroContent h1 {
        margin: 12px 0 18px;
    }

    .contactHeroContent .heroIntro {
        font-size: .95rem;
        line-height: 1.7;
    }

}

/*=========================================
CONTACT FORM - TABLET
=========================================*/

@media (max-width:992px) {

    .contactFormSection {
        padding: 80px 0;
    }

    .contactFormWrapper {
        padding: 20px;
    }

    .contactForm {
        padding: 45px;
    }

}

/*=========================================
CONTACT FORM - MOBILE
=========================================*/

@media (max-width:768px) {

    .contactFormSection {
        padding: 65px 0;
    }

    .contactFormWrapper {
        padding: 10px;
    }

    .contactForm {
        padding: 30px 24px;
        border-radius: 24px;
    }

    .formGroup:last-of-type {
        margin-bottom: 28px;
    }

    .formGroup input,
    .formGroup select,
    .formGroup textarea {
        padding: 15px 18px;
        border-radius: 14px;
    }

    .formGroup textarea {
        min-height: 150px;
    }

    .formButton .primaryBtn {
        width: 100%;
        min-width: unset;
    }

}

@media (max-width:576px) {

    .contactFormSection {
        padding: 55px 0;
    }

    .contactForm {
        padding: 22px 18px;
        border-radius: 20px;
    }

    .contactFormWrapper {
        padding: 0;
    }

    .formGroup label {
        font-size: .9rem;
    }

    .formGroup input,
    .formGroup select,
    .formGroup textarea {
        padding: 14px 16px;
        font-size: .95rem;
    }

    .formGroup textarea {
        min-height: 130px;
    }

}

/* ==============================
   CONNECT SECTION - MOBILE
================================= */

@media (max-width:768px) {

    .connectSection {
        padding: 70px 0;
    }

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

    .connectCard {
        padding: 28px 24px;
        border-radius: 22px;
    }

    .connectIcon {
        width: 58px;
        height: 58px;
        margin-bottom: 18px;
        border-radius: 16px;
        font-size: 1.7rem;
    }

    .connectCard h3 {
        font-size: 1.35rem;
        margin-bottom: 12px;
    }

    .connectCard p {
        font-size: 1rem;
        line-height: 1.8;
    }

}

@media (max-width:480px) {

    .connectSection {
        padding: 60px 0;
    }

    .connectGrid {
        gap: 18px;
    }

    .connectCard {
        padding: 22px 18px;
        border-radius: 18px;
    }

    .connectIcon {
        width: 52px;
        height: 52px;
        margin-bottom: 16px;
        font-size: 1.5rem;
    }

    .connectCard h3 {
        font-size: 1.2rem;
    }

    .connectCard p {
        font-size: .95rem;
        line-height: 1.75;
    }

}

/*=====================================
MEDIA & PRESS - TABLET
======================================*/

@media (max-width:768px) {

    .mediaPressSection {
        padding: 70px 0;
    }

    .pressFactsCard {
        padding: 36px 28px;
        border-radius: 24px;
        margin-bottom: 60px;
    }

    .pressFactsCard h3 {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }

    .pressFactsGrid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .factItem {
        padding: 20px;
        border-radius: 16px;
    }

    .factLabel {
        font-size: .75rem;
        margin-bottom: 8px;
    }

    .factItem p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .closingQuote {
        max-width: 100%;
        padding: 0 10px;
    }

    .closingQuote blockquote {
        font-size: 2rem;
        line-height: 1.45;
        margin-bottom: 22px;
    }

    .quoteAuthor p {
        font-size: 1rem;
    }

    .quoteAuthor span {
        font-size: .9rem;
    }

}

/*=====================================
MEDIA & PRESS - MOBILE
======================================*/

@media (max-width:480px) {

    .mediaPressSection {
        padding: 60px 0;
    }

    .pressFactsCard {
        padding: 24px 18px;
        border-radius: 18px;
        margin-bottom: 50px;
    }

    .pressFactsCard h3 {
        font-size: 1.5rem;
        margin-bottom: 24px;
    }

    .pressFactsGrid {
        gap: 14px;
    }

    .factItem {
        padding: 16px;
        border-radius: 14px;
    }

    .factLabel {
        font-size: .72rem;
        letter-spacing: .06em;
    }

    .factItem p {
        font-size: .95rem;
        line-height: 1.7;
    }

    .closingQuote blockquote {
        font-size: 1.5rem;
        line-height: 1.5;
        margin-bottom: 18px;
    }

    .quoteAuthor p {
        font-size: .95rem;
    }

    .quoteAuthor span {
        font-size: .85rem;
    }

}

@media (max-width:992px) {

    .heroCircleOne {
        width: 220px;
        height: 220px;
        top: -70px;
        left: -90px;
    }

    .heroCircleTwo {
        width: 180px;
        height: 180px;
        right: -70px;
        bottom: -50px;
    }

    .heroLeaf svg {
        width: 90px;
    }

    .heroLeafLeft {
        left: 20px;
        bottom: 20px;
    }

    .heroLeafRight {
        right: 20px;
        top: 30px;
    }

}

@media (max-width:576px) {

    .heroCircle,
    .heroLeaf {
        display: none;
    }

}

@media (max-width:768px) {

    .alignment-strip {
        padding: 30px 20px;
        margin-top: 40px;
    }

    .alignment-strip p {
        font-size: 18px;
        line-height: 1.8;
    }

    .alignment-strip span {
        font-size: 15px;
    }

    .alignment-strip a {
        font-size: 15px;
    }

}

/*======================================
        SCHOLLS PAGE TABLET (1024px)
======================================*/

@media (max-width:1024px) {

    section {
        overflow: hidden;
    }

    .schoolsHero {
        padding: 100px 25px 80px;
    }

    .downloadGrid,
    .modelsGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .ideaGrid,
    .programmeGrid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .ideaCard,
    .programmeCard {
        max-width: 700px;
        margin: auto;
    }

    .partnershipCard,
    .identityCard {
        padding: 45px 35px;
    }

    .identityGrid {
        gap: 20px;
    }

    .tableWrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .alignmentTable {
        min-width: 760px;
    }

}

/*======================================
        TABLETS & MOBILE (768px)
======================================*/

@media (max-width:768px) {

    section {
        overflow: hidden;
    }

    .schoolsHero {
        padding: 90px 20px 70px;
    }

    .schoolsHeroContent h1 {
        font-size: 2.3rem;
    }

    .schoolsHeroContent .heroIntro {
        margin-top: 25px;
    }

    .schoolsHeroContent .heroIntro p {
        font-size: 1.05rem;
    }

    .schoolsHeroContent .heroButtons {
        flex-direction: column;
        gap: 15px;
    }

    .schoolsHeroContent .heroButtons a {
        width: 100%;
        max-width: 320px;
    }

    .alignmentSection,
    .alignmentDownloads,
    .implementationModels,
    .ideaNotebook,
    .schoolPartnership,
    .aboutProgramme,
    .completeIdentity {
        padding: 75px 0;
    }

    .downloadGrid,
    .modelsGrid,
    .partnershipGrid,
    .identityGrid {
        grid-template-columns: 1fr;
    }

    /* Layout redesign */

    .ideaGrid,
    .programmeGrid {
        display: flex;
        flex-direction: column;
    }

    .ideaCard {
        order: 1;
    }

    .ideaContent {
        order: 2;
    }

    .portfolioHighlight {
        order: 3;
    }

    .programmeCard {
        order: 1;
    }

    .programmeContent {
        order: 2;
    }

    .downloadCard,
    .modelCard,
    .ideaCard,
    .programmeCard,
    .partnerItem,
    .identityItem {
        padding: 28px;
    }

    .partnershipCard,
    .identityCard {
        padding: 30px 22px;
    }

    .identityCard blockquote {
        font-size: 1.35rem;
        line-height: 1.5;
    }

    .alignmentInfo,
    .portfolioHighlight {
        padding: 24px;
    }

    .tableWrapper {
        margin-inline: -20px;
        padding-inline: 20px;
        overflow-x: auto;
    }

    .alignmentTable {
        min-width: 700px;
    }

}

/*======================================
        MOBILE (480px)
======================================*/

@media (max-width:480px) {

    .schoolsHero {
        padding: 80px 16px 60px;
    }

    .schoolsHeroContent h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    .schoolsHeroContent .heroIntro p {
        font-size: 1rem;
    }

    .sectionHeading h2 {
        font-size: 2rem;
    }

    .downloadCard,
    .modelCard,
    .ideaCard,
    .programmeCard,
    .partnerItem,
    .identityItem,
    .alignmentInfo {
        padding: 22px;
    }

    .partnershipCard,
    .identityCard {
        padding: 24px 18px;
        border-radius: 22px;
    }

    .identityCard blockquote {
        font-size: 1.15rem;
    }

    .partnershipButtons .primaryBtn,
    .downloadCard .primaryBtn {
        width: 100%;
        text-align: center;
    }

    .alignmentTable {
        min-width: 620px;
    }

    .alignmentTable th,
    .alignmentTable td {
        padding: 16px;
        font-size: .95rem;
    }

}

/*======================================
        COMMUNITY PAGE 
======================================*/

@media (max-width:1024px) {

    section {
        overflow: hidden;
    }

    .communityHero {
        padding: 100px 25px 80px;
    }

    .communityHeroContent {
        max-width: 720px;
    }

    .communityPurpose,
    .communityRoles,
    .matchingProcess,
    .registrationSection,
    .trainingModule,
    .singleParentCommunity,
    .brandIdentity {
        padding: 100px 0;
    }

    .purposeGrid,
    .rolesGrid,
    .registrationGrid {
        gap: 28px;
    }

    .processGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .processCard:last-child {
        grid-column: 1/-1;
        max-width: 520px;
        margin: auto;
    }

    .singleParentGrid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .singleParentImage {
        max-width: 650px;
        margin: auto;
    }

    .trainingCard,
    .identityCard {
        padding: 45px 35px;
    }

}

@media (max-width:768px) {

    section {
        overflow: hidden;
    }

    .communityHero {
        padding: 90px 20px 70px;
    }

    .communityHeroContent h1 {
        font-size: 2.3rem;
    }

    .communityHeroContent .heroIntro {
        margin-top: 28px;
    }

    .communityHeroContent .heroIntro p {
        font-size: 1.05rem;
    }

    .communityHeroContent .heroIntro p:nth-child(2) {
        font-size: 1.4rem;
        margin: 15px 0;
    }

    .heroButtons {
        flex-direction: column;
        align-items: center;
    }

    .heroButtons a {
        width: 100%;
        max-width: 320px;
    }

    .communityPurpose,
    .communityRoles,
    .matchingProcess,
    .registrationSection,
    .trainingModule,
    .singleParentCommunity,
    .brandIdentity {
        padding: 75px 0;
    }

    .purposeGrid,
    .rolesGrid,
    .processGrid,
    .registrationGrid,
    .trainingGrid,
    .identityGrid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .purposeCard,
    .roleCard,
    .processCard,
    .registrationCard,
    .trainingCard,
    .identityCard {
        padding: 30px 24px;
    }

    /* Mobile redesign */

    .singleParentGrid {
        display: flex;
        flex-direction: column;
    }

    .singleParentImage {
        order: 1;
    }

    .singleParentContent {
        order: 2;
    }

    .trainingFooter {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .trainingFooter .primaryBtn {
        width: 100%;
        text-align: center;
    }

    .identityLinks {
        flex-direction: column;
        align-items: center;
    }

    .identityLinks a {
        width: 100%;
        max-width: 260px;
        text-align: center;
    }

}

@media (max-width:480px) {

    .communityHero {
        padding: 80px 16px 60px;
    }

    .communityHeroContent h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    .communityHeroContent .heroIntro p {
        font-size: 1rem;
    }

    .communityHeroContent .heroIntro p:nth-child(2) {
        font-size: 1.25rem;
    }

    .sectionHeading h2 {
        font-size: 2rem;
    }

    .purposeCard,
    .roleCard,
    .processCard,
    .registrationCard,
    .trainingCard,
    .trainingItem,
    .identityCard,
    .identityItem {
        padding: 22px;
    }

    .bridgeQuote {
        font-size: 1rem;
        padding: 18px;
    }

    .registrationCard button,
    .singleParentContent .primaryBtn {
        width: 100%;
    }

    .trainingIntro {
        margin-bottom: 30px;
    }

    .communityBenefits {
        margin: 25px 0;
    }

    .identityQuote {
        font-size: 1rem;
    }

}

@media (max-width:480px) {

    .heroButtons a,
    .trainingFooter .primaryBtn,
    .registrationCard button,
    .singleParentContent .primaryBtn {

        width: auto;
        min-width: 220px;
        padding: 14px 24px;
        text-align: center;
    }

}

@media (max-width:1024px) {

    section {
        overflow: hidden;
    }

    .institutionHero {
        padding: 100px 25px 80px;
    }

    .institutionAudience,
    .partnershipIncludes,
    .institutionSession,
    .placementTransition,
    .safeguardingSection,
    .institutionRegistration,
    .institutionCTA {
        padding: 100px 0;
    }

    .featureGrid,
    .sessionTimeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .featureCard:last-child,
    .sessionStep:last-child {
        grid-column: 1/-1;
        max-width: 520px;
        margin: auto;
    }

    .transitionCard,
    .institutionForm,
    .ctaCard {
        padding: 40px 35px;
    }

}

@media (max-width:768px) {

    section {
        overflow: hidden;
    }

    .institutionHero {
        padding: 90px 20px 70px;
    }

    .institutionHeroContent h1 {
        font-size: 2.3rem;
    }

    .institutionHeroContent .heroIntro {
        margin-top: 28px;
    }

    .institutionHeroContent .heroIntro p {
        font-size: 1.05rem;
    }

    .institutionHeroContent .heroIntro p:last-child {
        font-size: 1.25rem;
    }

    .institutionHeroContent .heroButtons {
        flex-direction: column;
        align-items: center;
    }

    .institutionHeroContent .heroButtons a {
        width: auto;
        min-width: 220px;
    }

    .institutionAudience,
    .partnershipIncludes,
    .institutionSession,
    .placementTransition,
    .safeguardingSection,
    .institutionRegistration,
    .institutionCTA {
        padding: 75px 0;
    }

    .audienceGrid,
    .featureGrid,
    .sessionTimeline,
    .safeguardingGrid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .audienceCard,
    .featureCard,
    .sessionStep,
    .safeItem {
        padding: 28px;
    }

    .transitionCard,
    .institutionForm,
    .ctaCard,
    .safeguardingCard {
        padding: 30px 24px;
    }

    .transitionStep {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .transitionStep span {
        width: 48px;
        height: 48px;
    }

    .formRow {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ctaButtons {
        flex-direction: column;
        align-items: center;
    }

    .ctaButtons a {
        width: auto;
        min-width: 220px;
    }

}

@media (max-width:480px) {

    .institutionHero {
        padding: 80px 16px 60px;
    }

    .institutionHeroContent h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    .institutionHeroContent .heroIntro p {
        font-size: 1rem;
    }

    .institutionHeroContent .heroIntro p:last-child {
        font-size: 1.15rem;
    }

    .sectionHeading h2 {
        font-size: 2rem;
    }

    .audienceCard,
    .featureCard,
    .sessionStep,
    .safeItem,
    .transitionCard,
    .institutionForm,
    .ctaCard {
        padding: 22px;
    }

    .time {
        font-size: .8rem;
        padding: 5px 12px;
    }

    .safeStatement h3 {
        font-size: 1.45rem;
        line-height: 1.4;
    }

    .transitionHighlight {
        padding: 18px;
        font-size: 1rem;
    }

    .institutionForm button,
    .ctaButtons a {

        width: auto;
        min-width: 220px;
        padding: 12px 20px;

    }

}


/*======================================
        PTA PAGE
======================================*/

@media (max-width:1024px) {

    section {
        overflow: hidden;
    }

    .ptaHero {
        padding: 100px 25px 80px;
    }

    .ptaImportance,
    .ptaRoles,
    .schoolLevels,
    .starterPack,
    .ptaRegistration,
    .ptaCTA {
        padding: 100px 0;
    }

    .ptaRolesGrid {
        gap: 24px;
    }

    .starterCard,
    .ptaForm,
    .ptaCTA .ctaCard {
        padding: 42px 35px;
    }

    .heroCircleTwo {
        width: 280px;
        height: 280px;
        right: 0px !important;
        bottom: -70px;
    }
}

@media (max-width:768px) {

    section {
        overflow: hidden;
    }

    .ptaHero {
        padding: 90px 20px 70px;
    }

    .ptaHeroContent h1 {
        font-size: 2.3rem;
    }

    .ptaHeroContent .heroIntro {
        margin-top: 28px;
    }

    .ptaHeroContent .heroIntro p {
        font-size: 1.05rem;
    }

    .ptaHeroContent .heroButtons {
        flex-direction: column;
        align-items: center;
    }

    .ptaHeroContent .heroButtons a {
        width: auto;
        min-width: 220px;
    }

    .ptaImportance,
    .ptaRoles,
    .schoolLevels,
    .starterPack,
    .ptaRegistration,
    .ptaCTA {
        padding: 75px 0;
    }

    .ptaRolesGrid,
    .starterGrid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .importanceCard,
    .ptaRoleCard {
        padding: 30px 24px;
    }

    .starterCard,
    .ptaForm,
    .ptaCTA .ctaCard {
        padding: 30px 24px;
    }

    .starterItem {
        padding: 24px;
    }

    .formRow {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .checkboxGrid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .relatedLinks {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .relatedLinks span {
        display: none;
    }

    .ctaButtons {
        flex-direction: column;
        align-items: center;
    }

    .ctaButtons a {
        width: auto;
        min-width: 220px;
    }

}

@media (max-width:480px) {

    .ptaHero {
        padding: 80px 16px 60px;
    }

    .ptaHeroContent h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    .ptaHeroContent .heroIntro p {
        font-size: 1rem;
    }

    .sectionHeading h2 {
        font-size: 2rem;
    }

    .importanceCard,
    .ptaRoleCard,
    .starterCard,
    .starterItem,
    .ptaForm,
    .ptaCTA .ctaCard {
        padding: 22px;
    }

    .importanceQuote {
        padding: 18px;
        font-size: 1rem;
    }

    .levelItem summary {
        padding: 20px 55px 20px 20px;
        font-size: 1rem;
    }

    .levelItem summary::after {
        right: 20px;
        font-size: 24px;
    }

    .levelContent {
        padding: 0 20px 20px;
    }

    .starterIntro {
        margin-bottom: 30px;
    }

    .primaryBtn {
        width: auto;
        min-width: 220px;
        padding: 12px 20px;
    }

    .ctaButtons a,
    .ptaHeroContent .heroButtons a,
    .starterCard .primaryBtn,
    .ptaForm .primaryBtn {

        width: auto;
        min-width: 200px;
        max-width: 260px;
        padding: 12px 20px;
        text-align: center;

    }

}

@media(max-width:768px) {

    .roleExtra {

        display: none;

    }

    .roleExtra.show {

        display: block;
        margin-top: 20px;

    }

    .readMoreBtn {

        margin-top: 18px;
        border: none;
        background: none;
        color: var(--color-primary);
        font-weight: 700;
        cursor: pointer;
        padding: 0;

    }

}

@media (min-width: 1025px) and (max-width: 1365px) {
    .container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}