/* Themes: every color and font comes from these tokens. The default is
   "forest" (below); other themes override the tokens via <html data-theme="...">. */
:root {
  --ok: #2f6b4a; --ok-bg: #e4efe8; --warn: #8a6200; --warn-bg: #fff4d6; --info: #2b4f80; --info-bg: #e3ecf8;
  --forest-950: #0b1d14;
  --forest-900: #10291c;
  --forest-700: #1d4430;
  --forest-500: #2f6b4a;
  --forest-100: #e4efe8;
  --sun: #ff7a1a;
  --sun-dark: #e8650a;
  --sun-100: #fff0e3;
  --cream: #faf6ef;
  --surface: #ffffff;
  --text: #15201a;
  --muted: #5d6b63;
  --line: #e6dfd2;
  --err: #b3402e;
  --err-bg: #fbe9e7;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(15,23,20,.10);
  --font-head: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --head-case: uppercase;
  --head-weight: 600;
  --head-track: .01em;
  --on-sun: #0b1d14;
  --surface-2: #fbf9f5;
  --text-soft: #2c3a32;
  --no-bg: #f6ede6;
  --font-display: var(--font-head);
  --font-script: var(--font-head);
}

/* Explore (default): dark forest-charcoal, amber accent, Bebas Neue + Kaushan Script for the hero. */
[data-theme="explore"] {
  --forest-950: #0d1410; --forest-900: #142019; --forest-700: #24382b; --forest-500: #2d6a4f; --forest-100: #e6efe9;
  --sun: #f6b40e; --sun-dark: #c98f00; --sun-100: #fff4d6; --on-sun: #14140f;
  --cream: #f4f5f3; --surface: #ffffff; --surface-2: #f8f9f8;
  --text: #161b18; --text-soft: #363d39; --muted: #5f6862; --line: #e1e5e1; --no-bg: #fbeee8;
  --font-head: "Montserrat", system-ui, sans-serif; --head-case: none; --head-weight: 700; --head-track: -.01em;
  --font-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif; --font-script: "Kaushan Script", cursive;
}

/* Alpine: clean white, deep navy and amber. Montserrat + Inter. */
[data-theme="alpine"] {
  --forest-950: #071a2e; --forest-900: #0b2540; --forest-700: #164a7a; --forest-500: #1f6fb2; --forest-100: #e7f0f9;
  --sun: #f5a524; --sun-dark: #c77d06; --sun-100: #fff4de; --on-sun: #071a2e;
  --cream: #f5f7fa; --surface: #ffffff; --surface-2: #f8fafc;
  --text: #0f172a; --text-soft: #334155; --muted: #5b6577; --line: #e2e8f0; --no-bg: #fbeee8;
  --font-head: "Montserrat", system-ui, sans-serif; --head-case: none; --head-weight: 700; --head-track: -.01em;
}

/* Earth: warm sand, olive and terracotta. Fraunces (serif) + DM Sans. */
[data-theme="earth"] {
  --forest-950: #1d1a14; --forest-900: #2a2a1c; --forest-700: #4a5424; --forest-500: #5f6e2c; --forest-100: #eceedd;
  --sun: #c4552b; --sun-dark: #a5431e; --sun-100: #f8e7dd; --on-sun: #ffffff;
  --cream: #f4eee4; --surface: #fffdf8; --surface-2: #faf6ee;
  --text: #29241e; --text-soft: #4a4238; --muted: #776b5e; --line: #e5dac9; --no-bg: #f6e6dc;
  --font-head: "Fraunces", Georgia, serif; --font-body: "DM Sans", system-ui, sans-serif;
  --head-case: none; --head-weight: 600; --head-track: 0;
}

/* Bold: monochrome with a red accent, sports-brand style. Barlow Condensed + Barlow. */
[data-theme="bold"] {
  --forest-950: #000000; --forest-900: #111111; --forest-700: #262626; --forest-500: #c8102e; --forest-100: #f3f3f3;
  --sun: #e4002b; --sun-dark: #b80023; --sun-100: #fde6ea; --on-sun: #ffffff;
  --cream: #ffffff; --surface: #ffffff; --surface-2: #f7f7f7;
  --text: #0a0a0a; --text-soft: #2b2b2b; --muted: #5f5f5f; --line: #e5e5e5; --no-bg: #fbe9ec;
  --font-head: "Barlow Condensed", "Arial Narrow", sans-serif; --font-body: "Barlow", system-ui, sans-serif;
  --head-case: uppercase; --head-weight: 700; --head-track: .02em;
}
* { box-sizing: border-box; }
/* Fluid type: the root size grows smoothly from 15.4px on a small phone to about 18px on a laptop and 22px on a very large screen,
   in rem so it still follows the browser's own font-size setting. Everything else is in rem or clamp(). */
html { scroll-behavior: smooth; font-size: clamp(.9625rem, .9rem + .278vw, 1.375rem); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font: 1.04rem/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--forest-500); }
h1, h2, h3 { font-family: var(--font-head); font-weight: var(--head-weight); line-height: 1.15; letter-spacing: var(--head-track); margin: .15em 0 .35em; }
h1 { font-size: clamp(1.75rem, 1.45rem + 1.1vw, 2.5rem); text-transform: var(--head-case); }
h2 { font-size: clamp(1.4rem, 1.2rem + .7vw, 1.9rem); text-transform: var(--head-case); }
h3 { font-size: clamp(1.1rem, 1.05rem + .25vw, 1.3rem); }
code { background: var(--forest-100); padding: 1px 6px; border-radius: 4px; font-size: .85em; }
.wrap { max-width: 76rem; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.eyebrow { font-size: 0.84rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sun-dark); margin: 0; }
.eyebrow.light { color: #fff; opacity: .9; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.hint { font-weight: 400; color: var(--muted); font-size: 0.84rem; }

/* ---------- header ---------- */
.site-header { background: var(--forest-900); color: #fff; position: relative; z-index: 10; }
.site-header.over-hero { position: absolute; top: 0; left: 0; right: 0; background: linear-gradient(rgba(0,0,0,.55), transparent); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-family: var(--font-head); font-size: 1.15rem; font-weight: var(--head-weight); text-transform: var(--head-case); letter-spacing: .03em; }
.logo { width: 30px; height: 30px; color: #fff; }
.menu { display: flex; align-items: center; gap: 24px; }
.menu a, .menu .linklike { color: rgba(255,255,255,.88); text-decoration: none; font-weight: 500; font-size: .9rem; }
.menu a:hover, .menu .linklike:hover { color: #fff; }
.menu .btn.small { color: var(--on-sun); }
.menu-toggle, .menu-btn { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; background: var(--sun); color: var(--on-sun); border: 2px solid var(--sun); border-radius: 999px;
  padding: 9px 20px; font: 600 .9rem var(--font-body); text-decoration: none; cursor: pointer;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.btn:hover { background: var(--sun-dark); border-color: var(--sun-dark); transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--sun) 35%, transparent); }
.btn.big { padding: 12px 26px; font-size: .98rem; }
.btn.small { padding: 6px 16px; font-size: .85rem; }
.btn.block { display: block; width: 100%; text-align: center; }
.btn.ghost { background: transparent; color: var(--forest-700); border-color: var(--forest-700); }
.btn.ghost:hover { background: var(--forest-700); color: #fff; box-shadow: none; }
.btn.ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.8); }
.btn.ghost-light:hover { background: #fff; color: var(--forest-950); box-shadow: none; }
.btn.act-approved { background: var(--forest-500); border-color: var(--forest-500); color: #fff; }
.btn.act-rejected, .btn.act-cancelled, .btn.act-requested { background: #fff; border-color: var(--line); color: var(--text); }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--forest-500); cursor: pointer; text-decoration: underline; }
.danger { color: var(--err) !important; }
form.inline { display: inline; }

/* ---------- flash ---------- */
main { padding-top: 12px; }
.flash { padding: 9px 14px; border-radius: 10px; margin-bottom: 12px; font-weight: 500; }
.flash.ok { background: var(--forest-100); color: var(--forest-700); }
.flash.err { background: var(--err-bg); color: var(--err); }

/* ---------- home hero ---------- */
.hero {
  position: relative; min-height: min(86vh, 760px); display: flex; align-items: flex-end;
  color: #fff; overflow: hidden;
  background: radial-gradient(ellipse at 75% 15%, color-mix(in srgb, var(--sun) 55%, transparent), transparent 55%),
              linear-gradient(170deg, var(--forest-700) 0%, var(--forest-900) 60%, var(--forest-950) 100%);
  background-size: cover; background-position: center;
}
.hero[style]::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 50%, rgba(0,0,0,.55) 100%); }
.hero h1, .hero .eyebrow { text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.hero-inner { z-index: 2; }
.hero-mountains { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 55%; }
.hero-inner { position: relative; width: 100%; padding-top: 120px; padding-bottom: 64px; }
.hero h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.02; margin-bottom: 14px; text-shadow: 0 2px 20px rgba(0,0,0,.25); }
.hero h1 span { color: var(--sun); }
.hero-sub { max-width: 560px; font-size: 1rem; color: rgba(255,255,255,.9); margin: 0 0 18px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.trust { background: var(--forest-900); color: #fff; }
.trust-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.trust strong { display: block; font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.3rem; color: var(--sun); line-height: 1.1; }
.trust span { font-size: .9rem; color: rgba(255,255,255,.75); }

/* ---------- sections ---------- */
.section { padding: 18px 0 4px; }
.section-head { margin-bottom: 10px; }
.row-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.more { font-weight: 600; text-decoration: none; }

.why { background: var(--surface); border-radius: 16px; padding: 22px 24px; margin: 18px 0 6px; box-shadow: var(--shadow); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.why-icon { font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; color: var(--sun); line-height: 1; }
.why-item p { color: var(--muted); margin: 0; }

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery a { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--forest-100); }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.gallery a:hover img { transform: scale(1.04); }

.cta-band {
  margin: 22px 0 0; padding: 28px 24px; border-radius: 16px; text-align: center; color: #fff;
  background: radial-gradient(ellipse at 80% 0%, color-mix(in srgb, var(--sun) 50%, transparent), transparent 60%), var(--forest-900);
}
.cta-band p { color: rgba(255,255,255,.8); margin: 0 0 18px; }

/* ---------- cards ---------- */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 420px) { .grid { grid-template-columns: 1fr; } }
.card {
  background: var(--surface); border-radius: var(--radius); color: var(--text); text-decoration: none;
  box-shadow: 0 2px 10px rgba(15,23,20,.06); border: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden; transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card h3 { margin: 4px 0 6px; }
.card p { margin: 0; }
.card-img {
  position: relative; aspect-ratio: 16 / 9;
  background: linear-gradient(160deg, var(--forest-500), var(--forest-900)); background-size: cover; background-position: center;
}
.card-img svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.card-img .tag { position: absolute; top: 14px; left: 14px; }
.card-price { position: absolute; right: 14px; bottom: 14px; background: color-mix(in srgb, var(--forest-950) 85%, transparent); color: #fff; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; gap: 2px; }
.card-summary { color: var(--muted); font-size: .95rem; }
.card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: .9rem; }
.facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.facts span { background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 0.84rem; font-weight: 500; }
.tag { display: inline-block; font-size: 0.84rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; letter-spacing: .03em; }
.tag.diff { background: var(--sun); color: var(--on-sun); }
.tag.full { background: var(--err-bg); color: var(--err); }
.rating { color: var(--sun-dark); font-weight: 600; letter-spacing: 1px; }

/* lead cards */
.lead-card { flex-direction: row; align-items: center; gap: 16px; padding: 18px 20px; }
.leads-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .leads-grid { grid-template-columns: 1fr; } }
.grid > .card:not(.trek-card):not(.lead-card) { padding: 22px; gap: 4px; }
.avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--sun), var(--sun-dark)); color: var(--on-sun); display: grid; place-items: center; font: 700 1.4rem var(--font-head); }
.avatar.big { width: 96px; height: 96px; font-size: 2.4rem; }

/* ---------- trek page banner ---------- */
.banner {
  position: relative; color: #fff; min-height: 240px; display: flex; align-items: flex-end;
  background: radial-gradient(ellipse at 80% 10%, color-mix(in srgb, var(--sun) 45%, transparent), transparent 55%), linear-gradient(170deg, var(--forest-700), var(--forest-950));
  background-size: cover; background-position: center;
}
.banner[style]::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(5,15,10,.8)); }
.banner-inner { position: relative; width: 100%; padding-top: 24px; padding-bottom: 42px; }
.banner .crumb a { color: rgba(255,255,255,.85); }
.banner h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 10px 0 4px; }
.banner-sub { margin: 0; color: rgba(255,255,255,.85); font-size: 1rem; }
.stat-strip {
  position: relative; margin-top: -32px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat-strip div { padding: 10px 16px; border-right: 1px solid var(--line); }
.stat-strip div:last-child { border-right: 0; }
.stat-strip span { display: block; font-size: 0.84rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.stat-strip strong { font: var(--head-weight) 1.12rem var(--font-head); }

/* ---------- pages ---------- */
.crumb { margin: 0 0 8px; font-size: .9rem; }
.crumb a { text-decoration: none; }
.page-head { margin-bottom: 10px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.lead { font-size: 1.08rem; font-weight: 500; }
.prose { color: var(--text-soft); }
.prose p { margin: 0 0 .55em; white-space: pre-line; }
.prose p:last-child { margin-bottom: 0; }
.two-col h3 { margin-top: 16px; }
.two-col aside h3 { margin-top: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: 0 2px 10px rgba(15,23,20,.05); }
.two-col aside.panel { position: sticky; top: 76px; border-top: 4px solid var(--sun); }
.price { font: var(--head-weight) 1.5rem var(--font-head); margin: 0 0 16px; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table th, .table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table th { font-size: 0.84rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: var(--surface-2); }
.table tr.past td { opacity: .5; }
.two-col .table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.actions form { margin: 0 4px 6px 0; }

/* ---------- forms ---------- */
.form { display: flex; flex-direction: column; gap: 10px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; font-weight: 600; }
.form input, .form select, .form textarea, .inline-form select, .inline-form input {
  font: 400 .95rem var(--font-body); padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); width: 100%; color: var(--text);
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--forest-500); box-shadow: 0 0 0 3px var(--forest-100); }
.form fieldset { border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 14px 12px; margin: 0; }
.form legend { font-size: .88rem; font-weight: 600; padding: 0 4px; }
.form label.radio, .form label.check { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; padding: 6px 0; }
.form label.radio input, .form label.check input { width: auto; accent-color: var(--sun-dark); }
.form label.radio.disabled { color: var(--muted); }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.inline-form { display: flex; gap: 6px; align-items: center; }
.inline-form select { width: auto; max-width: 180px; padding: 6px 8px; }
.inline-form input.narrow { width: 72px; padding: 6px 8px; }
.auth { max-width: 420px; margin: 12px auto; border-top: 4px solid var(--sun); }
.head-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* ---------- status ---------- */
.status { display: inline-block; font-size: 0.84rem; font-weight: 700; padding: 3px 12px; border-radius: 999px; text-transform: capitalize; background: #eee; }
.status.requested { background: var(--warn-bg); color: var(--warn); }
.status.approved { background: var(--forest-100); color: var(--forest-700); }
.status.completed { background: var(--info-bg); color: var(--info); }
.status.rejected, .status.cancelled { background: var(--surface-2); color: var(--muted); }
.warn { color: var(--err); font-weight: 600; }

/* ---------- bookings ---------- */
.booking { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 10px; }
.booking h3 { margin: 0; }
.booking h3 a { color: var(--text); text-decoration: none; }
.booking p { margin: 4px 0 0; }
.booking-main { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.booking-side { display: flex; gap: 14px; align-items: center; }
.review-form { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }

/* ---------- lead profile ---------- */
.profile-head { display: flex; gap: 18px; align-items: center; margin-bottom: 12px; }
.stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 18px; min-width: 130px; }
.stat strong { display: block; font: var(--head-weight) 1.5rem var(--font-head); color: var(--forest-700); }
.stat span { color: var(--muted); font-size: .85rem; }
.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 8px; }
.review-head { display: flex; justify-content: space-between; gap: 8px; }
.review p { margin: 6px 0 0; }

/* ---------- admin ---------- */
.subnav, .tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.subnav a, .tabs a { padding: 7px 16px; border-radius: 999px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: .9rem; font-weight: 500; text-transform: capitalize; }
.subnav a.on, .tabs a.on { background: var(--forest-900); color: #fff; border-color: var(--forest-900); }

/* ---------- footer ---------- */
.site-footer { margin-top: 32px; background: var(--forest-950); color: rgba(255,255,255,.7); padding: 28px 0 0; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer-grid h4 { font: 600 0.84rem var(--font-body); text-transform: uppercase; letter-spacing: .12em; color: #fff; margin: 6px 0 14px; }
.footer-grid a, .footer-grid > div > span { display: block; color: rgba(255,255,255,.72); text-decoration: none; margin-bottom: 9px; }
.footer-grid a:hover { color: var(--sun); }
.footer-about .brand { display: inline-flex; margin: 0 0 12px; color: #fff; }
.footer-about p { max-width: 360px; margin: 0 0 18px; line-height: 1.6; }
.socials { display: flex; gap: 10px; }
.socials a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); margin: 0; }
.socials a:hover { background: var(--sun); color: var(--on-sun); }
.socials svg { width: 18px; height: 18px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 12px; padding-bottom: 14px; border-top: 1px solid rgba(255,255,255,.1); font-size: 0.84rem; color: rgba(255,255,255,.5); }

/* ---------- WhatsApp ---------- */
.wa-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; align-items: center; gap: 6px;
  background: var(--forest-500); color: #fff; text-decoration: none; font-weight: 600; font-size: 0.84rem;
  padding: 7px 12px 7px 9px; border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,.18); transition: transform .15s;
}
.wa-float:hover { transform: translateY(-2px); }
.wa-float svg { width: 18px; height: 18px; }
.wa-inline { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 10px; border-radius: 10px; background: var(--ok-bg); color: var(--forest-700); font-weight: 600; font-size: .9rem; text-decoration: none; }
.wa-inline svg { width: 20px; height: 20px; }
.assurances { list-style: none; padding: 12px 0 0; margin: 12px 0 0; border-top: 1px solid var(--line); font-size: .88rem; }
.assurances li { position: relative; padding-left: 24px; margin-bottom: 8px; }
.assurances li::before { content: "✓"; position: absolute; left: 0; color: var(--forest-500); font-weight: 700; }

/* ---------- trek detail sections ---------- */
.section-nav {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; overflow-x: auto; margin: 4px 0 18px; padding: 6px 0;
  background: var(--cream); border-bottom: 1px solid var(--line); scrollbar-width: none;
}
.section-nav a { flex: none; padding: 8px 14px; border-radius: 999px; color: var(--text); text-decoration: none; font-weight: 500; font-size: .92rem; }
.section-nav a:hover { background: var(--surface); color: var(--sun-dark); }
.trek-section { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); scroll-margin-top: 70px; }
.trek-section:last-child { border-bottom: 0; }
.trek-section h2 { font-size: 1.3rem; margin-top: 0; }
.two-col .trek-section h3 { margin-top: 0; }
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.timeline li { position: relative; padding: 0 0 16px 34px; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 3px solid var(--sun); }
.timeline strong { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1rem; letter-spacing: .02em; }
.timeline p { margin: 4px 0 0; color: var(--muted); }
.incl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.incl-box { border-radius: var(--radius); padding: 14px 16px; }
.incl-box.yes { background: var(--forest-100); }
.incl-box.no { background: var(--no-bg); }
.incl-box h3 { font-size: 1.1rem; margin: 0 0 10px; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { position: relative; padding-left: 24px; margin-bottom: 5px; }
.checklist li::before { position: absolute; left: 0; font-weight: 700; }
.yes .checklist li::before { content: "✓"; color: var(--forest-500); }
.no .checklist li::before { content: "✕"; color: var(--err); }
.carry-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; list-style: none; padding: 0; margin: 0; }
.carry-list li { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px 9px 40px; position: relative; font-size: .95rem; }
.carry-list li::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  background: var(--forest-100) no-repeat center / 11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%231f6fb2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.faqs details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 6px; }
.faqs summary { cursor: pointer; padding: 10px 40px 10px 14px; font-weight: 600; list-style: none; position: relative; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--sun-dark); }
.faqs details[open] summary::after { content: "−"; }
.faqs details p { margin: 0; padding: 0 14px 12px; color: var(--muted); white-space: pre-line; }

/* ---------- about & legal ---------- */
.banner.short { min-height: 300px; }
.banner.short .banner-sub { max-width: 640px; }
.about-story { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: start; padding: 4px 0; }
.about-story p:not(.eyebrow) { color: var(--text-soft); font-size: 1rem; }
.about-values { display: grid; gap: 8px; }
.about-values div { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--sun); border-radius: 12px; padding: 10px 14px; }
.about-values strong { display: block; font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; }
.about-values span { color: var(--muted); font-size: .95rem; }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.steps li { counter-increment: step; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.steps li::before { content: "0" counter(step); display: block; font: 700 1.7rem var(--font-head); color: var(--sun); line-height: 1; margin-bottom: 10px; }
.steps strong { display: block; font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; margin-bottom: 4px; }
.steps span { color: var(--muted); font-size: .95rem; }
.legal { max-width: 760px; margin: 0 auto; }
.legal h2 { font-size: 1.2rem; margin: 18px 0 6px; }
.legal p { margin: 0 0 8px; }
.legal p, .legal li { color: var(--text-soft); }
.notfound { text-align: center; padding: 32px 0 8px; }
.notfound h1 { max-width: 640px; margin: 8px auto 12px; }

/* ---------- tablet & small laptop ---------- */
@media (max-width: 860px) {
  .two-col { grid-template-columns: 1fr; }
  .two-col aside.panel { position: static; }
  .incl-grid, .about-story { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .gallery { gap: 8px; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 20px; }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  .why { padding: 20px 16px; }
  .why-grid { grid-template-columns: 1fr; gap: 14px; }
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 16px; font-size: .88rem; }
  .footer-about { grid-column: 1 / -1; }
  .wa-float span { display: none; }
  .wa-float { padding: 9px; }
  .booking-main { flex-direction: column; }
  .stat-strip div { border-right: 0; border-bottom: 1px solid var(--line); }

  /* compact dropdown menu under the menu button */
  .nav { position: relative; }
  .menu-btn { display: block; width: 28px; height: 22px; position: relative; cursor: pointer; }
  .menu-btn span, .menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: #fff; border-radius: 2px; }
  .menu-btn span { top: 10px; }
  .menu-btn span::before { top: -7px; }
  .menu-btn span::after { top: 7px; }
  .menu {
    display: none; position: absolute; top: 54px; right: 12px; width: 190px; z-index: 30;
    flex-direction: column; align-items: stretch; gap: 0; padding: 6px;
    background: var(--forest-900); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.3);
  }
  .menu a, .menu .linklike { padding: 9px 12px; border-radius: 8px; font-size: .95rem; text-align: left; }
  .menu a:hover, .menu .linklike:hover { background: rgba(255,255,255,.08); }
  .menu form.inline { display: block; }
  .menu .linklike { width: 100%; text-decoration: none; }
  .menu .btn.small { margin: 6px 6px 4px; text-align: center; }
  .menu-toggle:checked ~ .menu { display: flex; }
}

.soon-tag { font-size: 0.84rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sun-dark); background: var(--sun-100); padding: 3px 10px; border-radius: 999px; }
.section-head p.muted { margin: 0; }

/* theme preview switcher (only shown while previewing themes) */
.theme-bar { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; gap: 4px; align-items: center; padding: 6px; border-radius: 999px; background: rgba(0,0,0,.85); box-shadow: 0 8px 24px rgba(0,0,0,.25); font: 500 0.84rem var(--font-body); }
.theme-bar span { color: rgba(255,255,255,.6); padding: 0 8px; }
.theme-bar a { color: #fff; text-decoration: none; padding: 6px 12px; border-radius: 999px; }
.theme-bar a.on { background: #fff; color: #000; }

.soon-note { margin: 0 0 6px; color: var(--muted); }
.soon-note .soon-tag { display: inline-block; margin-bottom: 6px; }

.card-img .tag.open { left: auto; right: 12px; background: var(--ok); color: #fff; }

/* booking sent / WhatsApp hand-off */
.sent { max-width: 560px; margin: 8px auto; text-align: center; border-top: 4px solid var(--forest-500); }
.sent h1 { margin: 6px 0 8px; }
.sent-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 18px 0; text-align: left; }
.sent-summary div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.sent-summary dt { font-size: 0.84rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.sent-summary dd { margin: 2px 0 0; font-weight: 600; }
.btn-wa { display: inline-flex; align-items: center; gap: 8px; background: var(--forest-500); color: #fff; text-decoration: none; font-weight: 700; padding: 12px 24px; border-radius: 999px; margin: 4px 0 12px; }
.btn-wa:hover { background: var(--forest-700); }
.btn-wa svg { width: 20px; height: 20px; }
.wa-link { display: inline-flex; align-items: center; gap: 4px; color: var(--forest-700); font-weight: 600; font-size: .85rem; text-decoration: none; }
.wa-link svg { width: 15px; height: 15px; }

/* lead photos: circular crop focused on the upper body */
img.avatar.photo { object-fit: cover; object-position: 50% 30%; background: var(--forest-100); border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--sun); }
img.avatar.big.photo { width: 120px; height: 120px; }

/* footer always reaches the bottom of the window, so short pages have no blank strip */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1 0 auto; width: 100%; }
.site-footer { flex-shrink: 0; }

.profile-head .stats { margin: 0 0 0 auto; }
.tight-list { margin: 0; padding-left: 18px; }
.tight-list li { margin-bottom: 3px; }
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 4px; }
.photo-strip img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); display: block; }
@media (max-width: 640px) {
  .profile-head { flex-wrap: wrap; }
  .profile-head .stats { margin: 6px 0 0; }
}

/* trek-lead applications */
.lead-status { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border-radius: var(--radius); margin-bottom: 12px; border: 1px solid var(--line); background: var(--surface); }
.lead-status.pending { border-left: 4px solid var(--sun); }
.lead-status.approved { border-left: 4px solid var(--ok); }
.lead-status.rejected { border-left: 4px solid var(--err); }
.lead-status span { color: var(--muted); }
.mini-steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 12px; }
.mini-steps li { counter-increment: s; position: relative; padding: 0 0 10px 30px; }
.mini-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--sun); color: var(--on-sun); font: 700 0.84rem/20px var(--font-body); text-align: center; }
.mini-steps strong { display: block; }
.mini-steps span { color: var(--muted); font-size: .92rem; }
.verified { display: inline-block; vertical-align: middle; font: 600 0.84rem var(--font-body); color: #fff; background: var(--ok); padding: 2px 8px; border-radius: 999px; letter-spacing: 0; text-transform: none; }
.verified.sm { padding: 1px 6px; }
.status.pending { background: var(--warn-bg); color: var(--warn); }
.form input[type="file"] { padding: 6px; }

/* ================= Explore layout (header, hero, buttons) ================= */

/* buttons: squared-off, uppercase, with icons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: 0.84rem; padding: 9px 18px; }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn.big { padding: 13px 22px; font-size: 0.84rem; }
.btn.small { padding: 6px 13px; font-size: 0.84rem; }
.btn.ghost-light { background: rgba(0,0,0,.28); border-color: rgba(255,255,255,.85); }

/* header */
.site-header .nav { min-height: 70px; gap: 20px; }
.site-header.over-hero { background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,0)); }
.brand { gap: 10px; }
.brand .logo { width: 46px; height: 38px; }
.brand-text { display: flex; flex-direction: column; line-height: .95; }
.brand-text b { font: 800 1.12rem var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.brand-text i { font: 700 0.84rem var(--font-head); font-style: normal; letter-spacing: .34em; text-transform: uppercase; color: var(--sun); margin-top: 3px; }
.menu { gap: 26px; margin: 0 auto; }
.menu a { position: relative; text-transform: uppercase; letter-spacing: .07em; font-size: 0.84rem; font-weight: 600; padding: 6px 0; color: rgba(255,255,255,.9); }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--sun); transform: scaleX(0); transition: transform .2s; }
.menu a:hover::after, .menu a.on::after { transform: scaleX(1); }
.menu a.on { color: #fff; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.icon-link { display: grid; place-items: center; width: 30px; height: 30px; color: #fff; opacity: .9; }
.icon-link:hover { color: var(--sun); opacity: 1; }
.icon-link svg { width: 19px; height: 19px; }
.account { position: relative; }
.account summary { list-style: none; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; background: var(--sun); color: var(--on-sun); display: grid; place-items: center; font: 700 .85rem var(--font-head); }
.account summary::-webkit-details-marker { display: none; }
.account-menu { position: absolute; right: 0; top: 42px; z-index: 40; min-width: 180px; display: flex; flex-direction: column; padding: 8px; border-radius: 10px; background: var(--surface); box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.account-menu a, .account-menu .linklike { color: var(--text); text-decoration: none; padding: 7px 10px; border-radius: 6px; font-size: .92rem; text-align: left; width: 100%; }
.account-menu a:hover, .account-menu .linklike:hover { background: var(--surface-2); }
.account-menu > span { padding: 4px 10px 6px; }

/* hero */
.hero { flex-direction: column; align-items: stretch; min-height: min(92vh, 800px); }
.hero[style]::before { background:
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.32) 38%, rgba(0,0,0,0) 65%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 25%); }
.hero-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 96px; padding-bottom: 40px; }
.hero-script { font: 400 clamp(1.9rem, 3.4vw, 2.9rem)/1 var(--font-script); color: var(--sun); margin: 0 0 -.12em 4px; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.hero .hero-title { font: 400 clamp(3.2rem, 7.4vw, 6rem)/.92 var(--font-display); letter-spacing: .02em; text-transform: uppercase; color: #fff; margin: 0; max-width: 760px; }
.hero-tagline { font: 600 clamp(1.05rem, 1.6vw, 1.35rem) var(--font-head); color: #fff; margin: 8px 0 0; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.hero-divider { display: flex; align-items: center; gap: 10px; margin: 12px 0 14px; color: var(--sun); }
.hero-divider span { width: 70px; height: 1px; background: rgba(255,255,255,.6); }
.hero-divider svg { width: 26px; height: 26px; }
.hero-intro { max-width: 430px; margin: 0 0 22px; color: rgba(255,255,255,.92); font-size: 1rem; line-height: 1.6; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.hero-ctas { gap: 14px; }

/* feature strip along the bottom of the hero */
.hero-features { position: relative; z-index: 2; background: rgba(7,42,48,.86); backdrop-filter: blur(6px); }
.features { display: grid; grid-template-columns: repeat(4, 1fr); }
.feature { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 12px; color: #fff; }
.feature + .feature { border-left: 1px solid rgba(255,255,255,.14); }
.feature svg { width: 34px; height: 34px; color: var(--sun); flex: none; }
.feature span { font: 600 0.84rem/1.35 var(--font-head); text-transform: uppercase; letter-spacing: .06em; }

/* gallery page + lightbox */
.gallery a { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.92); padding: 40px 64px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; cursor: pointer; font-size: 2rem; line-height: 1; width: 48px; height: 48px; border-radius: 50%; }
.lightbox button:hover { background: var(--sun); color: var(--on-sun); }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }

/* contact page */
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.contact-card { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.contact-card svg { width: 26px; height: 26px; color: var(--sun-dark); margin-bottom: 6px; }
.contact-card.wa svg { color: var(--forest-500); }
.contact-card strong { font-family: var(--font-head); }
.contact-card em { font-style: normal; color: var(--muted); font-size: .85rem; }

@media (max-width: 1000px) {
  .menu { gap: 16px; }
  .menu a { font-size: 0.84rem; letter-spacing: .05em; }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .menu { margin: 0; }
  .menu a { font-size: .9rem; text-transform: none; letter-spacing: 0; }
  .menu a::after { display: none; }
  .brand-text b { font-size: .95rem; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .feature { justify-content: flex-start; padding: 10px 8px; gap: 10px; }
  .feature:nth-child(3) { border-left: 0; }
  .feature:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
  .feature svg { width: 26px; height: 26px; }
  .hero-inner { padding-top: 84px; }
  .lightbox { padding: 16px; }
  .contact-grid { grid-template-columns: 1fr; }
}

main { padding-top: 22px; }
.hero ~ main, .banner ~ main { padding-top: 18px; }

/* Direct children of <body> (a flex column) must keep full width, or blocks like
   the trek fact strip shrink to their narrowest size. */
body > .wrap, body > section, body > header, body > footer { width: 100%; }
.stat-strip { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
@media (max-width: 640px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-strip div { border-bottom: 1px solid var(--line); }
  .stat-strip div:nth-child(odd) { border-right: 1px solid var(--line); }
}

/* .wrap's padding shorthand was zeroing main's top padding; restore it. */
main.wrap { padding-top: 26px; }
.page-head.head-row { align-items: flex-end; }
.head-row .btn { white-space: nowrap; flex: none; }

/* lead photos: subtle white frame instead of a coloured ring */
img.avatar.photo { border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.leads-grid .card { gap: 6px; }
.card-link { margin-top: auto; padding-top: 6px; font-weight: 600; font-size: .9rem; color: var(--sun-dark); }
.card:hover .card-link { text-decoration: underline; }

/* ================= Western Ghats theme ==========
   Shola-forest greens, monsoon-mist light pages, laterite red-orange accent,
   bold geometric uppercase headings, hero slideshow, portrait trek cards,
   and a faint topographic contour texture on dark areas. */
[data-theme~="ghats"] {
  /* Monsoon Teal & Coral: one dark base, one accent; status colours are tints of these. */
  --forest-950: #072a30; --forest-900: #0e3b43; --forest-700: #1b5a5e; --forest-500: #2f7a72; --forest-100: #e0eeeb;
  --sun: #e96b4c; --sun-dark: #cc5234; --sun-100: #fde8e1; --on-sun: #ffffff;
  --cream: #eef4f2; --surface: #ffffff; --surface-2: #f5f9f8;
  --text: #10292c; --text-soft: #31494b; --muted: #5b7173; --line: #d6e3e0; --no-bg: #fbeae4;
  --err: #c2453d; --err-bg: #fbe7e5;
  --ok: #2f7a72; --ok-bg: #e0eeeb; --warn: #b4502f; --warn-bg: #fde8e1; --info: #1b5a5e; --info-bg: #e3edf0;
  --font-head: "Outfit", system-ui, sans-serif; --font-display: "Outfit", system-ui, sans-serif; --font-script: "Inter", sans-serif;
  --head-case: none; --head-weight: 700; --head-track: 0;
  --contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1.2'%3E%3Cpath d='M-20 60c60-40 120 30 190 0s120-50 250 10'/%3E%3Cpath d='M-20 95c70-35 130 35 200 5s110-45 240 15'/%3E%3Cpath d='M-20 130c80-30 130 40 210 10s100-40 230 20'/%3E%3Cpath d='M-20 200c60 30 140-40 210-10s120 50 230-5'/%3E%3Cpath d='M-20 235c70 25 150-35 220-5s110 45 220-10'/%3E%3Cpath d='M-20 270c80 20 160-30 230 0s100 40 210-15'/%3E%3Cellipse cx='300' cy='160' rx='38' ry='20'/%3E%3Cellipse cx='300' cy='160' rx='70' ry='38'/%3E%3C/g%3E%3C/svg%3E");
}
.hero-slides, .slide-nums { display: none; }

[data-theme~="ghats"] h2 { text-transform: uppercase; letter-spacing: .02em; font-weight: 800; }
[data-theme~="ghats"] .section-head h2::after { content: ""; display: block; width: 42px; height: 3px; margin-top: 6px; background: var(--sun); border-radius: 2px; }

/* header: thin line under the nav like the reference */
[data-theme~="ghats"] .site-header { background: var(--forest-900) var(--contour); }
[data-theme~="ghats"] .site-header.over-hero { background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); border-bottom: 1px solid rgba(255,255,255,.18); }
[data-theme~="ghats"] .brand-text b { font-weight: 800; letter-spacing: .1em; }

/* hero: slideshow with slow zoom, numbered controls, mist fading into the page */
[data-theme~="ghats"] .hero-slides { display: block; position: absolute; inset: 0; overflow: hidden; }
[data-theme~="ghats"] .slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1); transition: opacity 1.4s ease, transform 9s ease-out; }
[data-theme~="ghats"] .slide.on { opacity: 1; transform: scale(1.07); }
[data-theme~="ghats"] .hero[style]::before { background:
    linear-gradient(90deg, rgba(4,26,30,.72) 0%, rgba(4,26,30,.35) 40%, rgba(4,26,30,0) 70%),
    linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 60%, rgba(7,42,48,.55) 100%); }
[data-theme~="ghats"] .slide-nums { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; position: absolute; right: max(20px, calc((100vw - 1180px) / 2 + 20px)); top: 50%; transform: translateY(-50%); z-index: 3; }
[data-theme~="ghats"] .slide-nums button { position: relative; background: none; border: 0; color: rgba(255,255,255,.6); font: 600 1rem var(--font-head); cursor: pointer; padding: 2px 0; transition: color .2s, font-size .2s; }
[data-theme~="ghats"] .slide-nums button.on { color: #fff; font-size: 1.6rem; padding-right: 0; }
[data-theme~="ghats"] .slide-nums button.on::after { content: ""; position: absolute; right: -60px; top: 50%; width: 46px; height: 1px; background: #fff; }
[data-theme~="ghats"] .hero-script { font: 700 0.84rem var(--font-head); letter-spacing: .32em; text-transform: uppercase; color: var(--sun); margin: 0 0 8px; text-shadow: none; }
[data-theme~="ghats"] .hero .hero-title { font: 800 clamp(2.6rem, 6vw, 4.6rem)/.98 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; }
[data-theme~="ghats"] .hero-divider { color: var(--sun); }
[data-theme~="ghats"] .hero-features { background: rgba(7,42,48,.78) var(--contour); }
[data-theme~="ghats"] .feature svg { color: var(--sun); }

/* portrait trek cards with the name over the photo */
[data-theme~="ghats"] .trek-card { position: relative; aspect-ratio: 3 / 4; color: #fff; border: 0; background: var(--forest-900); }
[data-theme~="ghats"] .trek-card .card-img { position: absolute; inset: 0; aspect-ratio: auto; transition: transform .5s; }
[data-theme~="ghats"] .trek-card:hover .card-img { transform: scale(1.05); }
[data-theme~="ghats"] .trek-card .card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 30%, rgba(4,26,30,.25) 55%, rgba(4,26,30,.9) 100%); }
[data-theme~="ghats"] .trek-card .card-img .tag { z-index: 1; }
[data-theme~="ghats"] .trek-card .card-img .tag.open { top: 12px; right: 12px; left: auto; }
[data-theme~="ghats"] .trek-card .card-price { z-index: 1; top: 44px; bottom: auto; right: 12px; background: var(--sun); color: var(--on-sun); }
[data-theme~="ghats"] .trek-card .card-body { position: relative; z-index: 1; margin-top: auto; padding: 14px 16px 16px; flex: none; }
[data-theme~="ghats"] .trek-card .card-summary, [data-theme~="ghats"] .trek-card .facts { display: none; }
[data-theme~="ghats"] .trek-card h3 { font-size: 1.35rem; font-weight: 800; text-transform: uppercase; margin: 2px 0 4px; color: #fff; }
[data-theme~="ghats"] .trek-card .eyebrow { color: rgba(255,255,255,.8); }
[data-theme~="ghats"] .trek-card .card-bottom { border-top-color: rgba(255,255,255,.22); color: rgba(255,255,255,.92); padding-top: 8px; }
[data-theme~="ghats"] .trek-card .card-bottom strong { color: #fff; }
[data-theme~="ghats"] .trek-card .soon-tag { background: rgba(255,255,255,.16); color: #fff; }

/* dark areas get the contour texture */
[data-theme~="ghats"] .site-footer, [data-theme~="ghats"] .cta-band, [data-theme~="ghats"] .banner:not([style]) { background-image: var(--contour); }
[data-theme~="ghats"] .site-footer { background-color: var(--forest-950); }
[data-theme~="ghats"] .cta-band { background-color: var(--forest-900); }
[data-theme~="ghats"] .card { border-radius: 12px; }

@media (max-width: 640px) {
  [data-theme~="ghats"] .slide-nums { display: none; }
  [data-theme~="ghats"] .trek-card { aspect-ratio: 3 / 4.2; }
  [data-theme~="ghats"] .trek-card h3 { font-size: 1.1rem; }
}

/* Compact trek cards: short fixed height, many per row. */
[data-theme~="ghats"] #treks .grid { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 12px; }
[data-theme~="ghats"] .trek-card { aspect-ratio: auto; height: 240px; border-radius: 10px; }
[data-theme~="ghats"] .trek-card h3 { font-size: 1rem; margin: 1px 0 3px; }
[data-theme~="ghats"] .trek-card .eyebrow { font-size: 0.84rem; letter-spacing: .1em; }
[data-theme~="ghats"] .trek-card .card-body { padding: 10px 12px 12px; }
[data-theme~="ghats"] .trek-card .card-bottom { font-size: 0.84rem; padding-top: 6px; }
[data-theme~="ghats"] .trek-card .tag { font-size: 0.84rem; padding: 2px 8px; }
[data-theme~="ghats"] .trek-card .card-img .tag:not(.open) { top: 10px; left: 10px; }
[data-theme~="ghats"] .trek-card .card-img .tag.open { top: 10px; right: 10px; }
[data-theme~="ghats"] .trek-card .card-price { top: 34px; right: 10px; font-size: 0.84rem; padding: 2px 9px; }
[data-theme~="ghats"] .trek-card .soon-tag { font-size: 0.84rem; padding: 2px 8px; }
@media (max-width: 640px) {
  [data-theme~="ghats"] #treks .grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  [data-theme~="ghats"] .trek-card { height: 200px; aspect-ratio: auto; }
}

/* Smaller hero buttons */
.hero-ctas { gap: 10px; }
.hero-ctas .btn.big { padding: 8px 15px; font-size: 0.84rem; gap: 6px; border-width: 1.5px; }
.hero-ctas .btn.big svg { width: 14px; height: 14px; }

.brand img.logo { width: 52px; height: 39px; display: block; }

/* Logo mark: keep its proportions; a soft light glow so the green reads on the dark header. */
.brand img.logo { width: auto; height: 40px; filter: drop-shadow(0 0 6px rgba(255,255,255,.35)); }

/* ================= Interactive islands ================= */

/* trek finder */
.finder-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.finder-q { display: flex; flex-direction: column; gap: 6px; }
.finder-q > span { font: 700 0.84rem var(--font-head); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.finder-meta { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.finder-meta strong { color: var(--sun-dark); font-size: 1.05rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 600 0.84rem var(--font-body); padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--text); cursor: pointer; transition: all .15s; }
.chip:hover { border-color: var(--sun); }
.chip.on { background: var(--sun); border-color: var(--sun); color: var(--on-sun); }
.finder-grid .trek-card { animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.finder-empty { padding: 26px; text-align: center; background: var(--surface); border-radius: 12px; color: var(--muted); }
.tag.match { position: absolute; left: 10px; top: 34px; background: var(--ok); color: #fff; z-index: 1; }

/* lead on trek cards */
.card-lead { display: flex; align-items: center; gap: 6px; font-size: 0.84rem; font-weight: 600; margin: 2px 0; }
.card-lead img, .card-lead i { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; border: 1.5px solid #fff; }
.card-lead i { display: grid; place-items: center; background: var(--sun); color: var(--on-sun); font: 700 0.84rem var(--font-head); font-style: normal; }
.card-lead b { color: #9fe0d3; }
[data-theme~="ghats"] .trek-card .card-lead { color: rgba(255,255,255,.95); }

/* map */
.ghats-map { height: 440px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--forest-100); }
.trek-map { height: 280px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--forest-100); }
.leaflet-container { font-family: var(--font-body); }
.trek-pin { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.trek-pin i { width: 18px; height: 18px; flex: none; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--forest-700); border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.3); margin-top: 4px; }
.trek-pin.open i { background: var(--sun); }
.trek-pin span { font: 700 0.84rem var(--font-head); color: var(--text); background: rgba(255,255,255,.9); padding: 1px 6px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.city-pin { display: flex; align-items: center; gap: 5px; white-space: nowrap; font: 700 0.84rem var(--font-head); color: #fff; text-shadow: 0 0 3px #0f2a22, 0 0 6px #0f2a22; }
.city-pin i { width: 12px; height: 12px; border-radius: 50%; background: var(--forest-900); border: 2px solid #fff; }
.ghats-label { font: 800 .9rem var(--font-head); letter-spacing: .25em; text-transform: uppercase; color: var(--forest-700); white-space: nowrap; transform: rotate(-58deg); text-shadow: 0 0 4px #fff, 0 0 8px #fff; pointer-events: none; }
.map-pop { display: flex; gap: 10px; color: var(--text) !important; text-decoration: none; }
.pop-img { width: 70px; height: 70px; flex: none; border-radius: 8px; background: var(--forest-100) center / cover; }
.pop-body { display: flex; flex-direction: column; gap: 1px; font-size: 0.84rem; }
.pop-body b { font: 700 .92rem var(--font-head); }
.pop-body small { color: var(--muted); }
.pop-open { color: #15803d; font-weight: 600; }
.pop-soon { color: var(--sun-dark); font-weight: 600; }
.pop-body em { font-style: normal; color: var(--sun-dark); font-weight: 700; margin-top: 2px; }
.leaflet-popup-content { margin: 10px; }

/* elevation profile */
.elev-wrap { margin-top: 14px; }
.elev { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 6px; }
.elev-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .85rem; color: var(--muted); margin-bottom: 4px; }
.elev-stats b { color: var(--text); font-family: var(--font-head); }
.elev-svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.elev-svg text { font: 600 10px var(--font-body); fill: var(--muted); }
.elev-svg .elev-tip { fill: var(--sun-dark); font-size: 11px; font-weight: 700; }

/* booking flow */
.bk h4 { font: 700 1rem var(--font-head); margin: 0 0 8px; }
.bk label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; margin-top: 8px; }
.bk input, .bk textarea { font: 400 .92rem var(--font-body); padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); }
.bk input:focus, .bk textarea:focus { outline: none; border-color: var(--forest-500); }
.bk-steps { list-style: none; display: flex; justify-content: space-between; padding: 0; margin: 0 0 14px; position: relative; }
.bk-steps::before { content: ""; position: absolute; left: 14px; right: 14px; top: 13px; height: 2px; background: var(--line); }
.bk-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.84rem; color: var(--muted); font-weight: 600; }
.bk-steps button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); font: 700 0.84rem var(--font-head); color: var(--muted); cursor: pointer; }
.bk-steps button:disabled { cursor: default; }
.bk-steps li.on button { border-color: var(--sun); color: var(--sun-dark); }
.bk-steps li.on { color: var(--text); }
.bk-steps li.done button { background: var(--forest-500); border-color: var(--forest-500); color: #fff; }
.bk-pane { animation: slidein .28s ease both; min-height: 150px; }
@keyframes slidein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.bk-dates { display: grid; gap: 6px; }
.bk-date { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface-2); cursor: pointer; font: inherit; color: var(--text); }
.bk-date small { color: var(--muted); }
.bk-date.on { border-color: var(--sun); background: var(--sun-100); }
.bk-date:disabled { opacity: .5; cursor: not-allowed; }
.bk-people { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.bk-people span { flex: 1; }
.bk-people button { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); font-size: 1.2rem; cursor: pointer; color: var(--text); }
.bk-people b { font: 800 1.3rem var(--font-head); min-width: 22px; text-align: center; }
.bk-total { margin: 12px 0 0; font: 800 1.3rem var(--font-head); }
.bk-total span { display: block; font: 500 0.84rem var(--font-body); color: var(--muted); }
.bk-review { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 4px; font-size: .9rem; }
.bk-review dt { color: var(--muted); }
.bk-review dd { margin: 0; font-weight: 600; }
.bk-err { color: var(--err); font-size: .85rem; font-weight: 600; margin: 8px 0 0; }
.bk-nav { display: flex; gap: 8px; margin-top: 14px; }
.bk-nav .btn { flex: 1; }

/* trust strip + photo reviews */
.trust-strip { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 4px; }
.trust-strip div { flex: 1; min-width: 140px; max-width: 220px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.trust-strip strong { display: block; font: 800 1.6rem var(--font-head); color: var(--forest-700); }
.trust-strip span { color: var(--muted); font-size: 0.84rem; }
.photo-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.photo-reviews figure { margin: 0; background: var(--surface); border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.photo-reviews img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.photo-reviews figcaption { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: .85rem; }
.photo-reviews q { color: var(--text-soft); }
.photo-reviews b { font-size: 0.84rem; color: var(--muted); }
.review-photo { margin-top: 8px; max-width: 240px; width: 100%; border-radius: 8px; display: block; }

@media (max-width: 640px) {
  .finder-panel { grid-template-columns: 1fr; }
  .ghats-map { height: 360px; }
}

/* map: Google-Maps-like polish */
.ghats-map, .trek-map { border: 0; box-shadow: 0 4px 18px rgba(15,23,20,.12); }
.leaflet-control-zoom { border: 0 !important; box-shadow: 0 2px 8px rgba(0,0,0,.18) !important; border-radius: 8px !important; overflow: hidden; }
.leaflet-control-zoom a { width: 32px !important; height: 32px !important; line-height: 32px !important; color: #333 !important; border-bottom-color: #eee !important; }
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.leaflet-popup-tip { box-shadow: none; }
.leaflet-control-attribution { font-size: 0.84rem; background: rgba(255,255,255,.75) !important; }
.ghats-label { font: 700 0.84rem var(--font-head); letter-spacing: .3em; color: var(--forest-500); opacity: .85; text-shadow: 0 0 3px #fff, 0 0 6px #fff; }
.trek-pin i { width: 16px; height: 16px; border-width: 2px; }
.trek-pin span { font: 600 0.84rem var(--font-body); background: #fff; color: #222; padding: 2px 7px; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.city-pin { color: #1f2937; text-shadow: 0 0 3px #fff, 0 0 6px #fff; font: 600 0.84rem var(--font-body); }
.city-pin i { background: var(--forest-500); border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(47,122,114,.25); }

.trek-pin i { display: block; min-width: 16px; min-height: 16px; box-sizing: border-box; }
.trek-pin { align-items: flex-start; }

/* lead dashboard */
.dash-h { font-size: 1.15rem; margin: 6px 0 10px; }
.dash-batch { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.dash-batch-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.dash-batch h3 { margin: 0; font-size: 1.05rem; }
.dash-batch h3 a { color: var(--text); text-decoration: none; }
.table.small th, .table.small td { font-size: .85rem; padding: 6px 10px; }
.pending-dates { margin-bottom: 16px; border-left: 4px solid var(--sun); }
.pending-dates h2 { font-size: 1.1rem; margin-top: 0; display: flex; align-items: center; gap: 8px; }

/* demo banner + who's signed in */
.demo-banner { position: sticky; top: 0; z-index: 60; background: repeating-linear-gradient(-45deg, var(--sun-100), var(--sun-100) 14px, #fbd9cd 14px, #fbd9cd 28px); color: var(--sun-dark); text-align: center; font: 700 0.84rem var(--font-body); letter-spacing: .06em; padding: 5px 10px; }
.acct-who { display: flex; flex-direction: column; gap: 3px; padding: 4px 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: 0.84rem; color: var(--muted); }
.acct-who b { color: var(--text); font-size: .92rem; }
.role { align-self: flex-start; font-style: normal; font-weight: 700; font-size: 0.84rem; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; background: var(--forest-100); color: var(--forest-700); }
.role-admin { background: var(--err-bg); color: var(--err); }
.role-trek-lead { background: var(--sun-100); color: var(--sun-dark); }

/* ================= Shola Night (default) =================
   Dark charcoal everywhere, ONE olive-gold accent for every button, chip,
   price and badge; status colours are tints of that accent or neutral grey.
   Serif section titles, pill buttons, photos do the talking. */
[data-theme~="night"] {
  --forest-950: #0c1214; --forest-900: #12191c; --forest-700: #1f2b2f; --forest-500: #c2bd3c; --forest-100: rgba(194,189,60,.13);
  --sun: #c2bd3c; --sun-dark: #d4cf55; --sun-100: rgba(194,189,60,.13); --on-sun: #12191c;
  --cream: #12191c; --surface: #192326; --surface-2: #202b2f;
  --text: #e9eeec; --text-soft: #c3cdca; --muted: #8e9b98; --line: rgba(255,255,255,.09); --no-bg: rgba(255,255,255,.04);
  --err: #e08575; --err-bg: rgba(224,133,117,.12);
  --ok: #c2bd3c; --ok-bg: rgba(194,189,60,.13); --warn: #d8cfa0; --warn-bg: rgba(216,207,160,.1); --info: #a9b8bb; --info-bg: rgba(169,184,187,.1);
  --font-head: "Marcellus", Georgia, serif; --font-display: "Outfit", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif;
  --head-case: none; --head-weight: 400; --head-track: .01em;
  --shadow: 0 12px 34px rgba(0,0,0,.45);
  color-scheme: dark;
}
[data-theme~="night"] body { font-weight: 300; }
[data-theme~="night"] strong, [data-theme~="night"] b { font-weight: 600; }
[data-theme~="night"] a { color: var(--sun); }

/* headings: serif, no uppercase; section titles centred with a short olive rule */
[data-theme~="night"] h1, [data-theme~="night"] h2, [data-theme~="night"] h3 { font-weight: 400; }
[data-theme~="night"] h2 { text-transform: none; letter-spacing: .01em; font-weight: 400; }
[data-theme~="night"] .section-head { text-align: center; }
[data-theme~="night"] .section-head h2::after { margin: 8px auto 0; width: 54px; height: 2px; background: var(--sun); }
[data-theme~="night"] .section-head p.muted { max-width: 560px; margin: 4px auto 0; }
[data-theme~="night"] .eyebrow { color: var(--sun); font-family: var(--font-body); }

/* buttons: olive pill, or white outline pill */
[data-theme~="night"] .btn { border-radius: 999px; background: var(--sun); border-color: var(--sun); color: var(--on-sun); letter-spacing: .06em; }
[data-theme~="night"] .btn:hover { background: #d4cf55; border-color: #d4cf55; box-shadow: 0 6px 18px rgba(194,189,60,.25); }
[data-theme~="night"] .btn.ghost, [data-theme~="night"] .btn.ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
[data-theme~="night"] .btn.ghost:hover, [data-theme~="night"] .btn.ghost-light:hover { background: #fff; color: var(--on-sun); border-color: #fff; box-shadow: none; }
[data-theme~="night"] .btn.act-approved { background: var(--sun); border-color: var(--sun); color: var(--on-sun); }
[data-theme~="night"] .btn.act-rejected, [data-theme~="night"] .btn.act-cancelled, [data-theme~="night"] .btn.act-requested { background: transparent; border-color: var(--line); color: var(--text); }
[data-theme~="night"] .linklike { color: var(--sun); }

/* header */
[data-theme~="night"] .site-header { background: var(--forest-950); border-bottom: 1px solid var(--line); }
[data-theme~="night"] .site-header.over-hero { background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); border-bottom: 1px solid rgba(255,255,255,.18); }
[data-theme~="night"] .brand-text i { color: var(--sun); }
[data-theme~="night"] .menu a { font-family: var(--font-body); font-weight: 500; }
[data-theme~="night"] .menu a.on { color: var(--sun); }
[data-theme~="night"] .account summary { background: transparent; border: 1.5px solid var(--sun); color: var(--sun); }

/* hero: centred, huge title like the reference */
[data-theme~="night"] .hero-inner { align-items: center; text-align: center; }
[data-theme~="night"] .hero .hero-title { font: 800 clamp(3rem, 8.5vw, 6.6rem)/.95 var(--font-display); letter-spacing: .01em; max-width: none; text-shadow: 0 6px 30px rgba(0,0,0,.35); }
[data-theme~="night"] .hero-script { color: var(--sun); letter-spacing: .4em; }
[data-theme~="night"] .hero-tagline { font: 400 clamp(1rem, 1.6vw, 1.25rem) var(--font-body); margin-top: 10px; }
[data-theme~="night"] .hero-intro { margin-left: auto; margin-right: auto; max-width: 520px; }
[data-theme~="night"] .hero-ctas { justify-content: center; }
[data-theme~="night"] .hero[style]::before { background: linear-gradient(180deg, rgba(8,12,14,.45) 0%, rgba(8,12,14,.15) 35%, rgba(8,12,14,.35) 70%, rgba(12,18,20,.95) 100%); }
[data-theme~="night"] .hero-features { background: rgba(12,18,20,.82); border-top: 1px solid var(--line); }
[data-theme~="night"] .feature { position: relative; }
[data-theme~="night"] .feature:first-child::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 2px; background: var(--sun); }
[data-theme~="night"] .feature svg { color: var(--sun); }
[data-theme~="night"] .feature span { font-family: var(--font-body); font-weight: 500; }

/* cards & panels sit on the dark page */
[data-theme~="night"] .card, [data-theme~="night"] .panel, [data-theme~="night"] .finder-panel, [data-theme~="night"] .booking,
[data-theme~="night"] .review, [data-theme~="night"] .stat, [data-theme~="night"] .trust-strip div, [data-theme~="night"] .faqs details,
[data-theme~="night"] .carry-list li, [data-theme~="night"] .contact-card, [data-theme~="night"] .steps li, [data-theme~="night"] .about-values div,
[data-theme~="night"] .why, [data-theme~="night"] .dash-batch, [data-theme~="night"] .elev, [data-theme~="night"] .photo-reviews figure {
  background: var(--surface); border-color: var(--line); box-shadow: none; }
[data-theme~="night"] .two-col aside.panel, [data-theme~="night"] .auth { border-top-color: var(--sun); }
[data-theme~="night"] .stat strong, [data-theme~="night"] .trust-strip strong { color: var(--sun); font-family: var(--font-display); font-weight: 700; }

/* trek cards: one accent only */
[data-theme~="night"] .trek-card { background: #0c1214; }
[data-theme~="night"] .trek-card .tag.diff { background: rgba(12,18,20,.62); color: #fff; backdrop-filter: blur(4px); }
[data-theme~="night"] .trek-card .tag.open { background: transparent; color: var(--sun); border: 1px solid var(--sun); }
[data-theme~="night"] .trek-card .card-price, [data-theme~="night"] .tag.match { background: var(--sun); color: var(--on-sun); }
[data-theme~="night"] .trek-card h3 { font-family: var(--font-head); font-weight: 400; text-transform: none; font-size: 1.1rem; letter-spacing: .01em; }
[data-theme~="night"] .card-lead b { color: var(--sun); }
[data-theme~="night"] .card-lead i { background: var(--sun); color: var(--on-sun); }
[data-theme~="night"] .soon-tag { background: rgba(255,255,255,.1); color: #fff; }
[data-theme~="night"] .rating { color: var(--sun); }
[data-theme~="night"] .tag.diff { background: var(--surface-2); color: var(--text); }
[data-theme~="night"] .banner .tag.diff { background: var(--sun); color: var(--on-sun); }

/* chips, forms, tables */
[data-theme~="night"] .chip { background: transparent; border-color: var(--line); color: var(--text-soft); }
[data-theme~="night"] .chip:hover { border-color: var(--sun); color: var(--text); }
[data-theme~="night"] .chip.on { background: var(--sun); border-color: var(--sun); color: var(--on-sun); }
[data-theme~="night"] .form input, [data-theme~="night"] .form select, [data-theme~="night"] .form textarea,
[data-theme~="night"] .inline-form select, [data-theme~="night"] .inline-form input, [data-theme~="night"] .bk input, [data-theme~="night"] .bk textarea {
  background: var(--surface-2); border-color: var(--line); color: var(--text); }
[data-theme~="night"] .form input:focus, [data-theme~="night"] .form select:focus, [data-theme~="night"] .form textarea:focus { border-color: var(--sun); box-shadow: 0 0 0 3px rgba(194,189,60,.15); }
[data-theme~="night"] .table-wrap, [data-theme~="night"] .table { background: var(--surface); border-color: var(--line); }
[data-theme~="night"] .table th { background: var(--surface-2); }
[data-theme~="night"] .subnav a, [data-theme~="night"] .tabs a { background: transparent; border-color: var(--line); color: var(--text-soft); }
[data-theme~="night"] .subnav a.on, [data-theme~="night"] .tabs a.on { background: var(--sun); border-color: var(--sun); color: var(--on-sun); }

/* statuses: accent tint or neutral grey */
[data-theme~="night"] .status { background: rgba(255,255,255,.07); color: var(--text-soft); }
[data-theme~="night"] .status.approved, [data-theme~="night"] .status.live { background: var(--ok-bg); color: var(--sun); }
[data-theme~="night"] .status.requested, [data-theme~="night"] .status.pending { background: var(--warn-bg); color: var(--warn); }
[data-theme~="night"] .status.completed { background: var(--info-bg); color: var(--info); }
[data-theme~="night"] .flash.ok { background: var(--ok-bg); color: var(--sun); }
[data-theme~="night"] .verified { background: var(--sun); color: var(--on-sun); }
[data-theme~="night"] .role { background: var(--ok-bg); color: var(--sun); }
[data-theme~="night"] .role-admin { background: var(--err-bg); color: var(--err); }
[data-theme~="night"] .incl-box.yes { background: var(--ok-bg); }
[data-theme~="night"] .yes .checklist li::before, [data-theme~="night"] .assurances li::before { color: var(--sun); }
[data-theme~="night"] .carry-list li::before { background-color: var(--ok-bg); filter: none; }
[data-theme~="night"] .timeline li::before { background: var(--cream); border-color: var(--sun); }
[data-theme~="night"] .bk-steps li.done button { background: var(--sun); border-color: var(--sun); color: var(--on-sun); }
[data-theme~="night"] .bk-steps button { background: var(--surface); }
[data-theme~="night"] .bk-people button { background: var(--surface-2); }

/* WhatsApp + demo banner in the same palette */
[data-theme~="night"] .wa-float { background: var(--sun); color: var(--on-sun); }
[data-theme~="night"] .wa-inline, [data-theme~="night"] .wa-link { background: var(--ok-bg); color: var(--sun); }
[data-theme~="night"] .btn-wa { background: var(--sun); color: var(--on-sun); }
[data-theme~="night"] .contact-card.wa svg, [data-theme~="night"] .contact-card svg { color: var(--sun); }
[data-theme~="night"] .demo-banner { background: repeating-linear-gradient(-45deg, #2a2f17, #2a2f17 14px, #22270f 14px, #22270f 28px); color: var(--sun); }

/* footer */
[data-theme~="night"] .site-footer { background-color: #0a0f11; border-top: 1px solid var(--line); }
[data-theme~="night"] .footer-grid a:hover { color: var(--sun); }
[data-theme~="night"] .socials a:hover { background: var(--sun); color: var(--on-sun); }

/* map on dark */
[data-theme~="night"] .ghats-map, [data-theme~="night"] .trek-map { background: #1b2225; box-shadow: none; border: 1px solid var(--line); }
[data-theme~="night"] .leaflet-popup-content-wrapper, [data-theme~="night"] .leaflet-popup-tip { background: var(--surface); color: var(--text); }
[data-theme~="night"] .leaflet-control-zoom a { background: var(--surface) !important; color: var(--text) !important; border-bottom-color: var(--line) !important; }
[data-theme~="night"] .leaflet-control-attribution { background: rgba(12,18,20,.7) !important; color: var(--muted); }
[data-theme~="night"] .leaflet-control-attribution a { color: var(--muted); }
[data-theme~="night"] .trek-pin i { background: var(--surface-2); border-color: var(--sun); }
[data-theme~="night"] .trek-pin.open i { background: var(--sun); border-color: #fff; }
[data-theme~="night"] .trek-pin span { background: rgba(12,18,20,.85); color: var(--text); box-shadow: none; border: 1px solid var(--line); }
[data-theme~="night"] .city-pin { color: #fff; text-shadow: 0 0 4px #000; }
[data-theme~="night"] .city-pin i { background: var(--sun); box-shadow: 0 0 0 4px rgba(194,189,60,.25); }
[data-theme~="night"] .ghats-label { color: var(--sun); text-shadow: 0 0 4px #000; }
[data-theme~="night"] .pop-open, [data-theme~="night"] .pop-body em { color: var(--sun); }
[data-theme~="night"] .pop-soon { color: var(--muted); }

/* night: keep the accent rare */
[data-theme~="night"] .card-img { background-color: #1f2b2f; background-image: linear-gradient(160deg, #26343a, #0c1214); }
[data-theme~="night"] .card-img[style] { background-image: none; }
[data-theme~="night"] .banner:not([style]) { background: linear-gradient(170deg, #1f2b2f, #0c1214); }
[data-theme~="night"] .section-nav { background: var(--cream); }
[data-theme~="night"] .section-nav a { color: var(--text-soft); }
[data-theme~="night"] .section-nav a:hover { color: var(--sun); background: transparent; }

[data-theme~="night"] .trek-card .tag.open { background: rgba(12,18,20,.72); backdrop-filter: blur(4px); }

/* night: brighter secondary text for readability */
[data-theme~="night"] { --text: #f4f7f6; --text-soft: #dfe6e4; --muted: #b9c4c1; }
[data-theme~="night"] body { font-weight: 400; }

/* night: numbers in a clean sans (the serif's numerals read badly) */
[data-theme~="night"] .stat-strip strong, [data-theme~="night"] .price, [data-theme~="night"] .timeline strong,
[data-theme~="night"] .stat strong, [data-theme~="night"] .trust-strip strong, [data-theme~="night"] .bk-total,
[data-theme~="night"] .card-price, [data-theme~="night"] .bk-people b, [data-theme~="night"] .elev-stats b,
[data-theme~="night"] .rating, [data-theme~="night"] .card-bottom strong {
  font-family: "Inter", system-ui, sans-serif; font-weight: 600; letter-spacing: 0; }
[data-theme~="night"] .stat-strip strong { font-size: 1rem; }
[data-theme~="night"] .price { font-size: 1.45rem; }
[data-theme~="night"] .timeline strong { font-size: .92rem; }

/* laptops: everything a notch smaller */
@media (max-width: 1600px) {
  [data-theme~="night"] .hero .hero-title { font-size: clamp(2.4rem, 6vw, 4.6rem); }
  [data-theme~="night"] .banner h1 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
  [data-theme~="night"] h2 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
}
/* phones stay readable */
@media (max-width: 640px) {
  /* 16px fields stop iPhones zooming in when a field is tapped; 44px is a comfortable tap height */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { font-size: 16px !important; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select { min-height: 44px; }
  .form .btn, .auth .btn, .c-login-card .btn { min-height: 46px; font-size: 1rem; }
  .auth.panel { margin-left: 0; margin-right: 0; padding: 20px 18px; }
  .c-login { place-items: start center; padding-top: 40px; }
  .c-login-card { padding: 22px 18px; }
}

/* ================= layered hero: title behind the hills ================= */
.hero.layered { display: block; min-height: 0; height: min(90vh, calc(var(--ar) * 100vw)); background: #0c1214; overflow: hidden; }
.hero.layered::before { display: none; }
.hl-bg, .hl-fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hl-bg { z-index: 0; filter: brightness(.82) saturate(1.05); }
.hl-fg { z-index: 2; pointer-events: none; filter: brightness(.9) saturate(1.05); }
/* the hills' skyline sits at --sky of the image; the title's lower third tucks behind it */
.hl-title {
  position: absolute; left: 0; right: 0; z-index: 1; margin: 0; text-align: center; white-space: nowrap;
  font: 800 11vw/1 var(--font-display, "Outfit", sans-serif); letter-spacing: .01em; text-transform: uppercase; color: #fff;
  top: calc(var(--ar) * var(--sky) * 100vw - 0.78 * 11vw);
  text-shadow: 0 4px 30px rgba(0,0,0,.25);
}
.hero.layered::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,18,20,0) 0%, rgba(12,18,20,.55) 55%, rgba(12,18,20,.9) 100%); }
.hl-inner { position: absolute; left: 0; right: 0; bottom: 74px; z-index: 4; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 0; padding-bottom: 0; }
.hl-inner .hero-intro { margin-left: auto; margin-right: auto; }
.hero.layered .hero-features { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; }
@media (max-width: 640px) {
  .hero.layered { height: auto; min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; }
  .hl-bg { object-position: center 30%; }
  .hl-fg { display: none; }
  .hl-title { position: relative; top: auto; font-size: 13vw; white-space: normal; padding: 120px 16px 0; }
  .hl-inner { position: relative; bottom: auto; padding: 8px 16px 18px; }
  .hero.layered .hero-features { position: relative; }
}

/* compact WhatsApp button */
.wa-float { width: 46px; height: 46px; padding: 0 !important; justify-content: center; border-radius: 50%; transition: opacity .25s, transform .25s; }
.wa-float span { display: none; }
.wa-float svg { width: 22px; height: 22px; }
.wa-float.wait { opacity: 0; pointer-events: none; transform: translateY(12px); }

/* header line + small labels readable over bright skies */
.site-header.over-hero, [data-theme~="night"] .site-header.over-hero { border-bottom: 1px solid rgba(255,255,255,.38); background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,0)); }
.hero .eyebrow, .banner .eyebrow, .hero-script { text-shadow: 0 1px 6px rgba(0,0,0,.55); }

/* ================= lighter slate for Shola Night ================= */
[data-theme~="night"] {
  --forest-950: #161f22; --forest-900: #1c2629; --forest-700: #2d3c41;
  --cream: #222d31; --surface: #2c393e; --surface-2: #34444a;
  --line: rgba(255,255,255,.16); --no-bg: rgba(255,255,255,.06);
  --muted: #c3cdca;
}
[data-theme~="night"] .site-header { background: #161f22; }
[data-theme~="night"] .site-footer { background-color: #161f22; }
[data-theme~="night"] .trek-card { background: #161f22; }
[data-theme~="night"] .card-img { background-image: linear-gradient(160deg, #3a4a50, #1c2629); }
[data-theme~="night"] .ghats-map, [data-theme~="night"] .trek-map { background: #2a3337; }
[data-theme~="night"] .chip { border-color: rgba(255,255,255,.22); }
[data-theme~="night"] .table th { color: var(--text-soft); }

/* round badge logo (contains the name, so no text beside it) */
.brand img.logo.badge { height: 54px; width: 54px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.site-header .nav { min-height: 72px; }
.footer-about .brand img.logo.badge { height: 72px; width: 72px; }
@media (max-width: 640px) { .brand img.logo.badge { height: 46px; width: 46px; } }
.hero.layered .hl-title { font-size: 11vw; line-height: 1; max-width: none; text-transform: uppercase; }
@media (max-width: 640px) { .hero.layered .hl-title { font-size: 13vw; } }
.hero.layered .hl-title { font-size: 7.6vw; top: calc(var(--ar) * var(--sky) * 100vw - 0.74 * 7.6vw); letter-spacing: .005em; }
@media (max-width: 640px) {
  html, body { overflow-x: clip; }
  .hero.layered .hl-title { position: relative; top: auto; font-size: 11vw; white-space: normal; line-height: 1.02; padding: 110px 16px 4px; }
  .hero.layered .hl-inner { width: 100%; max-width: 100%; box-sizing: border-box; }
  .hero.layered .hero-intro { max-width: 100%; }
  .hero.layered .hero-ctas { flex-wrap: wrap; justify-content: center; }
}

/* ===== layered hero v2: everything positioned from the title line, never overlaps ===== */
.hero.layered { height: calc(var(--ar) * var(--sky) * 100vw + 2vw + 300px); max-height: none; }
.hero.layered .hl-title { font-size: 7.4vw; top: calc(var(--ar) * var(--sky) * 100vw - 0.74 * 7.4vw); }
.hero.layered .hl-inner { top: calc(var(--ar) * var(--sky) * 100vw + 2.4vw); bottom: auto; }
.hero.layered::after { height: 75%; background: linear-gradient(180deg, rgba(12,18,20,0) 0%, rgba(12,18,20,.45) 40%, rgba(12,18,20,.85) 100%); }
.hl-inner .hero-tagline, .hl-inner .hero-intro { text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.hl-fg, .hl-bg { filter: none; }

/* header readable over any sky: darker top fade, visible divider, white menu text */
.site-header.over-hero, [data-theme~="night"] .site-header.over-hero {
  background: linear-gradient(rgba(10,14,16,.72), rgba(10,14,16,.25)); border-bottom: 1px solid rgba(255,255,255,.55); }
[data-theme~="night"] .site-header.over-hero .menu a { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
[data-theme~="night"] .site-header.over-hero .menu a.on { color: var(--sun); }
[data-theme~="night"] .site-header.over-hero .icon-link { color: #fff; }

/* footer: drop the contour pattern behind text; keep the WhatsApp button off the footer text */
[data-theme~="night"] .site-footer, .site-footer { background-image: none; }
.footer-bottom { padding-right: 70px; }

@media (max-width: 640px) {
  .hero.layered { height: auto; }
  .hero.layered .hl-inner { top: auto; }
}
.hero.layered::after { height: 42%; background: linear-gradient(180deg, rgba(12,18,20,0) 0%, rgba(12,18,20,.55) 55%, rgba(12,18,20,.85) 100%); }
.hero.layered .hl-title { color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.28); }

/* ===== cliff hero: one photo, text on the left over the valley ===== */
[data-theme~="night"] .hero-slides { display: none; }
[data-theme~="night"] .hero { background-position: center 40%; min-height: min(88vh, 720px); }
[data-theme~="night"] .hero[style]::before { background:
    linear-gradient(90deg, rgba(10,14,16,.72) 0%, rgba(10,14,16,.45) 38%, rgba(10,14,16,0) 62%),
    linear-gradient(180deg, rgba(10,14,16,.35) 0%, rgba(10,14,16,0) 22%, rgba(10,14,16,0) 70%, rgba(12,18,20,.85) 100%); }
[data-theme~="night"] .hero-inner { align-items: flex-start; text-align: left; justify-content: center; }
[data-theme~="night"] .hero .hero-title { font-size: clamp(2.6rem, 6vw, 5rem); max-width: 620px; line-height: .98; }
[data-theme~="night"] .hero-intro { margin-left: 0; margin-right: 0; max-width: 460px; }
[data-theme~="night"] .hero-ctas { justify-content: flex-start; }
[data-theme~="night"] .hero-script { color: #fff; }
@media (max-width: 640px) {
  [data-theme~="night"] .hero[style]::before { background: linear-gradient(180deg, rgba(10,14,16,.55), rgba(10,14,16,.35) 40%, rgba(12,18,20,.9)); }
}

/* ===== hazy-ridge hero ===== */
.hero.layered .hl-title { top: calc(var(--ar) * var(--sky) * 100vw - 0.6 * 7.4vw); }
.hero.layered .hl-inner { top: calc(var(--ar) * var(--sky) * 100vw + 3vw); }
.hero.layered { height: calc(var(--ar) * var(--sky) * 100vw + 3vw + 310px); }
.hl-bg { object-position: center top; }

/* ===== compact footer ===== */
.site-footer { padding-top: 22px !important; margin-top: 24px !important; font-size: .86rem; }
.footer-grid { gap: 22px; }
.footer-grid h4 { margin: 2px 0 8px; }
.footer-grid a, .footer-grid > div > span { margin-bottom: 5px; }
.footer-about p { margin: 0 0 10px; max-width: 340px; }
.footer-about .brand img.logo.badge { height: 56px; width: 56px; }
.footer-about .brand { margin-bottom: 8px; }
.socials a { width: 32px; height: 32px; }
.socials svg { width: 15px; height: 15px; }
.footer-bottom { margin-top: 14px; padding-top: 10px; padding-bottom: 12px; }

/* ===== hero v3: tight crop, title melts into the mist, tagline at the bottom ===== */
.hero.layered { --h: calc(var(--ar) * 100vw + 120px); height: var(--h); }
.hero.layered .hl-bg, .hero.layered .hl-fg { object-fit: cover; object-position: center top; }
.hero.layered .hl-title {
  top: calc(var(--sky) * var(--h) - 0.62 * 7.4vw);
  color: transparent; text-shadow: none;
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 55%, rgba(255,255,255,.55) 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 10px rgba(20,40,70,.18));
}
.hero.layered .hl-inner { top: auto; bottom: 86px; }
.hero.layered::after { height: 34%; }
@media (max-width: 640px) { .hero.layered { height: auto; } .hero.layered .hl-inner { bottom: auto; } }

/* ===== reference-style hero: huge solid title, crisp ridge overlap, corner details ===== */
.hero.layered.ref { --h: min(calc(var(--ar) * 100vw + 90px), 92vh); height: var(--h); }
.hero.layered.ref .hl-title {
  font: 800 9.6vw/1 "Outfit", system-ui, sans-serif; letter-spacing: -.02em; text-transform: uppercase;
  color: #fff; background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none;
  text-shadow: 0 6px 40px rgba(10,30,60,.18);
  top: calc(var(--sky) * var(--h) - 0.7 * 9.6vw);
}
.hero.layered.ref::after { height: 30%; background: linear-gradient(180deg, rgba(10,14,16,0), rgba(10,14,16,.7)); }
.hl-corner { position: absolute; z-index: 4; bottom: 22px; color: #fff; }
.hl-left { left: max(20px, calc((100vw - 1180px) / 2 + 20px)); }
.hl-left .hero-tagline { margin: 0 0 10px; font-size: .95rem; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.hl-left .hero-ctas { display: flex; gap: 8px; }
.hl-facts { right: max(20px, calc((100vw - 1180px) / 2 + 20px)); margin: 0; min-width: 230px;
  background: rgba(10,14,16,.42); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 4px 14px; }
.hl-facts div { display: flex; justify-content: space-between; gap: 24px; padding: 6px 0; font-size: 0.84rem; }
.hl-facts div + div { border-top: 1px solid rgba(255,255,255,.15); }
.hl-facts dt { color: rgba(255,255,255,.7); }
.hl-facts dd { margin: 0; font-weight: 600; }
@media (max-width: 640px) {
  .hero.layered.ref { height: auto; min-height: 520px; }
  .hero.layered.ref .hl-title { position: absolute; top: 34%; font-size: 13vw; padding: 0; white-space: nowrap; }
  .hero.layered.ref .hl-fg { display: block; }
  .hl-facts { display: none; }
  .hl-left { left: 16px; right: 16px; }
}

.hero.layered.ref .hl-title { top: calc(var(--sky) * var(--h) - 0.56 * 9.6vw); }
.hero.layered.ref .hl-title { top: calc(var(--sky) * var(--h) - 0.66 * 9.6vw); }
.hero.layered.ref .hl-title { top: calc(var(--sky) * var(--h) - 0.9 * 9.6vw); }

/* ================= Sky theme (default) =================
   Airy sky-white pages, deep sky-navy header/footer, ONE sky-blue accent. */
[data-theme~="sky"] {
  --forest-950: #0a2440; --forest-900: #0d2f52; --forest-700: #1d4f7f; --forest-500: #2f86d1; --forest-100: #e3f0fb;
  --sun: #2f86d1; --sun-dark: #1f6db3; --sun-100: #e3f0fb; --on-sun: #ffffff;
  --cream: #f2f7fc; --surface: #ffffff; --surface-2: #f6f9fd;
  --text: #102a43; --text-soft: #334e68; --muted: #5d7590; --line: #dbe6f1; --no-bg: #fdeeee;
  --err: #c2453d; --err-bg: #fbe9e7;
  --ok: #1f6db3; --ok-bg: #e3f0fb; --warn: #9a6400; --warn-bg: #fff4dc; --info: #1d4f7f; --info-bg: #e7eef6;
  --font-head: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: var(--font-head); --font-script: var(--font-head);
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --head-case: none; --head-weight: 700; --head-track: -.005em;
  --accent: #1f6db3;
  --shadow: 0 10px 30px rgba(16,42,67,.10);
}
[data-theme~="sky"] .site-header { background: var(--forest-900); }
[data-theme~="sky"] .site-header.over-hero { background: linear-gradient(rgba(10,36,64,.55), rgba(10,36,64,.12)); border-bottom: 1px solid rgba(255,255,255,.45); }
[data-theme~="sky"] .menu a { color: #fff; }
[data-theme~="sky"] .menu a.on { color: #fff; }
[data-theme~="sky"] .menu a::after { background: #8fd0ff; }
[data-theme~="sky"] .icon-link { color: #fff; }
[data-theme~="sky"] .btn { border-radius: 999px; }
[data-theme~="sky"] .btn:hover { box-shadow: 0 6px 18px rgba(47,134,209,.3); }
[data-theme~="sky"] .btn.ghost { color: var(--forest-700); border-color: var(--forest-700); }
[data-theme~="sky"] .hero-features { background: var(--forest-900); border-top: 1px solid rgba(255,255,255,.12); }
[data-theme~="sky"] .feature svg { color: #8fd0ff; }
[data-theme~="sky"] .feature:first-child::after { background: #8fd0ff; }
[data-theme~="sky"] .site-footer { background: var(--forest-950); }
[data-theme~="sky"] .footer-grid a:hover { color: #8fd0ff; }
[data-theme~="sky"] .section-head { text-align: center; }
[data-theme~="sky"] .section-head h2::after { margin: 6px auto 0; background: var(--sun); }
[data-theme~="sky"] .trek-card .tag.diff { background: rgba(10,36,64,.55); color: #fff; backdrop-filter: blur(4px); }
[data-theme~="sky"] .trek-card .tag.open { background: rgba(10,36,64,.55); color: #fff; border: 1px solid rgba(255,255,255,.6); backdrop-filter: blur(4px); }
[data-theme~="sky"] .card-lead b { color: #8fd0ff; }
[data-theme~="sky"] .demo-banner { background: repeating-linear-gradient(-45deg, #e3f0fb, #e3f0fb 14px, #d2e6f8 14px, #d2e6f8 28px); color: var(--forest-700); }
[data-theme~="sky"] .wa-float { background: var(--sun); color: #fff; }
[data-theme~="sky"] .stat strong, [data-theme~="sky"] .trust-strip strong { color: var(--forest-700); }

/* hero title: smaller, pinned to the peak, tinted by the sky so it sits inside the photo */
.hero.layered.ref .hl-title {
  font-size: 7.6vw; letter-spacing: -.015em;
  top: calc(var(--peak) * var(--h) - 0.56 * 7.6vw);
  color: transparent;
  background: linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(246,250,255,.93) 55%, rgba(222,236,250,.82) 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 14px rgba(30,70,120,.22));
  text-shadow: none;
}
.hero.layered.ref .hl-fg { filter: drop-shadow(0 -2px 6px rgba(255,255,255,.18)); }

/* ================= Editorial (default): white, minimal, photo-led =================
   White pages, near-black type, black pill buttons; colour comes from the photos. */
[data-theme~="editorial"] {
  --accent: #0f4d2c;
  --forest-950: #0a2616; --forest-900: #0d3a21; --forest-700: #17592f; --forest-500: #0f4d2c; --forest-100: #e9f2ec;
  --sun: #0f4d2c; --sun-dark: #08371e; --sun-100: #e9f2ec; --on-sun: #ffffff;
  --cream: #ffffff; --surface: #ffffff; --surface-2: #f1f6f2;
  --text: #16191c; --text-soft: #3d4248; --muted: #5f6d64; --line: #dce7df; --no-bg: #f1f6f2;
  --ok: #0f4d2c; --ok-bg: #e9f2ec; --warn: #7a5a00; --warn-bg: #fbf4e2; --info: #2f5a43; --info-bg: #e9f2ec;
  --radius: 18px; --shadow: 0 14px 40px rgba(10,38,22,.10);
  /* one professional typeface everywhere (public site and admin console) */
  --font-head: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-head); --font-script: var(--font-head);
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --head-case: none; --head-weight: 700; --head-track: -.005em;
}
[data-theme~="editorial"] body { background: #fff; }

/* header: transparent over the hero, white elsewhere */
[data-theme~="editorial"] .site-header { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
[data-theme~="editorial"] .site-header .menu a, [data-theme~="editorial"] .site-header .icon-link { color: var(--text); text-shadow: none; }
[data-theme~="editorial"] .site-header .menu a.on { color: var(--text); }
[data-theme~="editorial"] .site-header .menu a::after { background: var(--text); height: 1.5px; }
[data-theme~="editorial"] .site-header .menu-btn span, [data-theme~="editorial"] .site-header .menu-btn span::before, [data-theme~="editorial"] .site-header .menu-btn span::after { background: var(--text); }
[data-theme~="editorial"] .site-header.over-hero { background: linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,0)); backdrop-filter: none; border-bottom: 0; }
[data-theme~="editorial"] .site-header.over-hero .menu a, [data-theme~="editorial"] .site-header.over-hero .icon-link { color: #fff; }
[data-theme~="editorial"] .site-header.over-hero .menu a::after { background: #fff; }
[data-theme~="editorial"] .site-header.over-hero .menu-btn span, [data-theme~="editorial"] .site-header.over-hero .menu-btn span::before, [data-theme~="editorial"] .site-header.over-hero .menu-btn span::after { background: #fff; }
[data-theme~="editorial"] .site-header.over-hero .btn { background: #fff; border-color: #fff; color: var(--accent); }

/* buttons: black pills; white pills on photos */
[data-theme~="editorial"] .btn { border-radius: 999px; background: var(--accent); border-color: var(--accent); color: #fff; text-transform: none; letter-spacing: 0; font-weight: 600; }
[data-theme~="editorial"] .btn:hover { background: #000; border-color: #000; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
[data-theme~="editorial"] .btn.ghost { background: #fff; color: var(--text); border-color: var(--line); }
[data-theme~="editorial"] .btn.ghost:hover { border-color: var(--text); background: #fff; color: var(--text); box-shadow: none; }
[data-theme~="editorial"] .hero .btn { background: #fff; border-color: #fff; color: var(--accent); }
[data-theme~="editorial"] .hero .btn.ghost-light { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.75); color: #fff; backdrop-filter: blur(6px); }
[data-theme~="editorial"] .linklike, [data-theme~="editorial"] main a:not(.btn):not(.card) { color: var(--text); }

/* feature strip: white, airy, thin dividers */
[data-theme~="editorial"] .hero-features { background: #fff; border-bottom: 1px solid var(--line); border-top: 0; }
[data-theme~="editorial"] .feature { color: var(--text); }
[data-theme~="editorial"] .feature + .feature { border-left-color: var(--line); }
[data-theme~="editorial"] .feature svg { color: var(--text); }
[data-theme~="editorial"] .feature span { font-weight: 600; }
[data-theme~="editorial"] .feature:first-child::after { display: none; }

/* section titles: pill label + big clean heading */
[data-theme~="editorial"] .section { padding-top: 34px; }
[data-theme~="editorial"] .section-head { text-align: center; margin-bottom: 18px; }
[data-theme~="editorial"] .section-head .eyebrow { display: inline-block; background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 4px 12px; letter-spacing: .12em; font-size: 0.84rem; }
[data-theme~="editorial"] .section-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); text-transform: none; font-weight: 600; letter-spacing: -.02em; margin-top: 8px; }
[data-theme~="editorial"] .section-head h2::after { display: none; }
[data-theme~="editorial"] h1, [data-theme~="editorial"] h2, [data-theme~="editorial"] h3 { letter-spacing: -.015em; }

/* cards */
[data-theme~="editorial"] .card, [data-theme~="editorial"] .panel, [data-theme~="editorial"] .finder-panel, [data-theme~="editorial"] .booking,
[data-theme~="editorial"] .review, [data-theme~="editorial"] .stat, [data-theme~="editorial"] .trust-strip div, [data-theme~="editorial"] .faqs details,
[data-theme~="editorial"] .contact-card, [data-theme~="editorial"] .steps li, [data-theme~="editorial"] .about-values div, [data-theme~="editorial"] .dash-batch,
[data-theme~="editorial"] .elev, [data-theme~="editorial"] .photo-reviews figure, [data-theme~="editorial"] .carry-list li {
  border-radius: var(--radius); border-color: var(--line); box-shadow: none; }
[data-theme~="editorial"] .finder-panel { background: var(--surface-2); border: 0; }
[data-theme~="editorial"] .trek-card { border-radius: var(--radius); }
[data-theme~="editorial"] .trek-card .card-price { background: #fff; color: var(--accent); }
[data-theme~="editorial"] .trek-card .tag.diff, [data-theme~="editorial"] .trek-card .tag.open { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.45); color: #fff; backdrop-filter: blur(6px); }
[data-theme~="editorial"] .card-lead b { color: #fff; }
[data-theme~="editorial"] .card-lead i { background: #fff; color: var(--accent); }
[data-theme~="editorial"] .two-col aside.panel, [data-theme~="editorial"] .auth { border-top: 1px solid var(--line); box-shadow: var(--shadow); }
[data-theme~="editorial"] .stat strong, [data-theme~="editorial"] .trust-strip strong { color: var(--text); font-weight: 600; letter-spacing: -.02em; }
[data-theme~="editorial"] .trust-strip div { background: transparent; border: 0; }
[data-theme~="editorial"] .trust-strip strong { font-size: 2.2rem; }

/* chips, tags, statuses: monochrome */
[data-theme~="editorial"] .chip { background: #fff; border-color: var(--line); color: var(--text-soft); }
[data-theme~="editorial"] .chip:hover { border-color: var(--text); }
[data-theme~="editorial"] .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-theme~="editorial"] .tag.diff { background: var(--surface-2); color: var(--text); }
[data-theme~="editorial"] .banner .tag.diff { background: #fff; color: var(--accent); }
[data-theme~="editorial"] .status { background: var(--surface-2); color: var(--text-soft); }
[data-theme~="editorial"] .verified { background: var(--accent); color: #fff; }
[data-theme~="editorial"] .rating { color: var(--text); }
[data-theme~="editorial"] .yes .checklist li::before, [data-theme~="editorial"] .assurances li::before { color: var(--text); }
[data-theme~="editorial"] .timeline li::before { border-color: var(--text); }
[data-theme~="editorial"] .incl-box.yes { background: var(--surface-2); }
[data-theme~="editorial"] .subnav a.on, [data-theme~="editorial"] .tabs a.on { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-theme~="editorial"] .section-nav { background: #fff; }

/* footer: soft grey, dark text */
[data-theme~="editorial"] .site-footer { background: var(--surface-2); color: var(--text-soft); border-top: 1px solid var(--line); }
[data-theme~="editorial"] .footer-grid h4 { color: var(--text); }
[data-theme~="editorial"] .footer-grid a, [data-theme~="editorial"] .footer-grid > div > span { color: var(--text-soft); }
[data-theme~="editorial"] .footer-grid a:hover { color: var(--text); }
[data-theme~="editorial"] .footer-about p { color: var(--text-soft); }
[data-theme~="editorial"] .socials a { background: #fff; color: var(--text); border: 1px solid var(--line); }
[data-theme~="editorial"] .socials a:hover { background: var(--accent); color: #fff; }
[data-theme~="editorial"] .footer-bottom { color: var(--muted); border-top-color: var(--line); }

/* misc */
[data-theme~="editorial"] .wa-float { background: var(--accent); color: #fff; }
[data-theme~="editorial"] .wa-inline, [data-theme~="editorial"] .wa-link { background: var(--surface-2); color: var(--text); }
[data-theme~="editorial"] .btn-wa { background: var(--accent); }
[data-theme~="editorial"] .contact-card svg { color: var(--text); }
[data-theme~="editorial"] .demo-banner { background: var(--accent); color: #fff; }
[data-theme~="editorial"] .trek-pin.open i { background: var(--accent); }
[data-theme~="editorial"] .account summary { background: var(--accent); color: #fff; border: 0; }
[data-theme~="editorial"] .site-header.over-hero .account summary { background: #fff; color: var(--accent); }

/* ===== editorial: compact rhythm everywhere ===== */
[data-theme~="editorial"] main.wrap { padding-top: 16px; }
[data-theme~="editorial"] .hero ~ main.wrap, [data-theme~="editorial"] .hero-features ~ main.wrap, [data-theme~="editorial"] .banner ~ main.wrap { padding-top: 10px; }
[data-theme~="editorial"] .section { padding: 14px 0 4px; }
[data-theme~="editorial"] .section-head { margin-bottom: 10px; }
[data-theme~="editorial"] .section-head .eyebrow { padding: 2px 10px; font-size: 0.84rem; margin: 0; }
[data-theme~="editorial"] .section-head h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 4px 0 0; }
[data-theme~="editorial"] .section-head p.muted { margin-top: 2px; }
[data-theme~="editorial"] .finder-panel { padding: 10px 14px; gap: 6px 18px; margin-bottom: 10px; }
[data-theme~="editorial"] .finder-q { gap: 4px; }
[data-theme~="editorial"] .finder-meta { padding-top: 6px; }
[data-theme~="editorial"] .chip { padding: 3px 11px; font-size: 0.84rem; }
[data-theme~="editorial"] .feature { padding: 10px 12px; }
[data-theme~="editorial"] .trust-strip { margin: 10px 0 0; }
[data-theme~="editorial"] .trust-strip div { padding: 4px; }
[data-theme~="editorial"] .trust-strip strong { font-size: 1.7rem; }
[data-theme~="editorial"] .ghats-map { height: 380px; }
[data-theme~="editorial"] .page-head { margin-bottom: 8px; }
[data-theme~="editorial"] .page-head h1 { margin: 2px 0 4px; }
[data-theme~="editorial"] .section-nav { margin: 0 0 12px; padding: 4px 0; }
[data-theme~="editorial"] .trek-section { padding-bottom: 12px; margin-bottom: 12px; }
[data-theme~="editorial"] .trek-section h2 { margin-bottom: 6px; }
[data-theme~="editorial"] .stat-strip { margin-top: -26px; }
[data-theme~="editorial"] .banner { min-height: 220px; }
[data-theme~="editorial"] .banner-inner { padding-bottom: 38px; }
[data-theme~="editorial"] .two-col { gap: 24px; }
[data-theme~="editorial"] .panel { padding: 14px 16px; }
[data-theme~="editorial"] .cta-band { margin-top: 16px; padding: 22px 20px; }
[data-theme~="editorial"] .why { margin: 12px 0 4px; padding: 16px 18px; }
[data-theme~="editorial"] .site-footer { margin-top: 20px !important; padding-top: 18px !important; }
[data-theme~="editorial"] .about-story { gap: 20px; }
[data-theme~="editorial"] .photo-strip { margin: 10px 0 0; }
[data-theme~="editorial"] .contact-grid { margin-bottom: 8px; }
[data-theme~="editorial"] .auth { margin: 6px auto; }
[data-theme~="editorial"] h2.dash-h { margin: 4px 0 8px; }

/* editorial: compact lead cards (photo beside text, 4 per row) and consistent heading case */
[data-theme~="editorial"] .leads-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
[data-theme~="editorial"] .leads-grid .card { display: grid; grid-template-columns: 46px 1fr; column-gap: 12px; row-gap: 0; align-items: center; padding: 12px 14px !important; }
[data-theme~="editorial"] .leads-grid .card > .avatar, [data-theme~="editorial"] .leads-grid .card > img.avatar { grid-row: 1 / span 3; width: 46px; height: 46px; font-size: 1.05rem; }
[data-theme~="editorial"] .leads-grid .card h3 { margin: 0; font-size: .95rem; }
[data-theme~="editorial"] .leads-grid .card p { margin: 1px 0 0; font-size: 0.84rem; line-height: 1.35; }
[data-theme~="editorial"] .leads-grid .card .card-link { padding-top: 2px; font-size: 0.84rem; }
@media (max-width: 980px) { [data-theme~="editorial"] .leads-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { [data-theme~="editorial"] .leads-grid { grid-template-columns: 1fr; } }
[data-theme~="editorial"] h2, [data-theme~="editorial"] .trek-section h2, [data-theme~="editorial"] .about-story h2 { text-transform: none; letter-spacing: -.015em; }
[data-theme~="editorial"] .page-head.head-row { align-items: center; }

[data-theme~="editorial"] .cta-band { background: var(--accent); background-image: none; }
[data-theme~="editorial"] .cta-band .btn { background: #fff; border-color: #fff; color: var(--accent); }
[data-theme~="editorial"] .cta-band .btn:hover { background: #e9f2ec; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.bk-label { margin: 10px 0 4px; font-size: .85rem; font-weight: 600; }
.bk-hint { margin: 8px 0 0; font-size: 0.84rem; color: var(--muted); text-align: center; }
.trek-pin.landmark { cursor: default; }

[data-theme~="editorial"] .banner:not([style]) { background: linear-gradient(160deg, #1d5a36, #0a2616) !important; }
[data-theme~="editorial"] .banner:not([style]) h1, [data-theme~="editorial"] .banner:not([style]) .banner-sub, [data-theme~="editorial"] .banner:not([style]) .crumb a { color: #fff; }

.contact-grid.phones { grid-template-columns: repeat(2, minmax(0, 280px)); }
.contact-grid.phones strong { font-size: 1.05rem; }
@media (max-width: 640px) { .contact-grid.phones { grid-template-columns: 1fr; } }

/* ===== trek finder: each question is its own numbered card ===== */
.finder .finder-panel { counter-reset: q; background: transparent; border: 0; padding: 0; gap: 14px; margin-bottom: 18px; }
.finder .finder-q { counter-increment: q; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 16px; gap: 12px; }
.finder .finder-q > span { display: flex; align-items: center; gap: 10px; font: 700 .95rem var(--font-head); letter-spacing: .06em; color: var(--text); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.finder .finder-q > span::before { content: counter(q); flex: none; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--sun); color: var(--on-sun); font-size: .85rem; line-height: 1; }
.finder .chips { gap: 8px; }
.finder .chip { padding: 7px 14px; font-size: .88rem; }
.finder .finder-meta { padding: 12px 4px 0; border-top: 0; font-size: 1rem; }
@media (max-width: 640px) { .finder .finder-panel { gap: 10px; } .finder .finder-q { padding: 12px 14px 14px; } }
/* UPI payment page */
.pay { max-width: 460px; margin: 8px auto; text-align: center; }
.pay h1 { margin: 2px 0 4px; }
.pay-upi { margin: 14px 0 4px; }
.pay-apps { margin: 0 0 14px; }
.pay-qr { display: flex; gap: 14px; align-items: center; text-align: left; background: var(--surface-2); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.pay-qr img { width: 150px; height: 150px; border-radius: 8px; background: #fff; flex: none; }
.pay-qr div { display: flex; flex-direction: column; gap: 3px; }
.status.paid { background: #e6f4ea; color: #1e7b3a; }
@media (max-width: 480px) { .pay-qr { flex-direction: column; text-align: center; } .pay-qr div { align-items: center; } }

/* admin: active tab text must stay visible (beats the editorial link colour) */
[data-theme~="editorial"] main .subnav a.on, [data-theme~="editorial"] main .tabs a.on { color: #fff; }

/* payment request page */
.payreq { max-width: 560px; }
.payreq h1 { margin: 2px 0 2px; font-size: 1.4rem; }
.payreq-body { display: flex; gap: 16px; align-items: center; margin: 14px 0; padding: 12px; background: var(--surface-2); border-radius: 14px; }
.payreq-body img { width: 180px; height: 180px; background: #fff; border-radius: 10px; flex: none; }
.payreq-info { display: flex; flex-direction: column; gap: 4px; }
.payreq-amt { font-size: 1.8rem; }
.payreq-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 520px) { .payreq-body { flex-direction: column; text-align: center; } }

/* ===== admin bookings: calm, organised actions ===== */
[data-theme~="editorial"] .table td.actions { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-width: 230px; }
[data-theme~="editorial"] .table td.actions form { margin: 0; }
[data-theme~="editorial"] .table td.actions .btn {
  background: #fff; color: var(--text); border: 1px solid var(--line); box-shadow: none;
  font-size: 0.84rem; font-weight: 600; padding: 5px 12px; border-radius: 999px;
}
[data-theme~="editorial"] .table td.actions .btn:hover { border-color: var(--text); background: #fff; box-shadow: none; }
/* the main next step stands out: soft green */
[data-theme~="editorial"] .table td.actions .btn.act-approved,
[data-theme~="editorial"] .table td.actions a.btn.ghost { background: #e7f3ec; border-color: #c4e2cf; color: #1d6b3b; }
[data-theme~="editorial"] .table td.actions .btn.act-approved:hover,
[data-theme~="editorial"] .table td.actions a.btn.ghost:hover { background: #d8ecdf; border-color: #1d6b3b; }
/* cancel / reject read as quiet text links */
[data-theme~="editorial"] .table td.actions .btn.act-cancelled,
[data-theme~="editorial"] .table td.actions .btn.act-rejected { background: none; border-color: transparent; color: #b4433a; padding: 5px 4px; text-decoration: underline; text-underline-offset: 2px; }
[data-theme~="editorial"] .table td.actions .btn.act-completed { background: #f3f4f6; }
[data-theme~="editorial"] .status.approved { background: #e7f3ec; color: #1d6b3b; }
[data-theme~="editorial"] .status.requested { background: #fff4dc; color: #8a5a00; }
[data-theme~="editorial"] .status.paid { background: #e7f3ec; color: #1d6b3b; }
[data-theme~="editorial"] .status.completed { background: #e8eef6; color: #2b4f80; }
[data-theme~="editorial"] .table td.actions { display: table-cell; min-width: 240px; }
[data-theme~="editorial"] .table td.actions > form, [data-theme~="editorial"] .table td.actions > a { display: inline-block; margin: 0 6px 6px 0; vertical-align: middle; }

/* admin bookings grouped by trek → date */
.bk-trek { margin: 14px 0 6px; }
.bk-trek-head { font-size: 1.15rem; margin: 0 0 6px; display: flex; align-items: baseline; gap: 10px; }
.bk-trek-head a { color: var(--text); text-decoration: none; }
.bk-date-group { margin: 0 0 10px; }
.bk-date-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 6px 2px; }
.bk-date-head b { color: #8a5a00; }

/* admin trek leads: expandable profile cards */
.lead-admin-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.lead-admin { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.lead-admin > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 14px; }
.lead-admin > summary::-webkit-details-marker { display: none; }
.lead-admin > summary .avatar, .lead-admin > summary img.avatar { width: 44px; height: 44px; font-size: 1rem; }
.lead-admin[open] > summary { border-bottom: 1px solid var(--line); }
.la-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; padding: 12px 14px 14px; }
.la-body h4 { margin: 8px 0 4px; font-size: .85rem; }
.la-profile p { margin: 0 0 6px; }
.la-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.la-actions form { margin: 0; }
.la-assign { display: flex; gap: 6px; margin-top: 6px; }
.la-assign select { flex: 1; font: inherit; font-size: 0.84rem; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
[data-theme~="editorial"] .la-actions .btn, [data-theme~="editorial"] .la-assign .btn { background: #fff; color: var(--text); border: 1px solid var(--line); font-size: 0.84rem; padding: 5px 12px; }
[data-theme~="editorial"] .la-actions .btn.act-approved, [data-theme~="editorial"] .la-assign .btn { background: #e7f3ec; border-color: #c4e2cf; color: #1d6b3b; }
[data-theme~="editorial"] .la-actions .btn.act-cancelled, [data-theme~="editorial"] .la-actions .btn.act-rejected { background: none; border-color: transparent; color: #b4433a; text-decoration: underline; padding: 5px 4px; }
@media (max-width: 760px) { .la-body { grid-template-columns: 1fr; } .lead-admin > summary { grid-template-columns: 40px 1fr auto; } .la-stats { display: none; } }

.lead-admin .muted { color: var(--muted) !important; }

/* cancel menu with refund options */
.cancel-menu { display: inline-block; vertical-align: middle; margin: 0 6px 6px 0; }
.cancel-menu > summary { list-style: none; cursor: pointer; color: #b4433a; font-size: 0.84rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; padding: 5px 4px; }
.cancel-menu > summary::-webkit-details-marker { display: none; }
.cancel-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 260px; }
.cancel-opts form { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.cancel-opts .btn { align-self: flex-start; }

/* social links in their real brand colours */
[data-theme~="editorial"] .socials a svg { width: 18px; height: 18px; }
[data-theme~="editorial"] .socials a:hover { background: #fff; border-color: var(--text); }

/* small WhatsApp button, bottom right, always visible */
.wa-dot { position: fixed; right: 14px; bottom: 14px; z-index: 50; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #25d366; color: #fff !important; box-shadow: 0 4px 12px rgba(0,0,0,.2); transition: transform .15s; }
.wa-dot:hover { transform: translateY(-2px); }
.wa-dot svg { width: 20px; height: 20px; }

/* "Enquire now" on the trek page */
.enquire { margin-top: 14px; }
.enquire > summary { list-style: none; cursor: pointer; }
.enquire > summary::-webkit-details-marker { display: none; }
.enquire[open] > summary { margin-bottom: 10px; }
.enquire .form { gap: 10px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.enq-msg { white-space: pre-wrap; max-width: 420px; }
tr.done td { opacity: .6; }

/* booking box, agency style: price, date, people, Book now, Enquire now */
.book-panel .bp-price { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 800 2rem/1.1 var(--font-head); letter-spacing: -.01em; }
.bp-badge { font: 600 0.84rem var(--font-body); color: var(--forest-700); background: var(--sun-100); border: 1px solid var(--line); padding: 3px 9px; border-radius: 8px; letter-spacing: 0; }
.bk-label { font: 700 0.84rem var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 14px 0 7px; }
.bk-pane > div > .bk-label:first-child, .book-panel > .bk-label:first-of-type { margin-top: 2px; }
.bk-pane { min-height: 0; }
.bk-stepper { display: grid; grid-template-columns: 48px 1fr 48px; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.bk-stepper button { border: 0; background: var(--surface-2); font-size: 1.4rem; line-height: 1; color: var(--text); cursor: pointer; padding: 9px 0; }
.bk-stepper button:disabled { color: var(--line); cursor: not-allowed; }
.bk-stepper b { display: grid; place-items: center; font: 700 1.15rem var(--font-head); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.bk-total { font-size: 1.15rem; }
.bk-back { display: block; width: 100%; text-align: left; border: 0; background: var(--surface-2); border-radius: 10px; padding: 9px 12px; margin-bottom: 4px; font: 600 .85rem var(--font-body); color: var(--text); cursor: pointer; }
.bk-back u { float: right; color: var(--muted); font-weight: 500; }
.bk-nav .btn.big { width: 100%; }
.bk-hint, .book-panel .bk-hint { text-align: center; font-size: 0.84rem; color: var(--muted); margin: 8px 0 0; }
.bp-none { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 10px; border: 1px solid #f1c4bd; background: #fdf1ef; color: #b3402e; font-weight: 600; font-size: .9rem; margin-bottom: 12px; }
.bp-none svg { width: 19px; height: 19px; flex: none; }
.book-panel .btn[disabled] { background: #e4e6e5 !important; border-color: #e4e6e5 !important; color: #9aa19d !important; cursor: not-allowed; box-shadow: none !important; }
.enq-btn { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 16px; border: 1.5px solid var(--accent, var(--forest-500)); border-radius: 999px; color: var(--accent, var(--forest-500)); font: 700 .95rem var(--font-body); background: var(--surface); transition: background .15s; }
.enq-btn:hover, .enquire[open] > .enq-btn { background: var(--sun-100); }
.enq-btn svg { width: 19px; height: 19px; }
.book-panel .enquire { margin-top: 12px; }
[data-theme~="editorial"] .contact-card svg { width: 30px; height: 30px; }

/* Book now + Enquire now side by side (stacked on phones) */
.bk-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.bk-actions .btn { width: 100%; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
.bk-actions .btn:only-child { grid-column: 1 / -1; }
.book-panel .enq-toggle { background: var(--surface) !important; color: var(--accent, var(--forest-500)) !important; border: 1.5px solid var(--accent, var(--forest-500)) !important; gap: 7px; }
.book-panel .enq-toggle:hover { background: var(--sun-100) !important; box-shadow: none; }
.enq-toggle svg { width: 17px; height: 17px; }
/* the toggle above replaces the enquiry box's own button */
.book-panel .enquire > summary { display: none; }
.book-panel .enquire[open] { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 640px) { .bk-actions { grid-template-columns: 1fr; } }

/* trek page: details full width, then "Book or enquire" with both boxes open side by side */
.two-col.single { grid-template-columns: minmax(0, 1fr); }
.book-section { scroll-margin-top: 80px; }
.book-section #dates { position: relative; top: -80px; }
.book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.book-grid > .panel { margin: 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--surface); }
.book-grid h3 { margin: 0 0 12px; font-size: 1.15rem; }
.enquire-panel > p.muted { margin: -6px 0 6px; }
.enquire-panel .form { gap: 10px; }
.book-panel .bk-actions { grid-template-columns: 1fr; }
.banner-cta { margin-top: 12px; background: #fff !important; border-color: #fff !important; color: var(--accent, #0f4d2c) !important; }
@media (max-width: 760px) { .book-grid { grid-template-columns: 1fr; } }

/* phones: the opened menu is dark green, so its links must be light (the editorial theme made them dark) */
@media (max-width: 640px) {
  [data-theme~="editorial"] .site-header .menu a, [data-theme~="editorial"] .site-header .menu a.on { color: #fff; }
}

/* ===================== responsive type and touch =====================
   The root size is fluid (see html above), so rem-based text scales with the
   screen. These rules cover what rem alone can't. */

/* long text stays at a comfortable line length however large the screen */
.prose, .legal, .lead, .about-story p, .card-summary { max-width: 72ch; }
.legal { margin-inline: auto; }

/* comfortable reading size for body copy that was set small */
.small { font-size: max(.92rem, 14px); }

/* touch devices: every tappable thing is at least 44px */
@media (pointer: coarse) {
  .btn, .btn.small, button.btn { min-height: 44px; }
  .chip { min-height: 40px; padding-block: 8px; }
  .menu a, .menu .linklike { min-height: 44px; display: flex; align-items: center; }
  /* the icon keeps its drawn size; padding (cancelled by margin) makes the tap area 44px */
  .menu-btn { box-sizing: content-box; padding: 11px 8px; margin: -11px -8px; }
  .account summary { min-width: 44px; min-height: 44px; }
  .wa-dot { width: 52px; height: 52px; }
  .subnav a, .tabs a { min-height: 40px; display: inline-flex; align-items: center; }
  .bk-date, .bk-stepper button { min-height: 44px; }
  .linklike { padding-block: 8px; }
  .footer-grid a { display: inline-block; padding-block: 6px; }
}

/* very large screens: more breathing room around a wider container */
@media (min-width: 1900px) {
  .section { margin-block: 3.2rem; }
}

/* users who enlarge text in their system settings: don't clip, let things wrap */
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; }
  .facts, .card-bottom { flex-wrap: wrap; }
}

/* ----- sizes that should track the body text ----- */

/* form fields scale with the page (16px minimum: stops iPhones zooming in on focus) */
.form input:not([type="checkbox"]):not([type="radio"]), .form select, .form textarea,
.inline-form select, .inline-form input, .c-filters select { font-size: max(1rem, 16px); }
.form label, .form legend { font-size: max(.92rem, 14px); }

/* buttons: readable next to body text */
[data-theme~="editorial"] .btn { font-size: .95rem; }
[data-theme~="editorial"] .btn.big, .hero-ctas .btn, .hero-ctas .btn.big { font-size: 1rem; }
[data-theme~="editorial"] .btn.small { font-size: .86rem; }
.chip { font-size: .95rem; }

/* desktop navigation reads at a comfortable size once there is room for it */
@media (min-width: 1101px) {
  .site-header .menu a { font-size: .9rem; }
}

/* explicit "insurance not included" note under What's included */
.insurance-note { margin: 12px 0 0; padding: 11px 14px; border-radius: 10px; background: var(--warn-bg); border: 1px solid #ecdcb0; color: var(--text-soft); font-size: .9rem; }
.insurance-note strong { color: var(--text); }
.insurance-note a { white-space: nowrap; }
#insurance { scroll-margin-top: 80px; }

/* trail status badge on the trek banner */
.trail-status { display: inline-flex; align-items: center; gap: 7px; margin: 8px 0 0; padding: 4px 11px; border-radius: 999px; font-size: .82rem; font-weight: 600; background: rgba(255,255,255,.92); color: var(--text); }
.trail-status i { width: 8px; height: 8px; border-radius: 50%; background: #2e9d57; }
.trail-status.closed { color: #b3402e; }
.trail-status.closed i { background: #d0432f; }
.trail-status span { color: var(--muted); font-weight: 500; }
.banner-inner .trail-status + .banner-cta { display: table; }
.tag.closed { background: #d0432f; color: #fff; }
/* pickup points with times */
.pickup-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.pickup-list li { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.pickup-list b { flex: none; min-width: 64px; font-weight: 700; color: var(--accent, var(--forest-500)); }
/* packing list groups */
.carry-title { font-size: .95rem; margin: 14px 0 8px; }
.carry-title:first-of-type { margin-top: 4px; }
.trail-form { margin-bottom: 16px; }
.legal ul { padding-left: 20px; }
.trek-card .card-img .tag.open.closed { background: #d0432f !important; border-color: #d0432f !important; color: #fff !important; }

/* after sending an enquiry */
.enq-done p { margin: 0 0 8px; }
.enq-done .wa-btn { background: #25d366 !important; border-color: #25d366 !important; color: #fff !important; gap: 8px; margin: 6px 0 10px; }
.enq-done .wa-btn:hover { background: #1ebe5b !important; }
.enq-done .wa-btn svg { width: 19px; height: 19px; }

/* ================= Calm palettes (built on Editorial: white header, light pages) ================= */
[data-theme~="mist"] {
  --accent: #4d7391;
  --forest-950: #2b3f50; --forest-900: #34495b; --forest-700: #47657e; --forest-500: #4d7391; --forest-100: #eaf1f6;
  --sun: #4d7391; --sun-dark: #3d5e78; --sun-100: #eaf1f6; --on-sun: #ffffff;
  --cream: #ffffff; --surface: #ffffff; --surface-2: #f4f7fa;
  --text: #1e2a33; --text-soft: #43515c; --muted: #67757f; --line: #e1e8ee; --no-bg: #f8f1f0;
  --ok: #4d7391; --ok-bg: #eaf1f6; --info: #47657e; --info-bg: #eef3f7;
}
[data-theme~="sage"] {
  --accent: #557a63;
  --forest-950: #2c3d33; --forest-900: #34483c; --forest-700: #496a56; --forest-500: #557a63; --forest-100: #edf3ef;
  --sun: #557a63; --sun-dark: #43624f; --sun-100: #edf3ef; --on-sun: #ffffff;
  --cream: #ffffff; --surface: #ffffff; --surface-2: #f5f7f5;
  --text: #1f2723; --text-soft: #46524b; --muted: #68746d; --line: #e2e8e3; --no-bg: #f8f1f0;
  --ok: #557a63; --ok-bg: #edf3ef; --info: #496a56; --info-bg: #eff4f0;
}
[data-theme~="mist"] .btn:hover, [data-theme~="sage"] .btn:hover { background: var(--sun-dark); border-color: var(--sun-dark); }

/* ===== trek cards that grow with the text =====
   The card size, badges and text are all in rem, so bigger text never overflows or overlaps. */
[data-theme~="ghats"] #treks .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: 14px; }
[data-theme~="ghats"] .trek-card { height: auto; min-height: 20rem; }
/* the two corner badges share the top row without touching */
[data-theme~="ghats"] .trek-card .card-img .tag { max-width: calc(50% - 14px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the price pill sits below the badges */
[data-theme~="ghats"] .trek-card .card-price { top: 3.3rem; }
[data-theme~="ghats"] .tag.match { top: 3.3rem; }
/* long region names wrap to at most two lines instead of pushing into the badges */
[data-theme~="ghats"] .trek-card .eyebrow { letter-spacing: .06em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
[data-theme~="ghats"] .trek-card .card-lead { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; }
@media (max-width: 520px) {
  [data-theme~="ghats"] #treks .grid { grid-template-columns: 1fr; gap: 12px; }
  [data-theme~="ghats"] .trek-card { min-height: 18rem; }
}