/* ==========================================================================
   TerraTrek Group Of Resorts & Hotels — Site Stylesheet
   Theme: Luxury Wilderness — deep forest green + gold, Playfair Display + Poppins
   ========================================================================== */

:root{
    --green-900:#0c1912;
    --green-800:#13271c;
    --green-700:#1c3a29;
    --green-600:#274d36;
    --gold:#cda255;
    --gold-light:#e8c98a;
    --cream:#f4efe4;
    --text-light:#eef1f6;
    --text-muted:#a9b5c8;
    --border-soft:rgba(205,162,85,0.25);
    --shadow:0 20px 50px rgba(0,0,0,0.35);
    --radius:14px;
    --maxw:1200px;
    --serif:'Playfair Display', Georgia, serif;
    --sans:'Poppins', Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
/* scroll-behavior only here — an explicit overflow-x on <html> itself (as opposed
   to <body>, whose overflow the browser instead propagates up to the viewport)
   forces the UA to also give it a non-'visible' overflow-y, which breaks
   position:sticky for every descendant (the header included). body's own
   overflow-x:hidden below still blocks the horizontal pan from off-screen
   .slide-in cards via that propagation, without this side effect. */
html{ scroll-behavior:smooth; }
body{
    margin:0;
    font-family:var(--sans);
    background:var(--green-900);
    color:var(--text-light);
    line-height:1.7;
    overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
    font-family:var(--serif); font-weight:600; margin:0 0 .5em; color:var(--cream);
    text-shadow:0 0 22px rgba(244,239,228,.3), 0 0 46px rgba(205,162,85,.15);
}
h1 em,h2 em,h3 em,h4 em{
    text-shadow:0 0 24px rgba(205,162,85,.65), 0 0 50px rgba(205,162,85,.35);
}
p{ margin:0 0 1em; text-shadow:0 0 14px rgba(238,241,246,.12); }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ---------- Marquee ticker ---------- */
.ticker-strip{
    background:var(--green-800); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
    overflow:hidden; padding:14px 0;
}
.ticker-track{
    display:flex; width:max-content; gap:14px; white-space:nowrap;
    animation:tickerScroll 32s linear infinite;
}
.ticker-track span{ font-size:13.5px; letter-spacing:.5px; color:var(--text-light); text-transform:uppercase; font-weight:500; }
.ticker-dot{ color:var(--gold); opacity:.7; }
@keyframes tickerScroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
    .ticker-track{ animation:none; }
}

/* ---------- Stat strip ---------- */
.stat-strip{ background:var(--green-900); padding:36px 0; border-bottom:1px solid var(--border-soft); overflow-x:hidden; }
.stat-strip-inner{
    display:grid; grid-template-columns:repeat(4,1fr); text-align:center;
}
.stat-item{ padding:0 16px; border-right:1px solid var(--border-soft); }
.stat-item:last-child{ border-right:none; }
.stat-num{
    font-family:var(--serif); font-size:clamp(28px,3.4vw,40px); font-weight:600; color:var(--gold-light);
    text-shadow:0 0 20px rgba(205,162,85,.4);
}
.stat-label{ color:var(--text-muted); font-size:13px; letter-spacing:.4px; margin-top:4px; }
@media (max-width:700px){
    .stat-strip-inner{ grid-template-columns:repeat(2,1fr); gap:24px 0; }
    .stat-item{ border-right:none; border-bottom:1px solid var(--border-soft); padding-bottom:16px; }
    .stat-item:nth-child(2n){ border-right:none; }
    .stat-item:nth-last-child(-n+2){ border-bottom:none; padding-bottom:0; }
}

/* ---------- Slide-in on scroll ---------- */
/* Elements enter from alternating left/right as they scroll into view, then
   settle into place — scroll-triggered (IntersectionObserver), and horizontal
   rather than the old vertical fade-up-from-below effect. Elements already in
   the viewport on page load animate in immediately (the observer fires as soon
   as it starts observing something already intersecting), so this covers both
   the initial view and anything scrolled to afterwards. */
.slide-in{
    opacity:0; transform:translateX(-110px) scale(.94);
    transition:opacity 1.4s cubic-bezier(.22,.61,.36,1), transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.slide-in.slide-right{ transform:translateX(110px) scale(.94); }
.slide-in.slide-visible{ opacity:1; transform:translateX(0) scale(1); }
@media (prefers-reduced-motion: reduce){
    .slide-in{ transition:none; opacity:1; transform:none; }
    .hero-content > *{ animation:none; opacity:1; }
    .btn::before{ display:none; }
}

/* ---------- Scroll progress bar ---------- */
/* A thin gold bar across the very top that fills left-to-right as the page is
   scrolled — a continuous scroll-linked effect, unlike the old fade-up-on-enter
   system (which was a one-shot per element, not tied to scroll position). */
#scrollProgress{
    position:fixed; top:0; left:0; height:3px; width:0%; z-index:10000; pointer-events:none;
    background:linear-gradient(90deg, var(--gold), var(--gold-light));
    box-shadow:0 0 10px rgba(205,162,85,.6);
}
@media (prefers-reduced-motion: reduce){
    #scrollProgress{ display:none; }
}

/* ---------- Cursor glow ---------- */
/* A soft gold dot that trails the pointer — desktop/fine-pointer only, purely
   decorative, ignores clicks. Hidden until the first mousemove so it never
   flashes at a stale 0,0 position on load. */
.cursor-glow{
    position:fixed; top:0; left:0; width:28px; height:28px; margin:-14px 0 0 -14px;
    border-radius:50%; background:radial-gradient(circle, rgba(232,201,138,.85) 0%, rgba(205,162,85,0) 72%);
    pointer-events:none; z-index:9998; mix-blend-mode:screen; opacity:0;
    transition:opacity .3s ease, width .2s ease, height .2s ease, margin .2s ease;
}
.cursor-glow.active{ opacity:1; }
.cursor-glow.pressed{ width:20px; height:20px; margin:-10px 0 0 -10px; }
.cursor-glow.hovering{ width:46px; height:46px; margin:-23px 0 0 -23px; opacity:.6; }
@media (hover:none), (pointer:coarse){
    .cursor-glow{ display:none; }
}

/* ---------- Card tilt ---------- */
/* JS sets the transform inline per mousemove (perspective tilt + slight lift);
   this just gives it somewhere smooth to ease back to on mouseleave. */
/* No unconditional `transition` here — that shorthand would reset transition-property
   to "transform" only, silently dropping the slower opacity/transform transition
   .slide-in needs for its entrance. The fast .35s hover transition is scoped to
   .tilting instead, added/removed by JS only while the pointer is actually over
   the card, so slide-in keeps its own timing the rest of the time. */
.tilt-card{ position:relative; will-change:transform; }
.tilt-card.tilting{ transition:transform .35s cubic-bezier(.16,.8,.24,1); }
/* Glare — a soft highlight that follows the pointer, positioned via the
   --gx/--gy custom properties JS updates on mousemove. border-radius:inherit
   (rather than overflow:hidden on the card) keeps it clipped to the card's own
   rounded corners without cutting off the card's hover box-shadow glow. */
.tilt-glare{
    position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
    background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.16), transparent 55%);
    opacity:0; transition:opacity .3s ease;
}
.tilt-card:hover .tilt-glare{ opacity:1; }

/* ---------- Button ripple ---------- */
.btn-ripple{
    position:absolute; border-radius:50%; background:rgba(255,255,255,.5);
    transform:scale(0); pointer-events:none; animation:btnRippleOut .6s ease-out forwards;
}
@keyframes btnRippleOut{ to{ transform:scale(2.6); opacity:0; } }
@media (prefers-reduced-motion: reduce){
    .btn-ripple{ display:none; }
}

/* ---------- Brand logo hover ---------- */
.brand-logo{ transition:filter .35s ease, transform .35s ease; }
.brand:hover .brand-logo{ filter:drop-shadow(0 0 14px rgba(205,162,85,.7)); transform:scale(1.05) rotate(-3deg); }

/* ---------- Section helpers ---------- */
/* overflow-x:hidden here (not on html/body) — off-screen .slide-in cards sit
   translateX()'d outside their own box before they scroll into view. Clipping
   it at the section level contains that locally instead of on the document
   root, which would otherwise force the root's overflow-y to a non-'visible'
   value and break position:sticky on the header. */
.section{ padding:88px 0; background:var(--green-900); overflow-x:hidden; }
.section-alt{ background:var(--green-800); }

/* ---------- Stacked scroll / page-fold effect ---------- */
/* Each top-level section sticks to the top of the viewport as you scroll into it,
   then the NEXT section (stacked with a higher z-index) scrolls up and slides over
   it, covering it completely — like a page folding down over the one beneath.
   Every section needs its own opaque background (set above) so the covering
   section doesn't show the one underneath bleeding through during the overlap. */
body:not(.no-page-fold) > section{ position:sticky; top:0; }
body:not(.no-page-fold) > section:nth-of-type(1){ z-index:1; }
/* "About TerraTrek" section — fold effect turned off for this one specifically;
   position:relative (not static) so it keeps its z-index:2 and still gets
   correctly covered by the next section's fold, it just doesn't stick itself. */
body:not(.no-page-fold) > section:nth-of-type(2){ position:relative; z-index:2; }
body:not(.no-page-fold) > section:nth-of-type(3){ z-index:3; }
body:not(.no-page-fold) > section:nth-of-type(4){ z-index:4; }
body:not(.no-page-fold) > section:nth-of-type(5){ z-index:5; }
body:not(.no-page-fold) > section:nth-of-type(6){ z-index:6; }
body:not(.no-page-fold) > section:nth-of-type(7){ z-index:7; }
body:not(.no-page-fold) > section:nth-of-type(8){ z-index:8; }
/* index.php opts out entirely via .no-page-fold on <body> — sections just stack normally */
body.no-page-fold > section{ position:static; }
/* .section-pattern's ::before/::after (the pattern.png tile) are position:absolute and need
   a positioned ancestor to anchor to — normally the section's own position:sticky provides
   that, but with the fold off (position:static above) they'd anchor to the page instead and
   render pinned near the top. This restores just enough positioning to keep the pattern
   inside its own section, without turning the fold back on. */
body.no-page-fold .section-pattern,
body.no-page-fold .map-section-decor{ position:relative; }
@media (prefers-reduced-motion: reduce){
    body > section{ position:static; }
}
/* Seamless tiled Art-Deco pattern watermark — the tile itself repeats edge-to-edge
   with no gaps or seams (background-size keeps it square, background-repeat tiles
   it infinitely in both directions), kept very faint so it reads as texture, not noise. */
/* No position here — the section already gets position:sticky from the
   `body > section` rule above, which works fine as the containing block for
   these absolutely-positioned pseudo-elements too (any positioned value does);
   setting position:relative here would override that sticky (a class selector
   beats the plain-tag `body > section` rule) and silently break the fold effect
   on this section. */
.section-pattern::before{
    content:''; position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none;
    background-image:url(../../images/pattern.png);
    background-repeat:repeat; background-size:160px 160px; background-position:top left;
    opacity:.09;
}
/* Gold emphasis layer — the same tiled pattern, colour-shifted toward gold with a
   plain CSS filter, then masked with a plain CSS radial gradient (transparent in
   the middle, opaque at the edges) so it's a bright gold weave near the section's
   border and fades away toward the centre, leaving just the plain ::before tile
   showing there. No SVG cross-referencing here — plain background/filter/mask,
   so it renders reliably everywhere. */
.section-pattern::after{
    content:''; position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none;
    background-image:url(../../images/pattern.png);
    background-repeat:repeat; background-size:160px 160px; background-position:top left;
    filter:sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.05);
    -webkit-mask-image:radial-gradient(ellipse at center, transparent 42%, black 105%);
    mask-image:radial-gradient(ellipse at center, transparent 42%, black 105%);
    opacity:.45;
}
.section-pattern > .container{ position:relative; z-index:1; }
/* Billora-only wildlife-illustration variant — the art is black line-work on
   an opaque white canvas (same as the mountain/tiger/temple decor), so a plain
   tiled background-image needs inverting first: invert(1) turns that white
   canvas black (blending into the section's own near-black background, so the
   tile edges don't show) and the animal linework white, then sepia+hue-rotate
   tints that linework gold. A mask-based approach (as used for the CTA/footer
   decor) can't be tiled via mask-repeat once it goes through an SVG <mask>
   element, which is why this one is a filtered background-image instead. */
.section-pattern-billora::before{
    background-image:url(../../images/billora-bg.png);
    background-repeat:repeat; background-size:420px 280px;
    filter:invert(1) sepia(1) saturate(5) hue-rotate(-12deg) brightness(1.1);
    opacity:.16;
}
.section-pattern-billora::after{ display:none; }
/* Ayodhya Greens-only variant — same invert-then-tint approach as the Billora
   wildlife pattern, using the temple/ritual motif art instead. */
.section-pattern-ayodhya::before{
    background-image:url(../../images/ram-mandir.png);
    background-repeat:repeat; background-size:520px 340px;
    filter:invert(1) sepia(1) saturate(5) hue-rotate(-12deg) brightness(1.1);
    opacity:.16;
}
.section-pattern-ayodhya::after{ display:none; }
.section-head{ text-align:center; max-width:720px; margin:0 auto 56px; }
.eyebrow{
    display:inline-block; color:var(--gold); letter-spacing:3px; font-size:12.5px;
    text-transform:uppercase; font-weight:600; margin-bottom:14px;
    text-shadow:0 0 16px rgba(205,162,85,.6);
}
.section-head h2{ font-size:clamp(28px,4vw,42px); }
.section-head p{ color:var(--text-muted); font-size:16.5px; }
.divider{
    width:70px; height:2px; margin:18px auto 0; background:linear-gradient(90deg,transparent,var(--gold),transparent);
    transition:width .8s cubic-bezier(.16,.8,.24,1) .2s;
}
.section-head.slide-in .divider{ width:0; }
.section-head.slide-in.slide-visible .divider{ width:70px; }

/* ---------- Buttons ---------- */
.btn{
    position:relative; display:inline-flex; align-items:center; gap:10px;
    padding:14px 32px; border-radius:40px; font-size:14px; letter-spacing:1px;
    text-transform:uppercase; font-weight:600; cursor:pointer; border:1px solid var(--gold);
    transition:.3s ease; white-space:nowrap; overflow:hidden;
}
.btn::before{
    content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
    transform:skewX(-20deg); transition:left .55s ease; pointer-events:none;
}
.btn:hover::before{ left:130%; }
.btn-gold{
    background:var(--gold); color:var(--green-900);
    box-shadow:0 0 16px rgba(205,162,85,.5), 0 0 34px rgba(205,162,85,.25);
}
.btn-gold:hover{
    background:var(--gold-light); transform:translateY(-2px);
    box-shadow:0 0 24px rgba(232,201,138,.75), 0 8px 24px rgba(205,162,85,.4), 0 0 46px rgba(232,201,138,.35);
}
.btn-outline{
    background:transparent; color:var(--gold);
    text-shadow:0 0 14px rgba(205,162,85,.6);
    box-shadow:0 0 14px rgba(205,162,85,.2), inset 0 0 10px rgba(205,162,85,.08);
}
.btn-outline:hover{
    background:var(--gold); color:var(--green-900); transform:translateY(-2px); text-shadow:none;
    box-shadow:0 0 24px rgba(205,162,85,.6);
}
.btn-disabled{ opacity:.45; pointer-events:none; border-color:var(--text-muted); color:var(--text-muted); }
.btn:active{ transform:translateY(0) scale(.96); transition:transform .12s ease; }

/* ---------- Nav link hover polish ---------- */
.main-nav a{ transition:color .25s ease, transform .25s ease; }
.main-nav a:hover{ transform:translateY(-1px); }
.footer-col a{ position:relative; transition:color .25s ease, transform .25s ease, padding-left .25s ease; }
.footer-col a:hover{ transform:translateX(3px); padding-left:2px; }

/* ---------- Header ---------- */
.site-header{
    position:sticky; top:0; left:0; right:0; z-index:1000;
    background:rgba(12,25,18,0.88); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border-soft);
    transition:background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.site-header.scrolled{
    background:rgba(12,25,18,0.97); box-shadow:0 12px 30px rgba(0,0,0,.35);
    border-bottom-color:rgba(205,162,85,0.4);
}
.header-inner{
    max-width:var(--maxw); margin:0 auto; padding:14px 24px;
    display:flex; align-items:center; justify-content:space-between;
    transition:padding .35s ease;
}
.site-header.scrolled .header-inner{ padding:9px 24px; }
.site-header.scrolled .brand-logo{ height:48px; }
.brand-logo{
    height:60px; width:auto; transition:height .35s ease;
    filter:drop-shadow(0 0 10px rgba(205,162,85,.55)) drop-shadow(0 0 22px rgba(205,162,85,.3));
}
.main-nav{ display:flex; gap:38px; }
.main-nav a{
    font-size:14px; letter-spacing:1.2px; text-transform:uppercase; font-weight:500;
    color:var(--text-light); position:relative; padding:6px 0;
}
.main-nav a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--gold);
    transition:width .3s ease;
}
.main-nav a:hover::after, .main-nav a.active::after{ width:100%; }
.main-nav a.active{ color:var(--gold); }

/* ---------- Nav dropdown ("Our Resorts") ---------- */
.nav-dropdown{ position:relative; display:flex; align-items:center; }
.nav-dropdown-menu{
    /* top:100% with no margin — the menu's hit-box touches the toggle's own
       bottom edge with zero gap. A permanent margin-top gap here meant the
       mouse lost :hover the instant it moved from the toggle down toward the
       menu, hiding it (visibility:hidden applies immediately) before a click
       on any item could land. background/border/padding-top all live on this
       same box (rather than an outer spacer + inner panel) so the visible
       panel's own top edge sits flush against the navbar — no dead zone
       outside the hoverable area for the cursor to cross. */
    position:absolute; top:100%; left:50%; min-width:230px;
    background:var(--green-800); border:1px solid var(--border-soft); border-radius:10px;
    padding:14px 8px 8px; box-shadow:var(--shadow); z-index:10;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateX(-50%) translateY(8px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown-menu:hover{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.nav-dropdown-menu a{
    display:block; padding:10px 14px; border-radius:6px; white-space:nowrap;
    font-size:13px; letter-spacing:.4px; text-transform:none; font-weight:400;
}
.nav-dropdown-menu a::after{ display:none; }
.nav-dropdown-menu a:hover{ background:rgba(205,162,85,.14); color:var(--gold); }

.header-book-btn{
    padding:10px 22px; font-size:12.5px; margin-left:24px; white-space:nowrap;
    animation:bookBtnPulse 1.8s ease-in-out infinite;
}
.header-book-btn:hover{ animation-play-state:paused; }
@keyframes bookBtnPulse{
    0%, 100%{ transform:scale(1); }
    50%{ transform:scale(1.08); }
}
@media (prefers-reduced-motion: reduce){
    .header-book-btn{ animation:none; }
}
.site-header.scrolled .header-book-btn{ padding:7px 18px; }
@media (max-width:900px){
    .header-book-btn{ margin-left:14px; padding:8px 16px; }
}
@media (max-width:480px){
    .header-book-btn{ margin-left:0; padding:7px 14px; font-size:11px; }
    /* Logo centred absolutely and taken out of the flex flow so the two
       remaining flex children (book button, hamburger) land at opposite
       edges via the existing justify-content:space-between, with the logo
       sitting dead-centre between them regardless of their widths. */
    .header-inner{ position:relative; }
    .brand{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
}

.nav-toggle{
    display:none; flex-direction:column; justify-content:center; gap:5px;
    width:38px; height:38px; background:transparent; border:1px solid var(--border-soft);
    border-radius:8px; cursor:pointer;
}
.nav-toggle span{ width:18px; height:2px; background:var(--gold); margin:0 auto; display:block; }

/* ---------- Hero ---------- */
.hero{
    position:relative; min-height:88vh; display:flex; align-items:center; justify-content:center;
    text-align:center; padding:140px 24px 100px;
    background:
        linear-gradient(180deg, rgba(12,25,18,.55) 0%, rgba(12,25,18,.75) 55%, var(--green-900) 100%),
        radial-gradient(circle at 30% 20%, #23503a 0%, #08140f 60%);
    overflow:hidden;
}
.hero-with-video{ background:#08140f; }
.hero-video-bg{
    position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;
}
.hero-video-bg iframe{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:100vw; height:56.25vw; min-height:100vh; min-width:177.78vh;
    border:0; pointer-events:none;
}
.hero-with-video::before{ content:none; }
.hero::before{
    content:''; position:absolute; inset:0; z-index:2;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.5) 0, transparent 60%),
        radial-gradient(1.5px 1.5px at 70% 15%, rgba(255,255,255,.4) 0, transparent 60%),
        radial-gradient(1.5px 1.5px at 85% 60%, rgba(255,255,255,.35) 0, transparent 60%),
        radial-gradient(2px 2px at 45% 75%, rgba(255,255,255,.3) 0, transparent 60%),
        radial-gradient(1.5px 1.5px at 10% 65%, rgba(255,255,255,.3) 0, transparent 60%);
    opacity:.6; pointer-events:none;
}
.hero-content{ position:relative; z-index:3; max-width:820px; }
.hero-content > *{ opacity:0; animation:heroRise .8s cubic-bezier(.16,.8,.24,1) forwards; }
.hero-content > *:nth-child(1){ animation-delay:.05s; }
.hero-content > *:nth-child(2){ animation-delay:.18s; }
.hero-content > *:nth-child(3){ animation-delay:.32s; }
.hero-content > *:nth-child(4){ animation-delay:.46s; }
@keyframes heroRise{
    from{ opacity:0; transform:translateY(26px); }
    to{ opacity:1; transform:translateY(0); }
}
.hero-eyebrow{
    color:var(--gold-light); letter-spacing:4px; text-transform:uppercase; font-size:13px;
    font-weight:600; margin-bottom:18px; display:block;
}
.hero h1{
    font-size:clamp(34px,6vw,64px); line-height:1.15; margin-bottom:20px;
}
.hero h1 em{ color:var(--gold); font-style:normal; }
.hero p{
    color:var(--text-muted); font-size:clamp(15px,1.6vw,18.5px); max-width:620px; margin:0 auto 34px;
}
.hero-actions{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.hero-small{ min-height:0; padding:60px 24px 28px; }

/* ---------- Resort Cards Grid ---------- */
.resort-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:32px;
}
.resort-card{
    background:linear-gradient(160deg, var(--green-700), var(--green-800));
    border:1px solid var(--border-soft); border-radius:var(--radius);
    padding:38px 30px; text-align:center; position:relative; overflow:hidden;
    transition:opacity 1.4s cubic-bezier(.22,.61,.36,1), transform 1.4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease;
    display:flex; flex-direction:column; align-items:center;
}
/* Negative margin bleeds the photo out to the card's own edges (cancelling its
   padding) so it reads as a cover photo above the fold, clipped to the card's
   rounded corners by the card's own overflow:hidden — rather than sitting
   inset inside the padding like a regular content image. */
.resort-card-photo{ width:calc(100% + 60px); height:150px; margin:-38px -30px 24px; overflow:hidden; }
.resort-card-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.resort-card:hover{
    transform:translateY(-10px); border-color:var(--gold);
    box-shadow:var(--shadow), 0 0 32px rgba(205,162,85,.25);
}
.resort-card .icon-badge{
    width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:rgba(205,162,85,.12); border:1px solid var(--border-soft); margin-bottom:20px;
    transition:transform .4s cubic-bezier(.16,.8,.24,1), background .4s ease;
}
.resort-card:hover .icon-badge{ transform:scale(1.12) rotate(-6deg); background:rgba(205,162,85,.22); }
.resort-card .icon-badge svg{ width:28px; height:28px; stroke:var(--gold); fill:none; }
.resort-card h3{ font-size:22px; margin-bottom:6px; }
.resort-card .card-loc{ color:var(--gold); font-size:12.5px; letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
.resort-card p.card-desc{ color:var(--text-muted); font-size:14.5px; margin-bottom:26px; flex-grow:1; }
.resort-grid--compact .resort-card p.card-desc{ flex-grow:0; margin-bottom:0; }
.resort-card-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.badge-soon{
    position:absolute; top:16px; right:16px; background:rgba(205,162,85,.15); color:var(--gold-light);
    font-size:9px; letter-spacing:1px; text-transform:uppercase; padding:3px 9px; border-radius:20px;
    border:1px solid var(--border-soft);
}
/* Sitting on a light photo (Shimla/Mukteshwar cards) instead of the dark card
   background, the translucent gold badge above washed out — same fix as the
   map-embed badge: a solid dark chip instead. */
.resort-card:has(.resort-card-photo) .badge-soon{ background:rgba(12,25,18,.85); border-color:var(--gold); }

/* ---------- About / split sections ---------- */
.split{
    display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.split-media{
    border-radius:var(--radius); overflow:hidden; border:1px solid var(--border-soft);
    background:linear-gradient(160deg,var(--green-700),var(--green-600));
    min-height:340px; display:flex; align-items:center; justify-content:center; padding:40px;
    transition:border-color .4s ease, box-shadow .4s ease;
}
.split-media:hover{ border-color:var(--gold); box-shadow:0 0 30px rgba(205,162,85,.18); }
.split-media img{ max-height:220px; width:auto; margin:0 auto; transition:transform .5s cubic-bezier(.16,.8,.24,1); }
.split-media:hover img{ transform:scale(1.06); }
/* Video fills the card edge-to-edge (no padding, cover-fit) rather than
   floating small and centred like the logo images this container was
   originally built for. Sized to the same 340px frame as every other
   split-media card by default — only the About-section hero video (flagged
   .split-media--feature) gets the larger showcase size. */
/* Fixed height (not min-height/100%) on the video itself — the split-media
   parent's height is otherwise just "auto" in this flex layout, so a portrait
   source video (e.g. a phone-shot vertical clip) was rendering at its own
   towering native aspect ratio instead of the intended frame; object-fit:cover
   then crops whatever the source's aspect ratio is down to this fixed box. */
.split-media:has(video){ padding:0; }
.split-media video{ width:100%; height:340px; object-fit:cover; display:block; }
.split-media--feature video{ height:520px; }
/* A plain photo used as the --feature showcase (Ayodhya Greens' building shot)
   gets the same full-bleed cover-fit treatment as the video, overriding the
   small-centred-logo styling above that's meant for actual logo images. */
.split-media--feature{ padding:0; }
.split-media--feature img{ width:100%; height:520px; max-height:none; object-fit:cover; margin:0; }
/* Ambient gold glow behind the About-section showcase video/photo — box-shadow
   sits outside the border-box so it isn't clipped by this element's own
   overflow:hidden (which only clips its children). Animated so the glow
   breathes gently rather than sitting static. */
.split-media--glow{
    box-shadow:0 0 40px rgba(205,162,85,.35), 0 0 90px rgba(205,162,85,.18);
    animation:splitGlowPulse 4s ease-in-out infinite;
}
@keyframes splitGlowPulse{
    0%, 100%{ box-shadow:0 0 40px rgba(205,162,85,.35), 0 0 90px rgba(205,162,85,.18); }
    50%{ box-shadow:0 0 55px rgba(205,162,85,.5), 0 0 120px rgba(205,162,85,.28); }
}
@media (prefers-reduced-motion: reduce){
    .split-media--glow{ animation:none; }
}
@media (max-width:700px){
    .split-media--feature video, .split-media--feature img{ height:320px; }
}
.split h2{ font-size:clamp(26px,3.4vw,38px); }
.split .lead{ color:var(--text-muted); }
.check-list li{
    display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; color:var(--text-light); font-size:15px;
}
.check-list li::before{
    content:'\2726'; color:var(--gold); flex-shrink:0; margin-top:2px; font-size:13px;
}

/* ---------- Promise / feature icons ---------- */
.feature-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:28px;
}
.feature-item{
    text-align:center; padding:30px 20px; border:1px solid var(--border-soft); border-radius:var(--radius);
    background:var(--green-800); transition:opacity 1.4s cubic-bezier(.22,.61,.36,1), transform 1.4s cubic-bezier(.22,.61,.36,1), border-color .4s ease, box-shadow .4s ease;
}
.feature-item:hover{ transform:translateY(-8px); border-color:var(--gold); box-shadow:0 0 28px rgba(205,162,85,.2); }
.feature-item .icon-badge{
    width:56px; height:56px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center;
    background:rgba(205,162,85,.12); border:1px solid var(--border-soft);
    transition:transform .4s cubic-bezier(.16,.8,.24,1), background .4s ease;
}
.feature-item:hover .icon-badge{ transform:scale(1.12) rotate(-6deg); background:rgba(205,162,85,.22); }
.feature-item .icon-badge svg{ width:24px; height:24px; stroke:var(--gold); fill:none; }
.feature-item h4{ font-size:16px; margin-bottom:6px; }
.promise-section-video .feature-item h4{ font-size:15px; white-space:nowrap; }
@media (max-width:480px){
    .promise-section-video .feature-item h4{ white-space:normal; }
}
.feature-item--photo{ padding:0 0 26px; overflow:hidden; }
.feature-item-photo{ width:100%; height:170px; margin-bottom:20px; overflow:hidden; }
.feature-item-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.16,.8,.24,1); }
.feature-item--photo:hover .feature-item-photo img{ transform:scale(1.08); }
.feature-item--photo h4, .feature-item--photo p{ padding-left:20px; padding-right:20px; }
.feature-item p{ color:var(--text-muted); font-size:13.5px; margin:0; }

/* "Our Promise" section — YouTube video background, tinted with the section's own
   background colour so it reads as texture behind the content rather than a clip. */
body.no-page-fold .promise-section-video{ position:relative; overflow:hidden; }
.promise-video-bg{
    position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;
}
.promise-video-bg video{
    width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;
}
.promise-video-overlay{
    position:absolute; inset:0; background:var(--green-900); opacity:.82;
}
.promise-section-video > .container{ position:relative; z-index:1; }

/* ---------- Destination-themed background decor (mountains, tiger, mandir) ---------- */
/* Only shown on very wide viewports where empty gutters sit either side of the
   1200px container — on anything narrower these would sit on top of real content.
   Positioned with `top` (not `bottom`) — percentage `bottom` offsets inside this
   very tall section were rendering in the wrong place.
   Each artwork (black line-art on white) is turned into a solid-gold silhouette by
   masking a gold-filled box with a luminance-inverted copy of the PNG — the mask's
   own <feColorMatrix> filter swaps black<->white first so the linework (originally
   black) becomes the opaque/visible part of the mask instead of the white paper. */
/* No position here either, same reason as .section-pattern above — the section's
   own position:sticky (from `body > section`) already anchors these decor pieces;
   overriding it to relative here would silently disable the fold effect on this
   section (a class selector wins over the plain-tag body > section rule). */
.section-decor{
    display:none; position:absolute; background:var(--gold); opacity:.85;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain; mask-size:contain;
}
@media (min-width:1600px){
    .section-decor{ display:block; }
    .section-decor--mountains{
        left:0.3%; top:14%; width:clamp(180px,11.6vw,232px); height:clamp(135px,8.7vw,174px);
        -webkit-mask-image:url(#tt-mask-mountains); mask-image:url(#tt-mask-mountains);
    }
    .section-decor--tiger{
        right:0.7%; top:5%; width:clamp(161px,10.35vw,201px); height:clamp(117px,7.5vw,146px);
        -webkit-mask-image:url(#tt-mask-tiger); mask-image:url(#tt-mask-tiger);
    }
    .section-decor--temple{
        right:1.7%; top:52%; width:clamp(115px,7.5vw,146px); height:clamp(161px,10.35vw,201px);
        -webkit-mask-image:url(#tt-mask-temple); mask-image:url(#tt-mask-temple);
    }
    .section-decor--river{
        left:0.3%; top:55%; width:clamp(180px,11.6vw,232px); height:clamp(180px,11.6vw,232px);
        -webkit-mask-image:url(#tt-mask-river); mask-image:url(#tt-mask-river);
    }
}

/* ---------- India locations map ---------- */
.map-split{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:50px; align-items:start; }
.map-intro{ text-align:left; margin:0; max-width:none; }
.map-intro .divider{ margin-left:0; }
.map-intro .resort-grid{ grid-template-columns:repeat(2,1fr); gap:18px; margin-top:32px; }
.map-intro .resort-card{ padding:22px 18px; }
.map-intro .resort-card .card-desc{ display:none; }
.map-intro .resort-card .icon-badge{ width:52px; height:52px; margin-bottom:14px; }
.map-intro .resort-card-photo{ width:calc(100% + 36px); height:160px; margin:-22px -18px 14px; }
.map-intro .resort-card .card-loc{ margin-bottom:0; }
.map-intro .resort-card h3{ font-size:18px; min-height:46px; display:flex; align-items:center; justify-content:center; }
.map-visual{ position:relative; min-width:0; }
.map-visual .map-credit{ text-align:left; }
.map-visual .map-frame{ max-width:100%; margin:0; }
/* Ambient halo behind the card — the main "it's floating in space" depth cue */
.map-visual::before{
    content:''; position:absolute; inset:-15% -10%; z-index:-1; pointer-events:none;
    background:radial-gradient(ellipse at 50% 45%, rgba(205,162,85,.22) 0%, transparent 68%);
    filter:blur(34px);
}
.map-frame{
    position:relative; max-width:600px; margin:0 auto; border-radius:var(--radius);
    overflow:hidden;
    transform:perspective(1600px) rotateX(4deg) rotateY(-3deg);
    transition:transform .5s cubic-bezier(.16,.8,.24,1);
    will-change:transform;
}
.map-frame:hover{
    transform:perspective(1600px) rotateX(0deg) rotateY(0deg) translateY(-4px);
}
.map-frame .map-inner{ position:relative; width:100%; }
.map-frame img{ width:100%; display:block; filter:drop-shadow(0 8px 24px rgba(0,0,0,.5)); }
.map-pin{
    position:absolute; width:0; height:0; text-decoration:none; cursor:pointer; z-index:2;
}
.map-pin:hover{ z-index:5; }
.map-pin-dot{
    position:absolute; left:0; top:0; width:16px; height:16px; transform:translate(-50%,-100%);
    filter:drop-shadow(0 4px 5px rgba(0,0,0,.55));
}
.map-pin-dot::before{
    content:''; position:absolute; inset:0; width:16px; height:16px; border-radius:50% 50% 50% 0;
    background:var(--gold); transform:rotate(-45deg); box-shadow:0 0 10px rgba(205,162,85,.7), 0 0 20px rgba(205,162,85,.4);
    transition:transform .3s ease, background .3s ease;
}
.map-pin-dot::after{
    content:''; position:absolute; top:50%; left:50%; width:34px; height:34px; margin:-17px 0 0 -17px;
    border-radius:50%; background:rgba(205,162,85,.35); animation:pinPulse 2.2s ease-out infinite;
}
.map-pin:hover .map-pin-dot::before{ transform:rotate(-45deg) scale(1.2); background:var(--gold-light); }
.map-pin-label{
    position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
    background:rgba(12,25,18,.92); border:1px solid var(--border-soft); color:var(--cream);
    font-size:11.5px; font-weight:600; letter-spacing:.4px; padding:4px 10px; border-radius:20px;
    white-space:nowrap; transition:border-color .3s ease, color .3s ease;
    animation:pinLabelBorderGlow 1.8s ease-in-out infinite;
}
@keyframes pinLabelBorderGlow{
    0%, 100%{ border-color:var(--border-soft); box-shadow:none; }
    50%{ border-color:var(--gold); box-shadow:0 0 8px rgba(205,162,85,.7), 0 0 16px rgba(205,162,85,.4); }
}
@media (prefers-reduced-motion: reduce){
    .map-pin-label{ animation:none; }
}
/* Pins that sit close together on the map: keep the dot on the exact spot, just push the label sideways so text doesn't collide */
.map-pin-label--left{ left:auto; right:14px; bottom:auto; top:-8px; transform:translateY(-50%); }
.map-pin-label--right{ left:14px; bottom:auto; top:-8px; transform:translateY(-50%); }
.map-pin-label .loc-status{ color:var(--gold-light); font-weight:500; }
.map-pin:hover .map-pin-label{ border-color:var(--gold); color:var(--gold-light); }
@keyframes pinPulse{
    0%{ transform:scale(.4); opacity:.9; }
    100%{ transform:scale(1.6); opacity:0; }
}
.map-credit{ text-align:center; font-size:11.5px; color:var(--text-muted); margin-top:18px; }
.map-credit a{ color:var(--text-muted); text-decoration:underline; }
@media (prefers-reduced-motion: reduce){
    .map-pin-dot::after{ animation:none; }
}
/* Below ~680px the card is too narrow for the full "TerraTrek <Name>" labels
   to sit apart without colliding, so the brand prefix is dropped and the
   pill shrinks — the whole map still fits in one frame, no side-scrolling. */
@media (max-width:680px){
    .map-pin-label{ font-size:10px; padding:3px 8px; letter-spacing:.2px; }
    .map-pin-label .pin-brand{ display:none; }
    /* Ayodhya Greens' pin sits just below the tight Billora/Mukteshwar row —
       drop its label further under its own dot so the two rows don't touch */
    .map-pin--ayodhya-greens .map-pin-label{ bottom:auto; top:26px; }
}
@media (max-width:420px){
    .map-pin-label{ font-size:9px; padding:2px 7px; }
}

/* ---------- Google reviews ---------- */
.stars{
    position:relative; display:inline-block; font-size:16px; line-height:1; letter-spacing:2px;
    color:rgba(255,255,255,.18);
}
.stars::before{ content:'\2605\2605\2605\2605\2605'; }
.stars-fill{ position:absolute; top:0; left:0; overflow:hidden; white-space:nowrap; color:var(--gold); text-shadow:0 0 10px rgba(205,162,85,.5); }
.stars-fill::before{ content:'\2605\2605\2605\2605\2605'; }

.rating-summary{
    display:flex; align-items:center; gap:26px; flex-wrap:wrap; justify-content:center;
    margin-bottom:50px; padding:30px 36px;
    background:linear-gradient(160deg, var(--green-700), var(--green-800));
    border:1px solid var(--border-soft); border-radius:var(--radius);
}
.rating-score{
    font-family:var(--serif); font-size:48px; font-weight:700; color:var(--gold); line-height:1;
    text-shadow:0 0 24px rgba(205,162,85,.5);
}
.rating-summary .stars{ font-size:18px; margin-bottom:6px; }
.rating-count{ color:var(--text-muted); font-size:14px; }
.rating-summary .btn{ margin-left:auto; }

.review-carousel-wrap{ position:relative; padding:0 8px; }
.review-carousel{
    display:flex; gap:28px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch; padding:4px 4px 10px; scrollbar-width:none;
}
.review-carousel::-webkit-scrollbar{ display:none; }
.review-card{
    background:var(--green-800); border:1px solid var(--border-soft); border-radius:var(--radius);
    padding:28px; display:flex; flex-direction:column; scroll-snap-align:start;
    flex:0 0 calc((100% - 56px) / 3); min-width:0;
    transition:opacity 1.4s cubic-bezier(.22,.61,.36,1), transform 1.4s cubic-bezier(.22,.61,.36,1), border-color .35s ease, box-shadow .35s ease;
}
.review-card:hover{ border-color:var(--gold); transform:translateY(-6px); box-shadow:0 0 26px rgba(205,162,85,.18); }
.review-card .stars{ margin-bottom:14px; }
.review-text{ color:var(--text-light); font-size:14.5px; font-style:italic; flex-grow:1; margin-bottom:22px; }
.review-author{ display:flex; align-items:center; gap:12px; }
.review-avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.review-avatar-fallback{
    width:40px; height:40px; border-radius:50%; flex-shrink:0; background:rgba(205,162,85,.15);
    border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center;
    color:var(--gold); font-weight:700; font-family:var(--serif);
}
.review-name{ font-size:14px; font-weight:600; color:var(--cream); }
.review-time{ font-size:12px; color:var(--text-muted); }

.carousel-btn{
    position:absolute; top:40%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
    background:var(--green-800); border:1px solid var(--border-soft); color:var(--gold); font-size:22px;
    display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3; transition:.3s ease;
}
.carousel-btn:hover{ border-color:var(--gold); background:var(--gold); color:var(--green-900); }
.carousel-prev{ left:-14px; }
.carousel-next{ right:-14px; }
.carousel-dots{ display:flex; justify-content:center; gap:8px; margin-top:22px; }
.carousel-dot{
    width:8px; height:8px; border-radius:50%; background:var(--border-soft); cursor:pointer;
    border:none; padding:0; transition:.3s ease;
}
.carousel-dot.active{ background:var(--gold); width:22px; border-radius:4px; }

@media (max-width:600px){
    .rating-summary{ text-align:center; justify-content:center; }
    .rating-summary .btn{ margin-left:0; width:100%; justify-content:center; }
}
@media (max-width:760px){
    .review-card{ flex:0 0 100%; }
    .carousel-prev{ left:-6px; }
    .carousel-next{ right:-6px; }
}

/* ---------- Gallery ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
.gallery-item{
    position:relative; display:block; width:100%; aspect-ratio:4/3; padding:0; margin:0;
    border:1px solid var(--border-soft); border-radius:var(--radius); overflow:hidden;
    background:var(--green-800); cursor:pointer;
    transition:opacity 1.4s cubic-bezier(.22,.61,.36,1), transform 1.4s cubic-bezier(.22,.61,.36,1), border-color .35s ease, box-shadow .35s ease;
}
.gallery-item[hidden]{ display:none; }
.gallery-item:hover{ border-color:var(--gold); box-shadow:0 0 26px rgba(205,162,85,.22); }
.gallery-item img{
    width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.16,.8,.24,1);
    animation:gallerySpotlight 12s ease-in-out infinite;
}
/* Spotlight: one card at a time zooms in and back out, forever — each image
   gets the same 12s loop, just started at a different offset (1.5s apart, for
   8 images) so only one is ever mid-pulse at a time and it visibly travels
   across the grid rather than everything pulsing in unison. */
@keyframes gallerySpotlight{
    0%, 12%, 100%{ transform:scale(1); }
    5%{ transform:scale(1.14); }
}
.gallery-grid .gallery-item:nth-child(1) img{ animation-delay:0s; }
.gallery-grid .gallery-item:nth-child(2) img{ animation-delay:1.5s; }
.gallery-grid .gallery-item:nth-child(3) img{ animation-delay:3s; }
.gallery-grid .gallery-item:nth-child(4) img{ animation-delay:4.5s; }
.gallery-grid .gallery-item:nth-child(5) img{ animation-delay:6s; }
.gallery-grid .gallery-item:nth-child(6) img{ animation-delay:7.5s; }
.gallery-grid .gallery-item:nth-child(7) img{ animation-delay:9s; }
.gallery-grid .gallery-item:nth-child(8) img{ animation-delay:10.5s; }
.gallery-grid .gallery-item:nth-child(9) img{ animation-delay:12s; }
.gallery-grid .gallery-item:nth-child(10) img{ animation-delay:13.5s; }
.gallery-grid .gallery-item:nth-child(11) img{ animation-delay:15s; }
.gallery-grid .gallery-item:nth-child(12) img{ animation-delay:16.5s; }
.gallery-grid .gallery-item:nth-child(13) img{ animation-delay:18s; }
.gallery-grid .gallery-item:nth-child(14) img{ animation-delay:19.5s; }
.gallery-grid .gallery-item:nth-child(15) img{ animation-delay:21s; }
@media (prefers-reduced-motion: reduce){
    .gallery-item img{ animation:none; }
}
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-item::after{
    content:'\2295'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:28px; color:var(--gold-light); background:rgba(12,25,18,0); opacity:0;
    transition:opacity .35s ease, background .35s ease; pointer-events:none;
}
.gallery-item:hover::after{ opacity:1; background:rgba(12,25,18,.35); }
/* Line-art destination decor (mountains/tiger/temple/river) reused as gallery
   filler — these are dark strokes drawn on their own opaque near-white canvas
   (not transparent), so instead of fighting that with a colour filter, they
   just get a cream card to sit on, like a framed print, and are shown in full
   (contain) rather than cropped (cover). */
.gallery-item-light{ background:var(--cream); }
.gallery-item-light img{ object-fit:contain; padding:22px; }
.gallery-item-light::after{ color:var(--green-900); }
.gallery-item-light:hover::after{ background:rgba(244,239,228,.55); }
.lightbox-slide-light img{ background:var(--cream); border-radius:6px; padding:20px; }
@media (max-width:700px){
    .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
    .gallery-item-light img{ padding:12px; }
    .gallery-item::after{ font-size:20px; }
}

/* ---------- Gallery lightbox ---------- */
/* width/height:0 (not inset:0) when closed — the track's flex-shrink:0 slides
   want their full 8x100% width regardless, and overflow:hidden on a fixed,
   full-viewport-sized box wasn't enough to stop that from still inflating the
   document's own scrollWidth. Collapsing the box itself to 0x0 removes any
   ambiguity: there's nothing left for the slides to overflow out of. */
.lightbox{
    position:fixed; top:0; left:0; width:0; height:0; z-index:9997; background:rgba(6,12,9,.96); overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease, width 0s linear .35s, height 0s linear .35s;
}
.lightbox.open{
    width:100%; height:100%; opacity:1; visibility:visible;
    transition:opacity .35s ease, visibility .35s ease, width 0s, height 0s;
}
.lightbox-track{
    display:flex; width:100%; height:100%; transition:transform .5s cubic-bezier(.16,.8,.24,1);
}
.lightbox-slide{
    flex:0 0 100%; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:60px;
}
.lightbox-slide img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:6px; }
.lightbox-close, .lightbox-prev, .lightbox-next{
    position:fixed; z-index:9998; background:rgba(19,39,28,.7); border:1px solid var(--border-soft); color:var(--gold-light);
    border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ border-color:var(--gold); background:rgba(19,39,28,.95); }
.lightbox-close{ top:22px; right:22px; width:44px; height:44px; font-size:24px; }
.lightbox-prev, .lightbox-next{ top:50%; width:52px; height:52px; font-size:26px; transform:translateY(-50%); }
.lightbox-prev:hover, .lightbox-next:hover{ transform:translateY(-50%) scale(1.08); }
.lightbox-prev{ left:22px; }
.lightbox-next{ right:22px; }
@media (max-width:600px){
    .lightbox-slide{ padding:24px; }
    .lightbox-prev, .lightbox-next{ width:40px; height:40px; font-size:20px; }
    .lightbox-prev{ left:8px; }
    .lightbox-next{ right:8px; }
    .lightbox-close{ top:12px; right:12px; width:36px; height:36px; font-size:20px; }
}
@media (prefers-reduced-motion: reduce){
    .lightbox, .lightbox-track{ transition:none; }
}  

/* ---------- Amenity pills ---------- */
.amenity-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; }
.amenity-pill{
    display:flex; align-items:center; gap:12px; padding:16px 18px; border:1px solid var(--border-soft);
    border-radius:10px; background:var(--green-800); font-size:14.5px;
    transition:border-color .3s ease, transform .3s cubic-bezier(.16,.8,.24,1);
}
.amenity-pill:hover{ border-color:var(--gold); transform:translateX(4px); }
.amenity-pill svg{ width:24px; height:24px; stroke:var(--gold); stroke-width:1.4; fill:none; flex-shrink:0; }

/* ---------- Header "Book Now" resort-picker modal ---------- */
.book-modal-overlay{
    position:fixed; inset:0; background:rgba(6,12,9,.72); z-index:10050;
    display:flex; align-items:center; justify-content:center; padding:20px;
    opacity:0; visibility:hidden; transition:opacity .25s ease;
}
.book-modal-overlay.open{ opacity:1; visibility:visible; }
.book-modal{
    position:relative; width:100%; max-width:480px; background:var(--green-800);
    border:1px solid var(--border-soft); border-radius:var(--radius); box-shadow:var(--shadow);
    padding:36px 30px 30px; text-align:center;
    transform:translateY(16px); transition:transform .25s ease;
}
.book-modal-overlay.open .book-modal{ transform:translateY(0); }
.book-modal h3{ font-family:var(--serif); font-size:22px; color:var(--gold-light); margin-bottom:8px; }
.book-modal-sub{ color:var(--text-muted); font-size:14px; margin-bottom:24px; }
.book-modal-close{
    position:absolute; top:12px; right:14px; width:32px; height:32px; border-radius:50%;
    border:1px solid var(--border-soft); background:transparent; color:var(--text-light);
    font-size:20px; line-height:1; cursor:pointer; transition:border-color .3s ease, color .3s ease;
}
.book-modal-close:hover{ border-color:var(--gold); color:var(--gold); }
.book-modal-options{ display:flex; flex-direction:column; gap:14px; }
.book-modal-option{
    display:flex; align-items:center; gap:16px; padding:14px 18px; border:1px solid var(--border-soft);
    border-radius:10px; background:var(--green-700); text-align:left;
    transition:border-color .3s ease, transform .3s cubic-bezier(.16,.8,.24,1);
}
.book-modal-option:hover{ border-color:var(--gold); transform:translateX(4px); }
.book-modal-option img{ width:112px; height:112px; object-fit:contain; flex-shrink:0; }
.book-modal-option-logo-dark{ background:#000; border-radius:8px; padding:6px; }
.book-modal-option span{ font-weight:600; color:var(--gold-light); font-size:15px; }

/* ---------- Room cards ---------- */
.room-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px; }
.room-card{
    border:1px solid var(--border-soft); border-radius:var(--radius); background:var(--green-800); overflow:hidden;
    padding:30px; transition:opacity 1.4s cubic-bezier(.22,.61,.36,1), transform 1.4s cubic-bezier(.22,.61,.36,1), border-color .35s ease, box-shadow .35s ease;
}
.room-card-photo{ width:calc(100% + 60px); height:220px; margin:-30px -30px 20px; overflow:hidden; }
.room-card-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Attraction cards (photo variant of the plain chip-grid) ---------- */
.attraction-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; }
.attraction-card{
    position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3;
    border:1px solid var(--border-soft); transition:border-color .35s ease, box-shadow .35s ease;
}
.attraction-card:hover{ border-color:var(--gold); box-shadow:0 0 26px rgba(205,162,85,.2); }
.attraction-card img{
    width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.16,.8,.24,1);
}
.attraction-card:hover img{ transform:scale(1.08); }
.attraction-card span{
    position:absolute; left:0; right:0; bottom:0; padding:26px 16px 14px;
    background:linear-gradient(to top, rgba(6,12,9,.9), transparent);
    color:var(--text-light); font-weight:600; font-size:14.5px; text-align:center;
}
.attraction-card--noimg{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:var(--green-800); }
.attraction-card--noimg .icon-badge{
    width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:rgba(205,162,85,.12); border:1px solid var(--border-soft);
}
.attraction-card--noimg .icon-badge svg{ width:24px; height:24px; stroke:var(--gold); fill:none; }
.attraction-card--noimg span{ position:static; background:none; padding:0; }
.room-card:hover{ border-color:var(--gold); transform:translateY(-6px); box-shadow:0 0 26px rgba(205,162,85,.18); }
.room-card h4{ font-size:19px; margin-bottom:10px; color:var(--gold-light); }
.room-card p.room-desc{ color:var(--text-muted); font-size:14px; margin-bottom:18px; }
.room-meta{ display:flex; flex-wrap:wrap; gap:10px 22px; font-size:13px; color:var(--text-light); }
.room-meta span{ display:flex; align-items:center; gap:6px; }
.room-meta b{ color:var(--gold); font-weight:600; }
.room-meta svg{ width:15px; height:15px; stroke:var(--gold); fill:none; flex-shrink:0; }
.room-card-btn{ display:inline-flex; margin-top:20px; padding:10px 22px; font-size:12px; }

/* ---------- Table ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--border-soft); border-radius:var(--radius); }
table.data-table{ width:100%; border-collapse:collapse; min-width:560px; }
table.data-table th, table.data-table td{
    padding:16px 20px; text-align:left; font-size:14.5px; border-bottom:1px solid var(--border-soft);
}
table.data-table th{
    background:var(--green-700); color:var(--gold); text-transform:uppercase; font-size:12px; letter-spacing:1px;
}
table.data-table tr:last-child td{ border-bottom:none; }
table.data-table tr:hover td{ background:rgba(205,162,85,.05); }

/* ---------- Attractions chips ---------- */
.chip-grid{ display:flex; flex-wrap:wrap; gap:14px; }
.chip{
    padding:10px 20px; border:1px solid var(--border-soft); border-radius:30px; font-size:13.5px;
    background:var(--green-800); color:var(--text-light);
    transition:border-color .3s ease, transform .3s cubic-bezier(.16,.8,.24,1), color .3s ease;
}
.chip:hover{ border-color:var(--gold); color:var(--gold-light); transform:translateY(-3px); }

/* ---------- Info blocks (reach) ---------- */
.info-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; margin-bottom:36px; }
.info-block{ padding:24px; border:1px solid var(--border-soft); border-radius:var(--radius); background:var(--green-800); }
.info-block .label{ color:var(--gold); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:8px; display:block; }
.info-block .value{ font-size:16px; color:var(--text-light); }

/* ---------- Factual information ---------- */
.fact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:22px 44px; }
.fact-item{ display:flex; gap:16px; align-items:flex-start; padding-bottom:20px; border-bottom:1px solid var(--border-soft); }
.fact-item .icon-badge{
    width:52px; height:52px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:rgba(205,162,85,.12); border:1px solid var(--border-soft);
}
.fact-item .icon-badge svg{ width:24px; height:24px; stroke:var(--gold); fill:none; }
.fact-label{ display:block; color:var(--gold); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:4px; font-weight:600; }
.fact-value{ margin:0; color:var(--text-muted); font-size:14.5px; }

/* ---------- Membership plans ---------- */
.plan-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; max-width:1240px; margin:0 auto; }
.plan-card{
    text-align:center; padding:40px 24px; border:1px solid var(--border-soft); border-radius:var(--radius);
    background:linear-gradient(160deg, var(--green-800), var(--green-900));
    transition:border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.16,.8,.24,1);
}
.plan-card:hover{ border-color:var(--gold); box-shadow:0 0 30px rgba(205,162,85,.2); transform:translateY(-8px); }
.plan-years{
    display:inline-block; padding:6px 18px; border:1px solid var(--gold); border-radius:20px; color:var(--gold);
    font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:600; margin-bottom:18px;
}
.plan-card h3{ font-size:20px; margin-bottom:14px; }
.plan-price{ font-family:var(--serif); font-size:clamp(28px,2.8vw,40px); font-weight:700; color:var(--gold-light); text-shadow:0 0 24px rgba(205,162,85,.4); }
.plan-gst{ color:var(--text-muted); font-size:12.5px; margin-bottom:24px; }
.plan-meta{ display:flex; flex-direction:column; gap:14px; text-align:left; padding-top:20px; border-top:1px solid var(--border-soft); }
.plan-meta div{ display:flex; align-items:center; gap:12px; }
.plan-meta svg{ width:22px; height:22px; stroke:var(--gold); fill:none; flex-shrink:0; }
.plan-meta span{ font-size:14px; color:var(--text-light); }
.plan-footnote{ text-align:center; margin-top:36px; font-family:var(--serif); font-size:22px; color:var(--gold-light); text-shadow:0 0 20px rgba(205,162,85,.3); }
@media (max-width:1024px){
    .plan-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:820px; }
}
@media (max-width:600px){
    .plan-grid{ gap:12px; }
    .plan-card{ padding:24px 12px; }
    .plan-years{ padding:5px 12px; font-size:10.5px; letter-spacing:1.5px; margin-bottom:12px; }
    .plan-card h3{ font-size:16px; margin-bottom:10px; }
    .plan-price{ font-size:22px; }
    .plan-gst{ font-size:11px; margin-bottom:16px; }
    .plan-meta{ gap:10px; padding-top:14px; }
    .plan-meta div{ gap:8px; align-items:flex-start; }
    .plan-meta svg{ width:16px; height:16px; }
    .plan-meta span{ font-size:12px; line-height:1.4; }
}

.distance-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.distance-list li{
    display:flex; justify-content:space-between; padding:12px 18px; border:1px solid var(--border-soft);
    border-radius:8px; background:var(--green-800); font-size:14px;
}
.distance-list li b{ color:var(--gold); font-weight:600; }

/* ---------- Map ---------- */
.map-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.map-embed{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border-soft); background:var(--green-800); }
/* Overridden here — the plain .badge-soon (translucent gold on gold text) reads
   fine over a dark card, but this badge sits on top of the light-coloured map
   tiles instead, where it was nearly invisible. Solid dark background instead. */
.map-embed .badge-soon{
    z-index:1; background:rgba(12,25,18,.9); color:var(--gold-light); border-color:var(--gold);
}
.map-embed iframe{ width:100%; height:220px; border:0; display:block; filter:grayscale(.2) contrast(1.05); }
.map-embed-label{
    margin:0; padding:12px 14px; font-size:13.5px; font-weight:600; color:var(--gold-light);
    text-align:center; border-top:1px solid var(--border-soft);
}
@media (max-width:900px){
    .map-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Contact page ---------- */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; }
.contact-info-item{ display:flex; gap:16px; margin-bottom:26px; align-items:flex-start; }
.contact-info-item .icon-badge{
    width:46px; height:46px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:rgba(205,162,85,.12); border:1px solid var(--border-soft);
}
.contact-info-item .icon-badge svg{ width:20px; height:20px; stroke:var(--gold); fill:none; }
.contact-info-item h4{ font-size:15.5px; margin-bottom:4px; }
.contact-info-item p, .contact-info-item a{ color:var(--text-muted); font-size:14.5px; }
.contact-info-item a:hover{ color:var(--gold); }

.form-card{
    background:var(--green-800); border:1px solid var(--border-soft); border-radius:var(--radius); padding:40px;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.form-group{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.form-group label{ font-size:13px; letter-spacing:.5px; color:var(--text-muted); }
.form-group input, .form-group select, .form-group textarea{
    background:var(--green-900); border:1px solid var(--border-soft); border-radius:8px; padding:13px 16px;
    color:var(--text-light); font-family:var(--sans); font-size:14.5px; outline:none; transition:.25s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{ border-color:var(--gold); }
.form-group textarea{ resize:vertical; min-height:120px; }
.form-note{ font-size:12.5px; color:var(--text-muted); margin-top:6px; }
.quote-highlight{ color:var(--gold-light); }
.signature-name{ color:var(--cream); }

/* ---------- CTA banner ---------- */
.cta-banner{
    position:relative; overflow:hidden;
    background:linear-gradient(135deg, var(--green-700), var(--green-900));
    border:1px solid var(--border-soft); border-radius:var(--radius);
    padding:60px 40px; text-align:center;
}
.cta-banner h2{ font-size:clamp(24px,3.4vw,34px); margin-bottom:12px; }
.cta-banner p{ color:var(--text-muted); margin-bottom:26px; }
/* Hanging plant — gold silhouette via the same SVG-mask technique used for the
   mountain/tiger/temple/river decor (a gold-filled box, masked to the artwork's
   own shape) instead of a plain filtered <img>, so the outline reads as solid
   gold linework rather than white. Nudged a few px above the card's top edge
   (negative top) so the string tips visually meet the border with no gap. */
.cta-hanging-plant{
    position:absolute; top:-14px; right:0%; width:150px; height:190px;
    background:var(--gold);
    -webkit-mask-image:url(#tt-mask-plant); mask-image:url(#tt-mask-plant);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:top center; mask-position:top center;
    -webkit-mask-size:contain; mask-size:contain;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));
    pointer-events:none;
}
@media (max-width:760px){
    .cta-hanging-plant{ width:100px; height:130px; right:4%; }
}
/* Bottom-left flower spray — same gold-mask technique, growing up from the
   card's bottom edge (bottom:0, nudged a few px past it so the stem base
   visually meets the border with no gap). */
.cta-bottom-flower{
    position:absolute; bottom:-14px; left:2%; width:130px; height:160px;
    background:var(--gold);
    -webkit-mask-image:url(#tt-mask-flower); mask-image:url(#tt-mask-flower);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:bottom center; mask-position:bottom center;
    -webkit-mask-size:contain; mask-size:contain;
    filter:drop-shadow(0 -6px 14px rgba(0,0,0,.35));
    pointer-events:none;
}
@media (max-width:760px){
    .cta-bottom-flower{ width:90px; height:110px; left:2%; }
}

/* ---------- Coming soon page ---------- */
.soon-wrap{ text-align:center; padding:130px 24px; min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.soon-badge{
    display:inline-block; padding:8px 22px; border:1px solid var(--gold); border-radius:30px; color:var(--gold);
    letter-spacing:2px; text-transform:uppercase; font-size:12px; margin-bottom:24px;
}
.soon-wrap h1{ font-size:clamp(30px,5vw,52px); margin-bottom:16px; }
.soon-wrap p{ color:var(--text-muted); max-width:560px; margin:0 auto 34px; font-size:16px; }

/* ---------- Partners marquee ---------- */
/* Edge fade via mask-image (not a solid overlay) so the logos genuinely dissolve
   into the section background regardless of theme (alt/normal) instead of a
   visible hard-edged box. */
.partners-marquee{
    position:relative; z-index:1; overflow:hidden; margin-top:48px;
    -webkit-mask-image:linear-gradient(to right, transparent 0, black 64px, black calc(100% - 64px), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, black 64px, black calc(100% - 64px), transparent 100%);
}
/* Two identical .partners-track-set children sit side by side; animating the
   track exactly -50% (one set's width) loops seamlessly with no visible seam
   or jump back to start. */
.partners-track{
    display:flex; width:max-content;
    animation:partnersScroll 28s linear infinite;
}
.partners-marquee:hover .partners-track{ animation-play-state:paused; }
.partners-track-set{ display:flex; align-items:center; flex-shrink:0; }
@keyframes partnersScroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}
/* Each source file is a different shape (some a bare mark, some a full card
   with their own background baked in), so sizing the box and letting
   object-fit:contain scale to fit made the actual marks read as very
   different sizes. Fixing the IMAGE itself to one height (width:auto) is
   what actually makes every logo read as the same size in the row. */
.partner-logo{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    height:116px; margin:0 26px; flex-shrink:0;
}
/* Soft ambient gold glow sitting behind each logo — same rgba(205,162,85,..)
   gold used for the split-media/footer-logo glows elsewhere, just as a blurred
   radial patch instead of a box-shadow (these logos have irregular, often
   transparent edges, so a shadow-based glow would hug the wrong outline).
   Sized bigger than the logo itself so it actually reads as a glow spilling
   out around the mark, not a patch hidden entirely behind it, and the row's
   own height is opened up (.partner-logo above) so it has room to show
   without being clipped by the marquee's overflow:hidden. */
.partner-logo::before{
    content:''; position:absolute; left:50%; top:50%; width:190px; height:100px;
    transform:translate(-50%,-50%);
    background:radial-gradient(ellipse at center, rgba(205,162,85,.55) 0%, rgba(205,162,85,.22) 45%, rgba(205,162,85,0) 76%);
    filter:blur(12px); z-index:0; pointer-events:none;
    opacity:.65; animation:partnerGlowPulse 4s ease-in-out infinite;
    transition:opacity .35s ease;
}
.partner-logo img{
    position:relative; z-index:1;
    height:64px; width:auto; max-width:170px; object-fit:contain;
    filter:grayscale(1) brightness(1.6) contrast(.9); opacity:.65;
    transition:filter .35s ease, opacity .35s ease, transform .35s ease;
}
.partner-logo:hover::before{ opacity:1; }
.partner-logo:hover img{ filter:none; opacity:1; transform:scale(1.06); }
@keyframes partnerGlowPulse{
    0%, 100%{ opacity:.65; }
    50%{ opacity:.85; }
}
@media (prefers-reduced-motion: reduce){
    .partners-track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; }
    .partners-track-set[aria-hidden="true"]{ display:none; }
    .partner-logo::before{ animation:none; }
}
@media (max-width:700px){
    .partner-logo{ height:100px; margin:0 16px; }
    .partner-logo::before{ width:150px; height:76px; }
    .partner-logo img{ height:44px; max-width:120px; }
}

/* ---------- Footer ---------- */
/* Positioned + given a z-index higher than every sticky section: without an
   explicit z-index a static element always paints BELOW any positioned sibling
   that has one (regardless of DOM/scroll order), so the sticky sections above
   would otherwise permanently render on top of the footer and hide it. */
.site-footer{
    position:relative; z-index:20; background:var(--green-900); border-top:1px solid var(--border-soft);
    padding-top:70px; overflow:hidden;
}
/* Monuments skyline watermark — same layered-background technique as the
   .section-pattern tile (a positioned, low-opacity ::before behind the real
   content), anchored with background-position:bottom so the skyline's own
   base sits flush against the footer's bottom edge with no gap. */
.site-footer::before{
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:url(../../images/footer.png) no-repeat bottom center / 100% auto;
    opacity:.06;
}
.footer-inner{
    position:relative; z-index:1;
    max-width:var(--maxw); margin:0 auto; padding:0 24px 50px;
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
}
.footer-logo{
    height:80px; margin-bottom:14px;
    filter:drop-shadow(0 0 12px rgba(205,162,85,.55)) drop-shadow(0 0 26px rgba(205,162,85,.3));
    transition:filter .35s ease, transform .35s ease;
}
.footer-logo:hover{ filter:drop-shadow(0 0 14px rgba(205,162,85,.7)); transform:scale(1.05) rotate(-3deg); }
.footer-brand p{ color:var(--text-muted); font-size:13.5px; }
.footer-col h4{ color:var(--gold); font-size:14px; letter-spacing:1px; text-transform:uppercase; margin-bottom:18px; }
.footer-col a{ display:block; color:var(--text-muted); font-size:14px; margin-bottom:12px; transition:.2s; }
.footer-col a:hover{ color:var(--gold); }
.footer-bottom{
    position:relative; z-index:1;
    border-top:1px solid var(--border-soft); padding:22px 24px; text-align:center;
}
.footer-bottom p{ margin:0; color:var(--text-muted); font-size:12.5px; }

#backToTop{
    position:fixed; bottom:26px; right:26px; width:44px; height:44px; border-radius:50%;
    background:var(--gold); color:var(--green-900); border:none; font-size:18px; cursor:pointer;
    display:none; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(0,0,0,.4); z-index:900;
}
#backToTop.show{ display:flex; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
    .split{ grid-template-columns:1fr; }
    .contact-grid{ grid-template-columns:1fr; }
    .footer-inner{ grid-template-columns:1fr 1fr; }
    .map-split{ grid-template-columns:1fr; }
    .map-visual{ order:1; }
    .map-intro{ order:2; text-align:center; margin:0 auto; max-width:720px; }
    .map-intro .divider{ margin-left:auto; margin-right:auto; }
    .map-visual .map-frame{ max-width:600px; margin:0 auto; }
    /* Flatten the 3D tilt on tablet/mobile — keeps pins & labels fully legible on touch screens */
    .map-frame, .map-frame:hover{ transform:none; }
    .map-visual .map-credit{ text-align:center; }
}
/* Nav-toggle switches over at a wider point (900px, matching the .header-book-btn
   compacting breakpoint above) than the rest of this file's 760px mobile block —
   at exactly 760px the full desktop nav (5 links + Book Now) has nowhere near
   enough room and was wrapping onto two lines on common tablet widths like
   iPad's 768px portrait. */
@media (max-width: 900px){
    .main-nav{
        position:fixed; top:82px; left:0; right:0; background:var(--green-800);
        flex-direction:column; padding:24px; gap:0; border-bottom:1px solid var(--border-soft);
        transform:translateY(-140%); opacity:0; transition:.3s ease; pointer-events:none;
    }
    .main-nav.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
    .main-nav a{ padding:14px 0; border-bottom:1px solid var(--border-soft); }
    .nav-toggle{ display:flex; }
    /* The dropdown has no room to hover-reveal in this fixed full-width mobile
       menu, so it's just always expanded inline under its toggle instead. */
    .nav-dropdown{ display:block; }
    .nav-dropdown-menu{
        position:static; opacity:1; visibility:visible; pointer-events:auto; transform:none;
        background:transparent; border:none; box-shadow:none; padding:0; margin:0 0 0 18px; min-width:0;
    }
    .nav-dropdown-menu a{ padding:12px 0; border-bottom:1px solid var(--border-soft); font-size:13px; color:var(--text-muted); }
}
@media (max-width: 760px){
    .section{ padding:64px 0; }
    .form-row{ grid-template-columns:1fr; }
    .footer-inner{ grid-template-columns:1fr; text-align:center; }
    .footer-logo{ margin-left:auto; margin-right:auto; }
    .check-list li{ justify-content:center; }
    .contact-info-item{ text-align:left; }
    .map-intro .resort-grid{ grid-template-columns:repeat(2,1fr); gap:12px; max-width:480px; margin-left:auto; margin-right:auto; }
    .map-intro .resort-card{ padding:16px 12px; }
    .map-intro .resort-card-photo{ width:calc(100% + 24px); height:120px; margin:-16px -12px 10px; }
    .map-intro .resort-card h3{ font-size:15px; min-height:38px; }
    .map-intro .resort-card .card-loc{ font-size:10.5px; margin-bottom:0; }
    .map-intro .resort-card .icon-badge{ width:42px; height:42px; margin-bottom:10px; }
    .map-intro .badge-soon{ top:8px; right:8px; font-size:7.5px; letter-spacing:.6px; padding:2.5px 7px; }
}