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

/* =========================================================
   REGENT PARK
   Main Stylesheet
   ========================================================= */


/* =========================================================
   1. ROOT / VARIABLES
   ========================================================= */

:root{
    --green:#25A17E;
    --green-dark:#25A17E;
    --green-soft:#dff3ea;

    --cream:#F5F1E3;
    --cream-2:#F5F1E3;

    --ink:#25A17E;
    --muted:#8E6E53;

    --line:#F5F1E3;
    --white:#FFFFFF;

    --shadow:0 18px 50px rgba(17,52,43,.10);

    --header-height:90px;
}


/* =========================================================
   2. RESET
   ========================================================= */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:'Open Sans',sans-serif;
    color:var(--ink);
    background:#fff;
    line-height:1.65;
    overflow-x:hidden;
}

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

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

.container{
    max-width:1180px;
    margin-left:auto;
    margin-right:auto;
    padding-left:20px;
    padding-right:20px;
}


/* =========================================================
   3. ANNOUNCEMENT BAR
   ========================================================= */

.announcement{
    background:var(--green);
    color:#fff;
    text-align:center;
    font-size:12px;
    font-weight:700;
    letter-spacing:.2px;
    padding:8px 15px;
}

.announcement span{
    opacity:.55;
    margin:0 8px;
}


/* =========================================================
   4. HEADER / NAVIGATION
   ========================================================= */

/* =========================================================
   REGENT PARK HEADER
========================================================= */

.site-header{
    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    padding:16px 0;

    background:#F5F1E3;

    border-bottom:1px solid transparent;

    transition:
        background-color .35s ease,
        box-shadow .35s ease,
        padding .35s ease,
        border-color .35s ease;
}


/* =========================================================
   HEADER WHEN SCROLL
========================================================= */

.site-header.scrolled{

    background:#f7f1e8 !important;

    border-bottom:1px solid #eeeeee;

    box-shadow:
        0 6px 25px rgba(0,0,0,.08);

    padding:10px 0;
}


/* =========================================================
   LOGO
========================================================= */

.site-header .brand img{

    height:66px;

    width:auto;

    object-fit:contain;

    transition:
        height .35s ease;
}


/* Logo mengecil ketika scroll */

.site-header.scrolled .brand img{

    height:56px;
}


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

.site-header .desktop-nav a{

    color:#8E6E53;

    transition:
        color .25s ease;
}


/* Saat scroll */

.site-header.scrolled .desktop-nav a{

    color:#25A17E;
}


/* Hover */

.site-header .desktop-nav a:hover{

    color:#25A17E;
}


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

.site-header .nav-cta{

    background:#25A17E;

    color:#ffffff;
}

.site-header .nav-cta:hover{

    background:#ffffff;

    color:#ffffff;
}

/* ================================
   LOGO
================================ */

.site-header .brand img {
    height: 66px;

    width: auto;

    object-fit: contain;

    transition:
        height 0.3s ease;
}


/* Logo sedikit mengecil ketika scroll */

.site-header.scrolled .brand img {
    height: 56px;
}


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

.site-header .desktop-nav a {
    color: #8E6E53;

    transition:
        color 0.25s ease;
}


/* Pastikan text tetap terlihat di background putih */

.site-header.scrolled .desktop-nav a {
    color: #8E6E53;
}


/* Hover */

.site-header .desktop-nav a:hover {
    color: #25A17E;
}


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

.site-header .nav-cta {
    background: #25A17E;

    color: #ffffff;
}

.site-header .nav-cta:hover {
    background:#8E6E53;

    color:  #ffffff;
}


/* =========================================================
   5. NAV WRAPPER
   ========================================================= */

.nav-wrap{
    display:flex;
    align-items:center;
    gap:28px;
}


/* =========================================================
   6. BRAND / LOGO
   ========================================================= */

.brand{
    width:148px;
    flex:0 0 148px;
}

.brand img{
    height:66px;
    width:auto;
    object-fit:contain;

    transition:
        height .35s ease,
        transform .35s ease;
}


/* =========================================================
   7. DESKTOP NAVIGATION
   ========================================================= */

.desktop-nav{
    display:flex;
    align-items:center;
    gap:26px;
    margin-left:auto;
}

.desktop-nav a{
    font-size:13px;
    font-weight:700;
    color:#8E6E53;

    position:relative;
    white-space:nowrap;

    transition:
        color .25s ease;
}


/*
   Underline navigation
*/

.desktop-nav a:after{
    content:'';

    position:absolute;

    left:0;
    right:100%;
    bottom:-7px;

    height:2px;

    background:var(--green);

    transition:right .25s ease;
}

.desktop-nav a:hover:after,
.desktop-nav a.active:after{
    right:0;
}


/*
   Hover navigation
*/

.desktop-nav a:hover{
    color:var(--green);
}


/* =========================================================
   8. NAVIGATION CTA
   ========================================================= */

.nav-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:9px;

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

    padding:13px 17px;

    border-radius:999px;

    font-size:12px;
    font-weight:800;

    white-space:nowrap;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.nav-cta:hover{
    background:var(--green);
    color:#fff;

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(21,152,121,.20);
}


/*
   CTA tetap terlihat bagus saat scroll
*/

.site-header.scrolled .nav-cta{
    background:#25A17E;
    color:#fff;
}

.site-header.scrolled .nav-cta:hover{
    background:var(--ink);
    color:#fff;
}


/* =========================================================
   9. MOBILE MENU BUTTON
   ========================================================= */

.menu-toggle{
    display:none;

    margin-left:auto;

    background:transparent;

    border:0;

    padding:8px;

    cursor:pointer;
}

.menu-toggle span{
    display:block;

    width:25px;
    height:2px;

    background:var(--ink);

    margin:5px 0;

    border-radius:3px;

    transition:.25s;
}


/* =========================================================
   10. MOBILE MENU
   ========================================================= */

.mobile-menu{
    display:none;
}


/* =========================================================
   11. HERO
   ========================================================= */

/* =========================================================
   12. TYPOGRAPHY
   ========================================================= */

.eyebrow{
    display:inline-flex;

    align-items:center;

    gap:8px;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:11px;

    font-weight:800;

    color:var(--green);

    margin-bottom:18px;
}

.eyebrow:before{
    content:'';

    width:25px;
    height:2px;

    background:var(--green);
}

h1,
h2,
h3,
h4,
h5,
h6{
    font-family:'Quicksand',sans-serif;

    color:var(--ink);

    line-height:1.08;
}

h1{
    font-size:clamp(50px,6vw,82px);

    font-weight:800;

    letter-spacing:-3px;

    margin:0 0 23px;
}

h2{
    font-size:clamp(36px,4vw,56px);

    letter-spacing:-2px;

    margin:0 0 18px;
}

h3{
    font-size:28px;
}

h4{
    font-size:22px;
}

p{
    color:var(--muted);
}


/* =========================================================
   13. HERO CONTENT
   ========================================================= */

.hero-copy p{
    font-size:18px;

    max-width:560px;

    margin-bottom:30px;
}

.hero-actions{
    display:flex;

    gap:12px;

    flex-wrap:wrap;
}


/* =========================================================
   14. BUTTONS
   ========================================================= */

.btn{
    display:inline-flex;

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

    border-radius:999px;

    padding:14px 21px;

    font-size:13px;

    font-weight:800;

    border:1px solid transparent;

    transition:
        .25s ease;
}

.btn-primary{
    background:#C7B299;

    color:#fff;
}

.btn-primary:hover{
    background:#8E6E53;

    color:#fff;

    transform:translateY(-2px);

}

.btn-outline{
    border-color:#8E6E53;

    background:transparent;

    color:var(--ink);
}

.btn-outline:hover{
    border-color:var(--green);

    color:var(--green);

    transform:translateY(-2px);
}


/* =========================================================
   15. HERO IMAGE
   ========================================================= */

.hero-media{
    position:relative;
}

.hero-image{
    height:560px;

    width:100%;

    object-fit:cover;

    border-radius:
        38px
        38px
        38px
        100px;

    box-shadow:var(--shadow);
}


/* =========================================================
   16. HERO BADGE
   ========================================================= */

.hero-badge{
    position:absolute;

    left:-28px;
    bottom:28px;

    background:#fff;

    border-radius:22px;

    padding:18px 20px;

    box-shadow:var(--shadow);

    display:flex;

    align-items:center;

    gap:13px;
}

.hero-badge .icon{
    width:45px;
    height:45px;

    border-radius:14px;

    background:var(--green-soft);

    display:grid;

    place-items:center;

    color:var(--green);

    font-size:20px;
}

.hero-badge strong{
    font-family:'Quicksand';

    font-size:16px;
}

.hero-badge small{
    display:block;

    color:var(--muted);

    font-size:11px;
}


/* =========================================================
   17. SECTIONS
   ========================================================= */

.section{
    padding:100px 0;
}

.section-soft{
    background:var(--cream-2);
}

.section-green{
    background:var(--green);

    color:#fff;
}

.section-green h2,
.section-green h3,
.section-green p{
    color:#fff;
}


/* =========================================================
   18. SECTION HEAD
   ========================================================= */

.section-head{
    max-width:720px;

    margin-bottom:50px;
}

.section-head.center{
    margin-left:auto;
    margin-right:auto;

    text-align:center;
}

.section-head p{
    font-size:17px;
}


/* =========================================================
   19. SPLIT SECTION
   ========================================================= */

.split{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;
}

.split-image{
    height:540px;

    object-fit:cover;

    width:100%;

    border-radius:32px;
}

.kicker{
    font-size:12px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:2px;

    color:var(--green);

    margin-bottom:12px;
}


/* =========================================================
   20. CHECK LIST
   ========================================================= */

.check-list{
    list-style:none;

    padding:0;

    margin:28px 0;
}

.check-list li{
    display:flex;

    gap:12px;

    margin:15px 0;

    color:#25A17E;
}

.check-list i{
    color:var(--green);

    margin-top:5px;
}


/* =========================================================
   21. STATS
   ========================================================= */

.stats{
    display:grid;

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

    gap:1px;

    background:#d9e8e1;

    border:1px solid #d9e8e1;

    border-radius:25px;

    overflow:hidden;
}

.stat{
    background:#fff;

    padding:28px;
}

.stat strong{
    font-family:'Quicksand';

    font-size:28px;

    display:block;
}

.stat span{
    font-size:12px;

    color:var(--muted);
}


/* =========================================================
   22. SERVICE GRID
   ========================================================= */

.service-grid{
    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:18px;
}

.six-service-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:14px;
}

.service-card{
    border:1px solid var(--line);

    border-radius:28px;

    overflow:hidden;

    background:#fff;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

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

    box-shadow:var(--shadow);
}

.service-card img{
    height:180px;

    width:100%;

    object-fit:cover;
}

.service-body{
    padding:18px;
}

.service-body p{
    font-size:14px;

    margin:10px 0 20px;
}

.service-link{
    color:var(--green);

    font-size:12px;

    font-weight:800;
}

.service-link i{
    margin-left:5px;
}


/* =========================================================
   23. FEATURE STRIP
   ========================================================= */

.feature-strip{
    display:grid;

    grid-template-columns:repeat(6,minmax(0,1fr));

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

    border-radius:28px;

    overflow:hidden;
}

.feature{
    padding:22px 16px;

    background:#fff;

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

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

.feature i{
    color:var(--green);

    font-size:22px;

    margin-bottom:15px;
}

.feature h4{
    font-size:18px;

    margin-bottom:7px;
}

.feature p{
    font-size:13px;

    margin:0;
}


/* =========================================================
   24. GALLERY
   ========================================================= */

.gallery{
    display:grid;

    grid-template-columns:1.2fr .8fr .8fr;

    grid-template-rows:260px 260px;

    gap:14px;
}

.gallery img{
    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:22px;
}

.gallery img:first-child{
    grid-row:1/3;
}


/* =========================================================
   25. CTA
   ========================================================= */

.cta{
    background:#25A17E;

    border-radius:38px;

    padding:65px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    position:relative;

    overflow:hidden;
}

.cta:after{
    content:'🐾';

    position:absolute;

    right:30px;
    bottom:-45px;

    font-size:180px;

    opacity:.06;
}

.cta h2{
    color:#fff;

    max-width:650px;
}

.cta p{
    color:#F5F1E3;

    max-width:610px;
}

.cta .btn{
    position:relative;

    z-index:1;
}


/* =========================================================
   26. PAGE HERO
   ========================================================= */

.page-hero{
    padding:175px 0 75px;

    background:#999999;
}

.page-hero-inner{
     max-width:1200px;
}

.page-hero h1{
    font-size:clamp(48px,6vw,76px);
}

.page-shell{
    min-height:55vh;

    padding:170px 0 80px;
}

.empty-state{
    text-align:center;

    padding:80px 0;
}


/* =========================================================
   27. FAQ
   ========================================================= */

.faq{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;
}

.faq-item{
    border:1px solid var(--line);

    border-radius:20px;

    padding:22px;

    background:#fff;
}

.faq-item h4{
    font-size:17px;

    margin:0 0 8px;
}

.faq-item p{
    font-size:14px;

    margin:0;
}


/* =========================================================
   28. CONTACT
   ========================================================= */

.contact-grid{
    display:grid;

    grid-template-columns:.8fr 1.2fr;

    gap:25px;
}

.contact-card{
    padding:35px;

    border-radius:28px;

    background:var(--cream);
}

.contact-card h3{
    margin-bottom:14px;
}

.contact-item{
    display:flex;

    gap:15px;

    padding:16px 0;

    border-bottom:1px solid #dfd8cc;
}

.contact-item:last-child{
    border:0;
}

.contact-icon{
    width:42px;
    height:42px;

    flex:0 0 42px;

    border-radius:14px;

    background:#fff;

    display:grid;

    place-items:center;

    color:var(--green);
}


/* =========================================================
   29. FOOTER
   ========================================================= */

.footer{
    background:#25A17E;

    padding:75px 0 25px;

    color:#d7e2dd;
}

.footer-main{
    display:grid;

    grid-template-columns:1.7fr .8fr .8fr 1.1fr;

    gap:45px;

    padding-bottom:55px;
}

.footer-brand img{
    width:145px;

    height:auto;

    filter:brightness(0) invert(1);

    margin-bottom:18px;
}

.footer p{
    color:#fff;

    font-size:13px;
}

.footer h6{
    font-family:'Open Sans';

    color:#fff;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:1.5px;

    margin-bottom:18px;
}

.footer-main > div:not(.footer-brand) a{
    display:block;

    color:#fff;

    font-size:13px;

    margin:11px 0;

    transition:.2s;
}

.footer-main > div:not(.footer-brand) a:hover{
    color:#8E6E53;
}

.social-link{
    display:inline-flex !important;

    gap:8px;

    align-items:center;

    color:#fff !important;
}

.text-link{
    color:#fff !important;
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.12);

    padding-top:20px;

    display:flex;

    justify-content:space-between;

    color:#849891;

    font-size:11px;
}


/* =========================================================
   30. TABLET
   ========================================================= */

@media(max-width:1100px){

    .desktop-nav{
        gap:16px;
    }

    .desktop-nav a{
        font-size:11px;
    }

    .nav-cta{
        font-size:11px;

        padding:12px;
    }

    .hero-grid{
        gap:40px;
    }

    .service-grid,.six-service-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .feature-strip{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

}


/* =========================================================
   31. MOBILE / TABLET
   ========================================================= */

@media(max-width:900px){

    .desktop-nav,
    .nav-cta{
        display:none;
    }

    .menu-toggle{
        display:block;
    }

    .brand{
        width:125px;
    }

    .brand img{
        height:58px;
    }

    /*
       Header saat mobile scroll
    */

    .site-header.scrolled{
        padding:8px 0;

        background:#f7f1e8;

        box-shadow:
            0 5px 22px rgba(20,60,50,.08);
    }

    .site-header.scrolled .brand img{
        height:52px;
    }

    .hero{
        padding-top:145px;
    }

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

    .hero-image{
        height:480px;
    }

    .hero-badge{
        left:15px;
    }

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

    .feature-strip{
        grid-template-columns:1fr 1fr;
    }

    .feature{
        border-bottom:1px solid var(--line);
    }

    .feature:nth-child(2){
        border-right:0;
    }

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

    .footer-brand{
        grid-column:1/-1;
    }

    .gallery{
        grid-template-columns:1fr 1fr;

        grid-template-rows:
            300px
            220px
            220px;
    }

    .gallery img:first-child{
        grid-row:auto;

        grid-column:1/-1;
    }

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

}


/* =========================================================
   32. MOBILE MENU
   ========================================================= */

@media(max-width:900px){

    .mobile-menu{
        display:block;

        position:fixed;

        inset:0;

        background:var(--cream-2);

        z-index:1200;

        transform:translateX(100%);

        transition:
            transform .35s ease;

        padding:25px;
    }

    .mobile-menu.is-open{
        transform:translateX(0);
    }

    .mobile-menu-inner{
        height:100%;

        display:flex;

        flex-direction:column;
    }

    .mobile-brand img{
        height:72px;
    }

    .menu-close{
        position:absolute;

        right:22px;
        top:22px;

        border:0;

        background:#fff;

        width:44px;
        height:44px;

        border-radius:50%;

        font-size:20px;

        color:var(--ink);

        cursor:pointer;
    }

    .mobile-menu nav{
        display:flex;

        flex-direction:column;

        margin:45px 0;

        gap:4px;
    }

    .mobile-menu nav a{
        font-family:'Quicksand';

        font-weight:600;

        font-size:29px;

        padding:7px 0;

        transition:.2s;
    }

    .mobile-menu nav a:hover{
        color:var(--green);
    }

    .mobile-menu .btn{
        margin-top:auto;

        margin-bottom:10px;
    }

}


/* =========================================================
   33. SMALL MOBILE
   ========================================================= */

@media(max-width:600px){

    .section{
        padding:75px 0;
    }

    .hero{
        padding:130px 0 60px;
    }

    .hero-grid{
        gap:35px;
    }

    .hero-image{
        height:390px;

        border-radius:
            28px
            28px
            28px
            70px;
    }

    .hero-badge{
        bottom:15px;
    }

    .service-grid,.six-service-grid{
        grid-template-columns:1fr;
    }

    .feature-strip{
        grid-template-columns:1fr;
    }

    .feature{
        border-right:0;
    }

    .gallery{
        grid-template-columns:1fr;

        grid-template-rows:
            280px
            200px
            200px
            200px;
    }

    .gallery img:first-child{
        grid-column:auto;
    }

    .cta{
        padding:40px 25px;

        border-radius:28px;

        display:block;
    }

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

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

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

        gap:30px;
    }

    .footer-brand{
        grid-column:1/-1;
    }

    .footer-bottom{
        display:block;
    }

    .footer-bottom span{
        display:block;

        margin:6px 0;
    }

    .page-hero{
        padding:140px 0 60px;
    }

}



/* =========================================================
   REGENT PARK
   FULLSCREEN HERO
   ========================================================= */

/* =========================================
   HOME HERO
   FULL WIDTH BACKGROUND
========================================= */
/* =========================================================
   HOME HERO — FULL SCREEN BACKGROUND
   ========================================================= */

.hero{
    position:relative;

    width:100vw;
    min-height:100vh;
    height:100vh;

    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);

    padding:0;

    display:flex;
    align-items:center;

    overflow:hidden;

    color:#fff;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.62) 0%,
            rgba(0,0,0,.42) 42%,
            rgba(0,0,0,.15) 100%
        ),
        url("../img/home_bg.webp");

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}


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

.hero-content{
    position:relative;

    z-index:2;

    width:100%;
    max-width:1180px;

    margin:0 auto;

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


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

.hero-copy{
    width:60%;
    max-width:700px;
}


.hero-copy .eyebrow{
    color:#fff;
}


.hero-copy .eyebrow:before{
    background:#fff;
}


.hero-copy h1{
    color:#fff;

    font-size:clamp(52px,6vw,88px);

    line-height:1.02;

    letter-spacing:-3px;

    font-weight:800;

    margin:0 0 25px;
}


.hero-copy p{
    color:rgba(255,255,255,.88);

    font-size:18px;

    line-height:1.6;

    max-width:600px;

    margin:0 0 32px;
}


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

.hero-actions{
    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;
}


.hero-actions .btn-primary{
    background:var(--green);
    color:#fff;
}


.hero-actions .btn-outline{
    color:#fff;

    border-color:rgba(255,255,255,.6);

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

    backdrop-filter:blur(8px);
}


.hero-actions .btn-outline:hover{
    background:#fff;

    color:var(--ink);

    border-color:#fff;
}


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

.hero-copy{
    width:58%;

    max-width:700px;

    padding-top:60px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.hero-copy .eyebrow{
    color:#ffffff;

    margin-bottom:22px;
}

.hero-copy .eyebrow:before{
    background:#ffffff;
}


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

.hero-copy h1{
    color:#ffffff;

    font-size:
        clamp(
            52px,
            6vw,
            88px
        );

    line-height:1.02;

    letter-spacing:-3px;

    font-weight:800;

    max-width:720px;

    margin:0 0 25px;
}


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

.hero-copy p{
    color:rgba(255,255,255,.88);

    font-size:18px;

    line-height:1.6;

    max-width:600px;

    margin:0 0 32px;
}


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

.hero-actions{
    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;
}


/* PRIMARY BUTTON */

.hero-actions .btn-primary{
    background:var(--green);

    color:#ffffff;

    border:none;

    padding:
        15px
        23px;

    box-shadow:
        0 10px 25px rgba(0,0,0,.18);
}

.hero-actions .btn-primary:hover{
    background:#ffffff;

    color:var(--green);

    transform:translateY(-2px);
}


/* OUTLINE BUTTON */

.hero-actions .btn-outline{
    color:#ffffff;

    border-color:
        rgba(255,255,255,.55);

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

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

    padding:
        15px
        23px;
}

.hero-actions .btn-outline:hover{
    background:#ffffff;

    border-color:#ffffff;

    color:var(--ink);
}


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

.hero-badge{
    position:absolute;

    left:auto;

    right:50px;

    bottom:50px;

    z-index:5;

    background:#ffffff;

    border-radius:20px;

    padding:
        15px
        18px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.20);

    display:flex;

    align-items:center;

    gap:12px;
}


/* =========================================================
   BADGE ICON
   ========================================================= */

.hero-badge .icon{
    width:42px;

    height:42px;

    border-radius:13px;

    background:var(--green-soft);

    display:grid;

    place-items:center;

    color:var(--green);

    font-size:18px;
}


/* =========================================================
   BADGE TEXT
   ========================================================= */

.hero-badge strong{
    font-family:'Quicksand';

    font-size:15px;

    color:var(--ink);
}

.hero-badge small{
    display:block;

    color:var(--muted);

    font-size:10px;

    line-height:1.4;
}


/* =========================================================
   HERO SCROLL INDICATOR
   ========================================================= */

.hero-scroll{
    position:absolute;

    left:50%;

    bottom:28px;

    transform:translateX(-50%);

    z-index:5;

    color:#ffffff;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:2px;

    opacity:.75;
}


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

@media(max-width:900px){

    .hero{

        min-height:
            100svh;

        height:
            100svh;

        align-items:
            flex-end;

        padding:
            0 0 70px;
    }


    .hero-grid{

        padding:
            0 20px;
    }


    .hero-copy{

        width:100%;

        max-width:
            620px;

        padding-top:0;
    }


    .hero-copy .eyebrow{

        font-size:10px;

        margin-bottom:15px;
    }


    .hero-copy h1{

        font-size:
            clamp(
                42px,
                11vw,
                64px
            );

        letter-spacing:
            -2px;

        margin-bottom:18px;
    }


    .hero-copy p{

        font-size:15px;

        line-height:1.55;

        margin-bottom:25px;
    }


    .hero-actions{

        gap:8px;
    }


    .hero-actions .btn{

        padding:
            13px
            18px;

        font-size:12px;
    }


    .hero-badge{

        right:20px;

        left:20px;

        bottom:25px;

        padding:
            13px
            15px;
    }


    .hero-scroll{

        display:none;
    }

}


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

@media(max-width:600px){

    .hero{

        min-height:
            100svh;

        height:
            100svh;

        padding-bottom:
            55px;
    }


    .hero-media::after{

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.30) 0%,
                rgba(0,0,0,.28) 35%,
                rgba(0,0,0,.68) 100%
            );
    }


    .hero-copy h1{

        font-size:
            clamp(
                40px,
                12vw,
                56px
            );

        line-height:
            1.02;
    }


    .hero-copy p{

        font-size:
            14px;

        max-width:
            100%;
    }


    .hero-actions{

        flex-direction:
            column;

        align-items:
            stretch;
    }


    .hero-actions .btn{

        width:100%;

        text-align:center;
    }


    .hero-badge{

        display:none;
    }

}

/* =========================================
   MOBILE MENU — FIX LOGO OVERLAP
========================================= */

@media (max-width:900px){

    .mobile-menu{
        z-index:10000;
    }

    .mobile-menu.is-open ~ .site-header,
    body:has(.mobile-menu.is-open) .site-header .brand{
        visibility:hidden;
        opacity:0;
    }

}


/* =========================================================
   ABOUT PAGE
========================================================= */


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

.about-hero{
    position:relative;

    min-height:520px;

    display:flex;
    align-items:center;

    overflow:hidden;

    color:#fff;

    background-image:
            linear-gradient(
                180deg,
                rgba(0,0,0,0.30) 0%,
                rgba(0,0,0,0.35) 40%,
                rgba(0,0,0,0.70) 100%
            ),
        url("../img/home_bg_2.webp");

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}


.about-hero-overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(8,45,38,.72) 0%,
            rgba(8,45,38,.40) 45%,
            rgba(8,45,38,.10) 100%
        );

    z-index:1;
}


.about-hero .page-hero-inner{
    position:relative;

    z-index:2;

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


.about-hero .eyebrow{
    color:#fff;
}


.about-hero .eyebrow:before{
    background:#7ce0bf;
}


.about-hero h1{
    max-width:800px;

    color:#fff;

    font-size:clamp(48px,6vw,82px);

    line-height:1.02;

    letter-spacing:-3px;

    margin:0 0 25px;
}


.about-hero p{
    max-width:620px;

    color:rgba(255,255,255,.90);

    font-size:18px;

    line-height:1.65;
}


/* =========================================================
   STORY
========================================================= */

.about-story{
    background:#fff;
}


.about-story-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    gap:80px;

    align-items:center;
}


.about-story-image{
    overflow:hidden;

    border-radius:32px;
}


.about-story-image img{
    width:100%;

    height:560px;

    object-fit:cover;

    display:block;
}


.about-story-content{
    max-width:620px;
}


.about-story-content h2{
    margin-bottom:25px;
}


.about-story-content p{
    color:var(--muted);

    line-height:1.75;

    margin-bottom:18px;
}


/* =========================================================
   ABOUT PILLARS
========================================================= */

.about-pillars{
    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:18px;

    margin-top:55px;
}


.about-pillar{
    position:relative;

    background:#fff;

    border:1px solid rgba(16,63,54,.10);

    border-radius:24px;

    padding:30px;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.about-pillar:hover{
    transform:translateY(-6px);

    box-shadow:
        0 20px 50px rgba(16,63,54,.10);
}


.pillar-number{
    font-size:14px;

    font-weight:800;

    color:var(--green);

    margin-bottom:30px;
}


.pillar-icon{
    width:54px;
    height:54px;

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

    border-radius:16px;

    background:#e8f7f2;

    color:var(--green);

    font-size:20px;

    margin-bottom:22px;
}


.about-pillar h3{
    font-size:24px;

    margin-bottom:14px;
}


.about-pillar p{
    color:var(--muted);

    line-height:1.65;

    margin-bottom:25px;
}


/* =========================================================
   WHY REGENT PARK
========================================================= */

.about-why{
    background:#fff;
}


.about-why-grid{
    display:grid;

    grid-template-columns:
        minmax(0,.9fr)
        minmax(0,1.1fr);

    gap:100px;

    align-items:center;
}


.about-why-content{
    max-width:580px;
}


.about-why-content h2{
    font-size:clamp(38px,4vw,58px);

    line-height:1.05;

    margin-bottom:25px;
}


.about-why-content p{
    color:var(--muted);

    line-height:1.75;

    margin-bottom:18px;
}


.about-why-list{
    display:flex;

    flex-direction:column;

    gap:0;
}


.why-item{
    display:grid;

    grid-template-columns:60px 1fr;

    gap:20px;

    padding:25px 0;

    border-bottom:1px solid rgba(16,63,54,.10);
}


.why-item:first-child{
    border-top:1px solid rgba(16,63,54,.10);
}


.why-icon{
    width:52px;
    height:52px;

    border-radius:50%;

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

    background:#e8f7f2;

    color:var(--green);
}


.why-item h3{
    margin:0 0 8px;

    font-size:21px;
}


.why-item p{
    margin:0;

    color:var(--muted);

    line-height:1.6;
}


/* =========================================================
   EXPERIENCE
========================================================= */

.experience-grid{
    display:grid;

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

    gap:24px;

    margin-top:55px;
}


.experience-card{
    background:#fff;

    border-radius:28px;

    overflow:hidden;

    border:1px solid rgba(16,63,54,.08);

    box-shadow:
        0 10px 30px rgba(16,63,54,.05);
}


.experience-image{
    position:relative;

    height:330px;

    overflow:hidden;
}


.experience-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .5s ease;
}


.experience-card:hover .experience-image img{
    transform:scale(1.04);
}


.experience-number{
    position:absolute;

    top:20px;
    left:20px;

    padding:9px 13px;

    border-radius:50px;

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

    color:var(--ink);

    font-size:13px;

    font-weight:800;
}


.experience-body{
    padding:28px 30px 32px;
}


.experience-body > span{
    color:var(--green);

    font-size:11px;

    font-weight:800;

    letter-spacing:1.8px;
}


.experience-body h3{
    font-size:28px;

    margin:9px 0 12px;
}


.experience-body p{
    color:var(--muted);

    line-height:1.65;

    margin:0;
}


/* =========================================================
   PROMISE
========================================================= */

.about-promise{
    padding-top:100px;
}


.promise-box{
    position:relative;

    overflow:hidden;

    min-height:420px;

    padding:70px;

    border-radius:34px;

    background:
        linear-gradient(
            110deg,
            #123f35 0%,
            #0c5948 100%
        );

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:space-between;
}


.promise-content{
    position:relative;

    z-index:2;

    max-width:650px;
}


.promise-content h2{
    color:#fff;

    font-size:clamp(42px,5vw,68px);

    line-height:1.02;

    margin:0 0 25px;
}


.promise-content p{
    color:rgba(255,255,255,.78);

    line-height:1.7;

    max-width:580px;
}


.promise-paw{
    position:absolute;

    right:-80px;
    bottom:-100px;

    width:430px;
    height:430px;

    border-radius:50%;

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

    background:rgba(124,224,191,.08);

    color:rgba(124,224,191,.22);

    font-size:180px;
}


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

.about-cta{
    padding:55px 60px;
}


.about-cta h2{
    max-width:650px;
}


@media (min-width:1101px){
    .contact-service-card{padding:16px 13px;gap:9px;border-radius:18px}
    .contact-service-icon{width:38px;height:38px}
    .contact-service-card h3{font-size:14px;line-height:1.15;white-space:nowrap}
    .contact-service-card p{font-size:11px;line-height:1.35}
    .contact-service-card > i:last-child{font-size:11px}
}


/* =========================================================
   DOG PARK — REVISED CONTENT / PRICE LIST / PROMO MODAL
========================================================= */

.dog-park-hero-tagline{
    margin-top:18px;
    font-weight:700;
    letter-spacing:.01em;
}

.dog-park-space-list{
    display:grid;
    gap:14px;
    margin-top:28px;
}

.dog-park-space-list article{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:16px 18px;
    background:#fff;
    border:1px solid rgba(16,63,54,.09);
    border-radius:18px;
}

.dog-park-space-list article > i{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:#e8f7f2;
    color:var(--green);
}

.dog-park-space-list h3{
    margin:0 0 4px;
    font-size:17px;
}

.dog-park-space-list p{
    margin:0;
    font-size:14px;
    line-height:1.6;
}

.dog-park-callout{
    margin-top:25px;
    font-size:15px;
    font-weight:800;
    letter-spacing:.08em;
    color:var(--green);
}

.dog-park-callout-copy{
    margin:4px 0 0 !important;
    font-size:14px;
}

.dog-park-pricing{
    background:#fff;
}

.dog-service-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-top:50px;
}

.dog-service-card{
    position:relative;
    padding:30px;
    border:1px solid rgba(16,63,54,.11);
    border-radius:28px;
    background:#fbfaf5;
    box-shadow:0 14px 35px rgba(17,52,43,.06);
    overflow:hidden;
}

.dog-service-card:after{
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    border-radius:50%;
    right:-90px;
    top:-90px;
    background:#e8f7f2;
    opacity:.7;
}

.dog-service-icon{
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:#25A17E;
    color:#fff;
    font-size:21px;
    margin-bottom:18px;
}

.dog-service-label{
    display:block;
    color:#8E6E53;
    font-size:11px;
    font-weight:800;
    letter-spacing:.13em;
}

.dog-service-card h3{
    margin:5px 0 22px;
    font-size:28px;
}

.dog-price-table{
    display:grid;
    gap:0;
}

.dog-price-table > div{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:18px;
    row-gap:2px;
    padding:15px 0;
    border-top:1px solid rgba(16,63,54,.11);
}

.dog-price-table span{
    font-size:14px;
    font-weight:700;
    color:var(--ink);
}

.dog-price-table strong{
    font-size:22px;
    line-height:1.1;
    color:#25A17E;
    white-space:nowrap;
}

.dog-price-table small{
    grid-column:1 / -1;
    color:var(--muted);
    font-size:12px;
}

.dog-rules-box-large{
    align-items:start;
}

.dog-rules-box-large .dog-rules-points{
    gap:10px;
}

.dog-rules-box-large .dog-rules-points > div{
    align-items:flex-start;
    line-height:1.5;
}

.dog-park-hours{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:10px;
    padding-top:22px;
    border-top:1px solid rgba(16,63,54,.12);
}

.dog-park-hours > i{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:#25A17E;
    color:#fff;
}

.dog-park-hours small{
    display:block;
    color:var(--muted);
    font-size:10px;
    font-weight:800;
    letter-spacing:.12em;
}

.dog-park-hours strong{
    display:block;
    color:var(--ink);
    font-size:18px;
}


/* =========================================================
   DOG PARK AREA GALLERY — GRID + LIGHTBOX PREVIEW
========================================================= */
.dog-area-grid{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-auto-rows:180px;
    gap:14px;
    margin-top:34px;
}

.dog-area-card{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    min-width:0;
    padding:0;
    border:0;
    border-radius:18px;
    overflow:hidden;
    background:#f4f0e5;
    cursor:zoom-in;
    box-shadow:0 12px 30px rgba(17,52,43,.08);
    text-align:left;
    isolation:isolate;
}

.dog-area-card:nth-child(1){grid-column:span 6;grid-row:span 2;}
.dog-area-card:nth-child(2),
.dog-area-card:nth-child(3){grid-column:span 3;grid-row:span 2;}
.dog-area-card:nth-child(4),
.dog-area-card:nth-child(5){grid-column:span 3;grid-row:span 1;}

.dog-area-card img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .45s ease;
}

.dog-area-card::after{
    content:"";
    position:absolute;
    inset:35% 0 0;
    z-index:1;
    background:linear-gradient(to top,rgba(5,28,22,.78),transparent);
    pointer-events:none;
}

.dog-area-card:hover img{transform:scale(1.045);}
.dog-area-card:focus-visible{outline:3px solid #25A17E;outline-offset:3px;}

.dog-area-overlay{
    position:absolute;
    left:18px;
    right:48px;
    bottom:16px;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:3px;
    color:#fff;
    pointer-events:none;
}

.dog-area-number{
    font-size:10px;
    font-weight:800;
    letter-spacing:.12em;
    opacity:.9;
}

.dog-area-title{
    font-size:15px;
    line-height:1.2;
    font-weight:700;
}

.dog-area-hint{
    position:absolute;
    right:14px;
    bottom:14px;
    z-index:3;
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.9);
    color:#173d2d;
    box-shadow:0 5px 16px rgba(0,0,0,.16);
    pointer-events:none;
}

.gallery-modal{
    position:fixed;
    inset:0;
    z-index:10060;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease,visibility .2s ease;
}

.gallery-modal.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.gallery-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(5,25,20,.86);
    backdrop-filter:blur(5px);
}

.gallery-modal-dialog{
    position:relative;
    z-index:1;
    width:min(1100px,96vw);
    max-height:calc(100vh - 48px);
    padding:12px;
    border-radius:20px;
    background:#fff;
    box-shadow:0 30px 90px rgba(0,0,0,.35);
}

.gallery-modal-image{
    display:block;
    width:100%;
    max-height:calc(100vh - 125px);
    object-fit:contain;
    border-radius:13px;
    background:#f4f0e5;
}

.gallery-modal-caption{
    padding:12px 6px 2px;
    color:#173d2d;
    font-size:14px;
    font-weight:700;
    text-align:center;
}

.gallery-modal-close{
    position:absolute;
    top:22px;
    right:22px;
    z-index:4;
    width:40px;
    height:40px;
    border:0;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.95);
    color:#173d2d;
    cursor:pointer;
    box-shadow:0 6px 20px rgba(0,0,0,.2);
}

.gallery-modal-close:hover{background:#fff;transform:scale(1.04);}

@media(max-width:900px){
    .dog-area-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-auto-rows:210px;
    }
    .dog-area-card:nth-child(n){grid-column:span 1;grid-row:span 1;}
    .dog-area-card:first-child{grid-column:span 2;grid-row:span 2;}
}

@media(max-width:560px){
    .dog-area-grid{grid-template-columns:1fr;grid-auto-rows:250px;gap:12px;}
    .dog-area-card:nth-child(n),.dog-area-card:first-child{grid-column:span 1;grid-row:span 1;}
    .dog-area-overlay{left:14px;bottom:14px;}
    .gallery-modal{padding:12px;}
    .gallery-modal-dialog{width:100%;max-height:calc(100vh - 24px);padding:8px;border-radius:16px;}
    .gallery-modal-image{max-height:calc(100vh - 95px);}
    .gallery-modal-close{top:16px;right:16px;}
}

/* =========================================================
   PROMOTION POPUP
========================================================= */

.promo-modal{
    position:fixed;
    inset:0;
    z-index:10050;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease, visibility .25s ease;
}

.promo-modal.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.promo-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(7,31,25,.72);
    backdrop-filter:blur(5px);
}

.promo-modal-dialog{
    position:relative;
    z-index:1;
    width:min(720px,100%);
    max-height:calc(100vh - 44px);
    overflow:auto;
    background:#fff;
    border-radius:26px;
    box-shadow:0 30px 90px rgba(0,0,0,.28);
    scrollbar-width:thin;
}

.promo-modal-close{
    position:absolute;
    top:13px;
    right:13px;
    z-index:4;
    width:40px;
    height:40px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    color:#173d2d;
    cursor:pointer;
    box-shadow:0 5px 18px rgba(0,0,0,.12);
}

.promo-modal-counter{
    position:absolute;
    top:18px;
    left:18px;
    z-index:4;
    padding:7px 11px;
    border-radius:999px;
    background:rgba(23,61,45,.9);
    color:#fff;
    font-size:11px;
    font-weight:700;
}

.promo-modal-slide{
    display:none;
}

.promo-modal-slide.is-active{
    display:block;
}

.promo-modal-image-wrap{
    width:100%;
    background:#f4f0e5;
}

.promo-modal-image-wrap img{
    width:100%;
    max-height:470px;
    object-fit:contain;
    margin:auto;
}

.promo-modal-content{
    padding:28px 30px 24px;
}

.promo-modal-eyebrow{
    display:block;
    margin-bottom:8px;
    color:#25A17E;
    font-size:10px;
    font-weight:800;
    letter-spacing:.16em;
}

.promo-modal-content h2{
    margin:0;
    font-size:clamp(30px,5vw,44px);
    line-height:1.05;
}

.promo-modal-discount{
    display:inline-block;
    margin-top:12px;
    color:#25A17E;
    font-size:22px;
}

.promo-modal-content p{
    margin:12px 0 6px;
    color:var(--muted);
}

.promo-modal-content small{
    color:#6f7c75;
}

.promo-modal-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    padding:0 24px 18px;
}

.promo-modal-nav > button{
    width:34px;
    height:34px;
    border:1px solid #d8e1dc;
    border-radius:50%;
    background:#fff;
    color:#173d2d;
    cursor:pointer;
}

.promo-modal-dots{
    display:flex;
    align-items:center;
    gap:7px;
}

.promo-modal-dots button{
    width:8px;
    height:8px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#cdd9d3;
    cursor:pointer;
}

.promo-modal-dots button.is-active{
    width:24px;
    border-radius:999px;
    background:#25A17E;
}

.promo-modal-contact{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:calc(100% - 40px);
    margin:0 20px 20px;
    padding:15px 18px;
    border-radius:14px;
    background:#25A17E;
    color:#fff;
    font-weight:800;
    text-align:center;
    transition:transform .2s ease, background .2s ease;
}

.promo-modal-contact:hover{
    color:#fff;
    background:#1f8e70;
    transform:translateY(-1px);
}

@media(max-width:700px){
    .dog-service-grid{
        grid-template-columns:1fr;
    }

    .dog-service-card{
        padding:24px 20px;
    }

    .dog-price-table > div{
        grid-template-columns:minmax(0,1fr) auto;
    }

    .promo-modal{
        padding:12px;
    }

    .promo-modal-dialog{
        max-height:calc(100vh - 24px);
        border-radius:20px;
    }

    .promo-modal-image-wrap img{
        max-height:52vh;
    }

    .promo-modal-content{
        padding:22px 20px 18px;
    }

    .promo-modal-contact{
        width:calc(100% - 28px);
        margin:0 14px 14px;
    }
}

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

@media (max-width:1000px){

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


    .about-story-grid{
        gap:45px;
    }


    .about-why-grid{
        gap:50px;
    }

}


@media (max-width:700px){

    .about-hero{
        background-image:
            linear-gradient(
                180deg,
                rgba(0,0,0,0.30) 0%,
                rgba(0,0,0,0.35) 40%,
                rgba(0,0,0,0.70) 100%
            ),
            url("../img/home_bg_2.webp");

        background-size:cover;
        background-position:center center;
        background-repeat:no-repeat;
    }

}



    .about-hero .page-hero-inner{
        padding-top:130px;
        padding-bottom:80px;
    }


    .about-hero h1{
        font-size:48px;

        letter-spacing:-2px;
    }


    .about-hero p{
        font-size:16px;
    }


    .about-story-grid{
        grid-template-columns:1fr;

        gap:35px;
    }


    .about-story-image img{
        height:420px;
    }


    .about-pillars{
        grid-template-columns:1fr;

        gap:15px;
    }


    .about-pillar{
        padding:25px;
    }


    .about-why-grid{
        grid-template-columns:1fr;

        gap:45px;
    }


    .about-why-content h2{
        font-size:42px;
    }


    .experience-grid{
        grid-template-columns:1fr;

        gap:18px;
    }


    .experience-image{
        height:270px;
    }


    .experience-body{
        padding:24px;
    }


    .promise-box{
        min-height:500px;

        padding:40px 28px;

        align-items:flex-start;
    }


    .promise-content h2{
        font-size:44px;
    }


    .promise-paw{
        width:300px;
        height:300px;

        right:-100px;
        bottom:-100px;

        font-size:130px;
    }


    .about-cta{
        padding:40px 28px;

        flex-direction:column;

        align-items:flex-start;

        gap:30px;
    }

/* =========================================================
   DOG PARK PAGE
========================================================= */


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

.dog-park-hero{
    position:relative;

    min-height:560px;

    display:flex;
    align-items:center;

    overflow:hidden;

    color:#fff;

    background-image:
        url("../img/dog-park-bg.webp");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}


.dog-park-hero-overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(8,45,38,.72) 0%,
            rgba(8,45,38,.45) 45%,
            rgba(8,45,38,.10) 100%
        );

    z-index:1;
}


.dog-park-hero .page-hero-inner{
    position:relative;

    z-index:2;

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


.dog-park-hero .eyebrow{
    color:#fff;
}


.dog-park-hero .eyebrow:before{
    background:#7ce0bf;
}


.dog-park-hero h1{
    max-width:1500px;

    color:#fff;

    font-size:clamp(48px,6vw,82px);

    line-height:1.02;

    letter-spacing:-3px;

    margin-bottom:25px;
}


.dog-park-hero p{
    max-width:620px;

    color:rgba(255,255,255,.90);

    font-size:18px;

    line-height:1.65;
}


/* =========================================================
   INTRO
========================================================= */

.dog-park-intro{
    align-items:center;
}


.dog-park-image{
    overflow:hidden;

    border-radius:32px;
}


.dog-park-image img{
    width:100%;

    height:560px;

    object-fit:cover;

    display:block;
}


.dog-park-intro h2{
    font-size:clamp(38px,4vw,58px);

    line-height:1.05;

    margin-bottom:25px;
}


.dog-park-intro p{
    color:var(--muted);

    line-height:1.75;

    margin-bottom:18px;
}


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

.dog-park-benefits{
    display:grid;

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

    gap:18px;

    margin-top:55px;
}


.dog-benefit{
    background:#fff;

    border:1px solid rgba(16,63,54,.09);

    border-radius:24px;

    padding:32px;

    text-align:center;
}


.dog-benefit-icon{
    width:64px;
    height:64px;

    margin:0 auto 22px;

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

    border-radius:50%;

    background:#e8f7f2;

    color:var(--green);

    font-size:22px;
}


.dog-benefit h3{
    font-size:24px;

    margin-bottom:12px;
}


.dog-benefit p{
    color:var(--muted);

    line-height:1.65;

    margin:0;
}


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

.dog-park-features{
    display:grid;

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

    gap:18px;

    margin-top:45px;
}


.dog-feature{
    position:relative;

    min-height:280px;

    padding:30px;

    border:1px solid rgba(16,63,54,.12);

    border-radius:26px;

    background:#fff;

    overflow:hidden;
}


.dog-feature-number{
    position:absolute;

    top:22px;
    right:24px;

    color:rgba(16,63,54,.25);

    font-size:13px;

    font-weight:800;
}


.dog-feature > i{
    display:block;

    width:52px;
    height:52px;

    margin-bottom:30px;

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

    border-radius:15px;

    background:#e8f7f2;

    color:var(--green);
}


.dog-feature h3{
    font-size:24px;

    margin-bottom:12px;
}


.dog-feature p{
    color:var(--muted);

    line-height:1.65;
}


/* =========================================================
   PARK MOMENT
========================================================= */

.dog-park-moment{
    display:grid;

    grid-template-columns:
        1.05fr
        .95fr;

    gap:70px;

    align-items:center;
}


.dog-park-moment-image{
    overflow:hidden;

    border-radius:32px;
}


.dog-park-moment-image img{
    width:100%;

    height:500px;

    object-fit:cover;

    display:block;
}


.dog-park-moment-content h2{
    font-size:clamp(38px,4vw,58px);

    line-height:1.05;

    margin-bottom:25px;
}


.dog-park-moment-content p{
    color:var(--muted);

    line-height:1.75;
}


/* =========================================================
   RULES
========================================================= */

.dog-park-rules{
    background:#fff;
}


.dog-rules-box{
    padding:60px;

    border-radius:34px;

    background:#f8f1e8;

    display:grid;

    grid-template-columns:
        1.1fr
        .9fr;

    column-gap:70px;

    align-items:center;
}


.dog-rules-box h2{
    font-size:clamp(38px,4vw,55px);

    line-height:1.05;

    margin-bottom:20px;
}


.dog-rules-box > div:first-child p{
    max-width:620px;

    color:var(--muted);

    line-height:1.7;
}


.dog-rules-points{
    display:flex;

    flex-direction:column;

    gap:16px;
}


.dog-rules-points > div{
    display:flex;

    align-items:center;

    gap:14px;

    padding:16px 18px;

    background:#fff;

    border-radius:15px;

    color:var(--ink);
}


.dog-rules-points i{
    color:var(--green);

    width:22px;

    text-align:center;
}


.dog-rules-box > .btn{
    margin-top:30px;

    justify-self:start;
}


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

@media (max-width:1000px){

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


    .dog-park-moment{
        gap:40px;
    }


    .dog-rules-box{
        gap:40px;
    }

}


@media (max-width:700px){

    .dog-park-hero{
        min-height:680px;

        background-position:
            58% center;
    }


    .dog-park-hero .page-hero-inner{
        padding-top:130px;
        padding-bottom:80px;
    }


    .dog-park-hero h1{
        font-size:48px;

        letter-spacing:-2px;
    }


    .dog-park-hero p{
        font-size:16px;
    }


    .dog-park-image img{
        height:420px;
    }


    .dog-park-intro{
        gap:35px;
    }


    .dog-park-intro h2{
        font-size:42px;
    }


    .dog-park-benefits,
    .dog-park-features{
        grid-template-columns:1fr;
    }


    .dog-benefit{
        text-align:left;
    }


    .dog-benefit-icon{
        margin-left:0;
    }


    .dog-feature{
        min-height:240px;
    }


    .dog-park-moment{
        grid-template-columns:1fr;

        gap:35px;
    }


    .dog-park-moment-image img{
        height:420px;
    }


    .dog-park-moment-content h2{
        font-size:42px;
    }


    .dog-rules-box{
        grid-template-columns:1fr;

        padding:35px 25px;

        gap:30px;
    }


    .dog-rules-box h2{
        font-size:40px;
    }


    .dog-rules-box > .btn{
        margin-top:0;
    }

}


/* =========================================================
   HOTEL & DAY CARE PAGE
========================================================= */


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

.hotel-hero{
    position:relative;

    min-height:560px;

    display:flex;
    align-items:center;

    overflow:hidden;

    color:#fff;

    background-image:
        url("../img/hotel-daycare-bg.webp");

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}


.hotel-hero-overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(8,45,38,.72) 0%,
            rgba(8,45,38,.48) 45%,
            rgba(8,45,38,.15) 100%
        );

    z-index:1;
}


.hotel-hero .page-hero-inner{
    position:relative;

    z-index:2;

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


.hotel-hero .eyebrow{
    color:#fff;
}


.hotel-hero .eyebrow:before{
    background:#7ce0bf;
}


.hotel-hero h1{
    max-width:800px;

    color:#fff;

    font-size:clamp(48px,6vw,82px);

    line-height:1.02;

    letter-spacing:-3px;

    margin-bottom:25px;
}


.hotel-hero p{
    max-width:620px;

    color:rgba(255,255,255,.90);

    font-size:18px;

    line-height:1.65;
}


/* =========================================================
   INTRO
========================================================= */

.hotel-intro{
    align-items:center;
}


.hotel-intro-image{
    overflow:hidden;

    border-radius:32px;
}


.hotel-intro-image img{
    width:100%;

    height:560px;

    object-fit:cover;

    display:block;
}


.hotel-intro h2{
    font-size:clamp(38px,4vw,58px);

    line-height:1.05;

    margin-bottom:25px;
}


.hotel-intro p{
    color:var(--muted);

    line-height:1.75;

    margin-bottom:18px;
}


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

.hotel-benefits{
    display:grid;

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

    gap:18px;

    margin-top:55px;
}


.hotel-benefit{
    padding:35px 28px;

    background:#fff;

    border:1px solid rgba(16,63,54,.10);

    border-radius:24px;

    text-align:center;
}


.hotel-benefit-icon{
    width:64px;
    height:64px;

    margin:0 auto 22px;

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

    border-radius:50%;

    background:#e8f7f2;

    color:var(--green);

    font-size:22px;
}


.hotel-benefit h3{
    font-size:22px;

    margin-bottom:12px;
}


.hotel-benefit p{
    color:var(--muted);

    line-height:1.65;

    margin:0;
}


/* =========================================================
   HOTEL OPTIONS
========================================================= */

.hotel-options{
    display:grid;

    grid-template-columns:
        1.05fr
        .95fr;

    gap:75px;

    align-items:center;
}


.hotel-options-image{
    overflow:hidden;

    border-radius:32px;
}


.hotel-options-image img{
    width:100%;

    height:520px;

    object-fit:cover;

    display:block;
}


.hotel-options-content h2{
    font-size:clamp(38px,4vw,58px);

    line-height:1.05;

    margin-bottom:22px;
}


.hotel-options-content > p{
    color:var(--muted);

    line-height:1.75;

    margin-bottom:28px;
}


.stay-option{
    display:grid;

    grid-template-columns:
        52px
        1fr
        25px;

    gap:16px;

    align-items:center;

    padding:18px 20px;

    margin-bottom:12px;

    border:1px solid rgba(16,63,54,.12);

    border-radius:18px;

    background:#fff;
}


.stay-option-icon{
    width:48px;
    height:48px;

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

    border-radius:14px;

    background:#e8f7f2;

    color:var(--green);
}


.stay-option h3{
    font-size:18px;

    margin:0 0 4px;
}


.stay-option p{
    color:var(--muted);

    font-size:13px;

    margin:0;
}


.stay-option > i{
    color:var(--green);
}


/* =========================================================
   DAILY RHYTHM
========================================================= */

.daily-rhythm{
    display:grid;

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

    gap:0;

    margin-top:50px;

    border:1px solid rgba(16,63,54,.10);

    border-radius:25px;

    overflow:hidden;

    background:#fff;
}


.rhythm-item{
    position:relative;

    padding:35px 28px;

    text-align:center;

    border-right:1px solid rgba(16,63,54,.10);
}


.rhythm-item:last-child{
    border-right:0;
}


.rhythm-item > span{
    display:block;

    color:var(--green);

    font-size:12px;

    font-weight:800;

    margin-bottom:25px;
}


.rhythm-item > i{
    width:58px;
    height:58px;

    margin:0 auto 18px;

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

    border-radius:50%;

    background:#e8f7f2;

    color:var(--green);

    font-size:20px;
}


.rhythm-item h3{
    font-size:21px;

    margin-bottom:8px;
}


.rhythm-item p{
    color:var(--muted);

    font-size:14px;

    line-height:1.6;

    margin:0;
}


/* =========================================================
   PET PARENT
========================================================= */

.pet-parent-grid{
    display:grid;

    grid-template-columns:
        .9fr
        1.1fr;

    gap:80px;

    align-items:center;
}


.pet-parent-content{
    max-width:570px;
}


.pet-parent-content h2{
    font-size:clamp(38px,4vw,58px);

    line-height:1.05;

    margin-bottom:25px;
}


.pet-parent-content p{
    color:var(--muted);

    line-height:1.75;
}


.pet-parent-image{
    overflow:hidden;

    border-radius:32px;
}


.pet-parent-image img{
    width:100%;

    height:500px;

    object-fit:cover;

    display:block;
}


/* =========================================================
   BOOKING
========================================================= */

.booking-box{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

    padding:55px 60px;

    border-radius:32px;

    background:#f8f1e8;
}


.booking-box h2{
    font-size:clamp(38px,4vw,55px);

    line-height:1.05;

    margin-bottom:18px;
}


.booking-box p{
    max-width:650px;

    color:var(--muted);

    line-height:1.7;

    margin:0;
}


.booking-actions{
    display:flex;

    gap:12px;

    flex-wrap:wrap;

    flex-shrink:0;
}


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

@media (max-width:1000px){

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


    .hotel-options{
        gap:45px;
    }


    .pet-parent-grid{
        gap:45px;
    }


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


    .rhythm-item:nth-child(2){
        border-right:0;
    }


    .rhythm-item:nth-child(-n+2){
        border-bottom:1px solid rgba(16,63,54,.10);
    }


    .booking-box{
        flex-direction:column;

        align-items:flex-start;
    }

}


@media (max-width:700px){

    .hotel-hero{
        min-height:680px;

        background-position:
            60% center;
    }


    .hotel-hero .page-hero-inner{
        padding-top:130px;
        padding-bottom:80px;
    }


    .hotel-hero h1{
        font-size:48px;

        letter-spacing:-2px;
    }


    .hotel-hero p{
        font-size:16px;
    }


    .hotel-intro{
        grid-template-columns:1fr;

        gap:35px;
    }


    .hotel-intro-image img{
        height:420px;
    }


    .hotel-intro h2{
        font-size:42px;
    }


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

        gap:15px;
    }


    .hotel-benefit{
        text-align:left;

        padding:28px;
    }


    .hotel-benefit-icon{
        margin-left:0;
    }


    .hotel-options{
        grid-template-columns:1fr;

        gap:35px;
    }


    .hotel-options-image img{
        height:420px;
    }


    .hotel-options-content h2{
        font-size:42px;
    }


    .daily-rhythm{
        grid-template-columns:1fr;
    }


    .rhythm-item{
        border-right:0;

        border-bottom:1px solid rgba(16,63,54,.10);
    }


    .rhythm-item:last-child{
        border-bottom:0;
    }


    .pet-parent-grid{
        grid-template-columns:1fr;

        gap:35px;
    }


    .pet-parent-content h2{
        font-size:42px;
    }


    .pet-parent-image img{
        height:420px;
    }


    .booking-box{
        padding:38px 25px;
    }


    .booking-box h2{
        font-size:40px;
    }


    .booking-actions{
        width:100%;

        flex-direction:column;
    }


    .booking-actions .btn{
        width:100%;

        text-align:center;
    }

}


/* =========================================================
   SALON & SPA PAGE
========================================================= */


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

.salon-hero{
    position:relative;

    min-height:560px;

    display:flex;
    align-items:center;

    overflow:hidden;

    color:#fff;

    background-image:
        url("../img/salon-spa-bg.webp");

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}


.salon-hero-overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(8,45,38,.72) 0%,
            rgba(8,45,38,.45) 45%,
            rgba(8,45,38,.12) 100%
        );

    z-index:1;
}


.salon-hero .page-hero-inner{
    position:relative;

    z-index:2;

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


.salon-hero .eyebrow{
    color:#fff;
}


.salon-hero .eyebrow:before{
    background:#7ce0bf;
}


.salon-hero h1{
    max-width:850px;

    color:#fff;

    font-size:clamp(48px,6vw,82px);

    line-height:1.02;

    letter-spacing:-3px;

    margin-bottom:25px;
}


.salon-hero p{
    max-width:650px;

    color:rgba(255,255,255,.90);

    font-size:18px;

    line-height:1.65;
}


/* =========================================================
   INTRO
========================================================= */

.salon-intro{
    align-items:center;
}


.salon-intro-image{
    overflow:hidden;

    border-radius:32px;
}


.salon-intro-image img{
    width:100%;

    height:560px;

    object-fit:cover;

    display:block;
}


.salon-intro h2{
    font-size:clamp(38px,4vw,58px);

    line-height:1.05;

    margin-bottom:25px;
}


.salon-intro p{
    color:var(--muted);

    line-height:1.75;

    margin-bottom:18px;
}


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

.salon-benefits{
    display:grid;

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

    gap:18px;

    margin-top:55px;
}


.salon-benefit{
    padding:35px 28px;

    text-align:center;

    background:#fff;

    border:1px solid rgba(16,63,54,.10);

    border-radius:24px;
}


.salon-benefit-icon{
    width:64px;
    height:64px;

    margin:0 auto 22px;

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

    border-radius:50%;

    background:#e8f7f2;

    color:var(--green);

    font-size:22px;
}


.salon-benefit h3{
    font-size:22px;

    margin-bottom:12px;
}


.salon-benefit p{
    color:var(--muted);

    line-height:1.65;

    margin:0;
}


/* =========================================================
   SALON SERVICES
========================================================= */

.salon-services{
    display:grid;

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

    gap:18px;

    margin-top:45px;
}


.salon-service{
    position:relative;

    min-height:300px;

    padding:32px;

    border:1px solid rgba(16,63,54,.10);

    border-radius:26px;

    background:#fff;

    overflow:hidden;
}


.salon-service-number{
    position:absolute;

    top:22px;
    right:24px;

    color:rgba(16,63,54,.22);

    font-size:13px;

    font-weight:800;
}


.salon-service-icon{
    width:55px;
    height:55px;

    margin-bottom:28px;

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

    border-radius:16px;

    background:#e8f7f2;

    color:var(--green);

    font-size:20px;
}


.salon-service h3{
    font-size:23px;

    margin-bottom:12px;
}


.salon-service p{
    color:var(--muted);

    line-height:1.65;

    margin:0;
}


/* =========================================================
   GROOMING JOURNEY
========================================================= */

.grooming-journey{
    display:grid;

    grid-template-columns:
        1fr
        40px
        1fr
        40px
        1fr
        40px
        1fr;

    align-items:center;

    margin-top:55px;

    padding:35px 20px;

    border:1px solid rgba(16,63,54,.10);

    border-radius:28px;

    background:#fff;
}


.journey-step{
    text-align:center;

    padding:10px;
}


.journey-step > span{
    display:block;

    color:var(--green);

    font-size:12px;

    font-weight:800;

    margin-bottom:18px;
}


.journey-icon{
    width:58px;
    height:58px;

    margin:0 auto 18px;

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

    border-radius:50%;

    background:#e8f7f2;

    color:var(--green);

    font-size:20px;
}


.journey-step h3{
    font-size:20px;

    margin-bottom:8px;
}


.journey-step p{
    color:var(--muted);

    font-size:13px;

    line-height:1.6;

    margin:0;
}


.journey-line{
    height:1px;

    background:rgba(16,63,54,.15);
}


/* =========================================================
   BOOKING
========================================================= */

.salon-booking{
    display:grid;

    grid-template-columns:
        .95fr
        1.05fr;

    gap:75px;

    align-items:center;
}


.salon-booking-content{
    max-width:580px;
}


.salon-booking-content h2{
    font-size:clamp(38px,4vw,58px);

    line-height:1.05;

    margin-bottom:25px;
}


.salon-booking-content p{
    color:var(--muted);

    line-height:1.75;
}


.salon-booking-image{
    overflow:hidden;

    border-radius:32px;
}


.salon-booking-image img{
    width:100%;

    height:500px;

    object-fit:cover;

    display:block;
}


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

.salon-menu-box{
    padding:60px;

    border-radius:34px;

    background:#f8f1e8;

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    column-gap:70px;

    align-items:center;
}


.salon-menu-box h2{
    font-size:clamp(38px,4vw,55px);

    line-height:1.05;

    margin-bottom:20px;
}


.salon-menu-box > div:first-child p{
    max-width:600px;

    color:var(--muted);

    line-height:1.7;
}


.salon-menu-points{
    display:flex;

    flex-direction:column;

    gap:13px;
}


.salon-menu-points > div{
    display:flex;

    align-items:center;

    gap:14px;

    padding:15px 18px;

    border-radius:15px;

    background:#fff;
}


.salon-menu-points i{
    width:22px;

    color:var(--green);

    text-align:center;
}


.salon-menu-box > .btn{
    margin-top:30px;

    justify-self:start;
}


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

@media (max-width:1000px){

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


    .salon-booking{
        gap:45px;
    }


    .salon-menu-box{
        gap:40px;
    }

}


@media (max-width:700px){

    .salon-hero{
        min-height:680px;

        background-position:
            62% center;
    }


    .salon-hero .page-hero-inner{
        padding-top:130px;
        padding-bottom:80px;
    }


    .salon-hero h1{
        font-size:48px;

        letter-spacing:-2px;
    }


    .salon-hero p{
        font-size:16px;
    }


    .salon-intro{
        grid-template-columns:1fr;

        gap:35px;
    }


    .salon-intro-image img{
        height:420px;
    }


    .salon-intro h2{
        font-size:42px;
    }


    .salon-benefits,
    .salon-services{
        grid-template-columns:1fr;

        gap:15px;
    }


    .salon-benefit{
        text-align:left;

        padding:28px;
    }


    .salon-benefit-icon{
        margin-left:0;
    }


    .salon-service{
        min-height:240px;
    }


    .grooming-journey{
        grid-template-columns:1fr;

        gap:20px;

        padding:30px 20px;
    }


    .journey-line{
        width:1px;

        height:30px;

        margin:auto;
    }


    .salon-booking{
        grid-template-columns:1fr;

        gap:35px;
    }


    .salon-booking-content h2{
        font-size:42px;
    }


    .salon-booking-image img{
        height:420px;
    }


    .salon-menu-box{
        grid-template-columns:1fr;

        padding:38px 25px;

        gap:30px;
    }


    .salon-menu-box h2{
        font-size:40px;
    }


    .salon-menu-box > .btn{
        margin-top:0;
    }

}


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


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

.contact-hero{
    position:relative;

    min-height:560px;

    display:flex;
    align-items:center;

    overflow:hidden;

    color:#fff;

    background-image:
        url("../img/contact-bg.webp");

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}


.contact-hero-overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(8,45,38,.75) 0%,
            rgba(8,45,38,.48) 45%,
            rgba(8,45,38,.12) 100%
        );

    z-index:1;
}


.contact-hero .page-hero-inner{
    position:relative;

    z-index:2;

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


.contact-hero .eyebrow{
    color:#fff;
}


.contact-hero .eyebrow:before{
    background:#7ce0bf;
}


.contact-hero h1{
    max-width:850px;

    color:#fff;

    font-size:clamp(48px,6vw,82px);

    line-height:1.02;

    letter-spacing:-3px;

    margin-bottom:25px;
}


.contact-hero p{
    max-width:650px;

    color:rgba(255,255,255,.90);

    font-size:18px;

    line-height:1.65;
}


/* =========================================================
   CONTACT MAIN
========================================================= */

.contact-main-grid{
    display:grid;

    grid-template-columns:
        .85fr
        1.15fr
        .85fr;

    gap:18px;

    align-items:stretch;
}


.contact-card{
    padding:32px;

    border-radius:25px;
}


.contact-location-card{
    background:#f8f1e8;
}


.contact-location-card h3{
    font-size:25px;

    margin-bottom:25px;
}


.contact-item{
    display:flex;

    align-items:center;

    gap:15px;

    padding:17px 0;

    border-bottom:1px solid rgba(16,63,54,.12);
}


.contact-item:last-of-type{
    border-bottom:0;
}


.contact-icon{
    width:42px;
    height:42px;

    flex-shrink:0;

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

    border-radius:50%;

    background:#fff;

    color:var(--green);
}


.contact-item strong{
    display:block;

    font-size:14px;

    margin-bottom:3px;
}


.contact-item p{
    color:var(--muted);

    font-size:12px;

    line-height:1.5;

    margin:0;
}


.contact-full-btn{
    width:100%;

    margin-top:20px;

    text-align:center;
}


.contact-touch-card{
    background:#fff;

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


.contact-touch-card h2{
    font-size:clamp(36px,4vw,55px);

    line-height:1.05;

    margin-bottom:20px;
}


.contact-touch-card > p{
    color:var(--muted);

    line-height:1.7;
}


.contact-actions{
    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:25px;
}


.contact-note{
    margin-top:20px;

    font-size:12px !important;

    color:#8b918e !important;
}


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

.contact-map-card{
    padding:12px;

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

    border-radius:25px;

    background:#fff;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    gap:15px;
}


.contact-map-placeholder{
    min-height:300px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #eaf3ef,
            #dfeee9
        );

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:var(--ink);
}


.contact-map-placeholder i{
    width:60px;
    height:60px;

    margin-bottom:18px;

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

    border-radius:50%;

    background:var(--green);

    color:#fff;

    font-size:23px;
}


.contact-map-placeholder strong{
    font-size:20px;
}


.contact-map-placeholder span{
    margin-top:5px;

    font-size:14px;
}


.contact-map-placeholder small{
    margin-top:3px;

    color:var(--muted);
}


.contact-map-card .btn{
    width:100%;

    text-align:center;
}


/* =========================================================
   SERVICE SHORTCUTS
========================================================= */

.contact-services-head{
    display:grid;

    grid-template-columns:
        1fr
        .8fr;

    gap:70px;

    align-items:end;
}


.contact-services-head h2{
    max-width:700px;

    font-size:clamp(38px,4vw,58px);

    line-height:1.05;
}


.contact-services-head > p{
    color:var(--muted);

    line-height:1.75;

    margin-bottom:5px;
}


.contact-service-grid{
    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:15px;

    margin-top:45px;
}


.contact-service-card{
    display:grid;

    grid-template-columns:
        38px
        minmax(0,1fr)
        16px;

    gap:15px;

    align-items:center;

    padding:20px;

    background:#fff;

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

    border-radius:20px;

    text-decoration:none;

    color:var(--ink);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.contact-service-card:hover{
    transform:translateY(-4px);

    box-shadow:0 12px 30px rgba(16,63,54,.08);
}


.contact-service-icon{
    width:50px;
    height:50px;

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

    border-radius:15px;

    background:#e8f7f2;

    color:var(--green);
}


.contact-service-card h3{
    font-size:16px;

    margin:0 0 4px;
}


.contact-service-card p{
    color:var(--muted);

    font-size:11px;

    margin:0;
}


.contact-service-card > i{
    color:var(--green);
}


/* =========================================================
   HELP
========================================================= */

.contact-help-grid{
    display:grid;

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

    gap:18px;

    margin-top:50px;
}


.contact-help-card{
    padding:35px;

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

    border-radius:25px;

    background:#fff;
}


.contact-help-icon{
    width:58px;
    height:58px;

    margin-bottom:25px;

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

    border-radius:16px;

    background:#e8f7f2;

    color:var(--green);

    font-size:21px;
}


.contact-help-card h3{
    font-size:23px;

    margin-bottom:12px;
}


.contact-help-card p{
    color:var(--muted);

    line-height:1.7;

    margin:0;
}


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

.contact-faq{
    display:grid;

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

    gap:12px;

    margin-top:45px;
}


.contact-faq .faq-item{
    padding:25px 28px;

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

    border-radius:20px;

    background:#fff;
}


.contact-faq .faq-item h4{
    margin-bottom:10px;

    font-size:16px;
}


.contact-faq .faq-item p{
    color:var(--muted);

    line-height:1.65;

    margin:0;

    font-size:13px;
}


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

.contact-final-cta{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;
}


.contact-final-cta h2{
    max-width:650px;
}


.contact-final-cta p{
    max-width:600px;
}


.contact-final-actions{
    display:flex;

    gap:10px;

    flex-shrink:0;
}


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

@media (max-width:1000px){

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


    .contact-map-card{
        grid-column:span 2;
    }


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


    .contact-services-head{
        grid-template-columns:1fr;
        gap:20px;
    }

}


@media (max-width:700px){

    .contact-hero{
        min-height:680px;

        background-position:
            60% center;
    }


    .contact-hero .page-hero-inner{
        padding-top:130px;
        padding-bottom:80px;
    }


    .contact-hero h1{
        font-size:48px;

        letter-spacing:-2px;
    }


    .contact-hero p{
        font-size:16px;
    }


    .contact-main-grid{
        grid-template-columns:1fr;
    }


    .contact-map-card{
        grid-column:auto;
    }


    .contact-map-placeholder{
        min-height:250px;
    }


    .contact-service-grid{
        grid-template-columns:1fr;
    }


    .contact-help-grid{
        grid-template-columns:1fr;
    }


    .contact-faq{
        grid-template-columns:1fr;
    }


    .contact-final-cta{
        flex-direction:column;

        align-items:flex-start;
    }


    .contact-final-actions{
        width:100%;

        flex-direction:column;
    }


    .contact-final-actions .btn{
        width:100%;

        text-align:center;
    }


    .contact-actions{
        flex-direction:column;
    }


    .contact-actions .btn{
        width:100%;

        text-align:center;
    }

}
/* =========================================================
   UPCOMING EVENTS
========================================================= */
.events-hero{
    min-height:520px;
    display:flex;
    align-items:center;
    background-size:cover;
    background-position:center;
    color:#fff;
}
.events-hero .page-hero-inner{
    max-width:850px;
}
.events-hero .eyebrow{
    color:#7ce0bf;
}
.events-hero h1{
    color:#fff;
    margin-bottom:18px;
}
.events-hero p{
    color:rgba(255,255,255,.9);
    max-width:700px;
    font-size:18px;
}
.event-card{
    overflow:hidden;
}
.event-card > img{
    width:100%;
    height:270px;
    object-fit:cover;
    display:block;
}
.event-empty-panel{
    min-height:300px;
    border-radius:24px;
    overflow:hidden;
    display:flex;
    align-items:center;
    padding:70px;
    background:linear-gradient(90deg,rgba(25,38,30,.72),rgba(25,38,30,.18)),url('../img/home_bg_2.webp') center/cover;
}
.event-empty-copy{
    max-width:600px;
    color:#fff;
}
.event-empty-copy .eyebrow{
    color:#7ce0bf;
}
.event-empty-copy h3{
    color:#fff;
    font-size:clamp(32px,4vw,52px);
    margin:12px 0;
}
.event-empty-copy p{
    color:rgba(255,255,255,.9);
    margin:0;
    max-width:560px;
}
.event-history-section{
    padding-top:100px;
}
.event-history-grid .event-history-card > img{
    height:240px;
}
.event-history-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:8px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#1fa982;
}
@media (max-width:767px){
    .events-hero{
        min-height:460px;
    }
    .event-empty-panel{
        padding:45px 30px;
        min-height:270px;
    }
}

/* =========================================================
   DOG PARK — FINAL GALLERY / PROMO RESPONSIVE OVERRIDES
========================================================= */
.dog-park-benefits{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.gallery-modal-dialog{
    width:min(1100px,96vw);
    max-width:96vw;
    max-height:calc(100vh - 32px);
    padding:12px;
    overflow:hidden;
}

.gallery-modal-media{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:0;
}

.gallery-modal-image{
    display:block;
    width:auto;
    max-width:100%;
    height:auto;
    max-height:calc(100vh - 125px);
    object-fit:contain;
}

.gallery-modal-arrow{
    position:absolute;
    top:50%;
    z-index:5;
    width:44px;
    height:44px;
    border:0;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.96);
    color:#173d2d;
    cursor:pointer;
    box-shadow:0 8px 24px rgba(0,0,0,.2);
    transform:translateY(-50%);
    transition:transform .18s ease,background .18s ease;
}

.gallery-modal-arrow:hover{
    background:#fff;
    transform:translateY(-50%) scale(1.05);
}

.gallery-modal-arrow[hidden]{display:none;}
.gallery-modal-prev{left:22px;}
.gallery-modal-next{right:22px;}

/* Let the popup follow the banner's natural aspect ratio instead of cropping it. */
.promo-modal-dialog{
    width:min(92vw,900px);
    max-width:92vw;
    max-height:calc(100vh - 32px);
}

.promo-modal-image-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    overflow:hidden;
}

.promo-modal-image-wrap img{
    display:block;
    width:auto;
    max-width:100%;
    height:auto;
    max-height:64vh;
    object-fit:contain;
}

@media(max-width:1000px){
    .dog-park-benefits{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:700px){
    .dog-park-benefits{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .gallery-modal{
        padding:10px;
    }

    .gallery-modal-dialog{
        width:100%;
        max-width:100%;
        max-height:calc(100vh - 20px);
        padding:8px;
        border-radius:16px;
    }

    .gallery-modal-image{
        max-height:calc(100vh - 105px);
    }

    .gallery-modal-arrow{
        width:38px;
        height:38px;
    }

    .gallery-modal-prev{left:14px;}
    .gallery-modal-next{right:14px;}

    .promo-modal{
        padding:10px;
    }

    .promo-modal-dialog{
        width:100%;
        max-width:100%;
        max-height:calc(100vh - 20px);
        border-radius:20px;
    }

    .promo-modal-image-wrap img{
        max-height:56vh;
    }
}

@media(max-width:560px){
    .dog-park-benefits{
        grid-template-columns:1fr;
    }

    .gallery-modal-caption{
        padding:10px 42px 2px;
        font-size:12px;
    }

    .gallery-modal-arrow{
        width:36px;
        height:36px;
    }
}