/* =========================================================
   THE KELSEY GRANT - MAIN STYLESHEET
   PART 1
   - Design System
   - Reset
   - Typography
   - Layout Foundations
   - Navigation
   - Hero
   - Buttons
   - Mission
   - Kelsey's Story
========================================================= */


/* =========================================================
   DESIGN SYSTEM (GLOBAL VARIABLES)
========================================================= */

:root{

    --purple:#6E3CBC;
    --teal:#22B7B7;
    --dark:#1E1E1E;
    --light:#F5F7FA;
    --white:#FFFFFF;

    --shadow-light:0 10px 30px rgba(0,0,0,0.08);
    --shadow-hover:0 20px 50px rgba(0,0,0,0.12);

    --radius:0px;

    --transition:.3s ease;

}


/* =========================================================
   RESET + BASE STYLES
========================================================= */

ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

html{
    scroll-behavior:smooth;
}

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

p{
    margin-bottom:18px;
}


/* =========================================================
   CONTAINER SYSTEM
========================================================= */

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


/* =========================================================
   SECTION BASE STYLES
========================================================= */

.section{
    padding:100px 0;
}

.section-header{
    text-align:center;
    max-width:750px;
    margin:0 auto 60px auto;
}

.section-header h2{
    font-size:2.2rem;
    color:var(--purple);
    margin-bottom:15px;
}

.section-header p{
    color:#666;
}


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

.nav{
    position:sticky;
    top:0;
    background:var(--white);
    border-bottom:1px solid #eee;
    z-index:999;
}

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

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


/* NAV LINKS */

.links{
    display:flex;
    gap:25px;
}

.links a{
    text-decoration:none;
    color:var(--dark);
    font-weight:500;
    position:relative;
    transition:var(--transition);
}

/* hover */
.links a:hover{
    color:var(--purple);
}

/* active state (JS will control this) */
.links a.active{
    color:var(--purple);
}

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


/* =========================================================
   HAMBURGER MENU
========================================================= */


.hamburger{
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    width:30px;
    background:none;
    border:none;
}

.hamburger span{
    height:3px;
    background:var(--dark);
    border-radius:5px;
    transition:var(--transition);
}

/* X animation */
.hamburger.active span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2){
    opacity:0;
}

.hamburger.active span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}


/* mobile nav dropdown */
.links.active{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:80px;
    left:0;
    right:0;
    background:var(--white);
    padding:20px;
    border-bottom:1px solid #eee;
}


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

.hero{
    padding:100px 0;
}

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

.hero-tag{
    display:inline-block;
    background:var(--light);
    padding:6px 12px;
    border-radius:20px;
    font-size:0.85rem;
    margin-bottom:15px;
}

.hero h1{
    font-size:3.2rem;
    line-height:1.1;
    color:var(--purple);
    margin-bottom:20px;
}

.hero-image img{
    width:100%;
    height:auto;
    display:block;
    border-radius:0px;
}


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

.btn{
    display:inline-block;
    padding:12px 22px;
    border-radius:4px;
    text-decoration:none;
    font-weight:600;
    transition:var(--transition);
    margin-right:15px;
    margin-top:20px;
    border:none;
    text-align: center;
}

/* primary button */
.btn.primary{
    background:var(--purple);
    color:var(--white);
}

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

/* outline button */
.btn.outline{
    border:2px solid var(--teal);
    color:var(--teal);
}

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

.btn:hover{
    transform:translateY(-3px) scale(1.02);
}

.btn:active{
    transform:translateY(0) scale(0.98);
}

/* =========================================================
   MISSION SECTION
========================================================= */

.mission{
    background:var(--purple);
    color:var(--white);
}

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

.mission p{
    max-width:800px;
    margin:0 auto 18px auto;
}

/* =========================================================
   MEET THE TEAM SECTION
========================================================= */

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

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

.team-card{
    background:var(--white);
    box-shadow:var(--shadow-light);
    padding:25px;
    text-align:center;
    transition:var(--transition);
}

.team-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-hover);
}

.team-image{
    width:160px;
    height:160px;
    margin:0 auto 20px auto;
    overflow:hidden;
    border-radius:50%;
    background:var(--light);
}

.team-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.team-card h3{
    color:var(--purple);
    margin-bottom:10px;
}

.team-card p{
    color:#555;
    margin-bottom:0;
}

.team-section{
    position:relative;
    overflow:hidden;
}

.team-section::before{
    content:"🐾";
    position:absolute;
    top:40px;
    left:5%;
    font-size:8rem;
    opacity:0.04;
    transform:rotate(-20deg);
    pointer-events:none;
}

.team-section::after{
    content:"🐾";
    position:absolute;
    bottom:40px;
    right:8%;
    font-size:6rem;
    opacity:0.04;
    transform:rotate(18deg);
    pointer-events:none;
}
/* =========================================================
   KELSEY STORY SECTION
========================================================= */

.kelsey-story{
    background:var(--light);
}

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

.story-image img{
    width:100%;
    height:auto;
    display:block;
}

.story-label{
    display:inline-block;
    font-size:0.85rem;
    color:var(--teal);
    font-weight:600;
    margin-bottom:10px;
    text-transform:uppercase;
}

.story-content h2{
    color:var(--purple);
    margin-bottom:15px;
}

.story-content p{
    margin-bottom:15px;
}

/* =========================================================
   THE KELSEY GRANT - MAIN STYLESHEET
   PART 2
   - Supported Causes
   - Events
   - News
   - Impact Stats
   - Contact CTA
   - OWL Creative Section
   - Footer
========================================================= */


/* =========================================================
   SUPPORTED CAUSES
========================================================= */

.supported-causes{
    background:var(--white);
}

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

/* CAUSE CARD */

.cause-card{
    background:var(--white);
    box-shadow:var(--shadow-light);
    padding:25px;
    display:flex;
    flex-direction:column;
    gap:15px;
    transition:var(--transition);
}

.cause-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-hover);
}

/* LOGO */

.cause-logo{
    width:100%;
    height:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.cause-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

/* TEXT */

.cause-card h3{
    color:var(--purple);
}

.cause-tag{
    font-size:0.85rem;
    font-weight:600;
    color:var(--teal);
    margin-top:auto;
}

/* BUTTON */

.cause-button{
    display:inline-block;
    text-align:center;
    padding:10px 16px;
    background:var(--purple);
    color:var(--white);
    text-decoration:none;
    font-weight:600;
    transition:var(--transition);
    border-radius: 4px;
}

.cause-button:hover{
    background:var(--teal);
    transform:translateY(-3px) scale(1.02);
}

/* hidden causes (View All JS toggle) */
.hidden-cause{
    display:none;
}

/* view all button wrapper */
.view-all-wrapper{
    text-align:center;
    margin-top:40px;
    
}

.supported-causes{
    position:relative;
    overflow:hidden;
}

.supported-causes::before{
    content:"🐾";
    position:absolute;
    top:40px;
    left:5%;
    font-size:8rem;
    opacity:0.04;
    transform:rotate(-20deg);
    pointer-events:none;
}

.supported-causes::after{
    content:"🐾";
    position:absolute;
    bottom:40px;
    right:8%;
    font-size:6rem;
    opacity:0.04;
    transform:rotate(18deg);
    pointer-events:none;
}



/* =========================================================
   EVENTS SECTION
========================================================= */

.events-section{
    background:var(--light);
    padding-top:80px;
    padding-bottom:80px;
}

.events-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:30px;
}

/* FEATURED EVENT */

.featured-event{
    background:var(--white);
    padding:25px;
    box-shadow:var(--shadow-light);
}

.featured-image img{
    width:100%;
    height:auto;
    display:block;
    margin-bottom:20px;
}

/* EVENT CARDS */

.event-column{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.event-card{
    background:var(--white);
    padding:20px;
    box-shadow:var(--shadow-light);
    transition:var(--transition);
}

.event-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-hover);
}

.event-date{
    color:var(--teal);
    font-weight:600;
    margin-bottom:10px;
}

.event-card h3{
    color:var(--purple);
    margin-bottom:10px;
}

.event-description{
    margin-bottom:15px;
}

.event-details{
    font-size:0.9rem;
    color:#555;
    display:flex;
    flex-direction:column;
    gap:6px;
}



/* =========================================================
   NEWS SECTION
========================================================= */

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

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

/* NEWS CARD */

.news-card{
    background:var(--white);
    box-shadow:var(--shadow-light);
    cursor:pointer;
    transition:var(--transition);
    overflow:hidden;
}

.news-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-hover);
}

.news-image img{
    width:100%;
    height:180px;
    object-fit:cover;
}

.news-content{
    padding:20px;
}

.news-tag{
    font-size:0.8rem;
    font-weight:600;
    color:var(--teal);
}

.news-date{
    font-size:0.85rem;
    color:#777;
    margin:5px 0;
}

.news-card h3{
    color:var(--purple);
    margin-bottom:10px;
}

.read-more{
    font-weight:600;
    color:var(--teal);
}


/* hidden news (JS load more) */
.hidden-news{
    display:none;
}

.news-section{
    position:relative;
    overflow:hidden;
}

.news-section::before{
    content:"🐾";
    position:absolute;
    top:40px;
    left:5%;
    font-size:8rem;
    opacity:0.04;
    transform:rotate(-20deg);
    pointer-events:none;
}

.news-section::after{
    content:"🐾";
    position:absolute;
    bottom:40px;
    right:8%;
    font-size:6rem;
    opacity:0.04;
    transform:rotate(18deg);
    pointer-events:none;
}

/* =========================================================
   IMPACT STATS
========================================================= */

.impact{
    background:var(--purple);
    color:var(--white);
    padding: 48px;
}

.impact h2, .impact p{
    color:var(--white);
}

.stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    text-align:center;
    gap:20px;
}

.number{
    font-size:4rem;
    font-weight:700;
    color:var(--teal);
}

.number{
    transition:transform .3s ease;
}

.stats div:hover .number{
    transform:scale(1.08);
}

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

.contact-cta{
    background:linear-gradient(135deg, var(--purple), var(--teal));
    color:var(--white);
    text-align:center;
    padding:100px 0;
}

.cta-tag{
    font-size:0.85rem;
    font-weight:600;
    opacity:0.9;
    text-transform:uppercase;
}

.cta-content h2{
    margin-top:10px;
    margin-bottom:15px;
    color:var(--white);
}

.cta-content p{
    max-width:700px;
    margin:0 auto 25px auto;
}


/* =========================================================
   OWL CREATIVE SECTION
========================================================= */

.owl-image img{
    width:200px;
    height:auto;
    justify-content:center;
    margin-top:20px;
}

.owl-credit{
    background:var(--light);
    padding:80px 0;
}

/* BUTTON */

.owl-btn{
    display:inline-block;
    text-align:center;
    padding:10px 16px;
    background:#707f4f;
    color:var(--white);
    text-decoration:none;
    font-weight:600;
    transition:var(--transition);
    border-radius: 4px;
}

.owl-btn:hover{
    background:#8a9ba8;
    transform:translateY(-3px) scale(1.02);
    
}

.owl-credit-card{
    background:#f6f2ed;
    padding:40px;
    text-align:center;
    box-shadow:var(--shadow-light);
    justify-content:center;
}

.owl-label{
    font-size:0.8rem;
    font-weight:600;
    color:#1e1f22;
    text-transform:uppercase;
}

.owl-credit-card h3{
    color:#707f4f;
    margin:10px 0;
}


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

footer{
    background:#111;
    color:var(--white);
    padding:60px 0;
    text-align:center;
}

.footer-social{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-bottom:20px;
}

.footer-social a{
    color:var(--white);
    text-decoration:none;
    font-weight:500;
    transition:var(--transition);
}

.footer-social a:hover{
    color:var(--teal);
}

.footer-privacy{
    max-width:700px;
    margin:0 auto 20px auto;
    font-size:0.9rem;
    opacity:0.8;
}

.footer-copyright{
    font-size:0.85rem;
    opacity:0.6;
}

/* =========================================================
   THE KELSEY GRANT - MAIN STYLESHEET
   PART 3
   - MODALS (News + Contact)
   - BACK TO TOP
   - ANIMATIONS
   - UTILITIES
   - RESPONSIVE POLISH
========================================================= */


/* =========================================================
   BACK TO TOP BUTTON
========================================================= */

.back-to-top{
    position:fixed;
    bottom:30px;
    right:30px;

    width:45px;
    height:45px;

    border:none;
    border-radius:50%;

    background:var(--purple);
    color:var(--white);

    font-size:18px;
    cursor:pointer;

    opacity:0;
    pointer-events:none;

    transition:var(--transition);

    z-index:9999;
}

.back-to-top.show{
    opacity:1;
    pointer-events:auto;
}

.back-to-top:hover{
    background:var(--teal);
    transform:translateY(-3px);
}


/* =========================================================
   MODALS (GLOBAL STRUCTURE)
========================================================= */

.modal{
    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:100%;

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

    z-index:10000;
}

.modal.active{
    display:flex;
}

/* overlay */
.modal-overlay{
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
}

/* modal box */
.modal-content{
    position:relative;
    background:var(--white);
    width:90%;
    max-width:800px;

    max-height:90vh;
    overflow-y:auto;

    padding:30px;

    box-shadow:var(--shadow-hover);
    z-index:2;
}

/* close button */
.modal-close{
    position:absolute;
    top:10px;
    right:15px;

    border:none;
    background:none;

    font-size:28px;
    cursor:pointer;
    color:var(--dark);
}


/* =========================================================
   NEWS MODAL
========================================================= */

.modal-image img{
    width:100%;
    height:auto;
    margin-bottom:20px;
}

.modal-body h2{
    color:var(--purple);
    margin-bottom:10px;
}

.modal-date{
    font-size:0.85rem;
    color:#777;
    margin-bottom:10px;
}


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

/* MODAL BACKDROP */
.modal{
    position:fixed;
    inset:0;
    display:none;
    z-index:9999;
}

/* SHOW STATE */
.modal.active{
    display:block;
}

/* DARK OVERLAY */
.modal-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.6);
}

/* MODAL BOX */
.modal-content{
    position:relative;
    background:white;
    width:90%;
    max-width:600px;
    margin:80px auto;
    padding:40px;

    border-radius:12px;

    z-index:2;

    animation:fadeUp 0.3s ease;
}

/* CLOSE BUTTON */
.modal-close{
    position:absolute;
    top:15px;
    right:15px;

    background:none;
    border:none;
    font-size:20px;
    cursor:pointer;
}

/* SIMPLE ANIMATION */
@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* CONTACT FORM INSIDE MODAL */
.contact-form{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:20px;
}

.contact-form input,
.contact-form textarea{
    padding:12px 14px;
    border:1px solid #ddd;
    border-radius:4px;
    font-family:'Outfit', sans-serif;
}

.contact-form button{
    margin-top:10px;
    cursor:pointer;
}

/* =========================================================
   FADE IN ANIMATION (SCROLL EFFECT)
========================================================= */

.fade-in{
    opacity:0;
    transform:translateY(30px);
    transition:all 0.6s ease;
}

.fade-in.visible{
    opacity:1;
    transform:translateY(0);
}


/* =========================================================
   RESPONSIVE DESIGN
========================================================= */

/* TABLET */
@media(max-width:1024px){

    .hero-grid,
    .story-grid,
    .events-grid{
        grid-template-columns:1fr;
    }

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

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

}


/* MOBILE */
@media(max-width:768px){

    /* NAVIGATION */
    .links{
        display:none;
    }

    .hamburger{
        display:flex;
    }

    .links.active{
        display:flex;
        flex-direction:column;
        position:absolute;
        top:80px;
        left:0;
        right:0;

        background:var(--white);
        padding:20px;

        border-bottom:1px solid #eee;
    }

    /* HERO TEXT */
    .hero h1{
        font-size:2.2rem;
    }

    /* GRID FIXES */
    .causes-grid,
    .news-grid{
        grid-template-columns:1fr;
    }

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

    /* BUTTON STACKING */
    .btn{
        display:block;
        width:100%;
        margin-bottom:10px;
    }

    .hero-buttons{
        display:flex;
        flex-direction:column;
        gap:10px;
    }

}


/* =========================================================
   UTILITY CLASSES
========================================================= */

.hidden{
    display:none !important;
}

.no-scroll{
    overflow:hidden;
}

/* =========================================================
   Animations
========================================================= */
.hero-image{
    animation:heroFloat 6s ease-in-out infinite;
}

@keyframes heroFloat{
    0%, 100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-12px);
    }
}

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

.hero-tag::after{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.8),
        transparent
    );
    animation:tagShimmer 4s ease-in-out infinite;
}

@keyframes tagShimmer{
    0%{
        left:-100%;
    }
    50%{
        left:100%;
    }
    100%{
        left:100%;
    }
}

.cause-card,
.event-card,
.news-card,
.team-card{
    transform-style:preserve-3d;
}

.cause-card:hover,
.event-card:hover,
.news-card:hover,
.team-card:hover{
    transform:translateY(-8px) rotate(0.4deg);
}

.modal.active .modal-content{
    animation:modalPop .35s ease forwards;
}

@keyframes modalPop{
    from{
        opacity:0;
        transform:translateY(24px) scale(0.96);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce){

    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }

}

/* =========================================================
   RESPONSIVE LAYOUT + MOTION REFINEMENT
   Keeps the existing content and visual identity intact.
========================================================= */

:root{
    --container-max:1480px;
    --container-gutter:clamp(20px, 4vw, 72px);
    --section-space:clamp(72px, 8vw, 132px);
    --grid-gap:clamp(24px, 3vw, 52px);
    --transition-fast:180ms cubic-bezier(.2,.7,.2,1);
    --transition-smooth:360ms cubic-bezier(.2,.7,.2,1);
}

body{
    overflow-x:hidden;
    font-size:clamp(1rem, .96rem + .12vw, 1.1rem);
}

img{
    max-width:100%;
}

.container{
    width:min(calc(100% - (var(--container-gutter) * 2)), var(--container-max));
    max-width:none;
}

.section,
.hero,
.contact-cta{
    padding-block:var(--section-space);
}

.events-section{
    padding-block:clamp(72px, 7vw, 112px);
}

.section-header{
    max-width:850px;
    margin-bottom:clamp(38px, 5vw, 68px);
}

.section-header h2,
.story-content h2,
.cta-content h2{
    font-size:clamp(2rem, 1.55rem + 1.5vw, 3.25rem);
    line-height:1.12;
}

.nav{
    box-shadow:0 1px 0 rgba(30,30,30,.04);
}

.nav-inner{
    height:clamp(76px, 6vw, 92px);
}

.nav-logo img{
    height:clamp(54px, 4.4vw, 70px);
}

.links{
    gap:clamp(16px, 1.6vw, 28px);
}

.links a,
.btn,
.cause-button,
.owl-btn,
.back-to-top,
.hamburger span{
    transition-duration:var(--transition-fast);
    transition-timing-function:cubic-bezier(.2,.7,.2,1);
}

.links a:focus-visible,
.btn:focus-visible,
.cause-button:focus-visible,
.owl-btn:focus-visible,
.hamburger:focus-visible,
.back-to-top:focus-visible,
.modal-close:focus-visible{
    outline:3px solid var(--teal);
    outline-offset:4px;
}

.hero-grid{
    grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
    gap:clamp(40px, 6vw, 96px);
}

.hero-text{
    max-width:680px;
}

.hero h1{
    font-size:clamp(3rem, 2rem + 3vw, 5.5rem);
    letter-spacing:-.035em;
    max-width:12ch;
}

.hero-text > p{
    max-width:62ch;
}

.hero-image{
    animation:none;
}

.hero-image img,
.story-image img{
    width:100%;
    max-height:720px;
    object-fit:cover;
}

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

.btn{
    margin-right:0;
    min-height:48px;
    padding:12px 24px;
}

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

.mission p{
    max-width:980px;
    font-size:clamp(1.05rem, .94rem + .35vw, 1.3rem);
}

.team-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:var(--grid-gap);
}

.team-card,
.cause-card,
.featured-event,
.event-card,
.news-card{
    border:1px solid rgba(30,30,30,.07);
    box-shadow:0 12px 34px rgba(30,30,30,.07);
}

.team-card,
.cause-card{
    padding:clamp(24px, 2.4vw, 38px);
}

.team-image{
    width:clamp(150px, 13vw, 200px);
    height:clamp(150px, 13vw, 200px);
}

.story-grid{
    grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
    gap:clamp(40px, 7vw, 108px);
}

.story-content{
    max-width:680px;
}

.causes-grid,
.news-grid{
    gap:var(--grid-gap);
}

.events-grid{
    gap:var(--grid-gap);
    grid-template-columns:minmax(0, 1.7fr) minmax(320px, 1fr);
}

.featured-event,
.event-card,
.news-content{
    padding:clamp(22px, 2.2vw, 34px);
}

.news-image img{
    height:clamp(190px, 16vw, 280px);
}

.stats{
    gap:clamp(28px, 5vw, 80px);
}

.number{
    font-size:clamp(3rem, 2.2rem + 2.5vw, 5rem);
}

.owl-credit-card{
    padding:clamp(32px, 5vw, 68px);
}

.fade-in{
    transform:translateY(22px);
    transition:opacity 600ms cubic-bezier(.2,.7,.2,1), transform 600ms cubic-bezier(.2,.7,.2,1);
}

.cause-card,
.event-card,
.news-card,
.team-card{
    transform-style:flat;
    transition:transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

@media (hover:hover) and (pointer:fine){
    .cause-card:hover,
    .event-card:hover,
    .news-card:hover,
    .team-card:hover{
        transform:translateY(-6px);
        border-color:rgba(110,60,188,.18);
        box-shadow:0 22px 52px rgba(30,30,30,.12);
    }
}

/* Tablets and compact laptops use the uncluttered mobile navigation. */
@media (max-width:1100px){
    .links{
        display:flex;
        position:fixed;
        inset:var(--nav-height, 80px) 0 auto;
        flex-direction:column;
        gap:0;
        padding:12px var(--container-gutter) 24px;
        background:rgba(255,255,255,.98);
        border-bottom:1px solid #eee;
        box-shadow:0 18px 40px rgba(30,30,30,.1);
        opacity:0;
        visibility:hidden;
        transform:translateY(-12px);
        pointer-events:none;
        transition:opacity var(--transition-smooth), transform var(--transition-smooth), visibility var(--transition-smooth);
    }

    .links.active{
        display:flex;
        top:clamp(76px, 6vw, 92px);
        opacity:1;
        visibility:visible;
        transform:translateY(0);
        pointer-events:auto;
    }

    .links a{
        padding:13px 0;
        border-bottom:1px solid rgba(30,30,30,.07);
    }

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

    .links a.active::after{
        display:none;
    }

    .hamburger{
        display:flex;
        width:38px;
        padding:7px 4px;
        gap:5px;
    }

    .hero-grid,
    .story-grid{
        grid-template-columns:1fr 1fr;
        gap:clamp(30px, 5vw, 60px);
    }

    .hero h1{
        font-size:clamp(2.7rem, 5vw, 4.2rem);
    }

    .team-grid{
        gap:24px;
    }

    .events-grid{
        grid-template-columns:1.35fr 1fr;
    }
}

@media (max-width:860px){
    .hero-grid,
    .story-grid,
    .events-grid{
        grid-template-columns:1fr;
    }

    .hero-text,
    .story-content{
        max-width:760px;
    }

    .hero h1{
        max-width:14ch;
    }

    .hero-image img,
    .story-image img{
        max-height:620px;
    }

    .team-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .causes-grid,
    .news-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:600px){
    :root{
        --container-gutter:20px;
    }

    .nav-logo img{
        height:52px;
    }

    .hero{
        padding-top:56px;
    }

    .hero h1{
        font-size:clamp(2.35rem, 11vw, 3.25rem);
    }

    .hero-buttons{
        flex-direction:column;
    }

    .btn{
        width:100%;
        margin:0;
    }

    .team-grid,
    .causes-grid,
    .news-grid,
    .stats{
        grid-template-columns:1fr;
    }

    .team-card,
    .cause-card,
    .featured-event,
    .event-card,
    .news-content,
    .modal-content{
        padding:22px;
    }

    .impact{
        padding:64px 20px;
    }

    .back-to-top{
        right:18px;
        bottom:18px;
    }
}

/* =========================================================
   PAW-PRINT MOTIF
   Replaces the abstract circles with subject-specific marks.
   Text presentation keeps the paws monochrome and brand-led.
========================================================= */

.hero::before,
.mission::before,
.contact-cta::before,
.contact-cta::after,
.events-section::after,
footer::after{
    content:"\1F43E\FE0E";
    width:auto;
    height:auto;
    aspect-ratio:auto;
    border:0;
    border-radius:0;
    background:none;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:400;
    line-height:1;
    pointer-events:none;
}

/* Outlined paws */
.hero::before,
.contact-cta::before,
footer::after{
    color:transparent;
    opacity:1;
    -webkit-text-stroke:clamp(2px, .28vw, 5px) currentColor;
}

.hero::before{
    left:-2%;
    bottom:-10%;
    font-size:clamp(13rem, 28vw, 31rem);
    color:rgba(34,183,183,.10);
    -webkit-text-fill-color:transparent;
    transform:rotate(-18deg);
}

.contact-cta::before{
    top:-24%;
    right:-3%;
    font-size:clamp(13rem, 27vw, 29rem);
    color:rgba(255,255,255,.10);
    -webkit-text-fill-color:transparent;
    transform:rotate(18deg);
}

footer::after{
    right:-2%;
    bottom:-36%;
    font-size:clamp(12rem, 23vw, 24rem);
    color:rgba(34,183,183,.13);
    -webkit-text-fill-color:transparent;
    transform:rotate(16deg);
}

/* Solid paws */
.mission::before{
    top:-30%;
    right:3%;
    font-size:clamp(12rem, 23vw, 24rem);
    color:rgba(255,255,255,.055);
    transform:rotate(20deg);
}

.contact-cta::after{
    left:-3%;
    bottom:-37%;
    font-size:clamp(11rem, 21vw, 22rem);
    color:rgba(34,183,183,.15);
    opacity:1;
    transform:rotate(-20deg);
}

.events-section::after{
    top:-24%;
    left:-4%;
    font-size:clamp(11rem, 21vw, 22rem);
    color:rgba(110,60,188,.065);
    transform:rotate(-22deg);
}

.impact::before{
    content:"\1F43E\FE0E";
    position:absolute;
    right:-3%;
    bottom:-34%;
    font-family:Arial, Helvetica, sans-serif;
    font-size:clamp(12rem, 23vw, 24rem);
    line-height:1;
    color:rgba(34,183,183,.08);
    transform:rotate(18deg);
    pointer-events:none;
}

.hero-grid,
.mission .container,
.impact .container,
.events-section .container,
.contact-cta .container,
footer .container{
    position:relative;
    z-index:1;
}

@media (max-width:600px){
    .hero::before{
        left:-22%;
        bottom:-3%;
        font-size:15rem;
    }

    .mission::before{
        top:-5%;
        right:-24%;
        font-size:13rem;
    }

    .contact-cta::before{
        top:-4%;
        right:-28%;
        font-size:14rem;
    }

    .contact-cta::after{
        left:-28%;
        bottom:-16%;
        font-size:13rem;
    }

    footer::after{
        right:-30%;
        bottom:-12%;
        font-size:13rem;
    }
}

/* =========================================================
   CLOSING SECTIONS
   Contact, studio credit, and footer are treated as one
   cohesive ending rather than three unrelated blocks.
========================================================= */

.contact-cta{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:var(--purple);
    padding-block:clamp(80px, 9vw, 140px);
}

.contact-cta::before,
.contact-cta::after{
    content:"";
    position:absolute;
    z-index:-1;
    border-radius:50%;
    pointer-events:none;
}

.contact-cta::before{
    width:clamp(280px, 36vw, 620px);
    aspect-ratio:1;
    top:-68%;
    right:-8%;
    border:clamp(45px, 6vw, 90px) solid rgba(255,255,255,.07);
}

.contact-cta::after{
    width:clamp(220px, 28vw, 480px);
    aspect-ratio:1;
    bottom:-72%;
    left:-6%;
    background:var(--teal);
    opacity:.16;
}

.cta-content{
    max-width:860px;
    margin-inline:auto;
}

.cta-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:7px 13px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:999px;
    letter-spacing:.09em;
}

.cta-tag::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--teal);
}

.cta-content h2{
    margin-top:20px;
    font-size:clamp(2.4rem, 1.7rem + 2.5vw, 4.5rem);
    letter-spacing:-.03em;
}

.cta-content p{
    max-width:720px;
    margin-bottom:30px;
    font-size:clamp(1.05rem, .96rem + .3vw, 1.25rem);
    color:rgba(255,255,255,.88);
}

.contact-cta .btn.primary{
    min-width:150px;
    background:var(--white);
    color:var(--purple);
    box-shadow:0 12px 28px rgba(30,30,30,.18);
}

.contact-cta .btn.primary:hover{
    background:var(--teal);
    color:var(--dark);
}

.owl-credit{
    position:relative;
    padding-block:clamp(56px, 6vw, 88px);
    background:linear-gradient(180deg, #f5f7fa 0%, #eef1f5 100%);
}

.owl-credit-card{
    display:grid;
    grid-template-columns:minmax(160px, .38fr) minmax(280px, 1fr) auto;
    grid-template-areas:
        "image label button"
        "image title button"
        "image copy button";
    align-items:center;
    column-gap:clamp(28px, 4vw, 64px);
    row-gap:2px;
    max-width:1180px;
    margin-inline:auto;
    padding:clamp(28px, 4vw, 52px);
    text-align:left;
    border:1px solid rgba(30,30,30,.08);
    border-left:5px solid #707f4f;
    box-shadow:0 14px 40px rgba(30,30,30,.07);
}

.owl-label{
    grid-area:label;
    letter-spacing:.08em;
}

.owl-image{
    grid-area:image;
    text-align:center;
}

.owl-image img{
    width:min(100%, 200px);
    margin-top:0;
}

.owl-credit-card h3{
    grid-area:title;
    margin:5px 0;
    font-size:clamp(1.35rem, 1.1rem + .6vw, 1.85rem);
}

.owl-credit-card p{
    grid-area:copy;
    max-width:52ch;
    margin-bottom:0;
    color:#555;
}

.owl-btn{
    grid-area:button;
    white-space:nowrap;
    padding:12px 20px;
}

footer{
    position:relative;
    overflow:hidden;
    padding-block:clamp(50px, 6vw, 84px);
    background:#321861;
    text-align:left;
}

footer::after{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    right:-180px;
    bottom:-255px;
    border:58px solid rgba(34,183,183,.12);
    border-radius:50%;
    pointer-events:none;
}

footer .container{
    display:grid;
    grid-template-columns:minmax(300px, 1.4fr) minmax(220px, .6fr);
    grid-template-areas:
        "privacy social"
        "copyright social";
    align-items:end;
    gap:22px clamp(40px, 7vw, 110px);
}

.footer-privacy{
    grid-area:privacy;
    max-width:670px;
    margin:0;
    font-size:clamp(.9rem, .86rem + .12vw, 1rem);
    opacity:.82;
}

.footer-privacy p,
.footer-copyright p{
    margin-bottom:0;
}

.footer-social{
    grid-area:social;
    justify-content:flex-end;
    align-self:center;
    margin-bottom:0;
    gap:10px;
}

.footer-social a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:10px 17px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    transition:background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.footer-social a:hover{
    color:var(--white);
    background:rgba(34,183,183,.22);
    border-color:var(--teal);
    transform:translateY(-2px);
}

.footer-social a:focus-visible{
    outline:3px solid var(--teal);
    outline-offset:3px;
}

.footer-copyright{
    grid-area:copyright;
    opacity:.62;
}

@media (max-width:900px){
    .owl-credit-card{
        grid-template-columns:150px 1fr;
        grid-template-areas:
            "image label"
            "image title"
            "image copy"
            "image button";
    }

    .owl-btn{
        justify-self:start;
        margin-top:14px;
        white-space:normal;
    }
}

@media (max-width:680px){
    .owl-credit-card{
        grid-template-columns:1fr;
        grid-template-areas:
            "image"
            "label"
            "title"
            "copy"
            "button";
        gap:10px;
        text-align:center;
        border-left:1px solid rgba(30,30,30,.08);
        border-top:5px solid #707f4f;
    }

    .owl-image img{
        width:160px;
        margin-bottom:10px;
    }

    .owl-credit-card p{
        margin-inline:auto;
    }

    .owl-btn{
        justify-self:stretch;
        margin-top:12px;
    }

    footer .container{
        grid-template-columns:1fr;
        grid-template-areas:
            "social"
            "privacy"
            "copyright";
        text-align:center;
    }

    .footer-social{
        justify-content:center;
        margin-bottom:10px;
    }

    .footer-privacy{
        margin-inline:auto;
    }
}

/* =========================================================
   UPPER + MIDDLE SECTION REFINEMENT
   Extends the closing section's visual language throughout.
========================================================= */

.hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:linear-gradient(135deg, #fff 0%, #fff 62%, #f2ecfb 100%);
}

.hero::before{
    content:"";
    position:absolute;
    z-index:-1;
    width:clamp(260px, 34vw, 620px);
    aspect-ratio:1;
    left:-17%;
    bottom:-58%;
    border:clamp(45px, 6vw, 90px) solid rgba(34,183,183,.08);
    border-radius:50%;
}

.hero-tag{
    padding:8px 14px;
    color:var(--purple);
    background:rgba(110,60,188,.08);
    border:1px solid rgba(110,60,188,.12);
    border-radius:999px;
    font-weight:600;
}

.hero-tag::before{
    content:"";
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:8px;
    border-radius:50%;
    background:var(--teal);
    vertical-align:middle;
}

.hero-tag::after{
    display:none;
}

.hero-image{
    position:relative;
    padding:0 clamp(10px, 1.4vw, 22px) clamp(10px, 1.4vw, 22px) 0;
}

.hero-image::after{
    content:"";
    position:absolute;
    z-index:-1;
    inset:clamp(14px, 2vw, 28px) 0 0 clamp(14px, 2vw, 28px);
    background:var(--teal);
}

.hero-image img{
    box-shadow:0 24px 60px rgba(30,30,30,.16);
}

.section-header h2::after{
    content:"";
    display:block;
    width:52px;
    height:4px;
    margin:18px auto 0;
    border-radius:999px;
    background:var(--teal);
}

.mission{
    position:relative;
    overflow:hidden;
    background:#4e278d;
}

.mission::before{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    top:-285px;
    right:4%;
    border:60px solid rgba(255,255,255,.06);
    border-radius:50%;
}

.mission .section-header{
    margin-bottom:30px;
}

.mission .section-header h2::after{
    background:var(--teal);
}

.mission-content{
    position:relative;
    padding-top:26px;
    border-top:1px solid rgba(255,255,255,.16);
}

.team-section::before,
.team-section::after,
.supported-causes::before,
.supported-causes::after,
.news-section::before,
.news-section::after{
    display:none;
}

.team-section{
    background:linear-gradient(180deg, #fff 0%, #fbfbfd 100%);
}

.team-card{
    position:relative;
    overflow:hidden;
    border-top:5px solid var(--purple);
}

.team-card:nth-child(2){
    border-top-color:var(--teal);
}

.team-image{
    border:6px solid #f1edf8;
    box-shadow:0 0 0 1px rgba(110,60,188,.12);
}

.story-image{
    position:relative;
    padding:clamp(12px, 1.5vw, 22px) 0 0 clamp(12px, 1.5vw, 22px);
}

.story-image::before{
    content:"";
    position:absolute;
    z-index:0;
    inset:0 clamp(12px, 1.5vw, 22px) clamp(12px, 1.5vw, 22px) 0;
    border:2px solid rgba(110,60,188,.22);
}

.story-image img{
    position:relative;
    z-index:1;
    box-shadow:0 20px 50px rgba(30,30,30,.12);
}

.story-label,
.cause-tag,
.news-tag,
.event-date{
    letter-spacing:.07em;
    text-transform:uppercase;
}

.story-label{
    padding:6px 11px;
    border-radius:999px;
    background:rgba(34,183,183,.1);
}

.impact{
    position:relative;
    overflow:hidden;
    padding-block:clamp(72px, 7vw, 110px);
    background:#321861;
}

.impact .section-header{
    margin-bottom:clamp(36px, 4vw, 58px);
}

.impact .section-header h2::after{
    background:var(--teal);
}

.stats > div{
    padding:clamp(22px, 3vw, 42px);
    border:1px solid rgba(255,255,255,.13);
    background:rgba(255,255,255,.045);
}

.stats > div p{
    margin-bottom:0;
    opacity:.82;
}

.supported-causes{
    background:#fff;
}

.cause-card{
    position:relative;
    border-top:4px solid rgba(110,60,188,.8);
}

.cause-logo{
    height:140px;
    padding:12px;
    background:#fafafd;
    border:1px solid rgba(30,30,30,.06);
}

.cause-tag{
    align-self:flex-start;
    padding:5px 9px;
    border-radius:999px;
    background:rgba(34,183,183,.1);
    font-size:.75rem;
}

.cause-button{
    margin-top:4px;
}

.events-section{
    position:relative;
    overflow:hidden;
    background:#f1edf8;
}

.events-section::after{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    top:-265px;
    left:-140px;
    border:58px solid rgba(110,60,188,.07);
    border-radius:50%;
    pointer-events:none;
}

.featured-event{
    border-top:5px solid var(--purple);
}

.event-card:not(.featured-event){
    border-left:4px solid var(--teal);
}

.featured-image{
    overflow:hidden;
}

.featured-image img{
    transition:transform 600ms cubic-bezier(.2,.7,.2,1);
}

.news-card{
    position:relative;
    border-bottom:4px solid transparent;
}

.news-card:hover{
    border-bottom-color:var(--teal);
}

.news-image{
    overflow:hidden;
    background:var(--light);
}

.news-image img{
    display:block;
    transition:transform 600ms cubic-bezier(.2,.7,.2,1);
}

.read-more{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.read-more::after{
    content:"→";
    transition:transform var(--transition-fast);
}

@media (hover:hover) and (pointer:fine){
    .featured-event:hover .featured-image img,
    .news-card:hover .news-image img{
        transform:scale(1.035);
    }

    .news-card:hover .read-more::after{
        transform:translateX(4px);
    }
}

@media (max-width:860px){
    .hero{
        background:linear-gradient(160deg, #fff 0%, #fff 54%, #f2ecfb 100%);
    }

    .hero-image{
        max-width:720px;
    }
}

@media (max-width:600px){
    .hero-image{
        padding:0 10px 10px 0;
    }

    .hero-image::after{
        inset:10px 0 0 10px;
    }

    .stats > div{
        padding:28px 20px;
    }

    .event-card:not(.featured-event){
        border-left:1px solid rgba(30,30,30,.07);
        border-top:4px solid var(--teal);
    }
}

/* Final paw placement overrides the former circle geometry. */
.hero::before,
.mission::before,
.contact-cta::before,
.contact-cta::after,
.events-section::after,
footer::after{
    content:"\1F43E\FE0E";
    width:auto;
    height:auto;
    aspect-ratio:auto;
    border:0;
    border-radius:0;
    background:none;
    font-family:Arial, Helvetica, sans-serif;
    line-height:1;
}

.hero::before{
    left:-2%; bottom:-10%; font-size:clamp(13rem, 28vw, 31rem);
    color:rgba(34,183,183,.10); -webkit-text-fill-color:transparent;
    -webkit-text-stroke:clamp(2px, .28vw, 5px) currentColor; transform:rotate(-18deg);
}

.mission::before{
    top:-30%; right:3%; font-size:clamp(12rem, 23vw, 24rem);
    color:rgba(255,255,255,.055); transform:rotate(20deg);
}

.contact-cta::before{
    top:-24%; right:-3%; font-size:clamp(13rem, 27vw, 29rem);
    color:rgba(255,255,255,.10); -webkit-text-fill-color:transparent;
    -webkit-text-stroke:clamp(2px, .28vw, 5px) currentColor; transform:rotate(18deg);
}

.contact-cta::after{
    left:-3%; bottom:-37%; font-size:clamp(11rem, 21vw, 22rem);
    color:rgba(34,183,183,.15); opacity:1; transform:rotate(-20deg);
}

.events-section::after{
    top:-24%; left:-4%; font-size:clamp(11rem, 21vw, 22rem);
    color:rgba(110,60,188,.065); transform:rotate(-22deg);
}

footer::after{
    right:-2%; bottom:-36%; font-size:clamp(12rem, 23vw, 24rem);
    color:rgba(34,183,183,.13); -webkit-text-fill-color:transparent;
    -webkit-text-stroke:clamp(2px, .28vw, 5px) currentColor; transform:rotate(16deg);
}

@media (max-width:600px){
    .hero::before{left:-22%; bottom:-3%; font-size:15rem;}
    .mission::before{top:-5%; right:-24%; font-size:13rem;}
    .contact-cta::before{top:-4%; right:-28%; font-size:14rem;}
    .contact-cta::after{left:-28%; bottom:-16%; font-size:13rem;}
    footer::after{right:-30%; bottom:-12%; font-size:13rem;}
}

/* High-resolution WebP paw artwork */
.hero::before,
.mission::before,
.impact::before,
.contact-cta::before,
.contact-cta::after,
.events-section::after,
footer::after{
    content:"";
    display:block;
    font-size:0;
    color:transparent;
    -webkit-text-fill-color:initial;
    -webkit-text-stroke:0;
    background-color:currentColor;
    -webkit-mask-image:url("../images/paw-print-high-res.webp");
    mask-image:url("../images/paw-print-high-res.webp");
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;
}

.hero::before{
    width:clamp(260px, 34vw, 620px); height:clamp(260px, 34vw, 620px);
    color:rgba(34,183,183,.10);
}

.mission::before{
    width:clamp(230px, 28vw, 500px); height:clamp(230px, 28vw, 500px);
    color:rgba(255,255,255,.055);
}

.impact::before{
    width:clamp(230px, 28vw, 500px); height:clamp(230px, 28vw, 500px);
    color:rgba(34,183,183,.08);
}

.contact-cta::before{
    width:clamp(260px, 34vw, 620px); height:clamp(260px, 34vw, 620px);
    color:rgba(255,255,255,.085);
}

.contact-cta::after,
.events-section::after{
    width:clamp(220px, 27vw, 470px); height:clamp(220px, 27vw, 470px);
}

.contact-cta::after{color:rgba(34,183,183,.15);}
.events-section::after{color:rgba(110,60,188,.065);}

footer::after{
    width:clamp(220px, 27vw, 470px); height:clamp(220px, 27vw, 470px);
    color:rgba(34,183,183,.11);
}

/* Modal system aligned with the main visual language */
.modal{
    padding:clamp(18px, 4vw, 48px);
    overflow-y:auto;
}

.modal.active{
    display:flex;
    align-items:center;
    justify-content:center;
}

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(25,12,48,.76);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    animation:modalOverlayIn 240ms ease both;
}

.modal-content{
    width:min(100%, 760px);
    max-width:760px;
    max-height:min(88vh, 900px);
    margin:auto;
    padding:clamp(28px, 4vw, 52px);
    overflow-y:auto;
    border:1px solid rgba(110,60,188,.14);
    border-top:6px solid var(--teal);
    border-radius:0;
    box-shadow:18px 18px 0 rgba(34,183,183,.2), 0 28px 80px rgba(0,0,0,.3);
    scrollbar-width:thin;
    scrollbar-color:var(--purple) var(--light);
}

.contact-modal-content{
    max-width:640px;
}

.modal-close{
    top:14px;
    right:14px;
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    padding:0;
    border:1px solid rgba(110,60,188,.16);
    border-radius:50%;
    background:var(--light);
    color:var(--purple);
    font-size:24px;
    line-height:1;
    transition:color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.modal-close:hover{
    color:var(--white);
    background:var(--purple);
    transform:rotate(6deg);
}

.modal-image{
    margin:0 0 clamp(24px, 3vw, 36px);
    overflow:hidden;
    background:var(--light);
}

.modal-image img{
    display:block;
    max-height:430px;
    margin-bottom:0;
    object-fit:cover;
}

.modal-body h2,
.contact-modal-content h2{
    padding-right:38px;
    font-size:clamp(1.8rem, 1.45rem + 1.2vw, 2.7rem);
    line-height:1.12;
    letter-spacing:-.025em;
    color:var(--purple);
}

.modal-date,
.modal-tag{
    letter-spacing:.06em;
    text-transform:uppercase;
}

.contact-form{
    gap:16px;
    margin-top:28px;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:14px 16px;
    border:1px solid #d7d3df;
    border-radius:0;
    background:#fbfbfd;
    color:var(--dark);
    font-size:1rem;
    transition:border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.contact-form textarea{
    min-height:150px;
    resize:vertical;
}

.contact-form input:focus,
.contact-form textarea:focus{
    outline:none;
    border-color:var(--purple);
    background:var(--white);
    box-shadow:0 0 0 4px rgba(110,60,188,.12);
}

.contact-form button{
    align-self:flex-start;
    min-width:150px;
}

@keyframes modalOverlayIn{
    from{opacity:0;}
    to{opacity:1;}
}

@media (max-width:600px){
    .hero::before{width:250px; height:250px;}
    .mission::before{width:220px; height:220px;}
    .contact-cta::before{width:240px; height:240px;}
    .contact-cta::after{width:220px; height:220px;}
    footer::after{width:220px; height:220px;}

    .modal{
        padding:14px;
        align-items:flex-end;
    }

    .modal.active{
        align-items:flex-end;
    }

    .modal-content{
        max-height:92vh;
        padding:28px 22px;
        box-shadow:8px 8px 0 rgba(34,183,183,.2), 0 20px 60px rgba(0,0,0,.3);
    }

    .modal-close{
        top:10px;
        right:10px;
    }

    .contact-form button{
        width:100%;
    }
}