:root {
--green:#173d2b;
--green2:#23533b;
--pink:#c94f76;
--cream:#fbf8f2;
--paper:#fffdf9;
--ink:#1c241f;
--muted:#647067;
--line:#e6dfd4;
--shadow:0 12px 32px rgba(23,61,43,.10);
--radius:20px;
}

*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
background:var(--cream);
color:var(--ink);
font-family:Arial,Helvetica,sans-serif;
line-height:1.6;
}

h1,h2,h3,.brand,.shop-name{
font-family:Georgia,"Times New Roman",serif;
}

a{
color:inherit;
}

.container{
width:min(1180px,92%);
margin:auto;
}

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

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

.site-header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(255,253,249,.97);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
}


.nav{
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:20px;
}


.brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:var(--green);
    font-size:28px;
    line-height:.9;
    letter-spacing:.04em;
    flex-shrink:0;
}


.brand-mark{
    display:flex;
    align-items:center;
    flex:0 0 auto;
}

.brand-mark img{
    display:block;
    width:46px;
    height:46px;
    object-fit:contain;
}


.brand small{
    display:block;
    font-family:Arial,sans-serif;
    font-size:10px;
    letter-spacing:.16em;
    color:var(--pink);
    margin-top:7px;
}


.navlinks{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.04em;
    flex:1;
    min-width:0;
}


.navlinks a{
    text-decoration:none;
}


.navlinks a:hover{
    color:var(--pink);
}


/* Keep ZIP search and button visible */

.header-search-form{
    flex-shrink:0;
}

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

.header-search-form{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
}


.header-search-form input{
    width:150px;
    height:42px;

    padding:0 12px;

    border:1px solid var(--line);
    border-radius:4px;

    background:#fffdfa;

    color:var(--ink);

    font-size:14px;
}


.header-search-form input:focus{
    outline:none;
    border-color:var(--pink);
}


.header-search-form .btn{
    height:42px;

    padding:0 16px;

    white-space:nowrap;
    flex-shrink:0;
}
/* =========================================================
BUTTONS
========================================================= */

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid var(--green);
background:var(--green);
color:#fff;
text-decoration:none;
padding:13px 20px;
border-radius:8px;
font-weight:800;
font-size:13px;
letter-spacing:.03em;
cursor:pointer;
}

.btn.alt{
background:transparent;
color:var(--green);
}

.btn.pink{
background:var(--pink);
border-color:var(--pink);
}

/* =========================================================
HEADER ZIP SEARCH
========================================================= */

/* =========================================================
HEADER ZIP SEARCH
========================================================= */

.header-search-form{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
}


.header-search-form input{
    width:145px;
    height:46px;

    padding:0 18px;

    border:1px solid var(--line);
    border-radius:999px;

    font-size:14px;

    outline:none;

    background:#fff;
    color:var(--ink);
}


.header-search-form input:focus{
    border-color:var(--pink);
}


.header-search-form .btn{
    height:46px;
    border-radius:999px;
    white-space:nowrap;
    flex-shrink:0;
}

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

.hero{

    display:grid;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(0, 1.08fr);

    align-items:center;

    gap:28px;

    min-height:0;

    overflow:visible;

}


.hero-copy{

    width:min(100%, 590px);

    justify-self:end;

    padding:70px 0;

}


.kicker{

    color:var(--pink);

    font-weight:800;

    letter-spacing:.09em;

    font-size:14px;

}


.hero h1{

    font-size:clamp(58px,7vw,92px);

    line-height:.9;

    color:var(--green);

    margin:16px 0;

}


.hero h1 span{

    display:block;

}


.hero-sub{

    font-size:22px;

    color:var(--green);

    font-weight:800;

    line-height:1.2;

    max-width:560px;

}


.hero p{

    max-width:590px;

    font-size:18px;

}


.hero-actions{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-top:28px;

}


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

.hero-art{

    width:100%;

    position:relative;

    overflow:visible;

    background:#fbf8f2;

}


.hero-art picture{

    display:block;

    width:100%;

}


.hero-art img{

    display:block;

    width:100%;

    height:auto;

    aspect-ratio:4 / 3;

    object-fit:contain;

}


/* Remove the old placeholder oval artwork */

.hero-art:before{

    display:none;

}


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

@media(max-width:900px){

    .hero{

        grid-template-columns:1fr;

        gap:0;

    }


    .hero-copy{

        width:92%;

        justify-self:center;

        padding:55px 0 30px;

    }


    .hero-art{

        width:100%;

    }


    .hero-art img{

        width:100%;

        height:auto;

        aspect-ratio:auto;

        object-fit:contain;

    }

}
/* =========================================================
GENERAL SECTIONS
========================================================= */

.section{
padding:76px 0;
}

.section.alt{
background:#fff;
}

.section-title{
text-align:center;
color:var(--green);
font-size:40px;
line-height:1.05;
margin:0 0 10px;
}

.section-lede{
text-align:center;
color:var(--muted);
max-width:720px;
margin:0 auto 36px;
}

/* =========================================================
BENEFITS
========================================================= */

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

.benefit{
padding:25px;
text-align:center;
border-right:1px solid var(--line);
}

.benefit:last-child{
border-right:0;
}

.icon{
font-size:38px;
color:var(--pink);
}

.benefit h3{
font-family:Arial,sans-serif;
font-size:15px;
letter-spacing:.05em;
margin:10px 0 8px;
}

.benefit p{
margin:0;
color:var(--muted);
font-size:14px;
}

/* =========================================================
SHOP CAROUSEL
========================================================= */

.shop-wrap{
position:relative;
}

.shop-viewport{
width:100%;
overflow:hidden;
padding:10px 0 24px;
}

.shop-track{
display:flex;
gap:20px;
width:max-content;
will-change:transform;
}

.shop-card{
width:270px;
background:#fff;
border:1px solid var(--line);
border-radius:18px;
overflow:hidden;
box-shadow:0 8px 24px rgba(23,61,43,.07);
flex:0 0 auto;
}

.shop-photo{
height:150px;
background:
radial-gradient(circle at 28% 35%,#fff 0 7%,transparent 8%),
radial-gradient(circle at 58% 28%,#f7a8bd 0 10%,transparent 11%),
radial-gradient(circle at 75% 58%,#fff 0 8%,transparent 9%),
radial-gradient(circle at 43% 66%,#f3d3a0 0 9%,transparent 10%),
linear-gradient(135deg,#668c63,#d59aab 65%,#f3e9d9);
}

.shop-body{
padding:20px;
}

.owned-label,
.recommended-label{
font-size:10px;
font-weight:900;
letter-spacing:.13em;
text-transform:uppercase;
color:var(--pink);
}

.recommended-label{
color:#6a746e;
}

.shop-name{
font-size:29px;
line-height:1;
color:var(--green);
margin:8px 0;
}

.shop-area{
font-weight:800;
color:var(--pink);
font-size:13px;
}

.shop-body p{
font-size:14px;
color:var(--muted);
min-height:76px;
}

.shop-body .btn{
width:100%;
}

/* CAROUSEL CONTROLS */

.carousel-controls{
display:flex;
align-items:center;
justify-content:center;
gap:16px;
margin-top:6px;
}

.circle{
width:46px;
height:46px;

border-radius:50%;

border:1px solid var(--green);

background:#fff;

color:var(--green);

font-size:28px;

line-height:1;

cursor:pointer;

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

transition:
background .2s ease,
color .2s ease;
}

.circle:hover{
background:var(--green);
color:#fff;
}

.carousel-status{
min-width:72px;
text-align:center;
font-size:13px;
font-weight:800;
color:var(--green);
}

/* =========================================================
NOTICE
========================================================= */

.notice{
margin-top:28px;
background:#f5eee5;
border-left:4px solid var(--pink);
padding:18px 20px;
border-radius:10px;
color:#505b53;
font-size:14px;
}

/* =========================================================
MAP / COMMUNITIES
========================================================= */

.mapband{
background:
linear-gradient(100deg,#e6eadf,#fbf6ee);

border:1px solid var(--line);

border-radius:22px;

padding:42px;

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

align-items:center;
}

.mapbox{
min-height:280px;

border-radius:18px;

background:
radial-gradient(circle at 20% 65%,var(--green) 0 4px,transparent 5px),
radial-gradient(circle at 42% 40%,var(--green) 0 4px,transparent 5px),
radial-gradient(circle at 63% 62%,var(--green) 0 4px,transparent 5px),
radial-gradient(circle at 76% 30%,var(--green) 0 4px,transparent 5px),
repeating-linear-gradient(
25deg,
transparent 0 34px,
rgba(23,61,43,.08) 35px 36px
),
#eef0e8;

position:relative;
}

.maplabels{
position:absolute;
inset:0;
font-size:12px;
font-weight:800;
color:var(--green);
}

.maplabels span{
position:absolute;
}

.maplabels .stc{
left:38%;
top:34%;
}

.maplabels .bat{
left:58%;
top:57%;
}

.maplabels .wc{
left:16%;
top:59%;
}

.maplabels .wh{
left:71%;
top:23%;
}

.maplabels .gen{
left:48%;
top:22%;
}

.maplabels .na{
left:56%;
top:73%;
}

.community-list{
display:flex;
flex-wrap:wrap;
gap:9px;
margin-top:22px;
}

.community-list span{
padding:7px 11px;
border:1px solid var(--line);
border-radius:999px;
background:#fff;
font-size:12px;
font-weight:800;
}

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

.cta{
background:
linear-gradient(
90deg,
#b9426a,
#d66f8e
);

color:#fff;
}

.cta-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
padding:45px 0;
}

.cta h2{
font-size:42px;
margin:0 0 8px;
}

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

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

.footer{
background:var(--green);
color:#fff;
padding:55px 0 25px;
}

.footer-grid{
display:grid;
grid-template-columns:1.4fr 1fr 1fr 1fr;
gap:35px;
}

.footer a{
text-decoration:none;
}

.footer h3{
font-family:Arial,sans-serif;
font-size:13px;
letter-spacing:.08em;
text-transform:uppercase;
}

.footer p,
.footer li{
font-size:13px;
color:#dfe9e1;
}

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

.copyright{
border-top:
1px solid rgba(255,255,255,.18);

margin-top:30px;

padding-top:20px;

font-size:12px;

color:#c9d6cd;
}

/* =========================================================
INTERIOR PAGES
========================================================= */

.page-hero{
padding:85px 0;
background:
linear-gradient(
135deg,
#eef1e9,
#fbf3f4
);
}

.page-hero h1{
font-size:65px;
color:var(--green);
margin:0 0 12px;
}

.page-hero p{
max-width:780px;
font-size:19px;
}

.content{
max-width:820px;
margin:auto;
}

.content h2{
color:var(--green);
font-size:34px;
}

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

.content ul{
font-size:17px;
}

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

hr{
border:0;
border-top:1px solid var(--line);
margin:35px 0;
}

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

@media(max-width:900px){

    .navlinks{
        display:none;
    }


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


    .hero-art{
        min-height:360px;
    }


    .hero-copy{
        padding:55px 0 30px;
    }


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


    .benefit{
        border-right:0;
    }


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


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


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

}


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

@media(max-width:600px){

    /*
    Header:
    Allow the header contents to wrap naturally
    instead of forcing horizontal page overflow.
    */

    .site-header{
        position:relative;
        top:auto;
    }


    .nav{
        min-height:auto;
        flex-wrap:wrap;
        align-items:center;
        gap:10px;

        padding-top:10px;
        padding-bottom:10px;
    }


.brand-mark img{
    width:38px;
    height:38px;
    max-width:38px;
    object-fit:contain;
}


    .brand-mark{
        font-size:34px;
    }


    /*
    Put the ZIP search on its own row.
    */

    .header-search-form{
        flex:0 0 100%;
        width:100%;
        min-width:0;

        margin-top:2px;

        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:center;

        gap:8px;
    }


    /*
    Keep the ZIP field flexible without
    making the page wider than the viewport.
    */

    .header-search-form input{
        flex:1 1 auto;
        width:auto;
        min-width:0;
        max-width:220px;

        box-sizing:border-box;
    }


    /*
    Keep the button at its natural size.
    */

    .header-search-form .btn{
        width:auto;
        flex:0 0 auto;

        box-sizing:border-box;
    }


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


    .section{
        padding:55px 0;
    }


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


    .shop-card{
        width:78vw;
    }


    .cta-inner{
        display:block;
    }


    .cta .btn{
        margin-top:20px;
    }


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


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


    .page-hero h1{
        font-size:48px;
    }

}