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

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

body,
html {
    overflow-x: hidden;
}

:root{
    --navy:#1F3864;
    --gold:#B8860B;
    --cream:#F8F4EC;
    --white:#ffffff;
    --text:#303030;

    --color-bg: var(--cream);
    --bg-primary: var(--cream);

    --color-primary: var(--gold);
    --accent-color: var(--gold);

    --color-heading: var(--navy);

    --text-primary: var(--navy);
    --text-secondary: var(--text);

    --font-heading: Arial, sans-serif;

    --section-padding: 100px 0;

    --lightGold: #D7B45B;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Georgia',serif;
    color:var(--text);
    background:var(--white);
    line-height:1.8;
}

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

a{
    text-decoration:none;
}

.sj-container{
    width: min(88%, 1200px);
    margin: 0 auto;
}

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

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:rgba(31,56,100,.96);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
}

.nav-wrapper{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:85px;
}

.logo{
    display:flex;
    align-items:center;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--white);
    text-decoration:none;
    font-family:Arial, sans-serif;
    font-size:26px;
    font-weight:700;
}

.brand b{
    color:var(--lightGold);
    font-weight:700;
}

.mk{
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.20);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.05);
    transition:0.3s ease;
}

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

.brand:hover .mk{
    border-color:var(--lightGold);
    transform:rotate(8deg);
}

.nav-links{
    display:flex;
    list-style:none;
    gap:42px;
}

.nav-links a{
    font-family: Arial, sans-serif;
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
    transition: .3s;
    position: relative;
}

.nav-links a:hover{
    color: var(--gold);
}

.nav-links a.active{
    color: var(--gold);
}

.nav-links a.active::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
}

.hamburger{
    display:none;
    cursor:pointer;
}

.hamburger span{
    display:block;
    width:28px;
    height:3px;
    background:var(--white);
    margin:6px 0;
}

@media (max-width:768px){

    section{
        padding-left:20px;
        padding-right:20px;
    }

}

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

.hero{
    padding-top:120px;
    padding-bottom:120px;
    background:var(--navy);
}

.hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:clamp(40px,5vw,80px);
    align-items:center;
}

.hero-label{
    display:inline-block;
    font-family:Arial,sans-serif;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:22px;
}

.hero h1{
    font-size:clamp(3rem,5vw,4.3rem);
    line-height:1.05;
    color:var(--white);
    font-family:'Cormorant Garamond',serif;
    margin-bottom:30px;
}

.hero h2{
    font-size:clamp(1.4rem,2vw,1.8rem);
    font-weight:400;
    color:var(--white);
    margin-bottom:28px;
    max-width:640px;
}

.hero p{
    font-size:clamp(1rem,1.2vw,1.25rem);
    color:#d9d9d9;
    margin-bottom:40px;
    max-width:550px;
}

.btn-primary{
    display:inline-block;
    padding:18px 36px;
    background:var(--gold);
    color:var(--white);
    font-family:Arial,sans-serif;
    font-weight:700;
    border-radius:50px;
    transition:.3s;
}

.btn-primary:hover{
    background:var(--lightGold);
    transform:translateY(-2px);
}

.text-link{
    display:inline-block;
    margin-top:28px;
    color:var(--white);
    text-decoration:underline;
    font-family:Arial,sans-serif;
}

.hero-image{
    position:relative;
}

.hero-image img{
    border-radius:22px;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
}

/*==========================================
        WHAT SIMPLEJOY
==========================================*/

.what-is{
    padding:100px 0;
    background:var(--white);
}

.section-heading{
    text-align:center;
    margin-bottom:60px;
}

.section-heading h2{
    font-family:Arial, sans-serif;
    font-size:42px;
    color:var(--navy);
    font-weight:700;
}

.what-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-bottom:60px;
}

.what-card{
    background:var(--white);
    border:1px solid #e6e6e6;
    border-radius:16px;
    padding:40px 30px;
    text-align:center;
    transition:.3s;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.what-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.icon{
    width:70px;
    height:70px;
    margin:0 auto 25px;
    border-radius:50%;
    background:var(--cream);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
}

.what-card h3{
    font-family:Arial,sans-serif;
    color:var(--navy);
    font-size:22px;
    margin-bottom:15px;
    line-height:1.4;
}

.what-card p{
    font-family:Georgia,serif;
    color:#555;
    font-size:17px;
}

.what-content{
    max-width:820px;
    margin:auto;
    text-align:center;
}

.what-content p{
    font-family:Georgia,serif;
    font-size:22px;
    color:#444;
    line-height:1.8;
    margin-bottom:25px;
}

.what-content h4{
    font-family:Arial,sans-serif;
    color:var(--gold);
    font-size:26px;
    font-weight:700;
}

/*==========================================
        10 PILLARS
==========================================*/

.pillars{
    padding:100px 0;
    background:var(--cream);
}

.pillars-heading{
    text-align:center;
    margin-bottom:60px;
}

.pillars-heading span{
    display:block;
    font-family:Arial,sans-serif;
    font-size:13px;
    letter-spacing:2px;
    color:var(--gold);
    font-weight:bold;
    margin-bottom:12px;
}

.pillars-heading h2{
    font-family:Arial,sans-serif;
    font-size:44px;
    color:var(--navy);
}

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

.pillar-card{
    background:#fff;
    border:1px solid #e6d7ba;
    border-radius:16px;
    padding:22px;
    display:flex;
    align-items:flex-start;
    gap:18px;
    transition:.3s;
    box-shadow:0 8px 22px rgba(0,0,0,.05);
}

.pillar-card:hover{
    transform:translateY(-5px);
    box-shadow:0 12px 28px rgba(0,0,0,.08);
}

.pillar-number{
    width:38px;
    height:38px;
    min-width:38px;
    border-radius:50%;
    background:var(--navy);
    color:var(--gold);
    display:flex;
    justify-content:center;
    align-items:center;
    font-family:Arial,sans-serif;
    font-weight:bold;
}

.pillar-content h3{
    font-family:Arial,sans-serif;
    color:var(--navy);
    font-size:24px;
    margin-bottom:8px;
}

.pillar-content p{
    font-family:Georgia,serif;
    color:#444;
    line-height:1.7;
}

.pillar-btn{
    margin-top:50px;
    text-align:center;
}

/*==========================================
            ORIGIN
==========================================*/

.origin{
    padding:110px 0;
    background:var(--cream);
}

.origin-grid{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:70px;
    align-items:center;
}

.origin-image img{
    width:100%;
    border-radius:18px;
    box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.origin-content h2{
    font-family:Arial,sans-serif;
    color:var(--navy);
    font-size:42px;
    line-height:1.25;
    margin-bottom:35px;
}

.origin-content p{
    font-family:Georgia,serif;
    font-size:20px;
    color:#444;
    line-height:1.9;
    margin-bottom:24px;
}

.author{
    margin-top:45px;
    border-left:4px solid var(--gold);
    padding-left:22px;
}

.author h4{
    font-family:Arial,sans-serif;
    color:var(--navy);
    font-size:22px;
    margin-bottom:8px;
}

.author span{
    font-family:Georgia,serif;
    color:#666;
}

/*==========================================
        START TODAY
==========================================*/

.start-today{
    background:var(--navy);
    padding:100px 0;
}

.start-header{
    text-align:center;
    margin-bottom:60px;
}

.start-header h2{
    font-family:Arial,sans-serif;
    font-size:42px;
    color:var(--gold);
    line-height:1.3;
}

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

.step-card{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    border-radius:16px;
    padding:35px;
}

.step-number{
    display:inline-block;
    background:var(--gold);
    color:#fff;
    padding:8px 18px;
    border-radius:30px;
    font-family:Arial,sans-serif;
    font-weight:bold;
    margin-bottom:25px;
}

.step-card p{
    color:#fff;
    font-family:Georgia,serif;
    font-size:19px;
    line-height:1.8;
}

.step-card strong{
    color:var(--white);
}

.start-buttons{
    display:flex;
    justify-content:center;
    gap:25px;
    margin-top:60px;
    flex-wrap:wrap;
}

.btn-outline{
    display:inline-block;
    padding:18px 36px;
    border:2px solid var(--gold);
    color:var(--gold);
    border-radius:50px;
    font-family:Arial,sans-serif;
    font-weight:bold;
    transition:.3s;
}

.btn-outline:hover{
    background:var(--gold);
    color:#fff;
}

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

.footer{
    background:var(--navy);
    padding:60px 0 28px;
}

.footerGrid{
    display:grid;
    gap:50px;
    padding-bottom:20px;
    border-bottom:1px solid rgba(255,255,255,.12);
    grid-template-columns:2fr repeat(4,minmax(120px,1fr));

}

.footerBrand{
    max-width:400px;
}

.footerBrand .logo{
    margin-bottom: 20px;
}

.footerBrand p{
    color:rgba(255,255,255,.82);
    line-height:1.8;
    font-size:18px;
    margin:0;
}

.footerColumn h4{
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:15px;
    margin-bottom:12px;
    font-family:Arial,sans-serif;
}

.footerColumn ul{
    list-style:none;
    padding:0;
    margin:0;
}

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

.footerColumn a{
    color:#fff;
    text-decoration:none;
    transition:.3s;
    font-size:17px;
}

.footerColumn a:hover{
    color:var(--gold);
}

.footerBottom{
    text-align:center;
    padding-top:18px;
}

.footerBottom p{
    color:#fff;
    margin:6px 0;
}

.footerQuote{
    color:var(--gold);
    font-style:italic;
    font-size:21px;
}

.footerQuote span{
    color:var(--gold);
    font-style:normal;
}

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

.about-hero{
    padding:150px 20px 120px;
    text-align:center;
    max-width:900px;
    margin:auto;
}

.hero-label{
    display:inline-block;
    background:#C49A2A;
    color:#FFFFFF;
    padding:10px 22px;
    border-radius:40px;
    font-family:Arial, sans-serif;
    font-size:.85rem;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:35px;
    text-transform:uppercase;
}

.about-hero h1{
    font-family:Arial, sans-serif;
    font-size:clamp(2.8rem,5vw,4rem);
    color:#1F3864;
    line-height:1.15;
    margin-bottom:25px;
    font-weight:700;
}

.about-hero h1 span{
    color:#B8860B;
}

.about-hero h2{
    font-family:Georgia, serif;
    font-size:1.45rem;
    font-weight:400;
    line-height:1.8;
    color:#555;
    max-width:720px;
    margin:auto;
}

/*========================================================
                    THE ORIGIN
=========================================================*/

.origin{
    background:#FFF9F1;
    padding:110px 20px;
}

.origin-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:70px;
    align-items:center;
}

.section-label{
    display:inline-block;
    font-family:Arial,sans-serif;
    font-size:.85rem;
    font-weight:700;
    letter-spacing:2px;
    color:#B8860B;
    text-transform:uppercase;
    margin-bottom:18px;
}

.origin h2{
    font-family:Arial,sans-serif;
    font-size:3rem;
    color:#1F3864;
    margin-bottom:35px;
}

.origin p{
    font-family:Georgia,serif;
    color:#4b4b4b;
    font-size:1.12rem;
    line-height:2;
    margin-bottom:26px;
}

.origin blockquote{
    border-left:5px solid #B8860B;
    padding-left:24px;
    margin:35px 0;
    font-family:Georgia,serif;
    font-size:1.9rem;
    font-style:italic;
    color:#1F3864;
}

.origin-highlight{
    background:#ffffff;
    border-left:6px solid #C49A2A;
    padding:26px;
    margin:40px 0;
    border-radius:12px;
    box-shadow:0 15px 40px rgba(0,0,0,.05);
}

.origin-highlight strong{
    font-family:Arial,sans-serif;
    color:#1F3864;
    font-size:1.3rem;
}

.origin-image img{
    width:100%;
    border-radius:24px;
    display:block;
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}

/*========================================================
                    WHO WE ARE
=========================================================*/

.founders{
    padding:120px 20px;
    background:#ffffff;
}

.section-heading{
    text-align:center;
    margin-bottom:90px;
}

.section-heading span{
    font-family:Arial,sans-serif;
    color:#B8860B;
    letter-spacing:2px;
    font-size:.9rem;
    font-weight:700;
    text-transform:uppercase;
}

.section-heading h2{
    margin-top:18px;
    font-family:Arial,sans-serif;
    font-size:3rem;
    color:#1F3864;
}

.founder{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:70px;
    align-items:center;
    margin-bottom:120px;
}

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

.founder.reverse .founder-image{
    order:2;
}

.founder.reverse .founder-content{
    order:1;
}

.founder-image img{
    width:100%;
    border-radius:24px;
    display:block;
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.founder-content h3{
    font-family:Arial,sans-serif;
    font-size:2.2rem;
    color:#1F3864;
    margin-bottom:25px;
}

.founder-content p{
    font-family:Georgia,serif;
    font-size:1.08rem;
    line-height:2;
    color:#4d4d4d;
    margin-bottom:22px;
}

.founder-quote{
    margin-top:40px;
    padding:28px;
    background:#FFF9F1;
    border-left:5px solid #C49A2A;
    border-radius:16px;
    font-family:Georgia,serif;
    font-size:1.25rem;
    color:#1F3864;
    line-height:1.8;
}

.founder-quote span{
    color:#B8860B;
    font-weight:bold;
}

/*========================================================
                    WHAT WE BELIEVE
=========================================================*/

.beliefs{
    background:#FFF9F1;
    padding:120px 20px;
}

.belief-heading{
    text-align:center;
    margin-bottom:80px;
}

.belief-heading span{
    font-family:Arial,sans-serif;
    color:#B8860B;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:.9rem;
}

.belief-heading h2{
    margin:20px 0;
    font-family:Arial,sans-serif;
    color:#1F3864;
    font-size:3rem;
}

.belief-heading p{
    font-family:Georgia,serif;
    color:#666;
    max-width:720px;
    margin:auto;
    line-height:1.9;
    font-size:1.1rem;
}

.belief-list{
    display:grid;
    gap:28px;
}

.belief-item{
    display:flex;
    gap:30px;
    align-items:flex-start;
    background:#FFFFFF;
    padding:35px;
    border-radius:18px;
    border-left:5px solid #C49A2A;
    transition:.3s;
}

.belief-item:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.belief-icon{
    width:65px;
    height:65px;
    flex-shrink:0;
    border-radius:50%;
    background:#FFF3D8;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.8rem;
}

.belief-item h3{
    font-family:Arial,sans-serif;
    color:#1F3864;
    margin-bottom:15px;
    font-size:1.4rem;
}

.belief-item p{
    font-family:Georgia,serif;
    color:#555;
    line-height:1.9;
    font-size:1.05rem;
}

.belief-quote{
    margin-top:90px;
    text-align:center;
    max-width:850px;
    margin-inline:auto;
    padding:60px 40px;
    border-top:2px solid #C49A2A;
    border-bottom:2px solid #C49A2A;
}

.belief-quote p{
    font-family:Georgia,serif;
    font-size:2rem;
    font-style:italic;
    color:#1F3864;
    line-height:1.6;
}

/*========================================================
                WHO THIS IS FOR
=========================================================*/

.audience{
    padding:120px 20px;
    background:#ffffff;
}

.audience-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.audience-image img{
    width:100%;
    display:block;
    border-radius:24px;
    box-shadow:0 22px 55px rgba(0,0,0,.12);
}

.audience-content h2{
    font-family:Arial,sans-serif;
    color:#1F3864;
    font-size:3rem;
    margin:20px 0 30px;
}

.intro{
    font-family:Georgia,serif;
    line-height:2;
    color:#555;
    font-size:1.1rem;
    margin-bottom:35px;
}

.audience ul{
    list-style:none;
    padding:0;
    margin-bottom:40px;
}

.audience li{
    position:relative;
    padding-left:38px;
    margin-bottom:22px;
    font-family:Georgia,serif;
    line-height:1.8;
    color:#555;
}

.audience li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:#B8860B;
    font-size:1.2rem;
    font-weight:bold;
}

.conversation-box{
    background:#FFF9F1;
    border-left:5px solid #C49A2A;
    border-radius:18px;
    padding:35px;
    margin-bottom:40px;
}

.conversation-box h3{
    font-family:Arial,sans-serif;
    color:#1F3864;
    margin-bottom:18px;
}

.conversation-box p{
    font-family:Georgia,serif;
    color:#555;
    line-height:1.9;
    margin-bottom:20px;
}

.conversation-box blockquote{
    margin:0;
    font-family:Georgia,serif;
    font-size:1.7rem;
    font-style:italic;
    color:#B8860B;
}

.audience-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

/*========================================================
            16 NATION CONSTELLATION
=========================================================*/

.constellation{
    background:#FFF9F1;
    padding:130px 20px;
}

.constellation-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.constellation-content h2{
    font-family:Arial,sans-serif;
    color:#1F3864;
    font-size:3rem;
    margin:20px 0 35px;
}

.constellation-content p{
    font-family:Georgia,serif;
    color:#555;
    line-height:2;
    font-size:1.1rem;
    margin-bottom:28px;
}

.country-list{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin:45px 0;
}

.country-list span{
    background:white;
    padding:10px 18px;
    border-radius:30px;
    font-family:Arial,sans-serif;
    font-size:.95rem;
    color:#1F3864;
    border:1px solid rgba(184,134,11,.25);
    transition:.3s;
}

.country-list span:hover{
    background:#B8860B;
    color:white;
    transform:translateY(-3px);
}

.constellation blockquote{
    border-left:5px solid #C49A2A;
    padding-left:25px;
    margin-top:45px;
    font-family:Georgia,serif;
    font-size:1.6rem;
    color:#1F3864;
    font-style:italic;
    line-height:1.8;
}

.constellation-map img{
    width:100%;
    display:block;
    animation:floatMap 5s ease-in-out infinite;
}

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

.about-cta{
    background:linear-gradient( 135deg, #1F3864, #274778);
    color:#fff;
    padding:130px 20px;
    text-align:center;
}

.cta-label{
    display:inline-block;
    padding:10px 22px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:40px;
    font-family:Arial,sans-serif;
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:.85rem;
    margin-bottom:30px;
}

.about-cta h2{
    font-family:Arial,sans-serif;
    font-size:clamp(2.6rem,5vw,4.5rem);
    line-height:1.15;
    margin-bottom:35px;
}

.about-cta p{
    font-family:Georgia,serif;
    font-size:1.2rem;
    line-height:2;
    color:rgba(255,255,255,.9);
    margin-bottom:45px;
}

.about-cta blockquote{
    font-family:Georgia,serif;
    font-size:2rem;
    font-style:italic;
    color:#FFD978;
    margin-bottom:55px;
}

.cta-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

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

.startHero{
    background:linear-gradient(180deg,#ffffff 0%,var(--cream) 100%);
    padding:120px 0;
    position:relative;
    overflow:hidden;
}

.startHero .sj-container{
    display:grid;
    grid-template-columns:1fr 420px;
    align-items:center;
    gap:70px;
    position:relative;
    z-index:2;
}

.heroTag{
    display:inline-block;
    padding:10px 24px;
    background:rgba(184,134,11,.12);
    color:var(--gold);
    border-radius:50px;
    font-weight:600;
    margin-bottom:25px;
}

.heroContent h1{
    font-size:4rem;
    line-height:1.1;
    color:var(--navy);
    margin-bottom:25px;
}

.heroContent h1 span{
    display:block;
    color:var(--gold);
}

.heroContent p{
    font-size:1.2rem;
    line-height:1.8;
    color:var(--text);
    max-width:540px;
    margin-bottom:40px;
}

.startHero .heroButtons{
    display:flex;
    justify-content:flex-start;
    gap:20px;
    flex-wrap:wrap;
}

.primaryBtn{
    background:var(--gold);
    color:#fff;
    padding:16px 34px;
    border-radius:50px;
    text-decoration:none;
    transition:.35s;
    font-weight:700;
}

.primaryBtn:hover{
    background:var(--lightGold);
    transform:translateY(-3px);
}

.secondaryBtn{
    border:2px solid var(--navy);
    color:var(--navy);
    padding:16px 34px;
    border-radius:50px;
    text-decoration:none;
    transition:.35s;
    font-weight:700;
}

.secondaryBtn:hover{
    background:var(--navy);
    color:#fff;
}

/*==================
CARDS
==================*/

.heroVisual{
    position:relative;
    height:500px;
}

.heroCard{
    position:absolute;
    background:#fff;
    width:240px;
    padding:28px;
    border-radius:20px;
    box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.heroCard span{
    font-size:34px;
    display:block;
    margin-bottom:15px;
}

.heroCard h4{
    color:var(--navy);
    margin-bottom:10px;
}

.heroCard p{
    color:var(--text);
    line-height:1.6;
}

.cardOne{
    top:0;
    left:0;
}

.cardTwo{
    right:0;
    top:130px;
}

.cardThree{
    left:70px;
    bottom:0;
}

/*========================
3 STEP ROADMAP
=========================*/

.roadmap{

    background:var(--white);
    border-radius:28px;
    padding:40px 35px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
    margin-top: 70px;
}

.roadStep{

    display:flex;
    align-items:center;
    gap:18px;

}

.stepNumber{

    width:60px;
    height:60px;
    border-radius:50%;
    background:var(--gold);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4rem;
    font-weight:700;
    flex-shrink:0;

}

.roadStep h4{

    color:var(--navy);
    margin-bottom:6px;

}

.roadStep p{

    margin:0;
    color:var(--text);
    font-size:.95rem;
    line-height:1.6;

}

.roadLine{

    width:2px;
    height:45px;
    background:var(--lightGold);
    margin:14px 0 14px 29px;

}


/*=========================================
STEP 1
=========================================*/

.stepSection{
    padding:100px 0;
    background:var(--white);
}

.stepGrid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:70px;
    align-items:center;
}

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

.sectionTag{
    display:inline-block;
    padding:8px 18px;
    background:rgba(184,134,11,.12);
    color:var(--gold);
    border-radius:50px;
    font-size:.9rem;
    font-weight:600;
    letter-spacing:1px;
    margin-bottom:18px;
}

.stepContent h2{
    font-size:2.7rem;
    color:var(--navy);
    margin-bottom:20px;
    line-height:1.2;
}

.introText{
    font-size:1.15rem;
    color:var(--text);
    margin-bottom:30px;
    line-height:1.8;
}

/*========================
QUESTION CARD
========================*/

.questionCard{
    background:var(--cream);
    border-left:6px solid var(--gold);
    padding:35px;
    border-radius:18px;
    margin:35px 0;
}

.questionLabel{
    display:inline-block;
    font-size:.8rem;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:var(--gold);
    font-weight:700;
    margin-bottom:14px;
}

.questionCard h3{
    font-size:1.7rem;
    line-height:1.5;
    color:var(--navy);
    margin:0;
}

.stepContent p{
    color:var(--text);
    line-height:1.9;
    margin-bottom:18px;
}

.stepContent strong{
    color:var(--navy);
}

/*========================
LISTEN BOX
========================*/

.listenBox{
    display:flex;
    gap:20px;
    align-items:flex-start;
    background:#fff;
    border:1px solid rgba(184,134,11,.2);
    border-radius:18px;
    padding:25px;
    margin-top:35px;
    box-shadow:0 12px 30px rgba(0,0,0,.05);
}

.listenIcon{
    width:65px;
    height:65px;
    border-radius:50%;
    background:var(--gold);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.7rem;
    flex-shrink:0;
}

.listenBox h4{
    color:var(--navy);
    margin-bottom:10px;
    font-size:1.2rem;
}

.listenBox p{
    margin:0;
}

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

.visualCard{
    background:linear-gradient(
        180deg,
        #ffffff 0%,
        var(--cream) 100%
    );
    border-radius:25px;
    padding:45px;
    text-align:center;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.circle{
    width:120px;
    height:120px;
    margin:0 auto 30px;
    border-radius:50%;
    background:var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:3rem;
}

.visualCard h3{
    color:var(--navy);
    margin-bottom:18px;
    font-size:1.8rem;
}

.visualCard p{
    color:var(--text);
    line-height:1.8;
    margin-bottom:30px;
}

.miniPoints{
    display:grid;
    gap:15px;
}

.miniPoints div{
    background:#fff;
    padding:14px 18px;
    border-radius:12px;
    color:var(--navy);
    font-weight:600;
    box-shadow:0 8px 18px rgba(0,0,0,.05);
}

/*=========================================
STEP 2 - WATCH WEEK 1
=========================================*/

.watchSection{
    padding:100px 0;
    background:var(--cream);
}

.sectionHeading{
    text-align:center;
    max-width:700px;
    margin:0 auto 60px;
}

.sectionHeading h2{
    font-size:2.7rem;
    color:var(--navy);
    margin:8px 0;
}

.sectionHeading h4{
    font-size:1.4rem;
    color:var(--gold);
    margin:8px 0;
}

.sectionHeading p{
    font-size:1.1rem;
    color:var(--text);
    line-height:1.8;
}

/*=========================
VIDEO GRID
=========================*/

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

/*=========================
VIDEO CARD
=========================*/

.videoCard{
    background:var(--white);
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 18px 40px rgba(0,0,0,.08);
    transition:.35s ease;
}

.videoCard:hover{
    transform:translateY(-8px);
}

/*=========================
THUMBNAIL
=========================*/

.videoThumbnail{
    height:220px;
    background:linear-gradient(
        135deg,
        var(--navy),
        #35578F
    );
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.childThumb{
    background:linear-gradient(
        135deg,
        var(--gold),
        var(--lightGold)
    );
}

/*=========================
PLAY BUTTON
=========================*/

.playButton{
    width:80px;
    height:80px;
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(6px);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:1.6rem;
}

.videoTime{
    position:absolute;
    top:20px;
    right:20px;
    background:rgba(255,255,255,.15);
    color:#fff;
    padding:8px 16px;
    border-radius:50px;
    font-size:.9rem;
    font-weight:600;
}

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

.videoContent{
    padding:35px;
}

.videoBadge{
    display:inline-block;
    padding:8px 18px;
    border-radius:50px;
    background:rgba(184,134,11,.12);
    color:var(--gold);
    font-size:.85rem;
    font-weight:600;
    margin-bottom:18px;
}

.videoContent h3{
    color:var(--navy);
    font-size:1.45rem;
    line-height:1.4;
    margin-bottom:15px;
}

.videoContent p{
    color:var(--text);
    line-height:1.8;
}

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

.watchButton{
    margin-top:55px;
    text-align:center;
}

/*=========================================
STEP 3 - STARTER KIT
=========================================*/

.starterSection{
    padding:100px 0;
    background:var(--white);
}

/*=========================
4 WEEK CARDS
=========================*/

.weekGrid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    margin:60px 0;
}

.weekCard{
    background:var(--cream);
    border-radius:20px;
    padding:30px 25px;
    text-align:center;
    transition:.35s ease;
    border:1px solid rgba(184,134,11,.15);
}

.weekCard:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 35px rgba(0,0,0,.08);
}

.weekNumber{
    display:inline-block;
    padding:8px 16px;
    background:rgba(184,134,11,.12);
    color:var(--gold);
    border-radius:50px;
    font-size:.85rem;
    font-weight:600;
    margin-bottom:18px;
}

.weekCard h3{
    color:var(--navy);
    font-size:1.25rem;
    line-height:1.5;
}

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

.starterFeatures{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-bottom:60px;
}

.featureItem{
    background:var(--cream);
    padding:18px 22px;
    border-radius:14px;
    color:var(--text);
    font-weight:500;
}

/*=========================
DOWNLOAD CARD
=========================*/

.downloadCard{
    max-width:760px;
    margin:0 auto;
    background:linear-gradient(
        180deg,
        var(--white),
        var(--cream)
    );
    padding:50px;
    border-radius:24px;
    text-align:center;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.downloadCard h3{
    color:var(--navy);
    font-size:2rem;
    margin-bottom:15px;
}

.downloadCard p{
    color:var(--text);
    line-height:1.8;
    margin-bottom:35px;
}

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

.starterForm{
    display:flex;
    gap:15px;
    margin-bottom:20px;
}

.starterForm input{
    flex:1;
    padding:18px 22px;
    border:1px solid #ddd;
    border-radius:50px;
    font-size:1rem;
    outline:none;
    transition:.3s;
}

.starterForm input:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(184,134,11,.12);
}

.starterForm button{
    white-space:nowrap;
    cursor:pointer;
}

.downloadCard small{
    display:block;
    color:#666;
    line-height:1.7;
}

/*=========================================
FULL COURSE
=========================================*/

.courseSection{
    padding:100px 0;
    background:var(--cream);
}

.courseCard{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:60px;
    align-items:center;

    background:#FBF6E9;
    border:1px solid rgba(184,134,11,.2);
    border-radius:30px;
    padding:60px;

    box-shadow:0 20px 50px rgba(0,0,0,.06);
}

.courseTag{

    display:inline-block;
    padding:8px 18px;

    background:rgba(184,134,11,.12);

    color:var(--gold);

    border-radius:40px;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:20px;

}

.courseContent h2{

    color:var(--navy);

    font-size:2.5rem;

    margin-bottom:20px;

}

.courseContent p{

    color:var(--text);

    line-height:1.9;

    margin-bottom:35px;

}

.courseFeatures{

    display:grid;

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

    gap:16px;

    margin-bottom:40px;

}

.courseFeature{

    background:rgba(255,255,255,.75);

    padding:16px 18px;

    border-radius:12px;

    color:var(--text);

}

.courseVisual{

    display:flex;

    justify-content:center;

}

.courseMockup{

    width:280px;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 25px 45px rgba(0,0,0,.1);

}

.mockupHeader{

    background:var(--navy);

    color:#fff;

    padding:22px;

    text-align:center;

    font-weight:700;

}

.mockupBody{

    padding:45px 30px;

    text-align:center;

}

.mockupBody span{

    color:var(--gold);

    font-weight:700;

}

.mockupBody h4{

    color:var(--navy);

    margin:15px 0;

}

.mockupBody p{

    margin:0;

}

/*=========================================
WHAT COMES NEXT
=========================================*/

.journeySection{
    padding:100px 0;
    background:var(--cream);
}

.journeyGrid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:50px;
    align-items:start;
    margin-top:60px;
}

/*=========================
TIMELINE
=========================*/

.timelineCard{
    background:var(--white);
    padding:40px;
    border-radius:24px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.timelineItem{
    display:flex;
    align-items:flex-start;
    gap:20px;
}

.timelineDot{
    width:18px;
    height:18px;
    border-radius:50%;
    background:#ddd;
    margin-top:8px;
    flex-shrink:0;
}

.timelineItem.active .timelineDot{
    background:var(--gold);
}

.timelineItem h4{
    color:var(--navy);
    margin-bottom:6px;
    font-size:1.2rem;
}

.timelineItem p{
    color:var(--text);
    margin:0;
    line-height:1.6;
}

.timelineLine{
    width:2px;
    height:45px;
    background:rgba(184,134,11,.35);
    margin:10px 0 10px 8px;
}

.timelineLine.short{
    height:25px;
}

.timelineEnd{
    margin-left:32px;
    font-weight:600;
    color:var(--gold);
}

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

.journeyCard{
    background:var(--white);
    padding:45px;
    border-radius:24px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.journeyCard h3{
    color:var(--navy);
    margin-bottom:35px;
    font-size:2rem;
}

.journeyFeature{
    display:flex;
    gap:18px;
    align-items:flex-start;
    padding-bottom:25px;
    margin-bottom:25px;
    border-bottom:1px solid rgba(0,0,0,.08);
}

.journeyFeature:last-of-type{
    border-bottom:none;
    margin-bottom:35px;
    padding-bottom:0;
}

.featureIcon{
    width:60px;
    height:60px;
    background:rgba(184,134,11,.12);
    color:var(--gold);
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.6rem;
    flex-shrink:0;
}

.journeyFeature h4{
    color:var(--navy);
    margin-bottom:8px;
    font-size:1.2rem;
}

.journeyFeature p{
    color:var(--text);
    line-height:1.7;
    margin:0;
}

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

.journeyButtons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.journeyButtons a{
    flex:1;
    text-align:center;
}

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

.booksHero {
    padding: 150px 20px 120px;
    background: var(--color-bg);
    position: relative;
    overflow: hidden;
}

.booksHero .sectionHeading {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.booksHero .sectionTag {
    margin-bottom: 20px;
}

.booksHero h1 {
    font-family: Arial, sans-serif;
    font-size: clamp(2.8rem, 5vw, 4.8rem);
    color: #1F3864;
    line-height: 1.15;
    margin-bottom: 25px;
    font-weight: 700;
}

.booksHero h1 span{
    color: #B8860B;
}

.booksHero p {
    font-family: Georgia, serif;
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1.8;
    color: #555;
    max-width: 720px;
    margin: auto;
}

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

.booksHero strong {
    color: var(--color-heading);
    font-weight: 600;
}

/* ======================================
   BOOK SECTION
====================================== */

.bookSection {
    padding: 100px 0;
}

.bookGrid {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 80px;
    align-items: center;
}

.bookGrid.reverse {
    grid-template-columns: 1fr 420px;
}

.bookGrid.reverse .bookContent {
    order: 1;
}

.bookGrid.reverse .bookImage {
    order: 2;
}

.bookImage img {
    width: 100%;
    display: block;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,.08);
}

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

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

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

.authors {
    margin-bottom: 28px;
    font-weight: 600;
    color: var(--color-primary);
}

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

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

/* ======================================
   BOOK DETAILS
====================================== */

.bookDetails {
    padding-bottom: 100px;
}

.bookInfoCard {
    background: #fff;
    border-radius: 24px;
    padding: 48px;
    border: 1px solid rgba(0,0,0,.06);
}

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

.bookContents {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
}

.bookContents li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 18px;
    line-height: 1.8;
}

.bookContents li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary);
    font-weight: 700;
}

.bookFormat {
    padding-top: 32px;
    border-top: 1px solid rgba(0,0,0,.08);
}

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

.bookFormat p {
    margin-bottom: 12px;
}

.comingSoon {
    color: var(--color-text-light);
}

.bookButtons {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 40px;
}

/* ======================================
   AUTHORS SECTION
====================================== */

.authorsSection {
    padding: 100px 0;
    background: var(--color-bg);
}

.authorsGrid {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 80px;
    align-items: center;
    margin-top: 60px;
}

.authorsImage img {
    width: 100%;
    display: block;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

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

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

.foundationCard {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 24px;
    padding: 32px;
}

.foundationCard h4 {
    margin-bottom: 14px;
}

.foundationCard p {
    margin: 0;
}

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

.contactSection {
     padding: 100px 20px;
}

.contactGrid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:start;
}

.contactContent h2 {
    margin:12px 0 18px;
}

.contactContent p {
    margin-bottom:16px;
}

.contactContent img {
    width:100%;
    max-height:300px;
    object-fit:cover;
    border-radius:24px;
    margin-top:28px;
}

.contactFormWrapper {
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.formGroup {
    display:flex;
    gap:18px;
    margin-bottom:18px;
}

.formGroup > div{
    flex:1;
}

.formGroup:last-child {
    margin-bottom: 0;
}

.formGroup label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.formGroup input,
.formGroup select,
.formGroup textarea {
    width: 100%;
    padding:14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    transition: 0.3s ease;
    font: inherit;
}

.formGroup textarea {
    resize: vertical;
    min-height: 120px;
}

.formGroup input:focus,
.formGroup select:focus,
.formGroup textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.formGroup small {
    display: flex;
    align-items: center;
    opacity: 0.7;
    margin-top:-6px;
    justify-content:flex-start;
    font-size:14px;
}

.contactFormWrapper .primaryBtn {
    margin-top: 10px;
}

/* ======================================
   FAQ SECTION
====================================== */

.faqSection {
    padding: 100px 0 120px;
    background: var(--color-bg);
}

.faqContainer {
    max-width: 900px;
    margin: 60px auto 0;
}

.faqItem {
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
    overflow: hidden;
}

.faqItem summary {
    list-style: none;
    cursor: pointer;
    padding: 24px 70px 24px 28px;
    position: relative;
    font-weight: 600;
    user-select: none;
}

.faqItem summary::-webkit-details-marker {
    display: none;
}

.faqItem summary::after {
    content: "+";
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 26px;
    font-weight: 400;
    transition: 0.3s ease;
}

.faqItem[open] summary::after {
    content: "−";
}

.faqItem p {
    padding: 0 28px 28px;
    margin: 0;
}

.faqItem:last-child {
    margin-bottom: 0;
}

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

.contactHero,
.contactFormSection,
.contactFaqSection,
.connectSection,
.mediaPressSection{
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.contactHero{
    padding-top: 170px;
    padding-bottom: 130px;
    background: var(--bg-primary);
}


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

.contactFormSection .sectionHeading,
.contactFaqSection .sectionHeading,
.connectSection .sectionHeading,
.mediaPressSection .sectionHeading{
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
}


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

.contactHeroContent{
    position: relative;
    z-index: 5;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.contactHeroContent h1{
    margin: 18px 0 28px;
    font-family:Arial, sans-serif;
    font-size:clamp(2.8rem,5vw,4.8rem);
    color:#1F3864;
    line-height:1.15;
    margin-bottom:25px;
    font-weight:700;
}

.contactHeroContent .heroIntro{
    max-width: 680px;
    margin: 0 auto;
    color: var(--text-secondary);
    font-family: Georgia, serif;
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1.8;
    color: #555;
    max-width: 720px;
    margin: auto;
}


/* ======================================
DECORATIVE CIRCLES
====================================== */

.heroCircle{
    position: absolute;
    border-radius: 50%;
    background: rgba(201,164,92,.08);
    filter: blur(2px);
}

.heroCircleOne{
    width: 340px;
    height: 340px;
    top: -90px;
    left: -100px;
}

.heroCircleTwo{
    width: 280px;
    height: 280px;
    right: -80px;
    bottom: -70px;
}


/* ======================================
BOTANICAL DECORATION
====================================== */

.heroLeaf{
    position: absolute;
    color: rgba(181,147,78,.22);
    z-index: 1;
}

.heroLeaf svg{
    width: 150px;
    height: auto;
    display: block;
}

.heroLeafLeft{
    left: 60px;
    bottom: 45px;
}

.heroLeafRight{
    right: 60px;
    top: 70px;
}

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

/* .contactFormWrapper{
    max-width: 820px;
    margin: 0 auto;
} */

.contactForm{
    background: var(--white);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 32px;
    padding: 55px;
    box-shadow: 0 18px 45px rgba(0,0,0,.05);
}

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

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

.formGroup label{
    margin-bottom: 10px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.formGroup input,
.formGroup select,
.formGroup textarea{
    width: 100%;
    padding: 16px 20px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--text-primary);
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 16px;
    outline: none;
    transition: all .3s ease;
}

.formGroup textarea{
    min-height: 180px;
    resize: vertical;
    line-height: 1.8;
}

.formGroup input::placeholder,
.formGroup textarea::placeholder{
    color: #9b9b9b;
}

.formGroup select{
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23777777' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 18px;
    padding-right: 52px;
}

.formGroup input:focus,
.formGroup textarea:focus,
.formGroup select:focus{
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(201,164,92,.15);
}

.formButton{
    text-align: center;
}

.formButton .primaryBtn{
    min-width: 220px;
}

/* ======================================
FREQUENTLY ASKED QUESTIONS
====================================== */

.faqWrapper{
    max-width: 900px;
    margin: 0 auto;
}

.faqItem{
    background: var(--white);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.04);
    transition: all .35s ease;
}

.faqItem + .faqItem{
    margin-top: 20px;
}

.faqItem:hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0,0,0,.06);
}

.faqItem summary{
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 28px 32px;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
}

.faqItem summary::-webkit-details-marker{
    display: none;
}

.faqItem summary span:first-child{
    font-size: 1.08rem;
    line-height: 1.6;
}

/* ======================================
OTHER WAYS TO CONNECT
====================================== */

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

.connectCard{
    background: var(--white);
    padding: 40px 35px;
    border-radius: 28px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 12px 35px rgba(0,0,0,.04);
    transition: all .35s ease;
}

.connectCard:hover{
    transform: translateY(-8px);
    box-shadow: 0 22px 45px rgba(0,0,0,.08);
}

.connectIcon{
    width: 68px;
    height: 68px;
    margin-bottom: 24px;
    border-radius: 18px;
    background: rgba(201,164,92,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.connectCard h3{
    margin-bottom: 16px;
}

.connectCard p{
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.85;
}


/* ======================================
MEDIA & PRESS
====================================== */

.pressFactsCard{
    background: var(--white);
    padding: 55px;
    border-radius: 32px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 18px 40px rgba(0,0,0,.05);
    margin-bottom: 80px;
}

.pressFactsCard h3{
    text-align: center;
    margin-bottom: 45px;
}

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

.factItem{
    padding: 24px;
    background: #faf8f3;
    border-radius: 20px;
}

.factLabel{
    display: inline-block;
    margin-bottom: 10px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-color);
}

.factItem p{
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.8;
}


/* ======================================
CLOSING QUOTE
====================================== */

.closingQuote{
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.closingQuote blockquote{
    margin: 0 0 28px;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.35;
    font-weight: 500;
    color: var(--text-primary);
}

.quoteAuthor p{
    margin-bottom: 8px;
}

.quoteAuthor span{
    color: var(--text-secondary);
    font-size: .95rem;
}

/*==================================
    EDUCATIONAL ALIGNMENT STRIP
==================================*/

.alignment-strip{
    margin-top:40px;
    padding:14px 22px;
    background: rgba(0,0,0,.08);
    border:1px solid rgba(255,255,255,.12);
    border-left:4px solid var(--gold);
    border-radius:14px;
    max-width: max-content;
}

.alignment-strip p{
    margin:0;
    font-family:Georgia, serif;
    font-size:16px;
    line-height:1.8;
    color:rgba(255,255,255,.92);
    max-width: 100%;
}

.alignment-strip strong{
    color:#D7B45B;
    font-weight:500;
}

.alignment-strip a{
    display:inline-block;
    margin-top:8px;
    color:var(--gold);
    font-family:Arial, sans-serif;
    font-size:14px;
    font-weight:600;
    transition:.3s ease;
}

.alignment-strip a:hover{
    color:#fff;
}

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

.communityHero{
    position: relative;
    padding: 120px 20px;
    background: var(--bg-primary);
    overflow: hidden;
}

.communityHeroContent{
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: auto;
    text-align: center;
}

.communityHeroContent h1{
    margin: 14px 0 28px;
    font-family: Arial, sans-serif;
    font-size: clamp(2.8rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.15;
    color: #1F3864;
}

.communityHeroContent h1 span{
    color: #B8860B;
}

/* Hero Intro */

.communityHeroContent .heroIntro{
    max-width: 720px;
    margin: 40px auto 0;
    text-align: center;
}

.communityHeroContent .heroIntro p{
    margin-bottom: 8px;
    font-family: Georgia, serif;
    font-size: 1.35rem;
    line-height: 1.5;
    color: #555;
}

.communityHeroContent .heroIntro p:last-child{
    margin-bottom: 0;
}

/* Highlight sentence */

.communityHeroContent .heroIntro p:nth-child(2){
    margin: 18px 0;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--color-heading);
}

.communityHeroContent .heroIntro strong{
    color: var(--color-primary);
    font-weight: 600;
}

/* Buttons */

.heroButtons{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 45px;
}

/*======================================
    COMMUNITY PURPOSE
======================================*/

.communityPurpose{
    padding:120px 0;
    background:#FFFDF8;
}

.communityPurpose .sectionHeading{
    max-width:760px;
    margin:0 auto 70px;
    text-align:center;
}

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

.purposeCard{
    background:#fff;
    border-radius:24px;
    padding:40px;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 18px 50px rgba(0,0,0,.05);
}

.purposeCard h3{
    margin-bottom:22px;
}

.purposeCard p{
    margin-bottom:20px;
}

.purposeCard ul{
    margin:24px 0;
    padding-left:22px;
}

.purposeCard li{
    margin-bottom:14px;
    line-height:1.7;
}

.gapCard{
    border-top:6px solid #D9534F;
}

.bridgeCard{
    border-top:6px solid var(--color-primary);
}

.highlightText{
    margin-top:30px;
    font-weight:700;
    color:#D9534F;
}

.bridgeQuote{
    margin-top:35px;
    padding:22px;
    background:rgba(184,134,11,.08);
    border-left:4px solid var(--color-primary);
    border-radius:14px;
    font-family:Georgia, serif;
    font-size:1.15rem;
    line-height:1.8;
    color:var(--color-heading);
}

/*======================================
        COMMUNITY ROLES
======================================*/

.communityRoles{
    padding:120px 0;
}

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

.roleCard{
    background:#fff;
    border-radius:24px;
    padding:38px;
    border-top:6px solid;
    box-shadow:0 18px 45px rgba(0,0,0,.06);
    transition:.35s;
}

.roleCard:hover{
    transform:translateY(-8px);
}

.roleCard.navy{
    border-color:#1F3864;
}

.roleCard.green{
    border-color:#3F8F63;
}

.roleCard.teal{
    border-color:#1B9AAA;
}

.roleCard.gold{
    border-color:#C49A2A;
}

.roleNumber{
    display:inline-block;
    margin-bottom:16px;
    font-size:.85rem;
    font-weight:700;
    letter-spacing:2px;
    color:#999;
}

.roleCard h3{
    margin-bottom:26px;
}

.roleInfo h4{
    margin-bottom:6px;
    color:var(--color-primary);
    font-size:1rem;
}

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

.textLink{
    display:inline-block;
    margin-top:10px;
    font-weight:700;
    color:var(--color-primary);
    transition:.3s;
}

.textLink:hover{
    color:var(--color-heading);
}

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

.matchingProcess{
    padding:120px 0;
    background:var(--bg-primary);
}

.processGrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:60px;
}

.processCard{
    position:relative;
    background:#fff;
    border-radius:24px;
    padding:35px;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 18px 45px rgba(0,0,0,.05);
    transition:.35s;
}

.processCard:hover{
    transform:translateY(-8px);
}

.stepNumber{
    width:60px;
    height:60px;
    border-radius:50%;
    background:var(--color-primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:1.2rem;
    margin-bottom:25px;
}

.processCard h3{
    margin-bottom:16px;
}

.processCard p{
    margin-bottom:20px;
}

.processCard ul{
    padding-left:20px;
}

.processCard li{
    margin-bottom:12px;
    line-height:1.7;
}

/*======================================
        REGISTRATION
======================================*/

.registrationSection{
    padding:120px 0;
}

.registrationGrid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
    margin-top:60px;
}

.registrationCard{
    background:#fff;
    border-radius:24px;
    padding:40px;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 18px 45px rgba(0,0,0,.05);
}

.registrationCard h3{
    margin-bottom:30px;
}

.registrationCard form{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.registrationCard input,
.registrationCard select,
.registrationCard textarea{

    width:100%;
    padding:15px 18px;
    border-radius:14px;
    border:1px solid rgba(0,0,0,.12);
    font:inherit;
    background:#fff;
    transition:.3s;
}

.registrationCard textarea{
    resize:vertical;
    min-height:120px;
}

.registrationCard input:focus,
.registrationCard select:focus,
.registrationCard textarea:focus{

    outline:none;
    border-color:var(--color-primary);

}

.registrationCard button{
    margin-top:10px;
}

/*======================================
        TRAINING MODULE
======================================*/

.trainingModule{
    padding:120px 0;
    background:var(--bg-primary);
}

.trainingCard{
    max-width:1000px;
    margin:auto;
    padding:50px;
    background:#fff;
    border:2px solid #D8B04C;
    border-radius:24px;
    box-shadow:0 18px 45px rgba(0,0,0,.05);
}

.trainingCard h2{
    margin:18px 0 24px;
}

.trainingCard h2 span{
    color:var(--color-primary);
}

.trainingIntro{
    max-width:720px;
    margin-bottom:40px;
}

.trainingGrid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px 40px;
    margin-bottom:40px;
}

.trainingItem{
    padding:18px 20px;
    border-radius:14px;
    background:#FFF9EB;
    line-height:1.5;
}

.trainingFooter{
    padding-top:30px;
    border-top:1px solid rgba(0,0,0,.08);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.trainingFooter p{
    margin:0;
}

/*======================================
    SINGLE PARENT COMMUNITY
======================================*/

.singleParentCommunity{
    padding:120px 0;
    background:#FFF8E8;
}

.singleParentGrid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:60px;
    align-items:center;
}

.singleParentContent h2{
    margin:18px 0 24px;
}

.singleParentContent h2 span{
    color:var(--color-primary);
}

.singleParentContent p{
    margin-bottom:20px;
}

.communityBenefits{
    list-style:none;
    padding:0;
    margin:35px 0;
}

.communityBenefits li{
    position:relative;
    padding-left:34px;
    margin-bottom:18px;
    line-height:1.8;
}

.communityBenefits li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:var(--color-primary);
    font-weight:700;
}

.singleParentImage img{
    width:100%;
    display:block;
    border-radius:24px;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

/*======================================
        BRAND IDENTITY
======================================*/

.brandIdentity{
    padding:120px 0;
    background:var(--bg-primary);
}

.identityCard{
    max-width:1100px;
    margin:auto;
    padding:60px;
    text-align:center;
    background:#fff;
    border-radius:28px;
    box-shadow:0 20px 60px rgba(0,0,0,.06);
}

.identityCard h2{
    margin:18px 0 50px;
}

.identityCard h2 span{
    color:var(--color-primary);
}

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

.identityItem{
    padding:28px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:18px;
}

.identityItem h3{
    margin-bottom:12px;
    color:var(--color-primary);
}

.identityQuote{
    max-width:720px;
    margin:0 auto 40px;
    font-style:italic;
    font-size:1.15rem;
}

.identityLinks{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:40px;
}

.identityLinks a{
    padding:10px 20px;
    border-radius:50px;
    background:#FFF8E8;
    color:var(--color-primary);
    font-weight:600;
    transition:.3s;
}

.identityLinks a:hover{
    background:var(--color-primary);
    color:#fff;
}

.identityFooter{
    border-top:1px solid rgba(0,0,0,.08);
    padding-top:30px;
}

.identityFooter p{
    margin-bottom:10px;
}

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

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

.institutionHero{
    position: relative;
    padding: 120px 20px;
    background: var(--bg-primary);
    overflow: hidden;
}

.institutionHeroContent{
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: auto;
    text-align: center;
}

.institutionHeroContent h1{
    margin: 14px 0 28px;
    font-family: Arial, sans-serif;
    font-size: clamp(2.8rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-heading);
}

.institutionHeroContent h1 span{
    color: var(--color-primary);
}

.institutionHeroContent .heroIntro{
    max-width: 760px;
    margin: 40px auto 0;
}

.institutionHeroContent .heroIntro p{
    font-family: Georgia, serif;
    font-size: 1.35rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 18px;
}

.institutionHeroContent .heroIntro p:last-child{
    margin-bottom: 0;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--color-heading);
}

.institutionHeroContent .heroIntro strong{
    color: var(--color-primary);
    font-weight: 600;
}

.institutionHeroContent .heroButtons{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 45px;
}

/*======================================
        WHO THIS PAGE IS FOR
======================================*/

.institutionAudience{
    padding:120px 0;
}

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

.audienceCard{
    background:#fff;
    border-radius:22px;
    padding:35px;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 15px 40px rgba(0,0,0,.05);
    transition:.3s ease;
}

.audienceCard:hover{
    transform:translateY(-6px);
}

.audienceCard h3{
    margin-bottom:16px;
    color:var(--color-primary);
}

.audienceCard p{
    margin:0;
    line-height:1.8;
}

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

/*======================================
    PARTNERSHIP FEATURES
======================================*/

.partnershipIncludes{
    padding:120px 0;
    background:var(--bg-primary);
}

.featureGrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:60px;
}

.featureCard{
    background:#fff;
    padding:35px;
    border-radius:22px;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 15px 40px rgba(0,0,0,.05);
    transition:.3s ease;
}

.featureCard:hover{
    transform:translateY(-6px);
}

.featureCard h3{
    margin-bottom:18px;
    color:var(--color-primary);
}

.featureCard p{
    margin:0;
    line-height:1.8;
}

/*======================================
    INSTITUTIONAL SESSION
======================================*/

.institutionSession{
    padding:120px 0;
}

.sessionTimeline{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:60px;
}

.sessionStep{
    position:relative;
    background:#fff;
    border-radius:22px;
    padding:32px;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 15px 40px rgba(0,0,0,.05);
    transition:.3s ease;
}

.sessionStep:hover{
    transform:translateY(-6px);
}

.time{
    display:inline-block;
    margin-bottom:18px;
    padding:6px 14px;
    border-radius:50px;
    background:rgba(184,134,11,.12);
    color:var(--color-primary);
    font-weight:700;
    font-size:.9rem;
}

.sessionStep h3{
    margin-bottom:14px;
}

.sessionStep p{
    margin:0;
    line-height:1.8;
}

/*======================================
    PLACEMENT TRANSITION
======================================*/

.placementTransition{
    padding:120px 0;
    background:var(--bg-primary);
}

.transitionCard{
    max-width:950px;
    margin:60px auto 0;
    padding:45px;
    background:#fff;
    border-radius:24px;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 18px 45px rgba(0,0,0,.05);
}

.transitionStep{
    display:flex;
    gap:25px;
    align-items:flex-start;
    padding:24px 0;
    border-bottom:1px solid rgba(0,0,0,.08);
}

.transitionStep:last-of-type{
    border-bottom:none;
}

.transitionStep span{
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--color-primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    flex-shrink:0;
}

.transitionStep h3{
    margin-bottom:10px;
}

.transitionStep p{
    margin:0;
    line-height:1.8;
}

.transitionHighlight{
    margin-top:35px;
    padding:22px;
    border-left:5px solid var(--color-primary);
    background:#FFF8E8;
    border-radius:14px;
    text-align:center;
    font-size:1.1rem;
}

/*======================================
        SAFEGUARDING
======================================*/

.safeguardingSection{
    padding:120px 0;
}

.safeguardingCard{
    margin-top:60px;
    padding:50px;
    background:#1F3864;
    border-radius:24px;
    color:#fff;
}

.safeguardingCard h3{
    color:#fff;
    margin-bottom:35px;
}

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

.safeItem{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:28px;
}

.safeItem h4{
    margin-bottom:12px;
    color:#F4C542;
}

.safeItem p{
    margin:0;
    color:rgba(255,255,255,.9);
    line-height:1.8;
}

.safeStatement{
    margin-top:45px;
    padding-top:30px;
    border-top:1px solid rgba(255,255,255,.15);
    text-align:center;
}

.safeStatement p{
    margin-bottom:18px;
    color:rgba(255,255,255,.9);
}

.safeStatement h3{
    margin:0;
    font-size:2rem;
    line-height:1.4;
}

.safeStatement span{
    color:#F4C542;
}

/*======================================
    INSTITUTION REGISTRATION
======================================*/

.institutionRegistration{
    padding:120px 0;
    background:var(--bg-primary);
}

.registrationWrapper{
    max-width:900px;
    margin:60px auto 0;
}

.institutionForm{
    background:#fff;
    padding:45px;
    border-radius:24px;
    box-shadow:0 18px 45px rgba(0,0,0,.05);
}

.formRow{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-bottom:20px;
}

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

.formGroup label{
    margin-bottom:8px;
    font-weight:600;
}

.formGroup input,
.formGroup select,
.formGroup textarea{

    padding:15px 18px;
    border-radius:14px;
    border:1px solid rgba(0,0,0,.12);
    font:inherit;
    transition:.3s;
}

.formGroup textarea{
    resize:vertical;
}

.formGroup input:focus,
.formGroup select:focus,
.formGroup textarea:focus{

    outline:none;
    border-color:var(--color-primary);

}

.institutionForm button{
    margin-top:20px;
}

.registrationNote{
    margin-top:35px;
    text-align:center;
}

.registrationNote p{
    margin-bottom:10px;
}

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

/*======================================
        INSTITUTION CTA
======================================*/

.institutionCTA{
    padding:100px 0 120px;
    background:var(--bg-primary);
}

.ctaCard{
    max-width:900px;
    margin:auto;
    padding:60px 50px;
    text-align:center;
    background:#fff;
    border-radius:28px;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 20px 55px rgba(0,0,0,.06);
}

.ctaCard h2{
    margin:18px 0 24px;
}

.ctaCard h2 span{
    color:var(--color-primary);
}

.ctaCard p{
    max-width:650px;
    margin:0 auto 35px;
}

.ctaButtons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;
    margin-bottom:28px;
}

.ctaCard small{
    display:block;
    color:#666;
    line-height:1.7;
}

.ctaCard strong{
    color:var(--color-primary);
}

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

.ptaHero{
    position:relative;
    padding:120px 20px;
    background:var(--bg-primary);
    overflow:hidden;
}

.ptaHeroContent{
    position:relative;
    z-index:2;
    max-width:850px;
    margin:auto;
    text-align:center;
}

.ptaHeroContent h1{
    margin:14px 0 28px;
    font-family:Arial,sans-serif;
    font-size:clamp(2.8rem,5vw,4rem);
    font-weight:700;
    line-height:1.15;
    color:var(--color-heading);
}

.ptaHeroContent h1 span{
    color:var(--color-primary);
}

.ptaHeroContent .heroIntro{
    max-width:760px;
    margin:40px auto 0;
}

.ptaHeroContent .heroIntro p{
    margin-bottom:18px;
    font-family:Georgia,serif;
    font-size:1.35rem;
    line-height:1.5;
    color:var(--text-secondary);
}

.ptaHeroContent .heroIntro p:last-child{
    margin-bottom:0;
}

.ptaHeroContent .heroIntro strong{
    color:var(--color-primary);
    font-weight:600;
}

.ptaHeroContent .heroButtons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;
    margin-top:45px;
}

/*======================================
        PTA IMPORTANCE
======================================*/

.ptaImportance{
    padding:120px 0;
    background:#FFFDF8;
}

.importanceGrid{
    display:grid;
    grid-template-columns:repeat(1,1fr);
    gap:35px;
    margin-top:60px;
}

.importanceCard{
    background:#fff;
    padding:40px;
    border-radius:24px;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 18px 45px rgba(0,0,0,.05);
}

.importanceCard h3{
    margin-bottom:20px;
    color:var(--color-primary);
}

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

.importanceCard p:last-of-type{
    margin-bottom:0;
}

.importanceQuote{
    margin-top:30px;
    padding:20px;
    background:#FFF7E5;
    border-left:4px solid var(--color-primary);
    border-radius:14px;
    font-family:Georgia, serif;
    font-size:1.1rem;
    line-height:1.8;
    color:var(--color-heading);
}

/*======================================
        PTA ROLES
======================================*/

.ptaRoles{
    padding:120px 0;
}

.ptaRolesGrid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:35px;
    margin-top:60px;
}

.ptaRoleCard{
    background:#fff;
    border-radius:24px;
    padding:38px;
    border-top:6px solid;
    box-shadow:0 18px 45px rgba(0,0,0,.06);
    transition:.35s ease;
}

.ptaRoleCard:hover{
    transform:translateY(-8px);
}

.ptaRoleCard.navy{
    border-color:#1F3864;
}

.ptaRoleCard.green{
    border-color:#3F8F63;
}

.ptaRoleCard.teal{
    border-color:#1B9AAA;
}

.ptaRoleCard.gold{
    border-color:#C49A2A;
}

.roleNumber{
    display:inline-block;
    margin-bottom:18px;
    font-size:.85rem;
    font-weight:700;
    letter-spacing:2px;
    color:#888;
}

.ptaRoleCard h3{
    margin-bottom:18px;
}

.ptaRoleCard p{
    margin-bottom:20px;
}

.ptaRoleCard ul{
    padding-left:20px;
    margin-bottom:25px;
}

.ptaRoleCard li{
    margin-bottom:10px;
    line-height:1.7;
}

.textLink{
    font-weight:700;
    color:var(--color-primary);
    transition:.3s;
}

.textLink:hover{
    color:var(--color-heading);
}

/*======================================
        SCHOOL LEVELS
======================================*/

.schoolLevels{
    padding:120px 0;
    background:var(--bg-primary);
}

.levelAccordion{
    max-width:950px;
    margin:60px auto 0;
}

.levelItem{
    margin-bottom:20px;
    background:#fff;
    border-radius:20px;
    border:1px solid rgba(0,0,0,.06);
    overflow:hidden;
}

.levelItem summary{
    cursor:pointer;
    list-style:none;
    position:relative;
    padding:26px 70px 26px 28px;
    font-weight:700;
}

.levelItem summary::-webkit-details-marker{
    display:none;
}

.levelItem summary span{
    display:block;
    margin-top:8px;
    font-size:.95rem;
    font-weight:400;
    color:#777;
}

.levelItem summary::after{
    content:"+";
    position:absolute;
    right:28px;
    top:50%;
    transform:translateY(-50%);
    font-size:28px;
    color:var(--color-primary);
}

.levelItem[open] summary::after{
    content:"−";
}

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

.levelContent h4{
    margin:20px 0 10px;
    color:var(--color-primary);
}

.levelContent p{
    margin:0 0 16px;
    line-height:1.8;
}

/*======================================
        PTA STARTER PACK
======================================*/

.starterPack{
    padding:120px 0;
}

.starterCard{
    max-width:1000px;
    margin:auto;
    padding:50px;
    background:#fff;
    border:2px solid #D8B04C;
    border-radius:24px;
    text-align:center;
    box-shadow:0 18px 45px rgba(0,0,0,.05);
}

.starterCard h2{
    margin:18px 0 24px;
}

.starterCard h2 span{
    color:var(--color-primary);
}

.starterIntro{
    max-width:650px;
    margin:0 auto 40px;
}

.starterGrid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-bottom:40px;
}

.starterItem{
    padding:22px;
    background:#FFF9EB;
    border-radius:16px;
    text-align:left;
}

.starterItem h3{
    margin-bottom:12px;
    color:var(--color-primary);
}

.starterItem p{
    margin:0;
    line-height:1.7;
}

/*======================================
        PTA REGISTRATION
======================================*/

.ptaRegistration{
    padding:120px 0;
    background:var(--bg-primary);
}

.registrationWrapper{
    max-width:900px;
    margin:60px auto 0;
}

.ptaForm{
    background:#fff;
    padding:45px;
    border-radius:24px;
    box-shadow:0 18px 45px rgba(0,0,0,.05);
}

.formRow{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-bottom:20px;
}

.formGroup{
    display:flex;
    flex-direction:column;
    margin-bottom:20px;
}

.formGroup label{
    margin-bottom:8px;
    font-weight:600;
}

.formGroup input,
.formGroup textarea{
    padding:15px 18px;
    border-radius:14px;
    border:1px solid rgba(0,0,0,.12);
    font:inherit;
}

.formGroup input:focus,
.formGroup textarea:focus{
    outline:none;
    border-color:var(--color-primary);
}

.formGroup textarea{
    resize:vertical;
}

.checkboxGrid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-top:10px;
}

.checkboxItem{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-weight:400 !important;
}

.checkboxItem input{
    width:auto;
    margin-top:3px;
}

.ptaForm button{
    margin-top:10px;
}

.registrationNote{
    margin-top:35px;
    text-align:center;
}

.registrationNote p{
    margin-bottom:10px;
}

/*======================================
        PTA CLOSING CTA
======================================*/

.ptaCTA{
    padding:100px 0 120px;
    background:var(--bg-primary);
}

.ptaCTA .ctaCard{
    max-width:900px;
    margin:auto;
    padding:60px 50px;
    text-align:center;
    background:#fff;
    border-radius:28px;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 20px 55px rgba(0,0,0,.06);
}

.ptaCTA h2{
    margin:18px 0 24px;
}

.ptaCTA h2 span{
    color:var(--color-primary);
}

.ptaCTA p{
    max-width:650px;
    margin:0 auto 18px;
}

.ptaCTA strong{
    color:var(--color-primary);
}

.relatedLinks{
    margin:40px 0 35px;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
}

.relatedLinks a{
    color:var(--color-primary);
    font-weight:600;
    transition:.3s;
}

.relatedLinks a:hover{
    color:var(--color-heading);
}

.relatedLinks span{
    color:#999;
}

.ctaFooter{
    border-top:1px solid rgba(0,0,0,.08);
    padding-top:25px;
}

.ctaFooter p{
    margin-bottom:10px;
}

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

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

.schoolsHero{
    position:relative;
    padding:120px 20px;
    background:var(--bg-primary);
    overflow:hidden;
}

.schoolsHeroContent{
    max-width:900px;
    margin:auto;
    text-align:center;
    position:relative;
    z-index:2;
}

.schoolsHeroContent h1{
    margin:14px 0 28px;
    font-family:Arial,sans-serif;
    font-size:clamp(2.8rem,5vw,4rem);
    line-height:1.15;
    font-weight:700;
    color:var(--color-heading);
}

.schoolsHeroContent h1 span{
    color:var(--color-primary);
}

.schoolsHeroContent .heroIntro{
    max-width:760px;
    margin:40px auto 0;
}

.schoolsHeroContent .heroIntro p{
    margin-bottom:20px;
    font-family:Georgia,serif;
    font-size:1.35rem;
    line-height:1.5;
    color:var(--text-secondary);
}

.schoolsHeroContent .heroIntro p:last-child{
    margin-bottom:0;
}

.schoolsHeroContent strong{
    color:var(--color-primary);
}

.schoolsHeroContent .heroButtons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;
    margin-top:45px;
}

/*======================================
    CURRICULUM ALIGNMENT
======================================*/

.alignmentSection{
    padding:120px 0;
}

.tableWrapper{
    margin-top:60px;
    overflow-x:auto;
}

.alignmentTable{
    width:100%;
    border-collapse:collapse;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 15px 40px rgba(0,0,0,.05);
}

.alignmentTable thead{
    background:#1F3864;
}

.alignmentTable th{
    padding:22px 24px;
    text-align:left;
    color:#fff;
    font-weight:700;
}

.alignmentTable td{
    padding:22px 24px;
    vertical-align:top;
    line-height:1.8;
}

.alignmentTable tbody tr:nth-child(even){
    background:#FFF8E8;
}

.alignmentTable tbody tr{
    border-bottom:1px solid rgba(0,0,0,.06);
}

.alignmentTable tbody tr:last-child{
    border-bottom:none;
}

.alignmentTable strong{
    color:var(--color-heading);
}

.alignmentInfo{
    margin-top:50px;
    padding:35px;
    background:#FFFDF6;
    border-left:5px solid var(--color-primary);
    border-radius:18px;
}

.alignmentInfo h3{
    margin-bottom:22px;
}

.alignmentInfo ul{
    margin:0;
    padding-left:22px;
}

.alignmentInfo li{
    margin-bottom:16px;
    line-height:1.8;
}

.alignmentInfo li:last-child{
    margin-bottom:0;
}

/*======================================
    ALIGNMENT DOWNLOADS
======================================*/

.alignmentDownloads{
    padding:120px 0;
    background:var(--bg-primary);
}

.downloadGrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:60px;
}

.downloadCard{
    background:#FFF8E8;
    border:1px solid rgba(184,134,11,.18);
    border-radius:24px;
    padding:35px;
    display:flex;
    flex-direction:column;
    transition:.35s ease;
}

.downloadCard:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 45px rgba(0,0,0,.06);
}

.downloadCard h3{
    margin-bottom:18px;
    color:#1F3864;
    line-height:1.4;
}

.downloadCard p{
    margin-bottom:28px;
    font-style:italic;
    color:#666;
    line-height:1.7;
    flex-grow:1;
}

.downloadCard .primaryBtn{
    align-self:flex-start;
    font-size: 13.5px;
    padding: 14px 18px;
    white-space: nowrap;
}

/*======================================
    IMPLEMENTATION MODELS
======================================*/

.implementationModels{
    padding:120px 0;
}

.modelsGrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:60px;
}

.modelCard{
    background:#fff;
    border-radius:24px;
    padding:38px;
    border-top:6px solid;
    box-shadow:0 18px 45px rgba(0,0,0,.06);
    transition:.35s ease;
}

.modelCard:hover{
    transform:translateY(-8px);
}

.modelCard.green{
    border-color:#4CAF50;
}

.modelCard.navy{
    border-color:#1F3864;
}

.modelCard.purple{
    border-color:#6C4AB6;
}

.modelNumber{
    display:inline-block;
    margin-bottom:16px;
    font-size:.85rem;
    font-weight:700;
    letter-spacing:2px;
    color:#777;
}

.modelCard h3{
    margin-bottom:8px;
}

.modelCard small{
    display:block;
    margin-bottom:20px;
    color:var(--color-primary);
    font-style:italic;
    font-weight:600;
}

.modelCard p{
    margin-bottom:20px;
}

.modelCard ul{
    padding-left:20px;
    margin:0;
}

.modelCard li{
    margin-bottom:12px;
    line-height:1.7;
}

.modelCard li:last-child{
    margin-bottom:0;
}

/*======================================
    IDEA NOTEBOOK
======================================*/

.ideaNotebook{
    padding:120px 0;
    background:var(--bg-primary);
}

.ideaGrid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:50px;
    align-items:center;
}

.ideaContent h2{
    margin:18px 0 24px;
}

.ideaContent h2 span{
    color:var(--color-primary);
}

.ideaContent p{
    margin-bottom:20px;
}

.ideaCard{
    background:#fff;
    padding:38px;
    border-radius:24px;
    box-shadow:0 18px 45px rgba(0,0,0,.06);
}

.ideaCard h3{
    margin-bottom:24px;
    color:var(--color-primary);
}

.ideaCard ul{
    margin:0;
    padding-left:22px;
}

.ideaCard li{
    margin-bottom:16px;
    line-height:1.8;
}

.ideaCard li:last-child{
    margin-bottom:0;
}

.portfolioHighlight{
    margin-top:60px;
    padding:35px;
    background:#FFF8E8;
    border-left:5px solid var(--color-primary);
    border-radius:18px;
}

.portfolioHighlight h3{
    margin-bottom:18px;
}

.portfolioHighlight p{
    margin:0;
}

.portfolioHighlight strong{
    color:var(--color-primary);
}

/*======================================
    SCHOOL PARTNERSHIP
======================================*/

.schoolPartnership{
    padding:120px 0;
}

.partnershipCard{
    max-width:1100px;
    margin:auto;
    padding:55px;
    border:2px solid #D4AF37;
    border-radius:28px;
    background:#FFFDF8;
    text-align:center;
}

.partnershipCard h2{
    margin:18px 0 22px;
}

.partnershipCard h2 span{
    color:var(--color-primary);
}

.partnershipIntro{
    max-width:650px;
    margin:0 auto 45px;
}

.partnershipGrid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    margin-bottom:40px;
}

.partnerItem{
    background:#fff;
    border-radius:18px;
    padding:28px;
    border:1px solid rgba(0,0,0,.06);
}

.partnerItem h3{
    margin-bottom:14px;
    color:var(--color-primary);
}

.partnerItem p{
    margin:0;
}

.partnershipButtons{
    margin-bottom:24px;
}

.partnershipCard small{
    color:#666;
    margin-bottom: 90px;
}

.partnershipCard strong{
    color:var(--color-primary);
}

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

.aboutProgramme{
    padding:120px 0;
    background:var(--bg-primary);
}

.programmeGrid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:60px;
    align-items:center;
}

.programmeContent h2{
    margin:18px 0 24px;
}

.programmeContent h2 span{
    color:var(--color-primary);
}

.programmeContent p{
    margin-bottom:20px;
}

.programmeCard{
    background:#fff;
    padding:40px;
    border-radius:24px;
    box-shadow:0 18px 45px rgba(0,0,0,.06);
}

.programmeCard h3{
    margin-bottom:22px;
    color:var(--color-primary);
}

.programmeCard ul{
    margin:0 0 35px;
    padding-left:22px;
}

.programmeCard li{
    margin-bottom:14px;
    line-height:1.7;
}

.programmeTimeline{
    padding-top:25px;
    border-top:1px solid rgba(0,0,0,.08);
}

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

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

/*======================================
        COMPLETE IDENTITY
======================================*/

.completeIdentity{
    padding:120px 0;
    background:var(--bg-primary);
}

.identityCard{
    max-width:1000px;
    margin:auto;
    padding:60px;
    background:#fff;
    border-radius:28px;
    text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,.06);
}

.identityCard h2{
    margin:18px 0 20px;
}

.identityCard h2 span{
    color:var(--color-primary);
}

.identityIntro{
    max-width:650px;
    margin:0 auto 50px;
    font-style:italic;
}

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

.identityItem{
    padding:28px;
    border-radius:18px;
    background:#FFF8E8;
}

.identityItem h3{
    margin-bottom:14px;
    color:var(--color-primary);
}

.identityItem p{
    margin:0;
}

.identityCard blockquote{
    margin:0 auto 45px;
    max-width:650px;
    font-family:Georgia,serif;
    font-size:1.7rem;
    line-height:1.6;
    color:var(--color-heading);
    font-style:italic;
}

.identityFooter{
    padding-top:30px;
    border-top:1px solid rgba(0,0,0,.08);
}

.identityFooter p{
    margin-bottom:10px;
}

.identityFooter p:last-child{
    margin-bottom:0;
    color:#666;
}

/*======================================
        READ MORE (DESKTOP)
======================================*/

.roleExtra{
    display:none;
    margin-top:24px;
    animation:fadeIn .35s ease;
}

.roleExtra.show{
    display:block;
}

.roleExtra h4{
    margin:24px 0 14px;
    color:var(--color-primary);
    font-size:1rem;
    font-weight:700;
}

.roleExtra ul{
    margin:0 0 24px;
    padding-left:22px;
}

.roleExtra li{
    margin-bottom:12px;
    line-height:1.8;
}

.cardFooter{
    margin-top:auto;
    padding-top:24px;
    border-top:1px solid rgba(0,0,0,.08);

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

.readMoreBtn{
    display: block;
    background:none;
    border:none;
    padding:0;

    font-size:15px;
    font-weight:700;
    color:var(--color-primary);

    cursor:pointer;
    transition:.3s ease;
}

.readMoreBtn:hover{
    color:var(--color-heading);
    transform:translateX(3px);
}

.textLink{
    font-weight:700;
}

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(-8px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* Spacing above download buttons in Community and Institutional pages */
.communityPurpose .ctaButtons,
.partnershipIncludes .ctaButtons {
    margin-top: clamp(25px, 4vw, 40px);
}

/* =========================================
   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) {
      .sj-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 .sj-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 .sj-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 .sj-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 .sj-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) {
.sj-container{
  padding-left: 30px !important;
  padding-right: 30px !important;
}
}

/* =========================================
   Homepage responsive hardening
   Keeps hero content and the curriculum strip inside the viewport.
========================================= */

.hero-grid > *,
.hero-content,
.hero-image {
    min-width: 0;
}

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
}

.hero-buttons .btn-primary,
.hero-buttons .btn-outline {
    font-size: 14px;
    padding: 16px 24px;
    white-space: nowrap;
}

.alignment-strip {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.alignment-strip p,
.alignment-strip a {
    white-space: normal;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hero {
        padding-top: 130px;
        padding-bottom: 80px;
    }

    .hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .hero-content {
        order: 1;
        max-width: 760px;
    }

    .hero-image {
        order: 2;
        width: 100%;
    }

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

    .hero h1 {
        font-size: clamp(3rem, 7vw, 4rem);
    }

    .hero h2,
    .hero p {
        max-width: 720px;
    }
}

@media (max-width: 768px) {
    .alignment-strip {
        padding: 24px 20px;
    }

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

    .tableWrapper {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        padding-inline: 0;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }
}

@media (max-width: 576px) {
    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

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

/*==============================
      LANGUAGE TOGGLE
==============================*/

.lang-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
    margin-left: 20px;
}

.lang-switch a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s;
    cursor: pointer;
    text-decoration: none;
}

.lang-switch a:hover {
    color: var(--lightGold);
}

.lang-switch a.active {
    color: var(--gold);
    pointer-events: none;
}

.lang-switch .lang-separator {
    color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 768px) {
    .lang-switch {
        margin-left: auto;
        margin-right: 20px;
    }
}
html,
body {
    overflow-x: hidden;
}