/* ---------------------------------------
   Brand variables (Gaia Grooming)
---------------------------------------- */
:root{
    --gg-deep-green: #1F3A28;
    --gg-mid-green:  #3E5E44;
    --gg-cream:      #F4F1E8;
    --gg-white:      #FFFFFF;

    /* Accent (olive-gold) */
    --gg-accent: #D8B24C;
    --gg-accent-soft: rgba(216,178,76,0.18);

    /* Premium sage-led tones */
    --gg-olive-panel: #E3ECDD;
    --gg-hero-neutral: rgba(255,255,255,0.55);
    --gg-section-soft: #EDF3ED;

    --gg-soft-sage: #DCE7DD;
    --gg-card-sage-light: #DCE7DD;
    --gg-card-sage: #C5D4C7;
    --gg-card-sage-deep: #B3C5B6;

    --gg-charcoal: #1F1F1F;

    /* UI tokens */
    --text:          #182018;
    --muted:         rgba(24, 32, 24, 0.72);
    --border:        rgba(31, 58, 40, 0.16);

    --radius-lg:     22px;
    --container:     1120px;
    --gutter:        clamp(20px, 3vw, 32px);

    --h1: clamp(2.2rem, 4.2vw, 3.3rem);
    --h2: clamp(1.6rem, 2.8vw, 2.1rem);
    --lead: clamp(1.05rem, 1.4vw, 1.2rem);

    scroll-behavior: smooth;
}

/* ---------------------------------------
   Anchor scrolling fix (sticky header offset)
---------------------------------------- */

/* 1) Tell the browser to offset anchor jumps by the header height */
html{
    scroll-padding-top: 132px; /* default (desktop) - tweak if needed */
}

/* 2) Make anchor targets keep breathing room under the sticky header */
section[id],
[id].section,
.hero,
.nav-divider{
    scroll-margin-top: 132px; /* match desktop header height */
}

/* 3) Responsive: header is shorter on mobile/tablet, so reduce offset */
@media (max-width: 900px){
    html{
        scroll-padding-top: 108px;
    }
    section[id],
    [id].section,
    .hero,
    .nav-divider{
        scroll-margin-top: 108px;
    }
}

/* ---------------------------------------
   Base
---------------------------------------- */
*{ box-sizing: border-box; }

body{
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    color: var(--text);
    background: var(--gg-cream);
    line-height: 1.6;
}

/* ---------------------------------------
   Layout container
---------------------------------------- */
.container{
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}


/* ---------------------------------------
   Header / Nav
---------------------------------------- */
.site-header{
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--gg-cream);
    border-bottom: 1px solid rgba(31,58,40,0.08);
}

.header-inner{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    min-height: 98px;
    column-gap: 28px;
}

.brand{
    justify-self: start;
    display: inline-flex;
    align-items: center;
}

.brand-logo{
    height: 84px;
    width: auto;
    max-height: 84px;
    display: block;
}

.site-nav{
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 26px;
}

.site-nav a{
    position: relative;
    text-decoration: none;
    color: var(--gg-deep-green);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.02em;
    padding: 4px 0;
    white-space: nowrap;
    transition: opacity 180ms ease;
}

.site-nav a::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 18px;
    height: 1.5px;
    background: var(--gg-accent);
    border-radius: 999px;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 180ms ease;
    opacity: 0.95;
}

.site-nav a:hover,
.site-nav a:focus-visible{
    opacity: 0.88;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after{
    transform: translateX(-50%) scaleX(1);
}

.skip-link{
    position: absolute;
    left: -9999px;
    top: auto;
}

.skip-link:focus{
    left: 12px;
    top: 12px;
    background: var(--gg-white);
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    z-index: 9999;
}

.nav-divider{
    max-width: var(--container);
    height: 1px;
    background: rgba(31,58,40,0.28);
    margin: 0 auto;
    padding: 0 var(--gutter);
    box-sizing: content-box;
}

/* ---------------------------------------
   Mobile Nav
---------------------------------------- */
.nav-toggle{
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    justify-self: end;
    margin-right: 2px;
    padding: 10px;
}

.nav-toggle .bar{
    display: block;
    width: 24px;
    height: 2px;
    background: var(--gg-deep-green);
    margin: 5px 0;
    border-radius: 999px;
}

.mobile-menu{
    background: var(--gg-cream);
    border-top: 1px solid rgba(31,58,40,0.08);
}

.mobile-nav{
    display: flex;
    flex-direction: column;
    padding: 20px 28px 26px;
    gap: 18px;
}

.mobile-nav a{
    text-decoration: none;
    color: var(--gg-deep-green);
    font-weight: 500;
    font-size: 1rem;
    position: relative;
    width: fit-content;
}

.mobile-nav a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 18px;
    height: 1.5px;
    background: var(--gg-accent);
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 180ms ease;
}

.mobile-nav a:hover::after,
.mobile-nav a:focus-visible::after{
    transform: scaleX(1);
}

@media (max-width: 900px){
    .site-nav{
        display: none;
    }

    .nav-toggle{
        display: block;
        justify-self: end;
    }

    .header-inner{
        min-height: 88px;
        column-gap: 18px;
    }

    .brand-logo{
        height: 72px;
        max-height: 72px;
    }
}
/* ---------------------------------------
   Sections
---------------------------------------- */
.section{
    padding: clamp(52px, 6vw, 88px) 0;
}

.section.alt{
    background: rgba(255,255,255,0.6);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* ---------------------------------------
   Typography
---------------------------------------- */
h1{
    font-size: var(--h1);
    line-height: 1.1;
    margin: 12px 0 16px;
}

h2{
    font-size: var(--h2);
    margin: 0 0 14px;
}

.lead{
    font-size: var(--lead);
    color: var(--muted);
    max-width: 60ch;
}

/* (Legacy accent styles kept harmless if you re-use later) */
.accent{
    color: var(--gg-deep-green);
    position: relative;
    display: inline-block;
}
.accent::after{
    content:"";
    position:absolute;
    left: -2%;
    right: -2%;
    bottom: 12%;
    height: 0.55em;
    background: var(--gg-accent-soft);
    border-radius: 999px;
    z-index: -1;
}
.dot{
    display:inline-block;
    width: 6px;
    height: 6px;
    background: var(--gg-accent);
    border-radius: 999px;
    margin: 0 10px;
    transform: translateY(-1px);
}

/* ---------------------------------------
   Hero (Framed split, boutique)
---------------------------------------- */
/* ---------------------------------------
   Hero (Premium split layout)
---------------------------------------- */

.hero{
    padding-top: clamp(30px, 3.2vw, 54px);
    padding-bottom: clamp(48px, 6vw, 80px);
}

/* Frame */
.hero-frame{
    border: 3px solid var(--gg-deep-green);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr; /* image slightly dominant */
    min-height: 460px;
    background: var(--gg-hero-neutral);
}

/* LEFT SIDE */

.hero-left{
    background:
            linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)),
            linear-gradient(135deg, rgba(216,178,76,0.05), rgba(255,255,255,0) 42%),
            var(--gg-olive-panel);
    padding: clamp(90px, 9vw, 120px) clamp(64px, 6vw, 90px) clamp(64px, 6vw, 90px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.hero-copy{
    width: 100%;
    max-width: 30ch;
}

/* Heading */

.hero-copy h1{
    margin: 0 0 26px; /* was 22px */
    font-weight: 620;
    letter-spacing: -0.045em;
    line-height: 1.08;
    font-size: clamp(2.2rem, 3vw, 3rem);
    max-width: 10ch;
    color: #142117;
}

/* Subtext */

.hero-sub{
    margin: 0 0 34px;
    color: rgba(24, 32, 24, 0.74);
    font-size: clamp(1.02rem, 1.08vw, 1.12rem);
    line-height: 1.8;
    max-width: 25ch;
}

/* CTA */

.hero-cta{
    margin-top: 6px;
    display: flex;
    justify-content: flex-start;
}

/* RIGHT SIDE */

.hero-right{
    position: relative;
}

.hero-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ---------------------------------------
   Tablet + Mobile
---------------------------------------- */

@media (max-width: 900px){

    .hero-frame{
        grid-template-columns: 1fr;
        min-height: unset;
    }

    .hero-left{
        padding: 44px 28px;
    }

    .hero-right{
        height: 340px;
    }

    .hero-copy h1{
        font-size: clamp(1.7rem, 5vw, 2.2rem);
        max-width: 16ch;
    }

}

/* Mobile */

@media (max-width: 520px){

    .hero-left{
        padding: 38px 22px;
    }

    .hero-right{
        height: 300px;
    }

}
/* ---------------------------------------
   About
---------------------------------------- */
.section-about{
    background: var(--gg-section-soft);
    padding: clamp(22px, 2.6vw, 36px) 0 clamp(42px, 4.8vw, 64px);
}

.about-inner{
    max-width: 820px;
    margin: 0 auto;
    text-align: center; /* centred to hero */
}

.section-title{
    margin: 0 auto 18px;
    margin-top: 26px;
    display: inline-block;
    color: var(--gg-deep-green);
    font-weight: 600;              /* same authority as nav */
    font-size: clamp(1.25rem, 1.6vw, 1.55rem);
    letter-spacing: 0.35px;        /* same tracking as nav */
    position: relative;
    padding-bottom: 10px;
}

/* Solid underline block: same width as “About” */
.section-title::after{
    content:"";
    position:absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--gg-deep-green);
    border-radius: 999px;
}

.about-card{
    margin-top: 10px;
    padding: clamp(22px, 3.2vw, 34px);
    border-radius: var(--radius-lg);
    background: rgba(244, 241, 232, 0.55);
    border: 1px solid rgba(31,58,40,0.14);
    text-align: left;
}

.about-body{
    margin: 0 0 16px;
    color: var(--gg-charcoal);
    font-weight: 500; /* confident but not heavy */
    font-size: clamp(1.02rem, 1.12vw, 1.12rem);
    line-height: 1.9;
    letter-spacing: 0.25px;        /* ties into nav typography */
}

.about-body:last-of-type{
    margin-bottom: 22px;
}

.about-signoff{
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    color: var(--gg-charcoal);
}

.sig{
    font-size: clamp(1.35rem, 1.8vw, 1.6rem);
    font-weight: 500;
    letter-spacing: 0.2px;
    font-family: "Segoe Script", "Brush Script MT", "Snell Roundhand", cursive;
}

.xxx{
    font-size: 1rem;
    opacity: 0.85;
}

/* Mobile: keep it premium, not cramped */
@media (max-width: 700px){
    .about-card{
        text-align: left; /* improves readability on small screens */
    }
    .about-inner{
        text-align: center;
    }
}

/* ---------------------------------------
   Services section
---------------------------------------- */
.services{
    background: var(--gg-cream);
    padding: clamp(34px, 4vw, 54px) 0 clamp(44px, 5vw, 68px);
}

/* Breathing room between section start and title, then title to grid */
.services-head{
    text-align: center;
    padding-top: 0;
    padding-bottom: clamp(20px, 2.4vw, 28px);
}

/* Align blocks to About card width */
.services .services-wrap{
    max-width: 900px;         /* tweak to match your About card visually */
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Stack of cards with breathing room between */
.services-grid{
    display: grid;
    gap: clamp(18px, 2.6vw, 26px);
}

/* One service card - uniform premium sage */
.service-card,
.service-card.t1,
.service-card.t2,
.service-card.t3,
.service-card.t4,
.service-card.t5,
.service-card.t6{
    position: relative;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(31, 58, 40, 0.18);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    height: 340px;
    background:
            linear-gradient(145deg, var(--gg-card-sage-light) 0%, var(--gg-card-sage) 48%, var(--gg-card-sage-deep) 100%);
    box-shadow:
            0 10px 24px rgba(31,58,40,0.08),
            inset 0 1px 0 rgba(255,255,255,0.22);
}

.service-card::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 18% 18%, rgba(255,255,255,0.24), transparent 34%),
            radial-gradient(circle at 84% 20%, rgba(216,178,76,0.10), transparent 26%);
    pointer-events: none;
    z-index: 0;
}

.service-body,
.service-media{
    position: relative;
    z-index: 1;
}

.service-body{
    padding: clamp(24px, 2.8vw, 34px);
    padding-top: clamp(32px, 3.8vw, 42px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
}

.section-title{
    margin: 0 auto 14px;
    margin-top: 10px;
    display: inline-block;
    color: var(--gg-deep-green);
    font-weight: 600;
    font-size: clamp(1.25rem, 1.6vw, 1.55rem);
    letter-spacing: 0.35px;
    position: relative;
    padding-bottom: 10px;
}

.service-price{
    margin: 0 0 14px;
    color: rgba(24, 32, 24, 0.84);
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.2;
}

.service-meta{
    margin: 0;
    color: rgba(24, 32, 24, 0.74);
    font-size: 0.95rem;
    line-height: 1.72;
    max-width: 37ch;
}
/* Image side */
.service-media{
    position: relative;
    background:
            linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06)),
            rgba(255,255,255,0.10);
    border-left: 1px solid rgba(31, 58, 40, 0.14);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.service-media img{
    width: 100%;
    height: 100%;
    object-fit: contain;   /* preserves full image */
    display: block;
    cursor: zoom-in;
}

/* Mobile/tablet */
@media (max-width: 900px){
    .service-card,
    .service-card.t1,
    .service-card.t2,
    .service-card.t3,
    .service-card.t4,
    .service-card.t5,
    .service-card.t6{
        grid-template-columns: 1fr;
        height: auto;
    }

    .service-media{
        border-left: none;
        border-top: 1px solid rgba(31, 58, 40, 0.14);
        height: 280px;   /* fixed mobile image area */
        padding: 12px;
    }
}

/* ---------------------------------------
   Lightbox (image enlarge)
---------------------------------------- */
.lightbox{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.62);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    z-index: 9999;
}

.lightbox.is-open{ display: flex; }

.lightbox-inner{
    width: min(980px, 96vw);
    max-height: 86vh;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(0,0,0,0.25);
}

.lightbox-inner img{
    width: 100%;
    height: auto;
    max-height: 86vh;
    object-fit: contain;
    display: block;
    cursor: zoom-out;
}

/* ---------------------------------------
   Creative Grooming section
---------------------------------------- */
.section-creative{
    background: var(--gg-section-soft);
    padding: clamp(36px, 4.2vw, 56px) 0 clamp(48px, 5.2vw, 72px);
}

.creative-inner{
    max-width: 780px;
    margin: 0 auto;
    padding: 0 var(--gutter);
    text-align: center;
}

.creative-intro-card{
    margin-top: 10px;
    padding: clamp(22px, 3.2vw, 34px);
    border-radius: var(--radius-lg);
    background: rgba(244, 241, 232, 0.55);
    border: 1px solid rgba(31,58,40,0.14);
    text-align: left;
}

.creative-body{
    margin: 0 0 16px;
    color: var(--gg-charcoal);
    font-weight: 500;
    font-size: clamp(1.02rem, 1.12vw, 1.12rem);
    line-height: 1.9;
    letter-spacing: 0.25px;
}

.creative-body:last-of-type{
    margin-bottom: 0;
}

.creative-grid{
    margin-top: clamp(22px, 2.6vw, 30px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(22px, 2.8vw, 30px);
}

.creative-card::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            to bottom,
            rgba(0,0,0,0.04),
            rgba(0,0,0,0.08)
    );
    pointer-events: none;
}

.creative-card{
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(31, 58, 40, 0.12);
    background: rgba(244, 241, 232, 0.42);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.creative-card::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            to bottom,
            rgba(0,0,0,0.02),
            rgba(0,0,0,0.06)
    );
    pointer-events: none;
}

/* Fixed media frame so every card matches */
.creative-media-frame{
    width: 100%;
    aspect-ratio: 4 / 3.85;
    overflow: hidden;
    background: rgba(244, 241, 232, 0.42);
}

.creative-media{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (hover: hover){
    .creative-card:hover{
        transform: translateY(-4px);
        box-shadow: 0 16px 32px rgba(31,58,40,0.12);
    }
}


/* Keep videos tidy and premium */
.creative-video-card video{
    background: #000;
}

/* Mobile + tablet */
@media (max-width: 900px){
    .creative-inner{
        max-width: 680px;
    }

    .creative-grid{
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .creative-card:nth-child(2),
    .creative-card:nth-child(4){
        transform: none;
    }

    .creative-media-frame{
        aspect-ratio: 4 / 2.75;
    }

    .creative-card{
        min-height: unset;
    }
}

@media (max-width: 640px){
    .creative-inner{
        max-width: 100%;
        padding: 0 22px;
    }

    .creative-grid{
        gap: 16px;
    }

    .creative-media-frame{
        aspect-ratio: 4 / 2.6;
    }
}

@media (max-width: 520px){
    .creative-inner{
        padding: 0 20px;
    }

    .creative-media-frame{
        aspect-ratio: 4 / 2.45;
    }
}
/* ---------------------------------------
   Info Cards
---------------------------------------- */
.info-grid{
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 24px;
}

.info-card{
    background: rgba(255,255,255,0.75);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px;
}

.hours-list{
    list-style: none;
    padding: 0;
    margin: 0;
}

.hours-list li{
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

@media (max-width: 900px){
    .info-grid{
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------
   Buttons (rounded rectangle, consistent)
---------------------------------------- */
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 650;
    padding: 12px 18px;
    border-radius: 14px;
    border: 1px solid transparent;
    line-height: 1;
}

.btn.btn-solid{
    background: var(--gg-deep-green);
    color: var(--gg-cream);
    border: 1px solid rgba(31,58,40,0.22);
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 620;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 22px rgba(31,58,40,0.14);
    transition: transform .2s ease, box-shadow .2s ease;
}

.btn.btn-solid:hover,
.btn.btn-solid:focus-visible{
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(31,58,40,0.18);
    background: #18311f;
}

.btn.btn-ghost{
    background: rgba(255,255,255,0.7);
    color: var(--gg-deep-green);
    border-color: var(--border);
}

/* ---------------------------------------
   Reviews
---------------------------------------- */
/* ---------------------------------------
   Reviews
---------------------------------------- */
.section-reviews{
    background: var(--gg-cream);
    padding: clamp(36px, 4vw, 56px) 0 clamp(48px, 5vw, 72px);
}

.reviews-inner{
    max-width: 980px;
    margin: 0 auto;
    padding: 0 var(--gutter);
    text-align: center;
}

.reviews-grid{
    margin-top: clamp(22px, 2.6vw, 30px);
    display: grid;
    grid-template-columns: 1fr 1fr 0.9fr;
    gap: clamp(22px, 2.8vw, 30px);
    align-items: stretch;
}

/* Review cards */
.review-card{
    background: rgba(244, 241, 232, 0.72);
    border: 1px solid rgba(31,58,40,0.12);
    border-radius: var(--radius-lg);
    padding: clamp(24px, 2.8vw, 32px);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
    box-shadow: 0 8px 20px rgba(31,58,40,0.05);
}

.review-quote{
    margin: 0;
    color: rgba(24, 32, 24, 0.78);
    font-size: clamp(0.98rem, 1.02vw, 1.04rem);
    line-height: 1.78;
    letter-spacing: 0.01em;
}

.review-quote::before{
    content: "“";
    font-size: 2rem;
    color: #D8B24C;
    display: block;
    margin-bottom: 6px;
    line-height: 1;
}

.review-quote::after{
    content: "”";
    font-size: 2rem;
    color: #D8B24C;
    display: block;
    margin-top: 10px;
    line-height: 1;
}

.review-meta{
    margin: 18px 0 0;
    color: #6b7d6b;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Visual cards */
.review-visual-card{
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(31,58,40,0.12);
    background: rgba(244, 241, 232, 0.42);
    box-shadow: 0 8px 20px rgba(31,58,40,0.05);
    display: flex;
    flex-direction: column;
}

.review-visual-wide{
    grid-column: span 2;
}

.review-media-frame{
    width: 100%;
    overflow: hidden;
    background: rgba(244, 241, 232, 0.42);
}

.review-media-tall{
    aspect-ratio: 4 / 5;
}

.review-media-wide{
    aspect-ratio: 16 / 9;
}

.review-media{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #F4F1E8;
}

.review-caption{
    padding: 18px 22px 22px;
    text-align: left;
}

.review-caption p{
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(24, 32, 24, 0.74);
}

/* Subtle premium overlay */
.review-visual-card::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            to bottom,
            rgba(0,0,0,0.02),
            rgba(0,0,0,0.06)
    );
    pointer-events: none;
}

/* Desktop-only gentle stagger */
@media (min-width: 901px){
    .review-card:nth-child(2){
        transform: translateY(10px);
    }

    .review-visual-wide{
        transform: translateY(6px);
    }
}

@media (min-width: 901px){
    .review-visual-wide .review-media{
        object-fit: cover;
        object-position: center 35%;
    }
}

@media (min-width: 901px){
    .review-visual-wide .review-media{
        object-fit: contain;
        height: auto;
    }

    .review-visual-wide .review-media-frame{
        aspect-ratio: auto;
    }
}

.review-visual-wide{
    padding: 18px;
}

/* Tablet */
@media (max-width: 900px){
    .section-reviews{
        padding: 32px 0 42px;
    }

    .reviews-inner{
        max-width: 760px;
    }

    .reviews-grid{
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .review-visual-wide{
        grid-column: span 2;
    }

    .review-card:nth-child(2),
    .review-visual-wide{
        transform: none;
    }

    .review-media-tall{
        aspect-ratio: 4 / 3.35;
    }

    .review-media-wide{
        aspect-ratio: 16 / 8.8;
    }

    .review-quote{
        font-size: 0.96rem;
        line-height: 1.72;
    }
}

/* Mobile */
@media (max-width: 640px){
    .reviews-inner{
        max-width: 100%;
        padding: 0 22px;
    }

    .reviews-grid{
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .review-visual-wide{
        grid-column: auto;
    }

    .review-media-tall{
        aspect-ratio: 4 / 2.75;
    }

    .review-media-wide{
        aspect-ratio: 4 / 2.75;
    }

    .review-card{
        padding: 22px 20px;
    }
}

@media (max-width: 520px){
    .section-reviews{
        padding: 28px 0 36px;
    }

    .reviews-inner{
        padding: 0 20px;
    }

    .review-media-tall{
        aspect-ratio: 4 / 2.55;
    }

    .review-media-wide{
        aspect-ratio: 4 / 2.55;
    }

    .review-quote{
        font-size: 0.93rem;
        line-height: 1.72;
    }

    .review-meta{
        font-size: 0.84rem;
    }

    .review-caption{
        padding: 16px 18px 18px;
    }

    .review-caption p{
        font-size: 0.93rem;
        line-height: 1.58;
    }
}

@media (max-width: 900px){
    .review-1{ order: 1; }
    .image-1{ order: 2; }

    .review-2{ order: 3; }
    .image-2{ order: 4; }

    .review-3{ order: 5; }
}

/* ---------------------------------------
   Visit
---------------------------------------- */
.section-visit{
    background: var(--gg-section-soft);
    padding: clamp(28px, 3.2vw, 48px) 0 clamp(60px, 6vw, 90px);
}

.visit-inner{
    max-width: 980px;
    margin: 0 auto;
    padding: 0 var(--gutter);
    text-align: center;
}

.visit-intro-card{
    margin-top: 10px;
    padding: clamp(22px, 3.2vw, 34px);
    border-radius: var(--radius-lg);
    background: rgba(244, 241, 232, 0.55);
    border: 1px solid rgba(31,58,40,0.14);
    text-align: left;
}

.visit-body{
    margin: 0;
    color: var(--gg-charcoal);
    font-weight: 500;
    font-size: clamp(1.02rem, 1.12vw, 1.12rem);
    line-height: 1.9;
    letter-spacing: 0.25px;
}

.visit-grid{
    margin-top: clamp(28px, 3.2vw, 40px);
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(18px, 2.6vw, 26px);
    align-items: start;
}

.visit-card{
    border-radius: var(--radius-lg);
    background: rgba(244, 241, 232, 0.55);
    border: 1px solid rgba(31,58,40,0.14);
    padding: clamp(22px, 3vw, 32px);
    text-align: left;
}

.visit-card-title{
    margin: 0 0 18px;
    color: var(--gg-deep-green);
    font-weight: 650;
    letter-spacing: 0.1px;
    font-size: clamp(1.08rem, 1.45vw, 1.22rem);
    line-height: 1.2;
}

.visit-address{
    margin: 0 0 20px;
    color: rgba(24, 32, 24, 0.82);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.7;
}

.visit-actions{
    margin-bottom: 22px;
}

.visit-contact-list{
    margin-bottom: 18px;
}

.visit-contact-list p{
    margin: 0 0 10px;
    color: rgba(24, 32, 24, 0.74);
    font-size: 0.96rem;
    line-height: 1.65;
}

.visit-contact-list a{
    color: var(--gg-deep-green);
    text-decoration: none;
}

.visit-contact-list a:hover{
    text-decoration: underline;
}

.visit-label{
    display: inline-block;
    min-width: 60px;
    color: rgba(24, 32, 24, 0.58);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.visit-socials{
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 8px 0 24px;
}

.visit-socials a{
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(31,58,40,0.14);
    background: rgba(255,255,255,0.52);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.visit-socials a:hover,
.visit-socials a:focus-visible{
    transform: translateY(-1px);
    border-color: rgba(31,58,40,0.28);
    background: rgba(255,255,255,0.72);
}

.visit-socials svg{
    width: 18px;
    height: 18px;
    fill: var(--gg-deep-green);
}

.visit-map-frame{
    margin-top: 8px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(31,58,40,0.12);
    background: rgba(255,255,255,0.35);
}

.visit-map-frame iframe{
    display: block;
    width: 100%;
    min-height: 280px;
}

.visit-hours-list{
    list-style: none;
    padding: 0;
    margin: 0;
}

.visit-hours-list li{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(31,58,40,0.55);
    color: rgba(24, 32, 24, 0.78);
    font-size: 0.97rem;
    line-height: 1.5;
}

.visit-hours-list li span:first-child{
    font-weight: 600;
    color: var(--gg-deep-green);
}

.visit-hours-list li span:last-child{
    text-align: right;
    color: rgba(24, 32, 24, 0.72);
}


/* Tablet */
@media (max-width: 900px){
    .visit-grid{
        grid-template-columns: 1fr;
    }

    .visit-body{
        font-size: 0.98rem;
        line-height: 1.72;
    }

    .visit-map-frame iframe{
        min-height: 250px;
    }

    .visit-card-title{
        font-size: 1.12rem;
    }

    .visit-hours-list li{
        font-size: 0.93rem;
        padding: 11px 0;
    }

    .visit-socials a{
        width: 36px;
        height: 36px;
    }

    .visit-socials svg{
        width: 17px;
        height: 17px;
    }
}

/* Mobile */
@media (max-width: 520px){
    .visit-body{
        font-size: 0.93rem;
        line-height: 1.74;
    }

    .visit-card{
        padding: 22px 20px;
    }

    .visit-card-title{
        margin-bottom: 16px;
        font-size: 1.08rem;
    }

    .visit-address{
        font-size: 0.96rem;
    }

    .visit-hours-list li{
        padding: 10px 0;
        font-size: 0.9rem;
        gap: 14px;
    }

    .visit-hours-list li span:first-child{
        font-weight: 600;
    }

    .visit-hours-list li span:last-child{
        font-size: 0.9rem;
    }

    .visit-socials{
        gap: 12px;
    }

    .visit-socials a{
        width: 34px;
        height: 34px;
    }

    .visit-socials svg{
        width: 16px;
        height: 16px;
    }

    .visit-map-frame iframe{
        min-height: 220px;
    }

    .visit-note{
        font-size: 0.92rem;
        line-height: 1.68;
    }
}

/* ---------------------------------------
   Book
---------------------------------------- */
.section-book{
    background: var(--gg-cream);
    padding: clamp(28px, 3.2vw, 48px) 0 clamp(60px, 6vw, 90px);
}

.book-inner{
    max-width: 980px;
    margin: 0 auto;
    padding: 0 var(--gutter);
    text-align: center;
}

.book-intro-card{
    margin-top: 10px;
    padding: clamp(22px, 3.2vw, 34px);
    border-radius: var(--radius-lg);
    background: rgba(244, 241, 232, 0.55);
    border: 1px solid rgba(31,58,40,0.14);
    text-align: left;
}

.book-body{
    margin: 0;
    color: var(--gg-charcoal);
    font-weight: 500;
    font-size: clamp(1.02rem, 1.12vw, 1.12rem);
    line-height: 1.9;
    letter-spacing: 0.25px;
}

.book-grid{
    margin-top: clamp(28px, 3.2vw, 40px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 2.6vw, 26px);
    align-items: start;
}

.book-card,
.book-policies-card{
    border-radius: var(--radius-lg);
    background: rgba(244, 241, 232, 0.55);
    border: 1px solid rgba(31,58,40,0.14);
    padding: clamp(22px, 3vw, 32px);
    text-align: left;
}

.book-policies-card{
    margin-top: clamp(28px, 3.2vw, 40px);
}

.book-card-title{
    margin: 0 0 18px;
    color: var(--gg-deep-green);
    font-weight: 650;
    letter-spacing: 0.1px;
    font-size: clamp(1.08rem, 1.45vw, 1.22rem);
    line-height: 1.2;
}

.book-copy,
.book-note{
    color: rgba(24, 32, 24, 0.74);
    font-size: 0.97rem;
    line-height: 1.78;
}

.book-copy{
    margin: 0 0 22px;
}

.book-note{
    margin: 18px 0 0;
}

.book-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.book-contact-list p{
    margin: 0 0 10px;
    color: rgba(24, 32, 24, 0.74);
    font-size: 0.96rem;
    line-height: 1.65;
}

.book-contact-list a{
    color: var(--gg-deep-green);
    text-decoration: none;
}

.contact-details div{
    display: flex;
    gap: 12px;
}

.contact-details strong{
    min-width: 60px; /* aligns labels cleanly */
    font-weight: 500;
    opacity: 0.8;
}

.book-contact-list a:hover{
    text-decoration: underline;
}

.book-label{
    display: inline-block;
    min-width: 60px;
    color: rgba(24, 32, 24, 0.58);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.book-policy-summary{
    margin: 0 0 24px;
    padding-left: 18px;
    color: rgba(24, 32, 24, 0.76);
}

.book-policy-summary li{
    margin-bottom: 10px;
    line-height: 1.7;
}

.policy-accordions{
    display: grid;
    gap: 14px;
}

.policy-item{
    border: 1px solid rgba(31,58,40,0.12);
    border-radius: 18px;
    background: rgba(255,255,255,0.36);
    overflow: hidden;
}

.policy-item summary{
    list-style: none;
    cursor: pointer;
    padding: 18px 20px;
    color: var(--gg-deep-green);
    font-weight: 620;
    font-size: 0.98rem;
    line-height: 1.5;
    position: relative;
}

.policy-item summary::-webkit-details-marker{
    display: none;
}

.policy-item summary::after{
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--gg-deep-green);
}

.policy-item[open] summary::after{
    content: "–";
}

.policy-content{
    padding: 0 20px 20px;
    color: rgba(24, 32, 24, 0.74);
    font-size: 0.94rem;
    line-height: 1.8;
}

.policy-content p{
    margin: 0 0 14px;
}

/* Tablet */
@media (max-width: 900px){
    .book-grid{
        grid-template-columns: 1fr;
    }

    .book-body{
        font-size: 0.98rem;
        line-height: 1.72;
    }

    .book-actions{
        gap: 10px;
    }
}

/* Mobile */
@media (max-width: 520px){
    .book-body{
        font-size: 0.93rem;
        line-height: 1.74;
    }

    .book-card,
    .book-policies-card{
        padding: 22px 20px;
    }

    .book-copy,
    .book-note,
    .book-contact-list p,
    .policy-content{
        font-size: 0.92rem;
        line-height: 1.72;
    }

    .policy-item summary{
        padding: 16px 18px;
        font-size: 0.95rem;
    }

    .policy-content{
        padding: 0 18px 18px;
    }
}

@media (max-width: 768px){
    .book-card{
        padding: 22px 20px;
    }

    .book-card p{
        margin-bottom: 14px;
    }

    .book-actions{
        gap: 10px;
    }

    .contact-details{
        gap: 6px;
    }
}

.site-footer{
    background: var(--gg-soft-sage);
    padding: 60px 0 48px;
}

.site-footer .container{
    max-width: 760px;
}

.footer-rule{
    height: 3px;
    width: 100%;
    background: var(--gg-deep-green);
    border-radius: 999px;
    margin-bottom: 28px;
}

.footer-content p{
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--gg-deep-green);
    opacity: 0.85;
}

.footer-credit{
    font-size: 13px;
    opacity: 0.7;
}


@media (max-width: 900px){
    .site-footer{
        padding: 42px 0 34px;
    }

    .footer-rule{
        margin-bottom: 22px;
    }
}

@media (max-width: 520px){
    .site-footer{
        padding: 34px 0 28px;
    }

    .site-footer .container{
        max-width: 100%;
        padding: 0 20px;
    }

    .footer-rule{
        margin-bottom: 18px;
    }

    .footer-content p{
        font-size: 13px;
        margin: 0 0 8px;
    }

    .footer-credit{
        font-size: 12px;
    }
}

@media (max-width: 520px){
    .footer-rule{
        height: 2px;
        width: 82%;
        margin-left: auto;
        margin-right: auto;
    }
}
/* ========================================
   Responsive Refinements (FINAL LAYER)
======================================== */

@media (max-width: 900px){
    .section{
        padding: 42px 0;
    }

    .section-about{
        padding: 18px 0 34px;
    }

    .services{
        padding: 30px 0 38px;
    }

    .section-creative{
        padding: 32px 0 42px;
    }

    .section-title{
        margin-top: 4px;
        margin-bottom: 12px;
    }

    .services-head{
        padding-bottom: 18px;
    }

    .creative-grid{
        margin-top: 18px;
    }
}

@media (max-width: 520px){
    .section{
        padding: 36px 0;
    }

    .section-about{
        padding: 16px 0 30px;
    }

    .services{
        padding: 26px 0 34px;
    }

    .section-creative{
        padding: 28px 0 36px;
    }
}

@media (max-width: 900px){
    .about-text p{
        font-size: 0.95rem;
        line-height: 1.72;
        color: rgba(24, 32, 24, 0.74);
    }
}

@media (max-width: 520px){
    .about-text p{
        font-size: 0.93rem;
        line-height: 1.74;
        color: rgba(24, 32, 24, 0.72);
    }
}

@media (max-width: 900px){
    .creative-intro p{
        font-size: 0.95rem;
        line-height: 1.72;
        color: rgba(24, 32, 24, 0.72);
    }
}

@media (max-width: 520px){
    .creative-intro p{
        font-size: 0.93rem;
        line-height: 1.74;
        color: rgba(24, 32, 24, 0.7);
    }
}

/* ---------------------------------------
   Floating scroll rail
---------------------------------------- */
.scroll-rail{
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    padding: 10px 8px;
    border-radius: 18px;

    background: rgba(220, 231, 221, 0.72);
    border: 1px solid rgba(31, 58, 40, 0.12);
    box-shadow: 0 10px 24px rgba(31, 58, 40, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    opacity: 0.88;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.scroll-rail:hover{
    opacity: 1;
}

.scroll-rail-btn{
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 999px;
    background: rgba(31, 58, 40, 0.08);
    color: var(--gg-deep-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    padding: 0;
    font-size: 14px;
    line-height: 1;
}

.scroll-rail-btn:hover,
.scroll-rail-btn:focus-visible{
    background: rgba(31, 58, 40, 0.14);
    transform: scale(1.03);
    outline: none;
}

.scroll-track{
    position: relative;
    width: 4px;
    height: 140px;
    border-radius: 999px;
    background: rgba(31, 58, 40, 0.10); /* was ~0.14 */
    overflow: hidden;
}

.scroll-thumb{
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 8px;
    height: 34px;
    border-radius: 999px;
    background: var(--gg-deep-green);
    box-shadow: 0 2px 8px rgba(31, 58, 40, 0.18);
}

/* Hide rail when not needed on very short pages */
.scroll-rail.is-hidden{
    opacity: 0;
    pointer-events: none;
}

/* Tablet */
@media (max-width: 900px){
    .scroll-rail{
        right: 12px;
        padding: 8px 7px;
        gap: 8px;
        border-radius: 16px;
    }

    .scroll-rail-btn{
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .scroll-track{
        height: 112px;
    }

    .scroll-thumb{
        width: 7px;
        height: 28px;
    }
}

/* Mobile */
@media (max-width: 520px){
    .scroll-rail{
        right: 8px;
        padding: 7px 6px;
        gap: 7px;
        border-radius: 14px;
        opacity: 0.75;
    }

    .scroll-rail-btn{
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .scroll-track{
        height: 88px;
        width: 3px;
    }

    .scroll-thumb{
        width: 6px;
        height: 22px;
    }
}


/* ---------------------------------------
   Footer Social Icons
---------------------------------------- */
.footer-socials{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 14px;
}

.footer-socials a{
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(31,58,40,0.14);
    background: rgba(255,255,255,0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, opacity .2s ease;
    opacity: 0.82;
}

.footer-socials a:hover,
.footer-socials a:focus-visible{
    transform: translateY(-1px);
    border-color: rgba(31,58,40,0.26);
    background: rgba(255,255,255,0.42);
    opacity: 1;
}

.footer-socials svg{
    width: 17px;
    height: 17px;
    fill: var(--gg-deep-green);
}

@media (max-width: 520px){
    .footer-socials{
        margin-top: 16px;
        gap: 12px;
    }

    .footer-socials a{
        width: 32px;
        height: 32px;
    }

    .footer-socials svg{
        width: 15px;
        height: 15px;
    }
}