/* ────────────────────────────────────────────────────────────────
   Travel Squad Holidays — Himalayan Dusk theme
   Single themeable sheet. Change :root tokens to re-skin the site.
   Palette: slate blue · sunset coral · bone white
   ──────────────────────────────────────────────────────────────── */

:root {
  /* ── Core palette (light mode) ───────────────────────────── */
  --c-primary:        #1F3A5F;   /* slate blue */
  --c-primary-soft:   #2F4F7E;
  --c-primary-ink:    #0E1F36;
  --c-secondary:      #C9B79A;   /* warm sand */
  --c-accent:         #E8653C;   /* sunset coral */
  --c-accent-soft:    #F28E6A;
  --c-ink:            #14181F;   /* near-black for body text on surface */
  --c-ink-soft:       #40495A;
  --c-surface:        #F5F0E8;   /* bone white page canvas */
  --c-surface-2:      #EDE6D8;   /* deeper bone for tile contrast */
  --c-surface-3:      #E4DAC6;
  --c-rule:           #C9BDA3;
  --c-on-primary:     #F5F0E8;   /* inverted text colour on --c-primary */
  --c-on-primary-soft:#E4DAC6;
  --c-on-accent:      #14181F;
  --c-muted:          #6F7685;

  /* ── Focus + state ─────────────────────────────────────────── */
  --c-focus:          #FFB84D;
  --shadow-sm:        0 1px 2px rgba(20,24,31,.06), 0 2px 6px rgba(20,24,31,.04);
  --shadow-md:        0 8px 24px rgba(20,24,31,.08), 0 2px 6px rgba(20,24,31,.04);
  --shadow-lg:        0 20px 48px rgba(20,24,31,.14);

  /* ── Typography ────────────────────────────────────────────── */
  --ff-serif:  "Fraunces", "Source Serif Pro", "Iowan Old Style", Georgia, serif;
  --ff-sans:   "Inter", "Helvetica Neue", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ff-mono:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type scale — min / preferred / max */
  --fs-hero:    clamp(2.35rem, 1.2rem + 5.6vw, 5rem);
  --fs-display: clamp(1.9rem,  1.1rem + 3.8vw, 3.25rem);
  --fs-h2:      clamp(1.55rem, 1rem   + 2.4vw, 2.25rem);
  --fs-h3:      clamp(1.2rem,  1rem   + 0.9vw, 1.5rem);
  --fs-eyebrow: clamp(0.72rem, 0.7rem + 0.15vw, 0.8rem);
  --fs-lead:    clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  --fs-body:    clamp(1rem,    0.97rem + 0.12vw, 1.0625rem);
  --fs-small:   clamp(0.83rem, 0.8rem  + 0.1vw, 0.9rem);

  /* Weights (tuned to avoid thin serifs on mobile) */
  --fw-body:    450;
  --fw-lead:    500;
  --fw-display: 600;
  --fw-headline:700;

  /* ── Spacing + rhythm ──────────────────────────────────────── */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6rem;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --nav-h: 4.5rem;

  /* Body defaults */
  color-scheme: light;
}

/* ── Dark mode ───────────────────────────────────────────────── */
[data-theme="dark"] {
  --c-primary:        #0A1626;
  --c-primary-soft:   #17253B;
  --c-primary-ink:    #05101F;
  --c-secondary:      #6A5F4A;
  --c-accent:         #FF8862;
  --c-accent-soft:    #FFAA84;
  --c-ink:            #E8E3DB;
  --c-ink-soft:       #B5AFA2;
  --c-surface:        #0E1620;
  --c-surface-2:      #141E2A;
  --c-surface-3:      #1B2736;
  --c-rule:           #2C3A4E;
  --c-on-primary:     #E8E3DB;
  --c-on-primary-soft:#C9C0AE;
  --c-on-accent:      #0A1626;
  --c-muted:          #8B94A4;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.55);

  color-scheme: dark;
}

/* ────────────────────────────────────────────────────────────────
   Reset + base
   ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: clip;
  margin: 0;
  padding: 0;
  max-width: 100%;
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .25s ease, color .25s ease;
}

img, svg, video, iframe { display: block; max-width: 100%; height: auto; }
img { background: transparent; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-accent); }

button { font: inherit; cursor: pointer; }

/* Grid/flex children should never widen their track */
main *,
.bento *,
.asym-row * { min-width: 0; }

/* Long word/itinerary wrap safety */
h1, h2, h3, h4, .lead, blockquote, p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Anchor scroll offset so the sticky masthead doesn't cover targets */
section[id],
[data-anchor] {
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}

/* Focus visibility */
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ────────────────────────────────────────────────────────────────
   Typography
   ──────────────────────────────────────────────────────────────── */
.display, h1, h2, h3 { font-family: var(--ff-serif); letter-spacing: -0.01em; }

h1.hero-title {
  font-size: var(--fs-hero);
  font-weight: var(--fw-headline);
  line-height: 1.02;
  margin: 0;
}
h2.section-title {
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  line-height: 1.08;
  margin: 0 0 var(--sp-5);
}
h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--sp-3);
}

.lead {
  font-family: var(--ff-serif);
  font-size: var(--fs-lead);
  font-style: normal;          /* no italics — display type stays upright */
  font-weight: var(--fw-lead);
  line-height: 1.35;
  color: var(--c-ink);
}

.eyebrow {
  font-family: var(--ff-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.5rem; height: 1px;
  background: var(--c-accent);
}

/* Mobile weight bump for display serifs */
@media (max-width: 780px) {
  h1.hero-title, h2.section-title { font-weight: 700; }
  .lead { font-weight: 600; }
  body  { font-weight: 450; }
}

/* ────────────────────────────────────────────────────────────────
   Layout primitives
   ──────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 2.5vw, 2rem);
}

.rule {
  border: 0;
  height: 1px;
  background: var(--c-rule);
  margin: 0;
}

/* ────────────────────────────────────────────────────────────────
   Masthead
   ──────────────────────────────────────────────────────────────── */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;                        /* stay above any sibling stacking contexts */
  height: var(--nav-h);
  background: var(--c-surface);        /* solid, no color-mix/backdrop-filter */
  border-bottom: 1px solid var(--c-rule);
  isolation: isolate;                  /* hard-lock stacking context */
}
[data-theme="dark"] .masthead { background: var(--c-surface); }

.masthead-inner {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.5rem);
  height: 100%;
  line-height: 1;                      /* prevent descenders from pushing brand text */
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--c-primary);
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 1;
}
.brand span { color: inherit; opacity: 1; }
[data-theme="dark"] .brand,
[data-theme="dark"] .brand span { color: #F5F0E8; }      /* bone, locked */

.brand-mark {
  width: 34px; height: 34px;
  color: var(--c-accent);
  flex-shrink: 0;
  opacity: 1;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-inline-start: auto;
  font-size: 0.95rem;
}

.theme-toggle {
  width: 2.35rem; height: 2.35rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--c-rule);
  background: transparent;
  color: var(--c-ink);
  transition: transform .2s, background-color .15s, color .15s;
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--c-ink); color: var(--c-surface); transform: rotate(-12deg); }
[data-theme="dark"] .theme-toggle { color: #E8E3DB; border-color: #2C3A4E; }
[data-theme="dark"] .theme-toggle:hover { background: var(--c-on-primary); color: var(--c-primary); }
.theme-toggle:hover { transform: rotate(-12deg); color: var(--c-accent); }
.theme-toggle svg { width: 18px; height: 18px; }

.wa-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.05rem;
  background: #25D366;           /* WhatsApp brand green, used consistently everywhere */
  color: #0A1626;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  border: 1px solid #1FBF5A;
  transition: background-color .15s, transform .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(20,24,31,.1);
}
.wa-pill:hover {
  background: #1FBF5A;
  color: #FFFFFF;
  border-color: #1FBF5A;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37,211,102,.35);
}
.wa-pill svg { width: 20px; height: 20px; }
.wa-pill-label { display: inline; }

/* Mobile — hide the masthead theme toggle + WhatsApp pill;
   both live inside the drawer instead so the nav bar shows ONLY the hamburger. */
@media (max-width: 780px) {
  .primary-nav .theme-toggle,
  .primary-nav .wa-pill { display: none; }
}
/* Below 540px, keep the desktop WhatsApp pill icon-only — edge case when
   the user resizes from desktop down through the tablet breakpoint. */
@media (min-width: 781px) and (max-width: 960px) {
  .wa-pill-label { display: none; }
  .wa-pill { padding: .55rem .75rem; }
}

/* Hamburger — mobile only; hidden on desktop (≥781px). */
.nav-toggle {
  display: none;
  width: 2.35rem; height: 2.35rem;
  align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--c-rule);
  background: transparent;
  color: var(--c-ink);
  flex-shrink: 0;
  transition: background-color .15s, color .15s, transform .15s;
  cursor: pointer;
}
@media (max-width: 780px) {
  .nav-toggle { display: inline-flex; }
}
.nav-toggle:hover { background: var(--c-ink); color: var(--c-surface); transform: translateY(-1px); }
[data-theme="dark"] .nav-toggle { color: #E8E3DB; border-color: #2C3A4E; }
[data-theme="dark"] .nav-toggle:hover { background: var(--c-on-primary); color: var(--c-primary); }

/* Drawer — sliding sheet under the masthead, available at every width. */
.mobile-drawer {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-rule);
  transform: translateY(-110%);
  transition: transform .3s ease, visibility 0s .3s;
  z-index: 95;
  padding: 1rem clamp(1rem, 2.5vw, 2rem) 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  box-shadow: var(--shadow-md);
  visibility: hidden;
  pointer-events: none;
}
.mobile-drawer.is-open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform .3s ease, visibility 0s;
}
.drawer-links {
  display: flex;
  flex-direction: column;
}
.drawer-links a {
  font-family: var(--ff-serif);
  font-size: 1.15rem;
  font-weight: 600;
  padding: .75rem 0;
  border-bottom: 1px solid var(--c-rule);
  color: var(--c-ink);
}
.drawer-links a:last-child { border-bottom: 0; }
.drawer-links a:hover { color: var(--c-accent); }
[data-theme="dark"] .drawer-links a { color: #E8E3DB; }

.drawer-actions {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding-top: .25rem;
}
.drawer-actions .btn { width: 100%; justify-content: center; }
.drawer-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--c-rule);
  background: transparent;
  color: var(--c-ink);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  width: 100%;
  justify-content: center;
  transition: background-color .15s, color .15s;
}
.drawer-theme-toggle:hover { background: var(--c-ink); color: var(--c-surface); }
.drawer-theme-toggle svg { width: 18px; height: 18px; }
[data-theme="dark"] .drawer-theme-toggle { color: #E8E3DB; border-color: #2C3A4E; }
[data-theme="dark"] .drawer-theme-toggle:hover { background: var(--c-on-primary); color: var(--c-primary); }

/* ────────────────────────────────────────────────────────────────
   Section-to-viewport sizing (mobile-first)
   Each major section covers at least one viewport; content centers
   vertically within it. Uses svh on mobile to avoid the browser UI
   dead-zone; scales up to dvh on larger screens.
   ──────────────────────────────────────────────────────────────── */
.stat-hero,
.hero,
.services,
.cover-story,
#about,
#reviews,
.enquire,
.contact {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 780px) {
  .stat-hero,
  .hero,
  .services,
  .cover-story,
  #about,
  #reviews,
  .enquire,
  .contact {
    min-height: calc(100dvh - var(--nav-h));
  }
}

/* ────────────────────────────────────────────────────────────────
   Hero — Full-width STAT RIBBON followed by a tight Bento grid
   ──────────────────────────────────────────────────────────────── */

/* ── Stat Ribbon ─────────────────────────────────────────────── */
.stat-hero {
  background: var(--c-primary);
  color: var(--c-on-primary);
  padding-block: clamp(2rem, 5vw, 3.5rem);          /* more breathing room */
  padding-inline: clamp(.5rem, 2vw, 1.5rem);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--c-primary-ink);
}
.stat-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 80% 0%, color-mix(in srgb, var(--c-accent) 28%, transparent), transparent 70%);
  pointer-events: none;
}
.stat-hero .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;                  /* centre eyebrow, grid and tail */
}
.stat-hero .eyebrow { color: var(--c-accent-soft); margin-bottom: 1rem; }
.stat-hero .eyebrow::before { background: var(--c-accent-soft); }

.stat-hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: clamp(1.75rem, 4vw, 2.5rem);             /* more space between stat rows on mobile */
  column-gap: clamp(.75rem, 2vw, 2rem);
  align-items: center;
  justify-items: center;
  text-align: center;
  max-width: 1100px;
  margin-inline: auto;
  width: 100%;
}
@media (min-width: 780px) {
  .stat-hero-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 0;
  }
}

.stat-hero-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  width: 100%;
  padding: .5rem clamp(.5rem, 2vw, 1rem);
  position: relative;
  text-align: center;
}
.stat-hero-label { line-height: 1.35; max-width: 20ch; }
/* Subtle vertical divider between cells on desktop only */
@media (min-width: 780px) {
  .stat-hero-cell + .stat-hero-cell::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background: color-mix(in srgb, var(--c-on-primary) 25%, transparent);
  }
}

.stat-hero-num {
  font-family: var(--ff-serif);
  font-weight: 800;
  font-size: clamp(2.5rem, 4.5vw + 1rem, 5.5rem);
  letter-spacing: -0.03em;
  line-height: .95;
  color: var(--c-on-primary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
}
.stat-hero-num .prefix,
.stat-hero-num .suffix { color: var(--c-accent-soft); font-weight: 600; font-size: .6em; }
.stat-hero-num .plus { color: var(--c-accent-soft); }
.stat-hero-label {
  font-size: var(--fs-small);
  color: var(--c-on-primary-soft);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 600;
}

.stat-hero-tail {
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 1100px;
  width: 100%;
  text-align: center;
}
.stat-hero-tail .tail-note {
  font-size: var(--fs-small);
  color: var(--c-on-primary-soft);
  flex: 1 1 18rem;
  min-width: 0;
  text-align: center;
}

/* Count-up via @property (falls back gracefully) */
@property --count-28900 { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --count-49    { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --count-7     { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --count-2000  { syntax: '<integer>'; inherits: false; initial-value: 0; }

/* ── Secondary Bento (below the stat ribbon) ─────────────────── */
.hero {
  padding-block: clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
  min-height: calc(100dvh - var(--nav-h));
  display: flex;
  align-items: stretch;
}
.hero .container { width: 100%; }

.bento {
  display: grid;
  gap: clamp(.6rem, 1.2vw, 1rem);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(5.5rem, auto);
}
.bento > * { min-width: 0; }

.tile {
  background: var(--c-surface-2);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-md);
  padding: clamp(1rem, 1.8vw, 1.4rem);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .75rem;
}
.tile-dark {
  background: var(--c-primary);
  color: var(--c-on-primary);
  border-color: var(--c-primary-ink);
}
.tile-dark .eyebrow { color: var(--c-accent-soft); }
.tile-dark .eyebrow::before { background: var(--c-accent-soft); }

.tile-accent {
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-color: var(--c-accent);
}
.tile-accent .eyebrow { color: var(--c-on-accent); }
.tile-accent .eyebrow::before { background: var(--c-on-accent); }

.tile-image {
  padding: 0;
  background: var(--c-surface-3);
  overflow: hidden;
  display: flex;
  min-height: 16rem;                    /* readable on mobile */
  min-width: 0;
  /* NO max-height and NO desktop min-height override —
     the grid row span drives the tile height so it can never
     overflow into neighbouring cells. */
}
.tile-image figure {
  margin: 0;
  width: 100%; height: 100%;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
}
.tile-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;                  /* preserve aspect — never crop the placeholder */
  object-position: center;
  min-height: 0;
}

/* Bento placements — 4 unequal tiles (mobile stacks, desktop mosaics).
   Mobile first: stack single column with bounded tile heights so nothing
   overflows the viewport. Image tile is capped at 40svh on mobile. */
.bento .t-headline    { grid-column: 1 / -1; grid-row: span 2; min-height: 10rem; }
.bento .t-hero-img    { grid-column: 1 / -1; grid-row: span 2; min-height: 14rem; }
.bento .t-cta         { grid-column: 1 / -1; grid-row: span 1; min-height: 6rem; }
.bento .t-inclusions  { grid-column: 1 / -1; grid-row: span 2; min-height: 8rem; }

@media (min-width: 780px) {
  .bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: minmax(5rem, auto);
  }
  /* Row 1–3: left column = headline + CTA; right column = image */
  .bento .t-headline   { grid-column: 1 / 4;  grid-row: 1 / 3; }
  .bento .t-cta        { grid-column: 1 / 4;  grid-row: 3 / 4; }
  .bento .t-hero-img   { grid-column: 4 / 7;  grid-row: 1 / 4; }
  /* Row 4: inclusions spans the full width beneath — no overlap with the image. */
  .bento .t-inclusions { grid-column: 1 / 7;  grid-row: 4 / 5; }
}

/* CTA tile — slate (primary), with accent used only inside for emphasis.
   Previously solid coral, which overpowered the cream hero. */
.t-cta {
  background: var(--c-primary);
  color: var(--c-on-primary);
  border-color: var(--c-primary-ink);
}
.t-cta .eyebrow { color: var(--c-accent-soft); }
.t-cta .eyebrow::before { background: var(--c-accent-soft); }

.tile-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.tile-cta-row .btn { flex: 1 1 auto; }

.tile .stat-num {
  font-family: var(--ff-serif);
  font-size: clamp(1.8rem, 2.8vw + .5rem, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.tile .stat-label {
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
}
.tile-dark .stat-label { color: var(--c-on-primary-soft); }

.t-headline h1.hero-title em {
  font-style: normal;            /* upright, not cursive */
  color: var(--c-accent);
  font-weight: 700;
}
[data-theme="dark"] .t-headline h1.hero-title em { color: var(--c-accent-soft); }

/* Global: no italics in display/editorial type */
.lead em, .hero-title em, .section-title em { font-style: normal; }

/* ────────────────────────────────────────────────────────────────
   Buttons
   ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .85rem 1.2rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  border: 1px solid transparent;
  transition: background-color .15s, color .15s, transform .15s, border-color .15s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }

.btn-primary {
  background: var(--c-primary);
  color: var(--c-on-primary);
  border-color: var(--c-primary);
}
.btn-primary:hover {
  background: var(--c-primary-ink);
  color: var(--c-on-primary);
  border-color: var(--c-primary-ink);
  transform: translateY(-1px);
}

.btn-whatsapp {
  background: #25D366;
  color: #0A1626;
  border-color: #1fbf5a;
}
.btn-whatsapp:hover {
  background: #1fbf5a;
  color: #FFFFFF;
  border-color: #1fbf5a;
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-ink);
}
.btn-outline:hover {
  background: var(--c-ink);
  color: var(--c-surface);
}
.tile-dark .btn-outline,
.t-cta .btn-outline { color: var(--c-on-primary); border-color: var(--c-on-primary); }
.tile-dark .btn-outline:hover,
.t-cta .btn-outline:hover { background: var(--c-on-primary); color: var(--c-primary); }

/* ────────────────────────────────────────────────────────────────
   Section scaffolding
   ──────────────────────────────────────────────────────────────── */
section { padding-block: clamp(2rem, 5vw, 4rem); }
section[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }

.section-head { margin-bottom: clamp(1rem, 2.5vw, 1.75rem); }
.section-head .eyebrow { margin-bottom: .5rem; }

.asym-row {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}
@media (min-width: 840px) {
  .asym-row { grid-template-columns: 5fr 7fr; }
  .asym-row.reverse { grid-template-columns: 7fr 5fr; }
  .asym-row.reverse > :first-child { order: 2; }
}

/* ────────────────────────────────────────────────────────────────
   Services — 3 asymmetric feature cards + CTA row
   ──────────────────────────────────────────────────────────────── */
.services { background: var(--c-surface); }
.services-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: clamp(.75rem, 1.5vw, 1.25rem);
}
@media (min-width: 840px) {
  .services-grid {
    /* Asymmetric 3-col row for cards; enquire-more spans the full width below. */
    grid-template-columns: 1.2fr 1fr 1fr;
    grid-auto-rows: minmax(0, auto);
    align-items: stretch;
  }
  .services-grid .service-card      { min-height: 14rem; grid-row: 1; }
  .services-grid .enquire-more      { grid-column: 1 / -1; grid-row: 2; }
}
.service-card {
  background: var(--c-surface-2);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-md);
  padding: clamp(1.2rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  overflow: hidden;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-accent);
}
.service-card .service-title {
  font-family: var(--ff-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--c-primary);
}
[data-theme="dark"] .service-card .service-title { color: var(--c-on-primary); }
.service-card p { color: var(--c-ink-soft); }
.service-card .price {
  margin-top: auto;
  font-family: var(--ff-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-accent);
}
.service-card .price small { font-family: var(--ff-sans); font-size: .8rem; color: var(--c-muted); font-weight: 500; }
.service-card .service-icon {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c-accent) 14%, transparent);
  color: var(--c-accent);
}
.service-card .service-icon svg { width: 22px; height: 22px; }

.enquire-more {
  background: var(--c-primary);
  color: var(--c-on-primary);
  border: 1px solid var(--c-primary-ink);
  border-radius: var(--radius-md);
  padding: clamp(1.2rem, 2vw, 1.75rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.enquire-more .em-title {
  font-family: var(--ff-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  max-width: 30ch;
}
.enquire-more .em-sub {
  font-size: var(--fs-small);
  color: var(--c-on-primary-soft);
  margin-top: .25rem;
}

/* ────────────────────────────────────────────────────────────────
   Cover Story — itinerary-like long scroll
   ──────────────────────────────────────────────────────────────── */
.cover-story { background: var(--c-surface-2); }
.cover-story .asym-row { align-items: start; }
.cover-figure {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-surface-3);
  aspect-ratio: 4 / 5;
  max-height: calc(100dvh - 9rem);
  display: flex; align-items: center; justify-content: center;
}
.cover-figure img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 840px) {
  .cover-sticky { position: sticky; top: calc(var(--nav-h) + 1rem); }
}

.itinerary {
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--c-rule);
}
.itinerary li {
  list-style: none;
  padding: 1rem 0;
  border-bottom: 1px solid var(--c-rule);
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: .75rem;
  align-items: baseline;
}
.itinerary .day-no {
  font-family: var(--ff-serif);
  font-weight: 700;
  color: var(--c-accent);
  font-size: 1.35rem;
}
.itinerary h3 { font-size: 1.1rem; margin: 0 0 .25rem; }
.itinerary p  { margin: 0; color: var(--c-ink-soft); font-size: var(--fs-small); }

/* ────────────────────────────────────────────────────────────────
   Stat bar
   ──────────────────────────────────────────────────────────────── */
.stat-bar {
  background: var(--c-primary);
  color: var(--c-on-primary);
}
.stat-bar .stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.5rem;
}
@media (min-width: 700px) {
  .stat-bar .stat-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.stat-bar .stat-num {
  font-family: var(--ff-serif);
  font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-bar .stat-label {
  margin-top: .4rem;
  color: var(--c-on-primary-soft);
  font-size: var(--fs-small);
}

/* ────────────────────────────────────────────────────────────────
   Reviews — magazine-style editorial quotes
   ──────────────────────────────────────────────────────────────── */
.reviews-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  align-items: stretch;
}
@media (min-width: 780px) {
  .reviews-grid { grid-template-columns: 1.1fr .9fr 1fr; grid-template-rows: auto auto; }
  .reviews-grid .review:nth-child(1) { grid-column: 1; grid-row: span 2; }
  .reviews-grid .review:nth-child(2) { grid-column: 2; grid-row: 1; }
  .reviews-grid .review:nth-child(3) { grid-column: 3; grid-row: 1; }
  .reviews-grid .review:nth-child(4) { grid-column: 2 / span 2; grid-row: 2; }
  .reviews-grid .review:nth-child(5) { display: none; }
}
.review {
  background: var(--c-surface-2);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-md);
  padding: clamp(1rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  height: 100%;                 /* stretch to row height so cites align */
}
.review .stars { align-self: flex-start; }
.review blockquote {
  margin: 0;
  font-family: var(--ff-serif);
  font-size: clamp(1rem, 0.8vw + .85rem, 1.2rem);
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-ink);
  text-align: left;
  flex: 1 1 auto;               /* quote grows to fill the card */
}
.review cite {
  font-style: normal;
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  text-align: left;
  margin-top: auto;             /* push author to bottom of each card */
  padding-top: .25rem;
  border-top: 1px solid var(--c-rule);
}
.stars { display: inline-flex; gap: 2px; color: var(--c-accent); }
.stars svg { width: 14px; height: 14px; }

.reviews-footnote {
  margin-top: 1rem;
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* ────────────────────────────────────────────────────────────────
   Enquire form
   ──────────────────────────────────────────────────────────────── */
.enquire {
  background: var(--c-primary);
  color: var(--c-on-primary);
}
.enquire .eyebrow { color: var(--c-accent-soft); }
.enquire .eyebrow::before { background: var(--c-accent-soft); }
.enquire h2 { color: var(--c-on-primary); }

.enquire-body {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0,1fr);
}
@media (min-width: 880px) {
  .enquire-body { grid-template-columns: 5fr 7fr; align-items: start; }
}

.enquire-info p { color: var(--c-on-primary-soft); margin-top: 0; }
.enquire-info .phone-row {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--c-primary-soft);
  padding: .65rem 1rem;
  border-radius: 999px;
  margin-top: .5rem;
  font-weight: 600;
}

#enquire-form {
  display: grid;
  grid-template-columns: 1fr;                       /* mobile-first: one field per row */
  gap: .75rem;
}
@media (min-width: 640px) {
  #enquire-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#enquire-form .field-full { grid-column: 1 / -1; }
#enquire-form label {
  display: block;
  font-size: var(--fs-small);
  color: var(--c-on-primary-soft);
  margin-bottom: .2rem;
}
#enquire-form input,
#enquire-form select,
#enquire-form textarea {
  width: 100%;
  background: color-mix(in srgb, var(--c-on-primary) 8%, var(--c-primary));
  border: 1px solid var(--c-primary-soft);
  color: var(--c-on-primary);
  border-radius: 10px;
  padding: .65rem .8rem;
  font: inherit;
}
#enquire-form input::placeholder,
#enquire-form textarea::placeholder { color: color-mix(in srgb, var(--c-on-primary) 55%, transparent); }
#enquire-form textarea { resize: vertical; min-height: 4rem; }
#enquire-form input:focus,
#enquire-form select:focus,
#enquire-form textarea:focus { border-color: var(--c-accent); }

#enquire-form .field-submit { grid-column: 1 / -1; display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; }
#enquire-form .send-note { font-size: var(--fs-small); color: var(--c-on-primary-soft); flex: 1 1 12rem; min-width: 0; }

/* ────────────────────────────────────────────────────────────────
   Contact
   ──────────────────────────────────────────────────────────────── */
.contact {
  background: var(--c-surface-2);
}
.contact-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0,1fr);
}
@media (min-width: 820px) {
  .contact-grid { grid-template-columns: 5fr 7fr; }
}
.contact-card {
  background: var(--c-surface);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-md);
  padding: clamp(1rem, 2vw, 1.5rem);
  display: flex; flex-direction: column; gap: .5rem;
}
.contact-card h3 { margin-bottom: .25rem; }
.contact-card p  { margin: 0; color: var(--c-ink-soft); }
.map-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--c-rule);
  aspect-ratio: 16 / 10;
  background: var(--c-surface-3);
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; }

/* ────────────────────────────────────────────────────────────────
   Footer (colophon)
   ──────────────────────────────────────────────────────────────── */
.colophon {
  background: var(--c-primary);
  color: var(--c-on-primary);
  padding-block: clamp(2rem, 4vw, 3.5rem) 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.colophon a         { color: var(--c-on-primary); }
.colophon a:hover   { color: var(--c-accent-soft); }
.colophon-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0,1fr);
}
@media (min-width: 760px) {
  .colophon-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.colophon h4 {
  font-family: var(--ff-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent-soft);
  margin: 0 0 .75rem;
  font-weight: 700;
}
.colophon ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .45rem;
  font-size: var(--fs-small);
}
.nap-name { font-family: var(--ff-serif); font-weight: 700; font-size: 1.2rem; }

.socials { display: inline-flex; gap: .5rem; margin-top: .75rem; }
.socials a {
  width: 2.25rem; height: 2.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--c-on-primary) 30%, transparent);
  border-radius: 999px;
  transition: background-color .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}
.socials a:hover {
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-color: var(--c-accent);
}
.socials svg { width: 16px; height: 16px; }

.colophon-base {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--c-on-primary) 20%, transparent);
  display: flex; justify-content: space-between; gap: .5rem;
  font-size: var(--fs-small);
  color: var(--c-on-primary-soft);
  flex-wrap: wrap;
}

/* ────────────────────────────────────────────────────────────────
   Utilities (previously-inline styles, extracted for separation)
   ──────────────────────────────────────────────────────────────── */
.u-sprite-svg { position: absolute; }
.u-gtm-frame  { display: none; visibility: hidden; }

/* Hero bento */
.tile-h1            { margin-top: .75rem; }
.tile-lead          { margin-top: 1rem; max-width: 34ch; }
.tile-cta-row-tight { margin-top: .6rem; }
.inclusions-list {
  list-style: none; padding: 0; margin: .25rem 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .3rem 1.1rem; font-size: var(--fs-small); color: var(--c-ink-soft);
}

/* Stat-hero */
.btn-on-primary { color: var(--c-on-primary); border-color: var(--c-on-primary); }
.stat-star-sup  { color: var(--c-accent-soft); font-size: .55em; vertical-align: super; }

/* Services */
.services-lead      { max-width: 52ch; }
.card-bullets {
  list-style: none; padding: 0; margin: .25rem 0;
  font-size: var(--fs-small); color: var(--c-ink-soft);
  display: flex; flex-direction: column; gap: .2rem;
}
.card-footer {
  display: flex; justify-content: space-between; align-items: end;
  gap: .5rem; flex-wrap: wrap;
}

/* Cover story */
.cover-caption  { margin-top: .75rem; font-size: var(--fs-small); color: var(--c-ink-soft); }
.cover-lead     { margin-bottom: 1.5rem; }

/* About */
.about-figure   { aspect-ratio: 3 / 4; max-width: 520px; }
.about-cta-row  { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }

/* Reviews */
.reviews-section    { background: var(--c-surface-2); }
.reviews-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.reviews-head h2 { margin-bottom: 0; }

/* Enquire + contact */
.icon-inline-sm       { width: 16px; height: 16px; }
.u-mt-3               { margin-top: .75rem; }
.u-underline          { text-decoration: underline; }
.contact-col          { display: flex; flex-direction: column; gap: .75rem; }
.contact-card h3,
.contact-card p       { margin: 0; }
.contact-card h3      { margin-bottom: .25rem; }
.contact-card p       { color: var(--c-ink-soft); }

/* Footer */
.footer-brand         { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; }
.footer-brand-mark    { color: var(--c-accent-soft); width: 28px; height: 28px; }
.footer-desc          { color: var(--c-on-primary-soft); margin: 0 0 .5rem; max-width: 36ch; }
.footer-nap           { color: var(--c-on-primary-soft); font-size: var(--fs-small); }
.footer-contact       { margin-top: .75rem; font-size: var(--fs-small); }