/* Range, stay and Bhutan trip pages: desktop video/photo hero + floating CTA (the CTA shows at every width).
   Loaded on every safari and stay detail page. Below 1280px the hero layout is untouched.
   The hero lives inside .detail-cover so the site curtain (curtain.js) pins it and
   slides the paper sheet over it, like every other content page. */
.dh-hero{display:none}
@media(max-width:1279.98px){.dh-cover-only{display:none}}
/* No drop shadow on the curtain sheet for these pages (all widths). */
body:has(.dh-hero) .curtain-scene>.curtain-sheet{box-shadow:none}

/* Phones: compact title band, and the cover shows the whole photo/video at its own
   proportions. The sheet starts right below the picture (no tuck), so the curtain never
   covers it; behind its rounded corners is cream, so at rest the edge reads clean. */
@media(max-width:600px){
  body:has(.dh-hero) .page-intro{padding:22px var(--gutter) 20px}
  body:has(.dh-hero) .page-intro .breadcrumb{margin-bottom:10px}
  body:has(.dh-hero) .page-intro .eyebrow{margin-bottom:6px}
  body:has(.dh-hero) .page-intro h1{margin-bottom:8px;font-size:clamp(28px,8.4vw,36px);line-height:1.06}
  body:has(.dh-hero) .page-intro .lead{margin:0;font-size:14px;line-height:1.5}
  .dh-cover{height:auto;max-height:none}
  body:has(.dh-hero) .curtain-page.curtain-enabled{background:var(--cream)}
  body:has(.dh-hero) .curtain-page.curtain-enabled>.curtain-sheet{margin-top:0}
  .dh-cover>.visual-media{height:auto}
  .dh-cover>.visual-media>img{height:auto;max-height:75svh;object-fit:cover}
}

@media(min-width:1280px){
  body:has(.dh-hero) .page-intro{display:none}
  .dh-cover{height:calc(100svh - var(--nav-height,88px));min-height:560px;max-height:1100px}
  /* First screen is hero only: the paper sheet starts just below the fold (no corner tuck),
     then slides up over the pinned hero on scroll. While it enters, the area outside its
     rounded corners shows forest, matching the hero's dark lower edge. */
  body:has(.dh-hero) .curtain-page.curtain-enabled{background:var(--forest)}
  body:has(.dh-hero) .curtain-page.curtain-enabled>.curtain-sheet{margin-top:0}
  .dh-cover>.visual-media{display:none}

  .dh-hero{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:var(--forest);color:var(--cream)}
  .dh-hero-media{position:absolute;inset:0}
  .dh-hero-media>.visual-media{height:100%;background:var(--forest)}
  .dh-hero-media>.visual-media>img,.dh-hero-media>.visual-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 60%;transform:scale(calc(1 + var(--curtain-progress,0)*.06));transform-origin:40% 60%}
  /* Soft top scrim for the pill, deeper forest scrim behind the copy. */
  .dh-hero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,#1b2a1e59 0,#1b2a1e00 22%,#1b2a1e00 42%,#1b2a1e8c 74%,#1b2a1ee6 100%),linear-gradient(90deg,#1b2a1e73 0,#1b2a1e00 60%)}

  .dh-pill{position:absolute;top:clamp(18px,2.4vw,34px);left:var(--gutter);z-index:3;display:inline-flex;align-items:center;gap:10px;max-width:calc(100% - var(--gutter)*2);margin:0;padding:9px 18px 9px 16px;border:0;border-left:2px solid var(--orange);border-radius:2px;background:#1b2a1eb8;color:var(--cream);font:500 14px/1.3 var(--body);letter-spacing:.02em}
  .dh-pill-kind{color:var(--sage);font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
  .dh-pill-sep{opacity:.55}

  /* Headline copy sits on the footage, then drifts up and fades as the sheet covers it. */
  .dh-copy{position:absolute;left:var(--gutter);bottom:clamp(64px,8vh,104px);z-index:3;max-width:min(760px,56vw);opacity:calc(1 - var(--curtain-progress,0)*1.6);transform:translateY(calc(var(--curtain-progress,0)*-60px))}
  .dh-eyebrow{margin:0 0 14px;color:var(--orange);font:600 12px/1.4 var(--body);letter-spacing:.18em;text-transform:uppercase;animation:dh-rise .8s var(--tv-ease-reveal,ease) .15s both}
  .dh-line{margin:0;font:500 clamp(34px,3.6vw,60px)/1.04 var(--display);letter-spacing:-.025em;color:var(--cream);text-wrap:balance;text-shadow:0 2px 30px #1b2a1e66;animation:dh-rise .9s var(--tv-ease-reveal,ease) .3s both}
  /* Longer introductions step down so the headline never swamps the footage. */
  .dh-line.dh-line-md{font-size:clamp(26px,2.4vw,40px);line-height:1.12;letter-spacing:-.02em}
  .dh-line.dh-line-sm{max-width:680px;font-size:clamp(19px,1.45vw,24px);line-height:1.38;letter-spacing:-.01em;text-wrap:pretty;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
  .dh-tags{display:flex;flex-wrap:wrap;gap:10px 26px;margin:22px 0 0;padding:0;list-style:none}
  .dh-tags li{max-width:300px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;padding:2px 0 2px 17px;color:var(--cream);font:500 13px/1.2 var(--body);letter-spacing:.04em;text-shadow:0 1px 10px #1b2a1e99;animation:dh-rise .8s var(--tv-ease-reveal,ease) both}
  .dh-tags li::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:0 100%;background:var(--orange)}
  .dh-tags li:nth-child(1){animation-delay:.42s}.dh-tags li:nth-child(2){animation-delay:.52s}.dh-tags li:nth-child(3){animation-delay:.62s}
  .dh-see-more{display:inline-flex;align-items:center;gap:14px;margin-top:24px;color:var(--cream);font:600 13px/1 var(--body);letter-spacing:.06em;text-decoration:none;animation:dh-rise .9s var(--tv-ease-reveal,ease) .72s both}
  .dh-cue{position:relative;width:1px;height:38px;overflow:hidden;background:#fcf9f240}
  .dh-cue::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--orange);animation:dh-cue 1.8s ease-in-out infinite}
  .dh-see-more:hover,.dh-see-more:focus-visible{color:var(--orange)}

}
/* Floating CTA pill on every width: "Book now" on ranges, "Enquiry" on stays. */
.dh-cta{position:fixed;left:50%;bottom:24px;z-index:44;display:inline-flex;align-items:center;gap:14px;padding:7px 7px 7px 26px;border-radius:999px;background:var(--orange);color:var(--forest);font:600 15px/1 var(--body);letter-spacing:.02em;text-decoration:none;box-shadow:0 10px 30px #1b2a1e40;transform:translateX(-50%);transition:transform .35s var(--tv-ease-reveal,ease),opacity .3s,background .2s,box-shadow .25s,visibility 0s;animation:dh-cta-rise .8s var(--tv-ease-reveal,ease) .9s both,dh-cta-glow 3.4s ease-in-out 2s infinite}
.dh-cta-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--forest);color:var(--cream);font-size:15px;transition:transform .3s var(--tv-ease-reveal,ease)}
.dh-cta:hover,.dh-cta:focus-visible{background:var(--sand);box-shadow:0 14px 36px #1b2a1e52}
.dh-cta:hover .dh-cta-icon,.dh-cta:focus-visible .dh-cta-icon{transform:rotate(45deg)}
.dh-cta-enquire:hover .dh-cta-icon,.dh-cta-enquire:focus-visible .dh-cta-icon{transform:translateY(3px)}
.dh-cta:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
.dh-cta.is-hidden{transform:translate(-50%,calc(100% + 40px));opacity:0;visibility:hidden;pointer-events:none;animation:none;transition:transform .35s var(--tv-ease-reveal,ease),opacity .3s,visibility 0s .35s}
/* App view (below 1280px): the same pill sits centred above the bottom navigation dock and
   steps aside while the on-screen keyboard is open. */
@media(max-width:1279.98px){
  .dh-cta{bottom:calc(env(safe-area-inset-bottom,0px) + 20px)}
  body.has-mobile-dock .dh-cta{bottom:calc(var(--dock-height,78px) + 26px)}
  body:has(#main input:focus,#main textarea:focus,#main select:focus) .dh-cta{visibility:hidden;pointer-events:none}
}
@media(max-width:600px){.dh-cta{gap:12px;padding:6px 6px 6px 22px;font-size:14px}.dh-cta-icon{width:34px;height:34px}}
/* ---- Sticky price bar (range and stay pages) ----
   Wraps the floating CTA above. The pill keeps its own look and animation; the bar only
   positions it. "is-bare" = no price to show, so the pill sits exactly where it always did.
   "has-price" = cream bar with the price on the left and the pill on the right. */
.dh-pricebar{position:fixed;left:50%;bottom:24px;z-index:44;display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2vw,28px);width:max-content;max-width:calc(100% - 32px);transform:translateX(-50%);transition:transform .35s var(--tv-ease-reveal,ease),opacity .3s,visibility 0s}
.dh-pricebar [hidden]{display:none!important}
.dh-pricebar .dh-cta{position:static;flex:none;transform:none}
.dh-pricebar.is-bare{pointer-events:none}
.dh-pricebar.is-bare .dh-cta{pointer-events:auto}
.dh-pricebar.has-price{padding:8px 8px 8px 26px;border:1px solid var(--line);border-radius:999px;background:var(--cream);color:var(--forest);box-shadow:0 10px 30px #1b2a1e26;animation:dh-pricebar-in .6s ease .7s both}
.dh-pricebar.is-hidden{transform:translate(-50%,calc(100% + 40px));opacity:0;visibility:hidden;pointer-events:none;transition:transform .35s var(--tv-ease-reveal,ease),opacity .3s,visibility 0s .35s}
.dh-pricebar.is-hidden *{pointer-events:none}
.dh-pricebar-info{display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0}
.dh-pricebar-amount{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:0;margin:0;font:500 13px/1.25 var(--body);color:var(--green)}
.dh-pricebar-amount>*{white-space:nowrap}
.dh-pricebar-value{font:700 clamp(17px,1.4vw,20px)/1.1 var(--display);letter-spacing:-.01em;color:var(--forest)}
.dh-pricebar-meta{display:flex;align-items:center;gap:10px;margin:0;font:500 11.5px/1.2 var(--body);color:var(--green)}
.dh-pricebar-note{white-space:nowrap}
.dh-pricebar-toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:26px;margin:0;padding:4px 11px;border:1px solid var(--forest);border-radius:999px;background:transparent;color:var(--forest);font:600 11px/1 var(--body);letter-spacing:.02em;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.dh-pricebar-toggle:hover,.dh-pricebar-toggle[data-showing="foreign"]{background:var(--forest);color:var(--cream)}
.dh-pricebar-toggle:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
/* Keep the last content and the footer clear of the bar and, when shown, the bottom navigation.
   --pricebar-dock is the navigation's measured height, or 0 wherever it is not shown. */
/* The room is made inside the footer (which already ends with ~150px of its own space), not below it: padding the
   page itself left a strip of page background under the footer. The spacer only adds height when the bar needs
   more than the footer already gives (e.g. an expanded price bar). */
body.pricebar-pad .field-footer::after{content:"";display:block;height:max(0px,calc(var(--pricebar-dock,0px) + var(--pricebar-height,64px) + 52px + env(safe-area-inset-bottom,0px) - 126px))}
/* App view (below 1280px): the bar sits directly above the bottom navigation when it is shown,
   otherwise at the bottom of the screen with a small gap; the chat and WhatsApp buttons step up
   so they stay visible above it. */
@media(max-width:1279.98px){
  .dh-pricebar.is-bare{bottom:calc(env(safe-area-inset-bottom,0px) + 20px)}
  body.pricebar-dock .dh-pricebar.is-bare{bottom:calc(var(--pricebar-dock,0px) + 26px)}
  .dh-pricebar.has-price{bottom:calc(env(safe-area-inset-bottom,0px) + 12px);width:min(640px,calc(100% - 20px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));max-width:none;padding:8px 8px 8px 20px;border-radius:24px}
  body.pricebar-dock .dh-pricebar.has-price{bottom:calc(var(--pricebar-dock,0px) + 28px)} /* clears the dock's raised Home button */
  body:has(#main input:focus,#main textarea:focus,#main select:focus) .dh-pricebar{visibility:hidden;pointer-events:none}
  body:has(#main input:focus,#main textarea:focus,#main select:focus) .dh-pricebar *{pointer-events:none}
  body.pricebar-shown.pricebar-dock .whatsapp-contact{bottom:calc(var(--pricebar-dock,0px) + var(--pricebar-height,64px) + 38px)}
  body.pricebar-shown.pricebar-dock .help-tools{bottom:calc(var(--pricebar-dock,0px) + var(--pricebar-height,64px) + 96px)}
  body.pricebar-shown.pricebar-dock .travel-assistant{bottom:calc(var(--pricebar-dock,0px) + var(--pricebar-height,64px) + 154px);height:min(600px,calc(100dvh - var(--nav-height,88px) - var(--pricebar-dock,0px) - var(--pricebar-height,64px) - 178px))}
  body.pricebar-shown:not(.pricebar-dock) .whatsapp-contact{bottom:calc(env(safe-area-inset-bottom,0px) + var(--pricebar-height,64px) + 22px)}
  body.pricebar-shown:not(.pricebar-dock) .help-tools{bottom:calc(env(safe-area-inset-bottom,0px) + var(--pricebar-height,64px) + 80px)}
}
/* Phone (portrait): price on the first row beside the pill; the nationality note and switch get a
   full-width second row so nothing is squeezed, wrapped or overlapped down to 320px. Phones in
   landscape are wide enough for the single-row bar and short on height, so they keep it. */
@media(max-width:600px) and (orientation:portrait),(max-width:479.98px){
  .dh-pricebar.has-price{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:6px;padding:7px 7px 7px 14px;border-radius:20px}
  .dh-pricebar.has-price .dh-pricebar-info{display:contents}
  .dh-pricebar-amount{grid-column:1;grid-row:1;column-gap:4px;font-size:12px}
  .dh-pricebar.has-price .dh-cta{grid-column:2;grid-row:1}
  .dh-pricebar-meta{grid-column:1/-1;grid-row:2;justify-content:space-between;gap:8px;padding:6px 2px 1px 0;border-top:1px solid var(--line);font-size:11px}
  .dh-pricebar-value{font-size:clamp(15px,4.6vw,18px)}
}
@media(max-width:360px) and (orientation:portrait){
  .dh-pricebar.has-price{width:calc(100% - 16px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));column-gap:8px;padding-left:12px}
  .dh-pricebar-meta{font-size:10.5px}
  .dh-pricebar-toggle{padding:4px 9px;font-size:10.5px}
}
/* ---- Curtain motion (only while the site curtain is enabled; driven by its --curtain-progress) ----
   The pinned hero recedes (scales back, rounds, darkens) as the paper sheet rises over it,
   and the sheet's top corners flatten as it reaches the header. */
body:has(.dh-hero) .curtain-enabled>.curtain-hero{transform:scale(calc(1 - var(--curtain-progress,0)*.06));transform-origin:50% 0;border-radius:calc(var(--curtain-progress,0)*26px);overflow:hidden}
body:has(.dh-hero) .curtain-enabled>.curtain-hero:after{opacity:calc(var(--curtain-progress,0)*.55)}
body:has(.dh-hero) .curtain-page.curtain-enabled>.curtain-sheet{border-top-left-radius:calc((1 - var(--curtain-progress,0))*clamp(24px,3.5vw,56px));border-top-right-radius:calc((1 - var(--curtain-progress,0))*clamp(24px,3.5vw,56px))}
@media(max-width:600px){body:has(.dh-hero) .curtain-page.curtain-enabled>.curtain-sheet{border-top-left-radius:calc((1 - var(--curtain-progress,0))*28px);border-top-right-radius:calc((1 - var(--curtain-progress,0))*28px)}}
/* App view: the title band drifts up and fades before the sheet reaches it; the picture slowly zooms. */
@media(max-width:1279.98px){
  body:has(.dh-hero) .curtain-enabled .page-intro>*{opacity:calc(1 - var(--curtain-progress,0)*1.8);transform:translateY(calc(var(--curtain-progress,0)*-28px))}
  body:has(.dh-hero) .curtain-enabled .dh-cover>.visual-media>img,body:has(.dh-hero) .curtain-enabled .dh-cover>.visual-media>video{transform:scale(calc(1 + var(--curtain-progress,0)*.12));transform-origin:50% 60%}
}
/* Content inside the sheet rises in as it scrolls into view (classes set by detail-hero.js / curtain.js). */
body:has(.dh-hero) .curtain-enabled .curtain-reveal{opacity:0;transform:translate3d(0,28px,0);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
body:has(.dh-hero) .curtain-enabled .curtain-reveal.curtain-arrived,body:has(.dh-hero) .curtain-enabled .curtain-reveal:focus-within{opacity:1;transform:none}
.dh-reveal{opacity:0;transform:translate3d(0,26px,0);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--dh-i,0)*70ms)}
.dh-reveal.dh-in,.dh-reveal:focus-within{opacity:1;transform:none}
html.reduce-motion .dh-reveal,html.reduce-motion body:has(.dh-hero) .curtain-reveal{opacity:1!important;transform:none!important;transition:none!important}
html.reduce-motion body:has(.dh-hero) .curtain-hero,html.reduce-motion body:has(.dh-hero) .page-intro>*,html.reduce-motion .dh-cover>.visual-media>*{transform:none!important;opacity:1!important}
@media(prefers-reduced-motion:reduce){.dh-reveal{opacity:1!important;transform:none!important;transition:none!important}}
@media print{.dh-reveal{opacity:1!important;transform:none!important}}

@keyframes dh-rise{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes dh-cue{0%{top:-40%}60%,100%{top:100%}}
@keyframes dh-cta-rise{from{opacity:0;translate:0 140%}to{opacity:1;translate:0 0}}
@keyframes dh-pricebar-in{from{opacity:0}to{opacity:1}}
@keyframes dh-cta-glow{0%,100%{box-shadow:0 10px 30px #1b2a1e40,0 0 0 0 #e6a15c00}50%{box-shadow:0 10px 30px #1b2a1e40,0 0 0 8px #e6a15c38}}
@media(prefers-reduced-motion:reduce){.dh-hero *,.dh-cta,.dh-cta *,.dh-pricebar,.dh-pricebar *{animation:none!important;transition:none!important}.dh-hero-media img,.dh-hero-media video{transform:none!important}}
html.reduce-motion .dh-hero *,html.reduce-motion .dh-cta,html.reduce-motion .dh-cta *,html.reduce-motion .dh-pricebar,html.reduce-motion .dh-pricebar *{animation:none!important;transition:none!important}
html.reduce-motion .dh-hero-media img,html.reduce-motion .dh-hero-media video{transform:none!important}
@media print{.dh-cta,.dh-pricebar{display:none!important}body.pricebar-pad .field-footer::after{display:none}}