/* Shared responsive finishing layer: the same fieldbook on every screen. */
#main h1,#main h2,#main h3{overflow-wrap:anywhere}
.section,.page-intro,.collection-toolbar,.booking-row,.form-panel,.profile-card{min-width:0}
.search-form{min-width:0}.search-form>input{flex:1;min-width:0}.search-form>.button{flex-shrink:0}
.button-row>*{max-width:100%}.check{align-content:start}.check input{flex:0 0 18px}
.detail-cover,.gallery-grid,.custom-gallery,.card-grid{min-width:0}
/* Compact layouts retain the overlapping photographs, inset and field stamp.
   The generous inner stage gutter contains rotated corners at 320px too. */
@media(max-width:1099px),(max-height:759px){
 .scroll-home .scroll-hero .hero-stage{display:block;width:84%;max-width:540px;margin:40px auto 46px;perspective:1200px}
 .scroll-home .scroll-hero .hero-frame{position:relative;z-index:1;width:100%;margin:0;transform:rotate(-4deg)}
 .scroll-home .scroll-hero .hero-image-wrap{height:clamp(240px,36vw,440px)}
 .scroll-home .scroll-hero .depth-sheet-back{display:flex;position:absolute;inset:0;margin:0;width:100%;height:100%;transform:translate(calc(14px - var(--rear-progress,0)*15px),calc(17px - var(--rear-lift,0)*50px - var(--rear-progress,0)*20px)) rotate(calc(4deg - var(--rear-progress,0)*8deg));z-index:0}
 .curtain-enabled.scroll-home .hero-stage.curtain-rear-in-front .depth-sheet-back{z-index:3!important}
 .scroll-home .scroll-hero .field-specimen{display:block;width:clamp(82px,12vw,130px);bottom:-28px;left:-20px;padding:6px;transform:rotate(7deg);z-index:4}
 .scroll-home .scroll-hero .field-specimen>div{height:clamp(56px,8vw,88px)}
 .scroll-home .scroll-hero .field-specimen>span{font-size:6px;padding-block:2px 5px}
 .scroll-home .scroll-hero .field-specimen>span:last-child{padding-block:5px 1px}
 .scroll-home .scroll-hero .field-stamp{bottom:-22px;right:-20px;max-width:62%;padding:13px 16px;z-index:5}
 .scroll-home .scroll-hero .field-stamp strong{font-size:clamp(21px,2.7vw,29px);margin:3px 0 7px}
 .scroll-home .scroll-hero .field-stamp>span{font-size:7px;letter-spacing:.08em}
 .scroll-home .scroll-hero .field-coordinate{top:-31px;font-size:7px;gap:8px}
 .scroll-active .scroll-home .scroll-hero .hero-frame{transform:rotate(calc(-4deg + var(--hero-progress,0)*3deg)) translateY(calc(var(--hero-progress,0)*-8px))}
}
@media(max-width:850px){
 .scroll-home .trip-bar{grid-template-columns:repeat(3,minmax(0,1fr));padding:0 var(--gutter)}
 .scroll-home .trip-bar>span{display:block;grid-column:1/-1;max-width:none;padding:17px 0 13px;border-bottom:1px solid #344e4138;font-size:10px;letter-spacing:.1em}
 .scroll-home .trip-bar>a{padding:20px 14px;margin:0;border-left:1px solid #344e4138;font-size:clamp(19px,3.2vw,26px)}
 .scroll-home .trip-bar>a:nth-child(2){padding-left:0;border-left:0}
 .scroll-home .trip-bar .trip-cta{display:flex;gap:8px;font:600 clamp(12px,1.8vw,15px)/1.4 var(--body);padding:20px 14px;background:var(--orange);margin-right:calc(-1*var(--gutter));padding-right:var(--gutter)}
 .scroll-home .trip-bar .trip-cta span{font-size:20px}
 .scroll-home .trip-bar>a span{font-size:10px}
 .booking-summary>.visual-media{height:100%;min-height:220px}
}
@media(max-width:700px){
 .scroll-home .scroll-hero{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:26px;padding-bottom:70px;min-height:0}
 .scroll-home .scroll-hero .hero-copy{align-self:start;padding-top:0}
 .scroll-home .scroll-hero h1{font-size:clamp(44px,11.7vw,70px);max-width:12ch;line-height:1.01}
 .scroll-home .scroll-hero .hero-subtitle{max-width:40ch;font-size:14px;margin-bottom:22px}
 .scroll-home .scroll-hero .hero-stage{width:82%;max-width:430px;margin:34px auto 40px}
 .scroll-home .scroll-hero .hero-image-wrap{height:clamp(260px,76vw,420px)}
 .scroll-home .scroll-hero .hero-image-caption{font-size:6.5px;gap:8px;padding:11px 2px}
 .scroll-home .scroll-hero .field-specimen{width:clamp(88px,24vw,125px);left:-20px;bottom:-30px}
 .scroll-home .scroll-hero .field-specimen>div{height:clamp(58px,17vw,84px)}
 .scroll-home .scroll-hero .field-stamp{right:-20px;bottom:-24px;padding:12px 14px}
 .scroll-home .scroll-hero .field-stamp strong{font-size:clamp(22px,6vw,28px)}
 .scroll-home .scroll-hero .hero-scroll-meta{bottom:18px}
}
@media(max-width:1279.98px){
 /* Keep help available in two small controls instead of a wide button over
    page text. The original button text still supplies its accessible name. */
 .has-mobile-dock .help-tools{right:14px;bottom:calc(var(--dock-height,78px) + 72px);flex-direction:column;align-items:center;gap:10px}
 .help-tools #chat-toggle{display:grid;place-items:center;width:44px;height:44px;padding:0;font-size:0;border-radius:50%;box-shadow:0 3px 12px #1b2a1e1c}
 .help-tools #chat-toggle>span{display:none}
 .help-tools .scroll-top{border-radius:50%;box-shadow:0 3px 12px #1b2a1e1c}
 .has-mobile-dock .whatsapp-contact{right:12px;bottom:calc(var(--dock-height,78px) + 14px);border-radius:50%;box-shadow:0 3px 12px #1b2a1e1c}
 .has-mobile-dock .mobile-sticky{left:12px;right:68px;bottom:calc(var(--dock-height,78px) + 14px);min-height:46px;font-size:12px;padding:11px 14px}
 /* While typing, viewport-fixed decorations yield the available screen to the
    form and software keyboard. They reappear as soon as focus leaves a field. */
 body:has(#main input:focus,#main textarea:focus,#main select:focus) .help-tools,
 body:has(#main input:focus,#main textarea:focus,#main select:focus) .whatsapp-contact,
 body:has(#main input:focus,#main textarea:focus,#main select:focus) .mobile-sticky{visibility:hidden;pointer-events:none}
 body:has(#main input:focus,#main textarea:focus,#main select:focus) .mobile-dock{transform:translateY(calc(100% + 24px));pointer-events:none}
}
@media(max-width:600px){
 :root{--gutter:clamp(18px,5.6vw,28px)}
 .page-intro{padding-block:34px}.page-intro h1{font-size:clamp(34px,10vw,54px)}
 .scroll-home .trip-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
 .scroll-home .trip-bar>a{min-height:92px;padding:18px 12px;font-size:23px}
 .scroll-home .trip-bar>a:nth-child(3){padding-left:16px}
 .scroll-home .trip-bar .trip-cta{grid-column:1/-1;min-height:58px;margin:0 calc(-1*var(--gutter));padding:14px var(--gutter);border:0;border-top:1px solid #344e4138;font-size:14px}
 .scroll-home .trip-bar .trip-cta span{margin-top:0}
 .section-heading h2,.why-grid h2,.faq-section h2,.scroll-home .who-copy h2{font-size:clamp(34px,10vw,47px)}
 .section-heading>div:last-child{max-width:none}
 .card-image,.stay-section .card-image{height:auto;aspect-ratio:1.05}
 .journal-section .card-image{height:auto;aspect-ratio:1.45}
 .booking-summary>.visual-media{height:230px;min-height:0}
 .form-panel,.booking-note,.booking-summary>div{padding:22px}
 .stepper{gap:8px}.stepper li{font-size:10px;line-height:1.5}.stepper li span{display:block;margin-left:0}
 .review-summary dl>div{flex-wrap:wrap;gap:4px 16px}.review-summary dd{margin-left:auto}
 .policy-panel table{table-layout:fixed}.policy-panel th,.policy-panel td{overflow-wrap:anywhere}
 .gallery-controls{gap:16px}.gallery-dialog{padding-inline:16px}
 .profile .profile-toast{left:16px;right:auto;width:calc(100% - 32px);max-width:none;transform:translateY(.75rem);border-radius:16px;overflow-wrap:anywhere}
 .profile .profile-toast.is-visible{transform:none}
 .search-form{flex-wrap:wrap}.search-form>input{flex-basis:180px}
 .footer-bottom>div{gap:14px 20px}.field-footer .footer-grid a{overflow-wrap:anywhere}
}
@media(max-width:360px){
 .scroll-home .scroll-hero .hero-stage{width:80%}.scroll-home .scroll-hero .hero-image-wrap{height:250px}
 .scroll-home .scroll-hero .hero-image-caption{font-size:6px;letter-spacing:.025em}
 .scroll-home .scroll-hero .field-coordinate{font-size:6px;letter-spacing:.025em}
 .scroll-home .scroll-hero .field-stamp{right:-18px;padding:10px 11px;max-width:64%}
 .scroll-home .scroll-hero .field-stamp strong{font-size:22px}
 .scroll-home .scroll-hero .field-stamp>span{font-size:6px}
 .scroll-home .scroll-hero .field-specimen{left:-18px;width:84px}
 .hero .button-row{flex-direction:row;gap:12px 18px;align-items:center}
 .form-panel,.booking-note,.booking-summary>div{padding:18px}.profile .btn{white-space:normal}
}
/* Reduced motion changes movement, never the compact photo composition. */
html.reduce-motion .scroll-home .scroll-hero .hero-stage{display:block}
html.reduce-motion .scroll-home .scroll-hero .depth-sheet-back{display:flex;position:absolute;inset:0;margin:0;height:100%;transform:translate(14px,17px) rotate(4deg)!important}
@media(prefers-reduced-motion:reduce){
 .scroll-home .scroll-hero .hero-stage{display:block}
 .scroll-home .scroll-hero .depth-sheet-back{display:flex;position:absolute;inset:0;margin:0;height:100%;transform:translate(14px,17px) rotate(4deg)!important}
}
@media print{.scroll-home .scroll-hero .depth-sheet-back,.scroll-home .scroll-hero .field-specimen{display:none!important}}

/* Booking controls are touch targets, with prices and optional address details
   contained in the same grid instead of widening the document. */
.stepper li>button{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:9px 0;border:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.stepper li>button span{margin:0}.stepper li>button:disabled{cursor:default;opacity:.55}
.stepper li>button:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:3px}
.booking-addons{display:grid;gap:12px;min-width:0;padding:0;border:0}.booking-addons>legend{padding:0;font-weight:600;margin-bottom:12px}
.booking-addon{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:start;gap:11px 12px;padding:15px;background:#f3f2e7;border:1px solid #bcc8ae;border-radius:8px;min-width:0;cursor:pointer}
.booking-addon input[type=checkbox]{width:18px;height:18px;margin:3px 0 0;padding:0}.booking-addon:has(input:checked){background:#e7ecda;border-color:#647e57}
.booking-addon>span,.booking-addon>div{min-width:0}.booking-addon strong{display:block;font-size:14px;line-height:1.5}.booking-addon small{display:block;font-size:12px;line-height:1.6;color:#4b6250;margin-top:4px}
.booking-addon-price{white-space:nowrap;text-align:right;font-size:13px;font-weight:600;color:#314e37}
.booking-addon>span>span{display:block;font-size:12px;line-height:1.6;color:#4b6250;margin-top:4px}
.booking-addon>span>.booking-addon-price{margin-top:8px;text-align:left;white-space:normal;font-size:13px;color:#314e37}
/* International additional charges: tick an item, then choose how many. */
.booking-addon.booking-extra{cursor:default;align-items:center}.booking-extra>label{min-width:0;cursor:pointer;font-size:13px}
.booking-extra>label>span{display:block;font-size:12px;line-height:1.6;color:#4b6250;margin-top:4px}.booking-extra>label>.booking-addon-price{margin-top:6px;font-size:13px;color:#314e37;white-space:normal;text-align:left}
.booking-extra>label.booking-extra-qty{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#4b6250;cursor:default}
.booking-extra .booking-extra-qty input[type=number]{width:88px;min-height:44px;margin:0;padding:8px 10px;background:#fffef9}.booking-extra .booking-extra-qty input[type=number]:disabled{opacity:.5;cursor:not-allowed}
.optional-address{grid-column:1/-1;min-width:0;width:100%;border-top:1px solid #bbc4ae;border-bottom:1px solid #bbc4ae;padding:0;margin:5px 0}
.optional-address>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;font-size:13px;font-weight:600;cursor:pointer;list-style:none}
.optional-address>summary::-webkit-details-marker{display:none}.optional-address>summary:after{content:'+';font:24px var(--body)}.optional-address[open]>summary:after{content:'−'}
.optional-address .address-fields{margin:8px 0 20px;min-width:0}.optional-address .small-copy{font-size:12px;line-height:1.7}.optional-address .button{min-height:44px}
.price-breakdown,.addon-summary{font-size:13px;line-height:1.7;overflow-wrap:anywhere}.price-breakdown{padding:16px;background:#f3f2e7;border:1px solid #c6d0b8;border-radius:7px}
.price-breakdown ul,.addon-summary ul{padding-left:18px;margin:8px 0}.price-breakdown p:last-child,.addon-summary p:last-child{margin-bottom:0}
.enquiry-summary,.account-enquiry{min-width:0;background:#f3f4e9;border:1px solid #b5c5a7;padding:24px;border-radius:10px;color:#243d2b}
.enquiry-summary h2,.enquiry-summary h3,.account-enquiry h3{margin-bottom:13px;overflow-wrap:anywhere}.enquiry-summary p,.account-enquiry p{line-height:1.7;overflow-wrap:anywhere}
.enquiry-summary dl,.account-enquiry dl{margin:18px 0}.enquiry-summary dl>div,.account-enquiry dl>div{display:flex;gap:16px;justify-content:space-between;border-bottom:1px solid #bcc8ae;padding:10px 0;font-size:13px}
.enquiry-summary dt,.account-enquiry dt{color:#4b6250}.enquiry-summary dd,.account-enquiry dd{margin:0;text-align:right;overflow-wrap:anywhere}.account-enquiry+.account-enquiry{margin-top:18px}
.saved-profile-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;border:1px solid #b5c5a7;background:#f0f3e6;padding:22px;border-radius:9px}
.saved-profile-summary>div{flex:1 1 180px;min-width:0}.saved-profile-summary p{margin:5px 0;font-size:13px;overflow-wrap:anywhere}.saved-profile-summary .button{min-height:44px}
@media(max-width:600px){
 .booking-mode-grid{grid-template-columns:minmax(0,1fr);gap:16px}.booking-mode-card{min-height:0;padding:25px 22px}.booking-mode-card h3{font-size:clamp(28px,8.5vw,40px)}.booking-mode-choice{padding-top:34px}.booking-mode-choice-head{margin-bottom:24px}.booking-mode-help{margin-top:20px}.booking-mode-lock{padding:16px}
 .stepper li>button{display:block;line-height:1.65;padding:8px 3px;min-height:55px}.stepper li>button span{display:block}
 .booking-addon{grid-template-columns:18px minmax(0,1fr);padding:13px;gap:8px 11px}.booking-addon-price{grid-column:2;text-align:left;white-space:normal}
 .booking-extra>label.booking-extra-qty{grid-column:2;flex-direction:row;align-items:center;gap:10px}
 .optional-address .address-fields.form-grid{grid-template-columns:minmax(0,1fr)}.optional-address .address-fields .full{grid-column:1/-1}
 .enquiry-summary,.account-enquiry,.saved-profile-summary{padding:18px}.enquiry-summary dl>div,.account-enquiry dl>div{flex-wrap:wrap;gap:4px 12px}.enquiry-summary dd,.account-enquiry dd{text-align:left}
 .price-breakdown{padding:13px}.form-grid input:not([type=checkbox]):not([type=radio]),.form-grid select,.form-grid textarea{font-size:16px}
}


/* Dynamic homepage hero stack. The card count comes from Studio content, while
   JS only supplies the current transform values during the existing curtain. */
.scroll-home .scroll-hero .hero-card-stack{
  position:relative;
  width:100%;
  transform-style:preserve-3d;
  isolation:isolate;
}
.scroll-home .scroll-hero .hero-stack-card{
  position:absolute!important;
  inset:0;
  width:100%!important;
  margin:0!important;
  order:initial!important;
  z-index:var(--hero-card-z,1)!important;
  transform:translate3d(var(--hero-card-x,0),var(--hero-card-y,0),0) rotate(var(--hero-card-rotate,-4deg)) scale(var(--hero-card-scale,1))!important;
  transform-origin:50% 50%;
  opacity:var(--hero-card-opacity,1);
  will-change:transform,opacity;
  transition:none!important;
  backface-visibility:hidden;
}
.scroll-home .scroll-hero .hero-stack-card:first-child{position:relative!important}
.scroll-home .scroll-hero .hero-stack-card .hero-image-wrap{width:100%}
.scroll-home .scroll-hero .field-stamp{z-index:52}
.scroll-home .scroll-hero .field-specimen{z-index:51}
@media(max-width:1099px),(max-height:759px){
  .scroll-home .scroll-hero .hero-card-stack{display:block}
  .scroll-home .scroll-hero .hero-stack-card{position:absolute!important}
  .scroll-home .scroll-hero .hero-stack-card:first-child{position:relative!important}
}
html.reduce-motion .scroll-home .scroll-hero .hero-stack-card{transform:none!important;opacity:1!important}
html.reduce-motion .scroll-home .scroll-hero .hero-stack-card:not(:first-child){display:none!important}
@media(prefers-reduced-motion:reduce){
  .scroll-home .scroll-hero .hero-stack-card{transform:none!important;opacity:1!important}
  .scroll-home .scroll-hero .hero-stack-card:not(:first-child){display:none!important}
}
@media print{
  .scroll-home .scroll-hero .hero-stack-card:not(:first-child){display:none!important}
  .scroll-home .scroll-hero .hero-stack-card:first-child{position:relative!important;transform:none!important;opacity:1!important}
}
/* Hero cards carousel (hero-carousel.js): vertical swipes stay with the browser so the page
   scrolls; a 0.6s slide only while the starting card changes at the top of the page. */
.scroll-home .scroll-hero .hero-card-stack[role=group]{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.scroll-home .scroll-hero .hero-card-stack[role=group]:focus-visible{outline:2px solid var(--forest);outline-offset:8px}
@media(pointer:fine){.curtain-enabled .scroll-hero .hero-card-stack[role=group]{cursor:grab}.curtain-enabled .scroll-hero .hero-card-stack[role=group]:active{cursor:grabbing}}
.scroll-home .scroll-hero .hero-card-stack.is-sliding .hero-stack-card{transition:transform .6s var(--tv-ease-reveal,ease),opacity .6s ease!important}
.scroll-home .scroll-hero .hero-card-stack img,.scroll-home .scroll-hero .hero-card-stack video{-webkit-user-drag:none}
.hero-deck-controls{display:inline-flex;align-items:center;gap:10px}
.hero-autoplay-toggle{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;min-height:0;padding:0;border:1px solid var(--forest);border-radius:50%;background:transparent;color:var(--forest);cursor:pointer;transition:background .2s,color .2s}
.hero-autoplay-toggle[hidden]{display:none}
.hero-autoplay-toggle:hover{background:var(--forest);color:var(--cream)}
.hero-autoplay-toggle:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.hero-autoplay-icon{position:relative;display:block;width:10px;height:10px}
.hero-autoplay-icon::before,.hero-autoplay-icon::after{content:'';position:absolute;top:0;bottom:0;width:3px;background:currentColor}
.hero-autoplay-icon::before{left:1px}.hero-autoplay-icon::after{right:1px}
.hero-autoplay-toggle.is-paused .hero-autoplay-icon::before{left:2px;width:0;height:0;background:none;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
.hero-autoplay-toggle.is-paused .hero-autoplay-icon::after{display:none}
@media(prefers-reduced-motion:reduce){.hero-autoplay-toggle{display:none!important}}
html.reduce-motion .hero-autoplay-toggle{display:none!important}

/* Hero bottom strip (Studio → Home) and the fitted first screen. hero-carousel.js measures
   --hero-top (everything above the hero), --hero-strip-h and --hero-fab-w; with the strip on, the
   hero section takes the rest of the visible screen and its content scales with that height and
   the width. A screen too short for the content lets the hero grow, with the strip right after. */
.scroll-home>.hero-journey.has-hero-strip{
 --hero-avail:calc(100svh - var(--hero-top,var(--nav-height,88px)) - var(--hero-dock-h,var(--dock-height,0px)));
 --hero-h:max(300px,calc(var(--hero-avail) - var(--hero-strip-h,80px)));
 --hero-pad-top:clamp(10px,calc(var(--hero-h)*.05),40px);
 --hero-pad-bottom:clamp(74px,calc(var(--hero-h)*.12),92px);
}
.scroll-home>.hero-journey.has-hero-strip>.scroll-hero{min-height:var(--hero-h)!important;height:auto!important;max-height:none!important;padding-top:var(--hero-pad-top)!important;padding-bottom:var(--hero-pad-bottom)!important;align-items:center}
.scroll-home>.hero-journey.has-hero-strip .hero-copy{padding-top:0}
.scroll-home>.hero-journey.has-hero-strip .hero-scroll-meta{bottom:clamp(8px,1.4svh,22px)}
/* With the strip on, the pause button and 01 / 04 counter are not shown; their corner is where
   Ask Travella docks. Auto-slide still pauses on hover, touch, focus and hidden tabs. */
.scroll-home>.hero-journey.has-hero-strip .hero-deck-controls{visibility:hidden}
.scroll-home>.hero-journey.has-hero-strip .hero-copy .eyebrow{margin-bottom:clamp(6px,calc(var(--hero-h)*.022),26px)}
.scroll-home>.hero-journey.has-hero-strip .scroll-hero h1{font-size:clamp(2.1rem,min(5.4vw,calc(var(--hero-h)*.1)),6.5rem)!important;margin-bottom:clamp(8px,calc(var(--hero-h)*.03),24px)}
.scroll-home>.hero-journey.has-hero-strip .hero-subtitle{font-size:clamp(14px,min(1.3vw,calc(var(--hero-h)*.026)),19px);margin-bottom:clamp(10px,calc(var(--hero-h)*.035),30px)}
.scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row{margin-top:0}
.scroll-home>.hero-journey.has-hero-strip .hero-book-now{margin-top:clamp(8px,calc(var(--hero-h)*.02),14px)}
.scroll-home>.hero-journey.has-hero-strip .hero-footnote{margin-top:clamp(8px,calc(var(--hero-h)*.025),34px)}
.scroll-home>.hero-journey.has-hero-strip .scroll-hero .hero-stage{margin-block:0}
.scroll-home>.hero-journey.has-hero-strip .scroll-hero .hero-image-wrap{height:clamp(150px,min(calc(var(--hero-h) - var(--hero-pad-top) - var(--hero-pad-bottom) - 110px),40vw),600px)!important}
@media(max-width:700px){
 .scroll-home>.hero-journey.has-hero-strip .scroll-hero{gap:clamp(10px,calc(var(--hero-h)*.022),24px)!important;align-items:start}
 .scroll-home>.hero-journey.has-hero-strip{--hero-pad-top:clamp(8px,calc(var(--hero-h)*.02),28px);--hero-pad-bottom:clamp(58px,calc(var(--hero-h)*.1),68px)}
 /* Before hero-carousel.js has measured (the first drawn frames), phones use their real header (75px) and bottom
    navigation (67px) heights, so the first frame already has the final layout instead of jumping into it. */
 .scroll-home>.hero-journey.has-hero-strip{--hero-avail:calc(100svh - var(--hero-top,75px) - var(--hero-dock-h,67px))}
 .scroll-home>.hero-journey.has-hero-strip .scroll-hero h1{font-size:clamp(1.9rem,min(11.7vw,calc(var(--hero-h)*.064)),4.4rem)!important;line-height:1.02}
 .scroll-home>.hero-journey.has-hero-strip .hero-subtitle{font-size:clamp(13px,min(3.8vw,calc(var(--hero-h)*.026)),16px);line-height:1.45}
 /* Both buttons side by side (Find your safari, Book now), the stays link on the line below. */
 .scroll-home>.hero-journey.has-hero-strip .hero-copy{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px}
 .scroll-home>.hero-journey.has-hero-strip .hero-copy>*{flex:0 0 100%;min-width:0}
 .scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row{display:contents}
 .scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row>.button{order:1;flex:0 1 auto}
 .scroll-home>.hero-journey.has-hero-strip .hero-copy>.hero-book-now{order:2;flex:0 1 auto;min-width:0;margin-top:0}
 .scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row>.text-link{order:3;flex:0 0 auto;margin-top:clamp(6px,calc(var(--hero-h)*.018),12px)}
 .scroll-home>.hero-journey.has-hero-strip .hero-copy>.hero-footnote{order:4}
 .scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row>.button,.scroll-home>.hero-journey.has-hero-strip .hero-copy>.hero-book-now{min-height:44px;padding:10px 16px;font-size:14px;gap:10px}
 .scroll-home>.hero-journey.has-hero-strip .field-coordinate{display:none}
 /* Smaller stamp so the photo or film stays clearly visible. */
 .scroll-home>.hero-journey.has-hero-strip .scroll-hero .field-stamp{right:-8px;max-width:44%;padding:8px 10px 7px}
 .scroll-home>.hero-journey.has-hero-strip .scroll-hero .field-stamp strong{font-size:clamp(15px,4.6vw,19px);line-height:1.05}
 .scroll-home>.hero-journey.has-hero-strip .scroll-hero .field-stamp span{font-size:7px;letter-spacing:.08em}
 .scroll-home>.hero-journey.has-hero-strip .scroll-hero .field-stamp,.scroll-home>.hero-journey.has-hero-strip .scroll-hero .field-specimen{bottom:6px}
 .scroll-home>.hero-journey.has-hero-strip .scroll-hero .hero-stage{margin:0 auto}
 /* Until hero-carousel.js sets the exact height, the photo card uses this close estimate of it (within a few px). */
 .scroll-home>.hero-journey.has-hero-strip .scroll-hero .hero-image-wrap{height:var(--hero-card-h,clamp(104px,calc(var(--hero-h)*.5 - var(--hero-pad-top) - var(--hero-pad-bottom) - 85px),420px))!important}
}
@media(min-width:600px) and (max-width:700px){
 .scroll-home>.hero-journey.has-hero-strip .scroll-hero .hero-image-wrap{height:var(--hero-card-h,clamp(104px,calc(var(--hero-h)*.5 - var(--hero-pad-top) - var(--hero-pad-bottom) - 10px),420px))!important}
}
/* Short phones (iPhone SE, small Android): the whole hero fits the first screen with the strip above the bottom
   navigation. The bottom padding was reserved for the hint row, whose items are hidden on phones with the strip on;
   the label, title, text and buttons tighten slightly, and the photo card takes whatever height is left. */
@media(max-width:700px) and (max-height:760px){
 .scroll-home>.hero-journey.has-hero-strip{--hero-h:max(240px,calc(var(--hero-avail) - var(--hero-strip-h,80px)));--hero-pad-top:8px;--hero-pad-bottom:14px}
 .scroll-home>.hero-journey.has-hero-strip .hero-scroll-meta{display:none}
 .scroll-home>.hero-journey.has-hero-strip .hero-copy .eyebrow{margin-bottom:6px}
 .scroll-home>.hero-journey.has-hero-strip .scroll-hero h1{font-size:clamp(1.55rem,min(8.6vw,calc(var(--hero-h)*.07)),2.3rem)!important;margin-bottom:6px}
 .scroll-home>.hero-journey.has-hero-strip .hero-subtitle{font-size:13px;line-height:1.4;margin-bottom:10px}
 .scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row>.button,.scroll-home>.hero-journey.has-hero-strip .hero-copy>.hero-book-now{min-height:40px;padding:8px 14px}
 .scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row>.text-link{margin-top:6px}
}
/* Phones and tablets hide their address bar while scrolling. The bottom navigation is fixed to the screen and moves
   with that animation at once, so a strip placed in the page fell behind it: a white gap opened, then closed with a
   jump. When the hero fits the screen (hero-carousel.js adds .strip-pinned), the strip is fixed on the bottom
   navigation too, so both move together; the hero section reaches under the strip (same layout and sizes as before),
   so whatever the strip uncovers is still the hero. The following sheet still slides over both. */
.curtain-enabled.scroll-home>.hero-journey.has-hero-strip.strip-pinned>.scroll-hero{min-height:calc(var(--hero-h) + var(--hero-strip-h,80px))!important;padding-bottom:calc(var(--hero-pad-bottom) + var(--hero-strip-h,80px))!important}
.curtain-enabled.scroll-home>.hero-journey.has-hero-strip.strip-pinned>.hero-strip{position:fixed;left:0;right:0;bottom:var(--hero-dock-h,0px)}
/* Real Chrome on Android moves a fixed strip inside the pinned hero only after its address-bar animation, a moment
   after the bottom navigation; the strip's own colour continues below it, behind the navigation, so whatever is
   uncovered for that moment is the strip, never a white band. */
@media(max-width:1279.98px){.scroll-home>.hero-journey.has-hero-strip>.hero-strip::after{content:"";position:absolute;left:0;right:0;top:100%;height:120px;background:inherit;pointer-events:none}}
/* The buttons dock into the strip's reserved right slot while the strip is on screen. */
body.hero-fabs-docked .whatsapp-contact,body.hero-fabs-docked .help-tools{bottom:calc(var(--hero-fab-bottom,0px) + var(--hero-fab-band,0px)/2)!important;transform:translateY(50%);transition:none}
body.hero-fabs-docked .whatsapp-contact{right:calc(14px + env(safe-area-inset-right,0px))!important}
body.hero-fabs-docked .whatsapp-contact:hover{transform:translateY(calc(50% - 3px))}
/* Ask Travella stacks directly above WhatsApp in the corner, in the space the pause button and
   card counter used to take (hidden below), so it never covers the cards or the buttons. */
body.hero-fabs-docked .help-tools{right:calc(14px + env(safe-area-inset-right,0px))!important;bottom:calc(var(--hero-fab-bottom,0px) + var(--hero-fab-band,0px)/2 + var(--hero-wa-h,0px)/2 + 8px)!important;transform:none;flex-direction:column;align-items:flex-end}
body.hero-fabs-docked .help-tools .scroll-top,body.hero-fabs-docked .help-tools .chat-greeting{display:none!important}
.hero-strip{position:relative;z-index:2;display:flex;justify-content:center;align-items:stretch;margin:0;padding:clamp(8px,1.6svh,15px) calc(var(--hero-fab-w,0px) + 24px + env(safe-area-inset-right,0px));list-style:none;background:var(--cream);background:color-mix(in srgb,var(--cream) 84%,var(--sand));border-top:1px solid var(--line);color:var(--forest);padding-bottom:max(clamp(8px,1.6svh,15px),calc(var(--hero-dock-lift,0px) + 2px))}
.hero-strip>li{flex:1 1 0;min-width:0;max-width:290px;margin:0;padding:0}
.hero-strip>li+li{border-left:1px solid var(--line)}
.hero-strip-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:100%;padding:4px 16px;text-align:center;color:inherit;text-decoration:none}
.hero-strip-item strong{font:700 clamp(17px,1.45vw,21px)/1.15 var(--display);letter-spacing:-.01em;color:var(--forest);overflow-wrap:anywhere}
.hero-strip-item span{font:500 12px/1.35 var(--body);color:var(--green);overflow-wrap:anywhere}
a.hero-strip-item:hover strong{text-decoration:underline;text-underline-offset:3px}
a.hero-strip-item:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
@media(max-width:767.98px){
 /* All items in one row, side by side and never scrolled away; WhatsApp keeps its slot at the right. */
 .hero-strip{display:grid;grid-template-columns:repeat(var(--strip-cols,3),minmax(0,1fr));align-items:stretch;padding:6px calc(var(--hero-fab-w,0px) + 12px + env(safe-area-inset-right,0px)) 8px calc(max(10px,calc(var(--gutter) - 8px)) + env(safe-area-inset-left,0px));padding-bottom:max(8px,calc(var(--hero-dock-lift,0px) + 2px))}
 .hero-strip[data-count="1"]{--strip-cols:1}
 .hero-strip[data-count="2"]{--strip-cols:2}
 .hero-strip>li{max-width:none}
 .hero-strip-item{padding:2px clamp(4px,1.6vw,10px);gap:2px}
 .hero-strip-item strong{font-size:clamp(13px,3.9vw,16px)}
 .hero-strip-item span{font-size:clamp(10px,2.9vw,11.5px);line-height:1.25}
}
@media print{.hero-strip{padding-inline:0}}
/* Bhutan USP inside the orange "Bhutan trip" bar, on every screen size. It is a forest pill with a pulsing
   dot whose text flips between the two halves of the message; screen readers get the full sentence from
   .trip-usp-full. Inner elements are i/b, not span, because the bar already styles every span as its arrow.
   Tablets and up: the title sits on top, the badge under it and the arrow centred on the right.
   Phones: the bar is full width, so the badge is centred between the title and the arrow. */
.scroll-home .trip-bar .trip-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:9px;white-space:nowrap}
.scroll-home .trip-bar .trip-cta>span{grid-column:2;grid-row:1/span 2;justify-self:end}
.scroll-home .trip-bar .trip-cta .trip-usp{grid-column:1;grid-row:2;justify-self:start;display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:5px 11px 5px 9px;border-radius:999px;background:var(--forest);color:var(--cream);box-shadow:0 2px 0 #1b2a1e33;font:600 clamp(11px,.85vw,12.5px)/1 var(--body);letter-spacing:.02em;white-space:nowrap}
.scroll-home .trip-bar .trip-usp::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 #e6a15ca6;animation:trip-usp-pulse 2s ease-out infinite}
.scroll-home .trip-bar .trip-usp-full{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.scroll-home .trip-bar .trip-usp-window{display:block;height:1.3em;overflow:hidden;font-style:normal}
.scroll-home .trip-bar .trip-usp-track{display:flex;flex-direction:column;font-style:normal;animation:trip-usp-flip 4s cubic-bezier(.7,0,.3,1) infinite}
.scroll-home .trip-bar .trip-usp-track>b{display:block;height:1.3em;line-height:1.3em;font-weight:inherit}
@media(max-width:600px){
 .scroll-home .trip-bar .trip-cta{grid-template-columns:1fr auto 1fr;column-gap:10px}
 .scroll-home .trip-bar .trip-cta .trip-usp{grid-column:2;grid-row:1;justify-self:center;font-size:11px}
 .scroll-home .trip-bar .trip-cta>span{grid-column:3;grid-row:1}
}
/* Smallest phones: the badge moves under the title instead of squeezing it. */
@media(max-width:340px){
 .scroll-home .trip-bar .trip-cta{grid-template-columns:1fr auto;row-gap:8px}
 .scroll-home .trip-bar .trip-cta .trip-usp{grid-column:1/-1;grid-row:2;justify-self:start}
 .scroll-home .trip-bar .trip-cta>span{grid-column:2;grid-row:1}
}
@keyframes trip-usp-flip{0%,42%{transform:translateY(0)}50%,92%{transform:translateY(-1.3em)}100%{transform:translateY(-2.6em)}}
@keyframes trip-usp-pulse{0%{box-shadow:0 0 0 0 #e6a15ca6}70%,100%{box-shadow:0 0 0 7px #e6a15c00}}
/* Reduced motion: no flipping or pulsing; both halves show as two still lines. */
@media(prefers-reduced-motion:reduce){
 .scroll-home .trip-bar .trip-usp::before,.scroll-home .trip-bar .trip-usp-track{animation:none}
 .scroll-home .trip-bar .trip-usp{border-radius:12px}
 .scroll-home .trip-bar .trip-usp-window{height:auto}
 .scroll-home .trip-bar .trip-usp-track>b:last-child{display:none}
}
html.reduce-motion .scroll-home .trip-bar .trip-usp::before,html.reduce-motion .scroll-home .trip-bar .trip-usp-track{animation:none}
html.reduce-motion .scroll-home .trip-bar .trip-usp{border-radius:12px}
html.reduce-motion .scroll-home .trip-bar .trip-usp-window{height:auto}
html.reduce-motion .scroll-home .trip-bar .trip-usp-track>b:last-child{display:none}

/* Ask Travella icon: a chatbot mark (a forest speech bubble with a friendly face and a saffron antenna light)
   inside the button's box: beside the "Ask Travella" text on desktop (the star is not shown), alone in the
   round app-view button. It bobs gently, blinks, its antenna light pulses, and every 9 seconds the smile
   turns into "typing" dots for a moment. */
.help-tools #chat-toggle>span{display:none}
.help-tools #chat-toggle .chat-bot{display:block;flex:none}
@media(min-width:1280px){
 .help-tools #chat-toggle{display:inline-flex;align-items:center;gap:8px;padding-top:4px;padding-bottom:4px}
 .help-tools #chat-toggle .chat-bot{order:-1;width:34px;height:34px;margin:-2px 0 -2px -4px}
}
@media(max-width:1279.98px){
 /* App view: Ask Travella and WhatsApp are matching 48px discs in the site's button style (a 1.5px forest
    edge and the flat sand offset), on one centre line. */
 .help-tools #chat-toggle{width:48px;height:48px;overflow:hidden;border:1.5px solid var(--forest);background:var(--cream);box-shadow:3px 3px 0 var(--sand)}
 .help-tools #chat-toggle .chat-bot{width:34px;height:34px}
 .whatsapp-contact,.has-mobile-dock .whatsapp-contact{width:48px;height:48px;min-width:0;min-height:0;padding:0;justify-content:center;border:1.5px solid var(--forest);border-radius:50%;background:var(--forest);box-shadow:3px 3px 0 var(--sand)}
 .has-mobile-dock .whatsapp-contact{right:14px}
}
.chat-bot g,.chat-bot circle,.chat-bot path{transform-box:fill-box}
.chat-bot .bot-body{transform-origin:center;animation:bot-bob 3.2s ease-in-out infinite}
.chat-bot .bot-eyes{transform-origin:center;animation:bot-blink 4.2s infinite}
.chat-bot .bot-antenna{transform-origin:center;animation:bot-glow 2.4s ease-in-out infinite}
.chat-bot .bot-smile{animation:bot-smile 9s ease-in-out infinite}
.chat-bot .bot-typing{opacity:0;animation:bot-typing 9s ease-in-out infinite}
.chat-bot .bot-typing circle{transform-origin:center;animation:bot-dot .9s ease-in-out infinite}
.chat-bot .bot-dot2{animation-delay:.15s!important}
.chat-bot .bot-dot3{animation-delay:.3s!important}
@keyframes bot-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes bot-blink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.12)}}
@keyframes bot-glow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.65}}
@keyframes bot-smile{0%,62%,96%,100%{opacity:1}65%,93%{opacity:0}}
@keyframes bot-typing{0%,63%,95%,100%{opacity:0}66%,92%{opacity:1}}
@keyframes bot-dot{0%,100%{transform:translateY(0)}40%{transform:translateY(-2.2px)}}
@media(prefers-reduced-motion:reduce){.chat-bot *{animation:none!important}}
html.reduce-motion .chat-bot *{animation:none!important}

/* Ask Travella greeting: a short line from the assistant now and then, beside the button (chat-greeting.js).
   Tapping it opens the chat. */
.help-tools .chat-greeting{position:absolute;right:calc(100% + 12px);bottom:6px;z-index:1;width:max-content;max-width:210px;min-height:0;margin:0;padding:9px 13px;border:1px solid var(--forest);border-radius:12px 12px 2px 12px;background:var(--cream);color:var(--forest);box-shadow:3px 3px 0 var(--sand);font:500 13px/1.35 var(--body);text-align:left;cursor:pointer;opacity:0;transform:translateX(6px);transition:opacity .25s ease,transform .25s ease}
.help-tools .chat-greeting.is-visible{opacity:1;transform:none}
.help-tools .chat-greeting[hidden]{display:none}
@media(max-width:1279.98px){.help-tools .chat-greeting{right:calc(100% + 10px);bottom:8px;max-width:170px;padding:8px 11px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.help-tools .chat-greeting{transition:none;transform:none}}
html.reduce-motion .help-tools .chat-greeting{transition:none;transform:none}

/* WhatsApp contact: the original box and "WhatsApp" text (icon-only round box in the app view, as before),
   with the logo drawn in the site's own style inside it: a solid brand-sage bubble, a cream handset and
   the flat sand offset the site's buttons use. It gives a short wiggle every few seconds. */
.whatsapp-contact svg{width:28px;height:28px;stroke-width:1.6;filter:drop-shadow(2px 2px 0 var(--sand));transform-origin:50% 55%;animation:whatsapp-wiggle 6s ease-in-out infinite}
.whatsapp-contact svg path:first-child{fill:var(--tv-sage,#6d987d);stroke:var(--tv-sage,#6d987d)}
.whatsapp-contact svg path:last-child{fill:var(--cream);stroke:var(--cream);stroke-width:.6}
@keyframes whatsapp-wiggle{0%,82%,100%{transform:rotate(0)}85%{transform:rotate(-14deg)}88%{transform:rotate(11deg)}91%{transform:rotate(-8deg)}94%{transform:rotate(5deg)}97%{transform:rotate(-2deg)}}
@media(prefers-reduced-motion:reduce){.whatsapp-contact svg{animation:none}}
html.reduce-motion .whatsapp-contact svg{animation:none}

/* Scroll-to-top: a slim forest arrow on a small cream disc, ringed by a hairline sand circle that fills
   with saffron as the page is read (browsers without scroll-linked animation show the plain ring). No
   box, border or shadow; the arrow nudges upward every few seconds. Display is left alone so the
   [hidden] attribute that shows it after scrolling keeps working. */
@property --scroll-top-progress{syntax:'<number>';inherits:false;initial-value:0}
.help-tools .scroll-top{position:relative;align-self:flex-end;width:44px;height:44px;min-height:0;padding:0;font-size:0;border:0;border-radius:50%;box-shadow:none;background:radial-gradient(closest-side,var(--cream) calc(100% - 2.5px),transparent calc(100% - 2px)),conic-gradient(var(--orange) calc(var(--scroll-top-progress)*1%),#d4a37366 0)}
.help-tools .scroll-top::before{content:'\2191';position:absolute;inset:0;display:grid;place-items:center;font:300 21px/1 var(--body);color:var(--forest);animation:scroll-top-nudge 5s ease-in-out infinite}
.help-tools .scroll-top:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
@keyframes scroll-top-nudge{0%,80%,100%{transform:translateY(0)}85%{transform:translateY(-4px)}90%{transform:translateY(0)}94%{transform:translateY(-2px)}}
@keyframes scroll-top-progress{from{--scroll-top-progress:0}to{--scroll-top-progress:100}}
@supports (animation-timeline:scroll()){.help-tools .scroll-top{animation:scroll-top-progress linear both;animation-timeline:scroll(root)}}
@media(prefers-reduced-motion:reduce){.help-tools .scroll-top::before{animation:none}}
html.reduce-motion .help-tools .scroll-top::before{animation:none}

/* Phones/tablets with the bottom navigation: the body keeps room for it at the very bottom. The
   footer now fills that room with its own colour instead of leaving a cream band under it. */
@media(max-width:1279.98px){
 body.has-mobile-dock .field-footer{margin-bottom:calc(-1 * (var(--dock-height,78px) + 24px));padding-bottom:calc(150px + var(--dock-height,78px) + 24px)}
 body.has-mobile-dock.cookie-notice-visible .field-footer{margin-bottom:calc(-1 * (var(--cookie-notice-height,0px) + var(--dock-height,78px) + 25px));padding-bottom:calc(150px + var(--cookie-notice-height,0px) + var(--dock-height,78px) + 25px)}
}

/* Optional homepage hero background photo (Studio → Homepage). The photo sits behind everything in
   the hero (the section is its own stacking layer), so the heading, photo cards and strip are
   untouched. A soft cream wash keeps the dark heading and text readable; text colours don't change. */
.scroll-home .scroll-hero.has-hero-bg{background:var(--cream)}
.scroll-home .scroll-hero .hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.scroll-home .scroll-hero .hero-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.scroll-home .scroll-hero .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(252,249,242,.92) 0%,rgba(252,249,242,.84) 34%,rgba(252,249,242,.5) 62%,rgba(252,249,242,.22) 100%)}
/* Single column (text above the cards): the wash runs top to bottom instead. */
@media(max-width:700px){
 .scroll-home .scroll-hero .hero-bg::after{background:linear-gradient(180deg,rgba(252,249,242,.9) 0%,rgba(252,249,242,.84) 46%,rgba(252,249,242,.5) 72%,rgba(252,249,242,.3) 100%)}
}

/* Gallery viewer (photo lightbox): the previous/next arrows were cream on cream buttons. */
.gallery-dialog .gallery-controls button{display:inline-grid;place-items:center;min-width:52px;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--cream);color:var(--forest);font:600 20px/1 var(--body);cursor:pointer;transition:background .2s,color .2s}
.gallery-dialog .gallery-controls button:hover{background:var(--orange);color:var(--forest)}
.gallery-dialog .gallery-controls button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---- Homepage hero buttons and phone layout ----------------------------------------------------------------
   The ranges and stays links match: the stays link's underlined text style, each on one line (no arrow); Book now is
   the orange one with the green offset. Phones: label, title, the photo card (narrower, less wide and flat), the two matching buttons side by side,
   then Book now; the explanation line is left out on phones. */
.scroll-home .hero-copy .button-row>.button,.scroll-home .hero-copy .button-row>.text-link{display:inline-flex;align-items:center;gap:0;min-height:0;width:fit-content;padding:7px 0;border:0;border-bottom:1px solid var(--forest);border-radius:0;background:transparent;color:var(--forest);font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none;box-shadow:none;translate:none}
.scroll-home .hero-copy .button-row>.button:hover,.scroll-home .hero-copy .button-row>.text-link:hover{background:transparent;color:var(--green);border-color:var(--green)}
.scroll-home .hero-copy .hero-book-now{border:1px solid var(--forest);background:var(--orange);color:var(--forest);box-shadow:5px 5px 0 var(--green)}
.scroll-home .hero-copy .hero-book-now:hover{translate:-2px -2px;box-shadow:7px 7px 0 var(--green)}
@media(max-width:700px){
 .scroll-home>.hero-journey .scroll-hero,.scroll-home>.hero-journey.has-hero-strip .scroll-hero{display:flex!important;flex-direction:column;align-items:stretch}
 .scroll-home>.hero-journey .scroll-hero>.hero-copy,.scroll-home>.hero-journey.has-hero-strip .scroll-hero>.hero-copy{display:contents!important}
 .scroll-home>.hero-journey .hero-copy>.eyebrow,.scroll-home>.hero-journey.has-hero-strip .hero-copy>.eyebrow{order:1}
 .scroll-home>.hero-journey .hero-copy>h1,.scroll-home>.hero-journey.has-hero-strip .hero-copy>h1{order:2}
 .scroll-home>.hero-journey .hero-copy>.hero-subtitle,.scroll-home>.hero-journey.has-hero-strip .hero-copy>.hero-subtitle,.scroll-home>.hero-journey .hero-copy>.hero-footnote,.scroll-home>.hero-journey.has-hero-strip .hero-copy>.hero-footnote{display:none!important}
 .scroll-home>.hero-journey .scroll-hero>.hero-stage,.scroll-home>.hero-journey.has-hero-strip .scroll-hero .hero-stage{order:3;width:min(80%,320px);margin:6px auto 20px!important}
 .scroll-home>.hero-journey .hero-copy>.button-row,.scroll-home>.hero-journey.has-hero-strip .hero-copy>.button-row,.scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row{order:4;display:flex!important;justify-content:center;gap:12px 28px;flex-wrap:wrap;margin:0}
 .scroll-home>.hero-journey .hero-copy .button-row>.button,.scroll-home>.hero-journey .hero-copy .button-row>.text-link,.scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row>.button,.scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row>.text-link{flex:0 1 auto;min-width:0;min-height:0;margin:0!important;padding:7px 0;font-size:14px}
 .scroll-home>.hero-journey .hero-copy>.hero-book-now,.scroll-home>.hero-journey.has-hero-strip .hero-copy>.hero-book-now{order:5;align-self:stretch;justify-content:center;margin-top:14px!important}
}

/* ---- Hero strip: equal boxes, no spare space, steady floating buttons ---------------------------------------------
   The boxes share the width equally whatever their number (1–3): the space kept for the floating buttons on the right
   is kept on the left too, so the boxes and dividers are centred on the screen. With two boxes the bottom navigation's
   round Home button sits under the divider, so no extra space is kept below the text for it. Leaving the strip, the
   buttons glide to their usual corner instead of jumping. */
@media(max-width:767.98px){
 .hero-strip{padding-left:calc(var(--hero-fab-w,0px) + 12px + env(safe-area-inset-right,0px))}
}
.hero-strip[data-count="2"]{padding-bottom:clamp(6px,1.2svh,12px)}
@media(max-width:767.98px){.hero-strip[data-count="2"]{padding-bottom:8px}}
body:has([data-scroll-home]) .whatsapp-contact{transition:transform .2s,bottom .3s ease}
body:has([data-scroll-home]) .help-tools{transition:bottom .3s ease}
body.hero-fabs-docked .help-tools{transition:none}
@media(prefers-reduced-motion:reduce){body:has([data-scroll-home]) .whatsapp-contact,body:has([data-scroll-home]) .help-tools{transition:none}}
@media(max-width:700px){
 .scroll-home>.hero-journey .hero-copy>*,.scroll-home>.hero-journey.has-hero-strip .hero-copy>*{flex:0 0 auto}
}
/* Phones: Book now is the hero's last item, so only a small space is kept under it; the photo card takes the rest. */
@media(max-width:700px){.scroll-home>.hero-journey.has-hero-strip{--hero-pad-bottom:16px}}
/* Phones: the two links side by side from the left on the first line, Book now alone at its own width on the second
   (clear of the floating buttons on the right). */
@media(max-width:700px){.scroll-home>.hero-journey .hero-copy>.button-row,.scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row{justify-content:flex-start!important}.scroll-home>.hero-journey .hero-copy>.hero-book-now,.scroll-home>.hero-journey.has-hero-strip .hero-copy>.hero-book-now{align-self:flex-start;width:auto;min-width:160px;max-width:calc(100% - 130px)}}
/* Short phones: tighter space around the photo card and Book now, so the hero and the strip fit the first screen. */
@media(max-width:700px) and (max-height:760px){.scroll-home>.hero-journey.has-hero-strip .scroll-hero{gap:8px!important}.scroll-home>.hero-journey.has-hero-strip .scroll-hero .hero-stage{margin:2px auto 10px!important}.scroll-home>.hero-journey.has-hero-strip .hero-copy>.hero-book-now{margin-top:10px!important}}
/* Phones: the strip spans the full width and its boxes share it equally, with no space kept at the sides; WhatsApp and
   Ask Travella stay docked at the strip's right end as before (they may sit over the edge of the last box). */
@media(max-width:700px){
 .scroll-home>.hero-journey.has-hero-strip>.hero-strip{padding-left:calc(max(10px,calc(var(--gutter) - 8px)) + env(safe-area-inset-left,0px));padding-right:calc(max(10px,calc(var(--gutter) - 8px)) + env(safe-area-inset-right,0px))}
}
/* Phones: the strip's titles line up on one level even when one note wraps. */
@media(max-width:700px){.scroll-home>.hero-journey.has-hero-strip>.hero-strip .hero-strip-item{justify-content:flex-start;padding-top:4px}}
/* Homepage hero with a background photo: the curtain's scroll dimming is off, so the photo keeps the same soft look
   while the cards scroll (the darkening made it seem to turn from hazy to sharp). */
.curtain-enabled>.curtain-hero:has(>.scroll-hero.has-hero-bg):after{opacity:0}
/* Homepage hero background photo: its own fixed drawing layer. It used to be drawn in one layer with the moving cards,
   so when the first card started to move Chrome redrew the photo, first at lower quality, then sharp a moment later:
   the photo seemed to turn from blurry to clear on the first card only (later cards reused the sharp copy). On its own
   layer the photo is never redrawn while the cards move; the template also decodes it fully before it is shown. */
.scroll-home .scroll-hero .hero-bg{transform:translateZ(0);will-change:transform;backface-visibility:hidden;contain:paint}
/* The ranges and stays links above Book now: the site's button box (square corners, forest outline, hard offset
   shadow, as on Book now) in cream with a forest shadow, text on one line. On phones they keep clear of the photo
   cards above (the stacked cards reach below their frame), with room for the shadows. */
.scroll-home .hero-copy .button-row>.button,.scroll-home .hero-copy .button-row>.text-link{min-height:44px;padding:10px 18px!important;border:1px solid var(--forest);border-radius:2px;background:#fffdf8;color:var(--forest);box-shadow:4px 4px 0 var(--forest);font-weight:600;letter-spacing:.01em;text-decoration:none;white-space:nowrap;transition:translate .25s ease,box-shadow .25s ease,background .25s ease}
.scroll-home .hero-copy .button-row>.button:hover,.scroll-home .hero-copy .button-row>.text-link:hover{translate:-2px -2px;background:#fff;color:var(--forest);border-color:var(--forest);box-shadow:6px 6px 0 var(--forest)}
.scroll-home .hero-copy .button-row{gap:16px 18px;padding:0 4px 4px 0}
@media(max-width:700px){
 .scroll-home>.hero-journey .hero-copy>.button-row,.scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row{margin-top:22px!important;gap:12px 14px!important}
 .scroll-home>.hero-journey .hero-copy .button-row>.button,.scroll-home>.hero-journey .hero-copy .button-row>.text-link,.scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row>.button,.scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row>.text-link{min-height:40px;padding:9px 14px!important;font-size:14px}
 .scroll-home>.hero-journey .hero-copy>.hero-book-now,.scroll-home>.hero-journey.has-hero-strip .hero-copy>.hero-book-now{margin-top:16px!important}
}
@media(max-width:700px) and (max-height:760px){
 .scroll-home>.hero-journey .hero-copy>.button-row,.scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row{margin-top:12px!important}
 .scroll-home>.hero-journey .hero-copy .button-row>.button,.scroll-home>.hero-journey .hero-copy .button-row>.text-link,.scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row>.button,.scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row>.text-link{min-height:36px;padding:7px 12px!important}
 .scroll-home>.hero-journey .hero-copy>.hero-book-now,.scroll-home>.hero-journey.has-hero-strip .hero-copy>.hero-book-now{margin-top:10px!important;min-height:38px}
 .scroll-home>.hero-journey.has-hero-strip .scroll-hero .hero-stage{margin-bottom:6px!important}
}
/* The ranges and stays buttons always share one line (they wrapped below about 370px wide and on tablets, where the
   text column is narrow): no wrapping, and their text and padding shrink with the width. */
.scroll-home .hero-copy .button-row,.scroll-home>.hero-journey .hero-copy>.button-row,.scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row{flex-wrap:nowrap!important}
.scroll-home .hero-copy .button-row>.button,.scroll-home .hero-copy .button-row>.text-link{flex:0 1 auto;min-width:0}
@media(max-width:700px){
 .scroll-home>.hero-journey .hero-copy .button-row>.button,.scroll-home>.hero-journey .hero-copy .button-row>.text-link,.scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row>.button,.scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row>.text-link{flex:1 1 0;font-size:clamp(12px,3.7vw,14px)!important;padding:9px clamp(6px,2.4vw,14px)!important}
 .scroll-home>.hero-journey .hero-copy>.button-row,.scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row{gap:clamp(8px,3vw,14px)!important}
}
@media(min-width:701px) and (max-width:1279.98px){
 .scroll-home .hero-copy .button-row>.button,.scroll-home .hero-copy .button-row>.text-link{font-size:clamp(12px,1.7vw,14px);padding:10px clamp(10px,1.6vw,18px)!important}
}
/* Short phones (up to 680px tall, e.g. 320x568, 360x640): smaller title, tighter gaps and buttons, and a smaller
   photo card, so the whole hero and the strip fit the first screen above the bottom navigation. */
@media(max-width:700px) and (max-height:680px){
 .scroll-home>.hero-journey.has-hero-strip{--hero-pad-top:6px;--hero-pad-bottom:10px}
 .scroll-home>.hero-journey.has-hero-strip .scroll-hero{gap:6px!important}
 .scroll-home>.hero-journey.has-hero-strip .hero-copy .eyebrow{margin-bottom:4px!important;font-size:10px}
 .scroll-home>.hero-journey.has-hero-strip .scroll-hero h1{font-size:clamp(1.3rem,7.4vw,1.85rem)!important;margin-bottom:2px!important}
 .scroll-home>.hero-journey.has-hero-strip .scroll-hero .hero-stage{margin:0 auto 6px!important}
 .scroll-home>.hero-journey .hero-copy>.button-row,.scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row{margin-top:8px!important}
 .scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row>.button,.scroll-home>.hero-journey.has-hero-strip .hero-copy .button-row>.text-link{min-height:34px!important;padding:6px clamp(6px,2.2vw,12px)!important}
 .scroll-home>.hero-journey.has-hero-strip .hero-copy>.hero-book-now{margin-top:8px!important;min-height:34px!important;padding:6px 14px!important}
 .scroll-home>.hero-journey.has-hero-strip .hero-strip-item strong{font-size:13px}
 .scroll-home>.hero-journey.has-hero-strip .hero-strip-item span{font-size:10px}
}
/* Short phones: the small inset photo is left out, so it never overlaps the title above the smaller photo card. */
@media(max-width:700px) and (max-height:680px){.scroll-home>.hero-journey.has-hero-strip .scroll-hero .field-specimen{display:none}}
/* Homepage hero buttons: one hover lift only. The site-wide .button:hover also moved them (transform), so the button
   jumped out from under the pointer, lost its hover, fell back under it and hovered again: a constant shake. A
   slightly larger invisible hover area moves with each button, so the pointer stays on it while it lifts. */
.scroll-home .hero-copy .button-row>.button,.scroll-home .hero-copy .button-row>.text-link,.scroll-home .hero-copy>.hero-book-now{position:relative}
.scroll-home .hero-copy .button-row>.button:hover,.scroll-home .hero-copy .button-row>.text-link:hover,.scroll-home .hero-copy>.hero-book-now:hover{transform:none}
.scroll-home .hero-copy .button-row>.button::before,.scroll-home .hero-copy .button-row>.text-link::before,.scroll-home .hero-copy>.hero-book-now::before{content:"";position:absolute;inset:-6px}

/* Book now: "Your next chapter" summary card. It is sticky beside the form and taller than many windows, so on
   desktop cap it at the window height and let it scroll inside; on short windows the extra bottom room lifts the
   subtotal clear of the floating help/WhatsApp buttons. Tablet and phone layouts are not sticky and stay as they were. */
@media(min-width:851px){
 .booking-summary{max-height:calc(100dvh - var(--nav-height,88px) - 20px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
 .booking-summary>div:last-child::after{content:"";display:block;height:0}
}
@media(min-width:851px) and (max-height:780px){
 .booking-summary>div:last-child::after{height:110px}
}
/* Below 1280px the fixed bottom dock (about 67px) also covers the window's lower edge. */
@media(min-width:851px) and (max-width:1279.98px){
 .booking-summary{max-height:calc(100dvh - var(--nav-height,88px) - 96px)}
}