/* =====================================================================
   Visit Kashmir — public stylesheet
   ===================================================================== */

/* ---------- Tokens ---------- */
/* Brand palette: deep maroon with a bright red accent. Nothing on the public
   site is green — that includes the WhatsApp buttons, which keep the WhatsApp
   glyph but wear the brand colours. */
:root {
  --brand:     #8c1d2f;   /* primary — buttons, links, active states */
  --brand-600: #74162a;   /* hover / pressed */
  --brand-700: #5a1020;   /* deepest maroon */
  --brand-050: #fdeef1;   /* tint background */
  --brand-100: #f7d9df;

  /* Back-compat aliases. Older markup and inline styles still say var(--brand);
     they now resolve to the maroon brand rather than the old blue. */
  --blue:     var(--brand);
  --blue-600: var(--brand-600);
  --blue-700: var(--brand-700);
  --blue-050: var(--brand-050);

  --ink: #21151a;
  --ink-2: #4a3a40;
  --muted: #7b6a70;
  --line: #ece2e4;

  --red: #d62839;         /* accent red — badges, floating CTA */
  --red-600: #b81f2e;
  --gold: #b0761a;        /* positive / tick states (replaces the old green) */
  --amber: #c98a12;

  --bg: #ffffff;
  --soft: #fdf7f8;

  --field-bg: #f7f1f2;
  --field-line: #e3d6d9;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  --shadow-sm: 0 1px 2px rgba(33, 21, 26, .06), 0 2px 8px rgba(33, 21, 26, .05);
  --shadow: 0 4px 12px rgba(33, 21, 26, .07), 0 16px 40px rgba(33, 21, 26, .08);
  --shadow-lg: 0 24px 64px rgba(33, 21, 26, .16);

  --wrap: 1200px;
  --header-h: 82px;

  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 14px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--bg);
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--brand-700); }
button { font: inherit; }
h1, h2, h3, h4, h5 {
  margin: 0 0 .5em;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}
h1 { font-size: clamp(1.8rem, 3.9vw, 3.1rem); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(1.45rem, 2.7vw, 2.25rem); font-weight: 800; letter-spacing: -.03em; }
h3 { font-size: clamp(1.06rem, 1.55vw, 1.3rem); }
p  { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.15rem; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
[id] { scroll-margin-top: calc(var(--header-h) + 14px); }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--soft { background: var(--soft); }
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.center { text-align: center; }

.section-head { max-width: 720px; margin: 0 auto clamp(36px, 5vw, 60px); text-align: center; }
.section-head p { color: var(--muted); font-size: 1.02rem; margin-bottom: 0; }
.eyebrow {
  display: inline-block;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); margin-bottom: .75rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.9rem;
  border: 2px solid transparent; border-radius: 999px;
  font-weight: 700; font-size: .97rem; letter-spacing: .01em;
  cursor: pointer; text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--brand); color: #fff; box-shadow: 0 8px 22px rgba(140, 29, 47, .30); }
.btn--primary:hover { background: var(--brand-600); color: #fff; box-shadow: 0 12px 30px rgba(140, 29, 47, .38); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #3a2229; color: #fff; }
.btn--red { background: var(--red); color: #fff; box-shadow: 0 8px 22px rgba(214, 40, 57, .28); }
.btn--red:hover { background: var(--red-600); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn--whatsapp { background: #2b1a1f; color: #fff; border-color: #2b1a1f; box-shadow: 0 8px 22px rgba(33, 21, 26, .3); }
.btn--whatsapp:hover { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 12px 30px rgba(140, 29, 47, .38); }
.wa-ico { flex: none; display: inline-block; vertical-align: -.18em; }
.btn--ghost .wa-ico, .btn--white .wa-ico { color: var(--brand); }
.wa-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--brand); font-weight: 700; }
.wa-link:hover { color: var(--brand-700); }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { color: var(--brand); }
.btn--sm { padding: .6rem 1.25rem; font-size: .87rem; }
.btn--block { width: 100%; }
/* Fully square-cornered variant, for the CTAs in the package sidebar. */
.btn--rect { border-radius: 0; }

/* Buttons side by side on one line, sharing the width equally. Auto-flow means
   a single button still fills the row when, say, WhatsApp is not configured.
   The tighter padding is what lets the labels stay on one line in the narrow
   package sidebar. */
.btn-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .6rem; }
.btn-row .btn {
  width: 100%; min-width: 0;
  padding-left: .8rem; padding-right: .8rem;
  white-space: nowrap;
}

/* ---------- Header ---------- */
/* Transparent at the top of the page so the hero / banner image runs behind it.
   Once scrolled (.is-stuck, toggled in main.js) it fades into the white glass bar. */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, backdrop-filter .3s ease, box-shadow .25s ease, border-color .25s ease;
}
.header.is-stuck, .header.is-solid {
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: var(--shadow-sm); border-bottom-color: var(--line);
}

/* The header floats over the page, so only pages that do not open with a
   hero or banner need to reserve room for it. */
#main { padding-top: var(--header-h); }
#main:has(> .hero:first-of-type, > .banner:first-of-type) { padding-top: 0; }

/* Light-on-dark treatment while the bar is transparent. */
.header:not(.is-stuck):not(.is-solid) .nav__list a { color: rgba(255, 255, 255, .92); }
.header:not(.is-stuck):not(.is-solid) .nav__list a:hover,
.header:not(.is-stuck):not(.is-solid) .nav__list a.is-active { background: rgba(255, 255, 255, .18); color: #fff; }
.header:not(.is-stuck):not(.is-solid) .header__phone { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.header:not(.is-stuck):not(.is-solid) .header__phone span { color: #fff; }
.header:not(.is-stuck):not(.is-solid) .burger { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .38); color: #fff; }
.header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }

.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 66px; width: auto; }
.header:not(.is-stuck):not(.is-solid) .logo img { filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .45)); }
.footer .logo { display: inline-flex; }
.footer .logo img { height: 112px; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.nav__list a {
  display: block; padding: .55rem .9rem; border-radius: 999px;
  color: var(--ink-2); font-weight: 600; font-size: .93rem; white-space: nowrap;
}
.nav__list a:hover { background: var(--brand-050); color: var(--brand); }
.nav__list a.is-active { color: var(--brand); background: var(--brand-050); }
/* The CTA inside the nav list is for the mobile drawer only — on desktop the
   same button lives in .header__cta, so hide this copy. */
.nav__list .nav__cta { display: none; }

.header__cta { display: flex; align-items: center; gap: .75rem; flex: none; }
/* The CTA keeps its natural width and stays on one line - never "Plan My / Trip". */
.header__cta .btn { white-space: nowrap; }
.header__phone { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--ink); font-size: .93rem; white-space: nowrap; }
.header__phone span { color: var(--brand); }

.burger {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line);
  background: #fff; border-radius: 12px; cursor: pointer; padding: 0;
  place-items: center; color: var(--ink);
}
.burger span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .2s ease, top .2s ease;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger.is-open span { background: transparent; }
.burger.is-open span::before { top: 0; transform: rotate(45deg); }
.burger.is-open span::after { top: 0; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative; margin: 0; overflow: hidden;
  min-height: clamp(460px, 74vh, 720px);
  display: grid; place-items: center; text-align: center;
  color: #fff; isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(28, 12, 16, .55) 0%, rgba(28, 12, 16, .32) 45%, rgba(28, 12, 16, .72) 100%);
}
.hero__inner { padding: calc(clamp(56px, 9vw, 110px) + var(--header-h)) 24px clamp(56px, 9vw, 110px); max-width: 940px; margin-inline: auto; }
.hero h1 { color: #fff; margin-bottom: 1rem; text-shadow: 0 2px 24px rgba(0, 0, 0, .3); }
.hero p { color: rgba(255, 255, 255, .93); font-size: clamp(.95rem, 1.25vw, 1.08rem); max-width: 720px; margin: 0 auto 2rem; font-weight: 500; }
.hero__pill {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem;
  padding: .45rem 1.05rem; border-radius: 999px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(8px);
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }

/* Trust strip under the hero */
/* Stats strip: below the hero on desktop, above the enquiry form on mobile. */
.trust-strip--plan { display: none; }
.trust-strip--plan .trust { margin-top: 0; }
.detail.detail--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: -46px; position: relative; z-index: 5; }
.trust__item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.35rem 1rem; text-align: center; box-shadow: var(--shadow-sm);
}
.trust__item b { display: block; font-size: clamp(1.22rem, 1.95vw, 1.6rem); color: var(--ink); letter-spacing: -.03em; }
.trust__item span { font-size: .82rem; color: var(--muted); font-weight: 500; }

/* ---------- Badge pills (destination sections) ---------- */
.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1.1rem; border-radius: 999px;
  font-size: .88rem; font-weight: 700;
  background: var(--brand-050); color: var(--brand-700);
}
.pill--maroon     { background: #fbe6ea; color: #8c1d2f; }
.pill--rose       { background: #ffe9ee; color: #b02a4b; }
.pill--plum       { background: #f4e7f0; color: #7b2758; }
.pill--amber      { background: #fdf1dc; color: #9c6408; }
.pill--terracotta { background: #fbeae0; color: #a4501f; }
.pill--sand       { background: #f6efe2; color: #806019; }
/* Legacy theme keys, in case an old row survives in the database. */
.pill--blue   { background: #fbe6ea; color: #8c1d2f; }
.pill--green  { background: #fbeae0; color: #a4501f; }
.pill--purple { background: #f4e7f0; color: #7b2758; }
.pill--teal   { background: #f6efe2; color: #806019; }

/* ---------- Alternating feature rows ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 84px); align-items: center; }
.feature + .feature { margin-top: clamp(56px, 8vw, 110px); }
.feature:nth-child(even) .feature__media { order: -1; }
.feature__body h2 { margin: .75rem 0 1rem; }
.feature__body > p { color: var(--muted); font-size: 1.03rem; }
.feature__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.ticks { list-style: none; padding: 0; margin: 1.4rem 0 1.8rem; display: grid; gap: .6rem; }
.ticks li { display: flex; align-items: flex-start; gap: .65rem; font-weight: 500; color: var(--ink-2); }
.ticks li::before {
  content: "✓"; flex: none; width: 22px; height: 22px; margin-top: 2px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--brand-050); color: var(--brand); font-size: .78rem; font-weight: 800;
}

/* ---------- Cards ---------- */
.grid { display: grid; gap: 28px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--soft); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card__media img { transform: scale(1.06); }
.card__tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: .35rem .8rem; border-radius: 999px;
  background: var(--red); color: #fff; font-size: .72rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.card__tag--alt  { background: var(--brand-700); }
.card__tag--blue { background: var(--brand-700); }
.card__price {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  padding: .4rem .85rem; border-radius: 999px;
  background: rgba(255, 255, 255, .95); color: var(--ink);
  font-weight: 800; font-size: .95rem; box-shadow: var(--shadow-sm);
}
.card__price s { color: var(--muted); font-weight: 500; font-size: .78rem; margin-right: .3rem; }
.card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.card__meta {
  display: flex; flex-wrap: wrap; gap: .35rem .9rem;
  font-size: .82rem; color: var(--muted); font-weight: 600;
  margin-bottom: .6rem; min-height: 2.5em; align-content: flex-start;
}
.card__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.card__body h3 { font-size: 1.18rem; margin-bottom: .5rem; }
.card__body h3 a { color: inherit; }
.card__body h3 a:hover { color: var(--brand); }
.card__body p { color: var(--muted); font-size: .93rem; flex: 1; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.card__from { font-size: .78rem; color: var(--muted); }
.card__from b { display: block; font-size: 1.15rem; color: var(--ink); letter-spacing: -.02em; }

/* destination tile */
.tile { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 4; display: block; color: #fff; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tile:hover img { transform: scale(1.08); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(28, 12, 16, .85) 100%); }
.tile__body { position: absolute; inset: auto 0 0 0; padding: 1.4rem 1.5rem; z-index: 2; }
.tile__body h3 { color: #fff; margin-bottom: .2rem; font-size: 1.3rem; }
.tile__body span { font-size: .85rem; color: rgba(255, 255, 255, .85); }

/* stars */
.stars { color: #e2d6d9; font-size: 1rem; letter-spacing: .06em; }
.stars .is-on { color: #f5a623; }

/* testimonial */
.quote {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.9rem 1.75rem; display: flex; flex-direction: column; gap: 1rem; height: 100%;
  transition: transform .22s ease, box-shadow .22s ease;
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.quote__text { color: var(--ink-2); font-size: .97rem; flex: 1; margin: 0; }
.quote__who { display: flex; align-items: center; gap: .85rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.quote__avatar {
  width: 46px; height: 46px; flex: none; border-radius: 50%; object-fit: cover;
  background: var(--brand-050); color: var(--brand);
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
}
.quote__who b { display: block; color: var(--ink); font-size: .95rem; line-height: 1.3; }
.quote__who span { font-size: .8rem; color: var(--muted); }

/* ---------- Enquiry form ---------- */
.form-card {
  background: #fff; border-radius: var(--radius-lg); padding: clamp(24px, 3.5vw, 40px);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.05rem 1.1rem; }
.field { display: flex; flex-direction: column; justify-content: flex-end; gap: .38rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .84rem; font-weight: 700; color: var(--ink); line-height: 1.35; }
.field label .req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; padding: .82rem 1rem;
  border: 1.5px solid var(--field-line); border-radius: var(--radius-sm);
  font: inherit; font-size: .94rem; color: var(--ink); background-color: var(--field-bg);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #d3c2c6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); background-color: #fff;
  box-shadow: 0 0 0 4px rgba(140, 29, 47, .14);
}
.field textarea { resize: vertical; min-height: 108px; }
.field input, .field select { height: 3rem; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 2.4rem; cursor: pointer;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%237b6a70' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px 8px;
}

/* Placeholder text is grey and a step smaller than the value the user types. */
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; font-size: .85rem; }
.field select:has(option[value=""]:checked) { color: var(--muted); font-size: .85rem; }
.field select option { color: var(--ink); font-size: .94rem; }
.field input[type="date"].is-empty { color: var(--muted); font-size: .85rem; }
.field input[type="date"].is-empty::-webkit-datetime-edit { color: var(--muted); }
.field small { font-size: .78rem; color: var(--muted); }
.field .err { font-size: .78rem; color: var(--red); font-weight: 600; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--brand); color: #fff; padding: .7rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 700; font-size: .9rem;
}
.skip:focus { left: 0; color: #fff; }

/* ---------- Alerts ---------- */
.alert { padding: .95rem 1.2rem; border-radius: var(--radius-sm); font-size: .92rem; font-weight: 500; margin-bottom: 1.25rem; border: 1px solid; }
.alert--success { background: #fdf4e3; border-color: #f0dcae; color: #85590f; }
.alert--error   { background: #fdecec; border-color: #f7c9c9; color: #a72020; }
.alert--info    { background: var(--brand-050); border-color: var(--brand-100); color: var(--brand-700); }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  padding: clamp(48px, 7vw, 84px) clamp(24px, 5vw, 72px); color: #fff; text-align: center; isolation: isolate;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, #5a1020 0%, var(--brand) 55%, #c9394a 100%);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .9); max-width: 620px; margin: 0 auto 2rem; }
.cta-band .btn--white { box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }

/* ---------- Page banner (inner pages) ---------- */
.banner {
  position: relative; margin-top: 0; overflow: hidden;
  color: #fff; padding: calc(clamp(56px, 8vw, 108px) + var(--header-h)) 0 clamp(56px, 8vw, 108px); isolation: isolate; text-align: center;
}
.banner__bg { position: absolute; inset: 0; z-index: -2; }
.banner__bg img { width: 100%; height: 100%; object-fit: cover; }
.banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28, 12, 16, .62), rgba(28, 12, 16, .78)); }
.banner h1 { color: #fff; margin-bottom: .5rem; font-size: clamp(1.62rem, 3vw, 2.4rem); }
.banner p { color: rgba(255, 255, 255, .9); max-width: 700px; margin: 0 auto; }
/* The breadcrumb is a full-width line, not a centred intro paragraph, so it
   must opt out of the .banner p max-width + auto margins. */
.banner .crumbs { max-width: none; margin: 0 0 .9rem; }
.crumbs { font-size: .86rem; color: rgba(255, 255, 255, .8); margin-bottom: .9rem; }
.crumbs a { color: rgba(255, 255, 255, .95); }
.crumbs a:hover { color: #fff; text-decoration: underline; }

/* ---------- Filter bar ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); margin-bottom: 2.5rem;
}
.filters .field { flex: 1 1 180px; gap: .3rem; }
.filters .field label { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.filters .field input, .filters .field select { padding: .68rem .85rem; font-size: .9rem; height: 2.8rem; }
.filters .field select { padding-right: 2.1rem; background-position: right .8rem center; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.chip {
  padding: .5rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--line);
  font-size: .87rem; font-weight: 600; color: var(--ink-2); background: #fff;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- Detail layout ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: clamp(28px, 4vw, 52px); align-items: start; }
.detail__aside { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 1.25rem; }

.prose { color: var(--ink-2); font-size: 1.02rem; }
.prose h2 { font-size: 1.6rem; margin-top: 2.2rem; }
.prose h3 { font-size: 1.24rem; margin-top: 1.8rem; }
.prose img { border-radius: var(--radius); margin: 1.5rem 0; }
.prose blockquote {
  margin: 1.5rem 0; padding: 1rem 1.4rem; border-left: 4px solid var(--brand);
  background: var(--soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-2);
}
.prose a { text-decoration: underline; }

.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem 1.7rem; }
.panel + .panel { margin-top: 1.5rem; }
.panel h3 { font-size: 1.2rem; margin-bottom: 1rem; }

.price-box { text-align: center; }
.price-box .amount { font-size: 2.3rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; line-height: 1.1; }
.price-box .was { color: var(--muted); text-decoration: line-through; font-size: 1rem; margin-right: .45rem; font-weight: 500; }
.price-box .note { font-size: .84rem; color: var(--muted); margin-bottom: 1.2rem; }

.facts { list-style: none; padding: 0; margin: 0; }
.facts li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.facts li:last-child { border-bottom: 0; }
.facts li span { color: var(--muted); }
.facts li b { color: var(--ink); text-align: right; }

/* Itinerary timeline */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 1.9rem 3.4rem; }
.timeline li::before {
  content: attr(data-day); position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand-050); color: var(--brand-700);
  display: grid; place-items: center; font-weight: 800; font-size: .78rem; line-height: 1.05; text-align: center;
}
.timeline li::after { content: ""; position: absolute; left: 21.5px; top: 50px; bottom: 6px; width: 2px; background: var(--line); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline h4 { margin: .55rem 0 .35rem; font-size: 1.05rem; color: var(--ink); }
.timeline p { margin: 0; color: var(--muted); font-size: .94rem; }

.list-check, .list-cross { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.list-check li, .list-cross li { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; }
.list-check li::before { content: "✓"; color: var(--brand); font-weight: 800; flex: none; }
.list-cross li::before { content: "✕"; color: var(--red); font-weight: 800; flex: none; }

/* Tabs */
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; border-bottom: 2px solid var(--line); margin-bottom: 1.8rem; }
.tabs button {
  padding: .8rem 1.3rem; border: 0; background: none; cursor: pointer;
  font-weight: 700; font-size: .95rem; color: var(--muted);
  border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.tabs button:hover { color: var(--ink); }
.tabs button.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.tab-panel[hidden] { display: none; }

/* ---------- Accordion (FAQ) ---------- */
.acc { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.acc + .acc { margin-top: .85rem; }
.acc__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 1.15rem 3.2rem 1.15rem 1.4rem; position: relative;
  font-weight: 700; font-size: 1rem; color: var(--ink); line-height: 1.45;
}
.acc__q::after {
  content: "+"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; background: var(--brand-050); color: var(--brand);
  display: grid; place-items: center; font-size: 1.15rem; font-weight: 700; transition: transform .22s ease;
}
.acc.is-open .acc__q::after { content: "−"; transform: translateY(-50%) rotate(180deg); }
.acc__a { padding: 0 1.4rem 1.35rem; color: var(--muted); font-size: .95rem; }
.acc__a[hidden] { display: none; }

/* ---------- Gallery ---------- */
.masonry { columns: 3 260px; column-gap: 20px; }
.masonry figure { margin: 0 0 20px; break-inside: avoid; border-radius: var(--radius); overflow: hidden; position: relative; }
.masonry img { width: 100%; transition: transform .5s ease; }
.masonry figure:hover img { transform: scale(1.05); }
.masonry figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.6rem 1rem .9rem; color: #fff; font-size: .88rem; font-weight: 600;
  background: linear-gradient(transparent, rgba(28, 12, 16, .82)); opacity: 0; transition: opacity .25s ease;
}
.masonry figure:hover figcaption { opacity: 1; }

/* ---------- Pagination ---------- */
.pager { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 3rem; }
.pager__btn {
  min-width: 42px; height: 42px; padding: 0 .85rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .9rem;
}
.pager__btn:hover { border-color: var(--brand); color: var(--brand); }
.pager__btn.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager__gap { display: inline-flex; align-items: center; padding: 0 .3rem; color: var(--muted); }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.empty__icon { font-size: 2.6rem; margin-bottom: .5rem; }

/* ---------- Footer ---------- */
.footer { position: relative; margin-top: clamp(56px, 8vw, 100px); color: #fff; isolation: isolate; overflow: hidden; }
.footer__bg { position: absolute; inset: 0; z-index: -2; }
.footer__bg img { width: 100%; height: 100%; object-fit: cover; }
.footer::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(40, 14, 20, .92), rgba(66, 17, 30, .95)); }
.footer__inner { padding: clamp(52px, 7vw, 82px) 0 0; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: clamp(28px, 4vw, 56px); }
.footer h4 { color: #fff; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.15rem; opacity: .75; font-weight: 700; }
.footer p { color: rgba(255, 255, 255, .75); font-size: .93rem; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.footer ul a { color: rgba(255, 255, 255, .82); font-size: .93rem; }
.footer ul a:hover { color: #fff; }
.footer__contact li { display: flex; gap: .7rem; align-items: flex-start; color: rgba(255, 255, 255, .82); font-size: .93rem; }
.footer__contact a { color: rgba(255, 255, 255, .9); }

/* Call and WhatsApp buttons — these used to float over the page as bubbles and
   now live here, inside the "Get in touch" column. */
.footer__actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.2rem; }
.footer__actions .btn { flex: 1 1 auto; }
.footer__actions .btn--white:hover { background: #fff; color: var(--brand); }

.socials { display: flex; gap: .6rem; margin-top: 1.3rem; }
.socials a {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
  display: grid; place-items: center; color: #fff; transition: background .2s ease, transform .2s ease;
}
.socials a:hover { background: var(--brand); transform: translateY(-3px); color: #fff; }
.socials a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.socials .social-ico { display: block; width: 18px; height: 18px; }

.newsletter { display: flex; gap: .5rem; margin-top: 1.1rem; }
.newsletter input {
  flex: 1; min-width: 0; padding: .8rem 1rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1);
  color: #fff; font: inherit; font-size: .9rem;
}
.newsletter input::placeholder { color: rgba(255, 255, 255, .6); }
.newsletter input:focus { outline: none; border-color: rgba(255, 255, 255, .55); }

.footer__bar {
  margin-top: clamp(36px, 5vw, 56px); padding: 1.4rem 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between;
  font-size: .86rem; color: rgba(255, 255, 255, .68);
}
.footer__bar nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.footer__bar a { color: rgba(255, 255, 255, .8); }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 18px; bottom: 22px; z-index: 80;
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--red); color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 22px rgba(214, 40, 57, .35);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }

/* ---------- Mobile contact bar ---------- */
/* Phones only. Five quick actions pinned to the bottom edge, with WhatsApp
   raised proud of the bar in the middle. Markup: includes/mobile-bar.php.
   Kept out of the media query so the desktop rule is a single declaration. */
.mobile-bar { display: none; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.is-open { display: flex; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(28, 12, 16, .6); backdrop-filter: blur(3px); }
.modal__box {
  position: relative; z-index: 2; width: min(560px, 100%); max-height: 92vh; overflow-y: auto;
  background: #fff; border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 36px); box-shadow: var(--shadow-lg);
}
.modal__close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: var(--soft); color: var(--ink); cursor: pointer; font-size: 1.15rem; line-height: 1;
}
.modal__close:hover { background: var(--line); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Responsive ---------- */
/* Between the mobile drawer (<=900px) and a roomy desktop, the full header does
   not fit on one line. Drop the phone number and tighten the nav here, so
   "Plan My Trip" stays on one line and the row never overflows. */
@media (min-width: 901px) and (max-width: 1240px) {
  .header__phone { display: none; }
  .header__inner { gap: .9rem; }
  .nav__list { gap: 0; }
  .nav__list a { padding-left: .45rem; padding-right: .45rem; font-size: .88rem; }
}

@media (max-width: 1080px) {
  .detail { grid-template-columns: 1fr; }
  .detail.detail--even { grid-template-columns: 1fr; }
  .detail__aside { position: static; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .burger { display: grid; margin-left: auto; }
  .header__cta .btn, .header__phone { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0; margin: 0;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav.is-open { max-height: 80vh; overflow-y: auto; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 20px 1.25rem; }
  .nav__list a { padding: .9rem .6rem; border-radius: var(--radius-sm); }
  .nav__list .nav__cta { display: block; margin-top: .75rem; }
  .nav__list .nav__cta a { width: 100%; }
  /* The drawer CTA is a .btn, but `.nav__list a` (0,1,1) and `.nav__list
     a:hover` (0,2,1) both outrank `.btn--primary` (0,1,0). Opening the drawer
     adds .is-solid to the header, which switches off the light-on-dark nav
     rule above, so the label would drop to the dark link colour on top of the
     maroon button — and hover would repaint it pale pink. Restate the button's
     own colours here, at a specificity that wins. */
  .nav__list .nav__cta a,
  .nav__list .nav__cta a:hover,
  .nav__list .nav__cta a.is-active { color: #fff; background: var(--brand); }
  .nav__list .nav__cta a:hover { background: var(--brand-600); }

  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .feature { grid-template-columns: 1fr; gap: 28px; }
  .feature:nth-child(even) .feature__media { order: 0; }
  .trust { grid-template-columns: repeat(2, 1fr); margin-top: 28px; }
  .trust-strip--top { display: none; }
  .trust-strip--plan { display: block; margin-bottom: 1.6rem; }
  .form-grid { grid-template-columns: 1fr; }
  .masonry { columns: 2 200px; }

  /* The bar overlays the bottom of the page, so the footer needs matching
     room below its legal row. The padding goes on .footer__inner rather than
     on body, so the dark .footer::after backdrop covers the reserved strip
     instead of leaving a white band under it. */
  .footer__inner { padding-bottom: 92px; }
  .to-top { bottom: 104px; }

  .mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    display: flex; align-items: flex-end; justify-content: space-around;
    padding: .5rem .35rem calc(.5rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .93);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 26px rgba(33, 21, 26, .12);
  }
  .mobile-bar__item {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: .32rem;
    padding: .1rem .1rem 0; text-decoration: none; color: var(--ink-2);
  }
  .mobile-bar__ico {
    width: 44px; height: 44px; border-radius: 14px;
    display: grid; place-items: center;
    background: var(--brand-050); border: 1px solid var(--brand-100); color: var(--brand);
    transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .mobile-bar__ico svg { display: block; width: 22px; height: 22px; }
  /* The WhatsApp mark carries padding inside its own viewBox, so it needs a
     couple of extra pixels to look the same weight as its neighbours. */
  .mobile-bar__ico .wa-ico { width: 25px; height: 25px; }
  .mobile-bar__label {
    font-size: .68rem; font-weight: 600; line-height: 1.1; letter-spacing: .01em;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Solid maroon is the *interaction* state, and it is the same for every
     action — WhatsApp included. Nothing in the bar wears it at rest, so no
     tile looks permanently hovered. Hover is gated behind (hover: hover) so a
     tap on a touchscreen cannot leave a tile stuck in the filled state; the
     :active rule is what gives phones their press feedback. */
  .mobile-bar__item:active .mobile-bar__ico,
  .mobile-bar__item:focus-visible .mobile-bar__ico {
    background: linear-gradient(165deg, var(--brand) 0%, var(--brand-700) 100%);
    border-color: transparent; color: #fff;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .96), 0 8px 22px rgba(140, 29, 47, .45);
  }
  .mobile-bar__item:active .mobile-bar__ico { transform: scale(.94); }
  .mobile-bar__item:active .mobile-bar__label,
  .mobile-bar__item:focus-visible .mobile-bar__label { color: var(--brand); }
  .mobile-bar__item:focus-visible { outline: none; }

  @media (hover: hover) {
    .mobile-bar__item:hover .mobile-bar__ico {
      background: linear-gradient(165deg, var(--brand) 0%, var(--brand-700) 100%);
      border-color: transparent; color: #fff;
      box-shadow: 0 0 0 5px rgba(255, 255, 255, .96), 0 8px 22px rgba(140, 29, 47, .45);
    }
    .mobile-bar__item:hover .mobile-bar__label { color: var(--brand); }
  }

}

@media (max-width: 560px) {
  .wrap { width: calc(100% - 32px); }
  .hero { min-height: 480px; }

  /* On a phone the hero CTAs sit on the bottom edge of the image, side by
     side. Stretching the inner block to the full hero height is what lets
     margin-top:auto push the buttons down, away from the heading.
     minmax(0, 1fr) is load-bearing: the hero's single grid track is otherwise
     auto-sized, so the non-wrapping button row below would stretch it past the
     screen and .hero's overflow:hidden would silently clip the second one. */
  .hero { align-items: stretch; grid-template-columns: minmax(0, 1fr); }
  .hero__inner {
    width: 100%;
    display: flex; flex-direction: column;
    padding: calc(var(--header-h) + 16px) 24px 30px;
  }
  /* An auto margin on the heading as well as on the buttons splits the spare
     height evenly above and below the text, so it reads as vertically centred
     while the buttons stay pinned to the bottom. */
  .hero__inner > :first-child { margin-top: auto; }
  /* Scoped to .hero on purpose — the CTA band lower down reuses the
     .hero__actions class and should keep its own sizing. */
  .hero .hero__actions { margin-top: auto; flex-wrap: nowrap; gap: .6rem; }
  .hero .hero__actions .btn {
    flex: 1 1 0; min-width: 0;
    padding-left: .85rem; padding-right: .85rem;
    font-size: .88rem; line-height: 1.25; text-align: center;
  }
  /* Below ~360px the labels no longer fit on one line. Let them wrap inside
     the button rather than spill past its edge. */
  @media (max-width: 359px) {
    .hero .hero__actions .btn { font-size: .82rem; padding: .8rem .6rem; }
  }

  .cta-band { border-radius: var(--radius); }
  .grid--4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .masonry { columns: 1; }
  .card__body { padding: 1.2rem 1.25rem 1.4rem; }
}

/* ---------- Print ---------- */
@media print {
  .header, .footer, .to-top, .detail__aside, .modal, .mobile-bar { display: none !important; }
  body { color: #000; }
  .detail { grid-template-columns: 1fr; }
}