/* Honavar.com · styles. No external dependencies. */

@font-face { font-family: "Bricolage"; src: url(../fonts/bricolage.woff2) format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(../fonts/newsreader.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(../fonts/newsreader-italic.woff2) format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Baloo Tamma"; src: url(../fonts/baloo-tamma-kn-700.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0C80-0CFF, U+200C-200D, U+25CC; }

/* Layout: long editorial scroll; dusk scenes (hero, drive, culture) are fixed-colour stages,
   reading sections sit on a mangrove-mist ground that follows the viewer's theme. */
:root {
  --bg: #f2f7fa;
  --bg-2: #e4eef4;
  --surface: #ffffff;
  --ink: #0f2235;
  --muted: #4a5d6e;
  --line: #c8d8e3;
  --laterite: #c8162f;
  --gold: #e0a800;
  --gold-ink: #7a5c00;
  --teal: #0c7cb0;
  --on-accent: #fffaf0;

  --dusk: #0b3556;
  --night: #071d33;
  --scene-ink: #f3f9fd;
  --scene-muted: #b9d3e4;
  --scene-gold: #fecc00;

  --display: "Bricolage", "Avenir Next Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --kn: "Baloo Tamma", "Noto Sans Kannada", "Tunga", "Kannada Sangam MN", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--1: clamp(.82rem, .8rem + .1vw, .9rem);
  --step-0: clamp(1.02rem, .98rem + .2vw, 1.14rem);
  --step-1: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.35rem + 1.1vw, 2.25rem);
  --step-3: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
  --step-4: clamp(2.6rem, 1.7rem + 4.4vw, 5.6rem);

  --radius: 14px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1622; --bg-2: #0e1d2c; --surface: #122434; --ink: #e6f0f7; --muted: #9fb4c6; --line: #23384c;
    --laterite: #ff6b7d; --gold: #fecc00; --gold-ink: #fecc00; --teal: #4cc0f0; --on-accent: #1a0f05;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a1622; --bg-2: #0e1d2c; --surface: #122434; --ink: #e6f0f7; --muted: #9fb4c6; --line: #23384c;
  --laterite: #ff6b7d; --gold: #fecc00; --gold-ink: #fecc00; --teal: #4cc0f0; --on-accent: #1a0f05;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: var(--step-0); line-height: 1.6;
  font-optical-sizing: auto; overflow-x: clip;
}
img, svg, canvas { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; margin: 0; font-weight: 750; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -.01em; }
p { margin: 0; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: 0; }
.kicker { font-family: var(--display); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .14em; font-weight: 650; color: var(--laterite); }
.fine { font-size: var(--step--1); color: var(--muted); max-width: 70ch; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--gold); color: #1a0f05; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 16px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.band { padding-block: clamp(64px, 9vw, 128px); }
.section-head { display: grid; gap: 14px; max-width: 62ch; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head p:not(.kicker) { color: var(--muted); }

/* ---------- Buttons & chips ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em; font: 600 var(--step--1)/1 var(--display);
  letter-spacing: .02em; padding: 14px 20px; border-radius: 999px; text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; transition: transform .2s, background .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--scene-gold); color: #241405; }
.btn-ghost { background: rgba(255,255,255,.06); color: var(--scene-ink); border-color: rgba(255,240,220,.35); backdrop-filter: blur(6px); }
.btn-ghost[aria-pressed="true"] { background: var(--scene-ink); color: var(--dusk); }
.btn-sm { padding: 10px 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: 600 var(--step--1)/1 var(--display); padding: 9px 14px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line); background: transparent; color: var(--ink); transition: all .2s;
}
.chip:hover { border-color: var(--teal); }
.chip.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- Progress & nav ---------- */
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; padding-top: env(safe-area-inset-top, 0px); }
.progress span { display: block; height: 3px; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--laterite), var(--scene-gold)); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 51; background: rgba(7, 29, 51, .94); }
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transition: background .3s, box-shadow .3s; background: linear-gradient(180deg, rgba(5, 22, 40,.55), rgba(5, 22, 40,0)); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1280px; margin: 0 auto; padding: 12px var(--gutter-r) 12px var(--gutter-l); }
.nav.is-solid { background: rgba(7, 29, 51, .95); backdrop-filter: blur(12px) saturate(1.4); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--scene-ink); flex: none; }
.logo-badge { display: inline-flex; align-items: center; background: #fff; border-radius: 12px; padding: 5px 10px; box-shadow: 0 6px 20px -8px rgba(0,0,0,.5); line-height: 0; }
.logo-badge .logo { height: 38px; width: auto; display: block; }
.brand-kn { font-family: var(--kn); font-weight: 700; font-size: 1.45rem; color: var(--scene-gold); line-height: 1; }
.nav ul { list-style: none; margin: 0; padding: 0; }
#navLinks { display: flex; gap: 2px; align-items: center; }
#navLinks > li { position: relative; }
#navLinks > li > a, #navLinks > li > button { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 999px; font: 600 .93rem/1 var(--display); color: var(--scene-ink); text-decoration: none; background: none; border: 0; cursor: pointer; opacity: .9; }
#navLinks > li > a:hover, #navLinks > li > button:hover, #navLinks > li.is-here > a, #navLinks > li.is-here > button { opacity: 1; background: rgba(255,240,220,.13); }
#navLinks .nav-shop { color: var(--scene-gold); }
.chev { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; }
.nav .sub { position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px; padding: 8px; background: #0b2d4a; border: 1px solid rgba(255,240,220,.12); border-radius: 14px; box-shadow: 0 24px 50px rgba(0,0,0,.45); display: none; }
#navLinks > li:nth-last-child(-n+3) > .sub { left: auto; right: 0; }
.has-sub:hover > .sub, .has-sub.is-open > .sub, .has-sub:focus-within > .sub { display: block; }
.nav .sub a { display: block; padding: 11px 12px; border-radius: 9px; font: 560 .95rem/1.2 var(--display); color: var(--scene-ink); text-decoration: none; }
.nav .sub a:hover { background: rgba(255,240,220,.12); color: var(--scene-gold); }
.nav-toggle { display: none; }
@media (max-width: 1100px) { .brand-kn { display: none; } }
@media (max-width: 1020px) {
  .nav-toggle { display: inline-block; font: 600 .9rem/1 var(--display); color: var(--scene-ink); background: rgba(255,255,255,.08); border: 1px solid rgba(255,240,220,.3); padding: 10px 15px; border-radius: 999px; cursor: pointer; }
  #navLinks { position: fixed; left: 0; right: 0; top: calc(64px + env(safe-area-inset-top, 0px)); bottom: 0; flex-direction: column; align-items: stretch; gap: 0; background: #0a2a45; padding: 10px var(--gutter-r) 40px var(--gutter-l); overflow-y: auto; display: none; }
  #navLinks.is-open { display: flex; }
  #navLinks > li { border-bottom: 1px solid rgba(255,240,220,.1); }
  #navLinks > li > a, #navLinks > li > button { width: 100%; justify-content: space-between; padding: 16px 6px; font-size: 1.1rem; border-radius: 0; }
  .nav .sub { position: static; display: none; border: 0; box-shadow: none; background: none; padding: 0 0 10px 12px; min-width: 0; }
  .has-sub:hover > .sub, .has-sub:focus-within > .sub { display: none; }
  .has-sub.is-open > .sub { display: block; }
  body.menu-open { overflow: hidden; }
  .logo-badge .logo { height: 34px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: clamp(620px, 94vh, 980px); display: grid; align-items: end; background: var(--dusk); color: var(--scene-ink); overflow: hidden; isolation: isolate; }
.hero-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; }
.rain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; opacity: 0; transition: opacity 1.2s; }
.hero.is-monsoon .rain { opacity: 1; }
.hero.is-monsoon .hero-scene { filter: saturate(.35) brightness(.62) hue-rotate(-25deg); transition: filter 1.4s; }
.hero-scene { transition: filter 1.4s; }
.hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 29, 51,.55) 0%, rgba(7, 29, 51,0) 22%, rgba(7, 29, 51,0) 45%, rgba(7, 29, 51,.78) 82%, rgba(7, 29, 51,.92) 100%); }
.hero-content { padding-block: 140px 64px; display: grid; gap: 18px; }
.eyebrow { font: 600 var(--step--1)/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--scene-muted); }
.hero-kn { font-family: var(--kn); font-weight: 700; font-size: clamp(3.4rem, 2rem + 8vw, 9rem); line-height: .95; color: var(--scene-gold); text-shadow: 0 6px 40px rgba(255, 160, 80, .35); padding-bottom: .12em; }
.hero h1 { font-size: clamp(2.4rem, 1.5rem + 3.8vw, 5rem); font-weight: 780; font-stretch: 88%; max-width: 19ch; }
.lede { font-size: var(--step-1); line-height: 1.45; max-width: 46ch; color: #f3e2d6; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.hero-live { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 14px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,240,220,.18); max-width: 640px; }
.hero-live div { display: grid; gap: 2px; }
.hero-live dt { font: 600 .72rem/1 var(--display); text-transform: uppercase; letter-spacing: .14em; color: var(--scene-muted); }
.hero-live dd { margin: 0; font: 650 1.1rem/1.2 var(--display); font-variant-numeric: tabular-nums; }
.scroll-cue { position: absolute; left: 50%; bottom: 18px; width: 26px; height: 42px; border: 2px solid rgba(255,240,220,.5); border-radius: 14px; transform: translateX(-50%); }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--scene-gold); animation: cue 1.8s infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1 } 80% { transform: translateY(14px); opacity: 0 } 100% { opacity: 0 } }
@media (max-width: 640px) { .scroll-cue { display: none; } .hero-content { padding-block: 120px 40px; } }

/* hero scene animation */
.sun { animation: sunPulse 6s ease-in-out infinite; transform-origin: 560px 585px; }
@keyframes sunPulse { 50% { transform: scale(1.03); } }
.star { animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .2; } }
.cloud { animation: drift 60s linear infinite alternate; }
.cloud.c2 { animation-duration: 80s; } .cloud.c3 { animation-duration: 95s; }
@keyframes drift { to { transform: translateX(120px); } }
.wave { fill: none; stroke: #ffb38a; stroke-linecap: round; stroke-dasharray: 26 44; animation: wave 9s linear infinite; }
.wave.w1 { stroke-width: 1.2; opacity: .45; }
.wave.w2 { stroke-width: 1.6; opacity: .3; animation-duration: 12s; animation-direction: reverse; stroke-dasharray: 40 70; }
.wave.w3 { stroke-width: 2; opacity: .22; animation-duration: 14s; stroke-dasharray: 60 90; stroke: #7cc8ef; }
.wave.w4 { stroke-width: 2.4; opacity: .16; animation-duration: 18s; animation-direction: reverse; stroke-dasharray: 80 120; stroke: #5fb3e6; }
@keyframes wave { to { transform: translateX(-200px); } }
.glint { animation: glint 2.4s ease-in-out infinite; }
@keyframes glint { 50% { opacity: .15; transform: scaleX(.6); } }
.boat { animation: bob 5s ease-in-out infinite; transform-origin: 700px 770px; }
@keyframes bob { 0%,100% { transform: translate(0,0) rotate(0) } 25% { transform: translate(-6px,3px) rotate(-1.5deg) } 75% { transform: translate(6px,-2px) rotate(1.5deg) } }
.lantern { animation: flick 1.4s ease-in-out infinite; }
.blink { animation: flick 2.2s steps(2) infinite; }
@keyframes flick { 50% { opacity: .05; } }
.palm .fronds { animation: sway 7s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; fill: #041321; }
.palm.p2 .fronds { animation-duration: 8.5s; animation-delay: -2s; }
.palm.p3 .fronds { animation-duration: 6s; animation-delay: -4s; }
@keyframes sway { 50% { transform: rotate(4deg); } }
.bird { animation: fly 26s linear infinite; }
.bird.b1 { animation-delay: -4s; } .bird.b2 { animation-delay: -13s; animation-duration: 30s; } .bird.b3 { animation-delay: -20s; animation-duration: 22s; }
@keyframes fly {
  0% { transform: translate(1700px, 240px) scale(1, 1); }
  25% { transform: translate(1250px, 200px) scale(1, .4); }
  50% { transform: translate(800px, 230px) scale(1, 1); }
  75% { transform: translate(350px, 180px) scale(1, .4); }
  100% { transform: translate(-100px, 210px) scale(1, 1); }
}
.train { animation: train 30s linear infinite; }
@keyframes train { 0% { transform: translateX(1700px); } 72%, 100% { transform: translateX(-640px); } }
.firefly { animation: ff 4s ease-in-out infinite; }
@keyframes ff { 0%,100% { opacity: 0; transform: translate(0,0); } 50% { opacity: 1; transform: translate(6px,-10px); } }

/* ---------- Why ---------- */
.why { background: var(--bg); }
.why-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.why-text { display: grid; gap: 18px; min-width: 0; }
.why-text p:not(.kicker) { max-width: 60ch; }
.why-text p:nth-of-type(2)::first-letter { font-family: var(--display); font-weight: 800; float: left; font-size: 3.6em; line-height: .82; padding: 6px 10px 0 0; color: var(--laterite); }
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stats li { background: var(--surface); padding: 22px 20px; display: grid; gap: 8px; align-content: start; }
.stats b { font: 800 clamp(2rem, 1.4rem + 2vw, 3rem)/1 var(--display); font-stretch: 85%; color: var(--teal); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stats span { font-size: var(--step--1); color: var(--muted); line-height: 1.4; }
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; } }

/* ---------- Drive ---------- */
.drive { background: radial-gradient(1200px 600px at 70% 0%, #0f4a78 0%, var(--night) 60%); color: var(--scene-ink); padding-top: clamp(64px, 9vw, 120px); }
.drive .kicker { color: var(--scene-gold); }
.drive-head { display: grid; gap: 14px; max-width: 1240px; justify-items: start; }
.drive-head p:not(.kicker) { color: var(--scene-muted); max-width: 56ch; }
.drive-track { position: relative; height: 640vh; margin-top: 32px; }
.drive-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(260px, 30%) 1fr; gap: 20px;
  padding: calc(76px + env(safe-area-inset-top, 0px)) var(--gutter-r) 24px var(--gutter-l); max-width: 1500px; margin: 0 auto;
}
.drive-map { position: relative; min-height: 0; border-radius: 18px; background: #0f1a33; overflow: hidden; border: 1px solid rgba(255,240,220,.1); }
.drive-map svg { width: 100%; height: 100%; display: block; }
.drive-cam { position: relative; min-height: 0; border-radius: 18px; overflow: hidden; background: #0c3456; border: 1px solid rgba(255,240,220,.1); }
.drive-cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hud { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; flex-wrap: wrap; gap: 8px; pointer-events: none; }
.hud-cell { background: rgba(5, 22, 40, .62); backdrop-filter: blur(8px); border: 1px solid rgba(255,240,220,.16); border-radius: 12px; padding: 8px 12px; display: grid; gap: 3px; }
.hud-cell span { font: 600 .66rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--scene-muted); }
.hud-cell b { font: 700 1.05rem/1 var(--display); font-variant-numeric: tabular-nums; color: var(--scene-ink); }
.hud-cell i { font-style: normal; color: var(--scene-gold); }
.hud-next { margin-left: auto; }
.drive-story {
  position: absolute; left: 14px; right: 14px; top: 84px; max-width: 470px; padding: 16px 18px; border-radius: 14px;
  background: rgba(5, 22, 40, .7); backdrop-filter: blur(10px); border: 1px solid rgba(255,240,220,.16);
  transition: opacity .35s, transform .35s;
}
.drive-story.is-swap { opacity: 0; transform: translateY(8px); }
.stop-name { font: 750 var(--step-1)/1.1 var(--display); color: var(--scene-gold); margin-bottom: 6px; }
.stop-text { font-size: var(--step--1); line-height: 1.5; color: #efe1d6; }
.stop-text [lang="kn"] { font-family: var(--kn); }
@media (max-width: 860px) {
  .drive-sticky { grid-template-columns: 1fr; grid-template-rows: 1fr; padding-top: calc(70px + env(safe-area-inset-top, 0px)); }
  .drive-map { position: absolute; z-index: 2; width: 34%; max-width: 150px; aspect-ratio: 52 / 76; height: auto; right: calc(var(--gutter-r) + 10px); top: calc(150px + env(safe-area-inset-top, 0px)); opacity: .94; border-radius: 12px; }
  .drive-cam { grid-row: 1; }
  .hud-next { margin-left: 0; }
  .hud { right: 14px; }
  .drive-map { top: auto; bottom: 14px; left: 14px; right: auto; width: 30%; max-width: 120px; }
  .drive-story { top: auto; bottom: auto; position: absolute; top: 140px; }
}
@media (max-width: 420px) { .drive-story { top: 132px; padding: 12px 14px; } .stop-text { font-size: .86rem; } .hud-cell { padding: 6px 10px; } }

/* ---------- Explore ---------- */
.explore { background: var(--bg-2); }
.explore-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.atlas { margin: 0; position: sticky; top: 84px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.atlas svg { display: block; width: 100%; height: auto; }
.atlas figcaption { font-size: .78rem; color: var(--muted); padding: 6px 6px 2px; }
.explore-list { display: grid; gap: 18px; min-width: 0; }
.place-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
.place {
  display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 12px; border-radius: var(--radius);
  background: var(--surface); border: 1.5px solid var(--line); cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; text-align: left; color: inherit; font: inherit;
}
.place:hover, .place.is-active { border-color: var(--teal); transform: translateX(4px); box-shadow: -4px 0 0 var(--teal); }
.place .art { width: 96px; height: 96px; border-radius: 10px; overflow: hidden; }
.place .art svg { width: 100%; height: 100%; display: block; }
.place h3 { font-size: 1.12rem; }
.place-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font: 600 .78rem/1.2 var(--display); color: var(--muted); margin: 4px 0 6px; letter-spacing: .02em; }
.place-meta .kn { font-family: var(--kn); color: var(--laterite); font-weight: 700; }
.place p { font-size: .95rem; line-height: 1.5; }
.place .tip { display: none; margin-top: 8px; font-size: .9rem; color: var(--teal); }
.place.is-active .tip { display: block; }
.place[hidden] { display: none !important; }
@media (max-width: 960px) { .explore-grid { grid-template-columns: 1fr; } .atlas { position: relative; top: 0; } }
@media (max-width: 420px) { .place { grid-template-columns: 72px 1fr; gap: 12px; } .place .art { width: 72px; height: 72px; } }

/* atlas */
.at-sea { fill: #bfdad6; }
.at-land { fill: #e7e1cc; }
.at-river { fill: #9cc9c4; }
.at-mangrove { fill: #6ea888; }
.at-road { stroke: #c8162f; stroke-width: 3; fill: none; stroke-dasharray: 0; opacity: .7; }
.at-rail { stroke: #3a3a3a; stroke-width: 2; fill: none; stroke-dasharray: 6 4; }
.at-label { font: 600 13px var(--display); fill: #3c4a45; }
.at-label.sea { font-style: italic; fill: #48817c; font-family: var(--body); font-size: 18px; letter-spacing: .1em; }
.at-label.river { font-family: var(--body); font-style: italic; fill: #2b6c68; font-size: 15px; }
.at-arrow { font: 600 12px var(--display); fill: #6a5b4a; }
.pin { cursor: pointer; }
.pin circle.dot { fill: var(--laterite); stroke: #fff; stroke-width: 2.5; transition: r .2s; }
.pin circle.halo { fill: var(--laterite); opacity: 0; }
.pin text { font: 700 11px var(--display); fill: #1d2a26; paint-order: stroke; stroke: #f6f2e4; stroke-width: 4px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.pin:hover text, .pin.is-active text, .pin.is-hover text { opacity: 1; }
.pin.is-hover circle.dot { fill: var(--teal); }
.pin.is-active circle.dot { r: 10; fill: var(--teal); }
.pin.is-active circle.halo { animation: halo 1.6s infinite; }
.pin.is-dim { opacity: .25; }
@keyframes halo { 0% { r: 8; opacity: .5 } 100% { r: 26; opacity: 0 } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .at-sea { fill: #16353a; } :root:not([data-theme="light"]) .at-land { fill: #23302a; } :root:not([data-theme="light"]) .at-river { fill: #1f4a4c; }
  :root:not([data-theme="light"]) .at-label { fill: #c4d2cc; } :root:not([data-theme="light"]) .at-label.sea, :root:not([data-theme="light"]) .at-label.river { fill: #7cc4bb; }
  :root:not([data-theme="light"]) .pin text { fill: #eef4ef; stroke: #10201c; } :root:not([data-theme="light"]) .at-rail { stroke: #aab; } :root:not([data-theme="light"]) .at-arrow { fill: #c9b9a2; }
}
:root[data-theme="dark"] .at-sea { fill: #16353a; } :root[data-theme="dark"] .at-land { fill: #23302a; } :root[data-theme="dark"] .at-river { fill: #1f4a4c; }
:root[data-theme="dark"] .at-label { fill: #c4d2cc; } :root[data-theme="dark"] .at-label.sea, :root[data-theme="dark"] .at-label.river { fill: #7cc4bb; }
:root[data-theme="dark"] .pin text { fill: #eef4ef; stroke: #10201c; } :root[data-theme="dark"] .at-rail { stroke: #aab; } :root[data-theme="dark"] .at-arrow { fill: #c9b9a2; }

/* ---------- River strip ---------- */
.river { background: linear-gradient(180deg, #0e4d4f, #0a3438); color: #e6f4ef; padding-block: clamp(56px, 8vw, 100px) 40px; overflow: hidden; }
.river .kicker { color: #ffd27a; }
.river-in { display: grid; gap: 14px; }
.river-in p:not(.kicker) { max-width: 60ch; color: #bfe0d8; }
.river-svg { width: 100%; height: 160px; display: block; margin-top: 24px; }
.river-line { fill: none; stroke: #2c8a86; stroke-width: 26; stroke-linecap: round; opacity: .8; }
.river-flow { fill: none; stroke: #bff3ea; stroke-width: 3; stroke-dasharray: 3 22; stroke-linecap: round; animation: flow 3s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -50; } }
.river-stops { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 8px; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.river-stops li { display: grid; gap: 2px; border-top: 2px solid #ffd27a; padding-top: 10px; }
.river-stops b { font: 700 1.05rem/1.2 var(--display); }
.river-stops span { font-size: .88rem; color: #a9d4ca; }
@media (max-width: 640px) { .river-stops { grid-template-columns: 1fr 1fr; } }

/* ---------- Trips ---------- */
.trip-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.trip { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: transform .3s, box-shadow .3s; }
.trip:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -24px rgba(10, 40, 35, .45); }
.trip .art { aspect-ratio: 16 / 9; max-width: 100%; }
.trip .art svg { width: 100%; height: 100%; display: block; }
.trip-body { padding: 16px 18px 20px; display: grid; gap: 8px; align-content: start; }
.trip-meta { display: flex; gap: 10px; flex-wrap: wrap; font: 600 .8rem/1 var(--display); color: var(--laterite); letter-spacing: .03em; }
.trip p { font-size: .96rem; line-height: 1.5; }
.trip .tip { color: var(--teal); font-size: .9rem; }
@media (max-width: 960px) { .trip-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .trip-cards { grid-template-columns: 1fr; } }

/* ---------- Stays ---------- */
.stays { background: var(--bg-2); }
.stay-bar { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; margin-bottom: 14px; }
.stay-count { font: 600 .85rem/1 var(--display); color: var(--muted); margin-bottom: 18px; letter-spacing: .02em; }
.stay-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 18px; margin-bottom: 28px; }
.stay { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; transition: transform .3s, box-shadow .3s; }
.stay:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -26px rgba(10, 40, 35, .5); }
.stay-art { position: relative; aspect-ratio: 16 / 8; max-width: 100%; overflow: hidden; }
.stay-art svg, .stay-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stay-type { position: absolute; left: 12px; top: 12px; font: 700 .72rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.9); color: #1d2a26; padding: 7px 10px; border-radius: 999px; }
.stay-body { padding: 16px 18px; display: grid; gap: 8px; align-content: start; }
.stay h3 { font-size: 1.2rem; }
.stay-area { font: 600 .82rem/1.3 var(--display); color: var(--muted); }
.stay p { font-size: .95rem; line-height: 1.5; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tags span { font: 600 .74rem/1 var(--display); padding: 6px 9px; border-radius: 6px; background: var(--bg-2); color: var(--ink); }
.stay-foot { padding: 14px 18px 18px; display: grid; gap: 10px; border-top: 1px dashed var(--line); }
.stay-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 600 .82rem/1.3 var(--display); }
.stay-facts .rate { color: var(--teal); }
.stay-facts .price { color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.book { display: flex; flex-wrap: wrap; gap: 8px; }
.book a { font: 700 .8rem/1 var(--display); padding: 10px 12px; border-radius: 10px; text-decoration: none; color: #fff; display: inline-flex; gap: 6px; align-items: center; transition: filter .2s, transform .2s; }
.book a:hover { filter: brightness(1.12); transform: translateY(-1px); }
.book a::after { content: "↗"; font-size: .9em; opacity: .85; }
.book .p-booking { background: #003b95; }
.book .p-goibibo { background: #2366c9; }
.book .p-makemytrip { background: #c8202f; }
.book .p-airbnb { background: #d93a50; }

/* ---------- Plan ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.tab { font: 700 1rem/1 var(--display); padding: 12px 18px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.tab[aria-selected="true"] { background: var(--laterite); border-color: var(--laterite); color: var(--on-accent); }
.itin { list-style: none; margin: 0 0 clamp(48px, 7vw, 88px); padding: 0; display: grid; gap: 0; position: relative; }
.itin::before { content: ""; position: absolute; left: 92px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--laterite), var(--gold)); }
.itin li { display: grid; grid-template-columns: 80px 1fr; gap: 28px; padding: 14px 0; position: relative; animation: rise .5s both; }
.itin li::before { content: ""; position: absolute; left: 86px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 3px solid var(--laterite); }
.itin time { font: 700 .95rem/1.4 var(--display); color: var(--laterite); text-align: right; padding-top: 2px; font-variant-numeric: tabular-nums; }
.itin h3 { font-size: 1.15rem; margin-bottom: 4px; }
.itin p { color: var(--muted); max-width: 62ch; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 520px) { .itin::before { left: 72px; } .itin li { grid-template-columns: 60px 1fr; gap: 26px; } .itin li::before { left: 66px; } }

.season { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px 40px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 3vw, 32px); }
.season-head { display: grid; gap: 10px; }
.season-head p { color: var(--muted); font-size: .95rem; }
.season-chart { grid-row: span 2; overflow-x: auto; }
.season-chart svg { width: 100%; min-width: 520px; height: auto; display: block; }
.season-note { border-left: 3px solid var(--gold); padding: 4px 0 4px 14px; display: grid; gap: 4px; }
.season-note b { font: 750 1.4rem/1.1 var(--display); }
.season-note span { font: 600 .85rem/1.3 var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.c-bar { fill: var(--teal); opacity: .55; cursor: pointer; transition: opacity .2s; }
.c-bar.is-on { opacity: 1; fill: var(--laterite); }
.c-best { fill: var(--gold); opacity: .14; }
.c-line { fill: none; stroke: var(--gold-ink); stroke-width: 2.5; }
.c-line.min { stroke-dasharray: 5 5; opacity: .7; }
.c-txt { font: 600 11px var(--display); fill: var(--muted); }
.c-txt.on { fill: var(--ink); }
.c-grid { stroke: var(--line); stroke-width: 1; }
.c-hit { fill: transparent; cursor: pointer; }
@media (max-width: 860px) { .season { grid-template-columns: 1fr; } .season-chart { grid-row: auto; } }

/* ---------- Arrive ---------- */
.arrive { background: var(--bg); }
.arrive-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.arr { background: var(--surface); padding: 22px; display: grid; gap: 8px; align-content: start; }
.arr .mode { font: 700 .72rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--laterite); }
.arr h3 { font-size: 1.2rem; }
.arr .nums { font: 650 .95rem/1.2 var(--display); color: var(--teal); font-variant-numeric: tabular-nums; }
.arr p { font-size: .95rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 960px) { .arrive-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .arrive-cards { grid-template-columns: 1fr; } }

/* ---------- Food ---------- */
.taste { background: var(--bg-2); }
.food { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.dish { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.dish svg { width: 76px; height: 76px; transition: transform .6s; }
.dish:hover svg { transform: rotate(-14deg) scale(1.06); }
.dish h3 { font-size: 1.08rem; }
.dish .kn { font-family: var(--kn); font-weight: 700; color: var(--laterite); font-size: .95rem; }
.dish p { font-size: .92rem; line-height: 1.45; color: var(--muted); margin-top: 4px; }
@media (max-width: 960px) { .food { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .food { grid-template-columns: 1fr; } }

/* ---------- Culture ---------- */
.culture { background: radial-gradient(900px 500px at 20% 10%, #3a1214 0%, #06182a 60%); color: #f6e7d6; padding-block: clamp(64px, 9vw, 128px); }
.culture .kicker { color: #ffcf5a; }
.culture-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-bottom: clamp(48px, 7vw, 90px); }
.yaksha { display: grid; justify-items: center; gap: 16px; }
.yaksha svg { width: min(100%, 380px); height: auto; overflow: visible; }
.kirita { transform-origin: 200px 170px; }
.yaksha.is-beat .kirita { animation: yakBeat .42s ease-in-out infinite; }
.yaksha.is-beat .ypulse { animation: ypulse .42s ease-in-out infinite; }
.yaksha.is-beat .pupils { animation: eyes 1.68s steps(1) infinite; }
@keyframes yakBeat { 50% { transform: translateY(-3px); } }
.kedige { transform-box: view-box; transform-origin: 200px 150px; }
.yaksha.is-beat .kedige { animation: yakFan .42s ease-in-out infinite; }
@keyframes yakFan { 50% { transform: scale(1.045); } }
@keyframes ypulse { 50% { opacity: .55; } }
@keyframes eyes { 0% { transform: translateX(-6px) } 25% { transform: translateX(6px) } 50% { transform: translateX(0) } 75% { transform: translateX(6px) } }
.pupils { transition: transform .1s; }
.culture-text { display: grid; gap: 16px; min-width: 0; }
.culture-text p:not(.kicker) { color: #e8d4c3; max-width: 62ch; }
.culture-text b { color: #ffcf5a; font-weight: 600; }
.culture .fine { color: #c7a99a; }
.culture .sub { color: #ffcf5a; }
.sub { font-size: var(--step-2); margin: 0 0 18px; }
.timeline-wrap { overflow-x: auto; margin-bottom: clamp(48px, 7vw, 90px); padding-bottom: 12px; scrollbar-color: #ffcf5a33 transparent; }
.timeline { list-style: none; margin: 0; padding: 26px 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 0; position: relative; min-width: max-content; }
.timeline li { position: relative; padding: 22px 22px 0 0; border-top: 2px solid #ffcf5a55; display: grid; gap: 6px; align-content: start; width: 240px; }
.timeline li::before { content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: #c8331f; border: 2px solid #ffcf5a; }
.timeline .yr { font: 800 2rem/1 var(--display); color: #ffcf5a; font-stretch: 85%; }
.timeline h4 { margin: 0; font: 700 1.05rem/1.2 var(--display); }
.timeline p { font-size: .92rem; line-height: 1.45; color: #d9c2b2; }
.phrases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 16px; perspective: 900px; }
.phrase { position: relative; height: 128px; border: 0; padding: 0; background: none; cursor: pointer; color: inherit; font: inherit; }
.phrase .in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,1.4,.5,1); }
.phrase.is-flipped .in { transform: rotateY(180deg); }
.phrase .f, .phrase .b { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 12px; display: grid; place-content: center; text-align: center; padding: 10px; gap: 4px; }
.phrase .f { background: #2a1418; border: 1px solid #ffcf5a40; }
.phrase .f b { font-family: var(--kn); font-size: 1.5rem; color: #ffcf5a; line-height: 1.25; }
.phrase .b { background: #ffcf5a; color: #2a1408; transform: rotateY(180deg); }
.phrase .b b { font: 750 1.15rem/1.15 var(--display); }
.phrase .b i { font-family: var(--body); font-size: .95rem; }
@media (max-width: 960px) { .culture-grid { grid-template-columns: 1fr; } .phrases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .phrases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Know ---------- */
.know-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: clamp(48px, 7vw, 80px); }
.know-grid article { padding: 20px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); display: grid; gap: 8px; align-content: start; }
.know-grid h3 { font-size: 1.1rem; color: var(--teal); }
.know-grid p { font-size: .95rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 960px) { .know-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .know-grid { grid-template-columns: 1fr; } }
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.faq summary { cursor: pointer; padding: 16px 52px 16px 18px; font: 650 1.05rem/1.3 var(--display); list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--laterite); transition: transform .3s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 18px 18px; color: var(--muted); max-width: 68ch; }

/* ================= Inner pages, in the first-design language ================= */
.more { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: var(--bg); }
.btn-red { background: var(--laterite); color: var(--on-accent); }
.band.tint { background: var(--bg-2); }
.section-head a, .prose a, .faq a, .detail-main a, .numbered a, .wrap.narrow p a, .facts a, .know-grid a, .fine a, .credits a { color: var(--laterite); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.culture .fine a, .culture-text a:not(.btn) { color: var(--scene-gold); }

/* crumbs */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font: 560 .84rem/1.4 var(--display); color: var(--scene-muted); margin-bottom: 4px; }
.crumbs a { color: var(--scene-muted); text-decoration: none; } .crumbs a:hover { color: var(--scene-gold); text-decoration: underline; }
.crumbs i { font-style: normal; opacity: .5; }
.crumbs [aria-current] { color: var(--scene-ink); }
.crumb-band { background: var(--dusk); padding-block: calc(86px + env(safe-area-inset-top, 0px)) 14px; }

/* page hero (dusk stage, like the home hero) */
.phero { position: relative; isolation: isolate; overflow: hidden; color: var(--scene-ink); background: var(--dusk); min-height: clamp(380px, 58vh, 600px); display: grid; align-items: end; }
.phero-bg { position: absolute; inset: 0; z-index: -3; }
.phero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform: scale(1.12) translate(-1.5%, -1%); } }
.phero-dusk { background: linear-gradient(180deg, #0b3556 0%, #125182 38%, #c8304a 70%, #ec7a46 92%, #ffc36a 100%); }
.phero-sun { position: absolute; left: 62%; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, #fff3c4 0 34%, rgba(255,190,110,.55) 35%, rgba(255,140,80,0) 70%); animation: sunPulse 6s ease-in-out infinite; }
.phero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 29, 51,.6) 0%, rgba(7, 29, 51,.15) 30%, rgba(7, 29, 51,.35) 55%, rgba(7, 29, 51,.9) 100%); }
.phero:not(.has-photo) .phero-scrim { background: linear-gradient(180deg, rgba(7, 29, 51,.35), rgba(7, 29, 51,.2) 50%, rgba(7, 29, 51,.75)); }
.phero-in { display: grid; gap: clamp(24px, 4vw, 64px); align-items: end; padding-block: calc(110px + env(safe-area-inset-top, 0px)) clamp(36px, 5vw, 64px); }
.phero.has-art .phero-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
.phero-text { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.phero h1 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.6rem); font-weight: 780; font-stretch: 88%; max-width: 17ch; text-shadow: 0 4px 30px rgba(0,0,0,.35); }
.phero .lede { font-size: var(--step-1); line-height: 1.45; max-width: 52ch; color: #f3e2d6; }
.phero-kn { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.6rem) !important; margin-bottom: -.15em; }
.phero-art { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); border: 1px solid rgba(255,240,220,.15); }
.phero-art .art { width: 100%; height: 100%; }
.phero .live-box { background: rgba(5, 22, 40,.55); border-color: rgba(255,240,220,.18); backdrop-filter: blur(8px); }
.phero .live-box dt { color: var(--scene-muted); } .phero .live-box dd { color: var(--scene-ink); }
@media (max-width: 860px) { .phero.has-art .phero-in { grid-template-columns: 1fr; } .phero-art { max-width: 420px; order: -1; } }

/* grids & cards (in the style of the day-trip cards) */
.grid { display: grid; gap: 18px; }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .g3, .g4 { grid-template-columns: 1fr; } }
a.trip { text-decoration: none; color: inherit; }
.trip .art { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.trip .art > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.trip:hover .art > img { transform: scale(1.05); }
.trip .art > .art { aspect-ratio: auto; height: 100%; }
.trip h3 { font-size: 1.2rem; }
.card-kn { font: 700 .95rem/1.2 var(--kn); color: var(--laterite); }
.go { font: 650 .86rem/1 var(--display); color: var(--teal); margin-top: 4px; }
.badge { position: absolute; left: 12px; top: 12px; font: 700 .74rem/1 var(--display); letter-spacing: .04em; background: rgba(255,255,255,.92); color: #1d2a26; padding: 7px 10px; border-radius: 999px; }
.trip-cards .trip .art { aspect-ratio: 16 / 9; }

/* stay cards with photos */
.stay-art { display: block; color: inherit; text-decoration: none; }
.stay-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.stay:hover .stay-art img { transform: scale(1.05); }
.stay-art .art { width: 100%; height: 100%; }
.stay-photos { position: absolute; right: 12px; bottom: 12px; font: 700 .72rem/1 var(--display); background: rgba(5, 22, 40,.72); color: #fff; padding: 6px 9px; border-radius: 999px; }
.stay h3 a { color: inherit; text-decoration: none; } .stay h3 a:hover { color: var(--laterite); }
.stay-more { font: 650 .86rem/1 var(--display); color: var(--teal); text-decoration: none; }
.stay-more:hover { text-decoration: underline; }
.book .p-bookdirect { background: #0c7cb0; }
.stay-art { aspect-ratio: 16 / 10 !important; }

/* home: place cards are articles now (with a link inside) */
.place { cursor: pointer; }
.place .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.place-link { display: none; margin-top: 8px; font: 650 .88rem/1 var(--display); color: var(--laterite); text-decoration: none; }
.place.is-active .place-link { display: inline-block; }
.place:focus-visible { outline: 3px solid var(--gold); }
.itin-panel .more { margin-top: -40px; margin-bottom: 56px; }
.arrive-cards a.arr { color: inherit; text-decoration: none; transition: background .2s; }
.arrive-cards a.arr:hover { background: var(--bg-2); }
.river-stops a { color: inherit; text-decoration: none; display: grid; gap: 2px; }
.river-stops a:hover b { color: var(--scene-gold); }

/* drive teaser */
.drive-teaser { background: radial-gradient(1000px 500px at 80% 0%, #0f4a78, var(--night) 65%); color: var(--scene-ink); padding-block: clamp(40px, 6vw, 72px); }
.drive-teaser .kicker { color: var(--scene-gold); }
.dt-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.dt-in h2 { font-size: var(--step-2); margin: 6px 0; }
.dt-in p:not(.kicker) { color: var(--scene-muted); max-width: 56ch; }

/* detail pages */
.detail-head { background: radial-gradient(1200px 520px at 75% 0%, #0f4a78 0%, var(--dusk) 62%); color: var(--scene-ink); padding-block: calc(96px + env(safe-area-inset-top, 0px)) 30px; }
.detail-head .eyebrow { margin-top: 18px; }
.detail-head h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 4rem); font-weight: 780; font-stretch: 88%; margin: 8px 0 8px; }
.detail-head .sub { color: var(--scene-muted); font: 560 1rem/1.4 var(--display); margin-bottom: 22px; }
.detail-head .rating { color: var(--scene-gold); font-weight: 700; }
.detail-head .credit { color: var(--scene-muted); }
.gallery { display: grid; gap: 8px; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 2.3 / 1; max-width: 100%; border-radius: 18px; overflow: hidden; }
.gallery.n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 2.4 / 1; }
.gallery.n2 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; }
.gallery.n3 { grid-template-columns: 2fr 1fr; }
.gtile { position: relative; display: block; overflow: hidden; background: #0c3456; min-height: 0; }
.gtile img, .gtile .art { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.gtile:hover img { transform: scale(1.04); }
.gmain { grid-row: span 2; }
.gallery.n2 .gmain, .gallery.n1 .gmain { grid-row: auto; }
.gallery.n4 .gtile:nth-child(4) { grid-column: span 2; }
.ghide { display: none; }
.gmore { position: absolute; right: 12px; bottom: 12px; font: 700 .82rem/1 var(--display); background: rgba(255,255,255,.95); color: #13211f; padding: 9px 12px; border-radius: 999px; }
.credit { font-size: .8rem; color: var(--muted); margin-top: 8px; }
.gall-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.gall-btn { display: none; margin-top: 8px; }
.detail-head .gall-btn { border-color: var(--scene-ink); color: var(--scene-ink); }
@media (max-width: 720px) {
  .gallery, .gallery.n3, .gallery.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: auto; aspect-ratio: auto; }
  .gmain { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; }
  .gtile:not(.gmain) { aspect-ratio: 4 / 3; }
  .gallery .gtile:nth-child(n+4) { display: none; }
  .gallery.n4 .gtile:nth-child(4) { grid-column: auto; }
  .gallery .gtile:nth-child(2) .gmore, .gallery .gtile:nth-child(3) .gmore { display: none; }
  .gall-btn { display: inline-flex; }
}
.detail { padding-top: clamp(32px, 5vw, 64px); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.detail-main { display: grid; gap: 22px; min-width: 0; }
.detail-main h2 { font-size: var(--step-2); margin-top: 8px; }
.book-box { position: sticky; top: 90px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: grid; gap: 16px; box-shadow: 0 30px 60px -44px rgba(10,40,35,.55); }
.book-box h2 { font-size: 1.3rem; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } .book-box { position: static; } }
.facts { margin: 0; display: grid; }
.facts div { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--line); }
.facts dt { font: 650 .78rem/1.4 var(--display); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding-top: 2px; }
.facts dd { margin: 0; font-size: .97rem; line-height: 1.45; }
.amen { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.amen li { font: 600 .86rem/1 var(--display); padding: 9px 12px; border-radius: 8px; background: var(--bg-2); }
.bks { display: grid; gap: 8px; }
.bk { font: 700 .95rem/1 var(--display); padding: 15px 16px; border-radius: 12px; text-decoration: none; color: #fff; text-align: center; transition: filter .2s, transform .2s; background: var(--teal); }
.bk:hover { filter: brightness(1.12); transform: translateY(-1px); }
.bk-booking { background: #003b95; } .bk-goibibo { background: #2366c9; } .bk-makemytrip { background: #c8202f; } .bk-airbnb { background: #d93a50; } .bk-bookdirect { background: #0c7cb0; }
.offer { border: 2px dashed var(--laterite); border-radius: 14px; padding: 16px; display: grid; gap: 8px; justify-items: start; background: color-mix(in srgb, var(--laterite) 7%, var(--surface)); }
.offer.big { padding: clamp(20px, 4vw, 40px); gap: 14px; margin-bottom: 24px; }
.caution { border-left: 4px solid var(--laterite); background: color-mix(in srgb, var(--laterite) 8%, var(--surface)); padding: 16px 18px; border-radius: 0 12px 12px 0; display: grid; gap: 6px; }
.caution b { font-family: var(--display); color: var(--laterite); }
.tips { background: var(--bg-2); border-radius: 14px; padding: 18px 20px; }
.tips h2 { font-size: 1.2rem !important; margin: 0 0 8px !important; }
.tips ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.strip a { display: block; aspect-ratio: 4 / 3; max-width: 100%; border-radius: 12px; overflow: hidden; }
.strip img { width: 100%; height: 100%; object-fit: cover; }
.prose { display: grid; gap: 16px; max-width: 70ch; }
.prose p { line-height: 1.7; }
.wrap.narrow { max-width: 860px; }
.narrow h2 { margin: 0 0 14px; }
.narrow > p + p { margin-top: 14px; }
.narrow > h2:not(:first-child) { margin-top: 34px; }
.numbered { display: grid; gap: 10px; padding-left: 22px; }
.credits { display: grid; gap: 6px; }
.mbook { display: none; }
@media (max-width: 720px) {
  .mbook { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; align-items: center; justify-content: space-between; gap: 12px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(7, 29, 51,.95); color: var(--scene-ink); backdrop-filter: blur(10px); }
  .mbook span { display: grid; font: 700 .95rem/1.2 var(--display); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mbook small { font-weight: 600; color: var(--scene-gold); }
  body:has(.mbook) .foot { padding-bottom: 96px; }
}

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); margin-bottom: 18px; }
table { width: 100%; border-collapse: collapse; font-size: .96rem; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font: 700 .76rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); background: var(--bg-2); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody th { font-family: var(--display); }
.tel { font-variant-numeric: tabular-nums; font-family: var(--display); font-weight: 650; white-space: nowrap; color: var(--laterite); }
.tgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.wrap:not(.narrow) .tgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tgrid article { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: grid; gap: 8px; align-content: start; }
.tgrid h3 { font-size: 1.1rem; color: var(--teal); }
.tgrid h3 a { color: inherit; }
.tgrid p { font-size: .95rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 980px) { .wrap:not(.narrow) .tgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tgrid, .wrap:not(.narrow) .tgrid { grid-template-columns: 1fr; } }
.faq { margin-bottom: 8px; }

/* CTA band */
.cta-band { background: radial-gradient(900px 420px at 15% 0%, #123f66 0%, #0f4a78 45%, var(--night) 100%); color: var(--scene-ink); padding-block: clamp(44px, 6vw, 80px); }
.cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.cta-in .kicker { color: var(--scene-gold); }
.cta-in h2 { font-size: var(--step-2); margin: 6px 0; }
.cta-in p { color: var(--scene-muted); }
.cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* food page, history page, phrases page */
.dishes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.dishes .dish { grid-template-columns: 1fr; padding: 0; overflow: hidden; }
.dishes .dish img, .dishes .dish .art { width: 100%; height: 200px; object-fit: cover; }
.dishes .dish > div { padding: 14px 16px 18px; }
.dishes .kn { font: 700 .95rem/1.2 var(--kn); color: var(--laterite); }
@media (max-width: 900px) { .dishes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dishes { grid-template-columns: 1fr; } }
.vtimeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 26px; }
.vtimeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--laterite), var(--gold)); }
.vtimeline li { position: relative; padding-left: 38px; display: grid; gap: 4px; }
.vtimeline li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 3px solid var(--laterite); }
.vtimeline .yr { font: 800 1.9rem/1 var(--display); color: var(--teal); font-stretch: 85%; }
.vtimeline p { color: var(--muted); }
.dark-band { background: radial-gradient(900px 500px at 20% 10%, #3a1214 0%, #06182a 60%); color: #f6e7d6; }
.culture-page { padding-top: calc(100px + env(safe-area-inset-top, 0px)); }
.culture-page h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); color: #fff; }
.culture-page .crumbs { margin-bottom: 24px; }
.live-box { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 6px 0 0; padding: 14px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.live-box div { display: grid; gap: 2px; }
.live-box dt { font: 650 .72rem/1 var(--display); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.live-box dd { margin: 0; font: 700 1.1rem/1.2 var(--display); font-variant-numeric: tabular-nums; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(5, 22, 40,.94); display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 10px; min-width: 0; }
.lightbox img { max-height: 84vh; max-height: 84svh; width: auto; max-width: 100%; border-radius: 8px; object-fit: contain; }
.lb-cap { color: var(--scene-muted); font: 560 .9rem/1.3 var(--display); text-align: center; }
.lightbox button { background: rgba(255,255,255,.1); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 2rem; line-height: 1; cursor: pointer; justify-self: center; }
.lightbox button:hover { background: rgba(255,200,90,.3); }
.lb-close { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)); }
body.lb-open { overflow: hidden; }
@media (max-width: 600px) { .lightbox { grid-template-columns: 44px 1fr 44px; } .lightbox button { width: 40px; height: 40px; font-size: 1.6rem; } }

/* footer */
.foot { background: var(--night); color: var(--scene-muted); padding-block: 56px calc(36px + env(safe-area-inset-bottom, 0px)); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 40px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,240,220,.1); }
.foot-brand { display: grid; gap: 14px; align-content: start; justify-items: start; }
.foot-kn { font-size: 2.6rem; }
.logo-badge-foot .logo { height: 46px; }
.pledge { color: var(--scene-gold); font-family: var(--display); font-weight: 600; }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.foot-cols h2 { font: 700 .8rem/1 var(--display); color: var(--scene-ink); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 14px; }
.foot-cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot a { color: var(--scene-ink); text-decoration: none; } .foot a:hover { color: var(--scene-gold); }
.foot-bottom { padding-top: 22px; display: grid; gap: 6px; font-size: .9rem; }
.foot .fine { color: #86a6bf; }
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr; } .foot-cols { grid-template-columns: 1fr 1fr; } }

/* home hero spacing under the fixed nav */
.hero .hero-content { padding-block: 130px 72px; }
.route-page .drive { padding-top: clamp(48px, 7vw, 96px); }

[hidden] { display: none !important; }
/* ---------- Reveal ---------- */
.js .reveal { transform: translateY(28px); opacity: .001; transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s; }
.js .reveal.is-in { transform: none; opacity: 1; }

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

/* illustration micro-motion */
.fall { animation: fallDash .9s linear infinite; }
@keyframes fallDash { to { stroke-dashoffset: -32; } }
.mini-train { animation: miniTrain 7s linear infinite; }
@keyframes miniTrain { from { transform: translateX(-260px); } to { transform: translateX(260px); } }


/* ===================== Traveller tools ===================== */
/* Search button in the nav */
.nav nav { display: flex; align-items: center; gap: 8px; }
.nav-search { order: 2; display: inline-flex; align-items: center; gap: 8px; font: 600 .9rem/1 var(--display); color: var(--scene-ink); background: rgba(255,255,255,.08); border: 1px solid rgba(255,240,220,.28); padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.nav-search:hover { background: rgba(255,240,220,.16); }
.nav-search svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.nav-search kbd { font: 600 .72rem/1 var(--mono); padding: 3px 6px; border-radius: 5px; border: 1px solid rgba(255,240,220,.3); color: var(--scene-muted); }
@media (max-width: 1240px) { .nav-search span, .nav-search kbd { display: none; } .nav-search { padding: 9px 10px; } }
@media (max-width: 1020px) { .nav-search { order: 0; } }

/* Search dialog */
.srch { position: fixed; inset: 0; z-index: 210; background: rgba(5, 22, 40,.72); backdrop-filter: blur(6px); display: grid; justify-items: center; align-items: start; padding: max(10vh, 70px) var(--gutter-r) 20px var(--gutter-l); }
.srch[hidden] { display: none; }
.srch-box { width: min(680px, 100%); background: var(--surface); color: var(--ink); border-radius: 18px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); overflow: hidden; display: grid; max-height: 76vh; grid-template-rows: auto 1fr auto; }
.srch-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.srch-in svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; }
.srch-in input { flex: 1; min-width: 0; font: 500 1.15rem/1.3 var(--display); border: 0; outline: 0; background: transparent; color: var(--ink); }
.srch-in input::-webkit-search-cancel-button { display: none; }
.srch-x { font: 600 .75rem/1 var(--display); border: 1px solid var(--line); background: var(--bg); color: var(--muted); border-radius: 7px; padding: 6px 8px; cursor: pointer; }
.srch-res { list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.srch-res a { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: inherit; }
.srch-res a:hover, .srch-res a.is-active { background: color-mix(in srgb, var(--teal) 12%, var(--surface)); }
.srch-res b { font: 650 1rem/1.3 var(--display); }
.srch-res small { grid-column: 2; color: var(--muted); font-size: .88rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.srch-k { grid-row: span 2; align-self: start; margin-top: 2px; font: 700 .66rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--laterite); background: color-mix(in srgb, var(--laterite) 10%, var(--surface)); padding: 5px 7px; border-radius: 6px; min-width: 64px; text-align: center; }
.srch-hint { font: 650 .72rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 10px 12px 4px; }
.srch-none { padding: 18px 12px; color: var(--muted); }
.srch-foot { margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
body.srch-open { overflow: hidden; }

/* Save (heart) on stay cards */
.stay-art-wrap { position: relative; }
.save-stay { position: absolute; right: 10px; top: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.92); cursor: pointer; box-shadow: 0 6px 16px -6px rgba(0,0,0,.45); transition: transform .2s; }
.save-stay:hover { transform: scale(1.08); }
.save-stay svg { width: 20px; height: 20px; fill: none; stroke: #c8162f; stroke-width: 2; transition: fill .2s; }
.save-stay.is-on svg { fill: #d93a50; stroke: #d93a50; }
.save-stay.is-on { animation: beat .4s; }
.save-big { position: static; width: auto; height: auto; border-radius: 999px; background: transparent; box-shadow: none; justify-content: center; display: inline-flex; }
.save-big svg { stroke: var(--laterite); }
@keyframes beat { 40% { transform: scale(1.25); } }
.stay-art-wrap .stay-type { max-width: calc(100% - 70px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Shortlist pill & drawer */
.sl-pill { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 8px; font: 700 .9rem/1 var(--display); background: var(--night); color: var(--scene-ink); border: 1px solid rgba(255,240,220,.2); padding: 11px 15px; border-radius: 999px; cursor: pointer; box-shadow: 0 14px 30px -12px rgba(0,0,0,.6); }
.sl-pill[hidden] { display: none; }
.sl-pill svg { width: 18px; height: 18px; fill: #e8506a; }
.sl-pill b { background: var(--scene-gold); color: #241405; border-radius: 999px; min-width: 22px; padding: 4px 6px; text-align: center; font-size: .8rem; }
.sl-pill.pop { animation: beat .45s; }
.sl-drawer { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 61; width: min(420px, calc(100vw - 32px)); max-height: min(70vh, 640px); overflow-y: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); display: grid; gap: 12px; }
.sl-drawer[hidden] { display: none; }
.sl-head { display: flex; justify-content: space-between; align-items: center; }
.sl-head h2 { font-size: 1.3rem; }
.sl-x { border: 0; background: var(--bg-2); color: var(--ink); width: 34px; height: 34px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; }
.sl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sl-list li { display: grid; grid-template-columns: 76px 1fr; gap: 4px 12px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.sl-img { grid-row: span 2; border-radius: 9px; overflow: hidden; background: var(--bg-2); aspect-ratio: 1; }
.sl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-name { font: 700 1rem/1.25 var(--display); color: inherit; text-decoration: none; }
.sl-name:hover { color: var(--laterite); }
.sl-list p { margin: 2px 0 0; font-size: .85rem; color: var(--muted); line-height: 1.35; }
.sl-facts { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 650 .8rem/1.3 var(--display) !important; color: var(--teal) !important; }
.sl-rm { grid-column: 2; justify-self: start; border: 0; background: none; padding: 0; color: var(--laterite); font: 600 .8rem/1 var(--display); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Trip dates */
.datebar { display: grid; grid-template-columns: 1.6fr 1fr .6fr .6fr; gap: 12px 14px; align-items: end; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-bottom: 22px; }
.datebar.is-set { border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 14%, transparent); }
.db-title { display: grid; gap: 3px; }
.db-title b { font: 700 1.05rem/1.2 var(--display); }
.db-title span { font-size: .86rem; color: var(--muted); line-height: 1.35; }
.datebar label { display: grid; gap: 5px; }
.datebar label > span { font: 650 .7rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.datebar input, .datebar select { font: 600 .98rem/1.2 var(--display); color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 10px; min-width: 0; width: 100%; color-scheme: inherit; }
.datebar input:focus, .datebar select:focus { border-color: var(--teal); outline: 0; }
.db-state { grid-column: 1 / -1; margin: 0; font-size: .9rem; color: var(--teal); }
.db-state:empty { display: none; }
.db-clear { grid-column: 1 / -1; justify-self: start; border: 0; background: none; padding: 0; color: var(--laterite); font: 600 .82rem/1 var(--display); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.db-clear[hidden] { display: none; }
.datebar.compact { grid-template-columns: 1fr 1fr 1fr; padding: 14px; margin-bottom: 0; background: var(--bg); }
.datebar.compact .db-title { grid-column: 1 / -1; }
.wrap > .datebar.compact { margin-bottom: 22px; background: var(--surface); }
@media (max-width: 760px) { .datebar { grid-template-columns: 1fr 1fr; } .db-title { grid-column: 1 / -1; } .datebar label:first-of-type { grid-column: 1 / -1; } }

/* Stay hub: count + sort, area guide */
.stay-bar2 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; margin-bottom: 18px; }
.stay-bar2 .stay-count { margin: 0; }
.stay-bar2 .chip { padding: 7px 12px; font-size: .8rem; }
.areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.area { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.area-art { aspect-ratio: 16 / 9; } .area-art svg, .area-art .art { width: 100%; height: 100%; display: block; }
.area-body { padding: 16px 18px 18px; display: grid; gap: 8px; align-content: start; }
.area-where { font: 650 .72rem/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--laterite); margin: 0; }
.area h3 { font-size: 1.2rem; }
.area p:not(.area-where) { font-size: .95rem; color: var(--muted); line-height: 1.5; margin: 0; }
.area .btn { justify-self: start; margin-top: 6px; }
@media (max-width: 1000px) { .areas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .areas { grid-template-columns: 1fr; } .area { grid-template-columns: 110px 1fr; grid-template-rows: none; } .area-art { aspect-ratio: auto; height: 100%; } }

/* Home: Honavar in a minute */
.quickplan { background: var(--bg); padding-block: clamp(48px, 7vw, 96px); }
.qp-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(22px, 3vw, 34px); }
.qp-head > *:not(.btn) { flex-basis: 100%; }
.qp-head h2 { flex: 1 1 auto; flex-basis: auto; font-size: var(--step-2); }
.qp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.qp { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: border-color .2s, transform .2s, box-shadow .2s; }
a.qp:hover { border-color: var(--teal); transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(10,40,35,.6); }
.qp-h { font: 700 .74rem/1 var(--display); letter-spacing: .13em; text-transform: uppercase; color: var(--laterite); }
.qp p { margin: 0; font-size: 1rem; line-height: 1.5; }
.qp p b { font-family: var(--display); font-weight: 700; }
.qp-go { font: 650 .86rem/1 var(--display); color: var(--teal); text-decoration: none; margin-top: 4px; }
.qp-now { background: radial-gradient(500px 220px at 90% 0%, #114d7d 0%, var(--dusk) 70%); color: var(--scene-ink); border-color: transparent; }
.qp-now .qp-h { color: var(--scene-gold); } .qp-now .qp-go { color: var(--scene-gold); } .qp-now p { color: #f1e3d8; }
@media (max-width: 900px) { .qp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .qp-grid { grid-template-columns: 1fr; } .qp { padding: 16px 18px; } }

/* Floating helpers */
.totop { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 59; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,240,220,.2); background: var(--night); color: var(--scene-ink); font: 700 1.1rem/1 var(--display); cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s, transform .25s; box-shadow: 0 14px 30px -12px rgba(0,0,0,.6); }
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 900px) { body:has(.mbook) .totop, body:has(.mbook) .sl-pill { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } body:has(.mbook) .sl-drawer { bottom: calc(136px + env(safe-area-inset-bottom, 0px)); } }
.mbook { transition: transform .3s; }
.book-in-view .mbook { transform: translateY(110%); }
.drive-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.drive-skip { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 58; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; font: 700 .88rem/1 var(--display); color: #241405; background: var(--scene-gold); padding: 12px 18px; border-radius: 999px; text-decoration: none; box-shadow: 0 14px 30px -10px rgba(0,0,0,.6); transition: opacity .25s, transform .25s; }
.drive-skip.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* Essentials */
.sos-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: clamp(32px, 5vw, 56px); }
.sos { display: grid; gap: 4px; align-content: start; padding: 16px; border-radius: 14px; text-decoration: none; color: var(--scene-ink); background: var(--dusk); }
.sos b { font: 800 1.6rem/1 var(--display); color: var(--scene-gold); font-variant-numeric: tabular-nums; }
.sos:nth-child(n+6) b { font-size: 1.05rem; padding: 4px 0; }
.sos span { font: 650 .95rem/1.2 var(--display); }
.sos small { font-size: .8rem; color: var(--scene-muted); line-height: 1.35; }
@media (max-width: 1000px) { .sos-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .sos-grid { grid-template-columns: 1fr 1fr; } }
.finds { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 18px; }
.find { font: 650 .92rem/1 var(--display); padding: 12px 16px; border-radius: 999px; border: 1.5px solid var(--ink); color: var(--ink); text-decoration: none; }
.find:hover { background: var(--ink); color: var(--bg); }
.pack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pack article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.pack h3 { font-size: 1.15rem; color: var(--teal); margin-bottom: 10px; }
.pack ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
@media (max-width: 800px) { .pack { grid-template-columns: 1fr; } }

/* Trip cost calculator */
.calc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.calc-in { display: grid; gap: 14px; }
.calc fieldset { margin: 0; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 16px; background: var(--surface); display: grid; gap: 10px; }
.calc legend { font: 700 .74rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--laterite); padding: 0 6px; }
.calc output { font: 700 1rem/1 var(--display); }
.calc input[type=range] { width: 100%; accent-color: var(--teal); }
.stepper { display: inline-flex; align-items: center; gap: 14px; }
.stepper button { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: 700 1.3rem/1 var(--display); cursor: pointer; }
.stepper output { font-size: 1.5rem; min-width: 2ch; text-align: center; }
.segs { display: flex; flex-wrap: wrap; gap: 8px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-block; font: 600 .9rem/1 var(--display); padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--line); cursor: pointer; }
.seg input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.seg input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.tick { display: flex; gap: 10px; align-items: center; font-size: .98rem; cursor: pointer; }
.tick input { width: 18px; height: 18px; accent-color: var(--teal); }
.rates { border: 1px dashed var(--line); border-radius: 14px; padding: 12px 16px; }
.rates summary { font: 650 .95rem/1.2 var(--display); cursor: pointer; }
.rate { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px dashed var(--line); font-size: .92rem; }
.rate-in { display: inline-flex; align-items: center; gap: 4px; font: 600 .95rem/1 var(--display); }
.rate input { width: 92px; font: 600 .95rem/1 var(--display); padding: 8px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); }
.calc-out { position: sticky; top: 90px; background: radial-gradient(600px 300px at 90% 0%, #114d7d 0%, var(--dusk) 70%); color: var(--scene-ink); border-radius: 20px; padding: clamp(20px, 3vw, 32px); display: grid; gap: 10px; }
.calc-out .kicker { color: var(--scene-gold); margin: 0; }
.calc-total { margin: 0; font: 800 clamp(2.6rem, 2rem + 3vw, 4.2rem)/1 var(--display); color: var(--scene-gold); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.calc-pp { margin: 0; color: #f1e3d8; font: 600 1rem/1.4 var(--display); }
.calc-bars { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 10px; }
.calc-bars li { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: center; font: 600 .9rem/1.2 var(--display); }
.cb-bar { height: 10px; border-radius: 999px; background: rgba(255,240,220,.14); overflow: hidden; }
.cb-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--laterite), var(--scene-gold)); transition: width .35s; }
.cb-v { font-variant-numeric: tabular-nums; }
.calc-out .fine { color: var(--scene-muted); }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } .calc-out { position: static; order: -1; } .calc-bars li { grid-template-columns: 110px 1fr auto; } }

/* Comparison table */
.compare th[scope=row] { font: 700 .9rem/1.3 var(--display); color: var(--teal); white-space: nowrap; }
.compare thead th { font: 750 1.05rem/1.2 var(--display); }
.compare thead th:nth-child(2) { color: var(--laterite); }
.compare td:nth-child(2) { background: color-mix(in srgb, var(--teal) 6%, transparent); }
@media (max-width: 700px) { .compare table { min-width: 640px; } .compare th[scope=row] { white-space: normal; } }

/* Cab list */
.cabs .wa { color: #128c4b; font-weight: 700; }

/* Print: itineraries, essentials and calculator print cleanly */
@media print {
  .nav, .progress, .foot, .cta-band, .sl-pill, .sl-drawer, .totop, .drive-skip, .mbook, .save-stay, .datebar, .srch, .rates, body::before { display: none !important; }
  body { background: #fff; color: #000; }
  .phero, .page-hero { min-height: 0 !important; background: none !important; color: #000 !important; padding: 0 !important; }
  .phero-bg, .phero-scrim, .phero-art { display: none !important; }
  .phero h1, .phero .lede, .phero .eyebrow { color: #000 !important; }
  .band { padding-block: 16px !important; }
  .calc-out { background: none !important; color: #000; border: 1px solid #000; }
  .calc-total { color: #000 !important; }
  a { color: inherit !important; }
}

/* Hero wordmark (English) */
.hero-word { font-family: var(--display); font-weight: 800; font-stretch: 85%; font-size: clamp(3.6rem, 2rem + 8vw, 9.5rem); line-height: .9; letter-spacing: -.035em; color: var(--scene-gold); text-shadow: 0 6px 40px rgba(255, 160, 80, .35); margin: 0 0 .06em; }

/* Home quick-plan header */
.qp-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px 24px; }
.qp-head .kicker { grid-column: 1 / -1; margin: 0; }
.qp-head h2 { flex: none; }
@media (max-width: 560px) { .qp-head { grid-template-columns: 1fr; } .qp-head .btn { justify-self: start; } }

/* Getting here: route finder */
.gh-chips { margin-bottom: 22px; }
.gh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.gh-map { margin: 0; position: sticky; top: 90px; background: radial-gradient(700px 500px at 30% 60%, #0e416e 0%, var(--dusk) 60%, var(--night) 100%); border-radius: 20px; padding: 12px; }
.gh-map figcaption { font-size: .78rem; color: var(--scene-muted); padding: 6px 8px 2px; }
.routemap { width: 100%; height: auto; display: block; }
.rm-sea { font: italic 15px var(--body); fill: rgba(185, 211, 228,.45); letter-spacing: .12em; }
.rm-line { fill: none; stroke: rgba(255,200,90,.22); stroke-width: 1.6; stroke-dasharray: 3 5; transition: stroke .3s, stroke-width .3s; }
.rm-line.is-hover { stroke: rgba(255,200,90,.6); }
.rm-line.is-on { stroke: var(--scene-gold); stroke-width: 3; stroke-dasharray: 10 8; animation: rmflow 1.2s linear infinite; }
@keyframes rmflow { to { stroke-dashoffset: -36; } }
.rm-city { cursor: pointer; outline: none; }
.rm-city circle { fill: #f3f9fd; stroke: var(--dusk); stroke-width: 2; transition: r .2s, fill .2s; }
.rm-city text { font: 650 14px var(--display); fill: #dcebf4; paint-order: stroke; stroke: var(--dusk); stroke-width: 4px; }
.rm-city:hover circle, .rm-city:focus-visible circle { fill: var(--scene-gold); }
.rm-city.is-on circle { fill: var(--scene-gold); r: 9; }
.rm-city.is-on text { fill: var(--scene-gold); font-weight: 750; }
.rm-home circle { fill: #ff6b7d; stroke: #fff; stroke-width: 2.5; }
.rm-home .rm-pulse { fill: #ff6b7d; stroke: none; opacity: .5; transform-origin: center; transform-box: fill-box; animation: rmpulse 2s ease-out infinite; }
@keyframes rmpulse { from { transform: scale(1); opacity: .55; } to { transform: scale(3.2); opacity: 0; } }
.rm-home text { font: 800 15px var(--display); fill: #fff; letter-spacing: .12em; paint-order: stroke; stroke: var(--dusk); stroke-width: 4px; }
.gh-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(18px, 3vw, 30px); display: grid; gap: 14px; justify-items: start; }
.gh-panel .kicker { margin: 0; }
.gh-panel h3 { font-size: var(--step-1); line-height: 1.2; }
.gh-nums { margin: 0; display: flex; gap: 28px; }
.gh-nums dt { font: 650 .7rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.gh-nums dd { margin: 4px 0 0; font: 800 1.5rem/1 var(--display); color: var(--teal); font-variant-numeric: tabular-nums; }
.gh-modes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; }
.gh-modes li { display: grid; grid-template-columns: 108px 1fr; gap: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.gm-mode { font: 700 .8rem/1.3 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--laterite); padding-top: 3px; }
.gh-modes p { margin: 0; font-size: .97rem; line-height: 1.5; }
.gates .gate-num { font: 700 .95rem/1.2 var(--display); color: var(--ink) !important; }
@media (max-width: 900px) { .gh-grid { grid-template-columns: 1fr; } .gh-map { position: static; } .gh-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } .gh-chips .chip { flex: none; } }
@media (max-width: 520px) { .gh-modes li { grid-template-columns: 1fr; gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .rm-line.is-on, .rm-home .rm-pulse { animation: none; } }
.foot-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } @media (max-width: 1100px) { .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 600px) { .foot-cols { grid-template-columns: 1fr 1fr; } }
.phrase .f b { font-family: var(--display); font-size: clamp(1.05rem, .85rem + 1vw, 1.5rem); font-weight: 750; overflow-wrap: anywhere; text-align: center; line-height: 1.15; padding: 0 6px; }
.datebar.compact { grid-template-columns: 1fr 1fr; } .datebar.compact label:first-of-type { grid-column: 1 / -1; }
.wrap > .datebar.compact { grid-template-columns: 1.6fr 1fr .6fr .6fr; } .wrap > .datebar.compact .db-title { grid-column: auto; } .wrap > .datebar.compact label:first-of-type { grid-column: auto; }
@media (max-width: 760px) { .wrap > .datebar.compact { grid-template-columns: 1fr 1fr; } .wrap > .datebar.compact .db-title, .wrap > .datebar.compact label:first-of-type { grid-column: 1 / -1; } }

/* Hero v4: text kept to the top band and a slim bottom bar, so the scene shows through */
.hero { align-items: stretch; }
.hero-content { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding-block: calc(96px + env(safe-area-inset-top, 0px)) 26px; min-height: inherit; }
.hero-top { display: grid; gap: 8px; max-width: 600px; text-shadow: 0 2px 18px rgba(7, 29, 51,.55); }
.hero-top .hero-word { font-size: clamp(3rem, 1.6rem + 4.2vw, 5.8rem); margin: 0; }
.hero .hero-top h1 { font-size: clamp(1.45rem, 1rem + 1.5vw, 2.4rem); max-width: 22ch; line-height: 1.08; }
.hero .hero-top .lede { font-size: clamp(.98rem, .92rem + .25vw, 1.12rem); line-height: 1.5; max-width: 44ch; color: #f6e8de; }
.hero-bottom { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; padding-right: 40px; }
.hero-bottom .hero-cta { margin: 0; }
.hero-bottom .hero-live { margin: 0; padding: 10px 16px; border: 1px solid rgba(255,240,220,.14); border-radius: 14px; background: rgba(7, 29, 51,.5); backdrop-filter: blur(8px); max-width: none; }
.hero-scrim { background: linear-gradient(180deg, rgba(7, 29, 51,.62) 0%, rgba(7, 29, 51,.28) 30%, rgba(7, 29, 51,0) 46%, rgba(7, 29, 51,0) 80%, rgba(7, 29, 51,.55) 100%); }
.hero .scroll-cue { display: none; }
@media (max-width: 760px) {
  .hero { min-height: max(680px, 100svh); }
  .hero-content { padding-top: calc(84px + env(safe-area-inset-top, 0px)); padding-bottom: 18px; }
  .hero-top { gap: 6px; }
  .hero .hero-top .lede { display: none; }
  .hero-bottom { padding-right: 0; gap: 10px; }
  .hero-bottom .hero-cta .btn { padding: 11px 15px; }
  .hero-bottom .hero-live { width: 100%; justify-content: space-between; gap: 8px 14px; padding: 9px 12px; }
  .hero-bottom .hero-live dd { font-size: .95rem; }
  .hero-scrim { background: linear-gradient(180deg, rgba(7, 29, 51,.7) 0%, rgba(7, 29, 51,.25) 34%, rgba(7, 29, 51,0) 48%, rgba(7, 29, 51,0) 66%, rgba(7, 29, 51,.6) 100%); }
}
@media (max-width: 760px) {
  .hero { background: #041321; }
  .hero .hero-scene, .hero .rain, .hero .hero-scrim { inset: 0 0 auto 0; height: 74svh; }
  .hero-scrim { background: linear-gradient(180deg, rgba(7, 29, 51,.7) 0%, rgba(7, 29, 51,.2) 36%, rgba(7, 29, 51,0) 50%, rgba(5, 22, 40,0) 84%, #041321 100%) !important; }
  .hero .eyebrow .mono { display: none; }
}

/* Hero type: the site's serif (Newsreader) at display sizes, in place of the condensed grotesque */
.hero-top .hero-word { font-family: var(--body); font-weight: 600; font-stretch: 100%; letter-spacing: -.02em; line-height: .95; font-size: clamp(3.4rem, 2rem + 4.6vw, 6.6rem); text-shadow: 0 4px 30px rgba(255, 160, 80, .3); }
.hero .hero-top h1 { font-family: var(--body); font-weight: 500; font-stretch: 100%; letter-spacing: -.01em; line-height: 1.1; font-size: clamp(1.55rem, 1rem + 1.6vw, 2.5rem); }
.hero .eyebrow { letter-spacing: .16em; }

/* Hero v5: natural golden-hour palette (blue sky, teal sea, green hills) instead of purple */
.hero { background: #0d2530; }
.palm .fronds { fill: #0c1a14; }
.wave { stroke: #ffd6a8; }
.wave.w3 { stroke: #a9cfd1; }
.wave.w4 { stroke: #86b6bb; }
.hero-scrim { background: linear-gradient(180deg, rgba(10,28,42,.62) 0%, rgba(10,28,42,.25) 30%, rgba(10,28,42,0) 46%, rgba(10,28,42,0) 80%, rgba(8,22,20,.55) 100%); }
.hero-top { text-shadow: 0 2px 18px rgba(8,24,36,.6); }
.hero .eyebrow, .hero-live dt { color: #d6e2e6; }
.hero-bottom .hero-live { background: rgba(8,26,34,.5); border-color: rgba(230,240,240,.16); }
.hero .btn-ghost { border-color: rgba(240,245,245,.45); }
@media (max-width: 760px) {
  .hero { background: #0c1a14; }
  .hero-scrim { background: linear-gradient(180deg, rgba(10,28,42,.7) 0%, rgba(10,28,42,.2) 36%, rgba(10,28,42,0) 50%, rgba(12,26,20,0) 84%, #0c1a14 100%) !important; }
}

/* Hero v6: slate sea behind the spit, olive Sharavathi estuary in front */
.wave.w1 { stroke: #ffe0b0; }
.wave.w2 { stroke: #e2c58e; opacity: .26; }
.wave.w3 { stroke: #a8b98a; opacity: .2; }
.wave.w4 { stroke: #8aa078; opacity: .16; }
.dboat { animation: dbob 6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.dboat.d2 { animation-duration: 7.5s; animation-delay: -2s; } .dboat.d3 { animation-duration: 5.5s; animation-delay: -4s; }
@keyframes dbob { 50% { transform: translateY(1.5px) rotate(1.5deg); } }
.hero { background: #121a0f; }
.hero-scrim { background: linear-gradient(180deg, rgba(10,28,42,.62) 0%, rgba(10,28,42,.25) 30%, rgba(10,28,42,0) 46%, rgba(10,28,42,0) 80%, rgba(14,20,11,.55) 100%); }
@media (max-width: 760px) {
  .hero { background: #121a0f; }
  .hero-scrim { background: linear-gradient(180deg, rgba(10,28,42,.7) 0%, rgba(10,28,42,.2) 36%, rgba(10,28,42,0) 50%, rgba(18,26,15,0) 84%, #121a0f 100%) !important; }
}
@media (prefers-reduced-motion: reduce) { .dboat { animation: none; } }

/* Flocks: a V of seabirds high across the sky, egrets low over the river */
.flock-wrap { animation: flockFly 46s linear infinite; }
.flock { transform: translate(0, 0); }
@keyframes flockFly { 0% { transform: translate(1700px, 250px); } 100% { transform: translate(-300px, 170px); } }
.egret-wrap { animation: egretFly 34s linear infinite; animation-delay: -12s; }
@keyframes egretFly { 0% { transform: translate(-200px, 668px); } 100% { transform: translate(1750px, 650px); } }
.egrets { transform: scale(-1, 1); }
.flap { animation: flap .9s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.flap.slow { animation-duration: 1.6s; }
@keyframes flap { 50% { transform: scaleY(-.35); } }
.hero.is-monsoon .flock-wrap, .hero.is-monsoon .egret-wrap { opacity: 0; transition: opacity 1s; }
@media (prefers-reduced-motion: reduce) { .flock-wrap, .egret-wrap, .flap { animation: none; } .flock-wrap { transform: translate(1100px, 220px); } .egret-wrap { transform: translate(1000px, 655px); } }

/* Hero v7 palette: clearer blue sky, apricot horizon, steel-blue sea, green-teal river */
.hero, .hero.is-monsoon { background: #0e231d; }
.palm .fronds { fill: #0b1d16; }
.wave.w1 { stroke: #ffe3b8; } .wave.w2 { stroke: #e8cfa0; } .wave.w3 { stroke: #a9cdbd; } .wave.w4 { stroke: #8fb8a8; }
.hero-scrim { background: linear-gradient(180deg, rgba(8,26,46,.55) 0%, rgba(8,26,46,.2) 30%, rgba(8,26,46,0) 46%, rgba(8,26,46,0) 80%, rgba(10,30,24,.55) 100%); }
@media (max-width: 760px) {
  .hero { background: #0e231d; }
  .hero-scrim { background: linear-gradient(180deg, rgba(8,26,46,.65) 0%, rgba(8,26,46,.18) 36%, rgba(8,26,46,0) 50%, rgba(14,35,29,0) 84%, #0e231d 100%) !important; }
}
.hero-scrim { background: radial-gradient(ellipse 48% 42% at 18% 32%, rgba(8,26,46,.42), rgba(8,26,46,0) 100%), linear-gradient(180deg, rgba(8,26,46,.55) 0%, rgba(8,26,46,.2) 30%, rgba(8,26,46,0) 46%, rgba(8,26,46,0) 80%, rgba(10,30,24,.55) 100%); }

/* Hero type v3: Inter (self-hosted, OFL), a plain professional sans for the wordmark, tagline and intro */
@font-face { font-family: "Inter"; src: url(../fonts/inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
.hero .eyebrow { font-family: "Inter", var(--display); font-weight: 600; letter-spacing: .14em; }
.hero-top .hero-word { font-family: "Inter", system-ui, sans-serif; font-weight: 700; font-stretch: 100%; letter-spacing: -.035em; line-height: 1; font-size: clamp(3.2rem, 1.9rem + 4.2vw, 6rem); }
.hero .hero-top h1 { font-family: "Inter", system-ui, sans-serif; font-weight: 500; letter-spacing: -.015em; line-height: 1.15; font-size: clamp(1.45rem, 1rem + 1.4vw, 2.3rem); max-width: 20ch; }
.hero .hero-top .lede { font-family: "Inter", system-ui, sans-serif; font-weight: 400; font-size: clamp(.98rem, .94rem + .2vw, 1.08rem); line-height: 1.6; max-width: 46ch; }

/* Hero v8: one heading (name + tagline) and one line of description */
.hero .hero-top h1.hero-h1 { display: grid; gap: 10px; max-width: none; font-size: inherit; line-height: 1; margin: 0; }
.hero-h1 .hero-word { display: block; }
.hero-h1 .hero-tag { display: block; font-family: "Inter", system-ui, sans-serif; font-weight: 500; letter-spacing: -.015em; line-height: 1.15; font-size: clamp(1.45rem, 1rem + 1.4vw, 2.3rem); color: var(--scene-ink); max-width: 20ch; }
.hero-top { gap: 14px; }
@media (max-width: 760px) {
  .hero .hero-top .lede { display: block; font-size: .95rem; line-height: 1.5; max-width: 34ch; }
  .hero-h1 .hero-tag { font-size: 1.3rem; }
}

/* Hero v9: a single short paragraph, with the name picked out in gold */
.hero .hero-top h1.hero-para { font-family: "Inter", system-ui, sans-serif; font-weight: 500; font-size: clamp(1.35rem, .95rem + 1.35vw, 2.1rem); line-height: 1.38; letter-spacing: -.012em; color: #f7efe4; max-width: 30ch; margin: 0; text-wrap: pretty; }
.hero-para b { font-weight: 700; color: var(--scene-gold); }
@media (max-width: 760px) { .hero .hero-top h1.hero-para { font-size: 1.18rem; line-height: 1.42; max-width: 28ch; } }
.hero .hero-top h1.hero-para { font-size: clamp(1.2rem, .95rem + .85vw, 1.6rem); line-height: 1.45; max-width: 36ch; }

/* Home: featured stay */
.featured { background: var(--bg-2); }
.feat-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.feat-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.feat-mosaic .ft { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; }
.feat-mosaic .ft-main { grid-column: 1 / -1; aspect-ratio: 16 / 9; border-radius: 16px; }
.feat-mosaic .ft img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.feat-mosaic .ft:hover img { transform: scale(1.04); }
.feat-text { display: grid; gap: 14px; }
.feat-text p { margin: 0; font-size: 1.05rem; line-height: 1.65; }
.feat-text a:not(.btn) { color: var(--laterite); text-underline-offset: 3px; }
.feat-points { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.feat-points li { font: 600 .82rem/1 var(--display); padding: 8px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.feat-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font: 650 .9rem/1.3 var(--display); }
.feat-foot .rate { color: var(--teal); }
.feat-offer { color: var(--laterite); }
.feat-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.feat-btns .btn-gold { background: var(--laterite); color: var(--on-accent); }
@media (max-width: 900px) { .feat-grid { grid-template-columns: 1fr; } }

/* Tripadvisor badge: plain link until Tripadvisor's script swaps in the rating */
.ta-wrap { min-height: 28px; }
.ta-wrap .TA_links { list-style: none; margin: 0; padding: 0; }
.ta-wrap .TA_links a { display: inline-flex; align-items: center; gap: 10px; font: 600 .85rem/1.2 var(--display); color: var(--teal); text-decoration: none; }
.ta-wrap .TA_links img { height: 20px; width: auto; }
.ta-wrap .TA_cdsratingsonlywide img { max-width: none; }
.TA_cdsratingsonlywide .ta-fallback { display: inline; }
.TA_cdsratingsonlywide [class*="cdsROW"] .ta-fallback { display: none; }
.feat-foot .ta-wrap { flex-basis: 100%; }
/* ===V3 START=== */
/* ===== v3: full-width OSM map (Things to see) ===== */
.explore .section-head { margin-bottom: 14px; }
#placeFilters { margin-bottom: 18px; }
#placeFilters .chip i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--pc); margin-right: 7px; vertical-align: 1px; }
.xmap { margin: 0 0 clamp(22px, 3vw, 36px); position: relative; }
.xmap svg { display: block; width: 100%; height: clamp(420px, 52vw, 760px); background: #0d3a57; }
.xmap figcaption { font-size: .74rem; color: var(--muted); padding: 8px clamp(16px, 4vw, 40px) 0; text-align: right; }
.xmap figcaption a { color: inherit; }
.mp-waves { animation: mpwave 14s linear infinite; }
@keyframes mpwave { to { transform: translateX(60px); } }
.mp-sand { fill: none; stroke: #f3e2b6; stroke-width: 9; stroke-linejoin: round; }
.mp-land { fill: url(#mpLand); stroke: #fff8e6; stroke-width: 1.4; stroke-opacity: .8; }
.mp-water path { fill: url(#mpWater); fill-rule: evenodd; stroke: #bfe6f2; stroke-width: .8; stroke-opacity: .7; }
.mp-isl path { fill: #e9dfc0; stroke: #f3e2b6; stroke-width: 3; }
.mp-rivers path { fill: none; stroke: #4aa7c9; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.mp-rivers path.main { stroke-width: 4.5; opacity: 1; }
.mp-nh66 path { fill: none; stroke: #d39b2c; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 1.5px #fff); }
.mp-nh69 path { fill: none; stroke: #d6b26a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.mp-rail path { fill: none; stroke: #3c3a36; stroke-width: 3.2; stroke-linejoin: round; }
.mp-rail2 path { fill: none; stroke: #fff; stroke-width: 1.4; stroke-dasharray: 7 7; stroke-linejoin: round; }
.mp-sea { font: italic 600 46px/1 var(--serif, Georgia), serif; fill: #fff; fill-opacity: .55; letter-spacing: .04em; }
.mp-ghats { font: 700 26px/1 var(--display); fill: #3f6b45; fill-opacity: .45; letter-spacing: .45em; }
.mp-rlabel { font: italic 600 20px/1 var(--serif, Georgia), serif; fill: #1f6f92; }
.mp-ilabel { font: italic 600 15px/1 var(--serif, Georgia), serif; fill: #fff; }
.mp-ilabel.sm { font: 500 11.5px/1 var(--display); fill-opacity: .75; }
.mp-place { font: 700 13px/1 var(--display); fill: #5b4a33; letter-spacing: .08em; text-transform: uppercase; paint-order: stroke; stroke: #f1e8cf; stroke-width: 4px; }
.mp-place.it { font: italic 600 13px/1 var(--serif, Georgia), serif; text-transform: none; letter-spacing: 0; fill: #fff; stroke: #2f8fb5; }
.mp-road { font: 800 11px/1 var(--display); fill: #9b6d16; letter-spacing: .1em; paint-order: stroke; stroke: #f1e8cf; stroke-width: 4px; }
.mp-out text { font: 700 13px/1 var(--display); fill: #4b5b52; paint-order: stroke; stroke: #eef1dc; stroke-width: 4px; }
.mp-out path { fill: none; stroke: #4b5b52; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mp-mark circle, .mp-mark rect, .mp-mark path { fill: #2d3b35; stroke: #fff; stroke-width: 2; }
.mp-mark .in { fill: #e0a23a; stroke: none; }
.mp-mark text { font: 600 13px/1 var(--display); fill: #2d3b35; paint-order: stroke; stroke: #f4efdc; stroke-width: 4px; }
.mp-mark.town circle { display: none; }
.mp-mark.town text { font: 800 22px/1 var(--display); letter-spacing: .14em; fill: #7c2414; }
.mp-mark.gold path { fill: #e0a23a; stroke: #7a4f0a; stroke-width: 1.2; }
.mp-mark.gold text { font-weight: 800; fill: #7a4f0a; }
.mp-mark.small text { font-size: 12px; }
.mp-compass circle { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.5); stroke-width: 1.4; }
.mp-compass path { fill: rgba(255,255,255,.45); } .mp-compass path.n { fill: #fff; }
.mp-compass text, .mp-scale text { font: 700 12px/1 var(--display); fill: #fff; letter-spacing: .1em; }
.mp-scale path { stroke: #fff; stroke-width: 2.2; fill: none; }
/* pins: always-labelled */
.mp .pin { cursor: pointer; outline: none; }
.mp .pin .dot { fill: var(--pc); stroke: #fff; stroke-width: 2.6; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); transition: r .2s; }
.mp .pin .halo { fill: var(--pc); opacity: 0; }
.mp .pin .lbl { font: 700 13.5px/1 var(--display); fill: #1d2a26; paint-order: stroke; stroke: #f7f2e1; stroke-width: 4.5px; stroke-linejoin: round; opacity: 1; transition: fill .2s; }
.mp .pin.side-sea .lbl { fill: #fff; stroke: #0f3f5d; }
.mp .pin:hover .dot, .mp .pin:focus-visible .dot, .mp .pin.is-hover .dot, .mp .pin.is-active .dot { r: 10; }
.mp .pin:hover .lbl, .mp .pin:focus-visible .lbl, .mp .pin.is-hover .lbl, .mp .pin.is-active .lbl { fill: var(--pc); }
.mp .pin.side-sea:hover .lbl, .mp .pin.side-sea.is-active .lbl, .mp .pin.side-sea.is-hover .lbl { fill: #ffd27a; }
.mp .pin.is-active .halo { animation: halo 1.6s infinite; }
.mp .pin.is-dim { opacity: .18; }
/* cards below the map */
.explore .place-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.explore .place { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; border-top: 4px solid var(--pc); }
.explore .place:hover, .explore .place.is-active { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.12); border-color: var(--pc); }
.explore .place .art { position: relative; width: 100%; height: 150px; border-radius: 0; }
.explore .place .art img, .explore .place .art svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.explore .place > span:last-child { display: block; padding: 14px 16px 16px; }
@media (max-width: 720px) { .xmap { overflow-x: auto; scrollbar-width: none; } .xmap::-webkit-scrollbar { display: none; } .xmap svg { width: 1040px; height: 514px; } .xmap figcaption { position: sticky; left: 0; text-align: left; } .explore .place-cards { grid-template-columns: 1fr; } .xmap-hint { display: block !important; } }
.xmap-hint { display: none; font: 600 .8rem/1 var(--display); color: var(--muted); padding: 0 16px 10px; }
/* ===== v3: river journey ===== */
.river3 { position: relative; background: linear-gradient(180deg, #0b1f2e 0%, #123a4a 38%, #1d5a5c 70%, #0b2b25 100%); color: #e6f4ef; padding-block: clamp(56px, 8vw, 96px) 18px; overflow: hidden; }
.river3 .kicker { color: #ffd27a; }
.r3-head { display: grid; gap: 12px; }
.r3-head h2 { color: #fff; }
.r3-head p:not(.kicker) { max-width: 62ch; color: #bfe0d8; }
.r3-scroll { overflow-x: auto; scrollbar-width: none; margin-top: 8px; }
.r3-scroll::-webkit-scrollbar { display: none; }
.rv-svg { display: block; width: 100%; min-width: 980px; height: auto; margin-top: -2vw; }
.r3-hint { display: none; font: 600 .82rem/1 var(--display); color: #9fd0c4; padding-top: 10px; }
.rv-r1 { fill: #173f3b; opacity: .85; } .rv-r2 { fill: #1b4b40; }
.rv-wave { fill: none; stroke: #fff; stroke-opacity: .2; stroke-width: 1.4; }
.rv-foam { fill: none; stroke: #c9f1fb; stroke-opacity: .45; stroke-width: 1.2; }
.rv-water { fill: none; stroke: #2fb0d0; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2600; stroke-dashoffset: 2600; }
.river3.on .rv-water { animation: rvdraw 3.2s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes rvdraw { to { stroke-dashoffset: 0; } }
.rv-flow { fill: none; stroke: #e6fbff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 2 22; opacity: 0; animation: rvflow 2.4s linear infinite; }
.river3.on .rv-flow { opacity: .9; transition: opacity 1s 3s; }
@keyframes rvflow { to { stroke-dashoffset: -48; } }
.rv-fall { fill: none; stroke: #eafcff; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 18 14; animation: rvfall 1.1s linear infinite; animation-delay: var(--d); opacity: .9; }
@keyframes rvfall { to { stroke-dashoffset: -64; } }
.rv-mist { opacity: .8; animation: rvmist 3s ease-in-out infinite; transform-origin: 1264px 390px; }
.rv-pool { fill: #2fb0d0; opacity: .9; }
.rv-spray circle { fill: #eafcff; opacity: .7; }
@keyframes rvmist { 50% { opacity: .85; transform: translateY(-4px); } }
.rv-sea { font: italic 600 22px/1 var(--serif, Georgia), serif; fill: #fff; fill-opacity: .8; }
.rv-ghats { font: 700 15px/1 var(--display); letter-spacing: .35em; text-transform: uppercase; fill: #8fd0b8; fill-opacity: .55; }
.rv-stop { cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; transition-delay: calc(.6s + var(--i) * .25s); }
.river3.on .rv-stop { opacity: 1; transform: none; }
.rv-dot { fill: #ffd27a; stroke: #0b2b25; stroke-width: 3; }
.rv-stop:hover .rv-dot, .rv-stop:focus .rv-dot { fill: #fff; r: 9; }
.rv-lead { fill: none; stroke: #ffd27a; stroke-width: 1.4; stroke-dasharray: 3 4; }
.rv-name { font: 800 19px/1 var(--display); fill: #fff; paint-order: stroke; stroke: #0d2a2c; stroke-width: 4px; }
.rv-sub { font: 500 13.5px/1 var(--display); fill: #bfe6da; paint-order: stroke; stroke: #0d2a2c; stroke-width: 4px; }
.rv-big { font: 800 34px/1 var(--display); fill: #ffd27a; }
.rv-stop:hover .rv-name, .rv-stop:focus .rv-name { fill: #ffd27a; }
@media (max-width: 860px) { .r3-hint { display: block; } }
@media (prefers-reduced-motion: reduce) { .rv-water { stroke-dashoffset: 0; } .rv-flow, .rv-fall, .rv-mist, .mp-waves { animation: none; } .rv-stop { opacity: 1; transform: none; } }
/* ===== v3: season ribbon ===== */
.season3 { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 3vw, 34px); display: grid; gap: 18px; }
.s3-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px 30px; }
.s3-head h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin-bottom: 6px; }
.s3-head p { max-width: 60ch; color: var(--muted); }
.s3-head p b { color: var(--ink, inherit); }
.s3-src { font-size: .8rem; }
.s3-scroll { overflow-x: auto; padding-bottom: 4px; }
.s3-groups, .s3-ribbon { display: grid; grid-template-columns: repeat(12, minmax(62px, 1fr)); gap: 6px; min-width: 760px; }
.s3-groups { margin-bottom: 8px; }
.s3-groups .g { font: 800 .74rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; padding: 9px 10px; border-radius: 10px; text-align: center; }
.s3-groups .wet { grid-column: 1 / span 4; background: #dbe9f2; color: #1d5674; }
.s3-groups .best { grid-column: 5 / span 5; background: linear-gradient(90deg, #f6c453, #f0a73a); color: #4a2a00; box-shadow: 0 6px 18px rgba(240,167,58,.35); font-size: .84rem; }
.s3-groups .hot { grid-column: 10 / span 3; background: #f6e1cf; color: #8a3f17; }
.mo { display: grid; grid-template-rows: auto auto 120px auto auto; justify-items: center; gap: 6px; padding: 12px 4px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2, #f4f1e6); cursor: pointer; font: inherit; color: inherit; transition: transform .2s, box-shadow .2s; }
.mo:hover, .mo.is-on { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0,0,0,.12); }
.mo.best { background: linear-gradient(180deg, #fff6dc, #ffe6ad); border-color: #f0c062; }
.mo.wet { background: linear-gradient(180deg, #eef5f9, #d9e9f2); }
.mo.hot { background: linear-gradient(180deg, #fbf3ea, #f6e3d1); }
.mo.is-on { outline: 3px solid var(--teal); outline-offset: 1px; }
.mo-n { font: 800 1rem/1 var(--display); }
.mo-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.mo.best .mo-ic, .mo.hot .mo-ic { color: #d98a12; } .mo.best .mo-ic circle, .mo.hot .mo-ic circle { fill: #f6c453; }
.mo.wet .mo-ic { color: #2a6f96; }
.mo-bar { width: 18px; height: 120px; border-radius: 9px; background: rgba(0,0,0,.06); display: flex; align-items: flex-end; overflow: hidden; }
.mo-bar i { display: block; width: 100%; background: linear-gradient(180deg, #5fb3df, #2a6f96); border-radius: 9px; transform-origin: bottom; transform: scaleY(0); transition: transform 1s cubic-bezier(.3,1.3,.5,1); }
.season3.on .mo-bar i { transform: scaleY(1); }
.mo-r { font: 800 .82rem/1 var(--display); font-variant-numeric: tabular-nums; } .mo-r small { font-weight: 600; color: var(--muted); }
.mo-t { font: 600 .78rem/1 var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.mo { position: relative; }
.mo .now { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font: 800 .62rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--teal); padding: 3px 6px; border-radius: 99px; }
.s3-note p { border-left: 4px solid #f0a73a; padding: 6px 0 6px 14px; font-size: 1rem; }
.s3-note b { font: 800 1.25rem/1.2 var(--display); margin-right: 8px; }
.s3-note span { font: 600 .85rem/1.3 var(--display); color: var(--muted); display: block; margin: 2px 0 4px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mo.best { background: linear-gradient(180deg, #3d3218, #4a3a14); border-color: #7a5d1c;} :root:not([data-theme="light"]) .mo.wet { background: linear-gradient(180deg, #1b2b35, #17303f);} :root:not([data-theme="light"]) .mo.hot { background: linear-gradient(180deg, #33261d, #3a2a1e);} :root:not([data-theme="light"]) .s3-groups .wet { background: #1b3646; color: #b6d9ee;} :root:not([data-theme="light"]) .s3-groups .hot { background: #45301f; color: #f6cfae;} }
:root[data-theme="dark"] .mo.best { background: linear-gradient(180deg, #3d3218, #4a3a14); border-color: #7a5d1c;} :root[data-theme="dark"] .mo.wet { background: linear-gradient(180deg, #1b2b35, #17303f);} :root[data-theme="dark"] .mo.hot { background: linear-gradient(180deg, #33261d, #3a2a1e);} :root[data-theme="dark"] .s3-groups .wet { background: #1b3646; color: #b6d9ee;} :root[data-theme="dark"] .s3-groups .hot { background: #45301f; color: #f6cfae;}
.rv-trees { fill: #0f3a2e; opacity: .9; }
.rv-stars circle { fill: #fff; opacity: .55; }
.rv-birds path { fill: none; stroke: #0b1f2e; stroke-width: 1.8; stroke-linecap: round; }
.rv-bridge path { stroke: #0c2420; stroke-width: 3; fill: none; }
.rv-train { fill: #ffd27a; animation: rvtrain 12s ease-in-out infinite; }
@keyframes rvtrain { 0%, 8% { transform: translateX(0); } 46%, 54% { transform: translateX(72px); } 92%, 100% { transform: translateX(0); } }
.foot-bottom .foot-links { margin-top: 6px; font-size: .85rem; }
.foot-bottom a { color: inherit; }
.todo-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.todo-list li { padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); line-height: 1.55; }
.todo-list li a { display: block; margin-bottom: 2px; text-decoration: none; }

/* Pepper Queen page */
.pq-intro { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.pq-text p { font-size: 1.08rem; line-height: 1.7; margin: 0 0 14px; }
.pq-text h2 { margin-top: 0; }
.pq-glance { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; position: sticky; top: 96px; }
.pq-glance h3 { margin: 0 0 6px; }
.pq-quote { background: linear-gradient(135deg, #3b1d12, #5c2a17); color: #fbefe2; }
.pq-quote blockquote { margin: 0; text-align: center; }
.pq-quote blockquote p { font: 600 clamp(1.4rem, 3vw, 2.1rem)/1.3 var(--display); margin: 0 0 12px; color: #ffe2b0; }
.pq-quote cite { font-style: normal; opacity: .8; font-size: .9rem; }
.pq-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.pq-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; border-top: 4px solid var(--laterite); }
.pq-card h3 { margin: 0 0 6px; font-size: 1.1rem; }
.pq-card p { margin: 0; line-height: 1.55; }
.pq-shop { margin-top: 22px; font-size: 1.05rem; }
.pq-shop a { color: var(--laterite); font-weight: 650; }
@media (max-width: 860px) { .pq-intro { grid-template-columns: 1fr; gap: 24px; } .pq-glance { position: static; } }
/* Shop page */
.shop-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.shop-why-i { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.shop-why-i h3 { margin: 0 0 6px; font-size: 1.08rem; }
.shop-why-i p { margin: 0; line-height: 1.55; }
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.prod { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.prod-img { display: block; aspect-ratio: 1; background: #f4efe4; }
.prod-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.prod-body h3 { margin: 0; font-size: 1.12rem; }
.prod-body p { margin: 0; line-height: 1.55; font-size: .96rem; }
.prod-body p a { color: var(--laterite); }
.prod-local { font: 650 .74rem/1.3 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.prod-body .btn { margin-top: auto; align-self: flex-start; }
.prod-body p:last-of-type { margin-bottom: 12px; }
.shop-end { text-align: center; }
@media (max-width: 600px) { .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .prod-body { padding: 12px; } .prod-body h3 { font-size: 1rem; } .prod-body p { font-size: .88rem; } .prod-body .btn { font-size: .78rem; padding: 8px 10px; } }
.book .p-agoda { background: #1675b0; color: #fff; }
.bk-agoda { background: #1675b0; }

/* Page hero: photo as a framed card on the dusk gradient (no dark full-bleed photo) */
.phero-photo { margin: 0; position: relative; aspect-ratio: 4 / 3; }
.phero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phero-photo figcaption { position: absolute; left: 12px; bottom: 12px; right: 12px; }
.phero-photo figcaption a { display: inline-block; background: rgba(5, 22, 40,.72); color: #fff3e0; font: 650 .82rem/1.2 var(--display); padding: 8px 12px; border-radius: 999px; text-decoration: none; backdrop-filter: blur(6px); }
.phero-photo figcaption a:hover { background: rgba(5, 22, 40,.9); }
.phero.has-art { min-height: clamp(360px, 50vh, 520px); }

.alt-resort { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: center; }
.alt-img { display: block; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 24px 50px -24px rgba(0,0,0,.45); }
.alt-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alt-resort h2 { margin: 6px 0 12px; }
.alt-resort p { line-height: 1.65; margin: 0 0 14px; }
.alt-resort p a:not(.btn) { color: var(--laterite); }
@media (max-width: 760px) { .alt-resort { grid-template-columns: 1fr; gap: 20px; } }
.phero.has-art .phero-sun { display: none; }
.phero-art .art { height: 100%; }
.phero-art .art svg { width: 100%; height: 100%; display: block; }

/* Biodiversity */
.bio-subnav { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 64px; z-index: 5; }
.bio-subnav .wrap { display: flex; gap: 6px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
.bio-subnav a { white-space: nowrap; padding: 8px 14px; border-radius: 999px; font: 650 .86rem/1 var(--display); color: var(--ink); text-decoration: none; border: 1px solid var(--line); }
.bio-subnav a[aria-current] { background: var(--teal); color: #fff; border-color: var(--teal); }
.bio-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.bio-stats div { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: grid; gap: 6px; }
.bio-stats b { font: 800 clamp(1.6rem, 3vw, 2.2rem)/1 var(--display); color: var(--teal); font-stretch: 85%; }
.bio-stats span { font-size: .92rem; line-height: 1.4; color: var(--muted); }
.bio-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 18px 0; }
.bio-gallery figure { margin: 0; }
.bio-gallery a { display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-2); }
.bio-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.bio-gallery a:hover img { transform: scale(1.04); }
.bio-gallery figcaption { font-size: .86rem; line-height: 1.4; color: var(--muted); margin-top: 6px; }
.bio-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.bio-split .bio-gallery { grid-template-columns: 1fr; margin-top: 0; }
.bio-split p { margin: 0 0 14px; line-height: 1.65; }
.bio-split p a { color: var(--laterite); }
@media (max-width: 860px) { .bio-split { grid-template-columns: 1fr; } }
.wrap.narrow .bio-gallery { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.help-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; border-top: 4px solid var(--teal); }
.help-card h3 { margin: 0 0 8px; font-size: 1.12rem; }
.help-card p { margin: 0; line-height: 1.6; }
.help-card a, .band .wrap.narrow p a:not(.btn) { color: var(--laterite); }
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.news-list li { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 16px 0; border-top: 1px dashed var(--line); }
.news-list time { font: 700 .85rem/1.3 var(--display); color: var(--teal); padding-top: 3px; }
.news-list .src { margin: 0; font: 650 .74rem/1.3 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.news-list h3 { margin: 2px 0 4px; font-size: 1.05rem; }
.news-list p { margin: 0; line-height: 1.55; }
@media (max-width: 560px) { .news-list li { grid-template-columns: 1fr; gap: 4px; } }
.yt { margin: 0 0 18px; }
.yt-play, .yt iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 16px; overflow: hidden; padding: 0; background: #000; cursor: pointer; position: relative; }
.yt-play img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; }
.yt-btn { position: absolute; left: 50%; top: 50%; width: 72px; height: 50px; margin: -25px 0 0 -36px; border-radius: 14px; background: rgba(200,32,47,.92); }
.yt-btn::after { content: ""; position: absolute; left: 29px; top: 15px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.yt-play:hover .yt-btn { background: #e0202f; }
.yt figcaption { font-size: .9rem; color: var(--muted); margin-top: 8px; }
.yt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
@media (max-width: 1020px) { #navLinks { height: calc(100vh - 64px - env(safe-area-inset-top, 0px)); height: calc(100dvh - 64px - env(safe-area-inset-top, 0px)); } }
/* culture sub pages */
.help-grid.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 20px; }
.help-grid.wide .help-card { padding: 24px 26px; }
.cu-sub { margin: 30px 0 12px; }
.vtimeline.fest + .fine { margin-top: 26px; }
.src-band { padding: 26px 0 34px; }
.src-band .src-list { margin: 0; line-height: 1.7; }
.src-band .src-list a { color: var(--laterite); }
/* biodiversity: species cards, figures, references, rain chart, tables */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.sp-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.sp-card .sp-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--line); }
.sp-card .sp-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.sp-card .sp-img:hover img { transform: scale(1.04); }
.sp-card.no-img { border-top: 4px solid var(--teal); }
.sp-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sp-body h3 { margin: 0; font-size: 1.08rem; }
.sp-body .sci { margin: 0; font-style: italic; color: var(--teal); font-size: .92rem; }
.sp-body p { margin: 0; line-height: 1.6; }
.sp-body a { color: var(--laterite); }
.cr { display: block; margin-top: auto; padding-top: 8px; font-size: .74rem; color: var(--muted, #6b6b6b); line-height: 1.4; }
.cr a { color: inherit !important; text-decoration: underline; }
.bio-fig { margin: 22px 0 0; }
.bio-fig img { width: 100%; height: auto; border-radius: 16px; display: block; }
.bio-fig figcaption { font-size: .88rem; margin-top: 8px; color: var(--muted, #555); }
.bio-fig figcaption .cr { display: inline; padding: 0; }
.refs-band { padding: 18px 0 30px; }
.refs { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; }
.refs summary { cursor: pointer; font-weight: 700; }
.refs ol, .bib { margin: 12px 0 0; padding-left: 1.3em; line-height: 1.55; font-size: .92rem; }
.refs li, .bib li { margin-bottom: 8px; }
.refs a, .bib a { color: var(--laterite); }
.rain-chart { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: 240px; margin: 18px 0 8px; }
.rain-chart .rb { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.rain-chart .rb i { display: block; width: 70%; max-width: 54px; background: linear-gradient(var(--teal), #2b7a8c); border-radius: 8px 8px 2px 2px; }
.rain-chart .rv { font-size: .78rem; font-weight: 700; }
.rain-chart .rm { font-size: .82rem; color: var(--muted, #555); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pa-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .95rem; background: var(--surface); border-radius: 14px; overflow: hidden; }
.pa-table th, .pa-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); line-height: 1.5; }
.pa-table thead th { background: var(--teal); color: #fff; font-size: .85rem; letter-spacing: .02em; }
.pa-table tbody th { font-weight: 700; width: 26%; }
/* nav: top items are links; dropdowns open on hover and stay open while the pointer moves into them */
#navLinks > li.has-sub { display: flex; align-items: center; }
#navLinks > li > a.top-link { padding-right: 4px; }
#navLinks > li > .sub-toggle { padding: 9px 10px 9px 4px; }
#navLinks > li.has-sub:hover > a.top-link, #navLinks > li.has-sub.is-open > a.top-link { opacity: 1; background: rgba(255,240,220,.13); border-radius: 999px 0 0 999px; }
#navLinks > li.has-sub:hover > .sub-toggle, #navLinks > li.has-sub.is-open > .sub-toggle { opacity: 1; background: rgba(255,240,220,.13); border-radius: 0 999px 999px 0; }
#navLinks > li.is-here > a.top-link { border-radius: 999px 0 0 999px; }
#navLinks > li.is-here > .sub-toggle { border-radius: 0 999px 999px 0; }
.nav .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
@media (max-width: 1020px) {
  #navLinks > li.has-sub { flex-wrap: wrap; }
  #navLinks > li > a.top-link { flex: 1; width: auto; padding-right: 6px; }
  #navLinks > li > .sub-toggle { width: auto; padding: 16px 14px; justify-content: center; }
  #navLinks > li.has-sub:hover > a.top-link, #navLinks > li.has-sub:hover > .sub-toggle { background: none; }
  .nav .sub { flex-basis: 100%; }
  .has-sub.is-open > .sub-toggle .chev { transform: rotate(-135deg) translateY(-2px); }
  .nav .sub::before { display: none; }
}
/* ===== Brand: colours from the Honavar logo (red #e41d37, ocean #05a1e3 / #0e6f9e, yellow #fecc00) ===== */
:root { --brand-red: #e41d37; --brand-blue: #0e6f9e; --brand-sea: #05a1e3; --brand-sky: #9dd8f7; --brand-yellow: #fecc00; --navy: #0b2a45; }
.nav, .nav.is-solid { background: #fff; backdrop-filter: none; box-shadow: 0 1px 0 rgba(11,42,69,.08), 0 8px 24px -16px rgba(11,42,69,.35); }
.nav-in { padding-top: 10px; padding-bottom: 10px; }
.brand { color: var(--navy); }
.logo-img { display: block; height: 46px; width: auto; }
@media (max-width: 1020px) { .logo-img { height: 38px; } }
#navLinks > li > a, #navLinks > li > button { color: var(--navy); opacity: 1; }
#navLinks > li > a:hover, #navLinks > li > button:hover, #navLinks > li.is-here > a, #navLinks > li.is-here > button,
#navLinks > li.has-sub:hover > a.top-link, #navLinks > li.has-sub.is-open > a.top-link, #navLinks > li.has-sub:hover > .sub-toggle, #navLinks > li.has-sub.is-open > .sub-toggle { background: #e6f4fc; color: var(--brand-blue); }
#navLinks .nav-shop { color: var(--brand-red); }
.nav .sub { background: #fff; border: 1px solid #d6e6f0; box-shadow: 0 24px 48px -18px rgba(11,42,69,.35); }
.nav .sub a { color: var(--navy); }
.nav .sub a:hover { background: #eef7fc; color: var(--brand-red); }
.nav-search { color: var(--navy); background: #f2f8fc; border-color: #cfe2ee; }
.nav-search:hover { background: #e6f4fc; }
.nav-search kbd { color: #5b7488; border-color: #cfe2ee; }
.nav-toggle { color: var(--navy) !important; background: #f2f8fc !important; border-color: #cfe2ee !important; }
@media (max-width: 1020px) {
  #navLinks { background: #fff; }
  #navLinks > li { border-bottom-color: #e3eef5; }
  #navLinks > li.has-sub:hover > a.top-link, #navLinks > li.has-sub:hover > .sub-toggle { background: none; color: var(--navy); }
}
.progress span { background: linear-gradient(90deg, var(--brand-red), var(--brand-yellow), var(--brand-sea)); }
/* footer: light, so the logo sits naturally */
.foot { background: #eaf4fa; color: #3d5568; border-top: 4px solid var(--brand-sea); }
.foot-top { border-bottom-color: #cfe2ee; }
.foot-cols h2 { color: var(--brand-blue); }
.foot a { color: var(--navy); } .foot a:hover { color: var(--brand-red); }
.foot .pledge { color: var(--brand-red); }
.logo-img.logo-badge-foot { height: 64px; }
.foot .fine { color: #5b7488; }
/* page heroes: ocean gradient from the logo instead of purple dusk */
.phero-dusk { background: linear-gradient(180deg, #0b2f4f 0%, #0e4a78 42%, #0e6f9e 78%, #2fb0e8 100%); }
.phero-sun { background: radial-gradient(circle, #fff6c8 0 34%, rgba(254,204,0,.5) 35%, rgba(254,204,0,0) 70%); }
.culture, .dark-band { background: radial-gradient(900px 500px at 20% 10%, #0f4a78 0%, #071d33 60%); }
/* shop: text uses the full width */
.shop-page .section-head { max-width: none; }
.shop-page .shop-end { max-width: none; }
@media (max-width: 1020px) {
  .nav-in { min-height: 60px; }
  #navLinks { top: calc(60px + env(safe-area-inset-top, 0px)); height: calc(100vh - 60px - env(safe-area-inset-top, 0px)); height: calc(100dvh - 60px - env(safe-area-inset-top, 0px)); }
  .nav .sub { border: 0; box-shadow: none; background: none; }
}
@media (min-width: 1021px) { .nav-in { min-height: 66px; } }
/* header: transparent over the dark hero (light logo, white links); white once scrolled (colour logo, navy links) */
.nav:not(.is-solid) { background: transparent; box-shadow: none; }
.nav .logo-on-light { display: none; }
.nav.is-solid .logo-on-dark { display: none; }
.nav.is-solid .logo-on-light { display: block; }
.nav:not(.is-solid) #navLinks > li > a, .nav:not(.is-solid) #navLinks > li > button { color: #fff; }
.nav:not(.is-solid) #navLinks > li > a:hover, .nav:not(.is-solid) #navLinks > li > button:hover, .nav:not(.is-solid) #navLinks > li.is-here > a, .nav:not(.is-solid) #navLinks > li.is-here > button,
.nav:not(.is-solid) #navLinks > li.has-sub:hover > a.top-link, .nav:not(.is-solid) #navLinks > li.has-sub.is-open > a.top-link, .nav:not(.is-solid) #navLinks > li.has-sub:hover > .sub-toggle, .nav:not(.is-solid) #navLinks > li.has-sub.is-open > .sub-toggle { background: rgba(255,255,255,.14); color: #fff; }
.nav:not(.is-solid) #navLinks .nav-shop { color: var(--brand-yellow); }
.nav:not(.is-solid) .nav-search { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); }
.nav:not(.is-solid) .nav-search kbd { color: #cfe2ee; border-color: rgba(255,255,255,.3); }
.nav:not(.is-solid) .nav-toggle { color: #fff !important; background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.35) !important; }
.nav { transition: background .25s, box-shadow .25s; }
/* bigger logo */
.logo-img { height: 58px; }
.nav-in { padding-top: 8px; padding-bottom: 8px; }
@media (min-width: 1021px) { .nav-in { min-height: 74px; } }
@media (max-width: 1020px) {
  .logo-img { height: 46px; }
  .nav-in { min-height: 62px; }
  #navLinks { top: calc(62px + env(safe-area-inset-top, 0px)); height: calc(100vh - 62px - env(safe-area-inset-top, 0px)); height: calc(100dvh - 62px - env(safe-area-inset-top, 0px)); }
}
/* nav pill: one rounded shape for link + arrow */
@media (min-width: 1021px) {
  #navLinks > li.has-sub { border-radius: 999px; transition: background .15s; }
  #navLinks > li.has-sub > a.top-link, #navLinks > li.has-sub > .sub-toggle,
  #navLinks > li.has-sub:hover > a.top-link, #navLinks > li.has-sub:hover > .sub-toggle,
  #navLinks > li.has-sub.is-open > a.top-link, #navLinks > li.has-sub.is-open > .sub-toggle,
  #navLinks > li.is-here > a.top-link, #navLinks > li.is-here > .sub-toggle,
  .nav:not(.is-solid) #navLinks > li.has-sub:hover > a.top-link, .nav:not(.is-solid) #navLinks > li.has-sub:hover > .sub-toggle,
  .nav:not(.is-solid) #navLinks > li.has-sub.is-open > a.top-link, .nav:not(.is-solid) #navLinks > li.has-sub.is-open > .sub-toggle,
  .nav:not(.is-solid) #navLinks > li.is-here > a.top-link, .nav:not(.is-solid) #navLinks > li.is-here > .sub-toggle { background: none; border-radius: 999px; }
  #navLinks > li.has-sub > a.top-link { padding: 9px 2px 9px 14px; }
  #navLinks > li.has-sub > .sub-toggle { padding: 9px 12px 9px 6px; }
  #navLinks > li.has-sub:hover, #navLinks > li.has-sub.is-open, #navLinks > li.has-sub.is-here { background: #e6f4fc; }
  #navLinks > li.has-sub:hover > a.top-link, #navLinks > li.has-sub.is-open > a.top-link, #navLinks > li.has-sub.is-here > a.top-link,
  #navLinks > li.has-sub:hover > .sub-toggle, #navLinks > li.has-sub.is-here > .sub-toggle { color: var(--brand-blue); }
  .nav:not(.is-solid) #navLinks > li.has-sub:hover, .nav:not(.is-solid) #navLinks > li.has-sub.is-open, .nav:not(.is-solid) #navLinks > li.has-sub.is-here { background: rgba(255,255,255,.14); }
  .nav:not(.is-solid) #navLinks > li.has-sub:hover > a.top-link, .nav:not(.is-solid) #navLinks > li.has-sub.is-here > a.top-link,
  .nav:not(.is-solid) #navLinks > li.has-sub:hover > .sub-toggle, .nav:not(.is-solid) #navLinks > li.has-sub.is-here > .sub-toggle { color: #fff; }
}
/* light outline buttons on dark sections */
.culture .btn-line, .river3 .btn-line, .cta-band .btn-line { color: #fff; border-color: rgba(255,255,255,.45); }
.culture .btn-line:hover, .river3 .btn-line:hover, .cta-band .btn-line:hover { background: #fff; color: #0b2a45; border-color: #fff; }
/* mobile menu: no split pill on the open item, just a coloured label */
@media (max-width: 1020px) {
  #navLinks > li.has-sub.is-open > a.top-link, #navLinks > li.has-sub.is-open > .sub-toggle,
  .nav:not(.is-solid) #navLinks > li.has-sub.is-open > a.top-link, .nav:not(.is-solid) #navLinks > li.has-sub.is-open > .sub-toggle { background: none; border-radius: 0; color: var(--brand-blue, #0e6f9e); }
}
/* donate box (stargazing) */
.donate-box { margin: 28px 0; padding: 22px 24px; border-radius: 16px; background: linear-gradient(135deg, #071d33, #0b3556); color: #e8f1fa; }
.donate-box h3 { margin: 0 0 8px; color: #fecc00; font-family: var(--display); font-size: 1.25rem; }
.donate-box p { margin: 0 0 12px; color: #cfe0ee; }
.donate-box .donate-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }
.donate-box .btn-line { color: #fff; border-color: rgba(255,255,255,.45); }
.donate-box .btn-line:hover { background: #fff; color: #0b2a45; }
.alt-resort .feat-h { font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 4px 0 10px; }
.alt-resort .amen { margin: 0 0 16px; }
.donate-box .btn-gold, .donate-box .btn-gold:visited { background: #fecc00; color: #0b2a45 !important; border-color: #fecc00; }
.donate-box .btn-gold:hover { background: #ffe066; color: #0b2a45 !important; }
/* getting here: flight/rail links to the Goa and Mangaluru gateways */
.rm-line.rm-fly { stroke: rgba(157,216,247,.3); stroke-dasharray: 2 6; }
.rm-line.rm-fly.is-hover { stroke: rgba(157,216,247,.7); }
.rm-line.rm-fly.is-on { stroke: #9dd8f7; stroke-width: 2.6; stroke-dasharray: 5 7; }
.rm-line.is-via { stroke: var(--scene-gold, #fecc00); stroke-width: 3; stroke-dasharray: 10 8; animation: rmflow 1.2s linear infinite; }
.rm-city.is-via circle { fill: #9dd8f7; r: 8; }
.rm-city.is-via text { fill: #9dd8f7; font-weight: 750; }
.gh-map figcaption .rm-key { display: inline-block; width: 22px; height: 0; border-top: 3px dashed #fecc00; vertical-align: middle; margin: 0 4px 0 10px; }
.gh-map figcaption .rm-key-fly { border-top-color: #9dd8f7; border-top-style: dotted; margin-left: 4px; }
.fine.gh-full, .gh-full p { max-width: none; }
.gh-vista { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.gh-vista p { max-width: none; line-height: 1.7; }
.gh-vista p + p { margin-top: 14px; }
.vista-facts { position: static; }
@media (max-width: 860px) { .gh-vista { grid-template-columns: 1fr; gap: 20px; } }
/* essentials: nearest services */
.near-jump { margin: 4px 0 18px; }
.near-group { margin: 28px 0 8px; scroll-margin-top: 90px; }
.near-group h3 { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 1.25rem; margin: 0 0 6px; }
.near-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e41d37; color: #fff; font-size: 16px; }
.near-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 12px; }
.near-card { background: var(--card, #fff); border: 1px solid var(--line, #d6e3ee); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.near-card h4 { margin: 0; font-family: var(--display); font-size: 1rem; }
.near-addr { margin: 0; color: var(--muted); font-size: .92rem; }
.near-meta { margin: 0; font-size: .85rem; font-weight: 600; color: #0e6f9e; }
.near-acts { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.bt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.bt-grid > div { background: var(--card, #fff); border: 1px solid var(--line, #d6e3ee); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.bt-grid b { font-family: var(--display); }
.bt-grid span { color: #0e6f9e; font-weight: 600; font-size: .92rem; }
.faq-jump { margin-bottom: 8px; }
.faq-group { margin-top: 34px; scroll-margin-top: 90px; }
.faq-group h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 0 0 12px; }
.faq-jump a.chip, .near-jump a.chip { text-decoration: none; }
/* beach trek map */
.trek-map{margin:1.6rem 0;background:#fff;border:1px solid var(--line,#e3ddd0);border-radius:16px;overflow:hidden}
.trek-map svg{display:block;width:100%;height:auto;max-height:640px;background:#1a5f86}
.trek-map .tm-sea{fill:#1a5f86}.trek-map .tm-sand{fill:#f1e3b5;stroke:#f6ecc9;stroke-width:1.6}
.trek-map .tm-land{fill:#e4e6c6}.trek-map .tm-water path{fill:#4aa9cb}.trek-map .tm-isl path{fill:#cfdcae}
.trek-map .tm-riv path{fill:none;stroke:#4aa9cb;stroke-width:1.2;stroke-linecap:round}
.trek-map .tm-port{fill:url(#tmHatch);stroke:#b5452b;stroke-width:.4}
.trek-map .tm-route-bg{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.trek-map .tm-route{fill:none;stroke:#d9480f;stroke-width:1.1;stroke-dasharray:2.2 1.6;stroke-linecap:round;stroke-linejoin:round}
.trek-map .tm-pin circle{fill:#d9480f;stroke:#fff;stroke-width:.9}.trek-map .tm-pin.end circle{fill:#0b2a45}
.trek-map text{font:600 3.3px/1 var(--sans,system-ui,sans-serif);fill:#0b2a45;paint-order:stroke;stroke:#fff;stroke-width:.7px;stroke-linejoin:round}
.trek-map text.sm{font-size:2.5px;font-weight:500}
.trek-map .tm-note text{fill:#9b3a22}
.trek-map .tm-lbl.sea{fill:#d9eef7;stroke:none;font-style:italic;font-size:4px;letter-spacing:.2px}
.trek-map .tm-lbl.riv{fill:#0b4a66;stroke:none;font-style:italic;font-size:3px}
.trek-map .tm-lbl.town{font-size:3.6px;letter-spacing:.6px;text-transform:uppercase}
.trek-map .tm-lbl.small{font-size:2.3px;font-weight:500;fill:#7a5a1e}
.trek-map .tm-scale path{stroke:#fff;stroke-width:.5;fill:none}.trek-map .tm-scale text{fill:#fff;stroke:none;font-size:2.6px}
.trek-map .tm-n path{fill:#fff}.trek-map .tm-n text{fill:#fff;stroke:none;font-size:3px}
.trek-map figcaption{padding:.8rem 1rem;font-size:.86rem;color:#4a5560;line-height:1.6}
.tm-key{display:inline-block;width:22px;height:0;border-top:3px dashed #d9480f;vertical-align:middle;margin:0 .3rem 0 0}
.tm-key.port{width:14px;height:10px;border:1px solid #b5452b;background:repeating-linear-gradient(45deg,#b5452b 0 1.5px,transparent 1.5px 4px);margin-left:.6rem}
/* home: dish photos */
.food .dish{grid-template-columns:84px 1fr;align-items:center}
.dish img.dish-ph{width:84px;height:84px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 4px 12px rgba(11,42,69,.15);transition:transform .6s}
.dish:hover img.dish-ph{transform:scale(1.06)}
.band.feat-top{padding-bottom:8px}
.trek-map .tm-mouth{fill:none;stroke:#4aa9cb;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.trek-map .tm-plume{fill:url(#tmPlume)}
.mp-mouth{fill:none;stroke:#3a9ac3;stroke-width:10;stroke-linecap:round}
/* hero palms: each frond sways on its own beat from the top of the trunk, like palms in a sea breeze */
.hero-scene .palm{fill:#0b1d16}
.hero-scene .palm .fr{transform-box:view-box;transform-origin:0 0;animation:frondSway 4.5s ease-in-out infinite}
.hero-scene .palm .crown{transform-box:view-box;transform-origin:0 0;animation:crownSway 9s ease-in-out infinite}
.hero-scene .palm.p2 .crown{animation-duration:11s;animation-delay:-3s}
.hero-scene .palm.p3 .crown{animation-duration:8s;animation-delay:-5s}
@keyframes frondSway{0%,100%{transform:rotate(0deg)}30%{transform:rotate(2.2deg)}55%{transform:rotate(-.6deg)}80%{transform:rotate(1.2deg)}}
@keyframes crownSway{0%,100%{transform:rotate(-.8deg)}50%{transform:rotate(1deg)}}
@media (prefers-reduced-motion:reduce){.hero-scene .palm .fr,.hero-scene .palm .crown{animation:none}}
/* hero birds: fly without squashing (wing beats are drawn by the shape itself) */
.hero-scene .bird{animation-name:flyLevel}
@keyframes flyLevel{0%{transform:translate(1700px,240px)}25%{transform:translate(1250px,205px)}50%{transform:translate(800px,228px)}75%{transform:translate(350px,190px)}100%{transform:translate(-100px,210px)}}
/* distant NH66 road bridge: steady two-way traffic (vehicles are added by site.js) */
.hero-scene .rb-v{animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes rbCarW{0%{transform:translateX(1720px)}100%{transform:translateX(-120px)}}
@keyframes rbCarE{0%{transform:translateX(-120px)}100%{transform:translateX(1720px)}}
@media (prefers-reduced-motion:reduce){.hero-scene .rb-v{animation:none;display:none}}
/* boat between the two bridges drifts slowly */
.hero-scene .mboat-drift{animation:mboatDrift 60s ease-in-out infinite alternate}
@keyframes mboatDrift{from{transform:translateX(-40px)}to{transform:translateX(50px)}}
/* monsoon: boats stay in, the river rises over the mangrove roots */
.hero-scene .boat,.hero-scene .dboat{transition:opacity 1.2s}
.hero.is-monsoon .hero-scene .boat,.hero.is-monsoon .hero-scene .dboat{opacity:0}
.hero-scene .flood{opacity:0;transform:translateY(8px);transition:opacity 1.4s,transform 1.8s ease-out}
.hero.is-monsoon .hero-scene .flood{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.hero-scene .mboat-drift{animation:none}}
/* hero sea currents: dashes flow along the wave lines and loop seamlessly (one dash period per cycle) */
.hero-scene .wave{transform:none;animation:waveW1 3.2s linear infinite}
.hero-scene .wave.w2{animation:waveW2 5.4s linear infinite}
.hero-scene .wave.w3{animation:waveW3 7.5s linear infinite}
.hero-scene .wave.w4{animation:waveW4 11s linear infinite}
@keyframes waveW1{from{stroke-dashoffset:0}to{stroke-dashoffset:70}}
@keyframes waveW2{from{stroke-dashoffset:0}to{stroke-dashoffset:-110}}
@keyframes waveW3{from{stroke-dashoffset:0}to{stroke-dashoffset:150}}
@keyframes waveW4{from{stroke-dashoffset:0}to{stroke-dashoffset:-200}}
@media (prefers-reduced-motion:reduce){.hero-scene .wave{animation:none}}
/* data tables become stacked cards on phones */
@media (max-width:640px){
  .table-wrap:has(table[data-stack]){border:0;background:none;overflow:visible}
  table[data-stack],table[data-stack] tbody,table[data-stack] tr,table[data-stack] td{display:block;width:100%;min-width:0!important}
  table[data-stack] thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table[data-stack] tr{background:var(--surface,#fff);border:1px solid var(--line,#e3ddd0);border-radius:12px;padding:10px 14px;margin-bottom:10px}
  table[data-stack] td{border:0!important;padding:4px 0!important;display:grid;grid-template-columns:96px 1fr;gap:10px;text-align:left!important}
  table[data-stack] td::before{content:attr(data-label);font:700 .68rem/1.6 var(--sans,system-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#6b7480)}
  table[data-stack] tr>th{display:block;width:100%;text-align:left;border:0!important;padding:0 0 6px!important;margin-bottom:4px;border-bottom:1px solid var(--line,#e3ddd0)!important;font-size:1.02rem}
  table[data-stack] tr:not(:has(th)) td:first-child{display:block;font-weight:700;font-size:1.02rem;padding-bottom:6px!important;border-bottom:1px solid var(--line,#e3ddd0)!important;margin-bottom:4px}
  table[data-stack] tr:not(:has(th)) td:first-child::before{display:none}
}
/* page heroes on tablets: keep text and photo side by side instead of a small photo above the title */
@media (min-width:641px) and (max-width:860px){
  .phero.has-art .phero-in{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}
  .phero-art{max-width:none;order:0}
  .phero h1{font-size:clamp(2rem,1.2rem + 3vw,2.8rem)}
}
/* footer: seven link groups sit in balanced rows (4 + 3) on desktop */
@media (min-width:1101px){.foot-cols{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px}}
.cab-contact{display:inline-flex;flex-wrap:wrap;gap:0 4px;align-items:baseline}
.yak-credit{font-size:.72rem;line-height:1.4;color:var(--scene-muted,#9fb3c4);margin:.5rem 0 0;text-align:center;max-width:30ch;margin-inline:auto}.yak-credit a{color:inherit;text-decoration:underline}
@media (min-width:900px){.hero .hero-top{max-width:720px}.hero .hero-top h1.hero-para{max-width:42ch}}
/* ===V3 END=== */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===== Consistent layout width (Oct 25): every content block uses the full .wrap width ===== */
.wrap.narrow { max-width: 1240px; }
.section-head, .prose, .fine, .faq, .faq details p, .itin p, .r3-head p:not(.kicker), .s3-head p, .src-list { max-width: none; }
.section-head p, .prose p, .wrap.narrow > p, .faq details p { text-wrap: pretty; }
.wrap.narrow .tgrid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.faq { grid-template-columns: 1fr; }

.ydancer { transform-box: view-box; transform-origin: 200px 640px; }
.yaksha.is-beat .ydancer { animation: yakStep .84s ease-in-out infinite; }
@keyframes yakStep { 25% { transform: rotate(-1.2deg); } 75% { transform: rotate(1.2deg); } }

/* Social icons in the footer */
.foot-social { display: inline-flex; gap: 10px; vertical-align: middle; margin-left: 6px; }
.foot-bottom .foot-social a { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #0f2a44; color: #0f2a44; background: #fff; transition: background .2s, color .2s, border-color .2s; }
.foot-bottom .foot-social a:hover, .foot-bottom .foot-social a:focus-visible { background: #c8331f; border-color: #c8331f; color: #fff; }
.foot-social svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) { .foot-social { display: flex; margin: 12px 0 0; } }

/* ===== Mobile readability pass (Oct 26) ===== */
:root { --teal: #0b6a96; }
.wrap.narrow a.btn.btn-gold, .shop-end a.btn.btn-gold { color: #0b2a45; }
@media (max-width: 760px) {
  /* Bigger hit areas without changing the layout */
  .crumbs a, .stay-more, .cr a { display: inline-block; padding-block: 10px; margin-block: -10px; }
  .stay-body h3 a { display: inline-block; padding-block: 8px; margin-block: -8px; }
  .bio-subnav a, .chips .chip { min-height: 38px; display: inline-flex; align-items: center; }
  .qp-go { display: inline-block; padding-block: 10px; margin-block: -10px; }
}

:root { --brand-red: #c8162f; --brand-blue: #0e6f9e; }
.pledge { color: #c4152c; }
.foot-cols h2 { color: #0e6f9e; }
/* Footer: six groups as two rows of three on wide screens */
@media (min-width: 601px) { .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 28px 24px; } }
@media (max-width: 760px) {
  /* Comfortable tap targets in the footer */
  .foot-cols ul { gap: 0; }
  .foot-cols ul a { display: inline-block; padding: 8px 0; }
  .foot-bottom .foot-links > a { display: inline-block; padding: 8px 2px; }
  .foot-social { gap: 12px; } .foot-bottom .foot-social a { width: 40px; height: 40px; }
  /* No text under 12px on phones */
  .stay-type, .stay-photos, .tags span, .datebar label span, .cr, .xmap figcaption, .qp-h, .live-box dt, .gh-nums dt, .area-where, p.src, .arr .mode, .s3-groups .g, .hud-cell span { font-size: 12px !important; }
  .mo-r small, .mo .now { font-size: 11px !important; }
}

@media (max-width: 760px) {
  /* Hero: a darker band behind the sentence so it reads over the sunset sky */
  .hero-scrim { background: linear-gradient(180deg, rgba(6, 22, 40, .86) 0%, rgba(6, 22, 40, .78) 34%, rgba(6, 22, 40, .55) 50%, rgba(6, 22, 40, 0) 64%, rgba(6, 22, 40, 0) 84%, #041321 100%) !important; }
  .hero .hero-top h1.hero-para { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 18px rgba(4, 16, 30, .8); }
}
@media (max-width: 760px) {
  /* Hero text sits just under the header and stays clear of the island, sun and bridges */
  .hero-content { padding-top: calc(70px + env(safe-area-inset-top, 0px)) !important; }
  .hero .hero-top h1.hero-para { font-size: 1.06rem !important; line-height: 1.45 !important; max-width: 34ch !important; }
}
@media (max-width: 380px) { .hero .hero-top h1.hero-para { font-size: 1rem !important; } }
@media (max-width: 720px) { .xmap svg { max-width: none; } }   /* the global svg max-width cap stopped the map being wider than the screen, so it could not be swiped */
@media (max-width: 600px) { #itinTabs { flex-wrap: nowrap; gap: 6px; } #itinTabs .tab { flex: 1 1 0; min-width: 0; padding: 12px 6px; font-size: .95rem; text-align: center; white-space: nowrap; } }   /* four trip lengths on one line on phones */
.chart-hint { display: none; font: 600 .8rem/1.2 var(--display); color: var(--muted); margin: 8px 0 0; } @media (max-width: 560px) { .chart-hint { display: block; } }