/* ===========================================================
   DNX Go — Home page redesign
   Aesthetic reference: coreatelierpilates.com — warm off-white /
   charcoal minimalism, a single grotesk sans, lowercase kickers
   with an underscore motif, generous whitespace, flat surfaces,
   quiet full-width dividers. The header and hero search panel are
   the deliberate exception: a frosted/"Apple glass" translucency
   (backdrop-filter blur+saturate over a light tint) so they read
   as a floating layer above the hero photo/content beneath them.

   Scoped entirely under .homepage so nothing here can leak into
   Search / Manage / Account / Checkout, which reuse many of the
   same generic class names (.field, .search, .hero...).

   Every background here carries !important — the site-wide
   "body * { background:transparent!important }" rule (added so
   the flower parallax shows through the rest of the site) would
   otherwise strip these flat surfaces too. This page intentionally
   opts out of that effect with its own opaque canvas.
   =========================================================== */

.homepage{
    position:relative;
    /* clip, not hidden: .homepage's own content is ~26px taller than its
       box (rounding across many stacked 100vh sections), and overflow-x
       hidden pairs with a default overflow-y:visible by forcing it to
       auto per spec — turning this div into its own scroll container
       with a second scrollbar. overflow:clip is exempt from that
       coupling, so it clips the horizontal bleed without doing that. */
    overflow-x:clip;
    background:var(--h2-bg)!important;
    font-family:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
    font-weight:300;
    color:var(--h2-ink);

    --h2-bg:#f6f3ee;
    --h2-bg-alt:#edeae2;
    --h2-ink:#17140f;
    --h2-soft:#6f6a61;
    --h2-muted:#a39c8f;
    --h2-line:rgba(23,20,15,.13);
    --h2-accent:#a9724a;
    --h2-invert-bg:#17140f;
    --h2-invert-soft:rgba(246,243,238,.62);
}
.homepage h1,.homepage h2,.homepage h3,.homepage h4{
    font-family:"Space Grotesk","Segoe UI",sans-serif;
    font-weight:500;
    letter-spacing:-0.01em;
    color:var(--h2-ink);
}
.homepage h2{line-height:1.2}

/* ---------- glass header (home page only) ----------
   .glass-panel (dnxgo.css) supplies the frosted recipe; this just
   retints/reshapes it to match the header's own resting look. */
body.home-body .site-header.glass-panel{
    background:rgba(246,243,238,.55)!important;
    border:0;
    box-shadow:0 1px 0 rgba(23,20,15,.08);
}
/* the open mobile menu hangs over the hero photo, which a 55%-opaque bar is
   not enough to keep the links legible against */
body.home-body .site-header.glass-panel:has(.nav-toggle:checked){
    background:rgba(246,243,238,.97)!important;
}

@media (prefers-reduced-motion: reduce){
    .homepage *,.homepage *::before,.homepage *::after{
        animation-duration:.001ms!important;
        animation-iteration-count:1!important;
        transition-duration:.001ms!important;
        scroll-behavior:auto!important;
    }
}

/* ---------- smooth scroll ----------
   scroll-snap is off: home-steps and home-story are now pinned with a
   scrubbed timeline (see home.js), which needs free-running scroll to
   read the pin's extra distance correctly — snap would fight the pin,
   trying to jump to a section boundary mid-scrub. */
html:has(body.home-body){scroll-behavior:smooth}

/* No scroll-margin-top here: html carries scroll-padding-top for the sticky
   header (dnxgo.css), and a margin on the target stacks with that padding -
   together they dropped an anchored section a full header below the header. */
.homepage > section{position:relative}

/* ---------- wavy section separator ---------- */
.home-wave{
    position:absolute;left:0;right:0;bottom:-1px;
    width:100%;height:56px;
    display:block;pointer-events:none;z-index:3;
}
.home-wave--top{top:-1px;bottom:auto;transform:scaleY(-1)}
.home-wave--full{left:50%;right:auto;width:100vw;transform:translateX(-50%)}
.home-wave--shadow path{filter:drop-shadow(0 10px 14px rgba(23,20,15,.08))}
.home-wave--shadow{left:50%;right:auto;width:100vw;transform:translateX(-50%)}
@media (min-width:760px){.home-wave{height:80px}}

/* ---------- thin, on-brand scrollbar ----------
   The page actually scrolls on <html>, not <body> — styling body's
   scrollbar left the real one (html's, native OS width) rendering
   alongside the custom one reserved by scrollbar-gutter:stable,
   which looked like a doubled scrollbar. Style html directly and
   drop the sitewide stable-gutter reservation here so nothing is
   left over for a mismatched native scrollbar to occupy. */
html:has(body.home-body){
    scrollbar-gutter:auto;
    scrollbar-width:thin;scrollbar-color:#a39c8f #f6f3ee;
}
html:has(body.home-body)::-webkit-scrollbar{width:9px}
html:has(body.home-body)::-webkit-scrollbar-track{background:#f6f3ee}
html:has(body.home-body)::-webkit-scrollbar-thumb{background:#a39c8f;border-radius:99px;border:2px solid #f6f3ee}
html:has(body.home-body)::-webkit-scrollbar-thumb:hover{background:#a9724a}

/* ---------- generic reveal-on-scroll ---------- */
.homepage [data-reveal]{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);
}
.homepage [data-reveal].is-in{opacity:1;transform:none}

/* ---------- word-by-word heading reveal (home.js splits h2 text into
   these on load, then staggers .word-split__inner up into view) ---------- */
.word-split{display:inline-block;overflow:hidden;vertical-align:top}
.word-split__inner{display:inline-block;will-change:transform}

/* ---------- shared kicker (the underscore motif) ---------- */
.home-kicker{
    display:inline-block;
    font-family:"Space Grotesk","Segoe UI",sans-serif;
    font-size:13px;letter-spacing:.02em;text-transform:uppercase;
    color:var(--h2-soft);margin-bottom:14px;
}
.home-kicker::before{content:"_";color:var(--h2-accent)}
.home-kicker--invert{color:var(--h2-invert-soft)}

/* full-width hairline divider used between bands */
.home-rule{border:0;border-top:1px solid var(--h2-line);margin:0}

/* ================= HERO ================= */
.home-hero{
    position:relative;
    overflow:hidden;
    min-height:100vh;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:170px 24px 190px;
    box-sizing:border-box;
    color:#fff;
}
/* separate layer so JS can parallax/scale just the photo, independent of
   the text/search panel stacked on top of it (see home.js hero section) */
.home-hero__bg{
    position:absolute;inset:-10% 0;
    z-index:0;
    background:linear-gradient(rgba(20,16,12,.42),rgba(20,16,12,.5)),url("https://images.unsplash.com/photo-1621293954908-907159247fc8?w=2400&q=80&auto=format&fit=crop") center/cover no-repeat;
    will-change:transform;
}
.home-hero hgroup,.home-hero .home-search{position:relative;z-index:1}
.home-hero hgroup {
    margin-bottom: 5rem;
}
.home-hero__eyebrow {
    font-size: 12.5px;
    letter-spacing: .02em;
    text-transform: lowercase;
    color: rgba(255,255,255,.72) !important;
    margin: 0 0 30px;
}
.home-hero__eyebrow em{font-style:normal;color:var(--h2-accent)}
.home-hero__title{
    font-size:clamp(40px,6.6vw,88px);
    line-height:.98;
    letter-spacing:-0.02em;
    margin:0 0 30px;
    font-weight:500;
    color:#fff!important;
    text-shadow:0 2px 30px rgba(0,0,0,.25);
}
.home-hero__line{display:block;overflow:hidden}
.home-hero__line > span{
    display:block;
    animation:home-line-in 1s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(.2s + var(--i) * .12s);
}
@keyframes home-line-in{from{transform:translateY(112%)}to{transform:translateY(0)}}
.home-hero__title em{font-style:normal;color:var(--h2-accent)}
.home-hero__sub{
    max-width:480px;margin:0 auto;font-size:17.5px;line-height:1.75;color:rgba(255,255,255,.8);
    opacity:0;animation:home-fade-in .9s ease forwards;animation-delay:.7s;
}
@keyframes home-fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ================= SEARCH PANEL ================= */
.home-search{max-width:1040px;margin:0 auto;position:relative;z-index:5;padding:0 24px 0}
/* .glass-panel (dnxgo.css) supplies the frosted recipe; this just
   adds the panel's own shape/layout on top of it. */
.home-search__panel.glass-panel{
    display:flex;align-items:stretch;
    /* a touch more opaque than the shared glass-panel default so labels
       stay legible over the brightest parts of the hero photo */
    background:rgba(255,255,255,.7)!important;
    overflow:hidden;
    border-radius:6px;
    box-shadow:0 8px 32px rgba(23,20,15,.18);
}
.home-field{flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:22px 26px;border-right:1px solid rgba(23,20,15,.1);min-width:0}
.home-field:last-of-type{border-right:0}
.home-field--grow{flex:1.7}
.home-field:focus-within{background:rgba(255,255,255,.5)!important}
.home-field label{font-size:10.5px;letter-spacing:.1em;text-transform:lowercase;color:var(--h2-soft);text-shadow:0 1px 2px rgba(255,255,255,.7)}
.home-field__input{display:flex;align-items:center;gap:9px}
.home-field__input svg{color:var(--h2-soft);flex-shrink:0}
.home-field input,.home-field select{border:0;outline:0;background:none!important;font:14px "Inter",inherit;width:100%;padding:2px 0;color:var(--h2-ink)}
.home-field input::placeholder{color:var(--h2-soft);text-shadow:0 1px 2px rgba(255,255,255,.7)}
.home-search__submit{
    display:flex;align-items:center;gap:9px;border:0;
    background:var(--ink)!important;color:#fff;font-weight:500;cursor:pointer;
    font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;
    padding:0 34px;white-space:nowrap;
    font-family:"Space Grotesk",sans-serif;
    border-radius:6px;
    transition:background .2s ease;
}
.home-search__submit:hover{background:var(--accent)!important}
.home-search__submit svg{flex-shrink:0}

/* ================= HOW IT WORKS (added section) ================= */
.home-steps{
    position:relative;
    min-height:100vh;box-sizing:border-box;
    display:flex;flex-direction:column;justify-content:center;
    padding:110px 24px 60px;
    background:var(--brand-navy);
}
.home-steps__inner{position:relative;width:100%;max-width:1440px;margin:0 auto}
.home-steps .home-kicker{color:var(--h2-invert-soft)}
.home-steps__deco{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.home-steps__deco-circle{
    position:absolute;top:2px;left:190px;
    width:420px;height:420px;
    border:1px solid rgba(255,255,255,.14);border-radius:50%;
}
.home-steps__deco-square{position:absolute;background:rgba(169,114,74,.14)}
.home-steps__deco-square--a{top:0;right:16%;width:190px;height:190px}
.home-steps__deco-square--b{right:356px;top:80px;width:120px;height:120px;background:rgba(169,114,74,.2)}
.home-steps__head{position:relative;z-index:1;max-width:520px;margin-bottom:60px}
.home-steps__head h2{font-size:clamp(26px,3vw,36px);text-transform:lowercase;margin:0;color:var(--h2-bg)}
.home-steps__row{position:relative;z-index:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;border-top:0}
.home-steps__row::before{
    content:"";
    position:absolute;
    top:115px;left:120px;right:-140px;bottom:-85px;
    background:rgba(255,255,255,.06);
    z-index:-1;
}
.home-step{
    position:relative;
    min-height:420px;
    padding:28px 26px;
    display:flex;flex-direction:column;justify-content:space-between;
    border-right:0;
    border-radius:2px;
    overflow:hidden;
    color:#fff;
    background:var(--step-img) center/cover no-repeat;
    transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.home-step:hover{transform:translateY(-8px)}
.home-step::after{
    content:"";position:absolute;inset:0;z-index:0;
    background:linear-gradient(to top,rgba(23,20,15,.85) 0%,rgba(23,20,15,.35) 55%,rgba(23,20,15,.25) 100%);
    transition:background .45s ease;
}
.home-step:hover::after{
    background:linear-gradient(to top,rgba(23,20,15,.6) 0%,rgba(23,20,15,.15) 55%,rgba(23,20,15,.1) 100%);
}
.home-step > *{position:relative;z-index:1}
.home-step__num{
    display:block;font-family:"Space Grotesk",sans-serif;font-size:64px;color:#fff;
    letter-spacing:-0.02em;line-height:1;
}
.home-step h4{font-size:20px;text-transform:lowercase;margin:0 0 10px;font-weight:500;color:#fff}
.home-step p{font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.78);margin:0;max-width:280px}

/* ================= PERKS + STATS (merged) ================= */
.home-perks-stats{box-sizing:border-box;background:var(--brand-navy);min-height:100vh;display:grid;align-content:center}
.home-perks{
    padding:100px 24px 60px;
    border-top:1px solid var(--h2-line);
    display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
}
.home-perk{
    padding:46px 30px;text-align:center;
    background:#fff!important;
    border:1px solid var(--h2-line);
    border-radius:12px;
    transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .3s ease;
}
.home-perk:hover{transform:translateY(-6px);border-color:var(--h2-accent);box-shadow:0 30px 50px -30px rgba(23,20,15,.25)}
.home-perk svg{color:var(--h2-accent);margin:0 auto 22px;display:block}
.home-perk h4{font-size:17px;margin:0 0 10px;text-transform:lowercase;font-weight:500}
.home-perk p{font-size:14px;color:var(--h2-soft);line-height:1.65;margin:0}
.home-perks [data-reveal]:nth-child(1){transition-delay:0s}
.home-perks [data-reveal]:nth-child(2){transition-delay:.08s}
.home-perks [data-reveal]:nth-child(3){transition-delay:.16s}
.home-perks [data-reveal]:nth-child(4){transition-delay:.24s}

/* ================= COLLECTION ================= */
.home-collection{
    min-height:100vh;box-sizing:border-box;
    display:flex;flex-direction:column;justify-content:center;
    max-width:90vw;margin-top:0;margin-right:auto;margin-bottom:0;margin-left:auto;padding:0 24px;
}
.home-collection__head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:32px}
.home-collection__head h2{font-size:clamp(28px,3.4vw,42px);text-transform:lowercase;margin:0;max-width:520px}
.home-collection__lead{max-width:320px;font-size:14.5px;color:var(--h2-soft);line-height:1.7;margin:0 0 6px}
.home-collection__lead a{color:var(--h2-ink);font-weight:500;border-bottom:1px solid var(--h2-accent);padding-bottom:2px}
.home-collection__lead a:hover{color:var(--h2-accent)}
.home-arrow-link span{display:inline-block;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.home-arrow-link:hover span{transform:translateX(4px)}

/* bigger, two-up cards with a real photo behind each listing */
.homepage .grid{gap:64px 48px;grid-template-columns:repeat(2,1fr);padding:24px}
.homepage .grid article{
    display:flex;flex-direction:column;
    border-radius:28px;
    background:var(--h2-bg)!important;
    box-shadow:inset 0 0 0px 1px var(--h2-line);
    transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-radius .4s ease;
}
.homepage .grid article:not(.is-active){border-radius:100px}
.homepage .grid article:hover{
    box-shadow:0 30px 50px -24px rgba(23,20,15,.28),inset 0 0 0px 1px var(--h2-accent);
}
.homepage .art-frame{height:clamp(360px,32vw,480px)}
.homepage .art{
    background-image:linear-gradient(135deg,var(--base) 0%,var(--accent-tint,var(--base)) 100%);
    background-size:cover;background-position:center;background-repeat:no-repeat;
    filter:grayscale(.25) contrast(1.05);
}
.homepage .art-tag{
    left:0;right:0;top:0;width:100%;box-sizing:border-box;
    /* same recipe as dnxgo.css: the property's Base colour under a dark scrim */
    background:linear-gradient(rgba(23,20,15,.36),rgba(23,20,15,.36)),var(--base,#17140f)!important;
    color:#fff;
    border-radius:0;text-transform:none;font-size:11.5px;padding:10px 16px;
}
.homepage .cardbody{padding:36px 36px 18px;display:flex;flex-direction:column;flex:1}
.homepage .location{font-size:13px}
.homepage .cardbody h3{font-family:"Space Grotesk",sans-serif;font-size:31px;text-transform:lowercase;font-weight:500;margin:0 0 10px}
.homepage .cardbody p{font-size:15.5px;flex:1}
.homepage .amenities{font-size:13px;gap:8px 22px;margin-bottom:22px}
.homepage .stat-bar{background:var(--h2-ink)!important}
.homepage .stat-bar .stat{padding:20px 10px}
.homepage .stat-bar b{font-size:19px}
.homepage .stat-bar span{font-size:10.5px}
.homepage .grid > [data-reveal]:nth-child(1){transition-delay:0s}
.homepage .grid > [data-reveal]:nth-child(2){transition-delay:.1s}
.homepage .grid > [data-reveal]:nth-child(3){transition-delay:.08s}
.homepage .grid > [data-reveal]:nth-child(4){transition-delay:.18s}
.homepage .grid > [data-reveal]:nth-child(5){transition-delay:.16s}
.homepage .grid > [data-reveal]:nth-child(6){transition-delay:.26s}

/* ---- collection cards become expanding accordion panels (desktop/tablet) ---- */
@media (min-width:761px){
    .homepage .grid{
        display:flex;align-items:stretch;gap:14px;
        height:clamp(460px,50vw,640px);
        overflow:hidden;
    }
    .homepage .grid article{
        flex:1 1 0%;min-width:74px;
        cursor:pointer;
        transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1),
            flex-grow .7s cubic-bezier(.16,1,.3,1),flex-basis .7s cubic-bezier(.16,1,.3,1),
            border-color .3s ease;
    }
    .homepage .grid article.is-active{flex:6 1 0%;cursor:default;box-shadow:inset 0 0 0px 1px var(--h2-line)}
    .homepage .grid article:not(.is-active):hover{transform:scale(1.03)}

    .homepage .art-frame{height:auto;flex:1 1 auto;min-height:0}
    .homepage .art-frame::after{
        content:"";position:absolute;inset:0;z-index:1;
        background:linear-gradient(to top,rgba(23,20,15,.78) 0%,rgba(23,20,15,.08) 60%,rgba(23,20,15,.3) 100%);
        opacity:0;transition:opacity .4s ease;
    }
    .homepage .grid article:not(.is-active) .art-frame::after{opacity:1}

    .homepage .grid article:not(.is-active) .art-tag,
    .homepage .grid article:not(.is-active) .art-area,
    .homepage .grid article:not(.is-active) .cardbody,
    .homepage .grid article:not(.is-active) .stat-bar{display:none}

    .homepage .grid article.is-active .cardbody{flex:0 0 auto;max-height:230px;overflow:hidden;padding:30px 34px 14px}
    .homepage .grid article.is-active .cardbody p{flex:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

    /* rotated caption shown on the collapsed panels */
    .homepage .grid .accordion-label{
        position:absolute;inset:0;z-index:2;
        display:none;flex-direction:column;align-items:center;justify-content:flex-end;
        padding:26px 0;color:#fff;pointer-events:none;
    }
    .homepage .grid article:not(.is-active) .accordion-label{display:flex}
    .homepage .grid .accordion-label__name{
        writing-mode:vertical-rl;transform:rotate(180deg);
        font-family:"Space Grotesk",sans-serif;font-size:15px;letter-spacing:.02em;
        text-transform:lowercase;white-space:nowrap;
        text-shadow:0 1px 10px rgba(0,0,0,.5);
    }
    .homepage .grid .accordion-label__price{
        writing-mode:vertical-rl;transform:rotate(180deg);
        font-size:11px;color:rgba(255,255,255,.78);margin-top:14px;white-space:nowrap;
    }
}

/* ================= STATS (inverted band) ================= */
.home-stats{
    box-sizing:border-box;
    background:var(--brand-navy)!important;
    padding:70px 24px 100px;
    display:grid;grid-template-columns:repeat(4,1fr);gap:40px;
}
.home-stat{text-align:center;color:var(--h2-bg)}
.home-stat__num{
    display:block;font-family:"Space Grotesk",sans-serif;font-size:clamp(32px,3.8vw,50px);
    color:var(--h2-bg);line-height:1;margin-bottom:12px;letter-spacing:-0.02em;
}
.home-stat__num em{font-style:normal;color:var(--h2-accent)}
.home-stat__label{font-size:11.5px;letter-spacing:.1em;text-transform:lowercase;color:var(--h2-invert-soft)}
.home-stats [data-reveal]:nth-child(1){transition-delay:0s}
.home-stats [data-reveal]:nth-child(2){transition-delay:.1s}
.home-stats [data-reveal]:nth-child(3){transition-delay:.2s}
.home-stats [data-reveal]:nth-child(4){transition-delay:.3s}

/* ================= TESTIMONIALS ================= */
.home-testimonials{
    min-height:100vh;box-sizing:border-box;
    display:flex;flex-direction:column;justify-content:center;
    max-width:1200px;margin:0 auto;padding:120px 24px;
}
.home-testimonials__head{text-align:center;margin-bottom:72px}
.home-testimonials__kicker{
    display:inline-flex;align-items:center;gap:16px;
    font-family:"Space Grotesk",sans-serif;font-size:13px;letter-spacing:.08em;
    text-transform:lowercase;color:var(--h2-accent);margin-bottom:18px;
}
.home-testimonials__kicker i{display:inline-block;width:36px;height:1px;background:var(--h2-accent);position:relative}
.home-testimonials__kicker i::before{content:"";position:absolute;top:50%;width:6px;height:6px;background:var(--h2-accent);transform:translateY(-50%) rotate(45deg)}
.home-testimonials__kicker i:first-child::before{left:-3px}
.home-testimonials__kicker i:last-child::before{right:-3px}
.home-testimonials__head h2{font-size:clamp(30px,3.6vw,44px);text-transform:lowercase;margin:0}

.home-testimonials__body{display:grid;grid-template-columns:1fr 300px;gap:70px;align-items:start}
.home-testimonials__content{display:flex;flex-direction:column;padding-top:6px}

.home-test-quote-stack{position:relative;display:grid}
.home-test-quote{
    grid-area:1/1;opacity:0;transform:translateY(14px);pointer-events:none;
    transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
}
.home-test-quote.is-active{opacity:1;transform:none;pointer-events:auto;position:relative;z-index:1}
.home-test-card__stars{color:var(--h2-accent);letter-spacing:3px;font-size:15px;margin-bottom:20px}
.home-test-quote p{font-size:19px;line-height:1.7;color:var(--h2-ink);margin:0;font-family:"Space Grotesk",sans-serif;font-weight:500;max-width:560px}

.home-testimonials__meta{display:flex;align-items:center;gap:44px;margin-top:36px}
.home-test-who-stack{position:relative;display:grid}
.home-test-card__who{grid-area:1/1;opacity:0;transition:opacity .5s ease;pointer-events:none}
.home-test-card__who.is-active{opacity:1;pointer-events:auto;position:relative;z-index:1}
.home-test-card__who b{display:block;font-family:"Space Grotesk",sans-serif;font-size:17px;font-weight:500;color:var(--h2-ink)}
.home-test-card__who span{display:block;font-size:12px;color:var(--h2-muted);text-transform:lowercase;margin-top:2px}

.home-testimonials__nav{display:flex;gap:10px}
.home-testimonials__nav button{
    width:38px;height:38px;border-radius:6px;border:1px solid var(--h2-line);
    background:var(--h2-bg)!important;color:var(--h2-ink);cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.home-testimonials__nav button:hover{background:var(--h2-ink)!important;color:var(--h2-bg);border-color:var(--h2-ink)}

.home-testimonials__photo{
    padding:12px;background:#fff!important;border:1px solid var(--h2-line);
    box-shadow:0 30px 60px -30px rgba(23,20,15,.35);
}
.home-test-photo-stack{position:relative;display:grid;aspect-ratio:4/5;overflow:hidden}
.home-test-photo-stack img{
    grid-area:1/1;width:100%;height:100%;object-fit:cover;
    opacity:0;transform:scale(1.04);filter:grayscale(.15);
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
}
.home-test-photo-stack img.is-active{opacity:1;transform:scale(1);position:relative;z-index:1}

/* ================= STORY ================= */
.home-story{
    min-height:100vh;box-sizing:border-box;
    display:flex;align-items:center;
    background:var(--h2-bg-alt)!important;padding:120px 24px;
}
.home-story__inner{width:100%;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:center}
/* structural — must NOT key off [data-reveal]: home.js strips that
   attribute from this element once GSAP takes over the story pin, which
   would otherwise silently drop position/z-index too and let
   .home-story__quote-frame's oversized ::before win the stacking fight */
.home-story__inner > div:first-child{position:relative;z-index:1;margin-left:2rem}
.home-story h2{font-size:clamp(28px,3.4vw,40px);text-transform:lowercase;margin:0 0 26px}
.home-story p{font-size:16px;line-height:1.85;color:var(--h2-soft);margin:0 0 36px;max-width:460px}
.home-story__stats{display:flex;gap:44px}
.home-story__stats div b{display:block;font-family:"Space Grotesk",sans-serif;font-size:25px;color:var(--h2-ink)}
.home-story__stats div span{font-size:10.5px;letter-spacing:.08em;text-transform:lowercase;color:var(--h2-muted)}
.home-story__quote-frame{position:relative;z-index:0}
.home-story__quote-frame::before{
    content:"";
    position:absolute;
    top:-120px;left:-560px;right:120px;bottom:-120px;
    background:#e3ddd0;
    z-index:-1;
}
.home-story__quote{
    position:relative;
    background:var(--h2-bg)!important;border:1px solid var(--h2-line);padding:48px 42px;
}
.home-story__quote-mark{font-family:"Space Grotesk",sans-serif;font-size:56px;line-height:1;color:var(--h2-accent);margin-bottom:12px}
.home-story__quote p{font-family:"Space Grotesk",sans-serif;font-size:27px;line-height:1.4;color:var(--h2-ink);margin:0 0 22px;max-width:none;text-transform:lowercase}
.home-story__quote span{font-size:12px;color:var(--h2-muted);letter-spacing:.03em;text-transform:lowercase}

/* ================= FINAL CTA ================= */
.home-cta{
    min-height:100vh;box-sizing:border-box;
    display:flex;flex-direction:column;justify-content:center;
    overflow:hidden;
    background:var(--h2-invert-bg)!important;
    padding:130px 40px;text-align:center;position:relative;
}
.home-cta__inner{position:relative;z-index:1}
.home-cta h2{font-size:clamp(30px,5vw,56px);color:var(--h2-bg);text-transform:lowercase;margin:0 0 22px;line-height:1.08}
.home-cta p{font-size:16px;color:var(--h2-invert-soft);max-width:420px;margin:0 auto 42px}
.home-cta__btn{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--h2-bg)!important;color:var(--h2-ink);font-weight:500;font-size:13.5px;
    text-transform:uppercase;letter-spacing:.05em;font-family:"Space Grotesk",sans-serif;
    padding:18px 38px;border-radius:6px;transition:background .2s ease,color .2s ease;
}
.home-cta__btn:hover{background:var(--accent)!important;color:#fff}

/* ================= BACK TO TOP ================= */
.home-back-to-top{
    position:fixed;right:32px;bottom:32px;z-index:200;
    width:52px;height:52px;border-radius:50%;border:0;
    background:var(--h2-accent)!important;color:#fff;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;box-shadow:0 12px 28px -8px rgba(23,20,15,.45);
    opacity:0;visibility:hidden;transform:translateY(12px);
    transition:opacity .3s ease,transform .3s ease,visibility .3s,background .2s ease;
}
.home-back-to-top.is-visible{opacity:1;visibility:visible;transform:none}
.home-back-to-top:hover{background:var(--brand-navy)!important}
.home-back-to-top svg{display:block;pointer-events:none}
@media (max-width:760px){
    .home-back-to-top{right:18px;bottom:18px;width:46px;height:46px}
}

/* ================= RESPONSIVE ================= */
@media (max-width:960px){
    .home-steps__row{grid-template-columns:1fr;row-gap:36px}
    .home-steps__row::before{top:-20px;left:-20px;right:20px;bottom:-20px}
    .home-step{border-right:0;border-bottom:1px solid var(--h2-line);padding-bottom:36px}
    .home-step:last-child{border-bottom:0}
    .home-perks{grid-template-columns:repeat(2,1fr)}
    .home-stats{grid-template-columns:repeat(2,1fr);gap:44px 24px}
    .home-testimonials__body{grid-template-columns:1fr;gap:44px}
    .home-testimonials__photo{justify-self:center;width:240px}
    .home-story__inner{grid-template-columns:1fr;gap:36px}
    .home-story p{max-width:none}
    /* the 2rem inset only made sense against the two-column layout — in one
       column it pushes the copy past the right gutter */
    .home-story__inner > div:first-child{margin-left:0}
    /* the slab behind the quote is sized for a wide screen; at this width it
       only needs to bleed a little past the panel it sits behind */
    .home-story__quote-frame::before{top:-28px;left:-24px;right:-24px;bottom:-28px}
}
@media (max-width:760px){
    .home-hero{padding:150px 20px 170px}
    .home-search__panel{flex-direction:column}
    .home-field{border-right:0;border-bottom:1px solid var(--h2-line)}
    .home-field:last-of-type{border-bottom:0}
    .home-search__submit{padding:18px;justify-content:center}
    .home-perks{grid-template-columns:1fr}

    /* collection cards become a vertical tap-to-expand accordion */
    .homepage .grid{display:flex;flex-direction:column;gap:12px;height:auto}
    .homepage .grid article{
        flex:none;max-height:84px;overflow:hidden;cursor:pointer;
        transition:max-height .55s cubic-bezier(.16,1,.3,1),border-color .3s ease;
    }
    .homepage .grid article.is-active{max-height:640px;cursor:default;box-shadow:inset 0 0 0px 1px var(--h2-line)}

    .homepage .grid article:not(.is-active) .art-frame{height:84px}
    .homepage .grid article.is-active .art-frame{height:220px}
    .homepage .grid article:not(.is-active) .art-frame::after{
        content:"";position:absolute;inset:0;z-index:1;
        background:linear-gradient(to right,rgba(23,20,15,.8) 0%,rgba(23,20,15,.25) 60%,rgba(23,20,15,.15) 100%);
    }
    .homepage .grid article:not(.is-active) .art-tag,
    .homepage .grid article:not(.is-active) .art-area,
    .homepage .grid article:not(.is-active) .cardbody,
    .homepage .grid article:not(.is-active) .stat-bar{display:none}

    /* collapsed row: horizontal name + price caption over the dimmed thumbnail */
    .homepage .grid .accordion-label{
        display:none;position:absolute;inset:0;z-index:2;
        flex-direction:row;align-items:center;justify-content:space-between;gap:14px;
        padding:0 18px;color:#fff;pointer-events:none;
    }
    .homepage .grid article:not(.is-active) .accordion-label{display:flex}
    .homepage .grid .accordion-label__name{
        font-family:"Space Grotesk",sans-serif;font-size:15px;letter-spacing:.02em;
        text-transform:lowercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
        text-shadow:0 1px 8px rgba(0,0,0,.5);
    }
    .homepage .grid .accordion-label__price{
        font-size:13px;color:rgba(255,255,255,.85);white-space:nowrap;margin-top:0;flex-shrink:0;
    }

    .homepage .grid article.is-active .cardbody{padding:22px 20px 12px}
    .homepage .grid article.is-active .cardbody p{flex:none;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

    .home-steps,.home-collection,.home-testimonials{padding-left:20px;padding-right:20px}
    .home-testimonials__meta{flex-wrap:wrap;gap:20px}
    .home-test-quote p{font-size:17px}
    .home-story{padding:80px 20px}
    .home-cta{padding:90px 24px}

    /* the title is three words joined by full stops — with the break
       opportunities in the markup it now wraps instead of being clipped */
    .home-hero__title{line-height:1.04}
    /* svh, not vh: a phone's viewport grows when the URL bar retracts, and vh
       is measured against the grown one, so the hero started a screenful too
       tall and every section below it jumped mid-scroll */
    .home-hero{min-height:100svh}
    /* one full screen per band reads as generous on a desktop and as a page of
       empty space on a phone — let the sparse bands size to their content */
    .home-steps,.home-perks-stats,.home-collection,.home-testimonials,
    .home-story,.home-cta{min-height:0}
}

/* Four fields and a submit button need roughly 900px before the labels and the
   dates start truncating - at 768 the panel was 13px wider than the hero and
   "Search city or property" had shrunk to "Search city or". Last in the file so
   it wins over the row layout the base rules set up. */
@media (max-width:900px){
    .home-search{width:100%}
    .home-search__panel{flex-direction:column}
    .home-field{border-right:0;border-bottom:1px solid var(--h2-line)}
    .home-field:last-of-type{border-bottom:0}
    .home-search__submit{padding:18px;justify-content:center}
}

@media (max-width:960px){
    /* the 90vw cap plus the grid's own padding left the cards narrower than the
       gutters either side of them */
    .home-collection{max-width:none}
    .homepage .grid{padding:12px 0}
    .home-testimonials__kicker{flex-wrap:wrap;justify-content:center}
}

@media (max-width:400px){
    /* the two rules either side of the kicker no longer fit beside its text */
    .home-testimonials__kicker{flex-wrap:wrap;justify-content:center;gap:10px}
    .home-testimonials__kicker i{display:none}
    .home-story__quote{padding:34px 24px}
    .home-story__quote p{font-size:22px}
    .home-story__stats{gap:26px;flex-wrap:wrap}
}