/* "At a glance" panel in range and stay heroes (partials/detail_glance.html): framed fact boxes with the site's
   hard offset shadow, plus highlight chips. Over the desktop photo hero the boxes are smoked glass; in the app
   view's title band they are cream. Boxes arrive one after another. */
.dg-glance{margin-top:clamp(16px,2.4vh,26px)}
.dg-boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;max-width:760px;padding:0 6px 6px 0}
.dg-box{display:grid;align-content:start;gap:4px;padding:12px 14px;border:1px solid var(--forest);border-radius:2px;background:var(--cream);color:var(--forest);box-shadow:4px 4px 0 var(--forest);animation:dg-rise .8s cubic-bezier(.22,1,.36,1) both}
.dg-box:nth-child(2){animation-delay:.08s}.dg-box:nth-child(3){animation-delay:.16s}.dg-box:nth-child(4){animation-delay:.24s}
.dg-box.dg-price{box-shadow:4px 4px 0 var(--orange)}
.dg-box small{color:var(--green);font:600 10px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase}
.dg-box b{font:600 clamp(15px,1.25vw,18px)/1.2 var(--display);letter-spacing:-.01em}
.dg-box.dg-price b{font-size:clamp(20px,1.8vw,26px)}
.dg-box span{font-size:12px;line-height:1.35;opacity:.8}
.dg-times b{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.dg-times b i{font-style:normal;font-weight:500;opacity:.85;white-space:nowrap}
/* Package pages: one trip time, allowed to wrap so it always stays inside its box. */
.dg-times.is-package b{display:block;overflow-wrap:anywhere}
.dg-box.dg-times.is-package{min-width:0}
.dg-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.dg-chips li{padding:6px 12px;border:1px solid currentColor;border-radius:2px;font:600 12px/1.2 var(--body);letter-spacing:.04em;animation:dg-rise .8s cubic-bezier(.22,1,.36,1) .3s both}
@keyframes dg-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* Desktop photo hero: smoked-glass boxes over the picture. */
.dh-copy .dg-box{border-color:#fcf9f280;background:#1b2a1e99;color:var(--cream);box-shadow:4px 4px 0 #fcf9f24d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dh-copy .dg-box.dg-price{box-shadow:4px 4px 0 var(--orange)}
.dh-copy .dg-box small{color:var(--gold,#e6cf95)}
.dh-copy .dg-chips{color:var(--cream)}
/* Manas package ranges: the package selector under the boxes (each package is its own page address), framed like
   the boxes, the current one stamped orange. */
.dg-packages{display:flex;flex-wrap:wrap;gap:10px;max-width:760px;margin:14px 0 0;padding:0 6px 6px 0}
.dg-package{flex:1 1 150px;display:grid;gap:3px;padding:10px 14px;border:1px solid var(--forest);border-radius:2px;background:var(--cream);color:var(--forest);box-shadow:3px 3px 0 var(--forest);text-decoration:none;transition:translate .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1)}
.dg-glance .dg-packages a.dg-package,.dg-glance .dg-packages a.dg-package:hover{text-decoration:none}
.dg-package b{font:600 15px/1.2 var(--display);letter-spacing:-.01em}
.dg-package span{font-size:12px;line-height:1.35;opacity:.8}
.dg-package:hover{translate:-2px -2px;box-shadow:5px 5px 0 var(--orange)}
.dg-package.is-current{background:var(--orange);border-color:var(--forest);color:var(--forest);box-shadow:3px 3px 0 var(--forest)}
.dg-package:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
/* Over the desktop photo hero the other packages stay cream with dark text, as in the app view, so the orange one stands out. */
.dh-copy .dg-package{border-color:var(--forest);background:#f4efe4;color:var(--forest);box-shadow:3px 3px 0 var(--forest)}
.dh-copy .dg-package.is-current{background:var(--orange);border-color:var(--forest);color:var(--forest);box-shadow:3px 3px 0 var(--forest)}
@media(max-width:560px){.dg-packages{gap:8px}.dg-package{flex-basis:100%;padding:9px 12px}}
/* The selected package's own content block on the range page. */
.dp-package{margin:0 0 clamp(28px,4vw,44px)}
.dp-package h2{margin:.2em 0 .5em}
.dp-package h3{margin:1.2em 0 .5em;font:600 16px/1.3 var(--display)}
/* Package itinerary: circuit buttons above the range roadmap (the same .dp-steps timeline as Kaziranga ranges). */
.dp-itin-lede{margin:0 0 14px;color:var(--muted)}
.dp-circuit-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.dp-circuit-tabs button{padding:8px 14px;border:1px solid var(--forest);border-radius:2px;background:#f4efe4;color:var(--forest);font:600 13px/1.2 var(--body);cursor:pointer}
.dp-circuit-tabs button[aria-selected="true"]{background:var(--orange)}
.dp-circuit-name{margin:4px 0 0;font:600 16px/1.3 var(--display)}
/* The itinerary row loops by itself when it is wider than the screen, so its steps and joining line are always shown. */
.dp-package-itinerary .dp-step::after{background:var(--sand)}
/* While it loops (glide-rows.js adds .is-gliding only when the row overflows): no snapping, no scrollbar, and the
   steps shift together by --glide-x, exactly like the card rows, so autoplay and swipes stay smooth. */
.pk-stops.is-gliding{scroll-snap-type:none;scroll-behavior:auto;scrollbar-width:none}
.pk-stops.is-gliding::-webkit-scrollbar{display:none}
.pk-stops.is-gliding>*{scroll-snap-align:none;translate:calc(var(--glide-x,0px) * -1) 0;will-change:translate}
/* A package being switched in place fades slightly until its content arrives. */
.package-loading .dg-glance,.package-loading [data-package-content]{opacity:.55;transition:opacity .2s ease}
/* Phones: the range page reorders its sections; package sections sit with the roadmap, after the price box. */
@media(max-width:850px){.dp-flow .dp-package{order:4}}
/* Road roadmaps (range roadmaps and Manas package itineraries): postcards alternate above and below a two-lane road (each joined to its numbered pin by a
   stem) and a jeep drives along it (package-itinerary.js). Each stop draws its own stretch of road, so the road stays
   continuous when the row loops. Phones: a vertical list of the same postcards on a line, without road or jeep. */
.pk-route{position:relative}
.pk-stops{list-style:none;margin:18px 0 0;padding:0}
.pk-stop{padding:0;opacity:1;transform:none}
.pk-stop::before,.pk-stop::after{content:none}
.pk-card{border:1px solid var(--forest);background:#fffdf8;box-shadow:5px 5px 0 var(--forest);transition:translate .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1)}
.pk-stop.is-first .pk-card{box-shadow:5px 5px 0 var(--orange)}
.pk-card:hover{translate:-3px -3px;box-shadow:8px 8px 0 var(--orange)}
.pk-photo{display:block;aspect-ratio:16/10;overflow:hidden;background:#e9dfcd}
.pk-photo img{display:block;width:100%;height:100%;object-fit:cover}
.pk-num{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#f1e9da 0 8px,#ece2cf 8px 16px)}
.pk-num b{font:600 clamp(30px,3vw,38px)/1 var(--display);color:transparent;-webkit-text-stroke:1.2px #b08a52}
.pk-body{padding:12px 14px 14px}
.pk-body .dp-step-time{margin:0 0 4px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.pk-body h3{margin:0 0 4px;font-size:17px}
.pk-body p:not(.dp-step-time){font-size:14px}
.pk-stem,.pk-road,.pk-car,.pk-start,.pk-end{display:none}
/* The road replaces the old roadmap's line and dots, on every screen size. */
.pk-stops::before,.pk-stops::after{content:none;display:none}
@media(min-width:851px){
  .pk-stops{display:flex;gap:0;overflow-x:auto;scrollbar-width:thin;padding:0 0 10px}
  .pk-stop{flex:0 0 clamp(220px,24%,260px);display:grid;gap:0;align-items:stretch;grid-template-rows:1fr 18px 56px 18px 1fr;padding:0 10px}
  .pk-stop.is-up .pk-card{grid-row:1;align-self:end}
  .pk-stop.is-down .pk-card{grid-row:5;align-self:start}
  .pk-stem{display:block;justify-self:center;align-self:stretch;width:2px;background:repeating-linear-gradient(var(--forest) 0 4px,transparent 4px 7px)}
  .pk-stop.is-up .pk-stem{grid-row:2;margin-bottom:-12px}
  .pk-stop.is-down .pk-stem{grid-row:4;margin-top:-12px}
  .pk-road{display:block;grid-row:3;position:relative;margin:0 -10px}
  .pk-road svg.pk-road-h{display:block;width:100%;height:56px;overflow:visible}
  .pk-road svg.pk-road-v{display:none}
  .pk-road path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:butt}
  .pk-road-edge{stroke:#c9a46a;stroke-width:20px;opacity:.3}
  .pk-road-lane{stroke:var(--sand);stroke-width:14px}
  .pk-road-line{stroke:var(--cream);stroke-width:1.5px;stroke-dasharray:9 8}
  .pk-pin{position:absolute;left:50%;width:22px;height:22px;margin-left:-11px;border:2px solid var(--forest);border-radius:50%;background:var(--cream);font:700 11px/18px var(--body);text-align:center;color:var(--forest)}
  .pk-stop.is-up .pk-pin{top:1px}
  .pk-stop.is-down .pk-pin{top:33px}
  .pk-stop.is-first .pk-pin{background:var(--orange)}
  .pk-car{display:block;position:absolute;left:0;top:0;width:38px;height:19px;margin:-15px 0 0 -19px;pointer-events:none;z-index:3;will-change:transform;opacity:0;transition:opacity .4s}
  .pk-car.is-driving{opacity:1}
  .pk-car svg{display:block;width:100%;height:100%}
}
@media(max-width:850px){
  /* Phones: a roadmap. The road winds down the left from a wooden park gate (start) to a compass medallion (end); each
     stop's numbered pin sits on the road where it bends, joined by a dashed branch to a slim stop tile; the safari jeep
     drives down the road (road-roadmap.js). */
  .pk-route{padding:58px 0 64px}
  .pk-stops{display:grid;gap:0;padding:0;margin:0}
  .pk-stop{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:0;padding:0}
  .pk-road{display:block;position:relative;grid-column:1;grid-row:1;align-self:stretch}
  .pk-road svg.pk-road-v{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .pk-road svg.pk-road-h{display:none}
  .pk-road path{fill:none;vector-effect:non-scaling-stroke}
  .pk-road-edge{stroke:#c9a46a;stroke-width:20px;opacity:.3}
  .pk-road-lane{stroke:var(--sand);stroke-width:14px}
  .pk-road-line{stroke:var(--cream);stroke-width:1.5px;stroke-dasharray:9 8}
  .pk-pin{position:absolute;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border:2px solid var(--forest);border-radius:50%;background:var(--cream);font:700 11px/18px var(--body);text-align:center;color:var(--forest);z-index:1}
  .pk-stop.is-up .pk-pin{left:14px}
  .pk-stop.is-down .pk-pin{left:42px}
  .pk-stop.is-first .pk-pin{background:var(--orange)}
  .pk-stem{display:block;position:absolute;top:50%;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,var(--forest) 0 4px,transparent 4px 7px)}
  .pk-stop.is-up .pk-stem{left:25px;width:45px}
  .pk-stop.is-down .pk-stem{left:53px;width:17px}
  .pk-card{grid-column:2;grid-row:1;display:flex;align-items:center;gap:10px;margin:10px 0 10px 14px;padding:8px;box-shadow:4px 4px 0 var(--forest)}
  .pk-stop.is-first .pk-card{box-shadow:4px 4px 0 var(--orange)}
  .pk-photo{flex:none;width:58px;height:58px;aspect-ratio:auto;border-radius:10px}
  .pk-num b{font-size:18px}
  .pk-body{padding:0;min-width:0}
  .pk-body .dp-step-time{font-size:9.5px;letter-spacing:.14em;margin:0 0 2px}
  .pk-body h3{font-size:15px;margin:0 0 2px}
  .pk-body p:not(.dp-step-time){font-size:12px;line-height:1.4;margin:0}
  .pk-start{display:block;position:absolute;left:-12px;top:8px;width:80px;height:52px;pointer-events:none}
  .pk-start svg,.pk-end svg{display:block;width:100%;height:100%}
  .pk-end{display:block;position:absolute;left:17.5px;bottom:8px;width:92px;height:56px;pointer-events:none}
  .pk-car{display:block;position:absolute;left:0;top:0;width:32px;height:16px;margin:-8px 0 0 -16px;pointer-events:none;z-index:3;will-change:transform;opacity:0;transition:opacity .25s}
  .pk-car.is-driving{opacity:1}
  .pk-car svg{display:block;width:100%;height:100%}
}
/* Compare: one card per package, side by side (stacked on phones); the package being viewed is stamped orange. */
.dp-package h2{margin-bottom:clamp(16px,2.4vw,24px)}
.dp-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(14px,2vw,22px);padding:0 6px 6px 0}
.dp-compare-card{display:flex;flex-direction:column;gap:14px;padding:clamp(16px,2vw,22px);border:1px solid var(--forest);border-radius:3px;background:var(--cream);box-shadow:5px 5px 0 var(--forest)}
.dp-compare-card.is-current{box-shadow:5px 5px 0 var(--orange)}
/* The whole card selects its package: the card's link covers the card. */
.dp-compare-card{position:relative;transition:translate .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1)}
.dp-compare-card:not(.is-current):has(a[data-package-link]){cursor:pointer}
.dp-compare-card a[data-package-link]::after{content:"";position:absolute;inset:0;z-index:1}
.dp-compare-card:not(.is-current):hover{translate:-3px -3px;box-shadow:8px 8px 0 var(--orange)}
.dp-compare-card:has(a[data-package-link]:focus-visible){outline:3px solid var(--orange);outline-offset:4px}
.dp-compare-card header{display:grid;gap:4px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.dp-compare-card h3{margin:0;font:600 clamp(18px,1.6vw,21px)/1.2 var(--display);letter-spacing:-.01em}
.dp-compare-card header p{margin:0;color:var(--muted);font-size:14px}
.dp-compare-badge{justify-self:start;margin-top:4px;padding:3px 10px;border-radius:2px;background:var(--orange);font:600 11px/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase}
.dp-compare-card dl{display:grid;gap:12px;margin:0}
.dp-compare-card dt{color:var(--green);font:600 10px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase}
.dp-compare-card dd{margin:4px 0 0;font-size:15px;line-height:1.5}
.dp-compare-card footer{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.dp-compare-price{display:grid;gap:2px;margin:0}
.dp-compare-price small{color:var(--green);font:600 10px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase}
.dp-compare-price b{font:600 clamp(22px,2vw,26px)/1.1 var(--display)}
/* Wildlife: airy tiles with the animal's photo, or its initial in a ring when no photo is set yet. */
.dp-wildlife{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.dp-wild{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:3px;background:#fffdf8;transition:border-color .3s ease,translate .3s ease}
.dp-wild:hover{border-color:var(--sand);translate:0 -2px}
.dp-wild-mark{flex:none;display:grid;place-items:center;width:46px;height:46px;border:2px solid var(--sand);border-radius:50%;color:var(--forest);font:600 18px/1 var(--display)}
.dp-wild-photo{flex:none;width:64px;height:64px;overflow:hidden;border-radius:50%;border:2px solid var(--sand);background:var(--line)}
.dp-wild-photo picture,.dp-wild-photo img{display:block;width:100%;height:100%}
.dp-wild-photo img{width:100%;height:100%;object-fit:cover}
.dp-wild div{display:grid;gap:3px;min-width:0}
.dp-wild b{font:600 16px/1.3 var(--display)}
.dp-wild span{color:var(--muted);font-size:13.5px;line-height:1.45}
.dp-wild-note{margin:14px 0 0;color:var(--muted);font-size:13px}
/* Quick answers: spaced, framed questions that open with a rotating plus. */
.dp-answers{display:grid;gap:12px}
.dp-answer{border:1px solid var(--line);border-radius:3px;background:#fffdf8;transition:border-color .3s ease}
.dp-answer[open]{border-color:var(--forest);box-shadow:4px 4px 0 var(--orange)}
.dp-answer summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;cursor:pointer;list-style:none;font:600 16px/1.35 var(--display)}
.dp-answer summary::-webkit-details-marker{display:none}
.dp-answer summary i{position:relative;flex:none;width:14px;height:14px;transition:rotate .3s ease}
.dp-answer summary i::before,.dp-answer summary i::after{content:"";position:absolute;inset:6px 0 auto;height:2px;background:var(--forest)}
.dp-answer summary i::after{rotate:90deg}
.dp-answer[open] summary i{rotate:45deg}
.dp-answer p{margin:0;padding:0 18px 18px;color:var(--muted);line-height:1.6}
/* App view title band (below 1280px). */
.dg-intro{margin-top:4px}
@media(max-width:560px){.dg-boxes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.dg-box{padding:10px 12px}.dg-times{grid-column:1 / -1}}
@media(prefers-reduced-motion:reduce){.dg-box,.dg-chips li{animation:none}}
html.reduce-motion .dg-box,html.reduce-motion .dg-chips li{animation:none}
/* "What makes it different" on range pages: numbered, framed tiles with a hard offset shadow instead of rounded
   tinted cards. The number is a large outlined numeral; tiles lift into an orange stamp on hover. */
.dp-highlights .tags{counter-reset:dg-high;gap:16px;padding:0 8px 8px 0}
.dp-highlights .tags span{counter-increment:dg-high;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;min-height:64px;padding:14px 16px;border:1px solid var(--forest);border-radius:3px;background:var(--cream);box-shadow:5px 5px 0 var(--forest);font:600 16px/1.3 var(--display);letter-spacing:-.01em;color:var(--forest);transition:translate .35s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1)}
.dp-highlights .tags span:nth-child(even){box-shadow:5px 5px 0 var(--orange)}
/* A small sparkle marks each highlight (it replaced the outlined 01 / 02 / 03 numbers). */
.dp-highlights .tags span::before{content:"\2728";position:static;width:auto;height:auto;margin:0;border-radius:0;background:none;transform:none;color:var(--orange);-webkit-text-stroke:0;font:400 20px/1 var(--body);letter-spacing:0}
/* Amenity ticks in the brand orange. */
.amenities li:before{color:#E6A156}
.dp-highlights .tags span:hover{translate:-3px -3px;box-shadow:8px 8px 0 var(--orange)}
/* "More to explore nearby" on wide screens: three or fewer cards keep the three-column grid; with more, the row
   shows three at a time as a scrolling row, so glide-rows.js moves it automatically as it does on phones. */
@media(min-width:1100px){
  .dp-cards:has(>.experience-card:nth-child(4)){display:flex;overflow-x:auto;scroll-snap-type:x mandatory}
  .dp-cards.is-gliding:has(>.experience-card:nth-child(4)){scroll-snap-type:none;scroll-behavior:auto}
  .dp-cards:has(>.experience-card:nth-child(4))>.experience-card{flex:0 0 calc((100% - 2*clamp(14px,2vw,24px))/3)}
}
/* App view (below 1280px): the title band and the photo/slider are one hero. The picture fills the hero as its
   background and the title, description and at-a-glance boxes sit on top of it, over a deep fade at the bottom,
   as in the desktop hero. The hero fills the first screen (above the bottom bar where shown). */
@media(max-width:1279.98px){
  .dg-hero{display:grid;min-height:calc(100svh - var(--nav-height,88px));background:var(--forest)}
  .dg-hero>.page-intro,.dg-hero>.detail-cover{grid-area:1 / 1;min-width:0}
  .dg-hero>.detail-cover{position:relative;z-index:0;height:auto;max-height:none;margin:0}
  .dg-hero>.detail-cover>.visual-media,.dg-hero .ds-host,.dg-hero .ds-cover{height:100%;max-height:none;aspect-ratio:auto}
  .dg-hero>.detail-cover>.visual-media>img,.dg-hero>.detail-cover>.visual-media>video{width:100%;height:100%;max-height:none;object-fit:cover}
  .dg-hero>.page-intro{position:relative;z-index:1;align-self:end;margin:0;padding-top:clamp(140px,26svh,260px);background:linear-gradient(180deg,#1b2a1e00 0%,#1b2a1ea6 34%,#1b2a1ef0 70%);color:var(--cream);pointer-events:none}
  .dg-hero>.page-intro>*{pointer-events:auto}
  .dg-hero>.page-intro h1,.dg-hero>.page-intro .lead{color:var(--cream)}
  .dg-hero>.page-intro .eyebrow,.dg-hero>.page-intro .breadcrumb{color:var(--gold,#e6cf95)}
  .dg-hero>.page-intro .dg-box{border-color:#fcf9f280;background:#1b2a1e99;color:var(--cream);box-shadow:4px 4px 0 #fcf9f24d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .dg-hero>.page-intro .dg-box.dg-price{box-shadow:4px 4px 0 var(--orange)}
  .dg-hero>.page-intro .dg-box small{color:var(--gold,#e6cf95)}
  .dg-hero>.page-intro .dg-chips{color:var(--cream)}
}
@media(max-width:1099px){.dg-hero{min-height:calc(100svh - var(--nav-height,88px) - 76px)}}
/* Keep the hero's last row clear of the floating Book now / Enquiry button in the app view. */
@media(max-width:1279.98px){body:has(.dh-hero) .dg-hero>.page-intro{padding-top:clamp(140px,26svh,260px);padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}}
/* App view: the hero's text starts at the top of the picture (under a dark top-down fade) and the hero grows to
   fit it, so nothing is clipped or hidden behind the floating Book now / Enquiry button on short screens. */
@media(max-width:1279.98px){
  body:has(.dh-hero) .dg-hero>.page-intro{align-self:start;padding-top:clamp(20px,4svh,40px);background:linear-gradient(180deg,#1b2a1ef2 0%,#1b2a1ecc 55%,#1b2a1e8c 80%,#1b2a1e33 100%)}
}
/* Calmer hero in the app view: two highlight chips, lighter boxes and more breathing room. */
@media(max-width:1279.98px){
  .dg-hero .dg-glance{margin-top:14px}
  .dg-hero .dg-boxes{gap:10px}
  .dg-hero .dg-box{padding:10px 12px;gap:2px}
  .dg-hero .dg-box span{display:none}
  .dg-hero .dg-box.dg-price b{font-size:20px}
  .dg-hero .dg-chips{margin-top:12px}
  .dg-hero .dg-chips li:nth-child(n+3){display:none}
  .dg-hero .dg-chips li{padding:5px 10px;font-size:11px}
  body:has(.dh-hero) .dg-hero>.page-intro h1{margin-bottom:0}
}
/* Desktop hero: two chips keep the lower half calm; box notes (e.g. "Private open jeep, guide & permits") wrap so they show in full. */
@media(min-width:1280px){.dh-copy .dg-chips li:nth-child(n+3){display:none}.dh-copy .dg-box span{white-space:normal;overflow-wrap:break-word}}
/* While scrolling, the app-view hero stays fully readable: its text does not fade or drift and the picture is
   not darkened, so the visitor sees everything until the next section slides over it. */
@media(max-width:1279.98px){
  body:has(.dh-hero) .curtain-enabled .dg-hero .page-intro>*{opacity:1;transform:none}
  body:has(.dg-hero) .curtain-enabled>.curtain-hero:after{opacity:0}
  body:has(.dg-hero) .curtain-enabled>.curtain-hero{transform:none;border-radius:0}
}
/* Hero boxes as clear frosted glass (the photo shows through) instead of a dark green tint, all screen sizes. */
.dh-copy .dg-box,.dg-hero>.page-intro .dg-box{border-color:#fcf9f266;background:linear-gradient(135deg,#fcf9f22e,#fcf9f20f);color:var(--cream);box-shadow:0 10px 30px -12px #0000004d,inset 0 1px 0 #fcf9f240;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);text-shadow:0 1px 8px #0006}
.dh-copy .dg-box.dg-price,.dg-hero>.page-intro .dg-box.dg-price{border-color:#e6a15ccc;box-shadow:0 10px 30px -12px #0000004d,inset 0 1px 0 #fcf9f240,inset 3px 0 0 var(--orange)}
.dh-copy .dg-chips li,.dg-hero>.page-intro .dg-chips li{border-color:#fcf9f280;background:#fcf9f214;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:0 1px 6px #0006}
/* App view: the hero's content spreads over the whole screen. The title sits at the top and the boxes at the
   bottom above the Book now / Enquiry button, with the photo clear in between. Light fades only where text sits. */
@media(max-width:1279.98px){
  body:has(.dh-hero) .dg-hero>.page-intro{align-self:stretch;display:flex;flex-direction:column;background:linear-gradient(180deg,#1b2a1ed9 0%,#1b2a1e66 22%,#1b2a1e00 40%,#1b2a1e00 52%,#1b2a1e8c 78%,#1b2a1ed9 100%)}
  .dg-hero>.page-intro>.dg-intro{margin-top:auto;padding-top:24px}
  .dg-hero .dg-boxes{gap:12px}
}
/* Range price box: two short lines, the Indian and the foreign rate per jeep, each fully shown on every screen. */
.dg-box.dg-price b.dg-rate{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;white-space:nowrap}
.dg-box.dg-price b.dg-rate i{font:600 10px/1.2 var(--body);font-style:normal;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.dg-box.dg-price b.dg-rate.is-foreign,.dg-hero .dg-box.dg-price b.dg-rate.is-foreign{font-size:clamp(15px,1.25vw,18px)}
/* Manas package ranges: short line beside the price ("(1–5 guests)" / "(1–5 guests, same price)"). */
.dg-price .dg-hint{display:block;margin-top:2px;font-size:11.5px;opacity:.8}
/* Manas package ranges: two rows. Row 1: the Indian and the Foreign price box (1 guest – full jeep), half each, the
   price at its usual size; row 2: safari time, length and jeep, a third each. A lone Indian box takes the whole row.
   Phones: two columns (prices side by side, safari time on its own row, length and jeep together). */
.dg-boxes:has(.dg-price.has-range){grid-template-columns:repeat(6,minmax(0,1fr))}
.dg-boxes:has(.dg-price.has-range)>.dg-box{grid-column:span 2;padding:10px 14px;gap:2px}
.dg-boxes:has(.dg-price.has-range)>.dg-box.dg-price{grid-column:span 3}
.dg-boxes:has(.dg-price.has-range):not(:has(.dg-price.has-range+.dg-price.has-range))>.dg-box.dg-price{grid-column:1 / -1}
.dg-boxes:has(.dg-price.has-range)>.dg-box:not(.dg-price){align-content:center}
.dg-box.dg-price.has-range b.dg-rate{display:block;white-space:nowrap}
.dg-box.dg-price.has-range .dg-hint{margin-top:0}
.dg-hero .dg-box.dg-price.has-range .dg-hint{display:block}  /* phones hide box notes, but each range keeps its guests line */
@media(max-width:560px){
  .dg-boxes:has(.dg-price.has-range){grid-template-columns:repeat(2,minmax(0,1fr))}
  .dg-boxes:has(.dg-price.has-range)>.dg-box,.dg-boxes:has(.dg-price.has-range)>.dg-box.dg-price{grid-column:span 1}
  .dg-boxes:has(.dg-price.has-range)>.dg-times,.dg-boxes:has(.dg-price.has-range):not(:has(.dg-price.has-range+.dg-price.has-range))>.dg-box.dg-price{grid-column:1 / -1}
  .dg-box.dg-price.has-range b.dg-rate{white-space:normal}
}
.booking-note .price-hint{display:block;margin-top:2px}
/* Manas package ranges: the foreign price reads like the Indian one (same size, same small lines below). */
.booking-note h3.rate-range{margin-top:18px;font-size:32px}
.booking-note h3.rate-range small{display:block;font:13px/1.6 var(--body);letter-spacing:0;margin-top:10px}
.booking-note h3.rate-range small.price-hint{margin-top:2px}