/* ============================================================
   BhutanRides — blue theme (per client feedback, Jul 2026)
   Palette sampled from live bhutanrides.com:
   blue #3598DB · deep #1B6CA8 · navy #10344E (teal retired Oct 2026 — blue throughout)
   Type: Arrus BT (display) + Poppins (body) — body text black, as on BTC
   ============================================================ */

/* Self-hosted display face. NOTE: the supplied file is Roman (weight 400)
   ONLY — there is no bold cut, so every 700/800 heading is faux-bolded by
   the browser. Add a real Arrus BT Bold here as a second @font-face, or drop
   the headings to 400, before this goes to production. */
@font-face {
  font-family: "Arrus BT";
  src: url("../fonts/arrus-bt/arrus-bt-roman.woff2") format("woff2"),
       url("../fonts/arrus-bt/arrus-bt-roman.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #3598DB;
  --blue-deep: #1B6CA8;
  --navy: #10344E;
  --blue-pale: #EAF4FB;
  --blue-light: #A9D3EF;
  --ink: #232936;
  --body: #000000;
  --muted: #727376;
  --paper: #F6F7F9;
  --line: #E5E7EA;
  --black: #0E1216;
  --white: #FFFFFF;
  --wa-green: #25D366;
  --font-display: "Arrus BT", Georgia, "Times New Roman", serif;
  --font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --shell: 1200px;
  --header-h: 76px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-deep); }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.25; }
button { font: inherit; cursor: pointer; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 10px 18px;
}
.skip-link:focus { left: 0; color: #fff; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

[id] { scroll-margin-top: calc(var(--header-h) + 14px); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 14px 30px;
  border: 2px solid var(--blue);
  border-radius: 2px;
  background: var(--blue); color: #fff;
  transition: background .2s, border-color .2s, color .2s;
}
.btn:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.btn-outline { background: transparent; color: var(--blue); }
.btn-outline:hover { background: var(--blue); color: #fff; }
.btn-ghost-light { background: transparent; border-color: #fff; color: #fff; }
.btn-ghost-light:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn-sm { padding: 10px 20px; font-size: 13.5px; }

/* ---------- section furniture ---------- */
.section { padding: 84px 0; }
.section--paper { background: var(--paper); }

.section-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  text-align: center;
  margin-bottom: 10px;
}
.section-sub {
  max-width: 760px; margin: 0 auto 40px;
  text-align: center; color: var(--ink);
  font-size: 18px; line-height: 1.7;
}

/* signature: bike-chain divider — one blue link by default; the threaded
   grey rail lives on the --rail / --sm variants (see chrome/chain-divider.php) */
.chain-divider {
  display: flex; justify-content: center; align-items: center;
  margin: 14px auto 34px; color: var(--blue);
}
.chain-divider svg { flex: 0 0 auto; width: 38px; height: auto; }
/* full 4-link rail variant */
.chain-divider--rail svg { width: min(420px, 100%); }
/* compact 2-link variant for narrow contexts (same rail SVG, scaled down) */
.chain-divider--sm svg { width: min(170px, 100%); }
/* lone-link variant — alias of the default (calendar heading, above the chain-tab filter) */
.chain-divider--single svg { width: 38px; }
/* opaque silhouette under each rail link (nonzero = holes filled) so the rail
   reads as passing BEHIND the link instead of through its knockout holes —
   it must be painted in the colour of whatever sits behind the divider */
.chain-divider .chain-backing { fill: var(--white); }
.section--paper .chain-divider .chain-backing { fill: var(--paper); }

/* type badge (MTB / MOTO) — used on cards, calendar, tour pages */
.type-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy);
  background: #fff; border: 1.5px solid var(--blue);
  border-radius: 2px; padding: 4px 10px;
}
.type-badge svg { color: var(--blue); }
.type-badge--solid { background: var(--blue); border-color: var(--blue); color: #fff; }
.type-badge--solid svg { color: #fff; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background-color: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--line);
  transition: background-color .25s, border-color .25s, box-shadow .25s;
}
/* top-down scrim, faded in only while the bar floats over a hero (see the
   br-has-hero block below) — a separate layer so background-color can still
   animate as a flat colour */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 18, 22, .38) 0%, rgba(14, 18, 22, 0) 100%);
  opacity: 0; transition: opacity .25s;
}
.site-header.is-scrolled { box-shadow: 0 4px 22px rgba(16, 52, 78, .1); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { width: 46px; height: auto; }
.brand-word {
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
  line-height: 1.1; white-space: nowrap;
  transition: color .25s;
}
.brand-word span { color: var(--blue); transition: color .25s; }
.brand-tag {
  display: block; font-family: var(--font-body); font-weight: 600;
  font-size: 10px; letter-spacing: .3em; color: var(--muted);
}

.primary-nav { display: flex; gap: 30px; align-items: center; margin-left: auto; margin-right: 22px; }
.primary-nav a {
  font-family: var(--font-display); font-size: 14.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  padding: 8px 0; position: relative;
  transition: color .25s;
}
.primary-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--blue); transition: width .22s, background-color .25s;
}
.primary-nav a:hover::after, .primary-nav a[aria-current="true"]::after { width: 100%; }
.primary-nav a:hover { color: var(--blue); }

.header-actions { display: flex; align-items: center; gap: 14px; }
/* desktop header: green glyph circle + the number as plain header-coloured text
   (no pill). The mobile-nav .wa-btn keeps the pill — see .mobile-nav .wa-btn. */
.wa-btn {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink);
  font-family: var(--font-display); font-size: 14.5px; font-weight: 700;
  letter-spacing: .05em;
  transition: color .25s;
}
.wa-btn:hover { color: var(--blue-deep); }
.wa-btn:focus-visible { outline-offset: 4px; }
.wa-ico {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--wa-green); color: #fff;
  transition: filter .2s;
}
.wa-btn:hover .wa-ico { filter: brightness(1.08); }
.wa-label { transition: color .25s; }
/* Instagram glyph beside the WhatsApp number, as on BTC's header */
.ig-btn {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 30px; height: 30px; color: var(--ink); transition: color .25s;
}
.ig-btn:hover { color: var(--blue-deep); }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; padding: 8px;
}
.nav-toggle span { width: 24px; height: 2.5px; background: var(--ink); transition: transform .2s, opacity .2s, background-color .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.mobile-nav {
  display: none; flex-direction: column;
  background: #fff; border-top: 1px solid var(--line);
  padding: 12px 24px 22px;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
  font-family: var(--font-display); font-size: 15.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  padding: 12px 0; border-bottom: 1px solid var(--paper);
}
/* the mobile-nav WhatsApp link is a plain text label with no .wa-ico, so it
   keeps the solid green pill it has always had */
.mobile-nav .wa-btn {
  margin-top: 14px; justify-content: center;
  background: var(--wa-green); color: #fff;
  padding: 11px 16px; border-radius: 2px;
  transition: filter .2s;
}
.mobile-nav .wa-btn:hover { color: #fff; filter: brightness(.92); }

/* About Us dropdown (BTC-style header menu) */
.nav-item { position: relative; height: var(--header-h); display: flex; align-items: center; }
.nav-drop-btn {
  background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 14.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  padding: 8px 0; position: relative;
  transition: color .25s;
}
.nav-drop-btn::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--blue); transition: width .22s, background-color .25s;
}
.nav-item:hover .nav-drop-btn::after, .nav-item.is-open .nav-drop-btn::after { width: 100%; }
.nav-item:hover .nav-drop-btn, .nav-item.is-open .nav-drop-btn { color: var(--blue); }
.nav-caret { transition: transform .22s; }
.nav-item:hover .nav-caret, .nav-item.is-open .nav-caret { transform: rotate(180deg); }
.nav-drop {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 224px; padding: 8px 0;
  background: #fff; border: 1px solid var(--line); border-radius: 3px;
  box-shadow: 0 16px 38px rgba(16, 52, 78, .16);
  opacity: 0; visibility: hidden;
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 110;
}
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop, .nav-item.is-open .nav-drop {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.primary-nav .nav-drop a { display: block; padding: 10px 20px; font-size: 13.5px; }
.primary-nav .nav-drop a::after { content: none; }
.primary-nav .nav-drop a:hover { background: var(--blue-pale); color: var(--blue-deep); }

.mobile-nav-group {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  padding: 14px 0 4px;
}
.mobile-nav a.mobile-nav-sub { padding-left: 16px; font-size: 14.5px; }

/* ---------- header floating over a hero (body.br-has-hero, set by
   br_body_classes() in inc/setup.php) ----------
   Unscrolled the bar is transparent over the photo with a soft scrim and light
   chrome; site.js adds .is-scrolled past 10px, which simply drops these rules
   and hands the bar straight back to the opaque defaults above. Views WITHOUT
   the body class are untouched. */
body.br-has-hero .site-header:not(.is-scrolled) {
  background-color: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
body.br-has-hero .site-header:not(.is-scrolled)::before { opacity: 1; }
body.br-has-hero .site-header:not(.is-scrolled) .brand-word,
body.br-has-hero .site-header:not(.is-scrolled) .primary-nav > a,
body.br-has-hero .site-header:not(.is-scrolled) .nav-drop-btn,
body.br-has-hero .site-header:not(.is-scrolled) .wa-label,
body.br-has-hero .site-header:not(.is-scrolled) .ig-btn { color: #fff; }
/* .brand-word span also matches .brand-tag, so both take the light accent */
body.br-has-hero .site-header:not(.is-scrolled) .brand-word span { color: var(--blue-light); }
body.br-has-hero .site-header:not(.is-scrolled) .primary-nav > a:hover,
body.br-has-hero .site-header:not(.is-scrolled) .nav-item:hover .nav-drop-btn,
body.br-has-hero .site-header:not(.is-scrolled) .nav-item.is-open .nav-drop-btn { color: var(--blue-light); }
body.br-has-hero .site-header:not(.is-scrolled) .ig-btn:hover { color: var(--blue-light); }
body.br-has-hero .site-header:not(.is-scrolled) .primary-nav > a::after,
body.br-has-hero .site-header:not(.is-scrolled) .nav-drop-btn::after { background: #fff; }
body.br-has-hero .site-header:not(.is-scrolled) .nav-toggle span { background: #fff; }

/* Progressive enhancement: the mobile panel is opaque white, so once it is open
   the bar above it goes opaque too and every light colour above reverts. Written
   as a full revert (not folded into the :not() above) so browsers without :has()
   simply keep the transparent bar instead of losing it everywhere. */
body.br-has-hero .site-header:has(.mobile-nav.is-open) {
  background-color: rgba(255, 255, 255, .97);
  border-bottom-color: var(--line);
}
body.br-has-hero .site-header:has(.mobile-nav.is-open)::before { opacity: 0; }
body.br-has-hero .site-header:has(.mobile-nav.is-open) .brand-word,
body.br-has-hero .site-header:has(.mobile-nav.is-open) .primary-nav > a,
body.br-has-hero .site-header:has(.mobile-nav.is-open) .nav-drop-btn,
body.br-has-hero .site-header:has(.mobile-nav.is-open) .wa-label,
body.br-has-hero .site-header:has(.mobile-nav.is-open) .ig-btn { color: var(--ink); }
body.br-has-hero .site-header:has(.mobile-nav.is-open) .brand-word span { color: var(--blue); }
body.br-has-hero .site-header:has(.mobile-nav.is-open) .primary-nav > a::after,
body.br-has-hero .site-header:has(.mobile-nav.is-open) .nav-drop-btn::after { background: var(--blue); }
body.br-has-hero .site-header:has(.mobile-nav.is-open) .nav-toggle span { background: var(--ink); }

main { padding-top: var(--header-h); }
/* the hero starts at the top of the viewport and the bar floats over it */
body.br-has-hero main { padding-top: 0; }
/* .hero / .tour-hero anchor their text to the bottom, but .page-hero centres
   its title — nudge it clear of the overlapping bar */
body.br-has-hero .page-hero-content { padding-top: var(--header-h); }

/* ============================================================
   BANNER — featured trips slider (2 slides)
   ============================================================ */
/* Full-screen photo like bhutantravelclub.com (client, Oct 2026): the slider
   fills the viewport (70vh on tablets/phones, BTC's own split) and only the
   bottom of the frame is darkened, so the photograph reads at full strength.
   This deliberately breaks the old "one hero size sitewide" rule — .tour-hero
   and .page-hero keep min(88vh, 780px). */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: var(--navy); }
@media (max-width: 992px) { .hero { height: 70vh; height: 70svh; } }
.hero-slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease;
}
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  /* BTC's bottom-weighted scrim; a light top band keeps the floating nav legible */
  background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .08) 22%, rgba(0, 0, 0, .14) 45%, rgba(0, 0, 0, .36) 68%, rgba(0, 0, 0, .6) 100%);
}
.hero-content {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
}
.hero-content .shell { padding-bottom: 84px; }
.hero-panel { max-width: 640px; color: #fff; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue); color: #fff;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  padding: 6px 14px; margin-bottom: 16px;
}
.hero-title {
  font-size: clamp(30px, 5vw, 54px); font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em; color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
  margin-bottom: 10px;
}
.hero-meta {
  font-family: var(--font-display); font-size: 15.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
  opacity: .92; margin-bottom: 24px;
}
.hero-meta svg { vertical-align: -3px; margin-right: 5px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-arrow {
  position: absolute; z-index: 4; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border: 0; border-radius: 2px;
  display: grid; place-items: center;
  background: rgba(14, 18, 22, .38); color: #fff;
  transition: background .2s;
}
.hero-arrow:hover { background: var(--blue); }
.hero-arrow.prev { left: 18px; }
.hero-arrow.next { right: 18px; }

.hero-dots {
  position: absolute; z-index: 4; right: 28px; bottom: 28px;
  display: flex; gap: 8px;
}
.hero-dots button {
  width: 34px; height: 4px; border: 0; border-radius: 0;
  background: rgba(255, 255, 255, .45); transition: background .2s;
}
.hero-dots button[aria-pressed="true"] { background: var(--blue); }

/* ============================================================
   INTRO QUOTE BAND
   ============================================================ */
/* Ported from bhutantravelclub.com's homepage pull-quote (client, Oct 2026):
   Desho handmade-paper ground, solid ink quote marks either side of the text,
   Playfair Display in small caps. Values copied from BTC custom.scss
   (.text-section-block--intro_text). */
.intro {
  padding: 40px 0;
  background-color: #f4eede;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.055'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.06'/%3E%3C/svg%3E"),
    radial-gradient(130% 130% at 50% 0%, #f8f2e4 0%, #efe6d1 100%);
  background-blend-mode: multiply, multiply, normal;
  border-top: 1px solid #e4dcc6;
  border-bottom: 1px solid #e4dcc6;
}
.intro-quote {
  max-width: 1000px;
  display: grid; grid-template-columns: 92px 1fr 92px; gap: 24px; align-items: start;
}
.intro-mark { width: 53px; height: 60px; color: #232936; margin-top: 6px; }
.intro-mark--close { align-self: end; justify-self: end; margin-top: 0; transform: rotate(180deg); }
.intro-body { min-width: 0; }
.intro-text {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 26px; line-height: 1.5; font-weight: 400;
  font-variant-caps: small-caps;
  color: #232936; text-align: left;
}
.intro-text strong { font-weight: inherit; }
.intro-attribution { margin-top: 14px; font-size: 15px; color: var(--muted); }
@media (max-width: 640px) {
  .intro { padding: 36px 0; }
  .intro-quote { grid-template-columns: 40px 1fr 40px; gap: 10px; }
  .intro-mark { width: 39px; height: 44px; margin-top: 2px; }
  .intro-text { font-size: 21px; }
}

/* ============================================================
   BENEFITS — full-width gradient band, 4 icon columns
   (stat-band pattern from the new BTC site, blue ramp)
   ============================================================ */
.benefits { padding: 0; } /* flush under the intro pull-quote, as on BTC */
.benefit-band {
  background: linear-gradient(105deg, #2E8FD0 0%, #1B6CA8 48%, #0F3350 100%);
  padding: 66px 0 62px;
}
.benefit-cols { display: grid; grid-template-columns: repeat(4, 1fr); }
.bcol { text-align: center; padding: 6px 30px; color: #fff; }
.bcol + .bcol { border-left: 1px solid rgba(255, 255, 255, .2); }
.bcol-icon { display: inline-grid; place-items: center; margin-bottom: 16px; color: #fff; }
.bcol h3 {
  color: #fff; font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; margin-bottom: 10px;
}
.bcol p { font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .82); }

/* ============================================================
   DISCIPLINES — two massive photos (MTB / Moto)
   ============================================================ */
.disciplines { padding: 84px 0; }
.disc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.disc {
  display: block; overflow: hidden; border-radius: 2px;
  background: #fff; border: 1px solid var(--line);
  transition: box-shadow .25s, transform .25s;
}
.disc:hover { box-shadow: 0 18px 40px rgba(16, 52, 78, .16); transform: translateY(-4px); }
.disc-media { display: block; aspect-ratio: 5/4; overflow: hidden; }
.disc-media img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease;
}
.disc:hover .disc-media img { transform: scale(1.045); }
.disc-body { display: block; padding: 26px 30px 30px; }
.disc-body h3 {
  color: var(--ink); font-size: clamp(22px, 2.4vw, 30px); font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px;
}
.disc:hover .disc-body h3 { color: var(--blue-deep); }
.disc-body p { font-size: 16.5px; color: var(--body); margin-bottom: 18px; }
.disc-link {
  font-family: var(--font-display); font-size: 14.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blue-deep);
  border-bottom: 2px solid var(--blue); padding-bottom: 3px;
}
.disc:hover .disc-link { color: var(--blue); }

/* ============================================================
   TOUR CARDS
   ============================================================ */
.card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  /* Break out of the centered .shell to near full viewport width (caps at 1800px,
     keeps ~24px side gutters; collapses to normal shell width on small screens) */
  width: min(100vw - 48px, 1800px);
  margin-inline: calc((100% - min(100vw - 48px, 1800px)) / 2);
}
/* Card body ported from bhutantravelclub.com's tour card (client, Oct 2026),
   blue in place of BTC's teal. Flex column so the pill pins to the bottom and
   lines up across a row. */
.card {
  display: flex; flex-direction: column;
  background: #fff; border-radius: 2px; overflow: hidden;
  border: 1px solid var(--line);
  transition: box-shadow .25s, transform .25s;
}
.card:hover { box-shadow: 0 18px 40px rgba(16, 52, 78, .16); transform: translateY(-4px); }
.card-media { display: block; position: relative; aspect-ratio: 38/28; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.card:hover .card-media img { transform: scale(1.05); }
.card-media .type-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(255, 255, 255, .96);
}
.card-cap { flex: 1; display: flex; flex-direction: column; padding: 22px; }
.card-cap h3 { font-size: 21px; font-weight: 600; line-height: 1.22; margin: 0 0 10px; }
.card-cap h3 a { color: var(--ink); transition: color .2s; }
.card-cap h3 a:hover { color: var(--blue-deep); }
.card-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 16px; font-weight: 500; color: #6b7280;
  margin: 0 0 6px;
}
.card-meta svg { flex: 0 0 auto; color: var(--blue); }
.card-blurb {
  font-size: 16px; line-height: 1.6; color: #000;
  margin: 0 0 18px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta:has(+ .card-btn) { margin-bottom: 18px; }
.card-btn {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--blue-deep);
  border: 2px solid var(--blue-deep); border-radius: 999px;
  font-size: 13.5px; font-weight: 600; padding: 9px 22px;
  transition: background .2s, color .2s, box-shadow .2s;
}
.card-btn:hover { background: var(--blue-deep); color: #fff; box-shadow: 0 8px 18px rgba(27, 108, 168, .28); }
@media (max-width: 400px) {
  .card-cap { padding: 18px; }
  .card-cap h3 { font-size: 19px; }
}
.center-cta { text-align: center; margin-top: 44px; }

/* ============================================================
   OUR GARAGE — bike slider (#garage · template-parts/home/bikes.php)
   .bikes-viewport is the scroll container site.js drives via scrollLeft;
   the arrows/dots are siblings of it inside .bikes-slider.
   The "In Partnership With" brand slider (#partners) is the same machine, so
   every rule it can share is carried here on a paired .partners-* selector
   rather than copied — only its slide differs, in the block after this one.
   ============================================================ */
/* type chips — same toggle language as the calendar's .dep-types bar: the pale
   ground is what makes the pressed chip's white fill read, so the bar carries
   it here too (the garage section itself is white). Absent whenever the bikes
   on screen cover fewer than two types, so nothing may depend on it existing. */
.bikes-filter {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 10px;
  width: max-content; max-width: 100%; margin: 0 auto 26px;
  background: var(--blue-pale); border-radius: 2px;
  padding: 8px 12px;
}
.bikes-type {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--ink);
  background: none; border: 0; border-radius: 999px; padding: 7px 16px;
  transition: background .2s, box-shadow .2s;
}
.bikes-type:hover { background: rgba(255, 255, 255, .7); }
.bikes-type[aria-pressed="true"] { background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue); }
/* the global 3px outline would sit on the chip's own edge — push it clear */
.bikes-type:focus-visible { outline-offset: 3px; }

.bikes-slider,
.partners-slider { position: relative; }
.bikes-viewport,
.partners-viewport {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
}
.bikes-viewport::-webkit-scrollbar,
.partners-viewport::-webkit-scrollbar { display: none; }
.bikes-track,
.partners-track { display: flex; flex-wrap: nowrap; gap: 14px; }
.bike-card {
  flex: 0 0 calc((100% - 42px) / 4);
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
  overflow: hidden; text-align: center; padding-bottom: 20px;
}
/* always printed, empty when the bike has no photo — the intrinsic ratio and
   tint keep the card from collapsing */
.bike-media { aspect-ratio: 4/3; background: var(--paper); overflow: hidden; }
/* contain, not cover — a product shot must show the whole bike, bars to tyres */
.bike-media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; box-sizing: border-box; }
.bike-name {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
  padding: 18px 16px 0;
}
.bike-avail { font-size: 15px; color: var(--muted); padding: 5px 16px 0; }

/* the dot rail below adds 26px (22px margin + 4px dots) to the slider but not
   to the viewport, so the arrows are pulled up half of that to sit on the
   viewport's true middle — same rail, same offset, in both sliders */
.bikes-arrow,
.partners-arrow {
  position: absolute; z-index: 3; top: calc(50% - 13px); transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  background: #fff; color: var(--navy); border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(16, 52, 78, .16);
  transition: background .2s, color .2s, opacity .2s;
}
.bikes-arrow:hover,
.partners-arrow:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.bikes-arrow:disabled,
.partners-arrow:disabled { opacity: .35; cursor: default; }
.bikes-arrow:disabled:hover,
.partners-arrow:disabled:hover { background: #fff; border-color: var(--line); color: var(--navy); }
.bikes-arrow--prev,
.partners-arrow--prev { left: 6px; }
.bikes-arrow--next,
.partners-arrow--next { right: 6px; }

.bikes-dots,
.partners-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.bikes-dots button,
.partners-dots button {
  width: 34px; height: 4px; border: 0; border-radius: 0; padding: 0;
  background: var(--line); transition: background .2s;
}
.bikes-dots button[aria-pressed="true"],
.partners-dots button[aria-pressed="true"] { background: var(--blue); }
/* site.js sets .hidden on the arrows and the dot rail when everything fits on
   one page — must outrank the display rules above */
.bikes-arrow[hidden], .bikes-dots[hidden],
.partners-arrow[hidden], .partners-dots[hidden] { display: none; }
/* same hook for the type chips: a bike filtered out has to leave the flex track
   entirely, or the slider would go on measuring it as a page slot */
.bike-card[hidden] { display: none; }

/* ============================================================
   IN PARTNERSHIP WITH — brand-logo slider
   (#partners · template-parts/home/partners.php)
   Shell, arrows and dots are the garage slider's, shared by selector above;
   only the slide is new. The logos are wordmarks on transparent PNGs with no
   two aspect ratios alike, so the slide owns the height and the image is
   contained inside it — six unrelated shapes then sit on one optical
   baseline and a tall mark can never grow the row.
   ============================================================ */
.partner-logo {
  flex: 0 0 calc((100% - 56px) / 5);
  display: grid; place-items: center;
  height: 88px; padding: 0 10px;
}
/* linked partners: the whole slide is the hit area, not just the mark */
.partner-logo a { display: grid; place-items: center; width: 100%; height: 100%; }
/* The cap is a length, not 100%: an unlinked logo is a bare grid item, and a
   percentage max-height there resolves against nothing — a square or portrait
   mark then renders full size and spills across its neighbours. 72px inside
   the 88px slide is also what gives every logo the same air above and below.
   Colour is deliberately NOT held back here (unlike .garage-logos img and the
   footer press row): the client chose full colour so Stella's solid red tile
   and KTM's orange read as designed rather than flattening to grey blocks. */
.partner-logo img {
  width: auto; height: auto; max-width: 100%; max-height: 72px;
  object-fit: contain;
}
/* ============================================================
   CALENDAR — BTC fixed-departures list, blue skin
   ============================================================ */
.dep-filter-bar { margin-bottom: 22px; }
.dep-filter-label {
  font-family: var(--font-display); font-size: 13.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 14px; text-align: center;
}
/* chain-tab season filter — label above one continuous gray line, a chain
   link threaded on the line under each label (old-site tab-bar style) */
.dep-seasons { list-style: none; display: flex; align-items: stretch; flex-wrap: wrap; gap: 14px 0; justify-content: center; }
.dep-seasons li { display: flex; position: relative; }
.dep-seasons li::after {
  /* per-tab line segment — adjacent segments join into one continuous rail */
  content: ""; position: absolute; left: 0; right: 0; bottom: 7px;
  height: 1.5px; background: #D4D8DC;
}
.dep-season {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  color: var(--ink); background: none; border: 0;
  padding: 6px 16px 0; white-space: nowrap;
  transition: color .2s;
}
.dep-chain { display: block; width: 34px; height: auto; color: #B9BFC6; transition: color .2s; padding: 0 8px; box-sizing: content-box; background: var(--paper); }
/* opaque silhouette under each link (nonzero = holes filled) so the rail
   reads as passing BEHIND the link instead of through its knockout holes */
.dep-chain .chain-backing { fill: var(--paper); }
button.dep-season:hover { color: var(--blue); }
button.dep-season:hover .dep-chain { color: var(--blue); }
.dep-season[aria-pressed="true"] { color: var(--blue); }
.dep-season[aria-pressed="true"] .dep-chain { color: var(--blue); }
.dep-season--empty { color: #B9C2CA; cursor: default; }
.dep-season--empty .dep-chain { color: #E4E8EB; }

.dep-types {
  display: flex; align-items: center; justify-content: center; gap: 10px 26px; flex-wrap: wrap;
  background: var(--blue-pale); border-radius: 2px;
  padding: 13px 22px; margin-bottom: 26px;
}
.dep-types-label {
  font-family: var(--font-display); font-size: 13.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--navy);
  margin-right: 6px;
}
.dep-type {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--ink);
  background: none; border: 0; border-radius: 999px; padding: 7px 14px;
  transition: background .2s, box-shadow .2s;
}
.dep-type svg { color: var(--blue); }
.dep-type:hover { background: rgba(255, 255, 255, .7); }
.dep-type[aria-pressed="true"] { background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue); }

/* Wider than the 1200px shell (client: "make the width a bit bigger to fit in
   the dates"), same break-out technique as .card-grid. */
.dep-list {
  display: flex; flex-direction: column; gap: 18px;
  width: min(100vw - 48px, 1360px);
  margin-inline: calc((100% - min(100vw - 48px, 1360px)) / 2);
}
.dep-row {
  display: grid; grid-template-columns: 180px minmax(0, 1fr) 184px auto;
  gap: 16px 24px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
  padding: 18px 24px 18px 18px;
}
.dep-thumb { display: block; width: 180px; aspect-ratio: 3/2; overflow: hidden; border-radius: 2px; }
.dep-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dep-info h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.dep-info h3 a { color: var(--ink); }
.dep-info h3 a:hover { color: var(--blue-deep); }
.dep-soft { font-weight: 400; color: var(--muted); }
.dep-meta { display: flex; gap: 10px 26px; flex-wrap: wrap; font-size: 16px; color: var(--body); }
.dep-meta span { display: inline-flex; align-items: center; gap: 8px; }
.dep-meta svg { color: var(--blue); flex: 0 0 auto; }
.dep-meta + .dep-dates { margin-top: 10px; }
/* every date of the tour, as wrapping chips under its name */
.dep-dates { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.dep-date {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; color: var(--body); white-space: nowrap;
  background: var(--blue-pale); border-radius: 2px; padding: 5px 10px;
}
.dep-date[hidden] { display: none; }
.dep-date svg { color: var(--blue); flex: 0 0 auto; }
.dep-date-meta { color: var(--muted); }
.dep-typecard { text-align: center; }
.dep-typecard-label {
  display: inline-block; font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blue-deep); white-space: nowrap;
  background: var(--blue-pale); border-radius: 2px; padding: 8px 14px;
}
/* buttons stacked so the dates column has room for four chips on one line */
.dep-actions { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1360px) {
  .dep-row { grid-template-columns: 140px minmax(0, 1fr) 160px auto; gap: 16px 18px; }
  .dep-thumb { width: 140px; }
  .dep-date { font-size: 14px; padding: 4px 9px; gap: 6px; }
  .dep-typecard-label { font-size: 12px; letter-spacing: .08em; padding: 8px 10px; }
}
.btn-pill { border-radius: 999px; padding: 13px 28px; }
.btn-pill--deep { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn-pill--deep:hover { background: var(--navy); border-color: var(--navy); }
.dep-empty { text-align: center; padding: 26px 0 8px; color: var(--muted); }
.cal-note { text-align: center; font-size: 16.5px; line-height: 1.7; color: var(--ink); margin-top: 22px; }

/* ============================================================
   VIDEO BAND
   ============================================================ */
.film { position: relative; overflow: hidden; background: var(--black); }
.film-frame { position: relative; max-width: 1060px; margin: 0 auto; }
.film-poster { position: relative; aspect-ratio: 16/9; cursor: pointer; border: 0; padding: 0; display: block; width: 100%; background: var(--black); }
.film-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.film-poster:hover img { opacity: .92; }
.film-play {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue); color: #fff;
  box-shadow: 0 0 0 10px rgba(53, 152, 219, .3);
  transition: transform .2s, background .2s;
}
.film-poster:hover .film-play { transform: translate(-50%, -50%) scale(1.07); background: var(--blue-deep); }
.film iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }
.film-head { text-align: center; color: #fff; padding: 72px 24px 40px; }
.film-head .section-title { color: #fff; }
.film-head .section-sub { color: rgba(255, 255, 255, .75); margin-bottom: 0; }
.film-inner-pad { padding-bottom: 84px; }

/* ============================================================
   REVIEW PLATFORMS — live third-party widgets
   (template-parts/home/review-platforms.php). No .section class, so the
   band carries its own vertical rhythm.
   ============================================================ */
.review-platforms { padding: 84px 0; }
/* embed dimensions are outside our control: give them room, never a height */
.review-platform-embed { min-width: 0; overflow-x: auto; }
.review-platform-embed + .review-platform-embed { margin-top: 26px; }
.review-platform-embed iframe { max-width: 100%; border: 0; display: block; }
.review-links { display: flex; justify-content: center; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
/* BTC's outline pills, in blue */
.review-link {
  display: inline-block; padding: 13px 30px;
  border: 2px solid var(--blue-deep); border-radius: 999px;
  color: var(--blue-deep); background: transparent;
  font-size: 14px; font-weight: 600; letter-spacing: 1px; line-height: 1;
  text-transform: uppercase;
  transition: background .25s, color .25s;
}
.review-link:hover, .review-link:focus-visible { background: var(--blue-deep); color: #fff; }
@media (max-width: 480px) { .review-link { width: 100%; text-align: center; } }
/* The header now also carries the Instagram glyph — on phones shrink the
   brand a step so the actions never ride over the wordmark (measured at 375). */
@media (max-width: 480px) {
  .header-inner { gap: 10px; }
  .header-actions { gap: 8px; }
  .brand { gap: 8px; }
  .brand-logo { width: 40px; }
  .brand-word { font-size: 17px; }
  .brand-tag { letter-spacing: .14em; }
}

/* ============================================================
   BESPOKE / CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 44px; align-items: start; }
.contact-form .field { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label {
  display: block; font-family: var(--font-display); font-size: 13.5px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 7px;
}
.field label span { color: var(--blue); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  padding: 12px 14px; background: #fff;
  border: 1px solid var(--line); border-radius: 2px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(53, 152, 219, .18);
}
.form-note { font-size: 15px; color: var(--muted); margin-top: 12px; }

/* ---------- contact split card ("How to find us? / Get in Touch" pattern) ----------
   Shared by the home #contact section (.contact-form-side) and the Contact page
   template (.get-in-touch); moved here from assets/css/pages/contact.css, which
   is not enqueued on the front page. */
.contact-split {
  display: grid; grid-template-columns: 1fr 1.3fr;
  border-radius: 2px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(16, 52, 78, .14);
}
.find-us {
  background: var(--navy); color: rgba(255, 255, 255, .85);
  padding: 54px 44px;
  display: flex; flex-direction: column; justify-content: center;
}
.find-us h3 {
  color: #fff; font-size: 19px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  text-align: center; margin-bottom: 12px;
}
.find-intro {
  font-size: 16px; line-height: 1.7; text-align: center;
  color: rgba(255, 255, 255, .72); margin-bottom: 34px;
}
.find-list { list-style: none; display: flex; flex-direction: column; gap: 24px; }
.find-row { display: flex; align-items: flex-start; gap: 16px; }
a.find-row { color: rgba(255, 255, 255, .88); }
a.find-row:hover .find-text, a.find-row:focus-visible .find-text { color: #fff; }
.find-ico {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  display: grid; place-items: center;
  color: var(--blue-light); font-size: 17px;
}
/* the Contact page uses a FontAwesome <i> here, the home section an inline SVG
   with stroke/fill="currentColor" — both inherit the colour above */
.find-ico svg { display: block; }
.find-label {
  display: block; font-family: var(--font-display);
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue-light); margin-bottom: 2px;
}
.find-text { font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.find-foot {
  margin-top: 36px; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 15px; text-align: center; color: rgba(255, 255, 255, .6);
}
.get-in-touch, .contact-form-side { background: var(--paper); padding: 54px 44px; }
.get-in-touch h3 {
  font-size: 19px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px;
}
.get-in-touch .form-lede { font-size: 16px; color: var(--muted); margin-bottom: 26px; }
/* the home section has no .form-lede (its .section-sub carries the intro), so
   the heading takes the whole gap above the form */
.contact-form-side h3 {
  font-size: 19px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 24px;
}

.aside-card {
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--blue);
  border-radius: 2px; padding: 22px 22px 20px; margin-bottom: 18px;
}
.aside-card-brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--ink);
  margin-bottom: 8px;
}
.aside-card-brand svg { flex: 0 0 auto; }
.aside-stars { color: var(--blue); font-size: 17px; letter-spacing: 2px; }
.aside-rank { font-size: 15px; color: var(--muted); margin: 6px 0 10px; }
.aside-quote { font-size: 15.5px; font-style: italic; color: var(--body); margin-bottom: 12px; }
.aside-card .btn { width: 100%; text-align: center; }
.aside-contacts { list-style: none; margin-top: 22px; }
.aside-contacts li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 16px;
}
.aside-contacts li span:first-child {
  font-family: var(--font-display); font-size: 13.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}

/* ============================================================
   GARAGE BAND
   ============================================================ */
.garage { background: var(--paper); }
.garage-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: center; }
.garage-media { border-radius: 2px; overflow: hidden; }
.garage-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.garage-body h2 { text-align: left; font-size: clamp(22px, 3vw, 30px); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.garage-body .chain-divider { justify-content: flex-start; margin: 14px 0 24px; }
.garage-body p { margin-bottom: 16px; }
.garage-logos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px;
}
.garage-logos img {
  height: 44px; width: auto; border-radius: 2px;
  filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s;
}
.garage-logos img:hover { filter: none; opacity: 1; }

/* ============================================================
   FOOTER
   ============================================================ */
/* ============================================================
   PAYMENT OPTIONS (template-parts/chrome/payment-band.php)
   Client, Oct 2026: "same as BTC — can make it even smaller in icons and to be
   put at the bottom." Mirrors bhutantravelclub.com, which renders its
   .btc-pay-band INSIDE .footer-bottom directly under the Terms / Privacy links
   as a footnote-sized trust strip (BTC custom.scss "AGENT-D" block: 11px muted
   label, 32px chips, 19px marks, Wise 14px). It now sits at the very bottom
   of the black footer, under .footer-base, one notch SMALLER than BTC's:
   28px chips / 16px marks / Wise 12px (the original 26:20 mark:Wise ratio,
   scaled). Marks are sized by height only, so each keeps the true aspect that
   inc/payments.php prints as its width/height attributes (26px base) — the
   CSS height scales every mark uniformly; no per-mark numbers change.
   Chips stay uniform white cards on purpose: that is what lets a monochrome
   mark (Apple Pay, Google Pay — both brands' acceptance marks are monochrome
   by design, they are not missing colour), a coloured card tile and a plain
   text chip sit in one row without looking mismatched — and on the dark
   footer the card ground is what keeps every mark legible, uncoloured.
   ============================================================ */
.payment-band {
  margin: 0 0 30px; padding: 0;
  text-align: center;
}
/* A small muted label, not a section heading: body face (the global h2 rule
   would otherwise set it in the display serif), same grey as the copyright. */
.payment-heading {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .08em;
  text-transform: uppercase; text-align: center; color: #7C8790;
  margin: 0 0 9px;
}
.payment-list {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px; margin: 0; padding: 0; list-style: none;
}
.payment-chip {
  display: flex; align-items: center; justify-content: center;
  min-width: 46px; height: 28px; padding: 0 8px;
  background: #fff; border: 1px solid rgba(255, 255, 255, .14); border-radius: 2px;
}
/* Height, never width: every mark is a different aspect and the template
   prints each one's true width, so constraining height is what makes the row
   optically even without distorting any artwork. */
.payment-chip img { display: block; height: 16px; width: auto; max-width: 100%; }
/* Wise is a wordmark whose letterforms fill the whole artwork, so at the row's
   own height it reads a size larger than the card tiles beside it. Kept at the
   original 26:20 ratio to the other marks. Never recoloured. */
.payment-chip--wise img { height: 12px; }
/* Text chip — used when a brand has no freely licensed artwork. Showing the
   name beats inventing a logo. */
.payment-word {
  font-family: var(--font-body);
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em; line-height: 1;
  color: var(--body); white-space: nowrap;
}

.site-footer { background: var(--black); color: #98A2AC; }
.featured-on { border-bottom: 1px solid rgba(255, 255, 255, .08); padding: 46px 0 40px; }
.featured-on h2 {
  color: #fff; font-size: 14.5px; font-weight: 700; letter-spacing: .28em;
  text-transform: uppercase; text-align: center; margin-bottom: 26px;
}
/* Client, Oct 2026: "use the side spaces as it is looking too congested. Some
   spacing between each icon is needed." The row breaks out of the 1200px .shell
   to near full viewport width (same breakout as .card-grid), and the logos get a
   generous, even column gap instead of the old 980px-capped 28px squeeze. */
.featured-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 26px 64px;
  width: min(100vw - 48px, 1800px);
  margin-inline: calc((100% - min(100vw - 48px, 1800px)) / 2);
}
.featured-row a {
  flex: 0 0 auto; max-width: 100%;
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  letter-spacing: .04em; color: rgba(255, 255, 255, .55);
  text-transform: uppercase; transition: color .2s; white-space: nowrap;
  display: inline-flex; align-items: center;
}
.featured-row a:hover { color: #fff; }

/* Press logo images: normalized to white marks on the dark band. One fixed
   height for every logo; width follows the artwork, capped so a very wide
   wordmark can't dominate (object-fit keeps it whole, never cropped). */
.featured-row img.featured-logo {
  display: block; height: 28px; width: auto; max-width: 150px; object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .62; transition: opacity .2s;
}
.featured-row a:hover img.featured-logo { opacity: 1; }
@media (max-width: 1100px) {
  .featured-row { gap: 24px 48px; }
}
@media (max-width: 620px) {
  .featured-row { gap: 20px 30px; }
  .featured-row img.featured-logo { height: 22px; max-width: 112px; }
}

.footer-mid { padding: 38px 0 8px; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 30px; }
.footer-nav a {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #C6CDD3;
}
.footer-nav a:hover { color: var(--blue-light); }
.footer-social { display: flex; justify-content: center; gap: 14px; padding: 26px 0 8px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .22); color: #C6CDD3;
  transition: background .2s, color .2s, border-color .2s;
}
.footer-social a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  padding: 20px 0 30px; font-size: 14.5px; color: #7C8790;
}
.footer-base a { color: #A5AEB6; }
.footer-base a:hover { color: #fff; }

/* floating actions */
.float-stack { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
/* On phones the fixed WhatsApp + back-to-top stack (~130px tall) would sit on
   the payment chips at the very end of the page; reserve that space below them. */
@media (max-width: 620px) { .site-footer { padding-bottom: 140px; } }
.to-top {
  width: 44px; height: 44px; border: 0; border-radius: 2px;
  background: var(--navy); color: #fff; display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.to-top.is-visible { opacity: 1; pointer-events: auto; }
.to-top:hover { background: var(--blue); }
.float-wa {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--wa-green); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
}
.float-wa:hover { color: #fff; filter: brightness(.93); }

/* ============================================================
   TOUR PAGE
   ============================================================ */
/* Shared inner-page hero size (.tour-hero / .page-hero). */
.tour-hero { position: relative; height: min(88vh, 780px); min-height: 520px; overflow: hidden; background: var(--navy); }
.tour-hero img { width: 100%; height: 100%; object-fit: cover; }
.tour-hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 18, 22, .25) 0%, rgba(14, 18, 22, .05) 45%, rgba(14, 18, 22, .68) 100%);
}
.tour-hero-content { position: absolute; left: 0; right: 0; bottom: 0; }
.tour-hero-content .shell { padding-bottom: 54px; color: #fff; }
.tour-hero-content .type-badge { margin-bottom: 14px; background: rgba(255,255,255,.96); }
.tour-hero-content h1 {
  color: #fff; font-size: clamp(28px, 4.4vw, 48px); font-weight: 800;
  text-transform: uppercase; text-shadow: 0 2px 16px rgba(0, 0, 0, .4);
}
.crumbs { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 12px; }
.crumbs a { color: #fff; }

.tour-intro { padding: 70px 0 8px; }
.tour-intro-grid { max-width: 880px; margin: 0 auto; }
.tour-intro h2 { font-size: clamp(20px, 2.6vw, 27px); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px; text-align: center; }
.tour-intro .chain-divider { margin-bottom: 28px; }
.tour-intro p { margin-bottom: 14px; }

/* facts — Himalayan Rides-style icon parameters */
.facts { padding: 56px 0 30px; }
.facts-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 28px;
  max-width: 980px; margin: 0 auto;
}
.fact { display: flex; align-items: center; gap: 18px; padding: 20px 8px; border-bottom: 1px solid var(--paper); }
.fact-icon { flex: 0 0 auto; color: var(--blue); display: grid; place-items: center; }
.fact-label {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 3px;
}
.fact-value {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--ink); line-height: 1.45;
}

/* tour dates */
.dates { padding: 40px 0 70px; }
.dates-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 980px; margin: 0 auto; }
.dates-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 680px; }
.dates-grid--1 { grid-template-columns: 1fr; max-width: 420px; }
.date-card {
  border: 1px solid var(--line); border-radius: 2px;
  background: #fff; padding: 22px 22px 24px; text-align: center;
}
.date-card-range { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--blue-deep); margin-bottom: 4px; }
.date-card-note { font-size: 15px; color: var(--muted); margin-bottom: 16px; }
.date-card .btn { width: 100%; }
.date-card--open .date-card-note::before { content: "● "; color: #2FA84F; }
.dates-request { text-align: center; max-width: 640px; margin: 0 auto; }
.dates-request p { margin-bottom: 18px; }

/* highlights + itinerary split */
.hl-iti { background: var(--paper); padding: 84px 0; }
.hl-iti-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 48px; align-items: start; }
.hl-col h2, .iti-col h2 {
  font-size: 20px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 22px;
}
.hl-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.hl-list li { display: flex; gap: 12px; font-size: 16.5px; background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 14px 16px; }
.hl-list svg { flex: 0 0 auto; color: var(--blue); margin-top: 3px; }

.iti-acc { display: flex; flex-direction: column; gap: 10px; position: relative; padding-left: 38px; }
.iti-acc::before {
  /* fine dotted timeline running the full height of the list; centered at x=7px */
  content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px;
  background-image: repeating-linear-gradient(to bottom,
    rgba(53, 152, 219, .55) 0, rgba(53, 152, 219, .55) 2px, transparent 2px, transparent 7px);
}
.iti-day { background: #fff; border: 1px solid var(--line); border-radius: 2px; }
.iti-day summary {
  list-style: none; display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; cursor: pointer; user-select: none; position: relative;
}
.iti-day summary::before {
  /* timeline dot — anchored to the summary row so it stays centered on the
     day header whether the accordion panel is open or closed */
  content: ""; position: absolute; left: -39px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 0 3px var(--paper);
}
.iti-day summary::-webkit-details-marker { display: none; }
.iti-day-num {
  flex: 0 0 auto; font-family: var(--font-display); font-size: 12.5px; font-weight: 800;
  letter-spacing: .06em; line-height: 1; color: #fff; background: var(--blue-deep);
  padding: 6px 14px; border-radius: 999px; text-transform: uppercase;
}
/* Title reads as a heading, body matches the 17px site base — one type scale. */
.iti-day-title { flex: 1; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink); }
.iti-chev { flex: 0 0 auto; color: var(--muted); transition: transform .25s; }
.iti-day[open] .iti-chev { transform: rotate(180deg); }
.iti-day[open] summary { border-bottom: 1px solid var(--paper); }
.iti-day-body { padding: 14px 18px 18px; font-size: 17px; line-height: 1.7; }
.iti-day-meta { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-deep); margin-top: 10px; }

/* per-day ride stats — the six numeric fields printed under the day text and
   the ride_meta line (template-parts/tour/itinerary.php). Same icon + label +
   value language as the .fact grid, scaled down for the narrow accordion
   panel; the hairline repeats the --paper rule .iti-day[open] summary uses,
   so the row reads as a separate register inside the same white card. Only
   the fields that hold a value are printed, so the count per day varies.
   auto-fit, not a column count per breakpoint:
   this panel does NOT simply narrow as the viewport does — .hl-iti-grid
   collapsing at 960 makes it WIDER (≈558px desktop, ≈836px at 960, ≈276px on
   a phone), so no fixed 1080/960/620 ladder can hold. 216px is the widest
   item the six fields need — "Hours on the Saddle" (≈183px) plus the 18px
   icon and its 10px gap — which keeps every label on one line; the min() lets
   a panel narrower than that fall back to one wrapping column rather than
   overflowing. */
.iti-stats {
  list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(216px, 100%), 1fr));
  gap: 12px 20px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--paper);
}
.iti-stat { display: flex; align-items: center; gap: 10px; }
/* the icons carry their own 18px width/height attributes — cf. .fact-icon,
   whose SVGs are the 40px facts-grid cut of the same drawing language */
.iti-stat-icon { flex: 0 0 auto; color: var(--blue); display: grid; place-items: center; }
/* facts.php separates its label from its value with a <br />; this markup
   does not, so the two spans have to be blocks or they run together */
.iti-stat-text { display: block; min-width: 0; }
.iti-stat-label {
  display: block;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  line-height: 1.35; margin-bottom: 2px;
}
.iti-stat-value {
  display: block;
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  color: var(--ink); line-height: 1.4;
}
/* the unit keeps the same relationship to its figure that .ride-unit keeps
   in the summary table — smaller, quieter, uppercase */
.iti-stat-unit {
  font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}

/* trip gallery — 3 cols, click to enlarge (lightbox) */
.tgallery { padding: 84px 0; }
.tgallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  width: min(100vw - 48px, 1800px);
  margin-inline: calc((100% - min(100vw - 48px, 1800px)) / 2);
}
.tgallery-grid figure { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 2px; cursor: pointer; }
.tgallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; cursor: pointer; }
.tgallery-grid figure:hover img { transform: scale(1.06); }

/* FAQ accordion (shared) */
.faq-section { background: var(--paper); padding: 84px 0; }
.faq-list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 2px; }
.faq-item summary {
  list-style: none; display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; cursor: pointer; user-select: none;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q-icon { flex: 0 0 auto; color: var(--blue); }
.faq-item summary .iti-chev { margin-left: auto; }
.faq-item[open] .iti-chev { transform: rotate(180deg); }
.faq-item-body { padding: 2px 20px 18px 54px; font-size: 16px; }
.faq-item-body p { margin-bottom: 10px; }
.faq-more { text-align: center; margin-top: 34px; }

/* private trip band */
.private { padding: 84px 0; }
.private .contact-grid { margin-top: 10px; }

/* page hero (faq / gallery) */
/* Shared inner-page hero size (.tour-hero / .page-hero). */
.page-hero { position: relative; height: min(88vh, 780px); min-height: 520px; overflow: hidden; background: var(--navy); }
.page-hero img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.page-hero-content { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.page-hero-content h1 { color: #fff; font-size: clamp(30px, 4.5vw, 48px); font-weight: 800; text-transform: uppercase; }
.page-hero-content .hero-sub { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
@media (max-width: 620px) {
  .page-hero { height: min(46vh, 400px); min-height: 320px; }
}

/* gallery page grid */
.gpage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gpage-grid figure { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 2px; }
.gpage-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.gpage-grid figure:hover img { transform: scale(1.06); }

/* ============================================================
   REVEALS
   ============================================================ */
html.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
html.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero-slide { transition: none; }
  .card, .card-media img, .disc img, .tgallery-grid img, .gpage-grid img { transition: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .primary-nav { gap: 20px; }
  .facts-grid { grid-template-columns: repeat(2, 1fr); }
  .bike-card { flex-basis: calc((100% - 28px) / 3); }
  .partner-logo { flex-basis: calc((100% - 42px) / 4); }
}
@media (max-width: 960px) {
  .primary-nav { display: none; }
  .nav-toggle { display: flex; }
  .wa-btn .wa-label { display: none; }
  .benefit-cols { grid-template-columns: 1fr 1fr; gap: 26px 0; }
  .bcol + .bcol { border-left: 0; }
  .bcol:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .2); }
  .disciplines { padding: 64px 0; }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .disc-grid { grid-template-columns: 1fr; }
  .bike-card { flex-basis: calc((100% - 14px) / 2); }
  .partner-logo { flex-basis: calc((100% - 28px) / 3); }
  .bikes-filter { gap: 6px 8px; margin-bottom: 22px; }
  .dep-row { grid-template-columns: 140px 1fr; }
  .dep-typecard { display: none; }
  .dep-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .dep-thumb { width: 140px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-split { grid-template-columns: 1fr; }
  .hl-iti-grid { grid-template-columns: 1fr; }
  .dates-grid, .dates-grid--2 { grid-template-columns: 1fr; max-width: 480px; }
  .tgallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gpage-grid { grid-template-columns: repeat(3, 1fr); }
  .garage-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .section { padding: 64px 0; }
  .benefit-cols { grid-template-columns: 1fr; gap: 26px 0; }
  .bcol:nth-child(even) { border-left: 0; }
  .card-grid { grid-template-columns: 1fr; }
  /* The chips wrap to several rows on a phone, so every pixel of chip height
     multiplies. Shrinking the marks in step keeps them optically centred. */
  .payment-band { margin-bottom: 24px; }
  .payment-list { gap: 5px; }
  .payment-chip { min-width: 42px; height: 26px; padding: 0 7px; }
  .payment-chip img { height: 15px; }
  .payment-chip--wise img { height: 11px; }
  .payment-word { font-size: 10px; }
  .review-platforms { padding: 64px 0; }
  .bike-card { flex-basis: 76%; }
  .partner-logo { flex-basis: calc((100% - 14px) / 2); }
  .bikes-arrow, .partners-arrow { display: none; }
  /* let the bar span the shell instead of hugging, so wrapped chips stay a
     tidy block rather than a ragged centred stack */
  .bikes-filter { width: auto; padding: 8px 10px; }
  .bikes-type { font-size: 15.5px; padding: 6px 12px; }
  .find-us, .get-in-touch, .contact-form-side { padding: 40px 26px; }
  .field-row { grid-template-columns: 1fr; }
  .dep-seasons { gap: 4px 8px; }
  .dep-seasons li::after { display: none; }
  .dep-season .dep-chain { display: none; }
  .dep-season { padding: 6px 10px; }
  .dep-season[aria-pressed="true"] {
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  }
  .dep-row { grid-template-columns: 1fr; padding: 16px; }
  .dep-thumb { width: 100%; }
  .facts-grid { grid-template-columns: 1fr; }
  .iti-acc { padding-left: 28px; }
  .iti-day summary::before { width: 12px; height: 12px; left: -28px; }
  .tgallery-grid { grid-template-columns: 1fr; }
  .gpage-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-content .shell { padding-bottom: 64px; }
  .hero-arrow { display: none; }
  .featured-row a { font-size: 14.5px; }
}

/* ============================================================
   TRIP GALLERY LIGHTBOX
   Overlay viewer for the Trip Gallery on tours/*.html
   (markup injected by main.js — see "trip gallery lightbox")
   ============================================================ */
.tg-lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: none; align-items: center; justify-content: center;
  background: rgba(9, 17, 26, .92);
  padding: 24px;
}
.tg-lightbox.is-open { display: flex; }
body.tg-lightbox-open { overflow: hidden; }

.tg-lightbox figure { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.tg-lightbox img {
  display: block; max-width: 90vw; max-height: 85vh; width: auto; height: auto;
  border-radius: 2px; box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.tg-lightbox figcaption {
  color: rgba(255, 255, 255, .85); font-family: var(--font-display);
  font-size: 14.5px; font-weight: 600; letter-spacing: .02em; text-align: center;
}

.tg-lightbox-close,
.tg-lightbox-arrow {
  position: absolute; display: grid; place-items: center; padding: 0;
  background: rgba(255, 255, 255, .12); color: #fff; border: 0; border-radius: 50%;
  cursor: pointer; transition: background .25s;
}
.tg-lightbox-close:hover, .tg-lightbox-close:focus-visible,
.tg-lightbox-arrow:hover, .tg-lightbox-arrow:focus-visible { background: var(--blue); }
.tg-lightbox-close { top: 18px; right: 18px; width: 44px; height: 44px; font-size: 30px; line-height: 1; }
.tg-lightbox-arrow { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 20px; }
.tg-lightbox-prev { left: 18px; }
.tg-lightbox-next { right: 18px; }

@media (max-width: 620px) {
  .tg-lightbox { padding: 16px; }
  .tg-lightbox img { max-width: 94vw; max-height: 76vh; }
  .tg-lightbox-arrow { top: auto; bottom: 14px; transform: none; width: 42px; height: 42px; font-size: 17px; }
  .tg-lightbox-prev { left: 16px; }
  .tg-lightbox-next { right: 16px; }
}

/* ============================================================
   TOUR ITINERARY MAP
   Leaflet map beside the day-to-day list on tours/*.html.
   Markup: .iti-map[data-tour-map] in .hl-col · logic in main.js
   ("tour itinerary map") · vendor files in assets/vendor/leaflet
   ============================================================ */
.iti-map {
  position: relative;                        /* containing block for the canvas */
  margin-bottom: 26px;
  aspect-ratio: 1 / 1;
  min-height: 380px; max-height: 72vh;
  background: var(--paper);
  border: 1px solid var(--line); border-radius: 2px;
  overflow: hidden;
}
html:not(.js) .iti-map { display: none; }   /* map is JS-only; hide the empty frame */
.iti-map-canvas { position: absolute; inset: 0; z-index: 0; }

/* numbered teardrop pins (Leaflet divIcon, 30 × 42) */
.iti-pin { filter: drop-shadow(0 3px 4px rgba(14, 18, 22, .35)); }
.iti-pin svg { display: block; }
.iti-pin svg path { fill: #fff; stroke: rgba(16, 52, 78, .5); stroke-width: 1; transition: fill .2s; }
.iti-pin span {
  position: absolute; top: 0; left: 0; width: 100%; height: 30px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 800;
  color: var(--navy); transition: color .2s;
}
.iti-pin:hover svg { transform: scale(1.08); transform-origin: 50% 100%; }
.iti-pin.is-active svg path { fill: var(--navy); stroke: var(--navy); }
.iti-pin.is-active span { color: #fff; }

/* active-stop chip, top-left (sits above the Leaflet canvas) */
.iti-map-chip {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 2px; padding: 9px 14px;
  box-shadow: 0 2px 10px rgba(14, 18, 22, .22);
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--navy);
  pointer-events: none;
}
.iti-map-chip svg { flex: 0 0 auto; color: var(--blue); }

/* fullscreen toggle (custom Leaflet control, styled like the zoom bar) */
.iti-map-fs {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  background: #fff; color: var(--navy);
  border: 2px solid rgba(0, 0, 0, .2); border-radius: 4px;
}
.iti-map-fs:hover { background: #f4f4f4; }
.iti-map .iti-fs-shrink { display: none; }
.iti-map:fullscreen .iti-fs-expand { display: none; }
.iti-map:fullscreen .iti-fs-shrink { display: block; }
.iti-map.is-fullscreen .iti-fs-expand { display: none; }
.iti-map.is-fullscreen .iti-fs-shrink { display: block; }

/* fullscreen states — native, then the CSS fallback class (Safari etc.) */
.iti-map:fullscreen { aspect-ratio: auto; max-height: none; border-radius: 0; }
.iti-map.is-fullscreen {
  position: fixed; inset: 0; z-index: 500;
  aspect-ratio: auto; max-height: none; min-height: 0;
  margin: 0; border: 0; border-radius: 0;
}
body.iti-map-fs-open { overflow: hidden; }

/* sticky map rail (desktop) — client, Oct 2026: "can the MAP be stationary
   while scrolling the itinerary (like BTC)". Same technique as BTC's
   "Client r10" rail (btc/assets/css/custom.scss): the map shares .hl-col with
   the highlights, so the COLUMN is the sticky element — sticking only .iti-map
   would slide it over the highlights and release at .hl-col's own short
   bottom. The rail is capped to the free viewport height and is a flex column:
   the map keeps a fixed, viewport-derived height and only the highlights list
   scrolls internally when it does not fit. .hl-col is a grid item of
   .hl-iti-grid (align-items:start), so the stick releases exactly where the
   itinerary column ends. No ancestor sets overflow (checked). --header-h is
   constant while scrolling, so the map never resizes mid-scroll; site.js
   still calls invalidateSize() via a ResizeObserver for window resizes. */
@media (min-width: 961px) and (min-height: 681px) {
  .hl-col {
    position: sticky; top: calc(var(--header-h) + 16px); align-self: start;
    max-height: calc(100vh - var(--header-h) - 32px);
    display: flex; flex-direction: column; min-width: 0;
  }
  .hl-col .iti-map {
    flex: none; aspect-ratio: auto; min-height: 0; max-height: none;
    height: clamp(300px, calc(100vh - var(--header-h) - 32px - 300px), 520px);
  }
  .hl-col .iti-map.is-fullscreen { height: auto; }   /* CSS fallback uses inset:0 */
  .hl-col h2 { flex: none; }
  .hl-col .hl-list {
    flex: 1 1 auto; min-height: 120px;
    overflow-y: auto; overscroll-behavior: auto; scrollbar-width: thin;
    padding-right: 4px;
  }
}

/* stacked layout (grid collapses at 960px): map sits between the
   highlights and the itinerary at a fixed height, no longer sticky */
@media (max-width: 960px) {
  .iti-map { aspect-ratio: auto; height: 360px; min-height: 0; }
}

/* =========================================================================
   Enquiry form security + AJAX states (WordPress additions)
   ========================================================================= */
/* Honeypot field (br_form_security): removed from view and tab order for
   humans, still present in the DOM for bots. */
.br-hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Form note states set by site.js after client validation / AJAX submit. */
.form-note.is-error { color: #B3261E; }
.form-note.is-success { color: var(--blue-deep); }

/* ============================================================
   RIDE STATS — day-by-day hours / distance / elevation table
   (template-parts/tour/ride-stats.php). Reproduces the client's
   reference layout — dark header band, unstriped rows, one
   strongly accented final totals row — in this theme's own
   palette: navy band, var(--line) rules, blue totals.
   The band keeps the default white ground: it sits between the
   paper .hl-iti section and the white .tgallery, and the chain
   divider's backing is already --white.
   ============================================================ */

/* The <caption> is a screen-reader summary only — the visible .section-title
   above already names the table, so an unhidden caption would just repeat it
   as stray body text. No sr-only utility exists in this theme, so the clip
   pattern is repeated here (cf. .br-hp above; no !important needed, there is
   no competing rule to beat). */
.ride-stats-caption {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* The scroller. Seven columns cannot fit a phone, so the table scrolls INSIDE
   this box; .shell is a plain max-width block, so the table's min-content
   width can never widen the section the way it would through a bare 1fr grid
   track (see the .tr-layout note in pages/travel-resources.css).
   980px + auto margins is the tour page's own content measure — same as
   .facts-grid and .dates-grid. It is focusable (tabindex="0") so the keyboard
   can reach the scroll; the global :focus-visible outline covers it. */
.ride-stats-wrap {
  max-width: 980px; margin: 0 auto;
  overflow-x: auto;
}

.ride-stats-table {
  width: 100%; min-width: 700px;
  border-collapse: collapse;
  font-size: 16px;
  font-variant-numeric: tabular-nums;   /* digits line up down each column */
}
.ride-stats-table th, .ride-stats-table td {
  border: 1px solid var(--line);
  padding: 12px 14px;
  text-align: center;
  white-space: nowrap;                  /* never break "13,465" from its unit */
}

/* header band: display face, uppercase, white on navy. The labels run two and
   three words long, so they alone are allowed to wrap — vertical-align keeps
   one-line and two-line labels sharing the same bottom edge, which is what
   stops the row height jumping between breakpoints. */
.ride-stats-table thead th {
  background: var(--navy); color: #fff;
  border-color: rgba(255, 255, 255, .16);   /* var(--line) would vanish on navy */
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  vertical-align: bottom;
  white-space: normal;
}
.ride-stats-table thead th:first-child { text-align: left; }

/* body: clean white rows, no zebra — the rules do the separating */
.ride-stats-table tbody td { color: var(--ink); }
/* the Day column is <th scope="row">, NOT a <td>: without this it keeps the
   UA's centred bold default and misses every rule aimed at td. Stronger face
   and navy mark it as the row key. */
.ride-stats-table tbody th {
  text-align: left;
  font-family: var(--font-display); font-weight: 700;
  color: var(--navy);
}
/* wide table read sideways — give the eye a row to hold on to */
.ride-stats-table tbody tr:not(.ride-stats-totals):hover th,
.ride-stats-table tbody tr:not(.ride-stats-totals):hover td { background: var(--blue-pale); }

/* unit suffix after each figure — smaller and quieter than the number */
.ride-unit {
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}

/* totals row — visually final. Scoped through .ride-stats-table so it OUTRANKS
   the tbody th / tbody td colour rules above: a bare .ride-stats-totals th
   loses to .ride-stats-table tbody th on specificity, and would leave the
   "Totals" label navy-on-blue however late it is declared. */
.ride-stats-table .ride-stats-totals th,
.ride-stats-table .ride-stats-totals td {
  background: var(--blue); color: #fff;
  border-color: rgba(255, 255, 255, .24);
  font-weight: 700;
}
.ride-stats-table .ride-stats-totals th {
  font-family: var(--font-display);
  letter-spacing: .06em; text-transform: uppercase;
}
.ride-stats-totals .ride-unit { color: rgba(255, 255, 255, .72); }

@media (max-width: 1080px) {
  .ride-stats-table { font-size: 15.5px; }
  .ride-stats-table th, .ride-stats-table td { padding: 11px 12px; }
}
@media (max-width: 960px) {
  .ride-stats-table th, .ride-stats-table td { padding: 10px 11px; }
  .ride-stats-table thead th { font-size: 12.5px; letter-spacing: .08em; }
}
@media (max-width: 620px) {
  .ride-stats-table { font-size: 15px; min-width: 600px; }
  .ride-stats-table th, .ride-stats-table td { padding: 9px 10px; }
  .ride-stats-table thead th { font-size: 12px; letter-spacing: .06em; }
  .ride-unit { font-size: 11.5px; }
}

/* ============================================================
   BLOG — posts index (home.php), archives (archive.php) and single
   posts (single.php). Markup: template-parts/blog/{listing,card}.php.
   Layout ported from bhutantravelclub.com/blog/ (hero → category pills →
   featured post → card grid; single = hero + reading-width article + more
   stories), in this theme's blue palette. Cards reuse the shared tour-card
   component (.card / .card-media / .card-cap / .card-btn) above; only the
   blog-specific pieces live here. Self-contained: own media queries below.
   ============================================================ */
/* WP core prints .screen-reader-text headings in the pagination / post nav;
   the theme has no global rule for it, so hide them inside the blog only. */
.blog-index .screen-reader-text,
.blog-article .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
}

/* hero — shorter than the 780px page-hero; listing + single share it */
.page-hero--blog { height: min(62vh, 520px); min-height: 380px; }
.page-hero--post { height: min(72vh, 620px); min-height: 440px; }
.page-hero--blog .page-hero-content,
.page-hero--post .page-hero-content { padding-inline: 24px; justify-items: center; }
.page-hero--post h1 { max-width: 900px; text-transform: none; letter-spacing: 0; line-height: 1.2; }
.page-hero--blog .hero-sub { max-width: 640px; margin: 10px auto 0; font-size: 17px; }
.blog-crumb {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  margin-bottom: 12px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.blog-crumb a { color: rgba(255, 255, 255, .85); }
.blog-crumb a:hover { color: #fff; }
.blog-crumb > span:last-child { color: var(--blue-light); }
.blog-crumb span[aria-hidden] { color: var(--blue-light); }
.page-hero--post .type-badge { margin-bottom: 14px; }
.page-hero--post .type-badge--solid:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }

/* date / read-time line (cards + post hero) */
.blog-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  font-size: 14px; font-weight: 500; color: var(--muted);
  margin: 0 0 10px;
}
.blog-meta span { display: inline-flex; align-items: center; gap: 6px; }
.blog-meta svg { flex: 0 0 auto; color: var(--blue); }
.blog-meta--hero { justify-content: center; margin: 16px 0 0; color: rgba(255, 255, 255, .9); font-size: 15px; }
.blog-meta--hero svg { color: var(--blue-light); }

/* category pills — server-side links (BTC uses JS filter buttons) */
.blog-index { padding-top: 48px; }
.blog-pills {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 0 auto 38px;
}
.blog-pill {
  display: inline-flex; align-items: center;
  font-size: 14.5px; font-weight: 500; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 20px;
  transition: border-color .2s, color .2s, background .2s, box-shadow .2s;
}
.blog-pill:hover { border-color: var(--blue); color: var(--blue-deep); }
.blog-pill[aria-current="page"] {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 6px 14px rgba(53, 152, 219, .28);
}

/* cards */
.blog-card .card-media { background: var(--blue-pale); }
.blog-card-title { font-size: 21px; font-weight: 600; line-height: 1.25; margin: 0 0 10px; }
.blog-card-title a { color: var(--ink); transition: color .2s; }
.blog-card-title a:hover { color: var(--blue-deep); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* featured — wide two-column card above the grid */
.blog-card--featured { flex-direction: row; margin-bottom: 34px; }
.blog-card--featured .card-media { flex: 0 0 56%; aspect-ratio: auto; min-height: 400px; }
.blog-card--featured .card-cap { justify-content: center; padding: 40px 44px; }
.blog-card--featured .blog-card-title { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.25; margin-bottom: 14px; }
.blog-card--featured .card-blurb { font-size: 17px; margin-bottom: 26px; }

/* pagination (the_posts_pagination) */
.blog-pagination { margin-top: 48px; }
.blog-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.blog-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 14px;
  font-size: 15px; font-weight: 600; color: var(--ink);
  border: 1px solid var(--line); border-radius: 2px; background: #fff;
}
.blog-pagination a.page-numbers:hover { border-color: var(--blue); color: var(--blue-deep); }
.blog-pagination .page-numbers.current { background: var(--blue); border-color: var(--blue); color: #fff; }
.blog-pagination .page-numbers.dots { border-color: transparent; }

/* empty state */
.blog-empty {
  max-width: 560px; margin: 10px auto 20px; padding: 48px 28px;
  text-align: center;
  background: var(--paper); border: 1px dashed var(--line); border-radius: 2px;
}
.blog-empty svg { margin: 0 auto 16px; color: var(--blue); }
.blog-empty h2 { font-size: 26px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.blog-empty p { color: var(--muted); font-size: 16px; margin-bottom: 24px; }

/* single — reading-width article */
.blog-article { padding-top: 60px; padding-bottom: 60px; }
.blog-prose,
.blog-article-foot,
.blog-post-nav { max-width: 760px; margin-inline: auto; }
.blog-prose { font-size: 17.5px; line-height: 1.8; color: var(--body); }
.blog-prose > * + * { margin-top: 22px; }
.blog-prose h2 { font-size: 28px; margin-top: 44px; }
.blog-prose h3 { font-size: 22px; margin-top: 34px; }
.blog-prose h2 + *, .blog-prose h3 + * { margin-top: 12px; }
.blog-prose a { text-decoration: underline; text-underline-offset: 3px; }
.blog-prose ul, .blog-prose ol { padding-left: 1.3em; }
.blog-prose li + li { margin-top: 8px; }
.blog-prose img { height: auto; border-radius: 2px; }
.blog-prose figure { margin-inline: 0; }
.blog-prose figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); text-align: center; }
.blog-prose blockquote {
  margin-inline: 0; padding: 16px 24px;
  border-left: 4px solid var(--blue); background: var(--blue-pale);
  font-family: var(--font-display); font-size: 20px; line-height: 1.55; color: var(--navy);
}
.blog-prose blockquote p { margin: 0; }
.blog-article-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line);
}
.blog-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.blog-tags span { font-weight: 600; color: var(--ink); }
.blog-tags a {
  background: var(--blue-pale); color: var(--blue-deep);
  border-radius: 2px; padding: 4px 11px;
}
.blog-tags a:hover { background: var(--blue); color: #fff; }
.blog-back { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--blue-deep); transition: gap .2s; }
.blog-back:hover { gap: 12px; }
.blog-post-nav { margin-top: 32px; }
.blog-post-nav .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.blog-post-nav .nav-next { grid-column: 2; text-align: right; }
.blog-post-nav a {
  display: flex; flex-direction: column; gap: 4px; height: 100%;
  padding: 18px 20px; border: 1px solid var(--line); border-radius: 2px;
  transition: border-color .2s, box-shadow .2s;
}
.blog-post-nav a:hover { border-color: var(--blue); box-shadow: 0 10px 24px rgba(16, 52, 78, .1); }
.blog-nav-label { font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.blog-nav-title { font-family: var(--font-display); font-size: 18px; line-height: 1.3; color: var(--ink); }
.blog-more .section-title { margin-bottom: 0; }

@media (max-width: 960px) {
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .blog-card--featured { flex-direction: column; }
  .blog-card--featured .card-media { flex-basis: auto; aspect-ratio: 16/10; min-height: 0; }
  .blog-card--featured .card-cap { padding: 28px 26px 30px; }
}
@media (max-width: 620px) {
  .blog-index { padding-top: 36px; }
  .page-hero--blog { height: min(46vh, 380px); min-height: 300px; }
  .page-hero--post { height: min(60vh, 460px); min-height: 360px; }
  .blog-crumb { font-size: 11.5px; letter-spacing: .16em; }
  .blog-pills { gap: 8px; margin-bottom: 28px; }
  .blog-pill { font-size: 14px; padding: 7px 16px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card--featured .card-cap { padding: 22px; }
  .blog-prose { font-size: 16.5px; }
  .blog-prose h2 { font-size: 24px; }
  .blog-post-nav .nav-links { grid-template-columns: 1fr; }
  .blog-post-nav .nav-next { grid-column: auto; }
  .blog-empty { padding: 36px 20px; }
}