/* ==========================================================================
   JimCorbett.org — Tiger Safari & Deep Jungle theme
   Plain CSS on purpose: works with both the Tailwind CDN and a compiled build.
   All motion uses transform/opacity only (GPU, no layout shift) and is
   disabled for users who prefer reduced motion.
   ========================================================================== */
:root {
  --forest: #0B2516; --forest-700: #123821; --forest-600: #1B4D2E;
  --tiger: #E67E22; --tiger-600: #D06E17; --tiger-300: #F6B97F;
  --charcoal: #1E1E1C; --sand: #F4EBDD; --sand-50: #FBF7F0; --sand-200: #E9DAC2;
  --radius: 1.25rem;
  --ease: cubic-bezier(.2,.8,.2,1);
  --bottom-nav-h: 64px;
}
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { body { padding-bottom: 0; } }
:focus-visible { outline: 3px solid var(--tiger); outline-offset: 2px; border-radius: 6px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--tiger); color: #fff; padding: .75rem 1rem; }
.skip-link:focus { left: 1rem; top: 1rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; } /* utility classes like .grid must never un-hide */
/* Grid/flex children default to min-width:auto, so a wide table or swipe row inside
   stretches the whole page on phones. Let them shrink; wide content scrolls inside its own box. */
.grid > *, .flex > :not(svg) { min-width: 0; }
img, svg, video { max-width: 100%; }
html, body { overflow-x: clip; }
.contents-wrap:not([hidden]) { display: contents; }

/* ---------- header ---------- */
.brand-logo { width: 46px; height: 46px; flex: none; border-radius: 999px; box-shadow: 0 6px 16px -6px rgba(0,0,0,.6); transition: transform .4s var(--ease), box-shadow .3s; }
a:hover > .brand-logo { transform: rotate(-8deg) scale(1.06); box-shadow: 0 8px 20px -6px rgba(0,0,0,.7); }
@media (max-width: 380px) { .brand-logo { width: 40px; height: 40px; } }
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(11,37,22,.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid rgba(255,255,255,.06); }
.nav-link { display: block; padding: .5rem .8rem; color: var(--sand-200); font-weight: 500; font-size: .92rem; border-radius: 999px; position: relative; transition: color .2s; }
.nav-link::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .25rem; height: 2px; background: repeating-linear-gradient(90deg, var(--tiger) 0 8px, transparent 8px 12px); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav-link:hover, .nav-link.is-active { color: #fff; }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }

/* ---------- buttons ---------- */
.btn-primary, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.4rem; border-radius: 999px; font-weight: 600; transition: transform .2s var(--ease), box-shadow .2s, background-color .2s; }
.btn-primary { background: var(--tiger); color: #fff; box-shadow: 0 8px 20px -8px rgba(230,126,34,.7); position: relative; overflow: hidden; }
.btn-primary::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 14px, rgba(0,0,0,.09) 14px 22px); transform: translateX(-100%); transition: transform .6s var(--ease); }
.btn-primary:hover { background: var(--tiger-600); transform: translateY(-1px); }
.btn-primary:hover::before { transform: translateX(0); }
.btn-primary:active, .btn-ghost:active { transform: scale(.97); }
.btn-primary[disabled] { opacity: .6; pointer-events: none; }
.btn-ghost { border: 1.5px solid rgba(11,37,22,.2); color: var(--forest); background: transparent; }
.btn-ghost:hover { border-color: var(--tiger); color: var(--tiger-600); }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--sand); color: var(--forest); }

/* ---------- typography helpers ---------- */
.eyebrow { display: flex; align-items: center; gap: .4rem; margin-bottom: .6rem; font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--tiger-600); }
.text-stripe { background: linear-gradient(100deg, var(--tiger) 0%, #f7b267 45%, var(--tiger) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: shimmer 6s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- HERO: layered jungle ---------- */
.hero { position: relative; overflow: hidden; background: var(--forest); isolation: isolate; }
.hero-sky { position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(1200px 500px at 75% 0%, rgba(230,126,34,.35), transparent 60%),
  radial-gradient(800px 400px at 10% 20%, rgba(47,107,67,.5), transparent 60%),
  linear-gradient(180deg, #0f3320 0%, #0B2516 55%, #06170D 100%); }
.hero-layer { position: absolute; left: -5%; width: 110%; max-width: none; bottom: 0; height: 60%; pointer-events: none; will-change: transform; }
.layer-back { fill: #123821; opacity: .8; animation: sway 18s ease-in-out infinite alternate; }
.layer-mid { fill: #0d2c19; height: 50%; animation: sway 12s ease-in-out infinite alternate-reverse; }
.layer-front { fill: var(--sand-50); height: 22%; z-index: 2; }
/* Phones: show a centred slice of the ridge at natural proportions instead of squashing 1440 units into ~375px */
@media (max-width: 640px) { .hero-layer { width: 260%; left: -80%; } }
@media (min-width: 641px) and (max-width: 1023px) { .hero-layer { width: 160%; left: -30%; } }
@keyframes sway { from { transform: translateX(-1.5%); } to { transform: translateX(1.5%); } }

.tiger-eyes { position: absolute; right: 14%; bottom: 30%; display: flex; gap: 18px; z-index: 1; }
.tiger-eyes span { width: 14px; height: 7px; border-radius: 50%; background: radial-gradient(circle, #ffd27a 0 35%, #e67e22 60%, transparent 70%); box-shadow: 0 0 16px 4px rgba(255,170,60,.55); opacity: 0; animation: blink 7s infinite; }
@keyframes blink { 0%,40% { opacity: 0; transform: scaleY(.2); } 45%,70% { opacity: .95; transform: scaleY(1); } 72% { transform: scaleY(.1); } 74%,85% { opacity: .95; transform: scaleY(1); } 92%,100% { opacity: 0; transform: scaleY(.2); } }

.fireflies i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffe9a8; box-shadow: 0 0 10px 3px rgba(255,220,120,.6);
  opacity: 0;
  animation: float calc(6s + var(--i) * .4s) ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); }
@keyframes float { 0% { opacity: 0; transform: translate(0,0); } 20% { opacity: .9; } 50% { transform: translate(18px,-26px); opacity: .5; } 80% { opacity: .9; } 100% { opacity: 0; transform: translate(-10px,-50px); } }

.hero-in { opacity: 0; transform: translateY(18px); animation: rise .8s var(--ease) forwards; animation-delay: calc(var(--d, 0) * .12s + .1s); }
@keyframes rise { to { opacity: 1; transform: none; } }

.action-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 96px; padding: 1rem; border-radius: var(--radius); color: var(--sand-50); font-weight: 600; font-size: .92rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .25s var(--ease), background .25s, border-color .25s; }
.action-tile svg { color: var(--tiger-300); transition: transform .3s var(--ease); }
.action-tile:hover { background: rgba(230,126,34,.18); border-color: var(--tiger); transform: translateY(-3px); }
.action-tile:hover svg { transform: scale(1.12) rotate(-6deg); }

.pugmarks { position: absolute; right: 6%; bottom: 7rem; display: flex; gap: 22px; transform: rotate(-18deg); color: rgba(246,185,127,.55); }
.pugmarks span { opacity: 0; animation: step 6s infinite; animation-delay: calc(var(--i) * .45s); }
.pugmarks span:nth-child(odd) { transform: translateY(12px); }
@keyframes step { 0%,5% { opacity: 0; } 12%,60% { opacity: 1; } 80%,100% { opacity: 0; } }
@media (max-width: 640px) { .pugmarks { display: none; } .tiger-eyes { right: 10%; bottom: 26%; } }

/* ---------- dividers & textures ---------- */
/* Wild-grass edge between sections (divider() in inc/partials.php). Grass grows up out of the section below,
   always inside the gap between blocks, so it never covers text. */
:root { --grass-h: 40px; }
@media (min-width: 768px) { :root { --grass-h: 56px; } }
.divider { position: relative; height: var(--grass-h); pointer-events: none; }
.divider::after { content: ""; position: absolute; inset: 0 0 -1px; z-index: 1; background: currentColor;
  -webkit-mask: url(../img/grass-edge.svg) repeat-x left bottom / auto 100%; mask: url(../img/grass-edge.svg) repeat-x left bottom / auto 100%; }
.page-hero .divider, .hero .divider { position: absolute; left: 0; right: 0; bottom: 0; }
.page-hero + * { position: relative; z-index: 1; margin-top: .75rem !important; } /* no tuck under the hero: its grass edge owns that space */
footer:has(> .divider) { margin-top: calc(var(--grass-h) + 2.75rem) !important; }
footer > .divider, section > .divider:first-child { position: absolute; left: 0; right: 0; top: calc(1px - var(--grass-h)); }
.divider-tiger { position: absolute; z-index: 0; right: 8%; bottom: 3px; width: 110px; height: 51px; background: currentColor;
  -webkit-mask: url(../img/tiger-walk.svg) no-repeat center / contain; mask: url(../img/tiger-walk.svg) no-repeat center / contain; }
@media (min-width: 768px) { .divider-tiger { width: 156px; height: 72px; right: 12%; } }
.stripes-bg { position: absolute; inset: 0; opacity: .06; pointer-events: none;
  background: repeating-linear-gradient(120deg, transparent 0 40px, var(--tiger) 40px 52px, transparent 52px 70px, var(--tiger) 70px 76px, transparent 76px 130px); }
.page-hero { position: relative; overflow: hidden; background: radial-gradient(900px 400px at 85% -10%, rgba(230,126,34,.3), transparent 60%), linear-gradient(180deg, #123821, var(--forest)); }

/* ---------- cards ---------- */
/* Swipeable card rows on phones; normal grid from 640px up */
.carousel-ui { display: none; }
@media (max-width: 639px) {
  .carousel { display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem;
    margin-inline: -1rem; padding: .25rem 1rem 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .carousel::-webkit-scrollbar { display: none; }
  .carousel > * { flex: 0 0 84%; scroll-snap-align: start; }
  .carousel > .reveal { opacity: 1; transform: none; }
  .carousel-ui:not([hidden]) { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .25rem; }
  .carousel-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: #fff; border: 1px solid var(--sand-200); color: var(--forest); box-shadow: 0 4px 12px -6px rgba(0,0,0,.25); }
  .carousel-btn:disabled { opacity: .35; }
  .carousel-dots { display: flex; gap: 6px; }
  .carousel-dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--sand-200); transition: width .25s var(--ease), background .25s; }
  .carousel-dots i.on { width: 20px; background: var(--tiger); }
}
.card { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--sand-200); box-shadow: 0 1px 0 rgba(0,0,0,.02); transition: transform .3s var(--ease), box-shadow .3s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(11,37,22,.45); }
.card-art { position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: linear-gradient(160deg, hsl(var(--h) 45% 32%), hsl(calc(var(--h) + 20) 55% 16%)); }
.card-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 22%, rgba(255,210,140,.55) 0 8%, transparent 9%), repeating-linear-gradient(115deg, transparent 0 22px, rgba(0,0,0,.06) 22px 30px); }
.card-art svg { position: absolute; inset: auto 0 0 0; width: 100%; height: 75%; transition: transform .6s var(--ease); }
.card-art .l1 { fill: hsl(var(--h) 40% 20%); } .card-art .l2 { fill: hsl(var(--h) 45% 11%); }
.card:hover .card-art svg, .rounded-3xl:hover .card-art svg { transform: scale(1.06) translateY(-2px); }
.badge { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; background: rgba(230,126,34,.12); color: #9a4d0c; }

.zone-card { display: block; height: 100%; padding: 1.1rem 1.2rem; background: #fff; border: 1px solid var(--sand-200); border-radius: var(--radius); transition: border-color .25s, transform .25s var(--ease); position: relative; overflow: hidden; }
.zone-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tiger); transform: scaleY(0); transform-origin: bottom; transition: transform .35s var(--ease); }
.zone-card:hover { border-color: var(--tiger-300); transform: translateY(-2px); }
.zone-card:hover::after { transform: scaleY(1); }
.status-tag { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.status-open { background: #dcf5e4; color: #11683a; } .status-closed { background: #fde2e0; color: #a3261b; } .status-limited { background: #fff1d6; color: #8a5a00; }

.fact { background: #fff; border: 1px solid var(--sand-200); border-radius: 1rem; padding: .8rem 1rem; }
.fact dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: #6b6b64; }
.fact dd { font-weight: 700; color: var(--forest); margin-top: .15rem; }
.step { position: relative; background: #fff; border: 1px solid var(--sand-200); border-radius: var(--radius); padding: 1.2rem; padding-top: 2rem; }
.step-n { position: absolute; top: -14px; left: 1rem; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px; background: var(--tiger); color: #fff; font-weight: 700; }
.chip-link, .chip-static { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .9rem; border-radius: 999px; background: #fff; border: 1px solid var(--sand-200); font-size: .88rem; }
.chip-link:hover { border-color: var(--tiger); color: var(--tiger-600); }
.route-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-radius: 1rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }

/* ---------- filters ---------- */
.filter-bar { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem 0 .5rem; scrollbar-width: none; scroll-snap-type: x proximity; }
.filter-bar::-webkit-scrollbar { display: none; }
.filter-chip { flex: none; scroll-snap-align: start; min-height: 44px; display: inline-flex; align-items: center; padding: .5rem 1.1rem; border-radius: 999px; background: #fff; border: 1.5px solid var(--sand-200); font-weight: 600; font-size: .9rem; color: var(--forest); transition: all .2s; }
.filter-chip.is-on { background: var(--forest); color: #fff; border-color: var(--forest); }
.card.is-filtered-in { animation: pop .35s var(--ease); }
@keyframes pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- forms ---------- */
.form-card { background: #fff; border-radius: 1.5rem; padding: 1.5rem; border: 1px solid var(--sand-200); box-shadow: 0 20px 50px -30px rgba(11,37,22,.5); }
.field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; border: 0; padding: 0; margin: 0; }
.field-label { font-size: .85rem; font-weight: 600; color: #2A2A27; padding: 0; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: .75rem .9rem; border-radius: .9rem; border: 1.5px solid var(--sand-200); background: #fff; font-size: 16px; /* 16px stops iOS zoom */ color: var(--charcoal); transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 84px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #a3a39b; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--tiger); box-shadow: 0 0 0 4px rgba(230,126,34,.18); }
.field .is-invalid, .field input.is-invalid:focus { border-color: #c0392b; box-shadow: 0 0 0 4px rgba(192,57,43,.12); }
.field-error { font-size: .78rem; color: #c0392b; font-weight: 500; }
.field-hint { font-size: .78rem; color: #6b6b64; }
.field-hint.err { color: #c0392b; } .field-hint.ok { color: #11683a; }

/* leading icons */
.input-wrap { position: relative; display: block; }
.input-wrap > .fi, .stepper > .fi { position: absolute; left: .9rem; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--tiger-600); pointer-events: none; transition: color .2s, transform .2s; }
.input-wrap.is-textarea > .fi { top: 1rem; transform: none; }
.input-wrap > input, .input-wrap > select, .input-wrap > textarea { padding-left: 2.8rem; }
.input-wrap:focus-within > .fi { color: var(--forest); transform: translateY(-50%) scale(1.1); }
.input-wrap.is-textarea:focus-within > .fi { transform: scale(1.1); }

/* phone: country code + number */
.phone-group { display: flex; gap: .5rem; }
.cc-wrap { position: relative; flex: none; display: flex; align-items: center; gap: .3rem; padding: 0 .75rem; min-height: 52px; border: 1.5px solid var(--sand-200); border-radius: .9rem; background: #fff; font-weight: 600; font-size: .95rem; transition: border-color .2s, box-shadow .2s; }
.cc-wrap:focus-within { border-color: var(--tiger); box-shadow: 0 0 0 4px rgba(230,126,34,.18); }
.cc-wrap select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.cc-display { white-space: nowrap; }
.valid-mark { position: absolute; right: .8rem; top: 50%; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: #dcf5e4; color: #11683a; transform: translateY(-50%) scale(0); transition: transform .3s var(--ease); }
.phone-ok .valid-mark { transform: translateY(-50%) scale(1); }
.phone-ok .input-wrap > input { border-color: #34a36a; padding-right: 3rem; }
.phone-bad .input-wrap > input { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.12); }

/* stepper */
.stepper { position: relative; display: flex; align-items: center; min-height: 52px; padding-left: 2.8rem; border: 1.5px solid var(--sand-200); border-radius: .9rem; background: #fff; }
.stepper:focus-within { border-color: var(--tiger); box-shadow: 0 0 0 4px rgba(230,126,34,.18); }
.stepper input { flex: 1; min-width: 0; min-height: 48px !important; border: 0 !important; box-shadow: none !important; background: transparent !important; text-align: center; font-weight: 700; font-size: 1.1rem !important; padding: 0 !important; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step-btn { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: .75rem; color: var(--forest); transition: background .2s, transform .15s; }
.step-btn:hover { background: var(--sand); } .step-btn:active { transform: scale(.88); }
.step-btn[disabled] { opacity: .3; pointer-events: none; }

/* click-to-select cards & pills */
.choice-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .6rem; }
.choice-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { position: relative; cursor: pointer; display: block; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; pointer-events: none; }
.choice-card, .choice-pill { position: relative; display: flex; align-items: center; background: #fff; border: 1.5px solid var(--sand-200); transition: border-color .2s, background .2s, box-shadow .2s, transform .15s var(--ease); -webkit-user-select: none; user-select: none; }
.choice-card { flex-direction: column; justify-content: center; gap: .45rem; height: 100%; min-height: 104px; padding: .9rem .5rem .8rem; border-radius: 1.1rem; text-align: center; font-size: .86rem; font-weight: 600; color: var(--forest); }
.choice-pill { gap: .45rem; min-height: 44px; padding: .35rem .95rem .35rem .4rem; border-radius: 999px; font-size: .86rem; font-weight: 600; color: var(--forest); }
.choice .ci { display: grid; place-items: center; border-radius: 12px; background: var(--sand); color: var(--forest); transition: background .2s, color .2s, transform .3s var(--ease); }
.choice-card .ci { width: 44px; height: 44px; }
.choice-pill .ci { width: 32px; height: 32px; border-radius: 999px; }
.choice-pill .ci svg { width: 17px; height: 17px; }
.choice .ct small { display: block; margin-top: .1rem; font-size: .72rem; font-weight: 500; color: #6b6b64; }
.choice .tick { position: absolute; top: .45rem; right: .45rem; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: var(--tiger); color: #fff; transform: scale(0); transition: transform .25s var(--ease); }
.choice-pill .tick { position: static; margin-left: .1rem; width: 18px; height: 18px; display: none; }
.choice:hover .choice-card, .choice:hover .choice-pill { border-color: var(--tiger-300); }
.choice:active .choice-card, .choice:active .choice-pill { transform: scale(.97); }
.choice input:checked + .choice-card, .choice input:checked + .choice-pill { border-color: var(--tiger); background: #fff7ef; box-shadow: 0 0 0 3px rgba(230,126,34,.16); }
.choice input:checked + span .ci { background: var(--tiger); color: #fff; transform: rotate(-6deg) scale(1.05); }
.choice input:checked + span .tick { transform: scale(1); }
.choice input:checked + .choice-pill .tick { display: grid; }
.choice input:focus-visible + span { outline: 3px solid var(--tiger); outline-offset: 2px; }
.fill-chip { min-height: 36px; padding: .3rem .8rem; border-radius: 999px; border: 1.5px dashed var(--sand-300, #D9C29E); font-size: .8rem; font-weight: 600; color: #5A5A54; transition: all .2s; }
.fill-chip:hover, .fill-chip.is-on { border-style: solid; border-color: var(--tiger); color: var(--tiger-600); background: #fff7ef; }

/* trip type: 5 compact cards in one row */
.trip-type .choice-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.trip-type .choice-card { min-height: 84px; padding: .6rem .2rem .55rem; gap: .35rem; font-size: .76rem; border-radius: .9rem; }
.trip-type .choice-card .ci { width: 38px; height: 38px; }
.trip-type .ct small { font-size: .62rem; }
.choice-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* flexible-dates switch + panel */
.date-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .45rem; }
.switch { position: relative; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--forest); min-height: 36px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; }
.switch-ui { position: relative; width: 40px; height: 24px; flex: none; border-radius: 999px; background: #d9d2c4; transition: background .2s; }
.switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .25s var(--ease); }
.switch input:checked + .switch-ui { background: var(--tiger); }
.switch input:checked + .switch-ui::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-ui { outline: 3px solid var(--tiger); outline-offset: 2px; }
.flex-panel { display: none; padding: .9rem; border: 1.5px dashed var(--tiger-300); border-radius: 1rem; background: #fffaf4; }
.date-block:has([data-flex-toggle]:checked) .flex-panel { display: grid; animation: pop .3s var(--ease); }
.date-block:has([data-flex-toggle]:checked) .date-trigger,
.date-block:has([data-flex-toggle]:checked) .date-native { display: none !important; }
.flex-months .choice-pills { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.flex-months .choice-pill { justify-content: flex-start; }

/* cab booking: routes, trip, fare */
.route-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.route-card { position: relative; display: block; cursor: pointer; }
.route-card input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; pointer-events: none; }
.route-inner { display: flex; align-items: center; gap: .7rem; min-height: 64px; padding: .55rem .8rem; border-radius: 1rem; border: 1.5px solid var(--sand-200); background: #fff; transition: border-color .2s, background .2s, box-shadow .2s, transform .15s var(--ease); }
.route-inner .ci { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--sand); color: var(--forest); transition: background .2s, color .2s; }
.route-inner .ct { flex: 1; min-width: 0; line-height: 1.25; }
.route-inner .ct strong { display: block; font-size: .9rem; color: var(--forest); }
.route-inner .ct small { display: block; font-size: .72rem; color: #6b6b64; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-km { flex: none; text-align: right; font-weight: 700; font-size: .85rem; color: var(--forest); line-height: 1.2; }
.route-km small { display: block; font-weight: 500; font-size: .7rem; color: #6b6b64; }
.route-card:hover .route-inner { border-color: var(--tiger-300); }
.route-card:active .route-inner { transform: scale(.98); }
.route-card input:checked + .route-inner { border-color: var(--tiger); background: #fff7ef; box-shadow: 0 0 0 3px rgba(230,126,34,.15); }
.route-card input:checked + .route-inner .ci { background: var(--tiger); color: #fff; }
.route-card input:focus-visible + .route-inner { outline: 3px solid var(--tiger); outline-offset: 2px; }
.trip-kind .choice-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trip-kind .choice-card { min-height: 84px; }
.veh-price { font-family: Oswald, sans-serif; font-size: 1.05rem; color: var(--tiger-600); margin-top: .2rem; }
.veh-price:empty { display: none; }
.veh-card.too-small .veh-price { color: #9a9a92; }
.fare-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-radius: 1.1rem; color: var(--sand-50);
  background: radial-gradient(300px 120px at 100% 0%, rgba(230,126,34,.4), transparent 60%), linear-gradient(160deg, #123821, var(--forest)); }
.fare-summary .fs-label { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--tiger-300); }
.fare-summary strong { display: block; font-family: Oswald, sans-serif; font-size: 2rem; line-height: 1.1; }
.fare-summary small { display: block; font-size: .78rem; color: var(--sand-200); }
.fare-summary .fs-ic { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 16px; background: rgba(255,255,255,.08); color: var(--tiger-300); }
.fare-summary.bump strong { animation: bump .35s var(--ease); }
@keyframes bump { 50% { transform: scale(1.08); } }

/* transport */
.transport-panel { display: none; gap: .9rem; margin-top: .75rem; }
.transport-panel.is-open { display: grid; margin-top: 0; }
[data-transport]:has(input[name="transport"][value="Needed"]:checked) .transport-panel { display: grid; animation: pop .3s var(--ease); }
.veh-reco { display: flex; align-items: flex-start; gap: .5rem; padding: .65rem .85rem; border-radius: .9rem; background: var(--forest); color: var(--sand-50); font-size: .85rem; }
.veh-reco svg { color: var(--tiger-300); margin-top: .1rem; }
.veh-reco strong { color: var(--tiger-300); }
.veh-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 70%); gap: .7rem; overflow-x: auto; padding: .2rem .1rem .6rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
.veh-grid::-webkit-scrollbar { display: none; }
.veh-card { position: relative; display: block; cursor: pointer; scroll-snap-align: start; }
.veh-card input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; pointer-events: none; }
.veh-inner { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 1.1rem; overflow: hidden; background: #fff; border: 1.5px solid var(--sand-200); transition: border-color .2s, box-shadow .2s, transform .15s var(--ease), opacity .2s; }
.veh-img { position: relative; display: block; aspect-ratio: 5 / 3; background: linear-gradient(160deg, #e9e2d3, #d8ccb4); overflow: hidden; }
.veh-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.veh-img .veh-fallback { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; color: #8a7d62; display: none; }
.veh-img.no-img img { display: none; } .veh-img.no-img .veh-fallback { display: block; }
.veh-card:hover .veh-img img { transform: scale(1.05); }
.veh-tag { position: absolute; left: .5rem; top: .5rem; padding: .2rem .55rem; border-radius: 999px; background: var(--tiger); color: #fff; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; box-shadow: 0 4px 10px -4px rgba(0,0,0,.5); display: none; }
.veh-card.is-reco .veh-tag { display: inline-block; }
.veh-body { display: grid; gap: .15rem; padding: .7rem .8rem .8rem; }
.veh-body strong { font-family: Oswald, sans-serif; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .03em; color: var(--forest); }
.veh-body small { font-size: .75rem; color: #6b6b64; }
.veh-meta { display: flex; gap: .8rem; margin-top: .25rem; font-size: .75rem; font-weight: 600; color: var(--charcoal); }
.veh-meta span { display: inline-flex; align-items: center; gap: .25rem; }
.veh-meta svg { color: var(--tiger-600); }
.veh-fit { margin-top: .3rem; font-size: .72rem; font-weight: 700; color: #11683a; }
.veh-fit:empty { display: none; }
.veh-card .tick { position: absolute; top: .5rem; right: .5rem; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--tiger); color: #fff; transform: scale(0); transition: transform .25s var(--ease); }
.veh-card input:checked + .veh-inner { border-color: var(--tiger); box-shadow: 0 0 0 3px rgba(230,126,34,.2); }
.veh-card input:checked + .veh-inner .tick { transform: scale(1); }
.veh-card input:focus-visible + .veh-inner { outline: 3px solid var(--tiger); outline-offset: 2px; }
.veh-card.too-small { cursor: not-allowed; }
.veh-card.too-small .veh-inner { opacity: .45; filter: grayscale(.8); }
.veh-card.too-small .veh-fit { color: #a3261b; }
.veh-credits { font-size: .7rem; color: #8a8a82; }
.veh-credits summary { cursor: pointer; width: max-content; }
.veh-credits ul { margin: .35rem 0; display: grid; gap: .15rem; }
.veh-credits a { text-decoration: underline; }

/* guest picker */
.gp-card { border: 1.5px solid var(--sand-200); border-radius: 1.1rem; background: #fff; overflow: hidden; }
[data-guest-picker].flash .gp-card { animation: flash 1s var(--ease); }
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(230,126,34,.55); border-color: var(--tiger); } 100% { box-shadow: 0 0 0 12px rgba(230,126,34,0); } }
.gp-summary { display: flex; align-items: center; gap: .45rem; padding: .6rem .9rem; background: var(--sand); color: var(--forest); font-size: .85rem; font-weight: 700; }
.gp-summary svg { color: var(--tiger-600); }
.gp-row { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; }
.gp-row + .gp-row { border-top: 1px solid var(--sand-200); }
.gp-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--sand); color: var(--forest); }
.gp-lbl { flex: 1; min-width: 0; }
.gp-lbl strong { display: block; color: var(--forest); font-size: .95rem; }
.gp-lbl small { display: block; color: #6b6b64; font-size: .75rem; }
.stepper.mini { flex: none; min-height: 44px; padding-left: 0; border-radius: 999px; background: var(--sand-50); }
.stepper.mini .step-btn { width: 42px; height: 42px; border-radius: 999px; }
.stepper.mini input { width: 2.2rem; flex: none; font-size: 1rem !important; }
.gp-ages:not(:empty) { border-top: 1px solid var(--sand-200); padding: .4rem .9rem .8rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; background: linear-gradient(180deg, #fffaf4, #fff); }
.gp-child { padding-top: .4rem; }
.gp-child-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .45rem; font-size: .85rem; font-weight: 700; color: var(--forest); }
.gp-badge { font-size: .7rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; background: #f1ece2; color: #6b6b64; }
.gp-badge.is-u5 { background: #dcf5e4; color: #11683a; }
.gp-badge.is-5p { background: rgba(230,126,34,.14); color: #9a4d0c; }
.gp-child.is-invalid .gp-badge { background: #fde2e0; color: #a3261b; }
.age-chips { display: flex; gap: .4rem; overflow-x: auto; padding: .15rem .1rem .35rem; scroll-snap-type: x proximity; scrollbar-width: none; }
.age-chips::-webkit-scrollbar { display: none; }
.age-chip { flex: none; scroll-snap-align: start; cursor: pointer; }
.age-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; pointer-events: none; }
.age-chip span { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 .5rem; border-radius: 12px; border: 1.5px solid var(--sand-200); background: #fff; font-weight: 700; font-size: .9rem; color: var(--forest); transition: all .15s var(--ease); }
.age-chip.u5 span { border-style: dashed; }
.age-chip input:checked + span { background: var(--tiger); border-color: var(--tiger); border-style: solid; color: #fff; transform: scale(1.06); box-shadow: 0 6px 14px -6px rgba(230,126,34,.8); }
.age-chip input:focus-visible + span { outline: 3px solid var(--tiger); outline-offset: 2px; }
.age-scale { display: flex; justify-content: space-between; margin-top: .15rem; font-size: .68rem; font-weight: 600; color: #8a8a82; }
.gp-note { display: flex; gap: .45rem; padding: .65rem .9rem; border-top: 1px solid var(--sand-200); font-size: .75rem; color: #5A5A54; background: var(--sand-50); }
.gp-note svg { color: var(--tiger-600); }

/* pickup points */
.pickup-points { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 46%); grid-template-rows: repeat(2, auto); gap: .5rem; overflow-x: auto; padding: .1rem .1rem .45rem; scroll-snap-type: x proximity; scrollbar-width: none; }
.pickup-points::-webkit-scrollbar { display: none; }
.pp-card { scroll-snap-align: start; display: flex; align-items: center; gap: .55rem; min-height: 60px; padding: .5rem .6rem; border-radius: .9rem; border: 1.5px solid var(--sand-200); background: #fff; text-align: left; transition: border-color .2s, background .2s, transform .15s var(--ease); }
.pp-card .ci { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--sand); color: var(--forest); transition: background .2s, color .2s; }
.pp-card .ct { min-width: 0; font-size: .8rem; font-weight: 700; line-height: 1.2; color: var(--forest); }
.pp-card .ct small { display: block; margin-top: .15rem; font-size: .68rem; font-weight: 500; color: #6b6b64; }
.pp-card:hover { border-color: var(--tiger-300); }
.pp-card:active { transform: scale(.97); }
.pp-card[aria-pressed="true"] { border-color: var(--tiger); background: #fff7ef; box-shadow: 0 0 0 3px rgba(230,126,34,.15); }
.pp-card[aria-pressed="true"] .ci { background: var(--tiger); color: #fff; }

/* date trigger (opens calendar sheet) */
.date-block .date-label { display: block; margin-bottom: .4rem; }
.date-trigger { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; width: 100%; min-height: 68px; padding: .6rem .8rem; border: 1.5px solid var(--sand-200); border-radius: 1rem; background: #fff; text-align: left; transition: border-color .2s, box-shadow .2s; }
.date-trigger.is-single { grid-template-columns: 1fr; }
.date-trigger:hover { border-color: var(--tiger-300); }
.date-trigger:focus-visible { border-color: var(--tiger); box-shadow: 0 0 0 4px rgba(230,126,34,.18); outline: none; }
.date-trigger.is-invalid { border-color: #c0392b; }
.dt-half { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.dt-half small { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #6b6b64; }
.dt-half strong { display: block; font-size: .95rem; color: var(--forest); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-half strong.is-empty { color: #a3a39b; font-weight: 500; }
.dt-arrow { color: var(--tiger); }
.form-status.ok { color: #11683a; } .form-status.err { color: #c0392b; }
.form-status.ok { color: #11683a; } .form-status.err { color: #c0392b; }

/* ---------- itinerary ---------- */
.itinerary { position: relative; display: grid; gap: .75rem; padding-left: 1.4rem; }
.itinerary::before { content: ""; position: absolute; left: .45rem; top: .5rem; bottom: .5rem; width: 2px; background: repeating-linear-gradient(180deg, var(--tiger) 0 8px, transparent 8px 14px); }
.itinerary li { position: relative; }
.itinerary li::before { content: ""; position: absolute; left: -1.25rem; top: 1.25rem; width: 12px; height: 12px; border-radius: 999px; background: var(--tiger); box-shadow: 0 0 0 4px var(--sand-50); }
.itinerary details { background: #fff; border: 1px solid var(--sand-200); border-radius: 1rem; }
.itinerary summary, .faq summary { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem; cursor: pointer; list-style: none; min-height: 48px; }
.itinerary summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.itinerary details > p { padding: 0 1.1rem 1.1rem; }
.day-pin { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #fff; background: var(--forest); padding: .25rem .6rem; border-radius: 999px; }
.chev { transition: transform .3s var(--ease); flex: none; margin-left: auto; color: var(--tiger-600); }
details[open] > summary .chev { transform: rotate(180deg); }
.faq { background: #fff; border: 1px solid var(--sand-200); border-radius: 1rem; }
.faq summary { font-weight: 600; color: var(--forest); justify-content: space-between; }
.faq p { padding: 0 1.1rem 1.1rem; color: #4A4A45; }

/* ---------- weather ---------- */
.weather-card { position: relative; border-radius: 1.5rem; padding: 1.5rem; color: var(--sand-200); overflow: hidden;
  background: radial-gradient(500px 200px at 100% 0%, rgba(230,126,34,.35), transparent 60%), linear-gradient(160deg, #123821, #06170D); box-shadow: 0 30px 60px -30px rgba(6,23,13,.8); }
.zone-pill { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: .9rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); transition: background .2s; }
.zone-pill:hover { background: rgba(255,255,255,.1); }
.dot { width: 10px; height: 10px; border-radius: 999px; flex: none; }
.dot-open { background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: pulse 2s infinite; }
.dot-closed { background: #f87171; } .dot-limited { background: #fbbf24; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }

/* ---------- footer ---------- */
.footer-h { font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: .1em; color: var(--sand-50); margin-bottom: .75rem; }
.footer-list { display: grid; gap: .45rem; font-size: .9rem; }
.footer-list a:hover { color: var(--tiger-300); }

/* ---------- mobile bottom nav ---------- */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: rgba(11,37,22,.97); border-top: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: rgba(233,218,194,.75); font-size: .68rem; font-weight: 600; position: relative; }
.bottom-nav a.is-active { color: var(--tiger-300); }
.bottom-nav a.is-active::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 4px 4px; background: var(--tiger); }
.bottom-nav a:active svg { transform: scale(.9); }

/* ---------- WhatsApp FAB ---------- */
.wa-fab { position: fixed; right: 16px; bottom: calc(var(--bottom-nav-h) + 16px + env(safe-area-inset-bottom)); z-index: 46; display: flex; align-items: center; gap: .5rem;
  height: 56px; min-width: 56px; padding: 0 1rem; border-radius: 999px; background: #25D366; color: #fff; font-weight: 700; box-shadow: 0 12px 28px -8px rgba(37,211,102,.7); transition: transform .25s var(--ease); }
.wa-fab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #25D366; animation: ring 2.4s infinite; }
.wa-fab:hover { transform: translateY(-2px) scale(1.03); }
.wa-fab-label { font-size: .9rem; }
@keyframes ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
@media (min-width: 1024px) { .wa-fab { bottom: 24px; right: 24px; } }
@media (max-width: 380px) { .wa-fab-label { display: none; } .wa-fab { padding: 0; justify-content: center; } }

/* ---------- full-screen bottom-up drawer (quote form + calendar) ---------- */
html.sheet-open, html.sheet-open body { overflow: hidden; }
.drawer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: var(--sand-50); color: var(--charcoal); overflow: hidden; }
.drawer[open] { display: flex; flex-direction: column; animation: drawer-up .45s var(--ease); }
.drawer.is-closing { animation: drawer-down .3s cubic-bezier(.4,0,1,1) forwards; }
.drawer::backdrop { background: rgba(6,23,13,.65); }
@keyframes drawer-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes drawer-down { from { transform: translateY(var(--drag, 0px)); } to { transform: translateY(100%); } }
.sheet-inner { width: 100%; max-width: 680px; margin: 0 auto; }
.sheet-head { position: relative; flex: none; overflow: hidden; padding: calc(env(safe-area-inset-top) + .5rem) 1rem 1rem; color: var(--sand-50);
  background: radial-gradient(600px 200px at 100% 0%, rgba(230,126,34,.35), transparent 60%), linear-gradient(180deg, #123821, var(--forest)); touch-action: none; }
.sheet-handle { display: block; width: 44px; height: 5px; margin: 0 auto .75rem; border-radius: 999px; background: rgba(255,255,255,.35); }
.sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 1.25rem 1rem 0; }
.sheet-foot { flex: none; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--sand-200); box-shadow: 0 -10px 30px -20px rgba(11,37,22,.4); }
.drawer .form-actions { position: sticky; bottom: 0; z-index: 2; margin: 0 -1rem; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(251,247,240,0), var(--sand-50) 28%); }
.drawer .lead-form { padding-bottom: 1rem; }
.drawer .lead-form > p:last-child { padding-bottom: 1.5rem; }

/* ---------- calendar sheet ---------- */
.cal-summary { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; margin-top: .75rem; }
.cal.is-single .cal-summary { grid-template-columns: 1fr; }
.cal.is-single [data-cal-end-wrap] { display: none; }
.cal-summary > div { padding: .55rem .8rem; border-radius: .9rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); transition: border-color .2s, background .2s; }
.cal-summary > div.is-active { border-color: var(--tiger); background: rgba(230,126,34,.18); }
.cal-summary small { display: block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--tiger-300); }
.cal-summary strong { font-size: 1rem; color: var(--sand-50); }
.cal-summary-arrow { color: var(--tiger-300); }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: .9rem; padding: .55rem 0; border-top: 1px solid rgba(255,255,255,.1); text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sand-200); }
.cal-week span:first-child, .cal-week span:last-child { color: var(--tiger-300); }
.cal-months { padding: 0 1rem 2rem; scroll-behavior: smooth; }
.cal-month { max-width: 680px; margin: 0 auto; padding-bottom: 1rem; }
.cal-month h3 { position: sticky; top: 0; z-index: 1; margin: 0 -1rem; padding: .9rem 1rem .6rem; background: rgba(251,247,240,.96); backdrop-filter: blur(4px); font-family: Oswald, sans-serif; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em; color: var(--forest); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; }
.cal-day { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-height: 56px; width: 100%; font-size: .95rem; font-weight: 600; color: var(--charcoal); }
.cal-day > span { position: relative; z-index: 1; display: grid; place-items: center; width: min(44px, 92%); aspect-ratio: 1; border-radius: 999px; transition: background .15s, color .15s, transform .15s; }
.cal-day:hover:not([disabled]) > span { background: var(--sand); }
.cal-day.is-weekend { color: var(--tiger-600); }
.cal-day.is-today > span { box-shadow: inset 0 0 0 2px var(--forest); }
.cal-day[disabled] { color: #c9c4b8; cursor: not-allowed; text-decoration: line-through; text-decoration-color: rgba(0,0,0,.15); }
.cal-day.in-range { background: rgba(230,126,34,.16); }
.cal-day.is-start.has-end { background: linear-gradient(90deg, transparent 50%, rgba(230,126,34,.16) 50%); }
.cal-day.is-end { background: linear-gradient(90deg, rgba(230,126,34,.16) 50%, transparent 50%); }
.cal-grid > :nth-child(7n+1).in-range { border-radius: 999px 0 0 999px; }
.cal-grid > :nth-child(7n).in-range { border-radius: 0 999px 999px 0; }
.cal-day.is-start > span, .cal-day.is-end > span { background: var(--tiger); color: #fff; box-shadow: 0 6px 16px -6px rgba(230,126,34,.8); transform: scale(1.04); }
.cal-day:focus-visible { outline: none; }
.cal-day:focus-visible > span { outline: 3px solid var(--forest); outline-offset: 2px; }

/* ---------- scroll reveal (progressive: content visible without JS) ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

.prose-jc h2 { font-family: Oswald, sans-serif; text-transform: uppercase; font-size: 1.8rem; color: var(--forest); margin-bottom: 1rem; }

/* ---------- accessibility: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero-in, .js .reveal { opacity: 1 !important; transform: none !important; }
  .fireflies, .tiger-eyes, .pugmarks { display: none; }
}

/* ---------- long-form guides ---------- */
.guide { min-width: 0; }
.guide-meta { font-size: .8rem; color: #6b6b64; margin-bottom: 1rem; }
.guide-section { scroll-margin-top: 5.5rem; margin-top: 2.25rem; }
.prose-jc { color: #2A2A27; font-size: 1.02rem; line-height: 1.75; }
.prose-jc h2 { font-family: Oswald, sans-serif; text-transform: uppercase; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.15; color: var(--forest); margin-bottom: .9rem; }
.prose-jc h3 { font-weight: 700; font-size: 1.1rem; color: var(--forest); margin: 1.5rem 0 .5rem; }
.prose-jc p { margin: .85rem 0; }
.prose-jc ul:not(.tick-list) { list-style: disc; padding-left: 1.3rem; margin: .8rem 0; }
.prose-jc ol { list-style: decimal; padding-left: 1.3rem; margin: .8rem 0; }
.prose-jc li { margin: .35rem 0; }
.prose-jc a { color: var(--tiger-600); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose-jc a:hover { color: var(--forest); }
.prose-jc strong { color: var(--forest); }
.tick-list { display: grid; gap: .55rem; margin: 1rem 0; }
.tick-list li { display: flex; gap: .6rem; align-items: flex-start; margin: 0; }
.tick-list li > svg { flex: none; margin-top: .35rem; color: var(--tiger-600); }
.table-wrap { overflow-x: auto; margin: 1.1rem 0; border: 1px solid var(--sand-200); border-radius: 1rem; background: #fff; -webkit-overflow-scrolling: touch; }
.table-wrap table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .9rem; line-height: 1.45; }
.table-wrap thead th { background: var(--forest); color: var(--sand-50); text-align: left; font-weight: 600; padding: .75rem .9rem; white-space: nowrap; }
.table-wrap tbody th, .table-wrap td { padding: .75rem .9rem; border-top: 1px solid var(--sand-200); text-align: left; vertical-align: top; }
.table-wrap tbody th { font-weight: 700; color: var(--forest); }
.table-wrap tbody th small { display: block; font-weight: 500; font-size: .75rem; color: #6b6b64; }
.table-wrap tbody tr:nth-child(even) { background: var(--sand-50); }
.table-wrap a { color: var(--forest); text-decoration: underline; }
.callout { display: flex; gap: .65rem; align-items: flex-start; margin: 1rem 0; padding: .9rem 1rem; border-radius: 1rem; background: #fff7ef; border: 1px solid var(--tiger-300); color: #5a3a12; font-size: .9rem; line-height: 1.55; }
.callout svg { color: var(--tiger-600); margin-top: .1rem; }
.callout p { margin: 0; }
.callout a { color: var(--tiger-600); text-decoration: underline; }
.toc { margin: 1.25rem 0; border: 1px solid var(--sand-200); border-radius: 1rem; background: #fff; }
.toc summary { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; font-weight: 700; color: var(--forest); cursor: pointer; list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc ol { list-style: decimal; padding: 0 1rem 1rem 2.2rem; display: grid; gap: .35rem; font-size: .92rem; }
.toc a { color: #2A2A27; } .toc a:hover { color: var(--tiger-600); text-decoration: underline; }
.related-grid { display: grid; gap: .75rem; }
@media (min-width: 640px) { .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.related-card { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-radius: 1rem; background: #fff; border: 1px solid var(--sand-200); transition: border-color .2s, transform .2s var(--ease); }
.related-card:hover { border-color: var(--tiger-300); transform: translateY(-2px); }
.related-card .ci { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--sand); color: var(--forest); }
.related-card strong { display: block; color: var(--forest); font-size: .95rem; }
.related-card small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; color: #6b6b64; }
.side-links { border: 1px solid var(--sand-200); border-radius: 1.25rem; background: #fff; padding: 1rem; }
.side-links h2 { font-family: Oswald, sans-serif; text-transform: uppercase; color: var(--forest); font-size: 1.1rem; margin-bottom: .5rem; }
.side-links a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .2rem; border-top: 1px solid var(--sand-200); font-size: .9rem; color: #2A2A27; }
.side-links a:hover { color: var(--tiger-600); }
.side-links a svg { color: var(--tiger-600); flex: none; }
.map-embed { position: relative; aspect-ratio: 16 / 10; border-radius: 1rem; overflow: hidden; border: 1px solid var(--sand-200); margin: 1rem 0; }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- photos ---------- */
.hero-photo { position: absolute; inset: 0; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 22s ease-out forwards; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,23,13,.55) 0%, rgba(6,23,13,.72) 55%, rgba(6,23,13,.92) 100%); }
@keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero.has-photo .hero-photo { z-index: -1; }
.hero.has-photo .hero-photo::after { background: linear-gradient(90deg, rgba(6,23,13,.88) 0%, rgba(6,23,13,.55) 55%, rgba(6,23,13,.35) 100%), linear-gradient(180deg, transparent 60%, rgba(6,23,13,.9)); }
.hero.has-photo .layer-back, .hero.has-photo .layer-mid { opacity: .55; }
.page-hero.has-photo { min-height: 340px; }
@media (min-width: 768px) { .page-hero.has-photo { min-height: 420px; } }
.card-photo { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sand-200); }
.card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card-photo img { transform: scale(1.05); }
.lead-photo { position: relative; margin: 0; border-radius: 1.5rem; overflow: hidden; aspect-ratio: 16 / 10; background: var(--sand-200); box-shadow: 0 18px 40px -22px rgba(11,37,22,.5); }
.lead-photo img { width: 100%; height: 100%; object-fit: cover; }
.lead-photo figcaption, .day-photo figcaption { position: absolute; right: .6rem; bottom: .6rem; padding: .2rem .55rem; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: .7rem; }
.rep-tag { position: absolute; left: .6rem; top: .6rem; z-index: 1; padding: .2rem .55rem; border-radius: 999px; background: rgba(11,37,22,.78); color: #fff; font-size: .66rem; font-weight: 600; letter-spacing: .02em; backdrop-filter: blur(2px); }
.lead-photo figcaption { max-width: calc(100% - 1.2rem); }
.day-photo { position: relative; margin: 0 1.1rem .8rem; border-radius: 1rem; overflow: hidden; aspect-ratio: 16 / 9; }
.day-photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 640px) { .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .photo-grid.compact { margin-top: .5rem; } }
.photo-credits { font-size: .72rem; line-height: 1.5; color: #6b6b6b; }
.photo-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: .9rem; background: var(--sand-200); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), filter .3s; }
.photo-tile:hover img { transform: scale(1.06); }
.photo-tile:focus-visible { outline: 3px solid var(--tiger); outline-offset: 2px; }
.photo-grid.masonry { display: block; columns: 2 160px; column-gap: .5rem; }
@media (min-width: 1024px) { .photo-grid.masonry { columns: 4 200px; } }
.photo-grid.masonry .photo-tile { aspect-ratio: auto; margin-bottom: .5rem; break-inside: avoid; }
.photo-grid.masonry .photo-tile img { height: auto; }
.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: rgba(4,12,7,.96); color: #fff; }
.lightbox[open] { display: grid; place-items: center; animation: pop .25s var(--ease); }
.lightbox::backdrop { background: rgba(0,0,0,.8); }
.lb-figure { margin: 0; width: 100vw; height: 100vh; height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 4.5rem calc(1rem + env(safe-area-inset-bottom)); gap: .75rem; }
.lb-figure img { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 10rem); max-height: calc(100dvh - 10rem); object-fit: contain; border-radius: .5rem; user-select: none; }
@media (max-width: 639px) { .lb-figure { padding: 4rem .75rem 5.5rem; } }
.lb-figure figcaption { max-width: 48rem; text-align: center; font-size: .9rem; color: #e9dac2; }
.lb-figure small { color: #a9a597; }
.lb-count { display: block; margin-top: .25rem; font-size: .75rem; color: #a9a597; }
.lb-btn { position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; transition: background .2s; }
.lb-btn:hover { background: rgba(230,126,34,.85); }
.lb-close { top: calc(.75rem + env(safe-area-inset-top)); right: .75rem; }
.lb-prev { left: .75rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: .75rem; top: 50%; transform: translateY(-50%); }
.lightbox.is-single .lb-prev, .lightbox.is-single .lb-next { display: none; }
@media (max-width: 639px) { .lb-prev, .lb-next { top: auto; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: none; } }

/* ---------- planner tools ---------- */
.tool-card-lg { margin: 1rem 0; padding: 1.1rem; border: 1px solid var(--sand-200); border-radius: 1.25rem; background: #fff; box-shadow: 0 14px 34px -26px rgba(11,37,22,.45); font-size: .95rem; }
.pl-q { border: 0; padding: 0; margin: 0 0 1rem; }
.pl-q legend { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--forest); margin-bottom: .5rem; }
.pl-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--forest); color: var(--tiger-300); font-size: .8rem; }
.pl-result { margin-top: 1.2rem; padding: 1rem; border-radius: 1rem; background: #fff7ef; border: 1px solid var(--tiger-300); }
.pl-result .tick-list li span { margin-left: 0; }
.pl-timeline { list-style: none !important; padding: 0 !important; margin: 1rem 0 0 !important; display: grid; gap: .6rem; }
.pl-timeline li { display: grid; grid-template-columns: 8.5rem 1fr; gap: .8rem; align-items: start; padding: .7rem .8rem; border-radius: .9rem; background: var(--sand-50); border-left: 4px solid var(--tiger); margin: 0 !important; }
.pl-timeline li.is-past { border-left-color: #c0392b; }
.pl-timeline time { font-weight: 700; color: var(--forest); font-size: .85rem; }
.pl-timeline p { margin: .15rem 0 0 !important; font-size: .88rem; color: #4A4A45; }
@media (max-width: 480px) { .pl-timeline li { grid-template-columns: 1fr; gap: .2rem; } }
.pl-total { margin: 1rem 0 .5rem; padding: 1rem 1.1rem; border-radius: 1rem; color: var(--sand-50); background: linear-gradient(160deg, #123821, var(--forest)); }
.pl-total .fs-label { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--tiger-300); }
.pl-total strong { display: block; font-family: Oswald, sans-serif; font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem); line-height: 1.15; color: #fff; }
.pl-total small { color: var(--sand-200); }
.pl-pack { display: grid; gap: .8rem; margin-top: .8rem; }
@media (min-width: 640px) { .pl-pack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pl-pack-group { border: 1px solid var(--sand-200); border-radius: 1rem; padding: .7rem .9rem .8rem; margin: 0; }
.pl-pack-group legend { padding: 0 .3rem; font-weight: 700; color: var(--forest); font-size: .9rem; }
.pl-pack-item { display: flex; gap: .55rem; align-items: flex-start; padding: .35rem 0; font-size: .9rem; cursor: pointer; }
.pl-pack-item input { width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--tiger); flex: none; }
.pl-pack-item input:checked + span { text-decoration: line-through; color: #8a8a82; }
.tool-cards { display: grid; gap: .6rem; }
.tool-card { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem .9rem; border-radius: 1rem; background: #fff; border: 1px solid var(--sand-200); transition: border-color .2s, transform .2s var(--ease); }
.tool-card:hover { border-color: var(--tiger-300); transform: translateY(-2px); }
.tool-card .ci { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--tiger); color: #fff; }
.tool-card strong { display: block; color: var(--forest); font-size: .92rem; }
.tool-card small { display: block; color: #6b6b64; font-size: .78rem; line-height: 1.35; }
@media print {
  .print-packing body * { visibility: hidden; }
  .print-packing [data-packing], .print-packing [data-packing] * { visibility: visible; }
  .print-packing [data-packing] { position: absolute; inset: 0; box-shadow: none; border: 0; }
  .print-packing [data-packing] button, .print-packing [data-packing] fieldset.field { display: none; }
}

/* ---------- ad slots (render only once AdSense is enabled) ---------- */
.ad-slot { margin: 2rem 0; padding-top: .4rem; border-top: 1px solid var(--sand-200); text-align: center; min-height: 120px; }
.ad-slot > span { display: block; margin-bottom: .35rem; font-size: .65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #9a9a92; }


/* ---------- reviews ---------- */
.stars { display: inline-flex; gap: 1px; color: #d8cfbd; }
.stars .star-full { color: var(--tiger); }
.stars .star-full svg, .stars .star-half svg { fill: currentColor; }
.stars .star-half { color: var(--tiger); opacity: .55; }
.review-card { background: #fff; border: 1px solid var(--sand-200); border-radius: 1.1rem; padding: 1rem 1.1rem; }
.review-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 999px; background: var(--forest); color: var(--tiger-300); font-family: Oswald, sans-serif; font-size: 1.1rem; }
.review-reply { margin-top: .8rem; padding: .7rem .85rem; border-radius: .8rem; background: var(--sand-50); border-left: 3px solid var(--tiger); font-size: .88rem; }
.review-reply p { margin-top: .2rem; color: #4A4A45; }
.rating-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--sand-200); overflow: hidden; }
.rating-bar span { display: block; height: 100%; background: var(--tiger); border-radius: 999px; }
.star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15rem; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; }
.star-input label { cursor: pointer; color: #d8cfbd; padding: .15rem; border-radius: .5rem; transition: transform .15s var(--ease), color .15s; }
.star-input label svg { fill: currentColor; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: var(--tiger); }
.star-input label:active { transform: scale(.9); }
.star-input input:focus-visible + label { outline: 3px solid var(--tiger); outline-offset: 2px; }
.review-which { display: none; }
.review-form:has(input[name="about"][value="zones"]:checked) [data-for="zones"],
.review-form:has(input[name="about"][value="resorts"]:checked) [data-for="resorts"],
.review-form:has(input[name="about"][value="packages"]:checked) [data-for="packages"] { display: block; }

/* ==========================================================================
   Container queries: forms adapt to their OWN width (full-screen drawer vs. narrow
   sidebar), not the viewport. Kept last so they win over the base rules above.
   ========================================================================== */
.lead-form { container-type: inline-size; }
@media (max-width: 639px) { .form-card { padding: 1.1rem; border-radius: 1.25rem; } }
.sheet-body { overflow-x: clip; }
@container (max-width: 400px) {
  .trip-type .choice-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  
}
@container (max-width: 340px) {
  .gp-ic { display: none; }
  .gp-row { padding: .6rem .7rem; }
  .date-trigger { grid-template-columns: 1fr; gap: .35rem; }
  .date-trigger .dt-arrow { display: none; }
  .route-km small { display: none; }
}

@container (max-width: 520px) {
  .lead-form .sm\:grid-cols-2 { grid-template-columns: minmax(0, 1fr); }
  .lead-form .sm\:col-span-2 { grid-column: auto; }
}
@container (min-width: 521px) {
  .route-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 560px) {
  .veh-grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .pickup-points { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; overflow: visible; }
}

/* ---------- Safari-zone map (Leaflet, assets/js/zone-map.js) ---------- */
.zone-map { position: relative; height: 360px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--sand-200); background: #e8efe6; z-index: 0; }
@media (min-width: 768px) { .zone-map { height: 440px; } }
.zone-map-fallback { display: flex; gap: .5rem; align-items: center; padding: 1rem; font-size: .9rem; color: var(--forest); }
.zone-map.is-failed::after { content: "The map could not load. Check your connection and refresh."; position: absolute; inset: auto 0 0 0; padding: .75rem 1rem; font-size: .8rem; background: #fff; }
.zone-map-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-top: .75rem; font-size: .8rem; color: #55554f; }
.zone-map-legend li { display: flex; align-items: center; gap: .4rem; }
.zone-map-legend span { width: 14px; height: 14px; border-radius: 999px; flex: none; }
.lg-zone { background: rgba(230,126,34,.35); border: 2px solid #D06E17; }
.lg-gate { background: var(--forest); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--forest); }
.lg-poi { background: #fff; border: 2px solid var(--forest); }
.lg-other { background: rgba(159,179,165,.3); border: 1px dashed #6b7a6f; }
.lg-park { border-radius: 3px !important; background: rgba(31,86,52,.08); border: 1.5px dashed #1F5634; }
.zm-pin span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; font-size: 14px; line-height: 1; box-shadow: 0 4px 10px -3px rgba(0,0,0,.45); }
.zm-gate span { background: var(--forest); color: #fff; border: 2px solid #fff; }
.zm-poi span { background: #fff; color: var(--forest); border: 2px solid var(--forest); font-size: 16px; }
.zm-town span { width: 18px; height: 18px; margin: 6px; background: var(--tiger); color: transparent; border: 3px solid #fff; }
.leaflet-tooltip.zm-zone-label { background: var(--forest); color: #fff; border: 0; font-weight: 700; font-size: .8rem; letter-spacing: .02em; padding: .3rem .6rem; border-radius: 999px; box-shadow: 0 4px 12px -4px rgba(0,0,0,.4); }
.leaflet-tooltip.zm-zone-label::before { display: none; }
.leaflet-tooltip.zm-other-label { font-size: .75rem; }
.zm-halo { animation: zmPulse 2.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes zmPulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .zm-halo { animation: none; } }
.zm-unlock { position: absolute; z-index: 500; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(11,37,22,.85); color: #fff; font-size: .8rem; font-weight: 600; padding: .5rem .9rem; border-radius: 999px; }
.leaflet-container { font-family: inherit; }
.leaflet-container img, .leaflet-container svg { max-width: none !important; max-height: none !important; }
.leaflet-control-attribution { font-size: 10px; }

/* ---------- Park map (/jim-corbett-map, assets/js/corbett-map.js) ---------- */
.cm-chips { margin-bottom: .75rem; }
.cm-chip small { display: inline; font-weight: 600; opacity: .55; margin-left: .15rem; font-size: .75em; }
.cm { container-type: inline-size; }
.cm-body { display: grid; gap: .75rem; }
@container (min-width: 760px) { .cm-body { grid-template-columns: minmax(0, 1fr) 260px; } .cm-list { max-height: 505px !important; } .cm-map { height: 560px; } }
.cm-stage { position: relative; }
.cm-map { position: relative; height: 460px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--sand-200); background: #e8efe6; z-index: 0; }
.cm-loading { display: flex; gap: .5rem; align-items: center; padding: 1rem; color: var(--forest); font-size: .9rem; }
.cm-tools { position: absolute; z-index: 600; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; }
.cm-tools[hidden] { display: none; }
.cm-tool { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #fff; color: var(--forest); border: 1px solid rgba(0,0,0,.12); box-shadow: 0 4px 10px -6px rgba(0,0,0,.4); }
.cm-tool:hover, .cm-tool[aria-pressed="true"] { background: var(--forest); color: #fff; }
.cm-tool.is-busy { animation: zmPulse 1s infinite; }
.cm-side { display: flex; flex-direction: column; min-height: 0; }
.cm-search { display: flex; align-items: center; gap: .5rem; padding: 0 .8rem; border: 1px solid var(--sand-200); border-radius: 999px; background: #fff; color: var(--tiger-600); }
.cm-search input { flex: 1; min-width: 0; padding: .65rem 0; border: 0; background: transparent; font-size: .9rem; color: var(--charcoal); outline: none; }
.cm-search:focus-within { border-color: var(--tiger); }
.cm-list { list-style: none !important; padding: 0 !important; margin: .5rem 0 0 !important; display: grid; gap: 4px; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.cm-list li { margin: 0 !important; padding: 0 !important; }
.cm-list li::before, .cm-list li::marker { display: none !important; content: none !important; }
.cm-list li[hidden] { display: none; }
.cm-list button { width: 100%; display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: .75rem; text-align: left; background: #fff; border: 1px solid transparent; transition: border-color .15s, background .15s; }
.cm-list button:hover { border-color: var(--sand-200); }
.cm-list li.is-active button { border-color: var(--tiger); background: #fff8f0; }
.cm-li-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; color: #fff; }
.cm-li-t { min-width: 0; }
.cm-li-t strong { display: block; font-size: .85rem; color: var(--forest); line-height: 1.25; }
.cm-li-t small { display: flex; align-items: center; gap: .3rem; font-size: .72rem; color: #6b6b64; }
.cm-dot { width: 7px; height: 7px; border-radius: 999px; background: #b4442c; display: inline-block; }
.cm-dot.is-open { background: #2E8B57; }
.cm-empty { font-size: .85rem; color: #6b6b64; padding: .75rem; }
/* category colours (list icons, chips, pins) */
.cm-li-ic.cm-zone, .cm-pop-kind.cm-zone svg { background: #D06E17; }
.cm-li-ic.cm-gate { background: var(--forest); }
.cm-li-ic.cm-frh { background: #7a4a1d; }
.cm-li-ic.cm-place { background: #2c7fb8; }
.cm-li-ic.cm-town { background: #1E1E1C; }
.cm-li-ic.cm-travel { background: #6a4c93; }
.cm-pin span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; color: #fff; font-size: 13px; line-height: 1; border: 2px solid #fff; box-shadow: 0 4px 10px -3px rgba(0,0,0,.5); transition: transform .15s; }
.cm-pin:hover span { transform: scale(1.15); }
.cm-pin.cm-gate span { background: var(--forest); }
.cm-pin.cm-frh span { background: #7a4a1d; font-size: 15px; }
.cm-pin.cm-place span { background: #2c7fb8; }
.cm-pin.cm-town span { background: #1E1E1C; width: 18px; height: 18px; margin: 5px; font-size: 0; border-width: 3px; }
.cm-pin.cm-travel span { background: #6a4c93; }
.leaflet-tooltip.cm-zone-label { background: rgba(208,110,23,.92); color: #fff; border: 0; border-radius: 999px; padding: .2rem .55rem; font-weight: 700; font-size: .72rem; box-shadow: none; }
.leaflet-tooltip.cm-zone-label.is-buffer { background: rgba(46,125,91,.92); }
.leaflet-tooltip.cm-zone-label::before, .leaflet-tooltip.cm-town-label::before { display: none; }
.leaflet-tooltip.cm-town-label { background: transparent; border: 0; box-shadow: none; font-weight: 800; font-size: .8rem; color: #1E1E1C; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; padding: 0; }
.cm-zone-shape { transition: fill-opacity .2s; }
.cm-zone-shape:hover { fill-opacity: .35; }
.cm-me span { display: block; width: 22px; height: 22px; border-radius: 999px; background: #1a73e8; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(26,115,232,.25); }
/* popup */
.cm-pop { font-size: .82rem; color: var(--charcoal); }
.cm-pop h3 { font-family: Oswald, sans-serif; text-transform: uppercase; font-size: 1.15rem; color: var(--forest); margin: .15rem 0 .35rem; line-height: 1.15; }
.cm-pop p { margin: .3rem 0 !important; }
.cm-pop-kind { display: flex; align-items: center; gap: .35rem; font-size: .66rem !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tiger-600); margin: 0 !important; }
.cm-pop dl { display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; margin: .4rem 0; }
.cm-pop dt { color: #6b6b64; }
.cm-pop dd { margin: 0; font-weight: 600; }
.cm-status { display: inline-block; font-weight: 700; font-size: .72rem; padding: .1rem .5rem; border-radius: 999px; background: #fde8e3; color: #b4442c; }
.cm-status.cm-st-open { background: #e3f4ea; color: #1f7a45; }
.cm-dist { color: #6b6b64; font-size: .75rem; }
.cm-pop-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.cm-btn { display: inline-flex; align-items: center; padding: .4rem .75rem; border-radius: 999px; font-weight: 700; font-size: .75rem; border: 1px solid var(--sand-200); color: var(--forest) !important; background: #fff; text-decoration: none !important; }
.cm-btn.is-primary { background: var(--tiger); border-color: var(--tiger); color: #fff !important; }
.leaflet-popup-content-wrapper { border-radius: 14px; }
/* full screen */
.cm.is-full { position: fixed; inset: 0; z-index: 9000; background: var(--sand-50); padding: .75rem; display: flex; flex-direction: column; }
.cm.is-full .cm-body { flex: 1; min-height: 0; }
.cm.is-full .cm-stage, .cm.is-full .cm-map { height: 100%; }
.cm.is-full .cm-list { max-height: none !important; flex: 1; }
.cm.is-full .cm-body { grid-template-rows: minmax(0, 1fr); }
@media (max-width: 759px) { .cm.is-full .cm-side { display: none; } }
html.cm-lock { overflow: hidden; }
.cm-howto { display: grid; gap: .35rem; margin-top: 1rem !important; padding: 0 !important; list-style: none !important; font-size: .85rem; }
.cm-howto li { display: flex; gap: .5rem; align-items: flex-start; margin: 0 !important; padding: 0 !important; }
.cm-howto li::before { display: none !important; }
.cm-howto svg { color: var(--tiger-600); flex: none; margin-top: .2rem; }

/* Transport panel: one full-width column. Its pickup field carries the form's sm:col-span-2, which inside this
   grid would invent a second column and squeeze the vehicle cards beside the recommendation. */
.transport-panel { grid-template-columns: minmax(0, 1fr); }
.transport-panel > * { grid-column: 1 / -1 !important; min-width: 0; }

/* Footer tiger once the Lottie walk cycle is running (assets/js/tiger-walk.js): drop the static silhouette mask,
   widen to the animation's proportions (incl. tail) and let JS move it with transform. */
.divider-tiger.is-walking { -webkit-mask: none; mask: none; background: none; width: 154px; height: 48px; will-change: transform; }
.divider-tiger.is-walking svg { display: block; width: 100% !important; height: 100% !important; max-width: none; }
@media (min-width: 768px) { .divider-tiger.is-walking { width: 232px; height: 72px; } }

/* ---------- Parallax (assets/js/app.js "parallax"): uses the individual `translate` property so it composes with
   the existing sway / Ken Burns / fade-in animations instead of overriding their `transform`. ---------- */
[data-px] { will-change: translate; }
/* Second, fainter row of grass behind every grass edge: depth for the parallax (no extra image, same tile) */
.divider::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 138%; z-index: 0; background: currentColor; opacity: .38;
  -webkit-mask: url(../img/grass-edge.svg) repeat-x 150px bottom / auto 100%; mask: url(../img/grass-edge.svg) repeat-x 150px bottom / auto 100%;
  translate: 0 var(--px-back, 0px); }
@media (prefers-reduced-motion: reduce) { [data-px] { translate: none !important; opacity: 1 !important; } .divider::before { translate: none; } }

/* ---------- Tiger-stripe page-loading strip (assets/js/app.js): appears only if a page change takes > 400 ms ---------- */
.nav-progress { position: fixed; inset: 0 0 auto; z-index: 10000; height: 4px; pointer-events: none; opacity: 0; transition: opacity .25s; }
.nav-progress.is-on { opacity: 1; }
.np-fill { position: relative; display: block; height: 100%; width: 0; border-radius: 0 4px 4px 0; transition: width .25s ease-out;
  background: repeating-linear-gradient(115deg, #E67E22 0 14px, #1E1E1C 14px 20px, #F39C3D 20px 30px, #1E1E1C 30px 34px);
  background-size: 68px 100%; box-shadow: 0 0 10px rgba(230,126,34,.7), 0 1px 3px rgba(0,0,0,.35); animation: np-run .6s linear infinite; }
@keyframes np-run { to { background-position: 68px 0; } }
.np-paw { position: absolute; right: -9px; top: -6px; width: 16px; height: 16px; background: #E67E22; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='10' r='2.2'/%3E%3Ccircle cx='10' cy='6' r='2.2'/%3E%3Ccircle cx='14' cy='6' r='2.2'/%3E%3Ccircle cx='18' cy='10' r='2.2'/%3E%3Cpath d='M12 12c-3 0-5 3-5 5.5 0 1.5 1.5 2 2.5 1.7L12 18l2.5 1.2c1 .3 2.5-.2 2.5-1.7C17 15 15 12 12 12z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='10' r='2.2'/%3E%3Ccircle cx='10' cy='6' r='2.2'/%3E%3Ccircle cx='14' cy='6' r='2.2'/%3E%3Ccircle cx='18' cy='10' r='2.2'/%3E%3Cpath d='M12 12c-3 0-5 3-5 5.5 0 1.5 1.5 2 2.5 1.7L12 18l2.5 1.2c1 .3 2.5-.2 2.5-1.7C17 15 15 12 12 12z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: np-step .6s ease-in-out infinite alternate; }
@keyframes np-step { from { transform: rotate(-12deg) translateY(0); } to { transform: rotate(12deg) translateY(-1px); } }
@media (prefers-reduced-motion: reduce) { .np-fill, .np-paw { animation: none; } }

/* ---------- Home hero in photo mode (photos/hero/home.jpg) ---------- */
/* The photo carries the scene: hide the illustrated ridges, glowing eyes and fireflies; a forest grass edge
   grows up into the trust strip below instead of the sand wave. */
.hero.has-photo .layer-back, .hero.has-photo .layer-mid, .hero.has-photo .layer-front,
.hero.has-photo .tiger-eyes, .hero.has-photo .fireflies, .hero.has-photo .hero-sky { display: none; }
.hero.has-photo .hero-photo img { object-position: 72% 52%; animation-duration: 30s; }
.hero.has-photo .hero-photo::after { background:
  linear-gradient(90deg, rgba(6,23,13,.86) 0%, rgba(6,23,13,.62) 38%, rgba(6,23,13,.18) 68%, rgba(6,23,13,.05) 100%),
  linear-gradient(180deg, rgba(6,23,13,.35) 0%, transparent 30%, transparent 70%, rgba(6,23,13,.55) 100%); }
@media (max-width: 767px) {
  .hero.has-photo .hero-photo img { object-position: 62% 50%; }
  .hero.has-photo .hero-photo::after { background: linear-gradient(180deg, rgba(6,23,13,.78) 0%, rgba(6,23,13,.6) 45%, rgba(6,23,13,.35) 70%, rgba(6,23,13,.6) 100%); }
}
.hero-credit { position: absolute; z-index: 3; right: .75rem; bottom: calc(var(--grass-h) + .35rem); margin: 0; font-size: .62rem; line-height: 1.3; color: rgba(251,247,240,.62); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
/* Wide screens: anchor the photo to the right and feather its left edge into the forest, so the headline sits on a
   calm dark field and the tiger walks in from the right (it would otherwise land under the text at ~43% width). */
@media (min-width: 768px) {
  .hero.has-photo .hero-photo { left: 30%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
  .hero.has-photo .hero-photo img { object-position: 50% 45%; }
  .hero.has-photo .hero-photo::after { background: linear-gradient(90deg, rgba(6,23,13,.55) 0%, rgba(6,23,13,.15) 45%, rgba(6,23,13,0) 100%), linear-gradient(180deg, rgba(6,23,13,.3) 0%, transparent 28%, transparent 72%, rgba(6,23,13,.5) 100%); }
  .hero.has-photo { background: radial-gradient(700px 500px at 0% 30%, rgba(31,86,52,.55), transparent 70%), var(--forest); }
}
@media (max-width: 767px) { .hero.has-photo .hero-photo img { object-position: 55% 50%; } }
/* Phones: the buttons fill the upper hero, so the photo lives in the lower part (faded in from the forest)
   and the tiger walks along beneath the buttons instead of hiding behind them. */
@media (max-width: 767px) {
  .hero.has-photo > .relative { padding-bottom: 15rem; }
  .hero.has-photo .hero-photo { top: 54%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
  .hero.has-photo .hero-photo img { object-position: 55% 50%; }
  .hero.has-photo .hero-photo::after { background: linear-gradient(180deg, rgba(6,23,13,.25) 0%, rgba(6,23,13,0) 40%, rgba(6,23,13,.35) 100%); }
  .hero.has-photo { background: radial-gradient(500px 400px at 100% 0%, rgba(230,126,34,.22), transparent 60%), var(--forest); }
}