:root{--announcement-height:0px}
.header.field-header{top:var(--announcement-height)}
.field-header #main-nav>a:not(.button),.nav-group>button,.nav-auth>a{position:relative}
.field-header #main-nav>a[aria-current=page]:not(.button),.nav-group.is-active>button,.nav-auth>a[aria-current=page]{color:var(--green);font-weight:700}
.field-header #main-nav>a[aria-current=page]:not(.button)::after,.nav-group.is-active>button::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:3px;border-radius:2px;background:var(--orange)}
.field-header .field-menu{overflow:visible;min-width:280px}
.nav-branch{position:relative}
.nav-branch-heading{display:flex;align-items:center;gap:5px}
.field-header .nav-branch-heading>a{flex:1;border-bottom:0;padding:16px 10px}
.nav-branch-heading>button{width:40px;min-height:44px;border:1px solid var(--line);background:transparent;color:var(--forest);font-size:25px;border-radius:50%}
.nav-branch-heading>button[aria-expanded=true]{background:var(--forest);color:var(--cream)}
.nav-children{position:absolute;left:calc(100% + 16px);top:-30px;width:290px;max-height:calc(100dvh - var(--nav-height) - 60px);overflow:auto;padding:24px;background:var(--cream);border:1px solid var(--line);box-shadow:8px 10px 0 #344e4120;border-radius:0 18px 18px 18px}
.nav-children[hidden]{display:none!important}
.field-header .nav-children>a{font-size:14px;gap:15px;padding:13px 0}
.field-header .field-menu a[aria-current=page]{color:var(--green);font-weight:700;background:#e6ebdd;border-radius:5px;padding-inline:10px}
.nav-branch.is-active>.nav-branch-heading>a{font-weight:700;color:var(--green)}
.nav-branch.is-active>.nav-branch-heading>a::before{content:'';display:inline-block;width:6px;height:6px;background:var(--orange);border-radius:50%;margin-right:8px}
.profile-link{display:flex;align-items:center;gap:8px;min-height:42px}
.profile-link>[data-profile-initials]{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--forest);color:var(--cream);font-size:11px;letter-spacing:.03em}
.profile-link-photo{display:block;width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--sage);border:1px solid var(--line)}
.profile-link[aria-current=page]>.profile-link-photo{outline:2px solid var(--orange);outline-offset:3px}
.profile-link[aria-current=page]>[data-profile-initials]{outline:2px solid var(--orange);outline-offset:3px}
.studio-profile-link{display:block;margin:16px 0;font-weight:700}
@media(min-width:1280px){.profile-link-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.nav-auth{gap:9px}.field-header #main-nav{gap:clamp(10px,1vw,17px)}}
@media(max-width:1279.98px){.nav-children{position:static;width:100%;max-height:none;box-shadow:none;border-radius:12px;margin:0 0 12px;padding:16px 20px;background:#f1f2e9}.field-header .field-menu{min-width:0}.field-header #main-nav>a[aria-current=page]:not(.button)::after,.nav-group.is-active>button::after{left:0;right:auto;width:28px;bottom:0}.field-header .nav-branch-heading>a{padding-left:0}.nav-auth{justify-content:flex-start;gap:22px}.field-header #main-nav .profile-link{font-size:18px}.nav-branch-heading{border-bottom:1px solid var(--line)}}
@media(max-width:1279.98px){.mobile-dock{padding-inline:6px;align-items:end}.mobile-dock a,.mobile-dock .dock-book{grid-column:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;min-width:0;min-height:44px;height:44px;margin:0;padding:0;border:0;position:relative;font-size:11px;font-weight:500;line-height:1.1}.mobile-dock a>b{font-size:11px;font-weight:500;line-height:1.1}.mobile-dock a>svg{width:23px;height:23px;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.mobile-dock a.is-active>b{font-weight:750;color:var(--forest)}.mobile-dock a.is-active:not(.dock-home)::before{content:'';position:absolute;width:22px;height:3px;bottom:-7px;border-radius:3px;background:var(--orange)}.mobile-dock .dock-home{height:44px}.mobile-dock .dock-home>span{bottom:23px}.mobile-dock .dock-home.is-active>span{background:var(--green)}.mobile-dock .dock-trip>svg{color:var(--green)}}
@media print{.announcement-bar{display:none!important}.header.field-header{position:static}}

.field-header #main-nav>a.is-active{color:var(--green);font-weight:700;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;text-underline-offset:10px}
.field-header .nav-plan[aria-current=page]{background:var(--forest);color:var(--cream);box-shadow:4px 4px 0 var(--orange)}

/* App view (up to 1279px): header menu, bottom dock and round floating buttons switch together, so
   tablets (iPad portrait 768-834, landscape 1024-1194) never get a half-mobile, half-desktop layout.
   The open menu is a full-screen sheet from the header's bottom edge to the bottom of the screen,
   above the dock and floating buttons. The header uses backdrop-filter, which makes it the containing
   block for its children, so the sheet is sized from the header rather than with inset:0. */
/* Plan a journey, Sign in/account and the contact line share one wrapper so the app-view menu can pin
   them. On desktop the wrapper is display:contents, so the row lays out exactly as before; the desktop
   rules Sign in received as a direct child of the nav are restated here. */
.nav-actions{display:contents}
.nav-actions>.nav-contact{display:none}
.nav-booking-entry{position:relative;min-width:0}
.nav-booking-entry>.nav-plan{border:0;cursor:pointer}
.nav-booking-entry.is-active>.nav-plan{background:var(--forest);color:var(--cream);box-shadow:4px 4px 0 var(--orange)}
.nav-booking-options{position:absolute;right:0;top:calc(100% + 12px);z-index:45;width:min(340px,calc(100vw - 32px));padding:18px;background:var(--cream);color:var(--forest);border:1px solid var(--line);box-shadow:8px 10px 0 #344e4120}
.nav-booking-options>.eyebrow{margin:0 0 8px;color:var(--muted)}
.nav-booking-options>a{display:block;padding:13px 10px;border-top:1px solid var(--line);color:var(--forest)}
.nav-booking-options>a:first-of-type{border-top:0}
.nav-booking-options>a:hover,.nav-booking-options>a:focus-visible{background:#eef1e6;color:var(--forest)}
.nav-booking-options strong,.nav-booking-options span{display:block}
.nav-booking-options strong{font-size:14px;line-height:1.35}
.nav-booking-options span{margin-top:4px;color:var(--muted);font-size:11px;line-height:1.45}
/* "Choose booking" sits under "Plan a journey" without the old 52% indent, which pushed it past the
   button's text column and over the chevron on narrower desktop widths. */
.nav-plan-sub{margin-left:0}
.header nav .nav-actions>.nav-signin{position:relative;padding:10px 0}
.field-header .nav-actions>.nav-signin[aria-current=page]{color:var(--green);font-weight:700}
.field-header .nav-actions>.nav-signin[aria-current=page]::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:3px;border-radius:2px;background:var(--orange)}
@media(max-width:1279.98px){
 html.nav-open,html.nav-open body{overflow:hidden}
 html.nav-open .header.field-header{z-index:70}
 /* The sheet is a grid in three groups: destination buttons from the top; Blog/FAQs/My bookings as one
    row in the middle; the actions pinned to the bottom. Two 1fr spacer rows share the leftover height, so
    the groups spread evenly. When content is taller than the screen (an open accordion, short phones,
    landscape) the spacers shrink to their minimum, the sheet scrolls, and the actions stay pinned as a
    sticky footer, so nothing is cut off. Rows are counted from the end of the grid because the number
    of destination rows (--nav-top-rows, set in navigation.js) depends on catalogue visibility. */
 .field-header #main-nav.open{
  --menu-gap:clamp(7px,1.2vh,12px);--menu-group-gap:clamp(4px,2.2vh,28px);
  --menu-dest-h:clamp(48px,6.4vh,60px);--menu-link-h:clamp(48px,5.8vh,54px);--menu-plan-h:clamp(52px,7vh,62px);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:repeat(var(--nav-top-rows,5),auto) minmax(var(--menu-group-gap),1fr) auto minmax(var(--menu-group-gap),1fr) auto;
  gap:var(--menu-gap) 10px;
  height:calc(100vh - var(--nav-height,88px));height:calc(100dvh - var(--nav-height,88px));height:var(--nav-sheet-height,calc(100dvh - var(--nav-height,88px)));max-height:none;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(12px,2.2vh,24px) max(var(--gutter),env(safe-area-inset-right),calc((100% - 640px)/2)) 0 max(var(--gutter),env(safe-area-inset-left),calc((100% - 640px)/2))
 }
 /* Top: five destination buttons with one height, padding and type size. */
 .field-header #main-nav.open>:is(.nav-group,.bhutan-nav){grid-column:1/-1;width:auto;min-width:0;margin:0}
 .field-header #main-nav.open>.nav-group>button.nav-boxed,.field-header #main-nav.open>.bhutan-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:var(--menu-dest-h);padding:0 16px!important;font:400 clamp(18px,2.5vh,22px)/1.15 var(--display);text-align:left;white-space:normal}
 .field-header #main-nav.open>.bhutan-nav>span{flex:none;margin-right:1px;font-size:.85em}
 /* Chevron drawn in CSS in place of the "⌄" glyph (kept for desktop); it turns over when the group opens. */
 .field-header #main-nav.open>.nav-group>button>span[aria-hidden]{flex:none;width:9px;height:9px;margin:0 4px 4px 0;font-size:0;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .25s ease,margin .25s ease}
 .field-header #main-nav.open>.nav-group.open>button>span[aria-hidden]{transform:rotate(-135deg);margin:4px 4px 0 0}
 /* Accordion: sub-links unfold inside the sheet; closed links are hidden from the tab order. */
 .field-header #main-nav.open>.nav-group>.field-menu{display:block;position:static;width:auto;min-width:0;max-height:0;margin:0;padding:0 16px;overflow:hidden;visibility:hidden;border-width:0 1px;box-shadow:none;animation:none;transition:max-height .3s ease,padding .3s ease,margin .3s ease,visibility 0s linear .3s}
 .field-header #main-nav.open>.nav-group.open>.field-menu{max-height:var(--nav-menu-height,640px);margin-top:6px;padding:8px 16px;visibility:visible;border-width:1px;transition:max-height .35s ease,padding .3s ease,margin .3s ease,visibility 0s}
 .field-header #main-nav.open .field-menu>.eyebrow{margin:6px 0 2px}
 .field-header #main-nav.open .field-menu a{min-height:48px;padding:0 2px;font:400 17px/1.25 var(--display)}
 .field-header #main-nav.open .field-menu .menu-all{font-weight:600}
 /* Middle: the short links (Our story, Blog, FAQs, My bookings) share one row in equal widths,
    however many there are: 12 columns split as 6+6, 4+4+4 or 3+3+3+3. Sign in shares their style. */
 .field-header #main-nav.open>:is(.nav-compact,.account-link){grid-row:-4;grid-column:span 4}
 .field-header #main-nav.open:not(:has(>.nav-compact~.nav-compact~.nav-compact)):not(:has(>.account-link))>.nav-compact{grid-column:span 6}
 .field-header #main-nav.open:has(>.nav-compact~.nav-compact~.nav-compact):has(>.account-link)>:is(.nav-compact,.account-link){grid-column:span 3}
 .field-header #main-nav.open>:is(.nav-compact,.account-link),.field-header #main-nav.open .nav-actions>.nav-signin,.field-header #main-nav.open .nav-auth>a{display:flex;align-items:center;justify-content:center;min-height:var(--menu-link-h);margin:0;padding:6px 4px!important;border:1px solid #1b2a1e59;color:var(--forest);font:500 15px/1.2 var(--body);text-align:center;white-space:normal}
 .field-header #main-nav.open>:is(.nav-compact,.account-link)[aria-current=page]::after,.field-header #main-nav.open .nav-actions>.nav-signin[aria-current=page]::after{left:50%;right:auto;width:28px;bottom:6px;transform:translateX(-50%)}
 /* Bottom: one sticky footer. Its cream background reaches both screen edges (box-shadow + clip-path,
    which add no scroll width) and it carries the bottom safe-area inset for the home indicator. */
 .field-header #main-nav.open>.nav-actions{grid-row:-2;grid-column:1/-1;position:sticky;bottom:0;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--menu-gap);padding:var(--menu-gap) 0 max(10px,env(safe-area-inset-bottom));background:var(--cream);box-shadow:0 0 0 100vmax var(--cream),0 -1px 0 100vmax var(--line);clip-path:inset(-1px -100vmax 0)}
 .field-header #main-nav.open .nav-actions>.nav-booking-entry{grid-column:1/-1;width:100%}
 .field-header #main-nav.open .nav-actions .nav-plan{display:flex;justify-content:center;gap:14px;width:100%;min-height:var(--menu-plan-h);margin:0;padding:8px 20px;font:600 16px/1.2 var(--body)}
 .field-header #main-nav.open .nav-plan-copy{text-align:center}
 .field-header #main-nav.open .nav-plan-main{font-size:16px}
 .field-header #main-nav.open .nav-plan-sub{margin:4px 0 0;font-size:10px}
 .field-header #main-nav.open .nav-booking-options{position:static;width:100%;margin-top:8px;padding:8px;border:1px solid var(--line);box-shadow:none}
 .field-header #main-nav.open .nav-booking-options>.eyebrow{padding:4px 6px 0;text-align:center}
 .field-header #main-nav.open .nav-booking-options>a{min-height:50px;padding:10px 12px;text-align:left}
 /* While the booking choices are open the footer stops being sticky, so its taller height scrolls with
    the sheet instead of covering Blog/FAQs/My bookings. */
 .field-header #main-nav.open>.nav-actions:has(.nav-booking-entry.open){position:relative}
 .field-header #main-nav.open .nav-actions>.nav-auth{display:flex;justify-content:stretch;gap:10px;margin:0;padding:0}
 .field-header #main-nav.open .nav-auth>a{flex:1;gap:10px}
 .field-header #main-nav.open .nav-actions>.nav-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:0 20px;margin:0;color:var(--muted);font:13px/1.3 var(--body)}
 .field-header #main-nav.open .nav-contact a{display:inline-flex;align-items:center;min-height:48px;text-decoration:underline;text-underline-offset:3px}
}
/* Phones in landscape: destinations in two columns and the two actions side by side, to save height. */
@media(max-width:1279.98px) and (orientation:landscape) and (max-height:560px){
 .field-header #main-nav.open{grid-template-rows:repeat(var(--nav-top-pairs,3),auto) minmax(var(--menu-group-gap),1fr) auto minmax(var(--menu-group-gap),1fr) auto}
 .field-header #main-nav.open>:is(.nav-group,.bhutan-nav){grid-column:span 6}
 .field-header #main-nav.open>.nav-top-last-odd{grid-column:1/-1}
 .field-header #main-nav.open>.nav-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
 .field-header #main-nav.open .nav-actions>.nav-contact{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){.field-header #main-nav.open .field-menu,.field-header #main-nav.open .nav-group>button>span{transition:none!important}}
html.reduce-motion .field-header #main-nav.open .field-menu,html.reduce-motion .field-header #main-nav.open .nav-group>button>span{transition:none!important}
/* Tablets: keep the five dock items together in the middle instead of spread across the full width. */
@media(min-width:600.02px) and (max-width:1279.98px){
 .mobile-dock{padding-inline:max(6px,calc((100% - 600px)/2))}
}
/* 1280-1599px: the full desktop row, including a staff "Studio" link, is tightened so nothing is pushed
   past the right edge (at 1280 with a scrollbar it needs ~180px more than the original spacing). */
@media(min-width:1280px) and (max-width:1599.98px){
 .header.field-header{padding-inline:clamp(20px,2vw,40px);gap:14px}
 .field-header #main-nav{gap:7px}
 .field-header .nav-group>button.nav-boxed,.field-header .bhutan-nav{padding:7px 9px!important;font-size:12.5px}
 .field-header .account-link{padding-left:10px!important}
 .field-header .nav-plan{padding:9px 12px;gap:10px}
 .field-header .nav-auth{gap:8px}
}
/* Long header dropdowns (e.g. many ranges or stays) scroll inside the menu instead of running off the
   screen. Desktop: the open menu is capped to the space below the header. App view: navigation.js sizes
   an open accordion section to its full content (--nav-menu-height) and the whole sheet scrolls; the
   overflow below is only a safety net if a section grows after it was measured; it must not trap the
   swipe (overscroll-behavior:auto), or the sheet cannot scroll the last items out from under the footer. */
@media(min-width:1280px){
 .field-header .nav-group>.field-menu{max-height:calc(100vh - var(--nav-height,88px) - 32px);max-height:calc(100dvh - var(--nav-height,88px) - 32px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--forest) transparent}
 .field-header .nav-group>.field-menu::-webkit-scrollbar{width:6px}
 .field-header .nav-group>.field-menu::-webkit-scrollbar-thumb{background:var(--forest);border-radius:3px}
}
@media(max-width:1279.98px){
 .field-header #main-nav.open>.nav-group.open>.field-menu{overflow-y:auto;overscroll-behavior:auto}
}
/* "Explore <park>" row at the top of each park menu: a framed row with room around its text; filled when
   it is the current page or under the pointer, like the site's hard-shadow buttons. */
.field-header #main-nav .field-menu .menu-all{align-items:center;margin:0 0 8px;padding:12px 14px;border:1px solid var(--forest);border-radius:2px;background:transparent;font:600 13px/1.2 var(--body);letter-spacing:.02em;transition:background .25s,color .25s,box-shadow .25s}
.field-header #main-nav .field-menu .menu-all:hover,.field-header #main-nav .field-menu .menu-all:focus-visible{background:var(--forest);color:var(--cream);box-shadow:3px 3px 0 var(--orange)}
.field-header #main-nav .field-menu .menu-all[aria-current=page]{background:var(--forest);color:var(--cream);font-weight:700;padding:12px 14px;border-radius:2px;box-shadow:3px 3px 0 var(--orange)}
.field-header #main-nav.open .field-menu .menu-all{min-height:48px;padding:0 14px;font:600 15px/1.2 var(--body)}
/* Logo tagline words are separate links (stays, safaris, stories). */
.brand-home{display:block;line-height:0}
.brand-links a{color:inherit;text-decoration:none;transition:color .2s}
.brand-links a:hover,.brand-links a:focus-visible{color:var(--orange)}
/* While the photo viewer is open, the page behind it stays still. */
html:has(dialog.gallery-dialog[open]),html:has(dialog.gallery-dialog[open]) body{overflow:hidden}
dialog.gallery-dialog{overscroll-behavior:contain}
/* Footer invitation ("Your next great story 
︎" and the compass): sized and framed to sit with the rest of the
   footer. A calmer heading, the arrow in the site's orange arrow square, and a flat compass with the site's hard
   offset shadow placed beside the heading instead of floating at the far edge. */
.field-footer .footer-invitation{grid-template-columns:auto auto;justify-content:space-between;align-items:center;gap:clamp(24px,5vw,72px);padding:clamp(28px,4vw,48px) 0 clamp(14px,2vw,24px)}
.field-footer .footer-heading{font-size:clamp(46px,6.4vw,104px);line-height:.96;letter-spacing:-.055em}
.field-footer .footer-heading i{display:inline-grid;place-items:center;width:.72em;height:.72em;margin-left:.22em;vertical-align:.04em;border:1.5px solid var(--forest);border-radius:2px;background:transparent;color:var(--forest);box-shadow:3px 3px 0 #1b2a1e40;font-size:.6em;line-height:1;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1),background .3s,color .3s}
/* The arrow is drawn as an SVG, so it sits centred in its box on every device (a font arrow fell back
   to a differently sized system glyph on iPhones). */
.field-footer .footer-heading i svg{display:block;width:62%;height:62%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.field-footer .footer-heading:hover i{transform:translate(-2px,-2px);background:var(--forest);color:var(--sage);box-shadow:5px 5px 0 #1b2a1e40}
.field-footer .footer-compass{width:clamp(120px,12vw,168px);padding:0 8px 8px 0;perspective:none}
.field-footer .compass-disc{transform:none;box-shadow:6px 6px 0 var(--forest);transition:transform .9s cubic-bezier(.22,1,.36,1)}
.field-footer .footer-compass:hover .compass-disc{transform:rotate(24deg)}
@media(max-width:760px){.field-footer .footer-invitation{grid-template-columns:1fr}.field-footer .footer-heading{font-size:clamp(40px,13vw,64px)}}
/* Book now traveller menu (static/js/book-choice.js): framed rows with the site's hard offset shadow; a sheet at
   the bottom of the screen on phones. */
.bc-menu{position:fixed;z-index:120;width:min(360px,calc(100vw - 24px));padding:16px;border:1px solid var(--forest);border-radius:3px;background:var(--cream);color:var(--forest);box-shadow:6px 6px 0 var(--forest),0 24px 60px -20px #1b2a1e66;animation:bc-in .25s cubic-bezier(.22,1,.36,1) both}
.bc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.bc-title{margin:0;font:600 18px/1.2 var(--display);letter-spacing:-.01em}
.bc-close{display:grid;place-items:center;width:32px;height:32px;min-height:0;padding:0;border:1px solid #1b2a1e33;border-radius:2px;background:transparent;color:var(--forest);cursor:pointer}
.bc-menu.is-sheet .bc-option{padding:16px}
.bc-option{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px;padding:14px;border:1px solid var(--forest);border-radius:2px;background:var(--cream);color:var(--forest);text-decoration:none;box-shadow:3px 3px 0 #1b2a1e33;transition:translate .25s,box-shadow .25s,background .25s}
.bc-option span{display:grid;gap:3px}
.bc-option b{font:600 16px/1.2 var(--display)}
.bc-option small{color:var(--muted);font-size:12.5px;line-height:1.35}
.bc-option i{font-style:normal;font-size:18px;transition:transform .25s}
.bc-option:hover,.bc-option:focus-visible{translate:-2px -2px;background:#fff;box-shadow:5px 5px 0 var(--orange);outline:none}
.bc-option:hover i,.bc-option:focus-visible i{transform:translateX(3px)}
.bc-hint{margin:12px 0 0;color:var(--muted);font-size:12px;line-height:1.4}
.bc-menu.is-sheet{left:50%;top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(380px,calc(100vw - 32px));padding:20px 18px;border:1px solid var(--forest);border-radius:14px;box-shadow:6px 6px 0 var(--forest),0 30px 70px -20px #1b2a1e80;transform:translateX(-50%);animation-name:bc-pop}
body.has-mobile-dock .bc-menu.is-sheet{bottom:calc(var(--dock-height,78px) + 16px + env(safe-area-inset-bottom,0px))}
/* While the menu is open: the page behind is dimmed and slightly blurred, does not scroll, and the floating
   Book now / price bar is hidden. Closing the menu restores everything. */
html.bc-open body{position:fixed;left:0;right:0;top:var(--bc-lock,0px);overflow:hidden}
html.bc-open body::after{content:"";position:fixed;inset:0;z-index:119;background:#1b2a1e59;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
/* Only the floating Book now pill of the range and stay heroes hides; other Book now buttons stay as they are. */
html.bc-open .dh-pricebar .dh-cta,html.bc-open .dh-pricebar{visibility:hidden;opacity:0;pointer-events:none}
@keyframes bc-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes bc-pop{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.bc-menu{animation:none}}
html.reduce-motion .bc-menu{animation:none}
/* Phones: a compact menu card (smaller padding and type, notes kept to one line). */
.bc-menu.is-sheet{width:min(320px,calc(100vw - 40px));padding:14px 14px 12px;border-radius:12px;box-shadow:4px 4px 0 var(--forest),0 20px 50px -18px #1b2a1e80}
.bc-menu.is-sheet .bc-head{margin-bottom:4px}
.bc-menu.is-sheet .bc-title{font-size:15px}
.bc-menu.is-sheet .bc-close{width:28px;height:28px;font-size:12px}
.bc-menu.is-sheet .bc-option{margin-top:8px;padding:10px 12px;gap:10px;box-shadow:2px 2px 0 #1b2a1e33}
.bc-menu.is-sheet .bc-option b{font-size:14px}
.bc-menu.is-sheet .bc-option small{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-menu.is-sheet .bc-option span{min-width:0}
.bc-menu.is-sheet .bc-option i{font-size:15px}
.bc-menu.is-sheet .bc-hint{margin-top:8px;font-size:10.5px}
/* Footer without the empty band below it (footer-aside.js): the floating buttons fade and slide away while the
   footer's last row is on screen, so the footer keeps only normal spacing. An open chat window is left alone. */
footer.field-footer{padding-bottom:40px}
@media(max-width:1279.98px){
  body.has-mobile-dock footer.field-footer{padding-bottom:calc(40px + var(--dock-height,78px) + 24px)}
  body.has-mobile-dock.cookie-notice-visible footer.field-footer{padding-bottom:calc(40px + var(--cookie-notice-height,0px) + var(--dock-height,78px) + 25px)}
}
html body.pricebar-pad footer.field-footer::after{content:none}
html.footer-reached:not(:has(#chat-toggle[aria-expanded="true"])) :is(.scroll-top,#chat-toggle,.chat-greeting,.whatsapp-contact,.dh-pricebar){animation:fa-away .3s cubic-bezier(.22,1,.36,1) forwards;pointer-events:none}
@keyframes fa-away{to{opacity:0;translate:0 18px;visibility:hidden}}
@media(prefers-reduced-motion:reduce){html.footer-reached:not(:has(#chat-toggle[aria-expanded="true"])) :is(.scroll-top,#chat-toggle,.chat-greeting,.whatsapp-contact,.dh-pricebar){animation-duration:.01s}}
/* Phone / tablet menu, livelier: the sheet slides in from the right, its rows follow one after another, the
   destination buttons carry the site's hard offset shadow and press in when tapped, and WhatsApp is an icon pill. */
@media(max-width:1279.98px){
  .field-header #main-nav.open{animation:nav-sheet-in .45s cubic-bezier(.22,1,.36,1) both}
  .field-header #main-nav.open.nav-closing{animation:nav-sheet-out .3s cubic-bezier(.4,0,.6,1) both}
  .field-header #main-nav.open.nav-closing>*{animation:none}
  .field-header #main-nav.open>*{animation:nav-row-in .55s cubic-bezier(.22,1,.36,1) both}
  .field-header #main-nav.open>:nth-child(1){animation-delay:.08s}.field-header #main-nav.open>:nth-child(2){animation-delay:.13s}
  .field-header #main-nav.open>:nth-child(3){animation-delay:.18s}.field-header #main-nav.open>:nth-child(4){animation-delay:.23s}
  .field-header #main-nav.open>:nth-child(5){animation-delay:.28s}.field-header #main-nav.open>:nth-child(6){animation-delay:.33s}
  .field-header #main-nav.open>:nth-child(7){animation-delay:.38s}.field-header #main-nav.open>:nth-child(8){animation-delay:.43s}
  .field-header #main-nav.open>:nth-child(n+9){animation-delay:.48s}
  .field-header #main-nav.open>.nav-group>button.nav-boxed,.field-header #main-nav.open>.bhutan-nav{box-shadow:4px 4px 0 var(--forest);transition:translate .2s ease,box-shadow .2s ease,background .25s ease}
  .field-header #main-nav.open>.nav-group>button.nav-boxed:active,.field-header #main-nav.open>.bhutan-nav:active{translate:3px 3px;box-shadow:1px 1px 0 var(--forest)}
  .field-header #main-nav.open>.nav-group.open>button.nav-boxed{box-shadow:4px 4px 0 var(--orange)}
  .field-header #main-nav.open>.nav-group.open>.field-menu a{animation:nav-row-in .45s cubic-bezier(.22,1,.36,1) both}
  .field-header #main-nav.open>.nav-group.open>.field-menu a:nth-of-type(2){animation-delay:.05s}.field-header #main-nav.open>.nav-group.open>.field-menu a:nth-of-type(3){animation-delay:.1s}
  .field-header #main-nav.open>.nav-group.open>.field-menu a:nth-of-type(4){animation-delay:.15s}.field-header #main-nav.open>.nav-group.open>.field-menu a:nth-of-type(n+5){animation-delay:.2s}
  .field-header #main-nav.open>:is(.nav-compact,.account-link){transition:background .25s ease,color .25s ease,translate .2s ease}
  .field-header #main-nav.open>:is(.nav-compact,.account-link):active{translate:0 2px;background:var(--forest);color:var(--cream)}
  .field-header #main-nav.open .nav-contact a.nav-wa{gap:10px;padding:0 16px;min-height:44px;border:1px solid var(--forest);border-radius:2px;background:var(--cream);color:var(--forest);text-decoration:none;font:600 14px/1 var(--body);box-shadow:3px 3px 0 var(--forest);transition:translate .2s ease,box-shadow .2s ease}
  .field-header #main-nav.open .nav-contact a.nav-wa .nav-wa-icon{width:22px;height:22px;flex:none}
  .field-header #main-nav.open .nav-contact a.nav-wa:active{translate:2px 2px;box-shadow:1px 1px 0 var(--forest)}
}
/* Top-to-bottom reveal on open, the reverse on close (nav-reveal.js). */
@keyframes nav-sheet-in{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes nav-sheet-out{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes nav-row-in{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.field-header #main-nav.open,.field-header #main-nav.open>*,.field-header #main-nav.open .field-menu a{animation:none!important}}
html.reduce-motion .field-header #main-nav.open,html.reduce-motion .field-header #main-nav.open>*,html.reduce-motion .field-header #main-nav.open .field-menu a{animation:none!important}
/* Footer links: no underline on hover (they keep their colour change and small nudge). */
.field-footer .footer-grid a:hover{text-decoration:none}
/* App view: the footer's last row (copyright and Terms / Privacy / Cookie choices / Reduce motion) sits centred. */
@media(max-width:850px){.field-footer .footer-bottom{align-items:center;text-align:center}.field-footer .footer-bottom>div{justify-content:center}}