/* ==========================================================
   MINI SENSORY CLUB
   GLOBAL CSS
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Fredoka:wght@400;500;600;700&display=swap');

:root{

    --primary:#117d70;
    --primary-dark:#0d665b;

    --pink:#f585a5;
    --yellow:#f0cb76;
    --blue:#6ac3f0;
    --purple:#c691d6;
    --coral:#f0664c;

    --white:#ffffff;
    --light:#f8f9fa;
    --dark:#222222;
    --text:#333333;
    --grey:#666666;
    --border:#ececec;

    --container:1200px;
    --radius:22px;
    --shadow:0 12px 40px rgba(0,0,0,.08);

}

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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'DM Sans', sans-serif;
    background:var(--white);
    color:var(--text);
    line-height:1.6;
}

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

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

button{
    border:none;
    background:none;
    font:inherit;
    cursor:pointer;
}

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

.container{
    width:min(92%, var(--container));
    margin:0 auto;
}

section{
    padding:90px 0;
}

.section{
    padding:100px 0;
}

.section-light{
    background:var(--light);
}

.section-white{
    background:var(--white);
}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6{
    font-family:'Fredoka', sans-serif;
    color:var(--dark);
    font-weight:600;
    line-height:1.15;
}

h1{
    font-size:3.7rem;
    margin-bottom:24px;
}

h2{
    font-size:2.7rem;
    margin-bottom:20px;
}

h3{
    font-size:1.55rem;
    margin-bottom:16px;
}

p{
    color:var(--grey);
    font-size:1.08rem;
    line-height:1.8;
    margin-bottom:24px;
}

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

.nav{
    position:sticky;
    top:0;
    z-index:1000;
    background:var(--white);
    border-bottom:1px solid var(--border);
    box-shadow:0 4px 18px rgba(0,0,0,.04);
}

.nav-inner{
    width:min(92%, var(--container));
    height:90px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.nav-left,
.brand-link{
    display:flex;
    align-items:center;
}

.nav-logo{
    height:68px;
    width:auto;
}

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

.nav-links{
    display:flex;
    align-items:center;
    gap:34px;
}

.nav-link{
    font-size:1rem;
    font-weight:700;
    color:var(--text);
    position:relative;
    transition:.25s ease;
}

.nav-link:hover{
    color:var(--primary);
}

.nav-link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:3px;
    background:var(--primary);
    border-radius:20px;
    transition:.25s ease;
}

.nav-link:hover::after{
    width:100%;
}

.nav-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 30px;
    background:var(--primary);
    color:var(--white);
    border-radius:999px;
    font-weight:700;
    box-shadow:var(--shadow);
    transition:.25s ease;
}

.nav-cta:hover{
    background:var(--primary-dark);
    color:var(--white);
    transform:translateY(-2px);
}

.menu-toggle{
    display:none;
    color:var(--primary);
}

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

.hero{
    padding:120px 0;
    background:var(--white);
}

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

.hero-content{
    max-width:620px;
}

.hero-tag,
.section-tag{
    display:inline-block;
    padding:9px 20px;
    margin-bottom:24px;
    border-radius:999px;
    background:rgba(17,125,112,.08);
    color:var(--primary);
    font-size:.9rem;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.hero-text{
    max-width:560px;
    margin-bottom:36px;
    color:var(--text);
}

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

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

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:175px;
    padding:15px 32px;
    border-radius:999px;
    font-size:1rem;
    font-weight:800;
    transition:.25s ease;
}

.btn-primary{
    background:var(--primary);
    color:var(--white);
    box-shadow:var(--shadow);
}

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

.btn-secondary{
    background:var(--white);
    color:var(--primary);
    border:2px solid var(--primary);
}

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

.section-button{

    margin-top:45px;

    text-align:center;

}

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

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

.section-description{
    max-width:650px;
    margin:0 auto;
}

/* ==========================================================
   GRIDS
========================================================== */

.grid-2{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:60px;
    align-items:center;
}

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

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

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

.card{
    background:var(--white);
    border-radius:var(--radius);
    padding:32px;
    box-shadow:var(--shadow);
    transition:.25s ease;
}

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

.service-card{
    text-align:center;
}

.service-card h3{
    margin-top:22px;
}

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

.feature-icon{
    width:72px;
    height:72px;
    margin:0 auto 20px;
    border-radius:50%;
    background:rgba(17,125,112,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
}

/* ==========================================================
   PLACEHOLDERS
========================================================== */

.image-placeholder{
    width:100%;
    min-height:320px;
    border:2px dashed #d7d7d7;
    border-radius:var(--radius);
    background:#f7f7f7;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#888;
    font-size:1.1rem;
    padding:24px;
}

.hero .image-placeholder{
    min-height:500px;
}

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

.cta{
    padding:90px 60px;
    border-radius:32px;
    background:linear-gradient(135deg, var(--primary), var(--blue));
    text-align:center;
    color:var(--white);
}

.cta h2{
    color:var(--white);
}

.cta p{
    color:rgba(255,255,255,.9);
    max-width:700px;
    margin:20px auto 35px;
}

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

.cta .btn-secondary{
    background:transparent;
    border-color:var(--white);
    color:var(--white);
}

.cta .btn-secondary:hover{
    background:var(--white);
    color:var(--primary);
}

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

.footer{
    background:var(--light);
    padding:80px 0 35px;
    border-top:1px solid var(--border);
}

.footer-top{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:60px;
}

.footer-brand{
    max-width:370px;
}

.footer-logo{
    width:80px;
    height:auto;
    margin-bottom:20px;
}

.footer-brand h2{
    margin-bottom:18px;
}

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

.footer-column h3{
    font-size:1.25rem;
    margin-bottom:22px;
}

.footer-column a,
.footer-column p{
    color:var(--grey);
    margin-bottom:14px;
    font-size:1rem;
}

.footer-column a:hover{
    color:var(--primary);
    padding-left:4px;
}

.footer-bottom{
    margin-top:60px;
    padding-top:28px;
    border-top:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.footer-bottom p{
    margin:0;
    font-size:.9rem;
}

.footer-bottom a{
    color:var(--primary);
    font-weight:700;
}

.footer-legal{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.footer-legal a{
    color:var(--grey);
    font-size:.9rem;
}

.footer-legal a:hover{
    color:var(--primary);
}

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

@media(max-width:900px){

    .nav-inner{
        height:78px;
    }

    .nav-logo{
        height:58px;
    }

    .nav-links{
        display:none;
    }

    .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .nav-links.nav-links-open{
        display:flex;
        position:absolute;
        top:78px;
        left:0;
        width:100%;
        flex-direction:column;
        align-items:center;
        gap:22px;
        padding:30px 20px;
        background:var(--white);
        border-bottom:1px solid var(--border);
        box-shadow:0 12px 30px rgba(0,0,0,.08);
    }

    .hero{
        padding:70px 0;
    }

    .hero-grid,
    .grid-2,
    .grid-3,
    .grid-4{
        grid-template-columns:1fr;
        gap:35px;
    }

    .hero-content{
        max-width:100%;
        text-align:center;
    }

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

    .hero .image-placeholder{
        min-height:320px;
    }

    .section{
        padding:80px 0;
    }

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

    .cta{
        padding:60px 30px;
    }

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

    .footer-brand{
        max-width:100%;
        margin:0 auto;
    }

    .footer-logo{
        margin:0 auto 20px;
    }

    .footer-bottom{
        flex-direction:column;
        text-align:center;
    }

    .footer-legal{
        justify-content:center;
    }

}

@media(max-width:768px){

    h1{
        font-size:2.7rem;
    }

    h2{
        font-size:2.1rem;
    }

    h3{
        font-size:1.4rem;
    }

    p{
        font-size:1rem;
    }

    section{
        padding:70px 0;
    }

}

/* ==========================================================
   MOBILE NAV + FOOTER
========================================================== */

@media (max-width:900px){

    /* ---------- NAV ---------- */

    .nav{
        position:sticky;
        top:0;
        z-index:1000;
    }

    .nav-inner{
        height:78px;
        position:relative;
    }

    .nav-logo{
        height:54px;
        max-width:180px;
        object-fit:contain;
    }

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

    .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
        width:46px;
        height:46px;
        border-radius:50%;
        color:var(--primary);
        background:rgba(17,125,112,.08);
    }

    .nav-links{
        display:none;
    }

    .nav-links.nav-links-open{
        display:flex;
        position:absolute;
        top:78px;
        left:0;
        width:100%;
        flex-direction:column;
        align-items:center;
        gap:22px;
        padding:32px 20px;
        background:var(--white);
        border-bottom:1px solid var(--border);
        box-shadow:0 18px 35px rgba(0,0,0,.08);
    }

    .nav-link{
        font-size:1.05rem;
    }

    .nav-link::after{
        display:none;
    }

    .nav-cta{
        width:100%;
        max-width:260px;
        text-align:center;
        margin-top:4px;
    }



    /* ---------- FOOTER ---------- */

    .footer{
        padding:60px 0 30px;
    }

    .footer-top{
        grid-template-columns:1fr;
        gap:42px;
        text-align:center;
    }

    .footer-brand{
        max-width:100%;
        margin:0 auto;
    }

    .footer-logo{
        margin:0 auto 20px;
        width:78px;
    }

    .footer-column{
        align-items:center;
    }

    .footer-column h3{
        margin-bottom:16px;
    }

    .footer-column a,
    .footer-column p{
        margin-bottom:10px;
    }

    .footer-column a:hover{
        padding-left:0;
    }

    .footer-bottom{
        margin-top:45px;
        padding-top:24px;
        flex-direction:column;
        justify-content:center;
        text-align:center;
        gap:14px;
    }

    .footer-legal{
        justify-content:center;
        gap:14px;
    }

}



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

@media (max-width:600px){

    .nav-inner{
        height:72px;
    }

    .nav-logo{
        height:48px;
        max-width:160px;
    }

    .nav-links.nav-links-open{
        top:72px;
        padding:28px 18px;
    }

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

    .footer-brand h2{
        font-size:2rem;
    }

    .footer-brand p{
        font-size:.98rem;
    }

    .footer-bottom p,
    .footer-legal a{
        font-size:.85rem;
    }

}

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

.contact-form{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.form-group label{
    font-weight:700;
    color:var(--dark);
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    padding:16px 18px;
    border:1px solid var(--border);
    border-radius:14px;
    font-family:'DM Sans', sans-serif;
    font-size:1rem;
    color:var(--text);
    background:var(--white);
    outline:none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(17,125,112,.08);
}

.form-group textarea{
    resize:vertical;
}



/* ==========================================================
   SOFT PASTEL BRAND ACCENTS
   Keeps white backgrounds but adds Mini Sensory Club colour
========================================================== */

/* ---------- HERO SOFT BACKGROUND GLOW ---------- */

.hero{
    position:relative;
    overflow:hidden;
}

.hero::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(245,133,165,.16);
    top:80px;
    left:-180px;
    z-index:0;
}

.hero::after{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    border-radius:50%;
    background:rgba(106,195,240,.16);
    bottom:60px;
    right:-140px;
    z-index:0;
}

.hero .container{
    position:relative;
    z-index:1;
}



/* ---------- SOFT SECTION TAG COLOURS ---------- */

.section:nth-of-type(2) .section-tag,
.section:nth-of-type(6) .section-tag{
    background:rgba(245,133,165,.14);
    color:#b94c6d;
}

.section:nth-of-type(3) .section-tag,
.section:nth-of-type(7) .section-tag{
    background:rgba(240,203,118,.20);
    color:#9b741e;
}

.section:nth-of-type(4) .section-tag,
.section:nth-of-type(8) .section-tag{
    background:rgba(106,195,240,.18);
    color:#287fa8;
}

.section:nth-of-type(5) .section-tag{
    background:rgba(198,145,214,.18);
    color:#87549a;
}



/* ---------- FEATURE ICON PASTEL ROTATION ---------- */

.card:nth-child(1) .feature-icon{
    background:rgba(17,125,112,.10);
}

.card:nth-child(2) .feature-icon{
    background:rgba(245,133,165,.18);
}

.card:nth-child(3) .feature-icon{
    background:rgba(240,203,118,.24);
}

.card:nth-child(4) .feature-icon{
    background:rgba(106,195,240,.18);
}

.card:nth-child(5) .feature-icon{
    background:rgba(198,145,214,.18);
}

.card:nth-child(6) .feature-icon{
    background:rgba(240,102,76,.16);
}



/* ---------- SOFT CARD ACCENT LINES ---------- */

.card{
    border:1px solid rgba(0,0,0,.03);
    position:relative;
    overflow:hidden;
}

.card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
    background:var(--primary);
    opacity:.75;
}

.card:nth-child(2)::before{
    background:var(--pink);
}

.card:nth-child(3)::before{
    background:var(--yellow);
}

.card:nth-child(4)::before{
    background:var(--blue);
}

.card:nth-child(5)::before{
    background:var(--purple);
}

.card:nth-child(6)::before{
    background:var(--coral);
}



/* ---------- IMAGE PLACEHOLDER PASTEL STYLE ---------- */

.image-placeholder{
    background:
        linear-gradient(
            135deg,
            rgba(245,133,165,.10),
            rgba(106,195,240,.10),
            rgba(240,203,118,.12)
        );
    border:2px dashed rgba(17,125,112,.22);
    color:var(--grey);
}



/* ---------- SOFT SERVICE CARD HOVER ---------- */

.service-card:hover{
    background:linear-gradient(
        180deg,
        var(--white),
        rgba(248,249,250,.85)
    );
}



/* ---------- CTA BUTTON POLISH ---------- */

.cta{
    position:relative;
    overflow:hidden;
}

.cta::before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(245,133,165,.28);
    top:-120px;
    left:-90px;
}

.cta::after{
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    border-radius:50%;
    background:rgba(240,203,118,.26);
    bottom:-110px;
    right:-80px;
}

.cta h2,
.cta p,
.cta .hero-buttons{
    position:relative;
    z-index:1;
}



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

@media(max-width:768px){

    .hero::before,
    .hero::after{
        width:260px;
        height:260px;
    }

    .card::before{
        height:5px;
    }

}