/* =========================================

   DANIELLE COWLEY COUNSELLING

   PROFESSIONAL WEBSITE DESIGN

   ========================================= */





/* COLOUR PALETTE */



:root {



    --dark-green: #29453e;



    --green: #466b61;



    --light-green: #dce8e2;



    --cream: #f8f5ef;



    --warm-white: #fffdf9;



    --text: #283632;



    --muted: #687671;



    --border: #d9e0dc;



    --accent: #b98262;



    --white: #ffffff;



}





/* BASIC RESET */



* {

    box-sizing: border-box;

}





html {

    scroll-behavior: smooth;

}





body {



    margin: 0;



    font-family:

        -apple-system,

        BlinkMacSystemFont,

        "Segoe UI",

        Arial,

        sans-serif;



    color: var(--text);



    background: var(--warm-white);



    line-height: 1.7;



}





/* LINKS */



a {

    color: inherit;

}





/* =========================================

   NAVIGATION

   ========================================= */



header {



    position: sticky;



    top: 0;



    z-index: 1000;



    background:

        rgba(255, 253, 249, 0.96);



    backdrop-filter: blur(12px);



    border-bottom:

        1px solid var(--border);



}





.navbar {



    width: min(92%, 1120px);



    min-height: 78px;



    margin: auto;



    display: flex;



    align-items: center;



    justify-content: space-between;



}





.logo {



    color: var(--dark-green);



    font-size: 20px;



    font-weight: 700;



    letter-spacing: -0.5px;



    text-decoration: none;



}





.nav-links {



    display: flex;



    align-items: center;



    gap: 28px;



}





.nav-links a {



    color: var(--text);



    font-size: 14px;



    text-decoration: none;



    transition: 0.2s ease;



}





.nav-links a:hover {



    color: var(--accent);



}





.nav-contact {



    padding:

        9px 18px;



    border:

        1px solid var(--dark-green);



    border-radius: 30px;



}





.menu-button {



    display: none;



    background: none;



    border: none;



    color: var(--dark-green);



    font-size: 26px;



    cursor: pointer;



}





/* =========================================

   HERO

   ========================================= */



.hero {



    min-height: 720px;



    padding:

        100px 5%;



    display: grid;



    grid-template-columns:

        1.15fr

        0.85fr;



    gap: 80px;



    align-items: center;



    background:



        radial-gradient(

            circle at 85% 20%,

            rgba(220,232,226,0.75),

            transparent 30%

        ),



        var(--cream);



}





.hero-content {



    max-width: 760px;



}





.eyebrow {



    margin: 0 0 15px;



    color: var(--accent);



    font-size: 12px;



    font-weight: 800;



    letter-spacing: 2.2px;



}





h1 {



    margin:

        10px 0 25px;



    color: var(--dark-green);



    font-size:

        clamp(44px, 6vw, 76px);



    line-height: 1.03;



    letter-spacing: -3px;



}





.hero-text {



    max-width: 650px;



    color: var(--muted);



    font-size: 19px;



}





.buttons {



    display: flex;



    flex-wrap: wrap;



    gap: 13px;



    margin:

        32px 0 15px;



}





.button {



    display: inline-block;



    padding:

        13px 23px;



    border-radius: 40px;



    font-size: 15px;



    font-weight: 700;



    text-decoration: none;



    border: none;



    cursor: pointer;



    transition:

        transform 0.2s ease,

        box-shadow 0.2s ease;



}





.button:hover {



    transform: translateY(-2px);



}





.primary {



    background: var(--dark-green);



    color: var(--white);



    box-shadow:

        0 8px 20px rgba(41,69,62,0.18);



}





.primary:hover {



    box-shadow:

        0 12px 25px rgba(41,69,62,0.25);



}





.secondary {



    color: var(--dark-green);



    border:

        1px solid var(--dark-green);



    background:

        transparent;



}





.small-text {



    color: var(--muted);



    font-size: 13px;



}





/* HERO CARD */



.hero-box {



    padding: 48px;



    background:

        rgba(255,255,255,0.9);



    border:

        1px solid var(--border);



    border-radius: 28px;



    box-shadow:

        0 25px 60px rgba(38,57,51,0.10);



}





.leaf {



    width: 64px;



    height: 64px;



    display: grid;



    place-items: center;



    margin-bottom: 25px;



    border-radius: 50%;



    background: var(--light-green);



    color: var(--green);



    font-size: 26px;



}





.hero-box h2 {



    color: var(--dark-green);



    font-size: 32px;



    line-height: 1.15;



}





/* =========================================

   TRUST BAR

   ========================================= */



.trust {



    display: grid;



    grid-template-columns:

        repeat(4, 1fr);



    gap: 15px;



    padding:

        21px 5%;



    background:

        var(--dark-green);



    color: var(--white);



    text-align: center;



    font-size: 14px;



}





/* =========================================

   SECTIONS

   ========================================= */



.section {



    padding:

        105px 5%;



}





.light {



    background:

        var(--cream);



}





.container {



    width:

        min(92%, 1120px);



    margin:

        auto;



}





.two-columns {



    width:

        min(92%, 1120px);



    margin:

        auto;



    display:

        grid;



    grid-template-columns:

        1fr 1fr;



    gap:

        80px;



}





.section h2 {



    margin:

        0 0 25px;



    color:

        var(--dark-green);



    font-size:

        clamp(32px, 4vw, 50px);



    line-height:

        1.1;



}





.text {



    color:

        var(--muted);



    font-size:

        17px;



}





/* =========================================

   HIGHLIGHT BOX

   ========================================= */



.highlight {



    margin-top:

        28px;



    padding:

        20px 22px;



    background:

        #fff0e7;



    border-left:

        4px solid var(--accent);



    border-radius:

        0 12px 12px 0;



    color:

        var(--text);



}





.highlight p {



    margin-bottom:

        0;



}





/* =========================================

   SERVICE CARDS

   ========================================= */



.cards {



    display:

        grid;



    grid-template-columns:

        repeat(4, 1fr);



    gap:

        20px;



    margin-top:

        45px;



}





.card {



    min-height:

        255px;



    padding:

        30px;



    background:

        var(--white);



    border:

        1px solid var(--border);



    border-radius:

        20px;



    transition:

        transform 0.2s ease,

        box-shadow 0.2s ease;



}





.card:hover {



    transform:

        translateY(-5px);



    box-shadow:

        0 15px 35px rgba(40,60,54,0.09);



}





.card span {



    color:

        var(--accent);



    font-size:

        12px;



    font-weight:

        800;



    letter-spacing:

        1px;



}





.card h3 {



    margin:

        15px 0 10px;



    color:

        var(--dark-green);



    font-size:

        21px;



}





.card p {



    margin:

        0;



    color:

        var(--muted);



    font-size:

        15px;



}





/* =========================================

   PRICE CARD

   ========================================= */



.price-card {



    padding:

        45px;



    background:

        var(--light-green);



    border-radius:

        28px;



    display:

        flex;



    flex-direction:

        column;



    gap:

        10px;



    box-shadow:

        0 15px 35px rgba(40,60,54,0.07);



}





.price-card p {



    margin:

        0;



    color:

        var(--green);



    font-weight:

        700;



}





.price-card strong {



    color:

        var(--dark-green);



    font-size:

        58px;



    line-height:

        1;



}





.price-card span {



    margin-bottom:

        20px;



    color:

        var(--muted);



}





/* =========================================

   FAQ

   ========================================= */



.faq {



    width:

        min(92%, 850px);



    margin:

        auto;



}





details {



    padding:

        24px 0;



    border-top:

        1px solid var(--border);



}





details:last-child {



    border-bottom:

        1px solid var(--border);



}





summary {



    color:

        var(--dark-green);



    font-size:

        17px;



    font-weight:

        700;



    cursor:

        pointer;



}





details p {



    max-width:

        750px;



    margin-top:

        15px;



    color:

        var(--muted);



}





/* =========================================

   CONTACT

   ========================================= */



.contact {



    padding:

        105px 5%;



    background:

        var(--dark-green);



    color:

        white;



}





.contact-grid {



    width:

        min(92%, 1120px);



    margin:

        auto;



    display:

        grid;



    grid-template-columns:

        1fr 1fr;



    gap:

        80px;



}





.contact h2 {



    margin:

        0 0 25px;



    font-size:

        clamp(34px, 4vw, 52px);



    line-height:

        1.1;



}





.contact .eyebrow {



    color:

        #e6ae8e;



}





.contact p {



    color:

        #d9e3df;



}





.contact-details {



    margin-top:

        35px;



}





.contact-details strong {



    color:

        white;



}





.contact-details a {



    color:

        white;



    text-decoration:

        none;



}





.contact-details a:hover {



    color:

        #e6ae8e;



}





/* CONTACT FORM */



.contact-form {



    padding:

        32px;



    background:

        white;



    color:

        var(--text);



    border-radius:

        24px;



    box-shadow:

        0 20px 50px rgba(0,0,0,0.15);



}





.contact-form label {



    display:

        block;



    margin:

        14px 0 6px;



    font-weight:

        700;



}





.contact-form input,

.contact-form textarea {



    width:

        100%;



    padding:

        13px 14px;



    border:

        1px solid var(--border);



    border-radius:

        10px;



    background:

        #fff;



    color:

        var(--text);



    font:

        inherit;



}





.contact-form textarea {



    resize:

        vertical;



}





.contact-form input:focus,

.contact-form textarea:focus {



    outline:

        3px solid rgba(185,130,98,0.20);



    border-color:

        var(--accent);



}





.contact-form .button {



    width:

        100%;



    margin-top:

        10px;



}





.form-warning {



    color:

        var(--muted) !important;



    font-size:

        12px;



}





/* =========================================

   EMERGENCY NOTICE

   ========================================= */



.emergency {



    padding:

        25px 5%;



    background:

        #f1ece6;



}





.emergency div {



    width:

        min(92%, 1120px);



    margin:

        auto;



}





.emergency strong {



    color:

        var(--dark-green);



}





.emergency p {



    margin:

        5px 0 0;



}





/* =========================================

   FOOTER

   ========================================= */



footer {



    padding:

        45px 5% 25px;



    background:

        #1d302b;



    color:

        white;



}





.footer-content {



    width:

        min(92%, 1120px);



    margin:

        auto;



    display:

        flex;



    justify-content:

        space-between;



    gap:

        30px;



}





.footer-content strong {



    font-size:

        17px;



}





.footer-content p {



    color:

        #b9c7c2;



}





.footer-links {



    display:

        flex;



    flex-wrap:

        wrap;



    gap:

        20px;



    align-items:

        center;



}





.footer-links a {



    color:

        #e4ebe8;



    font-size:

        14px;



    text-decoration:

        none;



}





.footer-links a:hover {



    color:

        #e6ae8e;



}





.copyright {



    width:

        min(92%, 1120px);



    margin:

        35px auto 0;



    padding-top:

        18px;



    border-top:

        1px solid rgba(255,255,255,0.15);



    color:

        #aab8b3;



    font-size:

        12px;



}





/* =========================================

   TABLET

   ========================================= */



@media (max-width: 900px) {





    .hero {



        grid-template-columns:

            1fr;



        gap:

            45px;



    }





    .two-columns {



        grid-template-columns:

            1fr;



        gap:

            35px;



    }





    .cards {



        grid-template-columns:

            1fr 1fr;



    }





    .contact-grid {



        grid-template-columns:

            1fr;



        gap:

            45px;



    }





}





/* =========================================

   MOBILE

   ========================================= */



@media (max-width: 650px) {





    .navbar {



        min-height:

            70px;



    }





    .menu-button {



        display:

            block;



    }





    .nav-links {



        display:

            none;



        position:

            absolute;



        top:

            70px;



        left:

            0;



        right:

            0;



        padding:

            20px 5%;



        background:

            var(--warm-white);



        border-bottom:

            1px solid var(--border);



        flex-direction:

            column;



        align-items:

            stretch;



    }





    .nav-links.open {



        display:

            flex;



    }





    .nav-links a {



        padding:

            8px 0;



    }





    .hero {



        min-height:

            auto;



        padding:

            70px 5%;



    }





    h1 {



        font-size:

            45px;



        letter-spacing:

            -2px;



    }





    .hero-box {



        padding:

            30px;



    }





    .trust {



        grid-template-columns:

            1fr;



        text-align:

            left;



    }





    .section,

    .contact {



        padding:

            75px 5%;



    }





    .cards {



        grid-template-columns:

            1fr;



    }





    .footer-content {



        flex-direction:

            column;



    }





}

/* DANIELLE'S PHOTO */

.about-photo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-photo img {
    width: 100%;
    max-width: 430px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 20px 45px rgba(40, 60, 54, 0.12);
}