/**
 * KT Core — "Altitude Protocol" dark expedition editorial design.
 * Barlow Condensed (display) + Barlow (body) + Playfair Display (italic) + Space Mono (data)
 */

/* ── DESIGN TOKENS ──────────────────────────────────────────── */
:root {
  --void: #050709;
  --abyss: #0b1117;
  --surface: #131c23;
  --ridge: #1c2b34;
  --graphite: #243340;
  --mist: #3d5462;
  --fog: #8aaabb;
  --paper: #ede8e1;
  --snow: #f7f4f0;

  --copper: #c29448;
  --copper-light: #deb06a;
  --copper-dim: #7a5c26;
  --copper-glow: rgba(194, 148, 72, 0.18);
  /* Filled amber surfaces (buttons, active pills) are theme-independent: the light theme's
     --copper (#a87828) only reaches 3.7:1 against the mandated dark text. */
  --copper-fill: #c29448;
  --copper-fill-hover: #deb06a;
  --on-copper: #3a2410;
  --ice: #5ec4cc;
  --ice-pale: #a2dce0;
  --signal: #d64820;

  --font-display: "Barlow Condensed", sans-serif;
  --font-serif: "Playfair Display", serif;
  --font-sans: "Barlow", sans-serif;
  --font-mono: "Space Mono", monospace;

  --maxw: 1360px;
  --maxscreen: 1920px;
  --nav-h: 72px;
  --r: 2px;
  --r-lg: 8px;

  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;
  --sp-8: 128px;

  --shadow: 0 32px 80px rgba(0, 0, 0, 0.72);
  --shadow-sm: 0 10px 36px rgba(0, 0, 0, 0.55);

  /* Override Kadence palette vars with our dark equivalents so any
     Kadence CSS rule using these vars is forced dark. */
  --global-palette8: #050709;
  --global-palette9: #0b1117;
  --global-palette3: #1c2b34;
  --global-palette4: #243340;
}

/* ── RESET ──────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

/* Scale root em upward on desktop so all rem-based sizes grow proportionally.
   Breakpoints start well above the 860px nav-to-hamburger switchover so the
   nav never runs out of room due to larger font. */
html {
  font-size: 16px;
}
@media (min-width: 1100px) {
  html {
    font-size: 17px;
  }
}
@media (min-width: 1440px) {
  html {
    font-size: 18px;
  }
}

body {
  font-family: var(--font-sans);
  background: var(--void) !important;
  color: var(--paper);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;
  max-width: var(--maxscreen);
  margin-inline: auto;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Kill every light background Kadence might inject */
.site,
.site-main,
.content-bg,
.wp-block-group,
.wp-site-blocks,
main.wp-block-group {
  background-color: transparent !important;
}

.hero,
.hero-left,
section.hero {
  background-color: var(--void) !important;
}

/* Force dark body text + heading colours so Kadence palette vars can't bleed through */
body {
  color: var(--paper) !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-post-title,
.wp-block-heading {
  color: var(--snow) !important;
}
p,
li,
td,
th,
blockquote {
  color: inherit;
}

/* Dark form inputs — Kadence defaults all inputs to white */
input,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
  background: var(--surface) !important;
  color: var(--paper) !important;
  border-color: var(--ridge) !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--copper) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--copper-glow) !important;
}

img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
p {
  margin: 0;
}

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(20px, 3.5vw, 48px);
}

::selection {
  background: var(--copper-fill);
  color: var(--on-copper);
}
/* --paper is the high-contrast ink of each theme, so the ring is visible on both backgrounds
   and around amber buttons. */
:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}
/* Programmatic focus target of the skip link; a ring around the whole page is noise. */
main[tabindex="-1"]:focus {
  outline: none;
}

/* Grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity: 0.03;
}

/* ── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: var(--abyss);
}
::-webkit-scrollbar-thumb {
  background: var(--mist);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--copper);
}

/* ── CUSTOM CURSOR ──────────────────────────────────────────── */

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading {
  margin: 0;
}

h1,
.wp-block-post-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3.4rem, 7.5vw, 7.5rem);
  letter-spacing: 0.02em;
  line-height: 0.94;
  text-transform: uppercase;
  color: var(--snow);
}

h2,
.wp-block-heading[class*="is-style"] {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.2vw, 4.8rem);
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--snow);
}

h3 {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--paper);
}
h4 {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

em.sf {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
h1 em.sf {
  font-size: 0.82em;
  color: var(--copper);
}
h2 em.sf {
  font-size: 0.88em;
  color: var(--copper);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--copper-dim);
  flex: none;
}

.lede {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  color: var(--fog);
  line-height: 1.75;
  max-width: 54ch;
}
.coord {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--fog);
  letter-spacing: 0.08em;
}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.btn:hover {
  transform: translateY(-2px);
}

.btn-copper {
  background: var(--copper-fill);
  color: var(--on-copper);
  border-color: var(--copper-fill);
}
.btn-copper:hover,
.btn-copper:focus-visible {
  background: var(--copper-fill-hover);
  border-color: var(--copper-fill-hover);
  color: var(--on-copper);
  box-shadow: 0 14px 36px rgba(194, 148, 72, 0.35);
}
.btn-ghost {
  background: transparent;
  color: var(--paper);
  border-color: rgba(237, 232, 225, 0.28);
}
.btn-ghost:hover {
  border-color: var(--paper);
  background: rgba(237, 232, 225, 0.06);
}
.btn-ice {
  background: var(--ice);
  color: var(--void);
  border-color: var(--ice);
}
.btn-outline {
  background: transparent;
  color: var(--copper);
  border-color: var(--copper-dim);
}
.btn-outline:hover {
  background: var(--copper-fill);
  color: var(--on-copper);
}
.btn-wa {
  background: #0e8038;
  color: #fff;
  border-color: #0e8038;
}
.btn-wa:hover {
  background: #0c6e30;
  box-shadow: 0 14px 36px rgba(14, 128, 56, 0.4);
}
.btn-sm {
  padding: 10px 20px;
  font-size: 0.82rem;
}

/* ── THEME TOGGLE BUTTON ─────────────────────────────────────── */
.theme-toggle {
  padding: 0 11px; background: transparent; cursor: pointer;
  border: 1px solid var(--ridge); color: var(--fog);
  align-self: stretch; display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s;
}
.theme-toggle:hover { border-color: var(--copper); color: var(--copper); }
.icon-moon { display: block; }
.icon-sun  { display: none; }
html.light .icon-moon { display: none; }
html.light .icon-sun  { display: block; }

/* ── SEARCH ──────────────────────────────────────────────────── */
.nav-search {
  padding: 0 11px; background: transparent; cursor: pointer;
  border: 1px solid var(--ridge); color: var(--fog);
  align-self: stretch; display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s;
}
.nav-search:hover { border-color: var(--copper); color: var(--copper); }

/* Search dropdown (header). Markup in src/chrome/header.html, behaviour in kt-layout.js. */
.search-panel {
  position: absolute; top: calc(100% + 8px); right: var(--sp-right, 16px); z-index: 260;
  width: min(440px, calc(100vw - 24px));
  background: var(--abyss); color: var(--paper);
  border: 1px solid var(--ridge); box-shadow: 0 18px 48px rgba(0,0,0,.45);
}
.search-panel[hidden] { display: none; }
.search-panel::before { /* small pointer towards the search button */
  content: ""; position: absolute; top: -6px; right: 18px; width: 10px; height: 10px;
  background: inherit; border-left: 1px solid var(--ridge); border-top: 1px solid var(--ridge);
  transform: rotate(45deg);
}
.sp-form { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--ridge); }
.sp-icon { flex: none; color: var(--copper); }
.sp-form:focus-within { box-shadow: inset 0 -2px 0 var(--copper); }
.search-panel .sp-input:focus-visible { outline: none; }
.search-panel .sp-input { /* beats the site-wide form-field styles */
  flex: 1; min-width: 0; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 0; outline: none;
  background: transparent !important; box-shadow: none !important; -webkit-appearance: none; appearance: none;
  font: 500 1rem/1.2 var(--font-sans); color: var(--paper); caret-color: var(--copper);
}
.sp-input::placeholder { color: var(--fog); opacity: .8; }
.sp-input::-webkit-search-cancel-button { display: none; }
.sp-close {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--fog);
}
.sp-close:hover, .sp-close:focus-visible { border-color: var(--ridge); color: var(--copper); }
.sp-body { max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 6px; }
.sp-heading {
  margin: 0; padding: 14px 16px 6px;
  font: 600 .7rem/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--fog);
}
.sp-list { list-style: none; margin: 0; padding: 0; }
.sp-list a {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  color: inherit; text-decoration: none; border-left: 3px solid transparent;
}
.sp-list [aria-selected="true"] a, .sp-list a:hover { background: var(--surface); border-left-color: var(--copper); }
.sp-list img, .sp-thumb { flex: none; width: 48px; height: 48px; object-fit: cover; }
.sp-thumb { display: grid; place-items: center; border: 1px solid var(--ridge); color: var(--fog); }
.sp-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.sp-title { font: 600 .98rem/1.25 var(--font-sans); color: var(--snow); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-title mark { background: none; color: var(--copper); }
.sp-meta { font: .78rem/1.3 var(--font-sans); color: var(--fog); }
.sp-chev { flex: none; color: var(--fog); }
.sp-list [aria-selected="true"] .sp-chev, .sp-list a:hover .sp-chev { color: var(--copper); }
.sp-all {
  display: block; margin: 6px 16px 8px; padding-top: 10px; border-top: 1px solid var(--ridge);
  font: 600 .78rem/1.4 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--copper); text-decoration: none;
}
.sp-all:hover, .sp-all:focus-visible { text-decoration: underline; }
html.light .search-panel { box-shadow: 0 18px 48px rgba(15,13,8,.14); }
@media (max-width: 640px) {
  .search-panel { position: fixed; top: calc(var(--nav-h) + 6px); left: 12px; right: 12px; width: auto; }
  .search-panel::before { display: none; }
  .sp-body { max-height: calc(100svh - var(--nav-h) - 90px); }
}

/* Full search page (/search/) field */
.search-form {
  display: flex; align-items: center; gap: 8px;
  width: 100%; max-width: 640px; padding: 4px 4px 4px 16px;
  border: 1px solid var(--ridge); background: var(--abyss);
}
.search-form:focus-within { border-color: var(--copper); }
.search-form .search-input:focus-visible { outline: none; }
.search-form .search-input {
  flex: 1; min-width: 0; height: 48px; margin: 0; padding: 0; background: transparent !important; border: none !important; border-radius: 0;
  outline: none; box-shadow: none; -webkit-appearance: none; appearance: none;
  font: 500 1.05rem/1.2 var(--font-sans); color: var(--paper); caret-color: var(--copper);
}
.search-input::placeholder { color: var(--fog); opacity: .8; }
.search-submit {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer;
  background: var(--copper-fill, var(--copper)); color: var(--on-copper, #3a2410); border: none;
}

/* ── LIGHT MODE ──────────────────────────────────────────────── */
/* Override CSS custom properties — all rules using var(--X) inherit new values automatically */
html.light {
  --void:         #f8f5ee;
  --abyss:        #f0ebe0;
  --surface:      #e6e0d4;
  --ridge:        #cec8bb;
  --graphite:     #b0a99e;
  --mist:         #8a8278;
  --fog:          #62584e;
  --paper:        #1c1a14;
  --snow:         #0f0d08;
  /* Copper as text must clear 4.5:1 on the cream surfaces (#a87828 was 3.6:1). */
  --copper:       #7a5618;
  --copper-light: #6a4a12;
  --copper-dim:   #5e4210;
  --copper-glow:  rgba(168,120,40,.12);
  --ice:          #1a8a8f;
  --ice-pale:     #3aa0a6;
  --signal:       #c03818;
  --global-palette8: #f8f5ee;
  --global-palette9: #f0ebe0;
}

/* Smooth mode transitions */
body, .site-header, .review-card, .tour-card, .stat-box,
.team-card, .form-card, .info-card, .kt-box, .kt-itin details,
.mobile-menu, .glance, .glance-cell, .rail { transition: background-color .3s, color .3s, border-color .3s; }

/* Header in light mode */
html.light .site-header { background: rgba(248,245,238,.96) !important; backdrop-filter: blur(16px); }
html.light .site-header.scrolled { background: rgba(248,245,238,.99) !important; }

/* Grain barely visible on light bg */
html.light body::after { opacity: .008; }

/* Scrollbar */
html.light ::-webkit-scrollbar-track { background: var(--abyss); }
html.light ::-webkit-scrollbar-thumb { background: var(--ridge); }

/* Cursor ring */



/* Section dark/surface adapt via --abyss/--surface variables — add slight shadow */
html.light .section-dark { box-shadow: inset 0 1px 0 var(--ridge), inset 0 -1px 0 var(--ridge); }

/* Body copy that was hardcoded as light-on-dark sits on cream in light mode */
html.light .tc-body .kt-card-summary,
html.light .hub-text,
html.light .itin .itin-body { color: var(--fog); }
/* Difficulty tags: the dark-theme hues are under 4.5:1 on cream */
html.light .tc-foot .wp-block-post-terms a[href*="easy"]:not(:hover)        { color: #276b3d; }
html.light .tc-foot .wp-block-post-terms a[href*="moderate"]:not(:hover)    { color: #7a6410; }
html.light .tc-foot .wp-block-post-terms a[href*="challenging"]:not(:hover) { color: #a8481a; }
html.light .tc-foot .wp-block-post-terms a[href*="strenuous"]:not(:hover)   { color: #a8321c; }

/* Tour card image gradients (hardcoded rgba → need override) */
html.light .featured-tours-section .tc-media::after,
html.light .catalog-section .tc-media::after { background: linear-gradient(to right, transparent, #131c23); }
html.light .featured-tours-section .tour-card:hover .tc-media::after,
html.light .catalog-section .tour-card:hover .tc-media::after { background: linear-gradient(to right, transparent, #0b1117); }



html.light .svc-body h3 { color: #f7f4f0 !important; }
html.light .svc-arrow { color: #f7f4f0 !important; }
html.light .hcard .h-cap,
html.light .hcard .h-cap strong,
html.light .hcard .h-cap span { color: #ede8e1 !important; }
html.light .cta-band h2,
html.light .cta-band p { color: #ede8e1 !important; }
/* Text over photography uses fixed light colours, not the theme tokens, because it always sits
   on a dark local backplate (IMG-02: the photos themselves are no longer darkened). Token
   colours would turn dark in light mode. */
.hero-page-inner :is(h1, .cat-headline, .wp-block-post-title) { color: #f7f4f0 !important; }
.hero-page-inner :is(p, .lede, .cat-lede) { color: #e6e0d6 !important; }
.hero-page-inner :is(.crumbs, .crumbs a, .cat-crumbs, .cat-crumbs a) { color: #ece6dc !important; }
.hero-page-inner :is(.eyebrow, .eyebrow a, .cat-eyebrow, h1 em) { color: #ecc88c !important; }
.hero-page-inner .crumbs a:hover { color: #ecc88c !important; }
.hero-page-inner .eyebrow::before { background: #ecc88c; }
/* Same for the CTA band copy, which sits on its own backplate over the photo. (The homepage
   hero never overlays its photo: the copy is on the page surface at every width.) */
.cta-band :is(h2 em, h2 .sf, .eyebrow) { color: #ecc88c !important; }
/* Destination cards without a link aren't interactive, so don't look it (RE-05). */
.hcard.hcard--static { cursor: default; }
html.light .nav-wa { background: transparent; color: #0e8038; border-color: var(--ridge); }
html.light .nav-wa:hover { background: #0e8038; color: #fff; border-color: #0e8038; }
html.light .btn-ghost { border-color: var(--fog); color: var(--paper); }
html.light .btn-ghost:hover { border-color: var(--paper); background: rgba(28,26,20,0.06); }
html.light .marquee { background: var(--abyss); }
html.light .marquee span { color: var(--copper); }
html.light .hero-stats-strip { background: var(--abyss); backdrop-filter: none; border-color: var(--surface); }
html.light .hero-stats-strip .hero-stat { border-color: var(--surface); }

/* ── TICKER ─────────────────────────────────────────────────── */
.ticker {
  background: var(--copper-dim);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  overflow: hidden;
  padding: 10px 0;
  white-space: nowrap;
}
.ticker-track {
  display: inline-flex;
  gap: 64px;
  animation: tick 40s linear infinite;
}
.ticker span {
  display: inline-flex;
  align-items: center;
  gap: 64px;
}
.ticker span::after {
  content: "—";
  color: var(--copper-light);
}
@keyframes tick {
  to {
    transform: translateX(-50%);
  }
}
@keyframes tick-ltr {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

/* Cross-marquee strip — two parallel bands, stacked */
.cross-strip {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2.5rem 0;
}
.cross-strip .ticker-cross,
.cross-strip .marquee {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  margin: 0;
  width: 100%;
  padding: 14px 0;
  transform: none;
  z-index: auto;
}

.ticker-cross {
  overflow: hidden;
  white-space: nowrap;
  background: var(--copper);
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--void);
}
.ticker-cross .ticker-track {
  display: inline-flex;
  gap: 64px;
  animation: tick-ltr 100s linear infinite;
}
.ticker-cross .ticker-track span {
  display: inline-flex;
  align-items: center;
  gap: 64px;
}
.ticker-cross .ticker-track span::after {
  content: "·";
  color: var(--void);
  opacity: 0.4;
}

/* ── NAV ─────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: 200;
  background: rgba(5, 7, 9, 0.9);
  backdrop-filter: blur(22px) saturate(1.3);
  border-bottom: 1px solid var(--ridge);
  transition:
    background 0.3s,
    border-color 0.3s;
}
.site-header.scrolled {
  background: rgba(11, 17, 23, 0.97);
  border-color: var(--graphite);
}

/* WP admin bar offset */
.admin-bar .site-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

.nav-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(20px, 3.5vw, 48px);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--paper);
  flex: none;
}
/* Brand logo (inline SVG from assets/brand/horizontal-*.svg). Sized by height; the wordmark is
   currentColor (the .brand colour flips with the theme), the mountain is brand gold #B58B47. */
.brand-logo {
  display: block;
  height: 42px;
  width: auto;
  aspect-ratio: 1320 / 230;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a,
.nav-links button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fog);
  background: none;
  border: 0;
  cursor: pointer;
  transition:
    color 0.18s,
    background 0.18s;
}
.nav-links a:hover,
.nav-links button:hover {
  color: var(--paper);
  background: var(--surface);
}
.nav-links a.active,
.nav-links a[aria-current="page"] {
  color: var(--copper);
}

.nav-right {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.nav-wa {
  padding: 0 12px;
  border: 1px solid rgba(14, 128, 56, 0.4);
  background: #091913;
  color: #1fa855;
  display: grid;
  place-items: center;
  transition: all 0.2s;
}
.nav-toggle {
  align-self: center;
}
.nav-wa:hover {
  background: #0e8038;
  color: #fff;
}
.nav-wa svg {
  display: block;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ridge);
  background: var(--surface);
  color: var(--paper);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: all 0.3s;
}
.nav-toggle.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mega menu */
.has-mega {
  position: relative;
}
.mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: min(880px, calc(100vw - 48px));
  background: var(--abyss);
  border: 1px solid var(--ridge);
  padding: var(--sp-4);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.22s,
    transform 0.22s,
    visibility 0.22s;
}
.has-mega.is-open .mega,
html:not(.js) .has-mega:hover .mega,
html:not(.js) .has-mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.3fr;
  gap: var(--sp-4);
}
/* Column labels, not headings: they sit in the nav before the page's h1 (heading order, SSA-20). */
.mega-col :is(h4, .mega-title) {
  margin-top: 0;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ridge);
}
.mega-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.mega-col a {
  display: block;
  padding: 7px 10px;
  margin-left: -10px;
  font-size: 0.88rem;
  color: var(--fog);
  transition: all 0.16s;
}
.mega-col a:hover {
  color: var(--paper);
  background: var(--surface);
  padding-left: 16px;
}
.mega-feat {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  display: flex;
  align-items: flex-end;
}
.mega-feat img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.mega-feat:hover img {
  transform: scale(1.06);
}
.mega-feat .ov {
  position: relative;
  padding: 18px;
  background: linear-gradient(transparent, rgba(5, 7, 9, 0.94));
}
.mega-feat strong {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: block;
}
.mega-feat small {
  font-size: 0.84rem;
  color: var(--fog);
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--abyss);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(var(--nav-h) + 28px) 40px 48px;
  overflow-y: auto;
  clip-path: circle(0% at calc(100% - 52px) 52px);
  transition: clip-path 0.65s cubic-bezier(0.7, 0, 0.3, 1);
  visibility: hidden;
}
.mobile-menu.open {
  clip-path: circle(160% at calc(100% - 52px) 52px);
  visibility: visible;
}
.mobile-menu .m-big {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 9vw, 5rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--paper);
  opacity: 0;
  transform: translateX(-22px);
  transition:
    opacity 0.32s,
    transform 0.32s,
    color 0.2s;
  display: flex;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid var(--ridge);
  padding: 10px 0;
  width: 100%;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  text-align: left;
}
.mobile-menu.open .m-big {
  opacity: 1;
  transform: none;
}
.mobile-menu .m-big:hover,
.mobile-menu .m-has-sub:hover {
  color: var(--copper);
}
/* Services accordion arrow */
.m-arr {
  margin-left: auto;
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1;
  color: var(--copper-dim);
  transition:
    transform 0.3s ease,
    color 0.2s;
}
.m-has-sub[aria-expanded="true"] .m-arr {
  transform: rotate(45deg);
  color: var(--copper);
}
/* Services sub-panel — CSS grid row animation for smooth expand */
.m-svc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 1px solid var(--ridge);
}
.m-svc-panel.open {
  grid-template-rows: 1fr;
}
.m-svc-inner {
  overflow: hidden;
}

/* Level 2 — category row (Trekking, Mountaineering, Holiday & Safaris) */
.m-svc-cat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--ridge);
  padding: 12px clamp(28px, 5vw, 48px);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fog);
  cursor: pointer;
  transition: color 0.2s;
}
.m-svc-cat:hover {
  color: var(--paper);
}
.m-svc-arr {
  font-size: clamp(1.2rem, 3.5vw, 1.8rem);
  font-family: var(--font-sans);
  font-weight: 300;
  transition: transform 0.3s ease;
  flex: none;
  color: var(--copper-dim);
}
.m-svc-cat[aria-expanded="true"] .m-svc-arr {
  transform: rotate(45deg);
}

/* Level 2 sub-panel */
.m-svc-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.m-svc-sub.open {
  grid-template-rows: 1fr;
}
.m-svc-sub-inner {
  overflow: hidden;
}

/* Level 3 — specific links */
.m-svc-sub-inner a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px clamp(36px, 6vw, 56px);
  font-family: var(--font-sans);
  font-size: 0.94rem;
  font-weight: 400;
  color: var(--fog);
  border-bottom: 1px solid rgba(28, 43, 52, 0.45);
  transition:
    color 0.18s,
    padding-left 0.18s;
}
.m-svc-sub-inner a::before {
  content: "↗";
  font-size: 0.72em;
  color: var(--copper-dim);
  flex: none;
  transition: color 0.18s;
}
.m-svc-sub-inner a:hover {
  color: var(--paper);
  padding-left: clamp(44px, 7vw, 64px);
}
.m-svc-sub-inner a:hover::before {
  color: var(--copper);
}
.m-svc-sub-inner a.m-all-link {
  color: var(--copper);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.m-svc-sub-inner a.m-all-link:hover {
  color: var(--copper-light);
}
.m-num {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--copper-dim);
  letter-spacing: 0.14em;
  font-weight: 700;
}
.m-sub {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.m-sub a {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 8px 16px;
  border: 1px solid var(--ridge);
  color: var(--fog);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.16s;
}
.m-sub a:hover {
  border-color: var(--copper);
  color: var(--copper);
}
/* Theme toggle inside the menu (the header copy is hidden on phones) */
.m-tools {
  display: none;
  margin-top: var(--sp-3);
}
@media (max-width: 560px) {
  .m-tools {
    display: flex;
  }
}
.m-tools .theme-toggle {
  gap: 10px;
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── HERO (homepage split) ───────────────────────────────────── */
.hero {
  height: clamp(620px, 100svh, 900px);
  padding-top: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  overflow: hidden;
  position: relative;
  max-width: var(--maxscreen);
  margin-inline: auto;
}
.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px clamp(32px, 4vw, 80px) 36px clamp(20px, 3.5vw, 48px);
  position: relative;
  z-index: 2;
}
.hero-coord {
  margin-bottom: var(--sp-3);
}
.hero-headline {
  color: var(--snow);
  margin-bottom: var(--sp-3);
  font-size: clamp(2.8rem, 5.2vw, 5.4rem);
  line-height: 1.05;
  text-wrap: balance;
}
.hero-lede {
  margin-bottom: var(--sp-4);
  max-width: 46ch;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 80px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fog);
}
.scroll-line {
  width: 44px;
  height: 1px;
  background: var(--copper-dim);
  transform-origin: left;
  animation: scroll-pulse 2.2s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%,
  100% {
    transform: scaleX(1);
    opacity: 0.6;
  }
  50% {
    transform: scaleX(0.3);
    opacity: 1;
  }
}

.hero-right {
  position: relative;
  overflow: hidden;
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-photo-fade {
  display: none;
}
.hero-badge-card {
  position: absolute;
  bottom: 40px;
  right: 48px;
  z-index: 3;
  background: var(--abyss);
  border: 1px solid var(--ridge);
  border-left: 3px solid var(--copper);
  padding: 20px 26px;
  min-width: 220px;
  box-shadow: var(--shadow);
}
.hero-badge-num {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--copper);
  line-height: 1;
  display: block;
  text-transform: uppercase;
}
.hero-badge-card p {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--fog);
  margin-top: 5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(11, 17, 23, 0.88);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--ridge);
  border-bottom: 1px solid var(--ridge);
  margin-bottom: 2.5rem;
}
.hero-stat {
  padding: var(--sp-3) var(--sp-4);
  border-right: 1px solid var(--ridge);
  text-align: center;
}
.hero-stat:last-child {
  border-right: none;
}
.hero-stat strong {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--copper);
  display: block;
  line-height: 1;
  text-transform: uppercase;
}
.hero-stat span {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--fog);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 4px;
  display: block;
}

/* ── PAGE HERO (inner pages) ─────────────────────────────────── */
.hero-page {
  min-height: 80svh;
  padding-top: var(--nav-h);
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}
.hero-page-bg {
  position: absolute;
  inset: 0;
}
.hero-page-bg img,
.hero-page .wp-block-post-featured-image,
.hero-page .wp-block-post-featured-image a,
.hero-page .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  display: block;
}
/* IMG-02: the photo is shown at its natural brightness and colour in both themes (no filters).
   All hero text is anchored to the bottom, where one soft scrim rises from the edge (plus a
   side fade behind the text column on wide screens). Sky and peaks stay untouched. Contrast
   is measured on the rendered pixels, scrim included. */
.hero-page-bg::after,
.hero-page .hero-page-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(5, 7, 9, 0.88) 0%, rgba(5, 7, 9, 0.7) 30%, rgba(5, 7, 9, 0.3) 55%, rgba(5, 7, 9, 0) 75%);
}
@media (min-width: 861px) {
  .hero-page-bg::after,
  .hero-page .hero-page-bg::after {
    background:
      linear-gradient(to top, rgba(5, 7, 9, 0.82) 0%, rgba(5, 7, 9, 0.5) 30%, rgba(5, 7, 9, 0.12) 56%, rgba(5, 7, 9, 0) 70%),
      linear-gradient(to right, rgba(5, 7, 9, 0.72) 0%, rgba(5, 7, 9, 0.64) 28%, rgba(5, 7, 9, 0.34) 46%, rgba(5, 7, 9, 0) 64%);
  }
}
/* A hero without a photo (search, a hub with no verified photo of its own) is a dark band in
   both themes, so the fixed light hero text keeps its contrast. */
.hero-page {
  background-color: #0b1117;
}
/* The scrim above does the work; a soft shadow only smooths edges where the photo is busy. */
.hero-page-inner :is(h1, .cat-headline, .wp-block-post-title, .crumbs, .eyebrow, .lede, .cat-lede) {
  width: fit-content;
  max-width: 100%;
  text-shadow: 0 1px 2px rgba(5, 7, 9, 0.55), 0 0 18px rgba(5, 7, 9, 0.45);
}
.hero-page-inner :is(h1, .cat-headline, .wp-block-post-title, .crumbs, .eyebrow, .lede, .cat-lede) {
  align-self: flex-start;
}

.hero-page-inner {
  position: relative;
  z-index: 2;
  padding: var(--sp-6) clamp(20px, 3.5vw, 48px);
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* Everything sits at the bottom of the hero, over the scrim. */
.hero-page-inner,
.hero-page .wp-block-group.hero-page-inner { justify-content: flex-end; }
/* Phones (IMG-02 preferred layout): the photo gets its own clear region and the copy sits on
   the page surface below it, in theme colours. A tall, narrow hero puts text over bright snow
   or cloud wherever it goes, and no gentle scrim gets small text to 4.5:1 there. */
@media (max-width: 860px) {
  .hero-page {
    flex-direction: column;
    min-height: 0 !important;
    background-color: var(--void);
  }
  .hero-page > .hero-page-bg,
  .hero-page > .wp-block-group.hero-page-bg {
    position: relative !important;
    inset: auto !important;
    flex: none;
    height: clamp(240px, 52svh, 460px);
  }
  .hero-page-bg:not(:has(img)) { display: none; }
  .hero-page-bg::after,
  .hero-page .hero-page-bg::after { background: linear-gradient(to top, var(--void) 0%, rgba(5, 7, 9, 0) 16%); }
  html.light .hero-page-bg::after,
  html.light .hero-page .hero-page-bg::after { background: linear-gradient(to top, var(--void) 0%, rgba(248, 245, 238, 0) 16%); }
  .hero-page > .hero-page-inner,
  .hero-page > .wp-block-group.hero-page-inner {
    justify-content: flex-start;
    padding: var(--sp-3) 20px var(--sp-5) !important;
  }
  .hero-page-inner :is(h1, .cat-headline, .wp-block-post-title, .crumbs, .eyebrow, .lede, .cat-lede) { text-shadow: none; }
  .hero-page-inner :is(h1, .cat-headline, .wp-block-post-title) { color: var(--snow) !important; }
  .hero-page-inner :is(p, .lede, .cat-lede) { color: var(--paper) !important; }
  .hero-page-inner :is(.crumbs, .crumbs a, .cat-crumbs, .cat-crumbs a) { color: var(--fog) !important; }
  .hero-page-inner :is(.eyebrow, .eyebrow a, .cat-eyebrow, h1 em) { color: var(--copper) !important; }
  .hero-page-inner .eyebrow::before { background: var(--copper); }
  .hero-page .catalog-hero-strip {
    background-color: var(--abyss);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--ridge);
  }
  .catalog-hero-strip .chs-item { border-color: var(--ridge); }
  .catalog-hero-strip .chs-item strong { color: var(--copper); }
  .catalog-hero-strip .chs-item span { color: var(--fog); }
}
.crumbs {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fog);
  margin-bottom: var(--sp-2);
}
.crumbs a:hover {
  color: var(--copper);
}

/* hero-page blocks from WP */
.hero-page .wp-block-group.hero-page-bg {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
}
.hero-page .wp-block-group.hero-page-inner {
  position: relative;
  z-index: 2;
  padding: var(--sp-7) clamp(20px, 3.5vw, 48px) var(--sp-6);
  max-width: var(--maxw);
  margin-inline: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.hero-page .wp-block-post-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 6vw, 6.5rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--snow);
  margin-top: 12px;
}

/* ── MARQUEE ─────────────────────────────────────────────────── */
.marquee {
  overflow: hidden;
  background: var(--ridge);
  padding: 14px 0;
  white-space: nowrap;
  transform: rotate(-0.7deg) scale(1.02);
  margin: -6px 0;
  position: relative;
  z-index: 3;
}
.marquee-track {
  display: inline-flex;
  gap: 64px;
  animation: tick 100s linear infinite;
}
.marquee span {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
  display: inline-flex;
  align-items: center;
  gap: 64px;
}
.marquee span::after {
  content: "×";
  color: var(--copper);
  font-size: 0.8em;
  margin: 0 4px;
}

/* ── SECTIONS ─────────────────────────────────────────────────── */
.section {
  padding: 2.5rem 0;
  position: relative;
}
.section-sm {
  padding: 2.5rem 0;
}
.section-dark {
  background: var(--abyss);
}
.section-surface {
  background: var(--surface);
}

/* WP block group resets */
.wp-block-group {
  margin: 0;
  margin-block: 0;
}
.wp-block-group.section,
.wp-block-group.section-dark {
  display: block;
}

/* Utility: muted secondary text (used in native about-page paragraphs) */
.text-secondary {
  color: rgba(237, 232, 225, 0.7);
}
html.light .text-secondary {
  color: rgba(50, 40, 30, 0.65);
}

/* About-story native section inner wrap: narrower reading width */
.about-story-wrap.wrap {
  max-width: 860px;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.section-head h2 {
  margin-top: 14px;
}

/* ── SERVICE TILES ───────────────────────────────────────────── */
.svc-grid {
  display: flex;
  gap: 1px;
  height: clamp(420px, 50vw, 580px);
  overflow: hidden;
}
.svc-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.svc-grid:hover .svc-tile {
  flex-grow: 0.6;
}
.svc-grid:hover .svc-tile:hover {
  flex-grow: 2;
}
.svc-bg {
  position: absolute;
  inset: 0;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.svc-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.svc-tile:hover .svc-bg img {
  transform: scale(1.08);
}
.svc-num {
  position: absolute;
  top: 16px;
  left: 18px;
  font-family: var(--font-display);
  font-size: 7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: rgba(237, 232, 225, 0.07);
  transition: color 0.3s;
}
.svc-tile:hover .svc-num {
  color: rgba(194, 148, 72, 0.2);
}
.svc-arrow {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(237, 232, 225, 0.2);
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  color: #ede8e1;
  background-color: rgba(5, 7, 9, 0.88);
  transition: all 0.25s;
}
.svc-tile:hover .svc-arrow {
  background: var(--copper-fill);
  border-color: var(--copper-fill);
  color: var(--on-copper);
  transform: rotate(45deg);
}
.svc-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 64px 20px 20px;
  /* IMG-02: the caption fades up from the bottom edge; the rest of the photo is untinted. */
  /* Holds its strength up to the title: a two-line title over snow (Mountaineering, K2) needs it. */
  background: linear-gradient(to top, rgba(5, 7, 9, 0.92) 0%, rgba(5, 7, 9, 0.84) 55%, rgba(5, 7, 9, 0.5) 80%, rgba(5, 7, 9, 0) 100%);
}
.svc-body h3 {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--snow);
  margin-bottom: 5px;
  transition: font-size 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.svc-body h3 em {
  font-family: var(--font-display);
  font-style: italic;
  color: #ecc88c;
}
.svc-body p {
  font-size: 0.94rem;
  color: #c9c3ba;
  line-height: 1.68;
  transition:
    font-size 0.55s cubic-bezier(0.2, 0.7, 0.3, 1),
    color 0.4s;
}
.svc-grid:hover .svc-tile:hover .svc-body h3 {
  font-size: 2.5rem;
}
.svc-grid:hover .svc-tile:hover .svc-body p {
  font-size: 1.25rem;
  color: #ede8e1;
}

/* ── TOUR CARDS — HORIZONTAL ─────────────────────────────────── */
.tour-list,
.wp-block-post-template.tour-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--ridge);
  list-style: none;
  margin: 0;
  padding: 0;
}
.wp-block-post-template.tour-list > li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tour-card {
  display: grid;
  grid-template-columns: 340px 1fr;
  background: var(--surface);
  transition: background 0.25s;
}
.tour-card:hover {
  background: var(--abyss);
}

.tc-media {
  position: relative;
  overflow: hidden;
  min-height: 260px;
}
.tc-media img,
.tc-media .wp-block-post-featured-image,
.tc-media .wp-block-post-featured-image a,
.tc-media .wp-block-post-featured-image img,
.tc-media .wp-block-post-featured-image figure {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  transition: transform 0.75s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.tc-media .wp-block-post-featured-image {
  position: absolute;
  inset: 0;
}
.tour-card:hover .tc-media img,
.tour-card:hover .tc-media .wp-block-post-featured-image img {
  transform: scale(1.06);
}

.tc-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 5px 12px;
  color: #deb06a;
  border: 1px solid var(--copper-dim);
  background: rgba(5, 7, 9, 0.9);
}
.tc-tag.hot {
  background: var(--copper-fill);
  color: var(--on-copper);
  border-color: var(--copper-fill);
}

.tc-body {
  padding: var(--sp-4) clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}
.tc-top {
  display: block;
}
.tc-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.tc-cat {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
}
.tc-data {
  display: flex;
  gap: 18px;
}
.tc-data span {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--fog);
  letter-spacing: 0.06em;
}

.tc-body h3,
.tc-body .wp-block-post-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--snow);
  transition: color 0.2s;
  margin-bottom: 10px;
  line-height: 1;
}
.tour-card:hover .tc-body h3,
.tour-card:hover .tc-body .wp-block-post-title {
  color: var(--copper-light);
}
.tc-body > p,
.tc-body .kt-card-summary {
  color: rgba(237, 232, 225, 0.6);
  font-size: 0.94rem;
}

.tc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid var(--ridge);
  gap: 16px;
  flex-wrap: wrap;
}
/* PHP block: kt/card-price */
.tc-price small {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
  display: block;
}
.tc-price strong {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--paper);
  line-height: 1;
  text-transform: uppercase;
  display: block;
}
.tc-price strong sup {
  font-size: 1rem;
  font-family: var(--font-sans);
  font-weight: 600;
}

/* WP post-terms difficulty in card foot — clickable color-coded badges */
.tc-foot .wp-block-post-terms {
  line-height: 1;
}
.tc-foot .wp-block-post-terms a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border: 1.5px solid currentColor;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background 0.18s,
    color 0.18s;
  cursor: pointer;
}
/* difficulty color tiers — matched to href slug */
.tc-foot .wp-block-post-terms a[href*="easy"] {
  color: #5eb87a;
  background: rgba(94, 184, 122, 0.08);
}
.tc-foot .wp-block-post-terms a[href*="moderate"] {
  color: #c9a832;
  background: rgba(201, 168, 50, 0.08);
}
.tc-foot .wp-block-post-terms a[href*="challenging"] {
  color: #e07030;
  background: rgba(224, 112, 48, 0.08);
}
.tc-foot .wp-block-post-terms a[href*="strenuous"] {
  color: #d94a2e;
  background: rgba(217, 74, 46, 0.08);
}
.tc-foot .wp-block-post-terms a[href*="expedition"] {
  color: var(--copper);
  background: rgba(194, 148, 72, 0.08);
}
/* hover: fill solid */
.tc-foot .wp-block-post-terms a[href*="easy"]:hover {
  background: #5eb87a;
  color: #050709;
}
.tc-foot .wp-block-post-terms a[href*="moderate"]:hover {
  background: #c9a832;
  color: #050709;
}
.tc-foot .wp-block-post-terms a[href*="challenging"]:hover {
  background: #e07030;
  color: #050709;
}
.tc-foot .wp-block-post-terms a[href*="strenuous"]:hover {
  background: #d94a2e;
  color: #050709;
}
.tc-foot .wp-block-post-terms a[href*="expedition"]:hover {
  background: var(--copper-fill);
  color: var(--on-copper);
}
.tc-foot .wp-block-read-more,
.tc-foot .wp-block-read-more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.82rem;
  border: 1.5px solid rgba(237, 232, 225, 0.28);
  color: var(--paper);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.2s;
  text-decoration: none;
}
.tc-foot .wp-block-read-more:hover,
.tc-foot .wp-block-read-more a:hover {
  border-color: var(--paper);
  background: rgba(237, 232, 225, 0.06);
}

.diff {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.diff i {
  width: 7px;
  height: 7px;
  border: 1px solid var(--ridge);
}
.diff i.on {
  background: var(--copper);
  border-color: var(--copper-dim);
}

/* ── FEATURED TOURS — homepage enhanced horizontal cards ─────── */
/* ── TOUR CARD COMPONENT — shared by homepage + /tours catalog ── */
.featured-tours-section .tour-list,
.featured-tours-section .wp-block-post-template.tour-list,
.catalog-section .tour-list,
.catalog-section .wp-block-post-template.tour-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  counter-reset: tour-num;
  background-color: transparent;
}
.featured-tours-section .tour-card,
.catalog-section .tour-card {
  display: grid;
  grid-template-columns: clamp(300px, 34vw, 480px) 1fr;
  counter-increment: tour-num;
  border: 1px solid var(--ridge);
  border-left: 3px solid transparent;
  background: var(--surface);
  transition:
    background 0.3s,
    border-color 0.3s;
}
.featured-tours-section .tour-card:hover,
.catalog-section .tour-card:hover {
  background: var(--abyss);
  border-left-color: var(--copper);
}

.featured-tours-section .tc-media,
.catalog-section .tc-media {
  min-height: 300px;
}

.featured-tours-section .tc-media::before,
.catalog-section .tc-media::before {
  content: counter(tour-num, decimal-leading-zero);
  position: absolute;
  top: 14px;
  left: 18px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 6vw, 6rem);
  font-weight: 600;
  color: rgba(237, 232, 225, 0.13);
  line-height: 1;
  mix-blend-mode: screen;
  pointer-events: none;
}
.featured-tours-section .tc-media::after,
.catalog-section .tc-media::after {
  content: "";
  pointer-events: none;
  z-index: 1;
  position: absolute;
  inset: 0 0 0 auto;
  width: 22%;
  background: linear-gradient(to right, transparent, var(--surface));
  transition: background 0.3s;
}
.featured-tours-section .tour-card:hover .tc-media::after,
.catalog-section .tour-card:hover .tc-media::after {
  background: linear-gradient(to right, transparent, var(--abyss));
}
.featured-tours-section .tc-body,
.catalog-section .tc-body {
  padding: var(--sp-4) clamp(28px, 3vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}
.featured-tours-section .tc-body h3,
.featured-tours-section .tc-body .wp-block-post-title,
.catalog-section .tc-body h3,
.catalog-section .tc-body .wp-block-post-title {
  font-size: clamp(2rem, 2.8vw, 3.4rem);
  line-height: 1;
  margin-bottom: 0;
}
.featured-tours-section .tc-price strong,
.catalog-section .tc-price strong {
  font-size: clamp(2.4rem, 3.2vw, 4rem);
}

.featured-tours-section .tc-foot,
.catalog-section .tc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.featured-tours-section .tc-price,
.catalog-section .tc-price {
  flex: 1 1 auto;
}
.featured-tours-section .tc-foot .wp-block-read-more,
.featured-tours-section .tc-foot .wp-block-read-more a,
.catalog-section .tc-foot .wp-block-read-more,
.catalog-section .tc-foot .wp-block-read-more a {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}
.featured-tours-section .tour-card:hover .tc-foot .wp-block-read-more,
.featured-tours-section .tour-card:hover .tc-foot .wp-block-read-more a,
.catalog-section .tour-card:hover .tc-foot .wp-block-read-more,
.catalog-section .tour-card:hover .tc-foot .wp-block-read-more a {
  background: var(--copper-fill);
  color: var(--on-copper);
  border-color: var(--copper-fill);
}

/* ── FILTER BAR ──────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--sp-5);
}
.pill {
  display: inline-flex;
  padding: 10px 20px;
  border: 1px solid var(--ridge);
  background: var(--surface);
  color: var(--fog);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.18s;
  text-decoration: none;
}
.pill:hover {
  border-color: var(--copper);
  color: var(--copper);
}
.pill.is-active,
.pill.active {
  background: var(--copper-fill);
  border-color: var(--copper-fill);
  color: var(--on-copper);
}

/* ── STATS ───────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ridge);
  margin: 2.5rem 0;
}
.stat-box {
  padding: var(--sp-5) var(--sp-4);
  background: var(--abyss);
  text-align: center;
  border-right: 1px solid var(--ridge);
}
.stat-box:last-child {
  border-right: none;
}
.stat-box strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 5vw, 5.5rem);
  letter-spacing: 0.02em;
  color: var(--copper);
  display: block;
  line-height: 1;
  text-transform: uppercase;
}
.stat-box span {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--fog);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  margin-top: 10px;
}

/* ── HORIZONTAL STRIP ────────────────────────────────────────── */
.hstrip {
  position: relative;
  overflow: hidden;
}
.hstrip-head {
  padding: var(--sp-3) clamp(20px, 3.5vw, 48px);
}
.hstrip-nav {
  display: flex;
  gap: 10px;
  padding: 0 clamp(20px, 3.5vw, 48px);
  margin-bottom: var(--sp-3);
}
.hstrip-btn {
  width: 48px;
  height: 48px;
  flex: none;
  border: 1px solid var(--ridge);
  background: var(--surface);
  color: var(--paper);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.hstrip-btn:hover:not(:disabled) {
  background: var(--copper-fill);
  border-color: var(--copper-fill);
  color: var(--on-copper);
}
.hstrip-btn:disabled {
  opacity: 0.28;
  cursor: default;
}
.hstrip-track {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0 clamp(20px, 3.5vw, 48px);
  /* Match the padding: otherwise the first card's snap position is 20-48px in, and the strip
     auto-scrolls there on load. That scroll ended Chrome's LCP measurement before the first
     paint, so the homepage had no LCP at all (PageSpeed NO_LCP, re-audit SSA-35). */
  scroll-padding-inline: clamp(20px, 3.5vw, 48px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.hstrip-track::-webkit-scrollbar {
  display: none;
}
.hstrip-track:active {
  cursor: grabbing;
}
.hcard {
  flex: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  width: clamp(260px, 30vw, 420px);
  height: clamp(400px, 52vw, 580px);
  scroll-snap-align: start;
}
.hcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s;
}
.hcard:hover img {
  transform: scale(1.06);
}
.hcard .h-num {
  position: absolute;
  top: -4px;
  left: 14px;
  font-family: var(--font-display);
  font-size: clamp(4rem, 6vw, 5.5rem);
  font-weight: 600;
  color: rgba(237, 232, 225, 0.1);
  line-height: 1;
  mix-blend-mode: screen;
}
.hcard .h-cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 56px 20px 18px;
  /* IMG-02: the caption fades up from the bottom edge; the photo above it stays untinted. */
  background: linear-gradient(to top, rgba(5, 7, 9, 0.92) 0%, rgba(5, 7, 9, 0.8) 50%, rgba(5, 7, 9, 0) 100%);
  color: #ede8e1;
}
.hcard .h-cap strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 4px;
}
.hcard .h-cap span {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e6e0d6;
}
.hcard.cta-hcard {
  background: var(--copper-fill);
  width: clamp(200px, 22vw, 300px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-3);
  color: var(--on-copper);
}
.hcard.cta-hcard p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  line-height: 1.1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hcard.cta-hcard .btn {
  background: var(--on-copper);
  color: var(--copper-fill-hover);
  align-self: flex-start;
  margin-top: auto;
}

/* ── REVIEWS ─────────────────────────────────────────────────── */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
/* Inside single tour detail — 2 reviews → 2 columns */
.detail-main .reviews-grid {
  grid-template-columns: repeat(2, 1fr);
}
.review-card {
  background: var(--surface);
  padding: var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background 0.2s;
}
.review-card:hover {
  background: var(--abyss);
}
.stars {
  color: var(--copper);
  letter-spacing: 4px;
  font-size: 0.88rem;
}
blockquote {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--snow);
  flex: 1;
  margin: 0;
  border: none;
  padding: 0;
}
.reviewer {
  display: flex;
  align-items: center;
  gap: 14px;
}
.reviewer img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(0.45);
}
.reviewer strong {
  display: block;
  font-size: 0.94rem;
  color: var(--paper);
}
.reviewer span {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--fog);
  letter-spacing: 0.06em;
}

/* ── GLANCE BAR (kt/glance block) ─────────────────────────────── */
.glance {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--abyss);
  border: 1px solid var(--ridge);
  border-top: 2px solid var(--copper);
  position: relative;
  z-index: 4;
}
.glance-cell {
  padding: var(--sp-3) var(--sp-4);
  border-right: 1px solid var(--ridge);
}
.glance-cell:last-child {
  border-right: none;
}
.glance-cell small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 6px;
}
.glance-cell strong {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--snow);
  text-transform: uppercase;
}

/* ── TOUR DETAIL ─────────────────────────────────────────────── */
.detail-wrap {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--sp-6);
  align-items: start;
}

.detail-main h2,
.detail-main .wp-block-heading {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  margin: var(--sp-6) 0 var(--sp-2);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--ridge);
}
.detail-main h2:first-child,
.detail-main .wp-block-heading:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.detail-main p,
.detail-main .wp-block-paragraph {
  color: var(--fog);
  margin-top: 0;
}
.detail-main p + p,
.detail-main .wp-block-paragraph + .wp-block-paragraph {
  margin-top: 14px;
}

/* Inline image banner */
.inline-banner {
  position: relative;
  overflow: hidden;
  margin: var(--sp-4) 0;
  aspect-ratio: 16/8;
}
.inline-banner img {
  width: 100%;
  height: 120%;
  object-fit: cover;
}
.inline-banner .ib-cap {
  position: absolute;
  bottom: 14px;
  left: 18px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c9c3ba;
  background: rgba(5, 7, 9, 0.9);
  padding: 6px 12px;
}

/* Tour page gallery: natural photos, caption below the image (not over it). */
.kt-gallery {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.kt-gallery figure {
  margin: 0;
}
.kt-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.kt-gallery figcaption {
  font-size: 0.84rem;
  color: var(--fog);
  margin-top: 8px;
}

/* Itinerary accordion */
.itin {
  display: grid;
  gap: 1px;
  background: var(--ridge);
  margin-top: 22px;
}
.itin details {
  background: var(--surface);
  transition: background 0.2s;
}
.itin details[open] {
  background: var(--abyss);
}
.itin summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--paper);
}
.itin summary::-webkit-details-marker {
  display: none;
}
.itin .iday {
  flex: none;
  width: 54px;
  height: 54px;
  border: 1px solid var(--ridge);
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--fog);
  line-height: 1.4;
  transition: all 0.22s;
}
.itin .iday b {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--paper);
  display: block;
  line-height: 1;
  text-transform: uppercase;
}
.itin details[open] .iday {
  border-color: var(--copper-fill);
  background: var(--copper-fill);
}
.itin details[open] .iday,
.itin details[open] .iday b {
  color: var(--on-copper);
}
.itin .ichev {
  margin-left: auto;
  color: var(--fog);
  font-size: 0.8rem;
  transition: transform 0.22s;
}
.itin details[open] .ichev {
  transform: rotate(180deg);
  color: var(--copper);
}
.itin .itin-body {
  padding: 0 22px 20px 94px;
  color: rgba(237, 232, 225, 0.65);
  font-size: 0.94rem;
}
.itin .facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}
.itin .facts span {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--fog);
  letter-spacing: 0.08em;
}

/* Includes / not-included (design-ref classes, kept for backward compat) */
ul.checks {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
}
.checks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.94rem;
  color: var(--fog);
}
.checks .ok {
  color: #29a855;
  font-family: var(--font-mono);
  flex: none;
}
.checks .no {
  color: var(--signal);
  font-family: var(--font-mono);
  flex: none;
}
.incl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
.incl-grid h3 {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

/* ── KT TOUR CONTENT BLOCKS ──────────────────────────────────── */

/* Inline heading accent */
.kt-accent {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--copper);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* ─ Itinerary (kt-itin) ─ */
.kt-itin {
  margin-top: var(--sp-4);
  border: 1px solid var(--ridge);
  overflow: hidden;
}

/* Row per day */
.kt-itin details {
  border-bottom: 1px solid var(--ridge);
  background: var(--abyss);
}
.kt-itin details:last-child {
  border-bottom: none;
}

/* Override browser's detail hide so we can animate height */
.kt-itin details > .kt-dbody {
  display: block !important;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.32s ease,
    padding 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  padding-top: 0;
  padding-bottom: 0;
}
.kt-itin details[open] > .kt-dbody {
  max-height: 600px;
  opacity: 1;
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-4);
}

/* Summary row */
.kt-itin summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 68px;
  font-family: var(--font-sans);
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--paper);
}
.kt-itin summary::-webkit-details-marker {
  display: none;
}

/* Day badge — dark by default, copper only when accordion is open */
.kt-dnum {
  flex: none;
  align-self: stretch;
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--surface);
  border-right: 1px solid var(--ridge);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog);
  transition:
    background 0.3s,
    color 0.3s,
    border-color 0.3s;
}
.kt-dnum b {
  font-family: var(--font-sans);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--paper);
  line-height: 1;
  display: block;
  letter-spacing: -0.01em;
  transition: color 0.3s;
}
/* Badge goes copper only when open */
.kt-itin details[open] .kt-dnum {
  background: var(--copper-fill);
  border-right-color: var(--copper-fill);
  color: var(--on-copper);
}
.kt-itin details[open] .kt-dnum b {
  color: var(--on-copper);
}

/* Title fills the flex row; gap gives space between badge and text */
.kt-itin summary {
  padding-right: 0;
  align-items: center;
  gap: var(--sp-3);
}

/* Chevron — copper, rotates when open */
.kt-chev {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 var(--sp-3) 0 var(--sp-2);
  font-size: 0.72rem;
  color: var(--copper);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.kt-itin details[open] .kt-chev {
  transform: rotate(180deg);
}

/* Expanded body */
.kt-dbody {
  padding-left: calc(72px + var(--sp-3));
  padding-right: var(--sp-4);
  color: var(--fog);
  font-size: 0.94rem;
  line-height: 1.72;
  border-top: 1px solid var(--ridge);
}

/* Fact chips */
.kt-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.kt-facts span {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  color: var(--fog);
  letter-spacing: 0.02em;
}
.kt-facts span::before {
  content: "·";
  margin-right: 6px;
  color: var(--copper-dim);
}
.kt-facts span:first-child::before {
  display: none;
}

/* ─ Included / Excluded (kt-ie) ─ */
.kt-ie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}
.kt-box {
  background: var(--abyss);
  border: 1px solid var(--ridge);
  padding: var(--sp-4);
}
.kt-inc {
  border-top: 3px solid #29a855;
}
.kt-exc {
  border-top: 3px solid var(--signal);
}

.kt-box h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--ridge);
}
.kt-inc h3 {
  color: #29a855;
}
.kt-exc h3 {
  color: var(--signal);
}

.kt-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kt-box li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 0.94rem;
  color: var(--fog);
  line-height: 1.5;
  padding: 11px 0;
  border-bottom: 1px solid var(--ridge);
}
.kt-box li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.kt-inc li::before {
  content: "✓";
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  background: rgba(41, 168, 85, 0.12);
  color: #29a855;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
}
.kt-exc li::before {
  content: "✕";
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  background: rgba(214, 72, 32, 0.12);
  color: var(--signal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
}

/* Responsive — kt tour blocks */
@media (max-width: 860px) {
  .kt-ie {
    grid-template-columns: 1fr;
  }
  .kt-dnum {
    width: 60px;
  }
  .kt-dnum b {
    font-size: 1.8rem;
  }
  .kt-dbody {
    padding-left: calc(60px + var(--sp-2));
  }
}
@media (max-width: 520px) {
  .kt-dnum {
    width: 52px;
  }
  .kt-dnum b {
    font-size: 1.5rem;
  }
  .kt-dbody {
    padding-left: calc(52px + 10px);
  }
}

/* ── STICKY RAIL (kt/rail block) ─────────────────────────────── */
.rail {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  background: var(--surface);
  border: 1px solid var(--ridge);
  border-top: 2px solid var(--copper);
  padding: var(--sp-4);
}
.rail .rail-price strong {
  font-family: var(--font-display);
  font-size: 3.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--snow);
  text-transform: uppercase;
}
.rail .rail-price small {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
}
.rail .rail-note {
  font-size: 0.94rem;
  color: var(--fog);
  margin: 8px 0 var(--sp-3);
}
.rail .btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;
  display: flex;
}
.rail hr {
  border: none;
  border-top: 1px solid var(--ridge);
  margin: 20px 0;
}
.rail .trust {
  display: grid;
  gap: 10px;
}
.rail .trust span {
  font-size: 0.94rem;
  color: var(--fog);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* ── MOBILE STICKY BAR (kt/mbar block) ──────────────────────── */
.mbar-mobile {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 150;
  background: rgba(11, 17, 23, 0.95);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--ridge);
  padding: 12px clamp(16px, 4vw, 24px);
  align-items: center;
  gap: 12px;
}
.mbar-pr {
  flex: 1;
}
.mbar-pr small {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fog);
  display: block;
}
.mbar-pr strong {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--paper);
  display: block;
  line-height: 1;
  text-transform: uppercase;
}
.mbar-mobile .btn {
  flex: none;
  padding: 12px 20px;
  font-size: 0.82rem;
}
.mbar-mobile {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
/* The bar's text uses theme tokens, so its backdrop must follow the theme too. */
html.light .mbar-mobile {
  background: rgba(240, 235, 224, 0.97);
}

/* ── SERVICE HUB ─────────────────────────────────────────────── */
.hub-intro {
  max-width: 900px;
  margin: 0 auto var(--sp-5);
}
.hub-headline {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 4.5rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--sp-3);
}
.hub-text {
  color: rgba(237, 232, 225, 0.7);
  font-size: 1.05rem;
  max-width: 64ch;
}

/* ── VISA / STEPS ────────────────────────────────────────────── */
.steps {
  display: grid;
  margin-top: var(--sp-3);
}
.step {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--ridge);
}
.step:last-child {
  border-bottom: none;
}
.step-num {
  width: 68px;
  height: 68px;
  border: 1px solid var(--ridge);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fog);
  transition: all 0.28s;
  flex: none;
}
.step:hover .step-num {
  border-color: var(--copper);
  color: var(--copper);
}
.step h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.step p {
  color: var(--fog);
  font-size: 0.94rem;
  line-height: 1.68;
}
.info-card {
  background: var(--surface);
  border: 1px solid var(--ridge);
  border-left: 3px solid var(--copper);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-3) 0;
}
.info-card strong {
  display: block;
  font-size: 0.94rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.info-card.note {
  border-left-color: var(--copper);
}

/* ── CONTACT ─────────────────────────────────────────────────── */
.contact-cols {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--sp-6);
  align-items: start;
}
.contact-list {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.contact-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.contact-ic {
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid var(--ridge);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  transition: all 0.22s;
}
.contact-item:hover .contact-ic {
  border-color: var(--copper);
}
.contact-item strong {
  display: block;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--snow);
  margin-bottom: 3px;
}
.contact-item span,
.contact-item a.cl {
  color: var(--fog);
  font-size: 0.94rem;
}
.contact-item a.cl:hover {
  color: var(--copper);
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--ridge);
  border-top: 2px solid var(--copper);
  padding: var(--sp-5);
}
.form-card h3 {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.form-note {
  font-size: 0.94rem;
  color: var(--fog);
  margin-bottom: var(--sp-4);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-grid .full {
  grid-column: 1/-1;
}
.field label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 7px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--ridge);
  background: var(--abyss);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--paper);
  transition: border-color 0.2s;
  outline: none;
}
.field select option {
  color: var(--paper);
  background: var(--abyss);
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--mist);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--copper);
}
/* ── FLUENT FORMS overrides ──────────────────────────────────── */
.fluentform .ff-el-input--label label,
.fluentform .ff-el-form-control + label {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 6px;
  display: block;
}
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform textarea,
.fluentform select {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid var(--ridge);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: 0;
  transition: border-color 0.2s;
  appearance: none;
}
.fluentform input::placeholder,
.fluentform textarea::placeholder {
  color: var(--mist);
  opacity: 0.55;
}
.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus {
  outline: none;
  border-color: var(--copper);
}
.fluentform .ff-btn-submit,
.fluentform button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--copper-fill) !important;
  color: var(--on-copper) !important;
  border: 1.5px solid var(--copper-fill) !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: all 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
  width: 100%;
  justify-content: center;
  box-shadow: none;
}
.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover {
  background: var(--copper-fill-hover) !important;
  border-color: var(--copper-fill-hover) !important;
  box-shadow: 0 14px 36px rgba(194, 148, 72, 0.35);
  transform: translateY(-2px);
}
.fluentform .ff-el-group {
  margin-bottom: 18px;
}
.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error textarea,
.fluentform .ff-el-is-error select {
  border-color: #e05252 !important;
}
.fluentform .ff-el-help-message,
.fluentform .error {
  font-size: 0.78rem;
  color: #e05252;
  margin-top: 4px;
}
.fluentform .ff-message-success {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--paper);
  text-align: center;
  padding: var(--sp-4);
}

.map-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--ridge);
  border-radius: 6px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}
.map-card:hover .btn, .map-card:focus-visible .btn { filter: brightness(1.06); }
.map-pin { flex: none; color: var(--copper); }
.map-text { display: grid; gap: 2px; flex: 1 1 220px; }
.map-text span { opacity: 0.85; }

/* ── GALLERY ─────────────────────────────────────────────────── */
.cine {
  position: relative;
  overflow: hidden;
  background: var(--void);
}
.cine-track {
  display: flex;
  width: max-content;
  height: 100svh;
  align-items: center;
  gap: 5vw;
  padding: 0 8vw;
}
.cine-panel {
  position: relative;
  flex: none;
  width: 62vw;
  max-width: 880px;
  height: 72svh;
  overflow: hidden;
}
.cine-panel img {
  width: 100%;
  height: 115%;
  object-fit: cover;
}
.cp-num {
  position: absolute;
  top: 14px;
  right: 20px;
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 600;
  color: rgba(237, 232, 225, 0.14);
  line-height: 1;
}
.cp-cap {
  position: absolute;
  bottom: 26px;
  left: 28px;
  right: 28px;
  width: fit-content;
  padding: 12px 16px;
  background: rgba(5, 7, 9, 0.9);
  color: #ede8e1;
}
.cp-cap strong {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 5px;
}
.cp-cap span {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c9c3ba;
}

.gwall {
  columns: 3;
  column-gap: 16px;
}
.g-item {
  position: relative;
  break-inside: avoid;
  margin-bottom: 16px;
  cursor: zoom-in;
  overflow: hidden;
}
.g-item img {
  width: 100%;
  transition: transform 0.65s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.g-item:hover img {
  transform: scale(1.06);
}
.g-cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 16px;
  background: rgba(5, 7, 9, 0.9);
  color: #ede8e1;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity 0.26s,
    transform 0.26s;
}
.g-item:hover .g-cap {
  opacity: 1;
  transform: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 9, 0.95);
  backdrop-filter: blur(14px);
  display: none;
  place-items: center;
  z-index: 9996;
  padding: var(--sp-5);
  cursor: zoom-out;
}
.lightbox.show {
  display: grid;
}
.lightbox img {
  max-width: 90vw;
  max-height: 82vh;
  animation: lb-in 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes lb-in {
  from {
    transform: scale(0.93);
    opacity: 0;
  }
}
.lb-cap {
  color: var(--fog);
  text-align: center;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── TEAM GRID ───────────────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ridge);
  border: 1px solid var(--ridge);
  margin-top: var(--sp-5);
}
.team-card {
  background: var(--surface);
  display: flex;
  flex-direction: column;
  transition: background 0.25s;
}
.team-card:hover {
  background: var(--abyss);
}
.team-photo {
  aspect-ratio: 1/1;
  overflow: hidden;
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.5) brightness(0.88);
  transition:
    filter 0.4s,
    transform 0.5s;
}
.team-card:hover .team-photo img {
  filter: grayscale(0.1) brightness(0.95);
  transform: scale(1.04);
}
.team-info {
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  flex: 1;
}
.team-info h3 {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--snow);
  margin-bottom: 4px;
}
.role {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: var(--sp-2);
}
.team-info p {
  font-size: 0.9rem;
  color: var(--fog);
  line-height: 1.6;
}

/* ── CTA BAND ────────────────────────────────────────────────── */
.cta-band {
  position: relative;
  overflow: hidden;
  color: var(--paper);
  padding: clamp(72px, 9vw, 120px) clamp(var(--sp-4), 5vw, var(--sp-7));
  text-align: center;
  isolation: isolate;
  margin: 2.5rem 0 0;
}
.cta-band > img {
  position: absolute;
  inset: -15% 0;
  z-index: -2;
  width: 100%;
  height: 130%;
  object-fit: cover;
}
/* IMG-02: no blanket tint. One soft vignette sits behind the centred copy and fades out
   towards the edges, so the photo reads around it. */
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 72% at 50% 50%, rgba(5, 7, 9, 0.84) 0%, rgba(5, 7, 9, 0.68) 55%, rgba(5, 7, 9, 0.34) 100%);
}
.cta-band :is(h2, p, .eyebrow) {
  width: fit-content;
  max-width: min(100%, 52ch);
  margin-inline: auto;
  text-shadow: 0 1px 2px rgba(5, 7, 9, 0.55), 0 0 18px rgba(5, 7, 9, 0.45);
}
.cta-band h2 {
  color: #f7f4f0;
  max-width: min(100%, 20ch);
  margin: 14px auto 18px;
}
.cta-band p {
  margin: 0 auto var(--sp-4);
  color: #ede8e1;
}
.cta-band .btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-band .btn-ghost {
  color: #ede8e1 !important;
  border-color: rgba(237, 232, 225, 0.55) !important;
  background: rgba(5, 7, 9, 0.35) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.cta-band .btn-ghost:hover {
  border-color: #ede8e1 !important;
  background: #050709 !important;
}

/* ── FOOTER ──────────────────────────────────────────────────── */
.site-footer {
  background: var(--void);
  border-top: 1px solid var(--ridge);
  overflow: hidden;
}
.footer-cta {
  text-align: center;
  padding: 2.5rem var(--sp-4);
  position: relative;
}
.footer-cta h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 7.5vw, 7rem);
  color: var(--snow);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.footer-cta h2 span {
  color: var(--copper);
  font-style: italic;
  font-weight: 400;
}
.footer-cta .btn {
  margin-top: var(--sp-4);
}
.footer-word {
  position: absolute;
  bottom: -0.08em;
  left: 0;
  right: 0;
  font-family: var(--font-display);
  font-size: clamp(5rem, 17vw, 17rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 0.84;
  color: transparent;
  -webkit-text-stroke: 1px rgba(237, 232, 225, 0.038);
  text-align: center;
  pointer-events: none;
  user-select: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--sp-6);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--ridge);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 14px;
}
.footer-brand .brand-logo {
  display: block;
  height: 44px;
  width: auto;
  aspect-ratio: 1320 / 230;
}
.footer-about {
  font-size: 0.94rem;
  color: var(--fog);
  max-width: 34ch;
  line-height: 1.68;
}
.socials {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
.socials a {
  width: 36px;
  height: 36px;
  border: 1px solid var(--ridge);
  display: grid;
  place-items: center;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--fog);
  transition: all 0.2s;
}
.socials a:hover {
  border-color: var(--copper);
  color: var(--copper);
}

.site-footer :is(h3, h4) {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 18px;
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.site-footer ul li,
.site-footer ul a {
  font-size: 0.9rem;
  color: var(--fog);
}
.site-footer ul a:hover {
  color: var(--paper);
}
.footer-bottom {
  border-top: 1px solid var(--ridge);
  padding: var(--sp-3) 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fog);
}

/* WhatsApp float */
.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 500;
  width: 56px;
  height: 56px;
  background: #0e8038;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 32px rgba(14, 128, 56, 0.5);
  transition: transform 0.24s;
}
.wa-float:hover {
  transform: scale(1.1) rotate(8deg);
}
.wa-float::before {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1.5px solid #0e8038;
  animation: wa-ring 2.2s ease-out infinite;
  opacity: 0;
}
@keyframes wa-ring {
  0% {
    transform: scale(0.85);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

/* ── REVEAL ──────────────────────────────────────────────────── */
/* .js is added synchronously in <head>, so these start hidden before first paint (no flash) and
   kt-main.js animates them in. Fail open: unless kt-main.js confirms GSAP is running (by adding
   .kt-motion), a CSS-only timer reveals everything, so a blocked CDN, a script error or a
   missing kt-main.js can't leave the page blank. With scripts off there is no .js at all. */
.js .reveal,
.js .reveal-grid > *,
.js .tour-card,
.js .stat-box,
.js .g-item,
.js .hero-coord,
.js .hero-actions,
.js .hero-scroll-hint,
.js .hero-badge-card,
.js .hero-stat,
.js .cat-crumbs,
.js .cat-eyebrow,
.js .cat-strip {
  opacity: 0;
  will-change: transform, opacity;
  animation: kt-fail-open 0.01s linear 1.5s forwards;
}
.js.kt-motion :is(.reveal, .reveal-grid > *, .tour-card, .stat-box, .g-item,
.hero-coord, .hero-actions, .hero-scroll-hint, .hero-badge-card, .hero-stat,
.cat-crumbs, .cat-eyebrow, .cat-strip) {
  animation: none;
}
/* The hero headline and lede are the page's LCP candidates. Chrome ignores elements that are
   invisible at first paint (and full-viewport images), so pre-hiding them left PageSpeed with
   no LCP at all (NO_LCP). They stay visible and only rise, in CSS so it starts with the first
   frame whether or not GSAP has loaded. Reduced motion turns this off (below). */
.js :is(.hero-headline, .hero-lede, .cat-headline, .cat-lede) {
  animation: kt-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.js :is(.hero-lede, .cat-lede) { animation-delay: 0.1s; }
@keyframes kt-rise {
  from { transform: translateY(24px); }
}
@keyframes kt-fail-open {
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .reveal,
  .js .reveal-grid > *,
  .js .tour-card,
  .js .stat-box,
  .js .g-item,
  .js .hero-headline,
  .js .hero-coord,
  .js .hero-lede,
  .js .hero-actions,
  .js .hero-scroll-hint,
  .js .hero-badge-card,
  .js .hero-stat,
  .js .cat-crumbs,
  .js .cat-eyebrow,
  .js .cat-headline,
  .js .cat-lede,
  .js .cat-strip {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
/* Nav switches to hamburger at 1240px — 7 nav items + the longer "Summit Seekers" brand
   need room (at 1100–1240px the Start Enquiry button ran past the viewport edge). */
@media (max-width: 1240px) {
  .nav-links,
  .nav-right .btn-copper {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
}
/* Phones: WhatsApp stays reachable via the floating button / tour booking bar, and the theme
   toggle moves into the menu, so brand + search + menu fit down to 320px. */
@media (max-width: 560px) {
  .nav-inner {
    padding-inline: 16px;
    gap: 12px;
  }
  .nav-right {
    gap: 8px;
  }
  .nav-right .nav-wa,
  .nav-right > .theme-toggle {
    display: none;
  }
  .brand {
    gap: 10px;
    min-width: 0;
    flex: 0 1 auto;
  }
  /* 27px tall at 320px wide, 36px from 430px: always leaves room for search + menu. */
  .brand-logo {
    height: clamp(26px, 8.4vw, 36px);
  }
  .nav-search,
  .nav-toggle {
    width: 42px;
    height: 42px;
    align-self: center;
  }
}
/* Just above the switch, tighten the links so the right-hand buttons keep their margin */
@media (min-width: 1241px) and (max-width: 1360px) {
  .nav-links > li > a,
  .nav-links > li > button {
    padding: 8px 8px;
    letter-spacing: 0.05em;
  }
}
@media (max-width: 1200px) {
  .mega-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .mega-feat {
    display: none;
  }
}
@media (max-width: 1080px) {
  .svc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: auto;
  }
  .svc-tile {
    aspect-ratio: 1/1.2;
    flex: unset;
    transition: none;
  }
  .svc-grid:hover .svc-tile,
  .svc-tile:hover {
    flex-grow: unset;
  }
  .detail-wrap {
    grid-template-columns: 1fr;
  }
  .rail {
    position: static;
  }
  .glance {
    grid-template-columns: repeat(3, 1fr);
  }
  .glance-cell:nth-child(n + 4) {
    border-top: 1px solid var(--ridge);
  }
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-box:nth-child(2n) {
    border-right: none;
  }
  .stat-box:nth-child(-n + 2) {
    border-bottom: 1px solid var(--ridge);
  }
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gwall {
    columns: 2;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }
  .tour-card {
    grid-template-columns: 280px 1fr;
  }
  .featured-tours-section .tour-card,
  .catalog-section .tour-card {
    grid-template-columns: 260px 1fr;
  }
  .cine-panel {
    width: 78vw;
  }
  .contact-cols {
    gap: var(--sp-5);
  }
}
@media (max-width: 860px) {
  /* IMG-02: copy on the page surface, then the photo in its own visible region, so no text
     sits on the photograph and the photo needs no dimming. */
  .hero {
    display: flex;
    flex-direction: column;
    height: auto;
    position: relative;
  }
  .hero-right {
    display: block;
    position: relative;
    height: clamp(240px, 62vw, 460px);
    overflow: hidden;
  }
  .hero-right .hero-photo-fade {
    display: none;
  }
  .hero-left {
    position: relative;
    z-index: 2;
    padding: 32px clamp(20px, 5vw, 48px) var(--sp-5);
  }
  .hero-scroll-hint {
    display: none;
  }
  .hero-stats-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-stat {
    padding: var(--sp-2) var(--sp-3);
  }
  .section {
    padding: clamp(48px, 6vw, 72px) 0;
  }
  .section-head {
    margin-bottom: var(--sp-4);
    gap: var(--sp-3);
  }
  .svc-grid {
    grid-template-columns: 1fr 1fr;
  }
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tour-card {
    grid-template-columns: 1fr;
  }
  .tc-media {
    aspect-ratio: 16/9;
    min-height: auto;
  }
  .tc-body {
    padding: var(--sp-3);
  }
  .featured-tours-section .tour-card,
  .catalog-section .tour-card {
    grid-template-columns: 1fr;
  }
  .featured-tours-section .tc-media,
  .catalog-section .tc-media {
    min-height: 56vw;
    aspect-ratio: unset;
  }
  .featured-tours-section .tc-media::after,
  .catalog-section .tc-media::after {
    width: 0;
  }
  .featured-tours-section .tc-media::before,
  .catalog-section .tc-media::before {
    font-size: clamp(3rem, 10vw, 5rem);
  }
  .stat-box {
    padding: var(--sp-4) var(--sp-3);
  }
  .glance {
    grid-template-columns: repeat(2, 1fr);
  }
  .glance-cell:nth-child(n + 3) {
    border-top: 1px solid var(--ridge);
  }
  .reviews-grid {
    grid-template-columns: 1fr;
  }
  .review-card {
    padding: var(--sp-3);
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-cols {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .form-card { padding: var(--sp-4); }
  .incl-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }
  .hero-actions { flex-wrap: wrap; gap: var(--sp-2); }
  .step-num { width: 56px; height: 56px; font-size: 1.8rem; }
  .itin .iday { width: 60px; }
  .kt-dnum { width: 64px; }
  .kt-dnum b { font-size: 1.9rem; }
  .footer-cta {
    padding: var(--sp-6) var(--sp-3) var(--sp-5);
  }
  .gwall {
    columns: 2;
  }
  .cta-band {
    padding: clamp(48px, 7vw, 80px) clamp(var(--sp-3), 5vw, var(--sp-6));
  }
  .cine-panel {
    width: 84vw;
    height: 60svh;
  }
  .hero-badge-card {
    display: none;
  }
  .mega {
    display: none;
  }
  .itin .itin-body {
    padding-left: 24px;
  }
  .mbar-mobile {
    display: flex;
  }
  /* The booking bar already has a WhatsApp button; the float would cover its Enquire button. */
  body:has(.mbar-mobile) .wa-float {
    display: none;
  }
  /* hstrip: narrower cards on tablet so next card peeks */
  .hcard {
    width: clamp(240px, 72vw, 360px);
    height: clamp(340px, 60vw, 480px);
  }
  .hcard.cta-hcard {
    width: clamp(200px, 60vw, 300px);
  }
  .hstrip-head {
    padding: clamp(40px, 5vw, 64px) clamp(20px, 3.5vw, 48px) var(--sp-3);
  }
  .hstrip-nav {
    margin-bottom: var(--sp-2);
  }
}
@media (max-width: 520px) {
  .svc-grid {
    display: grid;
    grid-template-columns: 1fr;
    height: auto;
  }
  .svc-tile {
    aspect-ratio: 4/3;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  .stat-box {
    padding: var(--sp-3) var(--sp-2);
  }
  .hero-stats-strip {
    grid-template-columns: 1fr 1fr;
  }
  .hero-stat {
    padding: var(--sp-2) var(--sp-2);
  }
  .gwall {
    columns: 1;
  }
  /* minmax(0, …): long values (e.g. best season) overflowed a 320px viewport by a few px */
  .glance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .glance-cell {
    padding: var(--sp-2) var(--sp-3);
    overflow-wrap: anywhere;
  }
  .detail-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
  .section {
    padding: clamp(40px, 5vw, 56px) 0;
  }
  /* section-head: stack on mobile — text top, button below */
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
  }
  /* page-specific mobile fixes */
  .team-grid   { grid-template-columns: 1fr; }
  .contact-cols { gap: var(--sp-3); }
  .form-card   { padding: var(--sp-3); }
  .ie { grid-template-columns: 1fr; }
  .kt-ie { grid-template-columns: 1fr; }
  .step-num { width: 48px; height: 48px; font-size: 1.6rem; flex: none; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .tc-body {
    padding: var(--sp-3);
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .footer-cta {
    padding: var(--sp-5) var(--sp-3) var(--sp-4);
  }
  .footer-cta h2 {
    font-size: clamp(2.4rem, 11vw, 3.8rem);
  }
  .cta-band {
    padding: clamp(40px, 7vw, 64px) var(--sp-3);
  }
  /* hstrip: near-full-width cards on small phones */
  .hcard {
    width: 85vw;
    height: clamp(300px, 70vw, 440px);
  }
  .hcard.cta-hcard {
    width: 80vw;
  }
  .hstrip-head {
    padding: var(--sp-4) clamp(16px, 4vw, 24px) var(--sp-2);
  }
  .hstrip-nav {
    padding: 0 var(--sp-3);
    margin-bottom: var(--sp-2);
  }
  h1,
  .wp-block-post-title {
    font-size: clamp(2.2rem, 9.5vw, 3.4rem);
  }
  .hero-headline {
    font-size: clamp(2.4rem, 10vw, 3.4rem);
  }
  .hero-left {
    padding: calc(var(--nav-h) + 20px) 20px var(--sp-4);
  }
}

/* ── WP CORE OVERRIDES ───────────────────────────────────────── */
/* Strip default WP block margins and padding that fight our layout */
.wp-site-blocks {
  padding: 0 !important;
}
.wp-block-query {
  margin: 0;
}
.is-layout-constrained > * {
  max-width: none !important;
  margin-inline: 0 !important;
}
.wp-block-post-content {
  margin: 0;
}

/* ── TOUR CATALOG (archive-tour) ────────────────────── */

/* Hero bottom stat strip */
.catalog-hero-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: var(--sp-5);
  border: 1px solid rgba(237, 232, 225, 0.16);
  border-right: none;
  background-color: rgba(5, 7, 9, 0.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}
.chs-item {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 16px 24px;
  border-right: 1px solid rgba(237, 232, 225, 0.12);
}
.chs-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 600;
  color: #deb06a;
  line-height: 1;
  letter-spacing: 0.02em;
}
.chs-item span {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9c3ba;
  margin-top: 4px;
}

/* Filter section */
.catalog-filter-wrap {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--ridge);
}
.catalog-filter-head {
  margin-bottom: var(--sp-3);
}
.catalog-filter-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-2) 0;
}
.catalog-filter-row + .catalog-filter-row {
  border-top: 1px solid var(--ridge);
}
.catalog-filter-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
  flex: none;
  min-width: 96px;
  padding-top: 11px;
}
.catalog-filter-row .filter-bar {
  margin-bottom: 0;
  flex: 1;
}

/* Responsive — catalog */
@media (max-width: 1080px) {
  .catalog-section .tour-card {
    grid-template-columns: 260px 1fr;
  }
}
@media (max-width: 860px) {
  .catalog-filter-row {
    flex-direction: column;
    gap: var(--sp-2);
  }
  .catalog-filter-label {
    min-width: auto;
    padding-top: 0;
  }
  .catalog-section .tour-card {
    grid-template-columns: 1fr;
  }
  .catalog-section .tc-media {
    min-height: 56vw;
    aspect-ratio: unset;
  }
  .catalog-section .tc-media::after {
    width: 0;
  }
  .catalog-section .tc-media::before {
    font-size: clamp(3rem, 10vw, 5rem);
  }
  .catalog-hero-strip {
    gap: 0;
  }
  .chs-item {
    min-width: 50%;
  }
}
@media (max-width: 520px) {
  .chs-item {
    min-width: 100%;
  }
}

/* Archive/query no-results */
.kt-no-results {
  text-align: center;
  padding: var(--sp-7) var(--sp-4);
  display: grid;
  place-items: center;
  gap: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--ridge);
}
.kt-no-results h2 {
  font-size: clamp(2rem, 3.5vw, 3.5rem);
}
.kt-no-results p {
  color: var(--fog);
}
.kt-no-results-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--sp-3);
}

/* WP pagination */
.wp-block-query-pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  padding: var(--sp-5) 0;
}
.wp-block-query-pagination a,
.wp-block-query-pagination-previous-arrow,
.wp-block-query-pagination-next-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--ridge);
  background: var(--surface);
  color: var(--fog);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all 0.18s;
}
.wp-block-query-pagination a:hover {
  border-color: var(--copper);
  color: var(--copper);
}
.wp-block-query-pagination .current {
  background: var(--copper-fill);
  border-color: var(--copper-fill);
  color: var(--on-copper);
}

/* ── SEARCH RESULTS PAGE ─────────────────────────────── */
.search-page-hero {
  padding: calc(var(--nav-h) + var(--sp-5)) 0 var(--sp-5);
  border-bottom: 1px solid var(--ridge);
}
.search-page-hero .crumbs { margin-bottom: var(--sp-3); }
.search-page-hero .wp-block-search__inside-wrapper {
  display: flex; gap: 0;
  border-bottom: 2px solid var(--copper); padding-bottom: var(--sp-2);
}
.search-page-hero .wp-block-search__input {
  flex: 1; background: transparent !important; border: none !important;
  box-shadow: none !important; padding: 0 !important;
  font-family: var(--font-display) !important;
  font-size: clamp(1.8rem, 4vw, 3.2rem) !important;
  font-weight: 600 !important; letter-spacing: .02em !important;
  text-transform: uppercase !important; color: var(--paper) !important;
  caret-color: var(--copper) !important;
}
.search-page-hero .wp-block-search__input::placeholder { color: rgba(237,232,225,.22) !important; }
html.light .search-page-hero .wp-block-search__input::placeholder { color: rgba(15,13,8,.3) !important; }
.search-page-hero .wp-block-search__button {
  background: transparent !important; border: none !important;
  color: var(--copper) !important; cursor: pointer; padding: 0 8px !important;
  min-width: unset !important;
}

/* Result cards */
/* ── SEARCH RESULTS — editorial list ─── */
.search-results-list { display: flex; flex-direction: column; gap: 0; margin-top: var(--sp-4); }

.search-result-card {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--ridge);
  border-left: 3px solid transparent;
  padding-left: var(--sp-3);
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .2s, background .2s, padding-left .2s;
}
.search-results-list .search-result-card:first-child { border-top: 1px solid var(--ridge); }
.search-result-card:hover { border-left-color: var(--copper); background: var(--surface); padding-left: var(--sp-4); }

.src-meta { display: flex; align-items: center; gap: 16px; }
.src-type a, .src-type {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--copper); text-decoration: none;
}
.src-date, .src-date time { font-family: var(--font-mono); font-size: 0.72rem; color: var(--fog); letter-spacing: .08em; }

.src-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: nowrap; }

/* Override global .wp-block-post-title h1 sizing — MUST use high-specificity + !important */
.search-result-card .wp-block-post-title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.4rem, 2.2vw, 2.2rem) !important;
  font-weight: 600 !important; line-height: 1.1 !important;
  letter-spacing: .04em !important; text-transform: uppercase !important;
  color: var(--snow) !important; margin: 0 !important;
  word-break: break-word !important; flex: 1 !important;
}
.search-result-card .wp-block-post-title a { color: inherit !important; text-decoration: none !important; transition: color .2s !important; }
.search-result-card:hover .wp-block-post-title a { color: var(--copper) !important; }

.src-link { flex: none; }
.src-link a, a.src-link {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--copper);
  text-decoration: none; transition: gap .2s;
}
.src-link a:hover { gap: 10px; }

.src-excerpt p, .src-excerpt {
  font-size: 0.88rem; color: var(--fog); line-height: 1.65; margin: 0;
}

/* /search/ result groups */
.kt-search-group {
  margin: var(--sp-6) 0 var(--sp-3); font: 600 .78rem/1 var(--font-sans);
  letter-spacing: .22em; text-transform: uppercase; color: var(--copper);
}
.kt-search-group:first-child { margin-top: var(--sp-5); }
.kt-search-hubs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.kt-search-hubs a {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px;
  border: 1px solid var(--ridge); color: inherit; text-decoration: none; transition: border-color .2s, background .2s;
}
.kt-search-hubs a:hover, .kt-search-hubs a:focus-visible { border-color: var(--copper); background: var(--surface); }
.kt-search-hubs img { width: 64px; height: 64px; object-fit: cover; flex: none; }
.kt-search-hubs span:not(.kt-search-go) { flex: 1; display: grid; gap: 4px; }
.kt-search-hubs strong { font: 600 1.05rem/1.2 var(--font-sans); color: var(--snow); }
.kt-search-hubs small { font-size: .8rem; color: var(--fog); }
.kt-search-go { color: var(--copper); }

/* No results state */
.search-no-results {
  text-align: center; padding: var(--sp-7) var(--sp-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
}
.snr-icon {
  width: 80px; height: 80px; border: 2px solid var(--ridge);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 2.8rem; font-weight: 700;
  color: var(--copper-dim); line-height: 1;
}
.search-no-results h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 0; }
.search-no-results > p { color: var(--fog); max-width: 44ch; }
.snr-links { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.snr-suggestions { margin-top: var(--sp-3); }
.snr-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: var(--sp-2); }
.snr-tags a {
  padding: 8px 18px; border: 1px solid var(--ridge); background: var(--surface);
  font-family: var(--font-sans); font-size: 0.82rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: var(--fog);
  text-decoration: none; transition: all .18s;
}
.snr-tags a:hover { border-color: var(--copper); color: var(--copper); }