/* ==========================================================================
   Shivanshi Tours and Travels — Jagdalpur, Bastar
   Palette sampled from the printed business card.
   Plain CSS, mobile-first, no external fonts or stylesheets.
   ========================================================================== */

:root{
  --navy-900:#0A1421;   /* card background, page background */
  --navy-800:#12233A;   /* section background alt */
  --navy-700:#23354A;   /* card surfaces, borders */
  --gold-500:#D4AB5E;   /* primary accent, buttons, rules */
  --gold-400:#EACB74;   /* hover, highlights */
  --gold-200:#EDDFA3;   /* gold body text on navy */
  --white:#FBFCF9;      /* headings on navy */
  --muted:#A9B4C2;      /* secondary text */
  --wa-green:#25D366;   /* WhatsApp only — nowhere else */

  --head-font:"Arial Narrow","Helvetica Neue Condensed",Impact,system-ui,sans-serif;
  --body-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --wrap:1160px;
  --gutter:16px;
  --radius:12px;
  --shadow:0 10px 28px rgba(0,0,0,.35);
  --focus:3px solid var(--gold-400);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
a, button, summary, [role="button"]{ -webkit-tap-highlight-color:rgba(212,171,94,.22); }
body{
  margin:0;
  background:var(--navy-900);
  color:var(--muted);
  font-family:var(--body-font);
  font-size:17px;
  line-height:1.6;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:var(--gold-200);}
h1,h2,h3{
  font-family:var(--head-font);
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--white);
  line-height:1.15;
  margin:0;
  font-weight:700;
}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}

/* ---------- focus ---------- */
:focus{ outline:var(--focus); outline-offset:3px; }
:focus:not(:focus-visible){ outline:none; }
:focus-visible{ outline:var(--focus); outline-offset:3px; border-radius:4px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold-500); color:var(--navy-900);
  padding:12px 18px; font-weight:700; text-decoration:none;
  border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.wrap-narrow{ max-width:760px; }

/* keeps a jumped-to section clear of the 66px sticky header when the JS
   smooth-scroll is not running (JS off, or an engine without ScrollToOptions) */
[id]{ scroll-margin-top:76px; }

.section{ padding:56px 0; }
.section-alt{ background:var(--navy-800); }

.kicker{
  font-family:var(--head-font); text-transform:uppercase; letter-spacing:.22em;
  font-size:.78rem; color:var(--gold-500); margin:0 0 6px;
}
.section-title{ font-size:2rem; font-size:clamp(1.65rem,6vw,2.4rem); }
.rule{ width:72px; height:3px; background:var(--gold-500); margin:14px 0 22px; }
.section-lede{ max-width:62ch; margin-bottom:30px; }

.grid{ display:grid; gap:18px; }
.grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:12px 20px;
  font-family:var(--head-font); text-transform:uppercase; letter-spacing:.08em;
  font-size:1rem; font-weight:700; text-decoration:none; cursor:pointer;
  border-radius:8px; border:2px solid transparent; text-align:center;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-sm{ min-height:42px; padding:9px 15px; font-size:.92rem; }
.btn-lg{ min-height:54px; padding:14px 24px; font-size:1.05rem; }

.btn-gold{ background:var(--gold-500); color:var(--navy-900); border-color:var(--gold-500); }
.btn-gold:hover{ background:var(--gold-400); border-color:var(--gold-400); }

.btn-gold-outline{ background:transparent; color:var(--gold-200); border-color:var(--gold-500); }
.btn-gold-outline:hover{ background:rgba(212,171,94,.14); color:var(--gold-400); }

.btn-wa{ background:var(--wa-green); color:#07210F; border-color:var(--wa-green); }
.btn-wa:hover{ background:#1FBC5B; border-color:#1FBC5B; }

.ico{ width:20px; height:20px; fill:currentColor; flex:0 0 auto; }
.ico-inline{ width:18px; height:18px; vertical-align:-3px; fill:var(--gold-500); margin-right:6px; }

/* ---------- header ---------- */
.site-header{
  position:-webkit-sticky;   /* iOS 12 */
  position:sticky; top:0; z-index:100;
  background:rgba(10,20,33,.96);
  border-bottom:1px solid var(--navy-700);
}
.header-inner{ display:flex; align-items:center; gap:12px; min-height:66px; }

.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.brand-logo{
  width:auto; height:42px; background:#fff;
  border-radius:8px; padding:3px 5px; flex:0 0 auto;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{
  font-family:var(--head-font); text-transform:uppercase; letter-spacing:.09em;
  color:var(--white); font-size:1.02rem; font-weight:700;
}
.brand-sub{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-500); }

.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; padding:0;
  background:transparent; border:1px solid var(--navy-700); border-radius:8px;
  color:var(--gold-500); cursor:pointer;
}
.nav-toggle-bars{ display:flex; flex-direction:column; gap:4px; width:20px; }
.nav-toggle-bars i{ display:block; height:2px; background:currentColor; border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.primary-nav{
  display:none;
  position:absolute; left:0; right:0; top:100%;
  background:var(--navy-900); border-bottom:1px solid var(--navy-700);
  padding:10px var(--gutter) 18px;
}
.primary-nav.is-open{ display:block; }
.primary-nav ul{ display:flex; flex-direction:column; }
.primary-nav ul a{
  display:block; padding:13px 2px; text-decoration:none; color:var(--white);
  font-family:var(--head-font); text-transform:uppercase; letter-spacing:.1em; font-size:1rem;
  border-bottom:1px solid var(--navy-700);
}
.primary-nav ul a:hover{ color:var(--gold-400); }
.header-cta{ margin-top:14px; width:100%; }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; background:var(--navy-900); }
.hero-bg{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.55; }
/* One overlay only. Two stacked gradients multiply out to near-opaque and the
   photograph disappears. Kept dark enough that the text passes contrast even
   over the brightest part of the falls, and readable if the image never loads. */
.hero::after{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(10,20,33,.86) 0%, rgba(10,20,33,.72) 42%, rgba(10,20,33,.94) 100%);
}
.hero-inner{ position:relative; z-index:2; padding:56px var(--gutter) 60px; }
.eyebrow{
  font-family:var(--head-font); text-transform:uppercase; letter-spacing:.2em;
  font-size:.8rem; color:var(--gold-500); margin:0 0 12px;
}
.hero h1{ font-size:2.6rem; font-size:clamp(2rem,9vw,3.6rem); letter-spacing:.04em; margin-bottom:14px; }
.hero-sub{ font-size:1.08rem; color:var(--gold-200); max-width:46ch; margin-bottom:26px; }
.hero-actions{ display:flex; flex-direction:column; gap:12px; margin-bottom:26px; }
.hero-points{ display:flex; flex-direction:column; gap:8px; }
.hero-points li{ position:relative; padding-left:24px; font-size:.97rem; }
/* keep each vehicle name whole so the line breaks at the separators only */
.hero-points li span{ white-space:nowrap; }
.hero-points li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:9px; height:9px; border:2px solid var(--gold-500); border-radius:50%;
}

/* ---------- cards ---------- */
.card{
  background:var(--navy-800); border:1px solid var(--navy-700);
  border-radius:var(--radius); padding:22px;
}
.section-alt .card{ background:var(--navy-900); }
.card h3{ font-size:1.12rem; margin-bottom:9px; letter-spacing:.05em; }
.card p{ font-size:.97rem; }
.card-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; margin-bottom:14px;
  border:1px solid var(--gold-500); border-radius:10px;
  background:rgba(212,171,94,.10);
}
.card-ico svg{ width:24px; height:24px; fill:var(--gold-500); }

/* ---------- bastar places ---------- */
.place{
  background:var(--navy-900); border:1px solid var(--navy-700);
  border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;
}
.place-img{ aspect-ratio:16/10; background:var(--navy-700); overflow:hidden; }
.place-img img{ width:100%; height:100%; object-fit:cover; }
/* Shown where no freely licensed photograph of a place was available. */
.place-img-fallback{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:16px;
  background:linear-gradient(135deg,
    var(--navy-900) 0%, var(--navy-800) 38%, var(--navy-700) 66%, #6E5A34 100%);
}
.place-img-fallback::after{        /* thin gold sweep, echoing the card's rules */
  content:""; position:absolute; left:-10%; right:-10%; bottom:26%; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-500),transparent);
  opacity:.65;
}
.place-img-fallback span{
  font-family:var(--head-font); text-transform:uppercase; letter-spacing:.12em;
  color:var(--gold-200); font-size:1.1rem; text-align:center; line-height:1.25;
}
.place-body{ padding:18px; display:flex; flex-direction:column; gap:10px; flex:1 1 auto; }
.place-body h3{ font-size:1.14rem; letter-spacing:.05em; }
.place-body p{ margin:0; font-size:.95rem; }
.dist{ color:var(--gold-500); font-size:.86rem !important; letter-spacing:.05em; text-transform:uppercase; font-family:var(--head-font); }
.warn{ color:var(--gold-400); font-weight:700; }
.place-body .btn{ margin-top:auto; align-self:flex-start; }

.advisory{
  margin-top:26px; padding:16px 18px;
  border-left:3px solid var(--gold-500); background:rgba(212,171,94,.07);
  color:var(--muted); font-size:.95rem; border-radius:0 8px 8px 0; max-width:80ch;
}

/* ---------- day trips ---------- */
.trip{ display:flex; flex-direction:column; gap:12px; }
.trip h3{ font-size:1.18rem; }
.route{ counter-reset:step; display:flex; flex-direction:column; gap:7px; }
.route li{
  counter-increment:step; position:relative; padding-left:30px;
  color:var(--gold-200); font-size:.96rem;
}
.route li::before{
  content:counter(step); position:absolute; left:0; top:1px;
  width:21px; height:21px; border-radius:50%;
  border:1px solid var(--gold-500); color:var(--gold-500);
  font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.trip p{ font-size:.95rem; margin:0; }
.trip .btn{ margin-top:auto; align-self:flex-start; }

/* ---------- outstation ---------- */
.outstation-banner{
  margin:0 0 28px; border:1px solid var(--navy-700); border-radius:var(--radius);
  overflow:hidden; position:relative; background:var(--navy-700);
}
.outstation-banner img{ width:100%; aspect-ratio:16/7; object-fit:cover; }
.outstation-banner figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 16px 12px;
  background:linear-gradient(180deg,transparent,rgba(10,20,33,.92));
  color:var(--gold-200); font-size:.9rem;
}

.chip-groups{ display:grid; gap:20px; }
.chip-group h3{ font-size:1.05rem; color:var(--gold-500); margin-bottom:12px; letter-spacing:.09em; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips li{
  border:1px solid var(--navy-700); background:var(--navy-900);
  color:var(--gold-200); border-radius:999px;
  padding:7px 14px; font-size:.9rem; line-height:1.3;
}
.outstation-notes{
  margin-top:28px; padding:20px; border:1px solid var(--navy-700);
  border-radius:var(--radius); background:var(--navy-900);
}
.note-airport{ color:var(--muted); font-size:.96rem; }
.note-quote{ color:var(--muted); font-size:.96rem; }
.note-cta{ color:var(--gold-200); font-size:1rem; }
.outstation-notes .btn{ margin-top:6px; }

/* ---------- all-India destinations ---------- */
.india-block{
  margin-top:30px; padding:22px 18px;
  border:1px solid var(--navy-700); border-radius:var(--radius);
  background:var(--navy-900);
}
.india-title{ font-size:1.18rem; color:var(--gold-500); letter-spacing:.08em; margin-bottom:10px; }
.india-lede{ font-size:.97rem; max-width:70ch; }
/* --- featured destination cards (lead the all-India section with images) --- */
.featured{ margin:20px 0 24px; }
.featured-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(2,minmax(0,1fr));   /* 2 up from 360px */
}
.featured-card{ display:flex; }
.featured-link{
  display:flex; flex-direction:column; width:100%;
  background:var(--navy-800); border:1px solid var(--navy-700);
  border-radius:10px; overflow:hidden; text-decoration:none;
  transition:border-color .16s ease, transform .16s ease;
}
.featured-link:hover{ border-color:var(--gold-500); transform:translateY(-2px); }
.featured-img{ background:var(--navy-700); }
.featured-img img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.featured-body{ display:flex; flex-direction:column; gap:4px; padding:11px 11px 13px; }
.featured-name{
  font-family:var(--head-font); text-transform:uppercase; letter-spacing:.02em;
  color:var(--white); font-size:.85rem; line-height:1.22;
  overflow-wrap:anywhere;   /* last-resort guard, should not trigger */
}
.featured-line{ color:var(--muted); font-size:.82rem; line-height:1.45; }

.india-groups{ display:grid; gap:10px; margin-top:20px; }

.india-group{
  border:1px solid var(--navy-700); border-radius:10px;
  background:var(--navy-800); overflow:hidden;
}
.india-group summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; min-height:52px; cursor:pointer;
  font-family:var(--head-font); text-transform:uppercase; letter-spacing:.08em;
  font-size:.96rem; color:var(--white);
  list-style:none;
}
.india-group summary::-webkit-details-marker{ display:none; }
.india-group summary:hover{ color:var(--gold-400); }
.india-group summary:focus-visible{ outline:var(--focus); outline-offset:-3px; }
.india-group-name{ display:flex; align-items:center; gap:10px; }
/* chevron, drawn in CSS so there is no icon font */
.india-group-name::before{
  content:""; flex:0 0 auto; width:8px; height:8px;
  border-right:2px solid var(--gold-500); border-bottom:2px solid var(--gold-500);
  transform:rotate(-45deg); transition:transform .18s ease;
}
.india-group[open] .india-group-name::before{ transform:rotate(45deg); }
.india-count{
  flex:0 0 auto; min-width:26px; padding:2px 8px; text-align:center;
  border:1px solid var(--navy-700); border-radius:999px;
  color:var(--gold-500); font-size:.74rem; letter-spacing:.04em;
}
.india-group .chips{ padding:2px 16px 18px; }

.chips-link li{ display:contents; }
.chip-link{
  display:inline-flex; align-items:center; min-height:44px;
  padding:9px 15px; border:1px solid var(--gold-500); border-radius:999px;
  color:var(--gold-200); background:transparent;
  font-size:.9rem; line-height:1.3; text-decoration:none;
  transition:background-color .16s ease, color .16s ease;
}
.chip-link:hover{ background:rgba(212,171,94,.14); color:var(--gold-400); }

.india-close{ margin-top:20px; font-size:.95rem; color:var(--gold-200); }

/* ---------- vehicles ---------- */
.vehicle{ display:flex; flex-direction:column; gap:0; padding:0; overflow:hidden; }
.vehicle-img{ position:relative; background:var(--navy-700); }
.vehicle-img img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; }
/* Stock photo disclaimer. JS removes this once the owner supplies his own
   photo of that car, so it never sits over a picture of the real vehicle. */
.stock-note{
  position:absolute; left:0; right:0; bottom:0; margin:0;
  padding:14px 12px 7px; font-size:.76rem; letter-spacing:.02em;
  color:var(--muted);
  background:linear-gradient(180deg,transparent,rgba(10,20,33,.88));
}
.vehicle-body{ padding:18px; display:flex; flex-direction:column; gap:9px; flex:1 1 auto; }
.vehicle h3{ font-size:1.15rem; }
.seats-badge{
  align-self:flex-start; margin:0;
  padding:4px 12px; border:1px solid var(--gold-500); border-radius:999px;
  color:var(--gold-500); font-size:.74rem; letter-spacing:.1em;
  font-family:var(--head-font); text-transform:uppercase;
}
.vehicle-body p{ font-size:.95rem; margin:0; }
.vehicle .btn{ margin-top:auto; align-self:flex-start; }

/* ---------- booking form ---------- */
.booking-form{
  background:var(--navy-900); border:1px solid var(--navy-700);
  border-radius:var(--radius); padding:22px;
}
.field{ margin-bottom:16px; }
.field-row{ display:grid; gap:0; }
label{
  display:block; margin-bottom:6px;
  font-family:var(--head-font); text-transform:uppercase; letter-spacing:.09em;
  font-size:.88rem; color:var(--white);
}
.req{ color:var(--gold-500); }
.opt{ color:var(--muted); text-transform:none; letter-spacing:0; font-size:.8rem; }
input,select,textarea{
  width:100%; padding:12px 13px; min-height:48px;
  background:var(--navy-800); color:var(--white);
  border:1px solid var(--navy-700); border-radius:8px;
  font-family:var(--body-font); font-size:1rem; line-height:1.4;
}
textarea{ resize:vertical; min-height:88px; }
input::placeholder,textarea::placeholder{ color:#7C8898; }
input:focus,select:focus,textarea:focus{ border-color:var(--gold-500); }
select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--gold-500) 50%),linear-gradient(135deg,var(--gold-500) 50%,transparent 50%); background-position:calc(100% - 19px) calc(50% + 2px),calc(100% - 13px) calc(50% + 2px); background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:38px; }
input[type="date"]{ color-scheme:dark; }
.hint{ margin:5px 0 0; font-size:.83rem; color:var(--muted); }
.err{ margin:5px 0 0; font-size:.86rem; color:var(--gold-400); font-weight:600; min-height:0; }
.err:empty{ display:none; }
.field.has-error input,.field.has-error select{ border-color:var(--gold-400); }

.form-actions{ display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.form-status{
  margin:16px 0 0; font-size:.95rem; color:var(--gold-200);
  border-left:3px solid var(--gold-500); padding:10px 14px;
  background:rgba(212,171,94,.07); border-radius:0 8px 8px 0;
}
.form-status:empty{ display:none; }
.form-status.is-error{ color:var(--gold-400); }

/* ---------- contact ---------- */
.contact-card,.contact-cta{
  background:var(--navy-900); border:1px solid var(--navy-700);
  border-radius:var(--radius); padding:22px;
}
.contact-list{ display:flex; flex-direction:column; gap:16px; }
.contact-list li{ display:flex; gap:13px; align-items:flex-start; }
.c-ico{
  flex:0 0 auto; width:40px; height:40px; border-radius:10px;
  border:1px solid var(--gold-500); background:rgba(212,171,94,.10);
  display:flex; align-items:center; justify-content:center;
}
.c-ico svg{ width:20px; height:20px; fill:var(--gold-500); }
.c-ico-wa{ border-color:var(--wa-green); background:rgba(37,211,102,.12); }
.c-ico-wa svg{ fill:var(--wa-green); }
.c-label{
  display:block; font-family:var(--head-font); text-transform:uppercase;
  letter-spacing:.14em; font-size:.74rem; color:var(--gold-500);
}
.c-value{ color:var(--white); font-size:1.02rem; text-decoration:none; }
a.c-value:hover,.c-value a:hover{ color:var(--gold-400); }
.c-value a{ color:var(--white); text-decoration:none; }
.map-link{ display:inline-block; margin-top:18px; color:var(--gold-200); font-size:.94rem; }
.contact-cta h3{ font-size:1.25rem; margin-bottom:10px; }
.contact-buttons{ display:flex; flex-direction:column; gap:12px; margin-top:18px; }

/* ---------- footer ---------- */
.site-footer{ background:var(--navy-800); border-top:1px solid var(--navy-700); padding:42px 0 0; }
.footer-grid{ display:grid; gap:28px; }
.footer-brand .brand-logo{ height:56px; margin-bottom:14px; }
.footer-tag{ color:var(--gold-500); font-size:.9rem; letter-spacing:.05em; }
.footer-addr{ font-size:.93rem; }
.footer-col h3{ font-size:.95rem; color:var(--gold-500); letter-spacing:.14em; margin-bottom:12px; }
.footer-col ul{ display:flex; flex-direction:column; gap:8px; }
.footer-col li{ font-size:.93rem; }
.footer-col a{ color:var(--muted); text-decoration:none; }
.footer-col a:hover{ color:var(--gold-400); }
.footer-bottom{
  display:flex; flex-direction:column; gap:8px;
  margin-top:34px; padding-top:18px;
  /* extra room so the floating WhatsApp button never sits on these links */
  padding-bottom:88px;
  padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--navy-700);
}
.footer-bottom p{ margin:0; font-size:.88rem; }
.footer-bottom a{ color:var(--gold-200); }

/* ---------- floating WhatsApp ---------- */
.wa-float{
  position:fixed; right:16px; bottom:16px; z-index:90;
  right:calc(16px + env(safe-area-inset-right, 0px));
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  width:56px; height:56px; border-radius:50%;
  background:var(--wa-green); color:#07210F;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow); border:2px solid rgba(255,255,255,.22);
}
.wa-float svg{ width:30px; height:30px; fill:currentColor; }
.wa-float:hover{ background:#1FBC5B; }

/* ---------- scroll reveal ----------
   Content is visible by default. It is only hidden for the animation when the
   inline head script has confirmed IntersectionObserver and no motion
   preference, so the page never ends up blank if JavaScript does not run. */
.js-reveal .reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.js-reveal .reveal.is-visible{ opacity:1; transform:none; }

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (min-width:560px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
  .hero-actions,.form-actions,.contact-buttons{ flex-direction:row; flex-wrap:wrap; }
  .hero-actions .btn,.form-actions .btn,.contact-buttons .btn{ flex:1 1 220px; }
  .field-row{ grid-template-columns:1fr 1fr; gap:0 16px; }
  .footer-bottom{
    flex-direction:row; justify-content:space-between; align-items:center;
    padding-bottom:26px; padding-right:80px;   /* clears the floating button */
    padding-bottom:calc(26px + env(safe-area-inset-bottom, 0px));
  }
  .chip-groups{ grid-template-columns:repeat(2,1fr); }
}

@media (min-width:768px){
  body{ font-size:18px; }
  .section{ padding:76px 0; }
  .grid{ gap:22px; }
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .hero-inner{ padding:96px var(--gutter) 104px; }
  .hero-points{ flex-direction:row; gap:26px; flex-wrap:wrap; }

  .nav-toggle{ display:none; }
  .primary-nav{
    display:flex !important; align-items:center; gap:14px;
    position:static; background:none; border:none; padding:0;
  }
  .primary-nav ul{ flex-direction:row; gap:14px; }
  .primary-nav ul a{ border:none; padding:6px 0; font-size:.82rem; letter-spacing:.05em; white-space:nowrap; }
  .header-cta{ margin-top:0; width:auto; min-height:44px; padding:9px 14px 9px 11px; font-size:.8rem; white-space:nowrap; }
  /* Between 768 and 1023 the full nav, the CTA and the wordmark cannot all fit
     on one row. The logo already reads "Shivanshi Travels", so the repeated
     text beside it is what gives way. */
  .brand-text{ display:none; }
  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; }
}

@media (min-width:1024px){
  .grid-4{ grid-template-columns:repeat(4,1fr); }
  .chip-groups{ grid-template-columns:repeat(4,1fr); }
  .hero h1{ font-size:3.6rem; }
  .wa-float{
    right:24px; bottom:24px;
    right:calc(24px + env(safe-area-inset-right, 0px));
    bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .brand-text{ display:flex; }                       /* room for it again */
  .primary-nav{ gap:22px; }
  .primary-nav ul{ gap:20px; }
  .primary-nav ul a{ font-size:.94rem; letter-spacing:.08em; }
  .header-cta{ min-height:44px; padding:10px 16px 10px 13px; font-size:.9rem; }
}


@media (min-width:600px){
  .featured-grid{ gap:14px; }
  .featured-name{ font-size:.95rem; letter-spacing:.06em; }
}
@media (min-width:900px){
  .featured-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .featured-name{ font-size:1rem; }
  .featured-line{ font-size:.86rem; }
}
@media (min-width:1200px){
  .featured-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
}


/* ==========================================================================
   Flex-gap fallback  —  iOS Safari < 14.1, Samsung Internet < 14, old WebView
   Applied only when the runtime probe in js/main.js finds flex `gap` missing
   and sets .no-flex-gap on <html>, so a current browser matches none of this.
   GRID gap is deliberately NOT covered: it works from Safari 12, our floor.
   ========================================================================== */

/* --- row, never wraps: space the following sibling --- */
.no-flex-gap .header-inner > * + *{ margin-left:12px; }
.no-flex-gap .brand > * + *{ margin-left:10px; }
.no-flex-gap .contact-list li > * + *{ margin-left:13px; }
.no-flex-gap .india-group summary > * + *{ margin-left:12px; }

/* the label beside a button icon is an anonymous flex item, so the margin has
   to go on the icon itself; likewise the chevron is a ::before pseudo-item */
.no-flex-gap .btn > .ico{ margin-right:9px; }
.no-flex-gap .india-group-name::before{ margin-right:10px; }

/* --- column, never wraps --- */
.no-flex-gap .nav-toggle-bars > * + *{ margin-top:4px; }
.no-flex-gap .place-body > * + *{ margin-top:10px; }
.no-flex-gap .trip > * + *{ margin-top:12px; }
.no-flex-gap .route > * + *{ margin-top:7px; }
.no-flex-gap .featured-body > * + *{ margin-top:4px; }
.no-flex-gap .vehicle-body > * + *{ margin-top:9px; }
.no-flex-gap .contact-list > * + *{ margin-top:16px; }
.no-flex-gap .footer-col ul > * + *{ margin-top:8px; }

/* --- column on a phone, wrapping row higher up --- */
.no-flex-gap .hero-actions > * + *,
.no-flex-gap .form-actions > * + *,
.no-flex-gap .contact-buttons > * + *{ margin-top:12px; }
.no-flex-gap .footer-bottom > * + *{ margin-top:8px; }
.no-flex-gap .hero-points > * + *{ margin-top:8px; }

/* --- wrapping row: a trailing margin on every child, never `* + *`, so a
       wrapped row cannot end up indented. Costs one gap of slack on the right
       and below, which only the fallback path ever sees. --- */
.no-flex-gap .chips > *{ margin:0 8px 8px 0; }

@media (min-width:560px){
  .no-flex-gap .hero-actions > * + *,
  .no-flex-gap .form-actions > * + *,
  .no-flex-gap .contact-buttons > * + *{ margin-top:0; }
  .no-flex-gap .hero-actions > *,
  .no-flex-gap .form-actions > *,
  .no-flex-gap .contact-buttons > *{ margin:0 12px 12px 0; }
  .no-flex-gap .footer-bottom > * + *{ margin-top:0; margin-left:8px; }
}

@media (min-width:768px){
  .no-flex-gap .hero-points > * + *{ margin-top:0; }
  .no-flex-gap .hero-points > *{ margin:0 26px 26px 0; }
  .no-flex-gap .primary-nav > * + *{ margin-left:14px; }
  .no-flex-gap .primary-nav ul > * + *{ margin-left:14px; }
}

@media (min-width:1024px){
  .no-flex-gap .primary-nav > * + *{ margin-left:22px; }
  .no-flex-gap .primary-nav ul > * + *{ margin-left:20px; }
}

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