:root{
  /* «Иссык-Куль» light theme (2026-07-10): ice white + pine ink + lake teal + sun gold */
  --paper:#F7FAFA;
  --paper-2:#ECF2F0;
  --ink:#10201C;
  --ink-soft:#445751;
  --lake:#0F7A6C;        /* Issyk-Kul teal (text/accent/border) */
  --lake-deep:#0B5A50;
  --lake-bright:#17A08E;
  --lake-fill:#0F7A6C;   /* teal-filled controls bg (white text) — darkened in dark theme for WCAG */
  --clay:#C2503A;        /* errors / negative marks only */
  --gold:#E8A63D;
  --gold-soft:#FBF0DA;   /* gold badge surface (dark text on it) */
  --gold-ink:#7A5410;    /* text on gold-soft */
  --line:rgba(16,32,28,.13);
  --shadow:0 18px 50px -22px rgba(10,36,30,.45);
  --maxw:1200px;
  /* fonts (Bricolage display + Figtree body) */
  --font-display:"Bricolage Grotesque","Segoe UI",sans-serif;
  --font-body:"Figtree",system-ui,sans-serif;
  --font-logo:"Fraunces",Georgia,serif;
  /* semantic, theme-aware surfaces */
  --surface:#fff;
  --surface-2:#F4F8F7;
  /* --- Soft Alpine design language: soft gradients instead of hard lines --- */
  --grad-surface:linear-gradient(160deg,var(--surface),var(--surface-2));
  --soft-shadow:0 10px 30px -16px rgba(10,36,30,.40);
  --hairline:linear-gradient(90deg,transparent,var(--line) 16%,var(--line) 84%,transparent);
  --aurora:radial-gradient(120% 100% at 0% 0%,rgba(15,122,108,.16),transparent 55%),radial-gradient(120% 100% at 100% 0%,rgba(232,166,61,.14),transparent 55%);
  --bar-bg:rgba(247,250,250,.92);
  --body-text:#24352F;
  /* always-dark panels (footer, how, sell-box, mobile menu) */
  --panel:#0F1E1A;
  --panel-2:#16241F;
  --panel-text:#F3F7F6;
  --panel-text-soft:rgba(243,247,246,.75);
}
[data-theme="dark"]{
  --paper:#0f1513;
  --paper-2:#171f1c;
  --ink:#edf0ec;
  --ink-soft:#9fb0a8;
  --lake:#19a896;
  --lake-deep:#138a7b;
  --lake-bright:#2fcab2;
  --lake-fill:#0d6e62;   /* darker teal so #fff on it passes WCAG 4.5:1 in dark theme (~6.1:1) */
  --line:rgba(237,240,236,.13);
  --shadow:0 22px 55px -24px rgba(0,0,0,.65);
  --surface:#19221f;
  --surface-2:#212c28;
  --soft-shadow:0 12px 34px -16px rgba(0,0,0,.6);
  --aurora:radial-gradient(120% 100% at 0% 0%,rgba(47,202,178,.18),transparent 55%),radial-gradient(120% 100% at 100% 0%,rgba(217,164,65,.13),transparent 55%);
  --bar-bg:rgba(15,21,19,.9);
  --body-text:#c6d0ca;
  --panel:#0b100e;
  --panel-2:#161d1a;
  --panel-text:#edf0ec;
  --panel-text-soft:rgba(237,240,236,.7);
}
html{color-scheme:light dark}
[data-theme="dark"]{color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%} /* kill the grey tap flash in mobile WebViews (IG/Android); stop iOS Safari inflating text in landscape */
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:700;line-height:1.05;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
button{color:inherit}
.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}
:focus-visible{outline:2px solid var(--lake);outline-offset:2px}   /* visible keyboard focus (Soft Alpine teal) */
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--lake-deep)}
.catalog-main > .eyebrow{letter-spacing:.1em;font-weight:600;color:var(--ink-soft)}   /* calmer count line (Soft Alpine) */
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.98rem;padding:.85em 1.5em;border-radius:999px;cursor:pointer;border:1.5px solid transparent;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;white-space:nowrap}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-primary{background:var(--lake-fill);color:#fff;box-shadow:0 10px 24px -10px rgba(18,122,111,.7)}
.btn-primary:hover{background:var(--lake-deep);transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(18,122,111,.8)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-dark{background:var(--panel);color:var(--panel-text)}
.btn-dark:hover{background:#2c3a33;transform:translateY(-2px)}

/* ---------- HEADER ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .35s ease,box-shadow .35s ease,padding .35s ease;padding:18px 0}
header.scrolled,header.solid{background:var(--bar-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line);padding:10px 0}
.nav{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:.6em;font-family:var(--font-logo);font-weight:600;font-size:1.5rem;letter-spacing:.005em;color:#fff;transition:color .35s ease}
header.scrolled .logo,header.solid .logo{color:var(--ink)}
.logo small{display:block;font-family:var(--font-body);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;font-weight:600;opacity:.8;margin-top:-3px}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:.92rem;font-weight:500;transition:color .25s ease;position:relative}
.nav-links a:not(.btn){color:rgba(255,255,255,.92)}
header.scrolled .nav-links a:not(.btn),header.solid .nav-links a:not(.btn){color:var(--ink-soft)}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--lake-bright);transition:width .25s ease}
.nav-links a:not(.btn):hover::after{width:100%}
.nav-cta{padding:.6em 1.2em}
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:0;cursor:pointer;width:44px;height:44px}
.burger span{width:26px;height:2px;background:var(--surface);transition:background .35s}
header.scrolled .burger span,header.solid .burger span{background:var(--ink)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
.hero-bg img.on{opacity:1;animation:slowzoom 20s ease-out forwards}
@keyframes slowzoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,30,26,.55) 0%,rgba(15,30,26,.15) 35%,rgba(13,40,36,.55) 78%,rgba(11,30,27,.9) 100%)}
.hero-dots{position:absolute;left:32px;bottom:20px;z-index:2;display:flex;gap:6px}
.hero-dots i{width:26px;height:3px;border-radius:99px;background:rgba(255,255,255,.4);transition:background .5s;cursor:pointer;position:relative}
.hero-dots i::before{content:"";position:absolute;inset:-16px -2px}
.hero-dots i:focus-visible{outline:2px solid #fff;outline-offset:4px}
.hero-dots i.on{background:#fff}
.hero-inner{padding-bottom:84px;padding-top:140px;width:100%;position:relative;z-index:1}
.hero h1{font-size:clamp(2.7rem,7vw,5.6rem);font-weight:800;max-width:15ch;text-shadow:0 2px 30px rgba(0,0,0,.3)}
.hero h1 em{font-style:italic;color:#fbe6c4}
.hero p.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:46ch;margin-top:22px;color:rgba(255,255,255,.92)}
.hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero-trust{display:flex;align-items:center;gap:22px;margin-top:30px;flex-wrap:wrap;font-size:.9rem;color:rgba(255,255,255,.9)}
.hero-trust .stars{color:var(--gold);letter-spacing:2px}
.hero-trust .dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.5)}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;opacity:.75;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint .line{width:1px;height:34px;background:linear-gradient(#fff,transparent);animation:pulse 2s ease-in-out infinite}
/* narrow-desktop squeeze: logo + 5 links + toggle + CTA don't fit below ~900px
   (placed after the base .nav-links/.nav-cta/.scroll-hint rules it overrides) */
@media (min-width:681px) and (max-width:900px){
  .nav-links{gap:14px}
  .nav-cta{padding:.5em .9em}
  .logo{white-space:nowrap}
  .nav-links a[href="plan-trip.html"]{display:none}   /* the header CTA already leads there on these pages */
  .scroll-hint{display:none}   /* overlaps the hero trust line at this width */
}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------- PAGE HERO (sub-pages) ---------- */
.page-hero{position:relative;color:#fff;overflow:hidden;padding:170px 0 70px}
.page-hero .bg{position:absolute;inset:0;z-index:-2}
.page-hero .bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,30,26,.7),rgba(11,30,27,.86))}
.crumb{font-size:.84rem;color:rgba(255,255,255,.75);margin-bottom:14px}
.crumb a:hover{color:#fff}
.page-hero h1{font-size:clamp(2.4rem,5vw,4rem)}
.page-hero p{margin-top:14px;max-width:54ch;color:rgba(255,255,255,.88);font-size:1.08rem}
/* blog hero — compact editorial (left-aligned, gold eyebrow kicker) */
body[data-page="blog"] .page-hero{padding:110px 0 28px;background:var(--paper);color:var(--ink)}
body[data-page="blog"] .page-hero::after{display:none}
body[data-page="blog"] .page-hero + .pad{padding-top:24px}   /* close the empty gap to the chips now the hero is light */
body[data-page="blog"] .page-hero .crumb,body[data-page="blog"] .page-hero .crumb a{color:var(--ink-soft)}
body[data-page="blog"] .page-hero h1{font-size:clamp(2.1rem,3.6vw,3rem);line-height:1.08;color:var(--ink)}
body[data-page="blog"] .page-hero p{color:var(--ink-soft)}
body[data-page="blog"] .page-hero .eyebrow{margin:0 0 10px;font-size:.78rem;max-width:none;color:var(--lake-deep)}

/* reveal animation */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .42s cubic-bezier(.2,.7,.2,1),transform .42s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.hero .reveal{transform:translateY(28px)}
[data-delay="1"]{transition-delay:.08s}
[data-delay="2"]{transition-delay:.16s}
[data-delay="3"]{transition-delay:.24s}
[data-delay="4"]{transition-delay:.32s}

.stat{display:flex;flex-direction:column;line-height:1.1}
.stat b{font-family:var(--font-display);font-size:1.9rem;font-weight:600;color:#fff}
.stat span{font-size:.82rem;letter-spacing:.04em;color:rgba(246,242,233,.7)}
.stat b em{font-style:normal;color:var(--gold)}

/* ---------- SECTION SHELL ---------- */
section{position:relative}
.pad{padding:72px 0}
.sec-head{max-width:60ch;margin-bottom:50px}
.sec-head h2{font-size:clamp(2rem,4vw,3.2rem);margin-top:14px}
.sec-head p{color:var(--ink-soft);font-size:1.08rem;margin-top:16px;max-width:52ch}
/* founder block (home About) */
.founder{text-align:center;max-width:640px;margin:0 auto 44px}
.founder-photo{width:120px;height:120px;border-radius:50%;overflow:hidden;margin:0 auto 18px;box-shadow:var(--shadow);border:3px solid var(--surface)}
.founder-photo img{width:100%;height:100%;object-fit:cover}
.founder .eyebrow{color:var(--lake-deep)}
.founder h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin:8px 0 14px}
.founder > p{color:var(--ink-soft);font-size:1.08rem;max-width:58ch;margin:0 auto 14px}
.founder .founder-mission{font-family:var(--font-display);font-size:1.3rem;color:var(--lake-deep);max-width:none;margin:6px auto 0}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;max-width:none}
.head-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- TOUR CARDS ---------- */
.tours-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tour{background:var(--grad-surface);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .35s ease,box-shadow .35s ease}
.tour:hover{transform:translateY(-6px);box-shadow:0 28px 60px -26px rgba(12,40,36,.55)}
@keyframes tourIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tour.animate-in{animation:tourIn .34s ease both}   /* soft rise-in on load / filter / sort */
@media(prefers-reduced-motion:reduce){
  .tour.animate-in,.hero-bg img,.tour-hero .bg img,.scroll-hint .line,.float-wa{animation:none}
  .hero-bg img{transition:none}   /* slideshow JS also skips itself under reduced motion */
  .reveal{transition:none;transform:none;opacity:1}
}
.tour-img{position:relative;aspect-ratio:4/3;overflow:hidden}
.tour-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tour:hover .tour-img img{transform:scale(1.07)}
.tour-badge{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.94);color:#1B2420;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.4em .8em;border-radius:999px}
.tour-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.tour h3{font-size:1.32rem;font-weight:600;margin-bottom:12px}
.tour ul{list-style:none;margin-bottom:18px;display:flex;flex-direction:column;gap:7px}
.tour ul li{font-size:.9rem;color:var(--ink-soft);display:flex;gap:9px;align-items:flex-start}
.tour ul li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lake-bright);margin-top:8px;flex:none}
.tour-hook{font-weight:600;color:var(--ink);font-size:.96rem;line-height:1.35;margin-bottom:7px}
.tour-blurb{font-size:.9rem;color:var(--ink-soft);line-height:1.55;margin-bottom:18px}
.tour-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:16px;background-image:var(--hairline);background-repeat:no-repeat;background-position:top;background-size:100% 1px}
.price{font-family:var(--font-display)}
.price span{font-size:.74rem;color:var(--ink-soft);display:block;letter-spacing:.04em}
.price b{font-size:1.4rem;font-weight:600}
.tour-foot a{font-weight:600;color:var(--lake);font-size:.92rem;display:inline-flex;gap:.3em;align-items:center}
.tour-foot a:hover{gap:.6em}

/* ---------- FILTER CHIPS ---------- */
.filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px}
.catalog{display:block}      /* mobile: single column (filter rail hidden, swipe+sheet used) */
.dfilters{display:none}      /* desktop-only filter toolbar — shown via the @media block below */
.chip{border:0;background:var(--grad-surface);box-shadow:0 1px 2px rgba(12,40,36,.05),0 0 0 1px var(--line);border-radius:999px;padding:.6em 1.2em;font:inherit;font-size:.9rem;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:box-shadow .22s,color .22s,background .22s}
.chip:hover{box-shadow:0 2px 6px rgba(12,40,36,.08),0 0 0 1px var(--lake)}
.chip.active{background:var(--panel);color:var(--panel-text);border-color:var(--ink)}
.chip-tag{font-size:.82rem;padding:.5em 1em}
.chip-n{margin-left:.35em}   /* inline-flex chips collapse the literal space before the count */
.no-result{display:none;text-align:center;padding:60px 0;color:var(--ink-soft)}
.no-result.show{display:block}

/* ---------- DESKTOP TOURS CATALOG: compact hero + left sticky filter rail (mobile catalog untouched) ---------- */
@media(min-width:681px){
  body[data-page="tours"] .page-hero{padding:104px 0 40px}   /* less scroll to the tours */
  body[data-page="tours"] .pad{padding-top:34px}
  body[data-page="tours"] #filterBar{display:none}           /* mobile swipe categories hidden on desktop */
  body[data-page="tours"] .catalog-main .tours-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  /* filter toolbar: Filters button (left) + category pills (right of it), grid full-width below */
  body[data-page="tours"] .dfilters{display:flex;align-items:center;justify-content:flex-start;gap:14px;margin-bottom:28px}
  body[data-page="tours"] .dcats{display:flex;flex-wrap:wrap;gap:10px;flex:1}     /* All + categories, right of the button */
  body[data-page="tours"] .dfilters-act{position:relative;flex:none;order:-1}      /* Filters button first (left) */
  body[data-page="tours"] .dfilter-btn{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--grad-surface);box-shadow:0 1px 2px rgba(12,40,36,.05),0 0 0 1px var(--line);border-radius:999px;padding:.6em 1.2em;font-family:inherit;font-size:.9rem;font-weight:600;line-height:1;color:var(--ink);cursor:pointer;transition:box-shadow .22s,color .22s}
  body[data-page="tours"] .dfilter-btn:hover{box-shadow:0 2px 6px rgba(12,40,36,.08),0 0 0 1px var(--lake)}
  body[data-page="tours"] .dfilter-btn.has{box-shadow:0 1px 2px rgba(12,40,36,.05),0 0 0 1px var(--lake);color:var(--lake)}
  body[data-page="tours"] .dfb-ic{width:17px;height:17px;flex:none}
  body[data-page="tours"] .dfilter-badge{background:var(--lake-fill);color:#fff;border-radius:999px;min-width:18px;height:18px;display:inline-grid;place-items:center;font-size:.7rem;padding:0 5px}
  body[data-page="tours"] .dfilter-badge[hidden]{display:none}   /* hide the count when no tags selected (display override beats [hidden]) */
  /* tag popover under the button (opens down-left) */
  body[data-page="tours"] .dpop{display:none;position:absolute;top:calc(100% + 10px);left:0;width:330px;z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
  body[data-page="tours"] .dpop.open{display:block}
  body[data-page="tours"] .dpop-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px 6px}
  body[data-page="tours"] .dpop-head b{font-family:var(--font-display);font-size:1.05rem}
  body[data-page="tours"] .dpop-clear{background:none;border:0;color:var(--lake);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;padding:0}
  body[data-page="tours"] .dpop-clear:hover{text-decoration:underline}
  body[data-page="tours"] .dpop-body{padding:4px 18px 16px}
  body[data-page="tours"] .dpop-group{margin-top:14px}
  body[data-page="tours"] .dpop-gtitle{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:9px}
  body[data-page="tours"] .dpop-chips{display:flex;flex-wrap:wrap;gap:9px}
}

/* ---------- EXPERIENCES ---------- */
.exp{background:var(--paper-2)}
.exp-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:240px;gap:18px}
.exp-grid .exp-card:nth-child(-n+3){grid-column:span 2}
.exp-grid .exp-card:nth-child(n+4){grid-column:span 3}
.exp-card{position:relative;border-radius:18px;overflow:hidden;color:#fff;display:flex;align-items:flex-end;padding:22px;isolation:isolate}
.exp-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s ease}
.exp-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(10,28,24,.82) 100%)}
.exp-card:hover img{transform:scale(1.08)}
.exp-card h3{font-size:1.3rem}
.exp-card span{font-size:.84rem;opacity:.85;display:block;margin-top:2px}

/* ---------- WHY US ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.why-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px 28px;transition:transform .3s ease,border-color .3s}
.why-card:hover{transform:translateY(-4px);border-color:var(--lake)}
.why-ic{width:50px;height:50px;border-radius:14px;background:rgba(18,122,111,.1);display:grid;place-items:center;margin-bottom:18px;font-size:1.4rem}
.why-card h3{font-size:1.22rem;margin-bottom:8px}
.why-card p{color:var(--ink-soft);font-size:.95rem}

/* ---------- HOW IT WORKS ---------- */
.how{background:var(--panel);color:var(--panel-text)}
.how .sec-head h2{color:#fff}
.how .sec-head p{color:rgba(246,242,233,.72)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;counter-reset:step}
.step{position:relative;padding-top:30px}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-display);font-size:3.4rem;color:rgba(217,164,65,.5);line-height:1;display:block;margin-bottom:14px}
.step h3{font-size:1.35rem;color:#fff;margin-bottom:8px}
.step p{color:rgba(246,242,233,.72);font-size:.96rem}
.step:not(:last-child)::after{content:"";position:absolute;top:18px;right:-15px;width:30px;height:1px;background:rgba(246,242,233,.25)}

/* ---------- REVIEWS ---------- */
.review{scroll-snap-align:start;flex:0 0 380px;max-width:88vw;background:var(--surface);border-radius:20px;padding:30px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.review .stars{color:var(--gold);letter-spacing:2px;margin-bottom:14px}
.review p{font-size:1.05rem;color:var(--ink);font-family:var(--font-display);font-weight:400;line-height:1.45;margin-bottom:20px}
.review .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.review .who img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.review .who b{display:block;font-size:.95rem}
.review .who span{font-size:.82rem;color:var(--ink-soft)}
.rev-nav{display:flex;gap:10px}
.rev-nav button{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;font-size:1.1rem;transition:.25s}
.rev-nav button:hover{background:var(--panel);color:var(--panel-text);border-color:var(--ink)}
.rev-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px;scrollbar-width:none}
.rev-track::-webkit-scrollbar{display:none}
/* Top places (Sights) — 4 equal tiles on desktop (override experiences span rules) */
#places .exp-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:240px}
#places .exp-grid .exp-card{grid-column:auto}

/* ---------- BLOG ---------- */
.blog-feature{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:var(--surface);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:50px}
.blog-feature .img{position:relative;min-height:340px}
.blog-feature .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blog-feature .body{padding:40px;display:flex;flex-direction:column;justify-content:center}
.blog-feature .body h2{font-size:clamp(1.7rem,3vw,2.4rem);margin:12px 0 14px}
.blog-feature .body p{color:var(--ink-soft);margin-bottom:22px}
.post-meta{display:flex;gap:10px;align-items:center;font-size:.8rem;color:var(--ink-soft);flex-wrap:wrap}
.tag{display:inline-block;background:rgba(18,122,111,.1);color:var(--lake-deep);font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.35em .8em;border-radius:999px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.post{background:var(--surface);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .35s ease,box-shadow .35s ease}
.post:hover{transform:translateY(-6px);box-shadow:0 28px 60px -26px rgba(12,40,36,.55)}
.post .img{aspect-ratio:16/10;overflow:hidden}
.post .img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.post:hover .img img{transform:scale(1.07)}
.post .body{padding:22px;display:flex;flex-direction:column;flex:1}
.post h3{font-size:1.22rem;margin:10px 0 10px}
.post .body .more{margin-top:auto;font-weight:600;color:var(--lake);font-size:.9rem;padding-top:14px}
.post .more:hover{gap:.6em}

/* ---------- FAQ ---------- */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.faq-item{border-bottom:1px solid var(--line)}
.faq-h{margin:0;font:inherit;font-weight:inherit}   /* semantic heading wrapper around the accordion button; no visual effect */
.faq-q,.tfaq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;gap:20px;align-items:center;font-family:var(--font-display);font-size:1.2rem;font-weight:500;color:var(--ink)}
.faq-q .ic,.tfaq-q .ic{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;transition:.3s;font-size:1.1rem}
.faq-item.open .faq-q .ic,.faq-item.open .tfaq-q .ic{background:var(--lake-fill);color:#fff;border-color:var(--lake);transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-a p{padding-bottom:22px;color:var(--ink-soft);max-width:60ch}

/* ---------- LEAD / CTA ---------- */
.lead-sec{position:relative;overflow:hidden;color:#fff}
.lead-sec .bg{position:absolute;inset:0;z-index:-2}
.lead-sec .bg img{width:100%;height:100%;object-fit:cover}
.lead-sec::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,rgba(9,32,28,.94) 0%,rgba(9,32,28,.82) 45%,rgba(9,32,28,.5) 100%)}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.lead-copy h2{font-size:clamp(2.1rem,4vw,3.3rem);color:#fff}
.lead-copy p{color:rgba(255,255,255,.85);margin-top:18px;font-size:1.08rem;max-width:44ch}
.lead-points{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.lead-points div{display:flex;gap:11px;align-items:center;font-size:.98rem}
.lead-points .tick{width:24px;height:24px;border-radius:50%;background:var(--lake-bright);display:grid;place-items:center;flex:none;font-size:.8rem;color:#06251f;font-weight:800}
.msg-buttons{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.msg-btn{display:inline-flex;align-items:center;gap:.5em;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:.7em 1.2em;border-radius:999px;font-weight:600;font-size:.92rem;transition:.25s;color:#fff}
.msg-btn:hover{background:rgba(255,255,255,.2)}
.msg-btn.wa:hover{background:#25D366;border-color:#25D366;color:#063}
.form-card{background:var(--surface);color:var(--ink);border-radius:24px;padding:34px;box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.form-card h3{font-size:1.5rem;margin-bottom:4px}
.form-card .sub{font-size:.92rem;color:var(--ink-soft);margin-bottom:22px}
.field{margin-bottom:15px}
.field label{display:block;font-size:.8rem;font-weight:600;margin-bottom:6px;letter-spacing:.02em}
.field input,.field select,.field textarea{width:100%;padding:.8em .95em;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);font:inherit;font-size:.95rem;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--lake);box-shadow:0 0 0 3px rgba(18,122,111,.15)}
/* --clay itself is 4.44:1 on paper and 3.96:1 on the dark surface, i.e. error text was the
   least readable text on the site. Same hue, enough contrast, per theme. */
.form-err{margin-top:12px;color:#B4472F;font-size:.9rem;line-height:1.5}
.form-err a{color:var(--lake);font-weight:600;text-decoration:underline}
.field textarea{resize:vertical;min-height:80px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-card .btn-primary{width:100%;justify-content:center;margin-top:8px}
.form-note{font-size:.78rem;color:var(--ink-soft);text-align:center;margin-top:12px}
/* mobile-only: promise panel (#whybook) + in-form WhatsApp — shown in @media(max-width:680px) */
.why-mob{display:none}
.lead-wa,.lead-wa-sep{display:none}
.form-success{display:none;text-align:center;padding:30px 10px}
.form-success.show{display:block}
.form-success .big{font-size:2.6rem}
.form-success h3{margin:10px 0 6px}

/* ---------- FOOTER ---------- */
footer{background:var(--panel);color:var(--panel-text-soft);padding:48px 0 30px}
/* slim footer: brand + two link columns */
.foot-slim{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:32px 40px;align-items:start}
.foot-slim .foot-bottom{grid-column:1/-1;margin-top:6px}
footer h4{color:#fff;font-family:var(--font-display);font-size:1.05rem;margin-bottom:16px;font-weight:600}
footer .logo{color:#fff;margin-bottom:16px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
footer ul a{font-size:.92rem;transition:color .2s}
footer ul a:hover{color:var(--lake-bright)}
footer .blurb{font-size:.92rem;max-width:34ch;line-height:1.7}
.socials{display:flex;gap:12px;margin-top:18px}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(246,242,233,.25);display:grid;place-items:center;transition:.25s}
.socials a:hover{background:var(--lake-fill);border-color:var(--lake);color:#fff}
.foot-bottom{border-top:1px solid rgba(246,242,233,.15);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.84rem}

/* ---------- FLOATING MSG BTN ---------- */
.float-wa{position:fixed;right:22px;bottom:22px;z-index:70;width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(37,211,102,.7);transition:transform .25s;animation:floatup .6s .8s both}
.float-wa:hover{transform:scale(1.08)}
@keyframes floatup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.float-wa svg{width:30px;height:30px}

/* mobile sticky cta */

/* ---------- MOBILE MENU ---------- */
.mobile-menu{position:fixed;inset:0;z-index:80;background:var(--panel);color:var(--panel-text);transform:translateX(100%);transition:transform .4s cubic-bezier(.6,0,.2,1);display:flex;flex-direction:column;padding:30px 28px}
.mobile-menu.open{transform:none}
.mobile-menu .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:50px}
.mobile-menu .close{background:none;border:0;color:#fff;font-size:2rem;cursor:pointer;line-height:1;width:44px;height:44px;display:grid;place-items:center;margin:-6px -8px -6px 0}
.mobile-menu nav{display:flex;flex-direction:column;gap:6px}
.mobile-menu nav a{font-family:var(--font-display);font-size:1.9rem;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.mobile-menu .btn-primary{margin-top:30px;justify-content:center}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .tours-grid,.why-grid,.steps,.blog-grid{grid-template-columns:repeat(2,1fr)}
  .exp-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
  .exp-grid .exp-card:nth-child(-n+3),.exp-grid .exp-card:nth-child(n+4){grid-column:auto}
  .exp-grid .exp-card:last-child{grid-column:span 2}
  .faq-wrap,.lead-grid,.blog-feature{grid-template-columns:1fr}
  .blog-feature .img{min-height:240px}
}
/* ============================================================
   TOUR DETAIL PAGE
   ============================================================ */
.tour-hero{position:relative;color:#fff;overflow:hidden;min-height:78vh;min-height:78svh;display:flex;align-items:flex-end}
.tour-hero .bg{position:absolute;inset:0;z-index:-2}
.tour-hero .bg img{width:100%;height:100%;object-fit:cover;animation:slowzoom 18s ease-out forwards}
.tour-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,30,26,.5) 0%,rgba(12,30,26,.1) 40%,rgba(11,28,24,.85) 100%)}
.tour-hero .wrap{padding-bottom:50px;padding-top:150px;width:100%}
.tour-hero .badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.pill{background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25);padding:.4em .9em;border-radius:999px;font-size:.78rem;font-weight:600}
.pill.sale{background:var(--gold-soft);border-color:transparent;color:var(--gold-ink)}
.tour-hero h1{font-size:clamp(2.3rem,5.4vw,4.4rem);max-width:18ch}
.tour-hero .sub{font-size:1.1rem;color:rgba(255,255,255,.9);margin-top:14px;max-width:50ch}
.factbar{display:flex;gap:30px;flex-wrap:wrap;margin-top:26px}
.factbar .f{display:flex;flex-direction:column;gap:2px}
.factbar .f b{font-family:var(--font-display);font-size:1.3rem}
.factbar .f span{font-size:.78rem;letter-spacing:.04em;color:rgba(255,255,255,.72);text-transform:uppercase}

.tour-main > section{padding:0 0 34px;border-bottom:1px solid var(--line);margin-bottom:34px}
.tour-main > section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.tour-main h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:18px}
.tour-main > section.related-tours h2{margin-bottom:28px}
.tour-main p{color:var(--ink-soft);margin-bottom:14px;max-width:64ch}
.lead-in{font-size:1.18rem;color:var(--ink);font-family:var(--font-display);line-height:1.5;max-width:60ch}

.hl-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.hl-grid .hl:only-child{grid-column:1/-1}
.hl{display:flex;gap:12px;align-items:flex-start;background:var(--paper-2);border-radius:14px;padding:16px 18px}
.hl .ic{font-size:1.3rem;flex:none}
.hl b{display:block;font-size:.98rem;margin-bottom:2px}
.hl span{font-size:.86rem;color:var(--ink-soft)}

.bk-h{font-weight:600;font-size:.9rem;margin-bottom:9px}   /* used by the booking sidebar (.book-side) */

/* itinerary timeline */
/* short indexable intro under the catalog grid */
.catalog-note{margin-top:36px;max-width:70ch}
.catalog-note p{color:var(--ink-soft);font-size:.97rem;margin-bottom:12px}
.catalog-note p:last-child{margin-bottom:0}
/* "Also available as: 7 days · 9 days" — links between length variants of one route */
.variant-row{margin:4px 0 10px;font-size:.95rem;color:var(--ink-soft)}
.variant-row a{color:var(--lake);font-weight:600}
.variant-row a:hover{text-decoration:underline}
.timeline{position:relative;margin-top:10px}
.tl{position:relative;padding:0 0 4px 56px;margin-bottom:8px}
.tl::before{content:attr(data-day);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--lake-fill);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:.9rem}
.tl::after{content:"";position:absolute;left:19px;top:40px;bottom:-8px;width:2px;background:var(--line)}
.tl:last-child::after{display:none}
.tl-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:8px 0;color:var(--ink)}
.tl-q h3{font-size:1.12rem;font-weight:600}
.tl-q .meta{font-size:.78rem;color:var(--ink-soft);margin-top:2px}
.tl-q .tgl{flex:none;font-size:1.3rem;color:var(--lake);transition:.3s}
.tl.open .tl-q .tgl{transform:rotate(45deg)}
.tl-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.tl-a p{padding:6px 0 14px;font-size:.94rem}
.tl-body{display:grid;grid-template-columns:1fr 250px;gap:26px;padding:6px 0 18px;align-items:start}
.tl-body.no-desc{grid-template-columns:1fr}
.tl-desc p{font-size:.95rem;color:var(--ink-soft);line-height:1.6;margin-bottom:11px}
.tl-desc p:last-child{margin-bottom:0}
.tl-info{align-self:start;background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:2px 14px}
.ti{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--line);font-size:.85rem;line-height:1.4}
.ti:first-child{border-top:0}
.ti b{white-space:nowrap;color:var(--ink)}
.ti span{color:var(--ink-soft);text-align:right}
/* booking: desktop = 2-col form + side panel; mobile = full-width form + WhatsApp link */
.book-grid{display:grid;grid-template-columns:1fr 330px;gap:36px;align-items:start;margin-top:8px}
.book-side{align-self:start}
.book-price{border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:20px}
.book-price span{font-size:.8rem;color:var(--ink-soft);display:block}
.book-price b{font-family:var(--font-display);font-size:1.9rem;font-weight:600;display:block;line-height:1.1}
.book-price em{font-size:.82rem;color:var(--ink-soft);font-style:normal}
.book-side .bk-h{font-weight:600;font-size:1rem;margin-bottom:10px}
.book-perks{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.book-perks li{display:flex;gap:9px;align-items:flex-start;font-size:.9rem;color:var(--ink-soft);line-height:1.4}
.book-perks li::before{content:"✓";color:var(--lake);font-weight:800;flex:none}
.book-contact{display:flex;flex-direction:column;gap:10px}
.book-contact a{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:600;font-size:.92rem;border:1.5px solid var(--line);border-radius:999px;padding:.75em;transition:.2s}
.book-contact a:hover{border-color:var(--lake);color:var(--lake)}
.book-contact a.wa{border-color:#25D366;color:#128C42}
.book-contact a.wa:hover{background:#25D366;color:#fff}
/* secondary WhatsApp link under the enquiry button — mobile only (desktop uses the side panel) */
.form-wa{display:none;align-items:center;justify-content:center;gap:.5em;margin-top:12px;padding:.85em;border-radius:999px;border:1.5px solid #25D366;color:#128C42;font-weight:600;font-size:.92rem;transition:.2s}
.form-wa:hover{background:#25D366;color:#fff}
@media(max-width:820px){.book-grid{grid-template-columns:1fr}.tl-body{grid-template-columns:1fr;gap:14px}}

/* map */
#map{height:440px;border-radius:18px;overflow:hidden;border:1px solid var(--line);z-index:1}
.leaflet-container{font-family:inherit}
.map-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:.86rem;color:var(--ink-soft)}
.map-legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:middle}

/* included */
.incl-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:6px}
.incl-grid ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.incl-grid li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem;color:var(--ink-soft)}
.incl-grid .yes li::before{content:"✓";color:var(--lake);font-weight:800;flex:none}
.incl-grid .no li::before{content:"✕";color:var(--clay);font-weight:800;flex:none}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:14px}
.gallery a{border-radius:14px;overflow:hidden;cursor:zoom-in}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gallery a:hover img{transform:scale(1.06)}
.gallery a.w2{grid-column:span 2}
.gallery a.h2{grid-row:span 2}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(8,12,11,.93);display:none;align-items:center;justify-content:center;padding:40px}
.lightbox.open{display:flex}
.lb-img{max-width:90vw;max-height:86vh;max-height:86svh;border-radius:10px;object-fit:contain;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.lightbox button{position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;cursor:pointer;border-radius:50%;display:grid;place-items:center;transition:.2s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lightbox button:hover{background:rgba(255,255,255,.24)}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:1.8rem;line-height:1}
.lb-prev{left:24px}
.lb-next{right:24px}
.lb-close{top:22px;right:24px;width:42px;height:42px;font-size:1.5rem;line-height:1}
.lb-count{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.85);font-size:.85rem;letter-spacing:.04em}
@media(max-width:680px){.lightbox{padding:16px}.lb-prev,.lb-next{width:42px;height:42px;font-size:1.4rem}.lb-prev{left:10px}.lb-next{right:10px}}


/* About block diverges by viewport: desktop = expanded sections, mobile = tabs (toggled at 680px) */
.about-mobile{display:none}
.about-desktop{display:block}
/* about-this-tour tabs (own class — must NOT reuse .chip, which script.js binds the catalog filter to) */
.tour-tabs .tabbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.tour-tabs .tab{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:.55em 1.1em;font:inherit;font-size:.86rem;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:.22s}
.tour-tabs .tab:hover{border-color:var(--lake)}
.tour-tabs .tab.active{background:var(--panel);color:var(--panel-text);border-color:var(--ink)}
.tabpanel{display:none}
.tabpanel.open{display:block}
.tour-tabs .info-box{max-width:520px;margin-bottom:18px}
.tour-tabs .tab-incl{margin-top:4px}
.tour-notes{list-style:none;display:flex;flex-direction:column;gap:11px;max-width:64ch}
.tour-notes li{display:flex;gap:10px;font-size:.92rem;color:var(--ink-soft);line-height:1.5}
.tour-notes li::before{content:"\203A";color:var(--lake);font-weight:800;flex:none}

/* sights carousel — 4 equal tiles on desktop (override the experiences bento spans) */
.tour-sights .exp-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:220px}
.tour-sights .exp-grid .exp-card{grid-column:auto}
.tour-sights .exp-card h3{font-size:1.05rem}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.about-intro h2{font-size:clamp(1.9rem,3.5vw,2.8rem);margin-bottom:18px}
.about-intro p{color:var(--ink-soft);margin-bottom:14px;max-width:60ch}
.about-intro .photo{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:7/10;box-shadow:var(--shadow)}
.about-intro .photo img{width:100%;height:100%;object-fit:cover}
.about-intro .photo .cap{position:absolute;left:16px;bottom:16px;right:16px;background:rgba(20,30,26,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;border-radius:12px;padding:12px 14px;font-size:.84rem}

.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.member{text-align:left}
.member .ph{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:1/1;margin-bottom:14px}
.member .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.member:hover .ph img{transform:scale(1.06)}
.member .lang{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.92);border-radius:999px;padding:.25em .7em;font-size:.72rem;font-weight:700;color:#1B2420}
.member h3{font-size:1.15rem;margin-bottom:2px}
.member .role{color:var(--lake);font-size:.84rem;font-weight:600;margin-bottom:8px}
.member p{font-size:.88rem;color:var(--ink-soft)}


.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:start}
.contact-methods{display:flex;flex-direction:column;gap:14px;margin:8px 0 26px}
.cmethod{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;transition:.25s}
.cmethod:hover{border-color:var(--lake);transform:translateX(4px)}
.cmethod .ic{width:46px;height:46px;border-radius:12px;background:rgba(18,122,111,.1);display:grid;place-items:center;font-size:1.3rem;flex:none}
.cmethod b{display:block;font-size:1rem}
.cmethod span{font-size:.88rem;color:var(--ink-soft)}
.cmethod.wa .ic{background:rgba(37,211,102,.15)}
.hours{display:flex;justify-content:space-between;font-size:.92rem;padding:8px 0;border-bottom:1px solid var(--line);max-width:340px}
.hours:last-child{border-bottom:0}
.hours span:first-child{color:var(--ink-soft)}

@media(max-width:980px){
  .about-intro,.contact-grid{grid-template-columns:1fr;gap:34px}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .values-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .team-grid{grid-template-columns:1fr 1fr;gap:16px}
  .values-grid{grid-template-columns:1fr}
  .about-intro .photo{aspect-ratio:7/10}
}

@media(max-width:980px){
  .tours-grid,.why-grid,.steps,.blog-grid{grid-template-columns:repeat(2,1fr)}
  .exp-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
  .exp-grid .exp-card:nth-child(-n+3),.exp-grid .exp-card:nth-child(n+4){grid-column:auto}
  .exp-grid .exp-card:last-child{grid-column:span 2}
  .faq-wrap,.lead-grid,.blog-feature{grid-template-columns:1fr}
  .blog-feature .img{min-height:240px}
  .tour-layout{grid-template-columns:1fr}
}
@media(max-width:680px){
  .pad{padding:44px 0}
  body[data-page="tours"] .pad{padding-top:30px}   /* tighten the dead gap between hero and catalog */
  .nav-links{display:none}
  .burger{display:flex}
  .tours-grid,.why-grid,.steps,.blog-grid{grid-template-columns:1fr}
  .exp-grid{grid-template-columns:1fr;grid-auto-rows:170px;gap:14px}
  .exp-grid .exp-card:nth-child(-n+3),.exp-grid .exp-card:nth-child(n+4){grid-column:auto}
  .exp-card{padding:18px}
  .field-row{grid-template-columns:1fr}
  /* slim footer on mobile: brand full-width, then two link columns */
  .foot-slim{grid-template-columns:1fr 1fr;gap:24px 20px}
  .foot-brand{grid-column:1/-1}
  footer .foot-col ul a{padding:5px 0;display:inline-block}
  .msg-buttons{justify-content:center}   /* center the lone WhatsApp pill on mobile */
  .msg-btn{font-size:16px;padding:13px 24px}   /* 16px text + ~47px tap target */
  /* ---------- «Кино-панель» hero (owner-approved): photo band on top, text on a light panel ---------- */
  .hero{min-height:0;display:block;color:var(--ink);background:var(--paper)}
  .hero-bg{position:relative;inset:auto;z-index:0;height:min(58svh,520px);min-height:300px;border-radius:0 0 26px 26px}
  .hero-bg::after{background:linear-gradient(180deg,rgba(10,26,22,.45),transparent 38%)}   /* only a top veil for the logo; the photo stays clean */
  .hero .hero-inner{padding-top:22px;padding-bottom:28px}   /* no CTA in the hero anymore */
  .hero h1{font-size:clamp(1.75rem,7.6vw,2.3rem);max-width:14ch;text-shadow:none}
  .hero h1 em{color:var(--lake)}
  .hero p.lead{color:var(--ink-soft);font-size:.97rem;margin-top:12px;max-width:36ch}
  .hero-actions{margin-top:20px}
  .hero .btn-ghost{border-color:transparent;background:var(--grad-surface);box-shadow:0 1px 2px rgba(10,36,30,.05),0 0 0 1px var(--line);color:var(--ink)}
  .hero-trust{color:var(--ink-soft);margin-top:18px}
  .hero-trust .dot{background:rgba(16,32,28,.3)}
  .hero-dots{left:18px;bottom:12px}
  .float-wa{bottom:98px}   /* stacked above the chat fab now that the bottom bar is gone */
  .step:not(:last-child)::after{display:none}
  .page-hero{padding:116px 0 40px}   /* shorter mobile hero → less side-crop on the wide bg photo */
  body[data-page="blog"] .page-hero{padding:80px 0 18px}
  body[data-page="blog"] .page-hero h1{font-size:1.95rem;line-height:1.12}
  body[data-page="plan"] .page-hero{padding:96px 0 30px}
  body[data-page="plan"] .page-hero h1{font-size:1.95rem;line-height:1.12}
  body[data-page="plan"] .plan-hero-cta .btn-primary{flex:1}
  .hl-grid,.incl-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .gallery a.w2{grid-column:span 2}
  /* compact, more aesthetic hero on phones */
  .tour-hero{min-height:50vh;min-height:50svh}
  .tour-hero .wrap{padding-top:92px;padding-bottom:18px}
  .tour-hero .crumb{display:none} /* breadcrumb is clutter on mobile */
  .tour-hero h1{font-size:1.85rem;line-height:1.12}
  .tour-hero .badges{margin-bottom:12px}
  .factbar{gap:13px 20px;margin-top:16px}
  .factbar .f b{font-size:1.05rem}
  .tour-page .pad{padding-bottom:32px} /* tighten the gap above the footer */
  /* viewport split: mobile shows tabs + compact hero + full-width form; desktop layout hidden */
  .about-mobile{display:block}
  .about-desktop{display:none}
  .tour-hero .sub{display:none}      /* summary lives in the Description tab on mobile */
  .book-side{display:none}           /* desktop-only sidebar */
  .form-wa{display:flex}             /* mobile-only WhatsApp link under the button */
  /* tab bar becomes a horizontal swipe row on phones */
  .tour-tabs .tabbar{flex-wrap:nowrap;overflow-x:auto;margin:0 -18px 18px;padding:2px 18px;scrollbar-width:none}
  .tour-tabs .tabbar::-webkit-scrollbar{display:none}
  .tour-tabs .tab{flex:0 0 auto;min-height:44px}
  /* compact horizontal cards on phones (tours + blog) */
  .tour{flex-direction:row;align-items:stretch;border-radius:16px}
  .tour-img{flex:0 0 42%;max-width:150px;min-width:116px;aspect-ratio:auto}
  .tour-body{padding:13px 15px}
  .tour h3{font-size:1.04rem;margin-bottom:6px;line-height:1.25}
  .tour ul{display:none}
  .tour-foot{padding-top:10px}
  .tour-foot a{font-size:.86rem}
  .tour-badge{top:8px;left:8px;font-size:.6rem;padding:.3em .6em}
  /* compact list rows: centered, 4:3 landscape thumbnail (no more portrait crop) */
  .post{flex-direction:row;align-items:center;gap:12px;padding:10px}
  .post .img{flex:0 0 116px;width:116px;max-width:116px;min-width:0;aspect-ratio:4/3;border-radius:10px}
  .post .body{padding:0}
  .post h3{font-size:1.04rem;margin:4px 0 0;line-height:1.3}
  .post .body .more{padding-top:8px}
  /* featured card → photo-overlay hero on mobile: text over the image with a dark scrim.
     .img and .body share one grid cell (grid-area 1/1) so they overlap. */
  .blog-feature{grid-template-columns:1fr;border-radius:18px;margin-bottom:28px}
  .blog-feature .img{grid-area:1/1;min-height:250px}
  .blog-feature .body{grid-area:1/1;z-index:1;justify-content:flex-end;padding:18px 16px 20px;
    background:linear-gradient(to top,rgba(9,26,22,.92) 0%,rgba(9,26,22,.4) 48%,rgba(9,26,22,0) 100%)}
  .blog-feature .body h2{color:#fff;font-size:1.5rem;margin:10px 0 8px;line-height:1.25}
  .blog-feature .body p{color:rgba(255,255,255,.85);margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .blog-feature .post-meta{color:rgba(255,255,255,.85)}
  .blog-feature .tag{background:#5dcaa5;color:#06251f}
  body[data-page="blog"] .blog-feature .btn-dark{background:#fff;color:#0d221e}
  /* category chips → one swipeable row, 44px tap targets (blog only).
     page-scoped selector so it beats the later base .blog-cats rule (~L889). */
  body[data-page="blog"] .blog-cats{flex-wrap:nowrap;overflow-x:auto;margin:0 -18px 24px;padding:6px 18px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  body[data-page="blog"] .blog-cats::-webkit-scrollbar{display:none}
  .blog-cats .chip{flex:none;min-height:44px;display:inline-flex;align-items:center}
  .why-card{padding:22px 20px}
  .why-ic{margin-bottom:12px}
  /* builder promo: stack text + image grid (its 2-col layout is an inline style) */
  .how > .wrap[style*="grid-template-columns"]{grid-template-columns:1fr !important;gap:24px !important}
  /* ---------- «Our promise» aurora panel (mobile-only, before FAQ) ---------- */
  .why-mob{display:block}
  .promise-panel{background:var(--aurora),var(--grad-surface);border:1px solid var(--line);border-radius:24px;padding:26px 20px;box-shadow:var(--soft-shadow)}
  .promise-panel .eyebrow{color:var(--lake)}
  .promise-panel h2{font-family:var(--font-display);font-weight:600;font-size:1.5rem;line-height:1.2;margin-top:6px;color:var(--ink)}
  .promise-list{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:17px}
  .promise-list li{display:flex;gap:13px;align-items:flex-start}
  .promise-list .p-ic{width:38px;height:38px;flex:none;border-radius:50%;background:var(--lake-fill);color:#fff;display:grid;place-items:center}
  .promise-list .p-ic .gico{width:20px;height:20px}
  .promise-list b{display:block;font-size:1rem;line-height:1.25;color:var(--ink);font-weight:600}
  .promise-list span{display:block;font-size:.94rem;line-height:1.45;color:var(--ink-soft);margin-top:3px}
  /* ---------- lead form: drop the copy-side points/WhatsApp, move WhatsApp under submit ---------- */
  .lead-sec .lead-points{display:none}
  .lead-sec .msg-buttons{display:none}
  .lead-wa-sep{display:flex;align-items:center;gap:10px;margin-top:14px;color:var(--ink-soft)}
  .lead-wa-sep::before,.lead-wa-sep::after{content:"";flex:1;height:1px;background:var(--line)}
  .lead-wa-sep span{font-size:.78rem}
  .lead-wa{display:flex;justify-content:center;width:100%;margin-top:12px;background:var(--surface);border:1.5px solid #25D366;color:#11803C}
  /* dark theme: #128C42 on the dark card is only 3.76:1, use the bright WhatsApp green (~8:1) */
  [data-theme="dark"] .lead-wa{color:#25D366}
}

/* ============================================================
   SOCIAL PROOF — review badges, reviews page, Instagram
   ============================================================ */
.badges-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rev-badge{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;transition:.25s}
.rev-badge:hover{border-color:var(--lake);transform:translateY(-4px)}
.rev-badge .src{font-weight:700;font-size:.92rem;display:flex;align-items:center;gap:6px}
.rev-badge .score{font-family:var(--font-display);font-size:1.9rem;font-weight:600;line-height:1}
.rev-badge .stars{color:var(--gold);letter-spacing:1px;font-size:.9rem}
.rev-badge .count{font-size:.8rem;color:var(--ink-soft)}
.rev-badge.ta .src{color:#00AA6C}
.rev-badge.go .src{color:#4285F4}

/* reviews page masonry */
.reviews-masonry{columns:3;column-gap:24px}
.reviews-masonry .review{flex:none;max-width:none;width:100%;margin-bottom:24px;break-inside:avoid;display:block}
.reviews-masonry .review .who{margin-top:14px}

/* leave-a-review box */
.leave-rev{background:var(--paper-2);border-radius:20px;padding:34px;text-align:center}
.leave-rev .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* Instagram */
.ig-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:30px}
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.ig-card{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;display:block}
.ig-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ig-card:hover img{transform:scale(1.09)}
.ig-card::after{content:"";position:absolute;inset:0;background:rgba(12,30,26,0);transition:.3s;display:grid;place-items:center}
.ig-card:hover::after{background:rgba(12,30,26,.35)}
.ig-card .ig-ic{position:absolute;inset:0;display:grid;place-items:center;color:#fff;opacity:0;transition:.3s;z-index:2;font-size:1.6rem}
.ig-card:hover .ig-ic{opacity:1}

@media(max-width:980px){
  .badges-strip{grid-template-columns:repeat(2,1fr)}
  .reviews-masonry{columns:2}
  .ig-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:680px){
  .badges-strip{grid-template-columns:repeat(2,1fr)}
  .reviews-masonry{columns:1}
  .ig-grid{grid-template-columns:repeat(3,1fr)}
}

/* ============================================================
   TRIP BUILDER
   ============================================================ */
/* The builder used to carry its own top bar (mountain logo, a theme toggle, "Exit to site").
   It now uses the shared header from nav.js like every other page, so those rules are gone. */
.builder-wrap{max-width:1080px;margin:0 auto;padding:120px 24px 60px}
.steps-bar{display:flex;gap:8px;margin-bottom:10px}
.steps-bar .sstep{flex:1;height:6px;border-radius:999px;background:var(--paper-2);overflow:hidden}
.steps-bar .sstep.done,.steps-bar .sstep.active{background:var(--lake-fill)}
.steps-bar .sstep.active{background:linear-gradient(90deg,var(--lake) 60%,var(--paper-2) 60%)}
.step-label{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lake);margin-bottom:8px}
.step-h{font-size:clamp(1.6rem,3.2vw,2.4rem);margin-bottom:8px}
.step-sub{color:var(--ink-soft);margin-bottom:30px;max-width:54ch}

.builder-grid{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}

/* option cards (image) */
.opt-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.opt-card,.choice,.b-chip,.match,.stepper button{color:var(--ink)}
.opt-card{position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;cursor:pointer;border:2px solid transparent;background:var(--surface);box-shadow:var(--shadow);transition:transform .25s,border-color .25s;text-align:left}
.opt-card:hover{transform:translateY(-4px)}
.opt-card.sel{border-color:var(--lake)}
.opt-card .im{position:relative;display:block;width:100%;flex:0 0 auto;aspect-ratio:4/3;overflow:hidden}
.opt-card .im img{width:100%;height:100%;object-fit:cover}
.opt-card .im::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(10,28,24,.35))}
.opt-card .tx{display:block;padding:14px 16px}
.opt-card .tx b{display:block;font-size:1.02rem;margin-bottom:2px}
.opt-card .tx span{font-size:.84rem;color:var(--ink-soft)}
.opt-card .tick{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:var(--surface);border:1.5px solid var(--line);display:grid;place-items:center;color:transparent;font-weight:800;transition:.2s;z-index:2}
.opt-card.sel .tick{background:var(--lake-fill);border-color:var(--lake);color:#fff}

/* simple choice cards (no image) */
.choice-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.choice{border:2px solid var(--line);border-radius:16px;padding:22px 20px;cursor:pointer;background:var(--surface);transition:.2s;text-align:left}
.choice:hover{border-color:var(--lake)}
.choice.sel{border-color:var(--lake);background:rgba(18,122,111,.06)}
.choice .ic{font-size:1.7rem;display:block;margin-bottom:10px}
.choice b{display:block;font-size:1.05rem;margin-bottom:4px}
.choice span{font-size:.86rem;color:var(--ink-soft)}

/* chips */
.b-chips{display:flex;gap:10px;flex-wrap:wrap}
.b-chip{border:2px solid var(--line);background:var(--surface);border-radius:999px;padding:.7em 1.3em;font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;transition:.2s}
.b-chip:hover{border-color:var(--lake)}
.b-chip.sel{background:var(--lake-fill);color:#fff;border-color:var(--lake)}
/* unanswered required group: point at what to tap instead of blocking the button */
.needs-pick{border-radius:16px;box-shadow:0 0 0 3px rgba(194,80,58,.14);padding:8px;margin:-8px}
.needs-pick .opt-card,.needs-pick .b-chip{border-color:var(--clay)}
.field-group{margin-bottom:28px}
.field-group > label{display:block;font-weight:700;margin-bottom:12px;font-size:1.02rem}

/* stepper */
.steppers{display:flex;gap:30px;flex-wrap:wrap}
.stepper{display:flex;align-items:center;gap:14px}
.stepper .lab b{display:block}
.stepper .lab span{font-size:.82rem;color:var(--ink-soft)}
.stepper .ctrl{display:flex;align-items:center;gap:12px}
.stepper button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);font-size:1.3rem;cursor:pointer;transition:.2s;line-height:1}
.stepper button:hover{border-color:var(--lake);color:var(--lake)}
.stepper .val{font-family:var(--font-display);font-size:1.4rem;min-width:24px;text-align:center}

/* interests grid (image multi-select) */
.interest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.int-card{position:relative;border-radius:16px;overflow:hidden;cursor:pointer;aspect-ratio:4/3;border:2px solid transparent;transition:.2s}
.int-card.sel{border-color:var(--lake)}
.int-card img{width:100%;height:100%;object-fit:cover}
.int-card .cap{position:absolute;inset:0;display:flex;align-items:flex-end;padding:14px;color:#fff;font-weight:600;font-size:.96rem;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(10,28,24,.8))}
.int-card .tick{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.85);display:grid;place-items:center;color:transparent;font-weight:800;transition:.2s}
.int-card.sel .tick{background:var(--lake-fill);color:#fff}

/* summary sidebar */
.summary-card{position:sticky;top:96px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:24px;overflow:hidden}
.summary-card h3{font-size:1.15rem;margin-bottom:4px}
.summary-card .muted{font-size:.84rem;color:var(--ink-soft);margin-bottom:16px}
.sum-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:.9rem}
.sum-row .k{color:var(--ink-soft)}
.sum-row .v{font-weight:600;text-align:right}
.sum-row .v.empty{color:var(--ink-soft);font-weight:400;font-style:italic}

/* nav */
.builder-nav{display:flex;justify-content:space-between;gap:14px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
/* .btn-ghost is white-on-transparent for dark heroes; the builder sits on paper. This used to be
   an inline style on the button, where it beat every class rule (and shipped twice, so the
   disabled state never applied). */
.builder-nav .btn-ghost{border-color:var(--line);color:var(--ink)}
.builder-nav .btn-ghost:hover{background:var(--surface-2)}
.builder-nav .btn-ghost[disabled]{opacity:.4;cursor:default}
.builder-nav .btn-ghost[disabled]:hover{background:transparent}
.builder-nav .skip{align-self:center;font-size:.9rem;color:var(--ink-soft);font-weight:600;cursor:pointer;background:none;border:0}
.builder-nav .skip:hover{color:var(--ink)}

/* ---- step 2: Airbnb-style dates (tabs, month grid, flexible row) ---- */
/* .msort-seg itself is defined inside the mobile media query (it was built for the catalog
   toolbar), so the tab bar needs its own base rules or it renders unstyled on desktop */
.when-seg{display:flex;background:var(--paper-2);border-radius:999px;padding:4px;gap:4px;margin:0 0 22px;max-width:340px}
.when-seg button{flex:1;min-height:44px;border:0;background:none;border-radius:999px;font-family:inherit;font-size:.92rem;font-weight:700;color:var(--ink-soft);cursor:pointer;transition:background .22s,color .22s}
.when-seg button.sel{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(10,36,30,.12)}
.month-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.month-chip{flex-direction:column;line-height:1.15;padding:.55em .4em;text-align:center;justify-content:center}
.month-chip small{display:block;font-size:.68rem;opacity:.6;font-weight:400;margin-top:1px}
.month-chip.sel small{opacity:.75}
/* the flexible row is a real answer, not a footnote: same card language as the pace choices */
.flex-row{display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:center;width:100%;margin-top:10px;padding:12px 14px;min-height:60px}
.flex-row .ic{grid-row:1/span 2;margin:0;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(15,122,108,.1)}
.flex-row .ic .gico{width:1.2rem;height:1.2rem}
.flex-row b{grid-column:2;align-self:end;font-size:.98rem;margin-bottom:1px}
.flex-row > span:last-child{grid-column:2;align-self:start;font-size:.84rem;line-height:1.3;color:var(--ink-soft)}
.date-row{display:flex;gap:12px}
.date-row .field{flex:1}
.date-row .field label{font-size:.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.date-note{margin-top:10px;font-size:.88rem;color:var(--ink-soft)}
.nights-row .val{width:74px;border:0;background:none;font-family:var(--font-display);font-size:1.4rem;text-align:center;color:var(--ink);padding:0}
.nights-row .val:focus{outline:2px solid var(--lake);outline-offset:3px;border-radius:6px}

/* the review form: was an inline style, which no class rule could override */
.builder-form{box-shadow:var(--shadow);max-width:none}

/* matched tours on review */
.match-list{display:flex;flex-direction:column;gap:14px;margin:6px 0 26px}
.match{display:flex;gap:16px;align-items:center;border:2px solid var(--line);border-radius:16px;padding:12px;cursor:pointer;background:var(--surface);transition:.2s}
.match:hover{border-color:var(--lake)}
.match.sel{border-color:var(--lake);background:rgba(18,122,111,.05)}
.match img{width:96px;height:72px;border-radius:10px;object-fit:cover;flex:none}
.match .mb b{display:block;font-size:1rem}
.match .mb span{font-size:.84rem;color:var(--ink-soft)}
.match .tick{margin-left:auto;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;color:transparent;font-weight:800;flex:none}
.match.sel .tick{background:var(--lake-fill);border-color:var(--lake);color:#fff}

@media(max-width:920px){
  .builder-grid{grid-template-columns:1fr}
  .summary-card{position:static;order:-1;margin-bottom:10px}
  .opt-cards,.interest-grid,.choice-cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .opt-cards,.interest-grid,.choice-cards{grid-template-columns:1fr 1fr}
  .choice-cards{grid-template-columns:1fr}
  .builder-wrap{padding-top:104px}
}

/* ============================================================
   PLAN YOUR TRIP (research hub)
   ============================================================ */
.jump-nav{position:sticky;top:68px;z-index:40;background:var(--bar-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.jump-nav .wrap{display:flex;gap:8px;overflow-x:auto;padding-top:12px;padding-bottom:12px;scrollbar-width:none}
.jump-nav .wrap::-webkit-scrollbar{display:none}
.jump-nav a{flex:none;font-size:.86rem;font-weight:600;color:var(--ink-soft);padding:.55em 1.05em;border-radius:999px;border:1px solid var(--line);background:var(--grad-surface);transition:.2s;white-space:nowrap}
.jump-nav a:hover{border-color:var(--lake);color:var(--lake)}

.guide-sec{scroll-margin-top:130px}
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.guide-sec h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:14px}
.guide-sec p{color:var(--ink-soft);margin-bottom:14px;max-width:62ch}
.guide-sec ul.ticks{list-style:none;display:flex;flex-direction:column;gap:10px;margin:6px 0 14px}
.guide-sec ul.ticks li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-soft);font-size:.96rem}
.guide-sec ul.ticks li::before{content:"✓";color:var(--lake);font-weight:800;flex:none}
.callout{background:var(--grad-surface);border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin:16px 0 2px;box-shadow:0 1px 2px rgba(12,40,36,.04)}
.callout b{display:block;margin-bottom:4px;color:var(--lake-deep)}
.callout p{margin:0;font-size:.92rem;color:var(--ink-soft)}

/* season table */
.season-table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);font-size:.9rem}
.season-table th,.season-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.season-table th{background:var(--paper-2);color:var(--ink-soft);font-weight:600;font-size:.82rem;letter-spacing:.03em;border-bottom:2px solid var(--line)}
.season-table tr:last-child td{border-bottom:0}
.season-table .s-best{background:rgba(25,167,147,.18);font-weight:700;color:var(--lake-deep)}
.season-table .s-ok{background:rgba(217,164,65,.16)}
.season-table .s-no{color:var(--ink-soft)}
.season-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:.84rem;color:var(--ink-soft)}
.season-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:middle}

/* plan-trip hero — light, compact, no photo */
body[data-page="plan"] .page-hero{background:var(--paper);color:var(--ink)}
body[data-page="plan"] .page-hero::after{display:none}
body[data-page="plan"] .page-hero .crumb,body[data-page="plan"] .page-hero .crumb a{color:var(--ink-soft)}
body[data-page="plan"] .page-hero .eyebrow{margin:0 0 10px;font-size:.78rem;max-width:none;color:var(--lake-deep)}
body[data-page="plan"] .page-hero h1{color:var(--ink);font-size:clamp(2rem,4vw,3rem);line-height:1.08}
body[data-page="plan"] .page-hero p{color:var(--ink-soft);max-width:52ch}
body[data-page="plan"] .plan-hero-cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}
body[data-page="plan"] .plan-hero-cta .btn-primary{flex:1;max-width:400px}
@media(min-width:681px){ body[data-page="plan"] .page-hero{padding:120px 0 44px} }

/* plan-trip: guide sections rendered as a FAQ accordion (reuses .faq-item/.faq-q/.faq-a + script.js) */
body[data-page="plan"] .plan-faq{max-width:760px;margin:0 auto}
body[data-page="plan"] .plan-faq .faq-item{scroll-margin-top:120px}
body[data-page="plan"] .plan-faq .faq-a{padding-bottom:24px}
body[data-page="plan"] .plan-faq .faq-a p{padding-bottom:0;margin:0 0 14px;font-size:1rem;max-width:64ch}
body[data-page="plan"] .plan-faq .faq-a .ticks{margin:0 0 6px}
body[data-page="plan"] .plan-faq .faq-a .ticks li{font-size:1rem}
body[data-page="plan"] .plan-faq .faq-note{font-size:.95rem;color:var(--ink-soft);background:var(--grad-surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:12px}
body[data-page="plan"] .plan-faq .faq-a .season-table{margin:4px 0 12px}
body[data-page="plan"] .plan-faq .faq-a .season-legend{margin-bottom:4px}

@media(max-width:820px){
  .guide-grid{grid-template-columns:1fr;gap:24px}
  .season-table{font-size:.8rem}
  .season-table th,.season-table td{padding:9px 8px}
}
/* season table -> one card per season on phones (readable, keeps the ideal/possible tints) */
@media(max-width:680px){
  .season-table{box-shadow:none;background:none;border-radius:0;font-size:1rem}
  .season-table thead{display:none}
  .season-table tbody,.season-table tr,.season-table td{display:block;width:auto}
  .season-table tr{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
  .season-table tr:last-child{margin-bottom:0}
  .season-table td{border-bottom:1px solid var(--line);padding:11px 14px;display:flex;justify-content:space-between;gap:14px;text-align:right}
  .season-table td:last-child{border-bottom:0}
  .season-table td::before{content:attr(data-label);color:var(--ink-soft);font-weight:600;text-align:left}
  .season-table td:first-child{font-size:1.05rem;font-weight:700;color:var(--ink);background:var(--paper-2);justify-content:flex-start}
  .season-table td:first-child::before{content:none}
  .season-table td.s-no:empty::after{content:"—";color:var(--ink-soft)}
}

/* ============================================================
   BLOG ARTICLE (prose)
   ============================================================ */
.article-hero{position:relative;color:#fff;overflow:hidden;padding:160px 0 56px}
.article-hero .bg{position:absolute;inset:0;z-index:-2}
.article-hero .bg img{width:100%;height:100%;object-fit:cover}
.article-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,30,26,.55),rgba(11,28,24,.9))}
.article-hero .wrap{max-width:820px}
.article-hero .tag{margin-bottom:14px}
.article-hero h1{font-size:clamp(2rem,4.5vw,3.4rem);max-width:20ch}
.byline{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:.9rem;color:rgba(255,255,255,.85)}
.byline img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.5)}
.byline .dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.5)}

.article{max-width:740px;margin:0 auto;padding:64px 24px 0}
.article .lead{font-size:1.25rem;line-height:1.6;color:var(--ink);font-family:var(--font-display);margin-bottom:28px}
.article p{font-size:1.06rem;line-height:1.75;color:var(--body-text);margin-bottom:20px}
.article p a,.article li a{color:var(--lake);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.article p a:hover,.article li a:hover{color:var(--lake-deep)}
.article h2{font-size:1.7rem;margin:42px 0 14px}
.article h3{font-size:1.25rem;margin:30px 0 10px}
.article ul,.article ol{margin:0 0 22px 1.1em;color:var(--body-text)}
.article li{font-size:1.04rem;line-height:1.7;margin-bottom:8px}
.article figure{margin:32px 0}
.article figure img{width:100%;border-radius:16px}
.article figcaption{font-size:.84rem;color:var(--ink-soft);text-align:center;margin-top:10px}
.article blockquote{margin:30px 0;padding:6px 0 6px 24px;border-left:4px solid var(--lake);font-family:var(--font-display);font-size:1.35rem;line-height:1.45;color:var(--ink)}
.article .tipbox{background:var(--paper-2);border-radius:14px;padding:20px 24px;margin:26px 0}
.article .tipbox b{display:block;margin-bottom:4px;color:var(--lake-deep)}
.article .tipbox p{margin:0;font-size:.98rem}

/* sell box at article end */
.sell-box{max-width:740px;margin:50px auto 0;background:var(--panel);color:var(--panel-text);border-radius:22px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.sell-box .im{position:relative;min-height:240px}
.sell-box .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sell-box .bd{padding:34px}
.sell-box .bd .eyebrow{color:var(--gold)}
.sell-box .bd h3{font-size:1.5rem;color:#fff;margin:10px 0 10px}
.sell-box .bd p{color:rgba(246,242,233,.8);font-size:.96rem;margin-bottom:20px}
.sell-box .bd .btns{display:flex;gap:10px;flex-wrap:wrap}

/* related / back */
.article-foot{max-width:740px;margin:0 auto;padding:40px 24px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.article-foot a{font-weight:600;color:var(--lake)}

/* blog category chips */
.blog-cats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.blog-cats .chip.active{background:var(--panel);color:var(--panel-text);border-color:var(--ink)}

@media(max-width:680px){
  .sell-box{grid-template-columns:1fr}
  .sell-box .im{min-height:180px}
}

/* ============================================================
   ON-SITE CHAT WIDGET
   ============================================================ */
.chat-fab{position:fixed;right:22px;bottom:22px;z-index:75;width:60px;height:60px;border-radius:50%;background:var(--lake-fill);color:#fff;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(18,122,111,.7);cursor:pointer;border:0;transition:transform .25s,opacity .25s}
.chat-fab:hover{transform:scale(1.07)}
.chat-fab.fab-hidden{opacity:0;pointer-events:none;transform:translateY(12px)}
.chat-fab svg{width:30px;height:30px}
.chat-fab .badge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;border-radius:10px;background:var(--clay);color:#fff;font-size:.72rem;font-weight:700;display:grid;place-items:center;padding:0 5px}
.chat-panel{position:fixed;right:22px;bottom:92px;z-index:76;width:360px;max-width:calc(100vw - 32px);height:520px;max-height:calc(100vh - 130px);background:var(--surface);border-radius:20px;box-shadow:0 30px 70px -24px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;transition:opacity .25s,transform .25s}
.chat-panel.open{opacity:1;transform:none;pointer-events:auto}
.chat-head{background:var(--panel);color:var(--panel-text);padding:16px 18px;display:flex;align-items:center;gap:12px}
.chat-head .av{width:40px;height:40px;border-radius:50%;background:var(--lake-fill);display:grid;place-items:center;font-size:1.2rem;flex:none}
.chat-head b{display:block;font-size:.98rem}
.chat-head span{font-size:.78rem;color:rgba(246,242,233,.7)}
.chat-head .x{margin-left:auto;background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer;line-height:1;opacity:.8;flex:none;width:44px;height:44px;display:grid;place-items:center;margin-right:-10px}
.chat-head .x:hover{opacity:1}
.chat-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.chat-msg{max-width:80%;padding:10px 14px;border-radius:16px;font-size:.92rem;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.chat-msg.owner{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:5px}
.chat-msg.user{align-self:flex-end;background:var(--lake-fill);color:#fff;border-bottom-right-radius:5px}
.chat-msg.sys{align-self:center;background:var(--paper-2);color:var(--ink-soft);font-size:.84rem;text-align:center;max-width:90%}
.chat-wa{display:flex;align-items:center;justify-content:center;gap:.4em;font-size:.82rem;color:#128C42;font-weight:600;padding:8px;border-top:1px solid var(--line);background:var(--surface)}
.chat-wa:hover{background:#f3fbf6}
.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--surface)}
.chat-input input{flex:1;border:1.5px solid var(--line);border-radius:12px;padding:.65em .85em;font:inherit;font-size:.92rem;outline:none}
.chat-input input:focus,.chat-email input:focus{border-color:var(--lake);box-shadow:0 0 0 3px rgba(18,122,111,.15)}
.chat-input button{flex:none;width:44px;border:0;border-radius:12px;background:var(--lake-fill);color:#fff;font-size:1.1rem;cursor:pointer}
.chat-input button:disabled{opacity:.5}
.chat-email{padding:10px 12px;border-top:1px solid var(--line);background:var(--paper-2);display:flex;gap:8px}
.chat-email input{flex:1;border:1.5px solid var(--line);border-radius:10px;padding:.55em .8em;font:inherit;font-size:.86rem;outline:none}
.chat-email button{border:0;border-radius:10px;background:var(--panel);color:var(--panel-text);font-size:.84rem;font-weight:600;padding:0 12px;cursor:pointer}
/* proactive nudge bubble (from founder) + pulsing launcher */
.chat-nudge{position:fixed;right:22px;bottom:96px;z-index:75;max-width:262px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 44px -16px rgba(0,0,0,.45);padding:13px 30px 13px 13px;display:flex;gap:11px;align-items:flex-start;font-family:var(--font-body);opacity:0;transform:translateY(8px) scale(.97);pointer-events:none;transition:opacity .3s,transform .3s}
.chat-nudge.show{opacity:1;transform:none;pointer-events:auto;cursor:pointer}
.chat-nudge::after{content:'';position:absolute;right:30px;bottom:-7px;width:14px;height:14px;background:var(--surface);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.chat-nudge-av{flex:none;width:36px;height:36px;border-radius:50%;background:var(--lake-fill);color:#fff;display:grid;place-items:center}
.chat-nudge-av svg{width:21px;height:21px}
.chat-nudge-text b{display:block;font-size:.9rem;line-height:1.2;margin-bottom:2px}
.chat-nudge-text span{font-size:.82rem;line-height:1.4;color:var(--ink-soft)}
.chat-nudge-x{position:absolute;top:5px;right:8px;background:none;border:0;color:var(--ink-soft);font-size:1.15rem;line-height:1;cursor:pointer;opacity:.6;padding:2px}
.chat-nudge-x:hover{opacity:1}
.chat-fab.nudging::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(18,122,111,.5);animation:chatpulse 2.2s ease-out infinite;pointer-events:none}
@keyframes chatpulse{to{box-shadow:0 0 0 16px rgba(18,122,111,0)}}
@media(max-width:680px){
  /* ---------- chat = full-screen sheet (same language as .filter-sheet) ---------- */
  .chat-panel{
    left:0;right:0;bottom:0;width:auto;max-width:none;max-height:none;z-index:130;
    height:100vh;            /* fallback for browsers without svh */
    height:100svh;           /* small viewport: never clipped by the Safari URL bar */
    border-radius:22px 22px 0 0;
    box-shadow:0 -18px 50px -20px rgba(0,0,0,.5);
    opacity:1;transform:translateY(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    overscroll-behavior:none;touch-action:none   /* nothing but the transcript may move */
  }
  .chat-panel.open{transform:none}
  /* keyboard-aware geometry; chat.js adds .vv only after it has written both vars,
     so the height fallback chain above stays intact when visualViewport is missing */
  .chat-panel.vv{top:var(--chat-top);height:var(--chat-h)}
  /* grab handle without an extra DOM node */
  .chat-head{position:relative;padding:18px 14px 14px 16px}
  .chat-head::before{content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:38px;height:4px;border-radius:2px;background:rgba(246,242,233,.32)}
  .chat-body{padding:16px;gap:12px;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}
  .chat-msg{max-width:86%}
  .chat-wa{min-height:44px;padding:11px 8px}
  .chat-input{gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))}
  .chat-input input{padding:.72em .9em;border-radius:14px}
  .chat-input button{width:48px;min-height:48px;border-radius:14px}
  .chat-email{padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))}
  .chat-email button{min-height:44px;padding:0 16px}
  /* iOS Safari / IG in-app WebView zoom the whole page when a focused field is under 16px */
  .chat-input input,.chat-email input{font-size:16px}
  /* same fix for the real forms (lead on home, contact, tour) — base is .95rem */
  .field input,.field select,.field textarea{font-size:16px}
  /* new body-text elements respect the 16px mobile floor */
  .variant-row,.catalog-note p{font-size:1rem}
  .chat-fab{bottom:34px}
  .chat-nudge{bottom:162px;max-width:calc(100vw - 44px)}
  /* Scroll lock under the sheet. Deliberately NOT position:fixed and NOT overflow:hidden on
     <html>: both take the page out of flow, the document height collapses to one screen, and the
     browser then clamps the scroll position, so closing the chat dumped the reader near the top.
     Touch dragging is blocked by touch-action above plus the touchmove barrier in chat.js. */
  body.chat-locked{overflow:hidden;touch-action:none}
}
@media(max-width:680px) and (prefers-reduced-motion:reduce){
  .chat-panel{transition:none}
}
@media(prefers-reduced-motion:reduce){
  .chat-nudge{transition:none}
  .chat-fab.nudging::after{animation:none}
}

/* ============================================================
   SVG ICONS (replacing emojis) + REFINED TOUR CARDS
   ============================================================ */
.gico{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.18em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gicf{width:1.1em;height:1.1em;display:inline-block;vertical-align:-.15em;flex:none}
/* icon tiles get a teal accent + fixed size */
.why-ic .gico{width:1.55rem;height:1.55rem;color:var(--lake)}
.choice .ic .gico{width:1.7rem;height:1.7rem;color:var(--lake)}
.cmethod .ic .gico{width:1.4rem;height:1.4rem;color:var(--lake)}
.hl .ic .gico{width:1.3rem;height:1.3rem;color:var(--lake)}
.callout .gico,.tipbox .gico{color:var(--lake)}
.rev-badge .src .gico{width:1.1rem;height:1.1rem;color:var(--lake)}
.chat-head .av .gico{width:1.4rem;height:1.4rem;color:#fff}
.form-success .big .gico{width:2.6rem;height:2.6rem;color:var(--lake)}
.lead-points .tick .gico{width:.95rem;height:.95rem;color:#06251f;stroke-width:2.4}
.factbar .gico,.tl-q .meta .gico{opacity:.85}

/* refined, fully-clickable tour cards */
.tour{color:inherit;text-decoration:none}
.tour-dur{position:absolute;left:14px;bottom:14px;background:rgba(18,28,24,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;font-size:.76rem;font-weight:600;letter-spacing:.01em;padding:.4em .85em;border-radius:999px}
.tour-tag{font-size:.8rem;color:var(--ink-soft);font-weight:600}
.tour-cta{display:inline-flex;align-items:center;gap:.4em;color:var(--lake);font-weight:600;font-size:.92rem}
.tour h3{transition:color .2s}
.tour:hover h3{color:var(--lake-deep)}

/* ============================================================
   THEME TOGGLE + DARK-MODE TOUCH-UPS
   ============================================================ */
.theme-toggle{background:none;border:0;cursor:pointer;color:inherit;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;transition:background .2s;flex:none}
.theme-toggle:hover{background:rgba(127,127,127,.15)}
.theme-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .sun{display:none}
.theme-toggle .moon{display:block}
[data-theme="dark"] .theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:block}
.nav-links .theme-toggle{color:#fff}
header.scrolled .nav-links .theme-toggle,header.solid .nav-links .theme-toggle{color:var(--ink)}
.mobile-menu .top .theme-toggle{color:#fff}

/* readability fixes in dark */
.chat-input input,.chat-email input{background:var(--surface-2);color:var(--ink)}
.chat-input input::placeholder,.chat-email input::placeholder{color:var(--ink-soft)}
[data-theme="dark"] .form-err{color:#D9705A}   /* the light-theme red is 3.96:1 on this surface */
[data-theme="dark"] .tour-badge{background:rgba(18,26,22,.82);color:#fff}
[data-theme="dark"] .field input::placeholder,[data-theme="dark"] .field textarea::placeholder{color:var(--ink-soft)}
[data-theme="dark"] .stat span,[data-theme="dark"] footer{color:rgba(237,240,236,.72)}
[data-theme="dark"] .btn-dark{background:var(--surface-2);color:var(--ink)}
[data-theme="dark"] .exp-card .cap,[data-theme="dark"] .tour-dur{color:#fff}

/* active filter chip = clear teal in both themes */
.chip.active{background:var(--lake-fill);color:#fff;border-color:var(--lake)}


/* ============================================================
   MOBILE REDESIGN (native patterns) — desktop untouched
   ============================================================ */
.mfilter-btn{display:none}
.filter-sheet{display:none}
.mtoolbar{display:none}        /* mobile-only catalog toolbar (Sort + Filters) */
.msort-menu{display:none}
.tour-meta{display:none}       /* compact card meta chips — shown on mobile only */

@media(max-width:680px){
  /* tighter gutters on phones */
  .wrap{padding:0 18px}

  /* ---------- catalog: Sort + Filters toolbar + bottom-sheet (category row removed) ---------- */
  #filterBar{display:none !important}                 /* old swipe category row removed (Variant A) */
  body[data-page="tours"] .catalog-main > .eyebrow{display:none}   /* count moved into the toolbar */
  .mtoolbar{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:2px 0 22px}
  .mcount{font-size:.88rem;font-weight:600;color:var(--ink-soft)}   /* live "N tours" */
  /* visible sort segment (Recommended / Shortest / Longest) */
  .msort-seg{display:flex;background:var(--paper-2);border-radius:999px;padding:4px;gap:4px}
  .msort-seg button{flex:1;min-height:44px;border:0;background:none;border-radius:999px;font-family:inherit;font-size:.85rem;font-weight:700;color:var(--ink-soft);cursor:pointer;transition:background .22s,color .22s}
  .msort-seg button.sel{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(10,36,30,.12)}
  .mfilter-btn{width:100%}
  .mfilter-btn .dfb-ic{width:18px;height:18px;flex:none}
  .mtb-actions{display:flex;align-items:center;gap:10px}
  .msort-wrap{position:relative;flex:none}
  .msort,.mfilter-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border:0;background:var(--grad-surface);box-shadow:0 1px 2px rgba(12,40,36,.05),0 0 0 1px var(--line);border-radius:999px;padding:.5em 1.15em;font-family:inherit;font-size:.9rem;font-weight:600;line-height:1;color:var(--ink);cursor:pointer;transition:box-shadow .22s,color .22s}
  .mfilter-btn{margin:0}                                      /* sits right next to Sort */
  .msort-ic{width:16px;height:16px;flex:none}
  .mfilter-btn.has{box-shadow:0 1px 2px rgba(12,40,36,.05),0 0 0 1px var(--lake);color:var(--lake)}
  .mfilter-badge{background:var(--lake-fill);color:#fff;border-radius:999px;min-width:18px;height:18px;display:inline-grid;place-items:center;font-size:.7rem;padding:0 5px}
  .mfilter-badge[hidden]{display:none}                        /* hide the count at 0 (display override beats [hidden]) */
  .msort-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:70;min-width:172px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;padding:5px}
  .msort-menu.open{display:block}
  .msort-menu button{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;font-size:.9rem;color:var(--ink);padding:.75em .7em;min-height:44px;border-radius:9px;cursor:pointer}
  .msort-menu button:hover{background:var(--paper-2)}
  .msort-menu button.sel{color:var(--lake);font-weight:600}

  .filter-sheet{display:block;position:fixed;inset:0;z-index:120}
  .fs-backdrop{position:absolute;inset:0;background:rgba(8,12,11,.5);opacity:0;transition:opacity .3s}
  .fs-panel{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(18,122,111,.12),transparent 140px),var(--surface);color:var(--ink);border-radius:20px 20px 0 0;max-height:86vh;max-height:86svh;display:flex;flex-direction:column;transform:translateY(101%);transition:transform .34s cubic-bezier(.4,0,.2,1)}
  .filter-sheet:not(.open){pointer-events:none}
  .filter-sheet.open .fs-backdrop{opacity:1}
  .filter-sheet.open .fs-panel{transform:none}
  .fs-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 4px}
  .fs-head b{font-size:1.1rem}
  .fs-x{background:none;border:0;font-size:1.9rem;line-height:1;color:var(--ink-soft);cursor:pointer;width:44px;height:44px;display:grid;place-items:center;margin:-6px -8px -6px 0}
  .fs-body{overflow-y:auto;padding:6px 20px 14px}
  .fs-group{margin-top:14px}
  .fs-gtitle{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);margin-bottom:10px}
  .fs-chips{display:flex;flex-wrap:wrap;gap:10px}
  .fs-chips .chip{min-height:44px;display:inline-flex;align-items:center}   /* comfortable touch targets in the sheet */
  .fs-foot{display:flex;gap:12px;padding:14px 20px;background-image:var(--hairline);background-repeat:no-repeat;background-position:top;background-size:100% 1px}
  .fs-clear{flex:0 0 auto;border:0;background:var(--grad-surface);box-shadow:0 1px 2px rgba(12,40,36,.05),0 0 0 1px var(--line);border-radius:999px;padding:.7em 1.3em;font-family:inherit;font-size:.9rem;font-weight:600;color:var(--ink);cursor:pointer}
  .fs-show{flex:1;justify-content:center}

  /* ---------- catalog tour card: clean list-row ---------- */
  .tours-grid{gap:14px}
  .tour{flex-direction:row;align-items:stretch;border-radius:16px}
  .tour-img{flex:0 0 38%;max-width:128px;min-width:108px;aspect-ratio:1/1}
  .tour-body{padding:12px 14px;justify-content:center}
  .tour h3{font-size:1.04rem;margin-bottom:5px;line-height:1.25}
  .tour ul,.tour-hook,.tour-blurb{display:none}   /* mobile: long description hidden (separate task) */
  .tour-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}   /* compact meta chips for quick comparison */
  .tour-meta .tm{font-size:.66rem;padding:2px 8px;border-radius:6px;background:var(--paper-2);color:var(--ink-soft);white-space:nowrap}
  .tour-meta .tm-cat{background:rgba(18,122,111,.12);color:var(--lake-deep);font-weight:600}
  [data-theme="dark"] .tour-meta .tm-cat{color:var(--lake-bright)}   /* bright teal on dark tint passes 4.5:1 */
  .tour .tour-dur{display:none}                  /* duration is now a meta chip */
  .tour-foot .tour-tag{display:none}             /* pace is now a meta chip */
  .tour-foot{padding-top:8px;margin-top:6px}
  .tour-foot a{font-size:.85rem}
  .tour-badge{top:8px;left:8px;font-size:.58rem;padding:.3em .55em}

  /* ---------- homepage card rows → swipe carousels ---------- */
  #featuredGrid,.exp-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:14px;margin:0 -18px;padding:0 18px 10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  #featuredGrid::-webkit-scrollbar,.exp-grid::-webkit-scrollbar{display:none}
  #revTrack{margin:0 -18px;padding:0 18px 8px}
  /* featured tours: full vertical cards in the carousel */
  #featuredGrid .tour{flex:0 0 80%;scroll-snap-align:start;flex-direction:column;border-radius:18px}
  #featuredGrid .tour-img{flex:none;max-width:none;aspect-ratio:16/10}
  #featuredGrid .tour-foot{border-top:1px solid var(--line);padding-top:14px}
  /* experiences tiles */
  .exp-grid{grid-auto-rows:initial}
  .exp-grid .exp-card{flex:0 0 74%;scroll-snap-align:start;height:200px}
  /* carousels force overflow-y:auto (clips vertically) — drop the reveal's vertical
     slide so cards fade in without bobbing/cropping inside the scroller. Keep opacity. */
  #featuredGrid .reveal,.exp-grid .reveal{transform:none}

  /* modern primary CTA on mobile (owner-picked "Aurora", no arrows): soft mint->teal
     glow layered on the teal fill + a comfortable 54px tap height on EVERY primary
     button. Full-width only where the button stands alone (catalog hero + forms),
     so two-button CTA rows (hero, dark CTAs) stay intact. */
  .btn-primary{min-height:54px;justify-content:center;
    background:
      radial-gradient(120% 140% at 12% -20%,rgba(47,202,178,.5),transparent 55%),
      radial-gradient(120% 160% at 100% 120%,rgba(11,90,80,.55),transparent 55%),
      var(--lake-fill);
    box-shadow:0 14px 30px -14px rgba(15,122,108,.6),0 4px 10px -4px rgba(10,36,30,.25)}
  body[data-page="tours"] .page-hero .btn-primary{width:100%}   /* catalog: solo Build goes full-width */

  /* ---------- hero ---------- */
  .hero-actions{gap:10px}   /* row of two pills, as on the approved kino-panel mockup; ghost "Browse tours" is back since the bottom bar is gone */
  .hero-trust{gap:8px 14px;font-size:.82rem}
  .scroll-hint{display:none} /* no full-viewport hero on phones anymore */

  /* ---------- forms ---------- */
  .form-card{padding:22px 18px}


  /* ---------- breakpoint fixes (were stacking too late) ---------- */
  .blog-feature{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr;gap:18px}
  .opt-cards,.interest-grid,.choice-cards{grid-template-columns:1fr}
  .opt-card .im{aspect-ratio:16/9}
  /* iOS Safari zooms the page when a focused field is under 16px. Scoped to the builder on
     purpose: the owner chose to leave the lead and contact forms as they are for now. */
  .builder-wrap .field input,.builder-wrap .field select,.builder-wrap .field textarea{font-size:16px}
}

/* ============================================================
   TRIP BUILDER — mobile step screen (этап 8, owner-approved mockup: variant A + A2)
   Must stay AFTER the block above, which forces one-column grids on .opt-cards/.interest-grid.
   Everything here is builder-scoped; .form-card and .tick are shared atoms, so they are
   always prefixed. Desktop is untouched.
   ============================================================ */
@media(max-width:680px){
  /* --- shell: 18px gutter like the rest of the site, clear of the shared 87px header,
     plus room for the pinned action bar --- */
  .builder-wrap{padding:83px 18px calc(104px + env(safe-area-inset-bottom,0px))}
  #stepArea{scroll-margin-top:108px}

  /* --- progress: sticky right under the shared header, three states that differ by width
     AND height, not colour alone --- */
  .steps-bar{position:sticky;top:71px;z-index:55;gap:6px;margin:0 -18px 14px;padding:12px 18px;background:var(--bar-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .steps-bar .sstep{height:4px;background:var(--paper-2)}
  .steps-bar .sstep.done{background:var(--lake-fill)}
  .steps-bar .sstep.active{flex:1.7;height:6px;margin:-1px 0;background:linear-gradient(90deg,var(--lake),var(--lake-bright));box-shadow:0 0 0 3px rgba(15,122,108,.14)}

  /* --- question block --- */
  .step-label{font-size:.72rem;margin-bottom:6px}
  .step-h{font-size:1.45rem;line-height:1.18;margin-bottom:6px}
  .step-sub{font-size:.92rem;line-height:1.45;margin-bottom:18px}
  .field-group{margin-bottom:22px}
  .field-group > label{font-size:.95rem;margin-bottom:10px}

  /* --- step 1: styles as list rows (the shape already shipped for the mobile catalog card) --- */
  .opt-cards{grid-template-columns:1fr;gap:10px}
  .opt-card{flex-direction:row;align-items:center;gap:12px;padding:8px;border:0;border-radius:16px;background:var(--grad-surface);box-shadow:0 1px 2px rgba(12,40,36,.05),0 0 0 1px var(--line);transition:box-shadow .22s}
  .opt-card:hover{transform:none}
  .opt-card.sel{box-shadow:0 1px 2px rgba(12,40,36,.05),0 0 0 2px var(--lake),0 10px 24px -16px rgba(15,122,108,.55)}
  /* 6 rows x 70px fit one screen, so the list needs no scrolling at all and the
     scroll-versus-tap problem disappears instead of being softened. Material puts a
     two-line list item at 56-72px; 70px is still 1.6x the 44px minimum tap target. */
  .opt-card .im{width:54px;height:54px;flex:none;aspect-ratio:auto;border-radius:11px}
  .opt-card .im::after{display:none}
  .opt-card .tx{padding:0;min-width:0}
  .opt-card .tx b{font-size:.98rem;margin-bottom:0;line-height:1.2}
  .opt-card .tx span{display:block;font-size:.82rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* single-select reads as a radio dot on the left, not a checkbox tick on the right, and the
     selected row also gets a heavier title, so state never rests on colour alone */
  .opt-card .tick{position:static;order:-1;margin:0;flex:none;width:22px;height:22px;border:0;background:none;box-shadow:inset 0 0 0 2px var(--line);color:transparent}
  .opt-card.sel .tick{box-shadow:inset 0 0 0 7px var(--lake)}
  .opt-card.sel .tick .gico{display:none}
  .opt-card.sel .tx b{font-weight:700}

  /* --- step 2: chips on the Soft Alpine pill recipe + full-width steppers --- */
  .b-chips{gap:8px}
  .b-chip{border:0;min-height:44px;display:inline-flex;align-items:center;padding:.6em 1.1em;font-size:.92rem;background:var(--grad-surface);box-shadow:0 1px 2px rgba(12,40,36,.05),0 0 0 1px var(--line);transition:box-shadow .22s,background .22s,color .22s}
  .b-chip.sel{background:var(--lake-fill);color:#fff;box-shadow:0 1px 2px rgba(12,40,36,.05),0 0 0 1px var(--lake)}
  .steppers{flex-direction:column;gap:10px}
  .stepper{justify-content:space-between;gap:12px;min-height:62px;padding:8px 14px;border-radius:16px;background:var(--grad-surface);box-shadow:0 1px 2px rgba(12,40,36,.05),0 0 0 1px var(--line)}
  .stepper button{border:0;background:var(--surface);box-shadow:0 1px 2px rgba(12,40,36,.06),0 0 0 1px var(--line)}

  /* validation ring has to survive border:0, otherwise the step check goes silent on mobile */
  .needs-pick .opt-card,.needs-pick .b-chip{box-shadow:0 1px 2px rgba(12,40,36,.05),0 0 0 1.5px var(--clay)}

  /* --- step 2 dates on mobile --- */
  .when-seg{margin-bottom:18px}
  .when-seg button{min-height:44px;font-size:.9rem}
  .month-grid{gap:7px}
  .month-chip{min-height:52px;padding:.45em .3em;font-size:.9rem}
  .month-chip small{font-size:.62rem}
  .flex-row{min-height:58px;padding:11px 13px}
  .date-row{gap:10px}
  .nights-row .val{width:64px;font-size:1.3rem}

  /* --- step 3: interests two-up (this is what the one-column rule above cost: 2385px) --- */
  .interest-grid{grid-template-columns:1fr 1fr;gap:10px}
  .int-card{aspect-ratio:4/3;border:0;border-radius:14px;box-shadow:0 1px 2px rgba(12,40,36,.05),0 0 0 1px var(--line)}
  .int-card.sel{box-shadow:0 0 0 2px var(--lake),0 10px 24px -16px rgba(15,122,108,.55)}
  .int-card .cap{padding:10px;font-size:.84rem;line-height:1.2}
  .int-card .tick{width:24px;height:24px}

  /* --- step 4: pace & comfort as rows, in the .fs-sortrow rhythm --- */
  .choice-cards{grid-template-columns:1fr;gap:8px}
  .choice{display:grid;grid-template-columns:36px 1fr;column-gap:12px;align-items:center;min-height:64px;padding:12px 14px;border:0;border-radius:16px;background:var(--grad-surface);box-shadow:0 1px 2px rgba(12,40,36,.05),0 0 0 1px var(--line)}
  .choice.sel{background:var(--grad-surface);box-shadow:0 1px 2px rgba(12,40,36,.05),0 0 0 2px var(--lake)}
  .choice .ic{grid-row:1/span 2;margin:0;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:rgba(15,122,108,.10)}
  .choice .ic .gico{width:1.25rem;height:1.25rem}
  .choice b{grid-column:2;align-self:end;font-size:.98rem;margin-bottom:1px}
  .choice > span:last-child{grid-column:2;align-self:start;font-size:.84rem;line-height:1.3}

  /* --- step 5: matches + form on the aurora panel recipe --- */
  .match{border:0;gap:12px;padding:10px;border-radius:16px;background:var(--grad-surface);box-shadow:0 1px 2px rgba(12,40,36,.05),0 0 0 1px var(--line)}
  .match.sel{background:var(--grad-surface);box-shadow:0 1px 2px rgba(12,40,36,.05),0 0 0 2px var(--lake)}
  .match img{width:76px;height:60px;border-radius:12px}
  .match .mb b{font-size:.96rem;line-height:1.25}
  .match .mb span{font-size:.8rem}
  .match .tick{border:0;box-shadow:inset 0 0 0 2px var(--line)}
  .match.sel .tick{box-shadow:none}
  .builder-wrap .form-card{border-radius:20px;padding:20px 16px;background:var(--aurora),var(--grad-surface)}

  /* --- summary becomes a receipt that grows: empty rows are hidden --- */
  .builder-grid > aside{margin-top:22px}
  .summary-card{border:0;border-radius:20px;padding:18px;background:var(--aurora),var(--grad-surface);box-shadow:var(--soft-shadow)}
  .summary-card h3{font-size:1.02rem}
  .summary-card .muted{margin-bottom:10px}
  .sum-row{border-top:0;background-image:var(--hairline);background-repeat:no-repeat;background-position:top;background-size:100% 1px;padding:9px 0;font-size:.88rem}
  .sum-row:has(.v.empty){display:none}
  .summary-card .btn-primary{min-height:44px;background:none;color:var(--lake);box-shadow:inset 0 0 0 1px var(--line)}

  /* --- the SAME .builder-nav, moved into the thumb zone --- */
  .builder-nav{position:fixed;left:0;right:0;bottom:0;z-index:65;margin:0;padding:10px 18px calc(10px + env(safe-area-inset-bottom,0px));border-top:0;flex-wrap:wrap;align-items:center;gap:10px;background:radial-gradient(120% 140% at 20% 0%,rgba(15,122,108,.14),transparent 60%),radial-gradient(120% 140% at 100% 0%,rgba(232,166,61,.10),transparent 60%),var(--bar-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 -10px 30px -18px rgba(10,36,30,.45)}
  .builder-nav .btn-ghost{flex:none;min-height:54px;padding:0 18px;border:0;background:var(--grad-surface);box-shadow:0 1px 2px rgba(12,40,36,.05),0 0 0 1px var(--line)}
  .builder-nav .btn-ghost[disabled]{display:none}   /* step 1 has no Back to offer: Continue takes the row */
  .builder-nav .btn-primary{flex:1;justify-content:center}
  .builder-nav .skip{order:-1;width:100%;min-height:40px;text-align:center}
  /* The bar is fixed, so whatever ends the page sits under it. Since nav.js appends the shared
     footer after the flow, the clearance belongs there rather than on .builder-wrap, and it has to
     cover the tallest state of the bar (the Skip row adds ~50px). */
  body[data-page="builder"] footer{padding-bottom:calc(140px + env(safe-area-inset-bottom,0px))}
  /* a soft fade above the bar reads as "there is more below" instead of a hard cut */
  .builder-nav::before{content:'';position:absolute;left:0;right:0;top:-26px;height:26px;pointer-events:none;background:linear-gradient(to top,var(--paper),transparent)}
  /* last step: unpin, so the bar never competes with the form's own submit */
  body[data-step="3"] .builder-nav{position:static;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;margin-top:22px}
  body[data-step="3"] .builder-wrap{padding-bottom:36px}

  /* --- floating buttons: chat clears the bar, WhatsApp steps aside (owner: A2).
     chat.js appends both as body siblings after main.builder-wrap, so no HTML change is needed.
     WhatsApp stays reachable inside the chat and as the link on the last step. --- */
  .builder-wrap ~ .chat-fab{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .builder-wrap ~ .float-wa{display:none}
  .builder-wrap ~ .chat-nudge{bottom:calc(156px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:680px) and (prefers-reduced-motion:reduce){
  .opt-card,.int-card,.choice,.b-chip,.builder-nav .btn{transition:none}
}

/* short phones (iPhone SE 667px): smaller photo band so headline + CTAs fit the first screen */
@media (max-width:680px) and (max-height:720px){
  .hero-bg{height:min(48svh,330px);min-height:250px}
  .hero h1{font-size:clamp(1.6rem,7vw,2rem)}
  .hero p.lead{font-size:.92rem;margin-top:10px}
  .hero .hero-inner{padding-top:18px;padding-bottom:26px}
  .hero-actions{margin-top:16px}
}

/* ===== Пачка 4: мобильный каталог v2 (утверждён на мокапе p4v2) + футер-тапы ===== */
/* sort rows inside the filter sheet (big touch targets, radio look) */
.fs-sort{display:flex;flex-direction:column}
.fs-sortrow{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:48px;padding:12px 2px;background:none;border:0;border-bottom:1px solid rgba(16,32,28,.07);font-family:var(--font-body);font-size:.98rem;font-weight:600;color:var(--ink);cursor:pointer;text-align:left}
.fs-sortrow:last-child{border-bottom:0}
.fs-sortrow .r{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;transition:border .2s;box-sizing:border-box}
.fs-sortrow.sel .r{border:7px solid var(--lake)}
[data-theme="dark"] .fs-sortrow{border-bottom-color:rgba(237,240,236,.08)}

@media (max-width:680px){
  /* catalog page head: light, no decorative photo band (owner: "быстрее к турам") */
  body[data-page="tours"] .page-hero{background:var(--paper);color:var(--ink);padding:92px 0 2px}
  body[data-page="tours"] .page-hero .bg{display:none}
  body[data-page="tours"] .page-hero::after{display:none}
  body[data-page="tours"] .page-hero .crumb,body[data-page="tours"] .page-hero p{color:var(--ink-soft)}
  body[data-page="tours"] .page-hero .crumb a{color:var(--ink-soft)}

  /* one big Filters & sort button, count line below it */
  .mtoolbar{gap:10px;margin:6px 0 18px}   /* column layout + order inherited from the <=680 block */
  .mfilter-btn{width:100%;padding:15px;font-size:1rem;font-weight:700;gap:10px}
  .mfilter-badge{background:var(--lake-fill);min-width:24px;height:20px;font-size:.74rem}

  /* big catalog cards: full-width photo, badges on the photo (approved mockup) */
  body[data-page="tours"] #toursGrid .tour{flex-direction:column;border-radius:20px}
  body[data-page="tours"] #toursGrid .tour-img{flex:none;max-width:none;min-width:0;aspect-ratio:16/10}
  body[data-page="tours"] #toursGrid .tour-body{padding:15px 17px;justify-content:flex-start}

  .socials a{width:44px;height:44px}   /* comfortable tap target for the footer Instagram icon */
}

/* mobile category chip strip removed (owner, 2026-07-10): the same Type filter
   lives inside the "Filters & sort" sheet; #filterBar stays hidden at <=680px
   via the display:none rule above. Desktop uses .dcats, untouched. */