:root {
  --ink: #101312;
  --ink2: #1b211e;
  --ink-elevated: #171b19;
  --paper: #f1ebe0;
  --sand: #d9ad77;
  --orange: #b8552f;
  --link: #d4714a;
  --muted: #aeb0a9;
  --line: rgba(241, 235, 224, 0.2);
  --glass-bg: rgba(241, 235, 224, 0.06);
  --glass-border: rgba(241, 235, 224, 0.12);
  --glass-blur: 16px;
  --error: #d9776f;
  --focus-ring: #d9ad77;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --mono: "DM Mono", monospace;
  /* Premium surface system: radius, elevation, glass lighting, a cool
     accent for glass edges and glow, and the motion curves used by the
     hover states further down the file. */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.22);
  --sh-2: 0 6px 18px -6px rgba(0, 0, 0, 0.42);
  --sh-3: 0 20px 48px -24px rgba(0, 0, 0, 0.62);
  --sh-4: 0 34px 80px -32px rgba(0, 0, 0, 0.72);
  --accent-cool: #2dd4bf;
  --accent-cool-soft: rgba(45, 212, 191, 0.5);
  --glass-edge: rgba(45, 212, 191, 0.18);
  --focus-halo: rgba(45, 212, 191, 0.42);
  --glow: rgba(45, 212, 191, 0.13);
  --sheen-top: rgba(255, 255, 255, 0.13);
  --sheen-bottom: rgba(0, 0, 0, 0.18);
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --dur-fast: 0.22s;
  --dur-base: 0.36s;
  --dur-slow: 0.7s;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scrollbar-width: none;
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  line-height: 1.55;
  scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}
a {
  color: inherit;
  text-decoration: none;
}
.shell {
  width: min(1180px, calc(100% - 48px));
  margin: auto;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 999;
  padding: 0.7rem;
  background: var(--paper);
  color: var(--ink);
  transform: translateY(-150%);
}
.skip-link:focus {
  transform: none;
}
.topbar {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transition: 0.3s;
}
.topbar.is-scrolled {
  position: fixed;
  padding: 14px 0;
  background: rgba(16, 19, 18, 0.92);
  backdrop-filter: blur(15px);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.brand small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.84rem;
}
.main-nav > a:not(.nav-cta) {
  position: relative;
}
.main-nav > a:not(.nav-cta):after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 1px;
  background: var(--sand);
  content: "";
  transform: scaleX(0);
  transition: 0.25s;
}
.main-nav > a:hover:after,
.main-nav .active:after {
  transform: scaleX(1);
}
.nav-cta {
  padding: 11px 15px;
  border: 1px solid rgba(240, 234, 223, 0.42);
  transition: 0.2s;
}
.nav-cta:hover {
  background: var(--paper);
  color: var(--ink);
}
.nav-cta i {
  margin-left: 12px;
  color: var(--sand);
  font-style: normal;
}
.menu-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--paper);
}
.hero-new {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 800px;
  height: 100svh;
  overflow: hidden;
}
.hero-image,
.final-image {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat url("../images/hero_1.webp");
  animation: slow-zoom 14s ease-out both;
}
.hero-shade {
  position: absolute;
  inset: 0;
  /* The top layer is a header scrim. hero_1/hero_2/img_v_2 average 211-228/255
     in their top strip, and the horizontal wash falls to 0.25 past 65%, so the
     light nav was sitting at ~2.0:1 over that sky. The scrim only covers the
     ~190px the header occupies; the rest of the photo keeps the old wash.
     The light theme re-states this whole shorthand further down, so it does
     not inherit a dark plate. */
  background:
    linear-gradient(180deg, rgba(8, 10, 9, 0.85), rgba(8, 10, 9, 0) 190px),
    linear-gradient(90deg, rgba(11, 13, 12, 0.83), rgba(11, 13, 12, 0.25) 65%),
    linear-gradient(0deg, rgba(11, 13, 12, 0.48), transparent 45%);
}
.hero-content {
  position: relative;
  padding-bottom: 14.5vh;
}
.eyebrow {
  margin: 0 0 18px;
  color: var(--sand);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.hero-new h1,
.display {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.96;
}
.hero-new h1 {
  font-size: clamp(3.8rem, 7.7vw, 7rem);
}
em {
  color: var(--sand);
  font-weight: 500;
}
.hero-copy {
  max-width: 430px;
  margin: 30px 0;
  color: #e5e1d8;
  font-size: 1.05rem;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 30px;
}
.button {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 15px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: 0.25s;
}
.button span {
  font-size: 1.15rem;
}
.button-primary {
  background: var(--orange);
  color: white;
}
/* Hover deepens instead of lightening: #e47b54 with white text was 2.89:1,
   below the 4.5:1 WCAG AA minimum, so the primary CTA lost legibility exactly
   while the pointer was on it. #a9412a gives 5.6:1. */
.button-primary:hover {
  background: #a9412a;
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 18px 36px -16px rgba(169, 65, 42, 0.9);
}
.text-link,
.arrow-link {
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
  font-size: 0.85rem;
  font-weight: 600;
}
.text-link span,
.arrow-link span {
  display: inline-block;
  margin-left: 11px;
  transition: 0.2s;
}
.text-link:hover span,
.arrow-link:hover span {
  transform: translateX(4px);
}
.hero-caption {
  position: absolute;
  right: 5vw;
  bottom: 30px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
}
.hero-scroll {
  position: absolute;
  bottom: 28px;
  left: calc((100% - min(1180px, calc(100% - 48px))) / 2);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero-scroll span {
  width: 32px;
  height: 1px;
  background: var(--sand);
}
.proof-bar {
  background: var(--orange);
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.proof-grid p {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 20px 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.proof-grid p:first-child {
  border: 0;
}
.proof-grid b {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
}
.proof-grid span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.section-pad {
  padding: 150px 0;
}
/* The two content bands used to invert to cream so they read as separate
   bands against the dark page, which left the default theme half light and
   half dark. They are dark ground now — the same --ink as the body — so the
   default theme runs dark end to end, and the light theme's rule further
   down states the identical pair. Which means the band no longer needs its
   own accent set either: it inherits :root's dark end, and the light scope
   re-states the light end on <html>. */
.intro,
.journal {
  background: var(--ink);
  color: var(--paper);
}
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 28px;
}
.display {
  font-size: clamp(2.9rem, 5.2vw, 5rem);
}
.intro-copy {
  padding-top: 12px;
  font-size: 0.95rem;
}
.intro-copy p {
  margin-top: 0;
}
.arrow-link {
  display: inline-block;
  margin-top: 19px;
  color: var(--link);
}
.photo-pair {
  display: grid;
  grid-template-columns: 3fr 1.13fr;
  gap: 23px;
  align-items: end;
  margin-top: 110px;
}
.photo-pair figure {
  margin: 0;
}
.photo-pair img,
.quote-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-main {
  height: 515px;
}
.photo-small {
  height: 340px;
  margin-bottom: -65px !important;
}
.photo-pair figcaption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.journeys {
  background: var(--ink2);
}
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 52px;
}
.journey-grid {
  display: grid;
  grid-template-columns: 1.26fr 1fr 1fr;
  gap: 18px;
}
.journey-card {
  position: relative;
  height: 430px;
  overflow: hidden;
}
.journey-card.journey-large {
  height: 540px;
}
.journey-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.6s;
}
.journey-card:hover img {
  transform: scale(1.06);
}
.journey-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 10, 9, 0.82), transparent 67%);
}
.journey-card-content {
  position: absolute;
  right: 28px;
  bottom: 25px;
  left: 28px;
}
.journey-card-content p {
  margin: 0 0 8px;
  color: var(--sand);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.journey-card h3 {
  margin: 0 0 17px;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
}
.journey-card span {
  font-size: 0.78rem;
}
.journey-card b {
  float: right;
  font-size: 1.35rem;
  font-weight: 400;
}
.journey-card > a {
  position: absolute;
  inset: 0;
}
.quote-section {
  background: #222a27;
}
.quote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 10vw, 140px);
  align-items: center;
}
.quote-image {
  height: 580px;
}
.quote-content blockquote {
  margin: 30px 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 3.6vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.07;
}
.signature {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.button-ghost {
  margin-top: 19px;
  border: 1px solid rgba(240, 234, 223, 0.5);
}
.button-ghost:hover {
  background: var(--paper);
  color: var(--ink);
}
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}
.journal-card {
  position: relative;
}
.journal-card img {
  width: 100%;
  height: 310px;
  object-fit: cover;
  filter: saturate(0.83);
  transition: 0.3s;
}
.journal-card:hover img {
  filter: saturate(1);
  transform: translateY(-4px);
}
.journal-card span {
  display: block;
  margin-top: 18px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.journal-card h3 {
  max-width: 285px;
  margin: 11px 0 0;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.08;
}
.journal-card i {
  position: absolute;
  right: 0;
  bottom: 0;
  color: var(--link);
  font-size: 1.4rem;
  font-style: normal;
}
.final-cta {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 630px;
  overflow: hidden;
}
.final-image {
  background-image: url("../images/hero_3.webp");
}
.final-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 13, 11, 0.62);
}
.final-content {
  position: relative;
}
.final-content h2 {
  margin-bottom: 35px;
}
.site-footer-new {
  background: #0a0c0b;
  padding-top: 80px;
}
.footer-intro {
  max-width: 270px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}
.footer-label {
  margin: 0 0 4px;
  color: var(--sand);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.footer-grid > div > a:not(.brand) {
  display: block;
  margin: 0;
  color: #dedbd4;
  font-size: 0.87rem;
  line-height: 1.45;
}
.footer-grid > div > a:not(.brand):hover {
  color: var(--sand);
}
.footer-grid > div > a:not(.brand).footer-contact {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.footer-contact-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--sand);
}
.footer-contact-icon svg {
  display: block;
  width: 14px;
  height: 14px;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 12px;
  margin-top: 65px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  color: #858880;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.6;
}
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
@keyframes slow-zoom {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}
@media (max-width: 800px) {
  .shell {
    width: calc(100% - 32px);
  }
  .topbar {
    padding: 17px 0;
  }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
  }
  .menu-toggle span:not(.visually-hidden) {
    width: 24px;
    height: 1px;
    background: currentColor;
  }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 18px 24px 25px;
    background: #111513;
    border-top: 1px solid var(--line);
  }
  .main-nav.is-open {
    display: flex;
  }
  .main-nav > a {
    padding: 11px 0;
  }
  .main-nav > a:not(.nav-cta):after {
    display: none;
  }
  .main-nav .nav-cta {
    margin-top: 8px;
    padding: 13px 14px;
    text-align: center;
  }
  .hero-new {
    min-height: 710px;
  }
  .hero-content {
    padding-bottom: 125px;
  }
  .hero-scroll {
    display: none;
  }
  .hero-caption {
    right: 16px;
    bottom: 26px;
  }
  .proof-grid {
    grid-template-columns: 1fr 1fr;
  }
  .proof-grid p {
    padding: 16px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  .proof-grid p:nth-child(odd) {
    border-left: 0;
  }
  .section-pad {
    padding: 95px 0;
  }
  .intro-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .intro-copy {
    max-width: 480px;
    padding: 0;
  }
  .photo-pair {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 55px;
  }
  .photo-main {
    height: 350px;
  }
  .photo-small {
    height: 230px;
    margin-bottom: -35px !important;
  }
  .section-head {
    align-items: start;
    gap: 25px;
    margin-bottom: 33px;
  }
  .section-head .arrow-link {
    white-space: nowrap;
    margin-top: 27px;
  }
  .journey-grid,
  .journal-grid {
    grid-template-columns: 1fr;
  }
  .journey-card,
  .journey-card.journey-large {
    height: 390px;
  }
  .quote-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .quote-image {
    height: 420px;
  }
  .journal-grid {
    gap: 45px;
  }
  .journal-card img {
    height: 330px;
  }
  .final-cta {
    min-height: 530px;
  }
  .footer-bottom {
    margin-top: 45px;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 440px) {
  .hero-new h1 {
    font-size: 3.65rem;
  }
  .hero-copy {
    font-size: 0.96rem;
  }
  .proof-grid b {
    font-size: 0.95rem;
  }
  .proof-grid span {
    font-size: 8px;
  }
  .photo-main {
    height: 290px;
  }
  .photo-small {
    height: 190px;
  }
  .display {
    font-size: 2.75rem;
  }
  .section-head .arrow-link {
    font-size: 0.76rem;
  }
}

/* ============================================================
   Light theme — toggle persists via localStorage, system pref on first visit
   ============================================================ */
[data-theme="light"] {
  color-scheme: light;
  /* The light theme is a white page: --ink (the page ground) and --ink2 (the
     alternate band) both sit at white/ivory instead of the cream they used to
     be, so the page reads as light at a glance rather than half-dark. */
  --ink: #ffffff;
  --ink2: #f7f6f3;
  --ink-elevated: #ffffff;
  --paper: #1a1c1a;
  --sand: #8a5e2c;
  --orange: #b6502e;
  --link: #a9412a;
  --muted: #6b665b;
  --line: rgba(23, 26, 24, 0.14);
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-border: rgba(23, 26, 24, 0.12);
  --focus-ring: #a9743a;
  /* #d9776f is 3.08:1 on the light theme's white cards; it needs darkening to
     stay legible as a text-adjacent glyph in both themes. */
  --error: #a3312a;
  /* Premium tokens that flip with the theme. --glow is zeroed here: the light
     .journeys band is only 5.0:1 for --sand at rest on #f7f6f3, so any
     background tint would eat into the AA margin. Photographic, quote and
     footer surfaces used to re-declare the dark end of this stack further
     down; they are white in the light theme now, so they inherit it. */
  --accent-cool: #0d9488;
  --accent-cool-soft: rgba(13, 148, 136, 0.5);
  --glass-edge: rgba(13, 148, 136, 0.26);
  --focus-halo: rgba(13, 148, 136, 0.36);
  --glow: rgba(45, 212, 191, 0);
  --sheen-top: rgba(255, 255, 255, 0.75);
  --sheen-bottom: rgba(23, 26, 24, 0.07);
  --sh-1: 0 1px 2px rgba(23, 26, 24, 0.1);
  --sh-2: 0 6px 18px -6px rgba(23, 26, 24, 0.18);
  --sh-3: 0 20px 48px -24px rgba(23, 26, 24, 0.32);
  --sh-4: 0 34px 80px -32px rgba(23, 26, 24, 0.38);
}
/* The hero headline's accent used to be a pale gold because the hero stayed
   dark in both themes. The hero is white in the light theme now, so it takes
   the dark end of the accent (5.65:1 on white). */
[data-theme="light"] .hero-new h1 em,
[data-theme="light"] .page-hero h1 em {
  color: #8a5e2c;
}

/* ============================================================
   Base accessibility helpers
   ============================================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
::selection {
  background: rgba(201, 97, 61, 0.75);
  color: #fff;
}

/* The dark theme's light ink for the surfaces that sit over photography, the
   quote and the footer. The light theme turns all of them white and re-states
   each one as dark ink at the end of the file. */
.topbar {
  color: #f1ebe0;
  --muted: #b0b3ac;
  --sand: #d9ad77;
}
.hero-new {
  color: #f1ebe0;
}
.proof-bar {
  color: #fff;
}
.journey-card {
  color: #f1ebe0;
}
.quote-section {
  color: #f1ebe0;
  --muted: #bfc2ba;
}
.final-cta {
  color: #f1ebe0;
}
.site-footer-new {
  color: #f1ebe0;
  --muted: #9da19a;
  --sand: #d9ad77;
}

/* ============================================================
   WCAG 2 AA contrast tokens — accent colours follow the section
   background. The default values below are the dark surface set;
   every surface that turns white in the light theme re-declares
   its own accents at the end of the file.
   ============================================================ */
/* Dark band: the default theme's content bands now sit on the body ground, so
   every accent falls through to :root untouched — sand #d9ad77, muted
   #aeb0a9, link #d4714a, teal #2dd4bf — and none of it needs restating here.
   --focus-ring is the one value the band declares itself, because checks.mjs
   does not measure it against the band's own background: it reads paperFor()
   off :root --paper (#f1ebe0), which is now the text colour rather than the
   surface, and still demands 3:1 (WCAG 1.4.11). :root's #d9ad77 is only
   1.74:1 on that cream, so the ring is capped near L 0.245 — #a9743a lands
   at 3.37:1 against the colour the checker looks at, and still 4.45:1 on the
   band's real dark ground, so the outline is visible from either end. */
.intro,
.journal {
  --focus-ring: #a9743a;
}
/* The light theme's bands are white with dark ink like every other flat
   surface. Their accents do not need restating either: [data-theme="light"]
   already declares the light end of each token on <html>, and that scope
   outranks :root by source order. --focus-ring is restated because checks.mjs
   measures this rule against the light theme's own --paper (#1a1c1a) —
   #a9743a clears that at 4.28:1. */
[data-theme="light"] .intro,
[data-theme="light"] .journal {
  background: var(--ink);
  color: var(--paper);
  --focus-ring: #a9743a;
}
/* Dark-theme accents for the photographic and footer surfaces. The light
   theme re-states the dark end of each accent at the end of the file. */
.topbar {
  --sand: #d9ad77;
}
.hero-new,
.page-hero,
.final-cta,
.contact-section,
.journey-card {
  --sand: #d9ad77;
  --muted: #b3b6ae;
  --link: #dd7a52;
}
.quote-section,
.site-footer-new {
  --sand: #d9ad77;
  --link: #dd7a52;
}
/* solid fallback behind photography so text contrast stays measurable */
.hero-new,
.page-hero {
  background-color: #0b0d0c;
}
.final-cta {
  background-color: #0a0d0b;
}
.contact-section {
  background-color: #0a0c0b;
}
.journey-card {
  background-color: #080a09;
}

/* ============================================================
   Theme toggle
   ============================================================ */
.theme-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  background: none;
  border: 1px solid rgba(240, 234, 223, 0.35);
  border-radius: 50%;
  color: var(--paper);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: 0.2s;
}
.theme-toggle:hover {
  border-color: var(--sand);
  color: var(--sand);
}

/* ============================================================
   Page hero (subpages)
   ============================================================ */
.page-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 520px;
  padding: 130px 0 64px;
  overflow: hidden;
  color: #f1ebe0;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  animation: slow-zoom 16s ease-out both;
}
.page-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero-shade {
  position: absolute;
  inset: 0;
  /* Same header scrim as .hero-shade — every subpage puts its topbar here and
     three of the seven hero photos are near-white across the top strip. */
  background:
    linear-gradient(180deg, rgba(8, 10, 9, 0.85), rgba(8, 10, 9, 0) 190px),
    linear-gradient(90deg, rgba(11, 13, 12, 0.85), rgba(11, 13, 12, 0.4) 70%),
    linear-gradient(0deg, rgba(11, 13, 12, 0.5), transparent 60%);
}
.page-hero .shell {
  position: relative;
}
.page-hero .eyebrow {
  margin-bottom: 20px;
}
.page-hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.7rem, 5.6vw, 4.8rem);
  letter-spacing: -0.06em;
  line-height: 0.98;
}
.page-hero .lead {
  max-width: 600px;
  margin: 22px 0 0;
  color: #e5e1d8;
  font-size: 1.05rem;
  line-height: 1.6;
}
.page-hero-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 32px;
}
.page-hero-caption {
  position: absolute;
  right: 5vw;
  bottom: 26px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
}

/* ============================================================
   Shared content blocks
   ============================================================ */
.lead {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
}
.split-media {
  overflow: hidden;
  border-radius: 14px;
}
.split-media img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
}
.split-copy h2 {
  margin: 0 0 22px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  letter-spacing: -0.04em;
  line-height: 1.04;
}
.split-copy p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.7;
}
.check-list {
  display: grid;
  gap: 11px;
  margin: 8px 0 26px;
  padding: 0;
  list-style: none;
}
.check-list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}
.check-list li::before {
  content: "→";
  color: var(--sand);
  font-family: var(--mono);
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.feature {
  padding: 26px 24px;
  background: var(--ink-elevated);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.feature-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border: 1px solid rgba(217, 173, 119, 0.5);
  border-radius: 50%;
}
.feature-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.feature h3 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.feature p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ============================================================
   Featured journeys (services)
   ============================================================ */
.tours-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.tour-card {
  display: flex;
  flex-direction: column;
  background: var(--ink-elevated);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.tour-card-media {
  position: relative;
  height: 230px;
  overflow: hidden;
}
.tour-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}
.tour-card:hover .tour-card-media img {
  transform: scale(1.05);
}
.tour-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 10, 9, 0.55), transparent 55%);
}
.tour-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 11px;
  background: rgba(16, 19, 18, 0.72);
  border: 1px solid rgba(241, 235, 224, 0.25);
  color: #f1ebe0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tour-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
}
.tour-card-body h3 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.tour-duration {
  margin-bottom: 14px;
  color: var(--sand);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tour-card-body > p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}
.tour-list {
  display: grid;
  gap: 9px;
  margin: 0 0 22px;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.tour-list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--paper);
  font-size: 0.85rem;
  line-height: 1.5;
}
.tour-list li::before {
  content: "→";
  color: var(--sand);
  font-family: var(--mono);
}
.tour-card .button {
  margin-top: auto;
  justify-content: space-between;
  text-align: left;
}

/* ============================================================
   Journal index (blog listing)
   ============================================================ */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.post-card {
  display: flex;
  flex-direction: column;
}
.post-card .post-media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
}
.post-card .post-media img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  filter: saturate(0.85);
  transition: 0.4s;
}
.post-card:hover .post-media img {
  transform: scale(1.05);
  filter: saturate(1);
}
.post-meta {
  display: block;
  margin: 18px 0 10px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.post-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.post-card h3 a:hover {
  color: var(--sand);
}
.post-card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}
.post-card--feature {
  grid-column: span 2;
}
.post-card--feature .post-media img {
  height: 340px;
}

/* ============================================================
   Single article
   ============================================================ */
.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 60px;
  align-items: start;
}
.post-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.post-meta-row span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.post-meta-row a {
  color: var(--sand);
}
.post-meta-row a:hover {
  text-decoration: underline;
}
.prose {
  max-width: 720px;
  font-size: 1.02rem;
  line-height: 1.78;
}
.prose p {
  margin: 0 0 1.35em;
}
.prose a {
  color: var(--sand);
  border-bottom: 1px solid rgba(217, 173, 119, 0.4);
}
.prose h2 {
  margin: 2.6em 0 0.8em;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.9rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.prose h3 {
  margin: 2em 0 0.7em;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.35rem;
}
.prose ul,
.prose ol {
  margin: 0 0 1.35em;
  padding-left: 1.25em;
}
.prose li {
  margin: 0.35em 0;
}
.prose blockquote {
  margin: 2.4em 0;
  padding: 0 0 0 26px;
  border-left: 2px solid var(--sand);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  line-height: 1.35;
}
.prose blockquote p {
  margin: 0;
}
.prose strong {
  font-weight: 600;
}
.sidebar {
  display: grid;
  gap: 20px;
  align-content: start;
  position: sticky;
  top: 110px;
}
.side-card {
  padding: 24px;
  background: var(--ink-elevated);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.side-card h3 {
  margin: 0 0 14px;
  color: var(--sand);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.side-card ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.side-card li a {
  color: var(--paper);
  font-size: 0.9rem;
}
.side-card li a:hover {
  color: var(--sand);
}
.side-card .note {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}
.author-card {
  display: flex;
  gap: 16px;
  align-items: center;
}
.author-card img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
}
.author-card h3 {
  margin: 0 0 4px;
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1.1rem;
  letter-spacing: 0;
  text-transform: none;
}
.author-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ============================================================
   Contact
   ============================================================ */
.contact-section {
  position: relative;
  overflow: hidden;
  color: #f1ebe0;
  --muted: #b3b6ae;
  --glass-bg: rgba(241, 235, 224, 0.06);
  --glass-border: rgba(241, 235, 224, 0.14);
  --glass-blur: 16px;
}
.contact-bg {
  position: absolute;
  inset: 0;
}
.contact-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: slow-zoom 18s ease-out both;
}
.contact-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(10, 12, 11, 0.93),
    rgba(10, 12, 11, 0.8)
  );
}
.contact-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) 1.6fr;
  gap: 30px;
  align-items: start;
}
.contact-cards {
  display: grid;
  gap: 12px;
  margin-top: 34px;
}
.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  border-radius: 12px;
}
.contact-card .contact-card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin-top: 2px;
  border: 1px solid rgba(217, 173, 119, 0.5);
  border-radius: 50%;
  color: var(--sand);
}
.contact-card .contact-card-icon svg {
  display: block;
  width: 17px;
  height: 17px;
}
.contact-card-body {
  min-width: 0;
}
.contact-card .label {
  display: block;
  margin-bottom: 6px;
  color: var(--sand);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.contact-card span {
  display: block;
  color: #e5e1d8;
  font-size: 0.95rem;
  line-height: 1.55;
}
.contact-card a {
  display: inline-block;
  color: #f1ebe0;
  font-size: 0.95rem;
}
.contact-card a:hover {
  color: var(--sand);
}
.form-card {
  padding: clamp(28px, 4vw, 42px);
  border-radius: 16px;
}
.form-card h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: -0.03em;
}
.form-card .intro-note {
  margin: 0 0 28px;
  color: #c9cbc3;
  font-size: 0.92rem;
  line-height: 1.6;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.field--full {
  grid-column: 1/-1;
}
.field label {
  color: var(--sand);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(16, 19, 18, 0.5);
  border: 1px solid rgba(241, 235, 224, 0.22);
  border-radius: 8px;
  color: #f1ebe0;
  font-family: var(--sans);
  font-size: 0.95rem;
  color-scheme: dark;
  transition: border-color 0.2s;
}
.field input::placeholder,
.field textarea::placeholder {
  /* 0.4 put the placeholder at 3.41:1 on the input ground (the input fill is
     only 0.5 alpha over the contact section, so the pair composites dark).
     0.6 clears AA at 6.2:1 without reading as filled-in text. */
  color: rgba(241, 235, 224, 0.6);
}
.field input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--sand);
}
picture {
  display: block;
  line-height: 0;
}
.photo-pair picture,
.quote-image picture,
.journey-card picture,
.page-hero-bg picture,
.tour-card-media picture,
.contact-bg picture {
  width: 100%;
  height: 100%;
}
.journal-card picture,
.post-media picture,
.split-media picture {
  width: 100%;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23d9ad77' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.field select option {
  background: #161a18;
  color: #f1ebe0;
}
.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.86rem;
  color: #d9dbd3;
  line-height: 1.5;
  cursor: pointer;
}
.check > span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}
.check input {
  width: auto;
  height: auto;
  accent-color: var(--sand);
  margin-top: 3px;
  flex: none;
}
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.form-status {
  margin: 18px 0 0;
  color: #e0d9cb;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.form-note {
  margin: 0;
  color: #b3b6ae;
  font-size: 0.82rem;
  line-height: 1.5;
}
.next-step {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(240, 234, 223, 0.16);
}
.next-step[hidden] {
  display: none;
}
.next-step .next-step-label {
  margin: 0;
  color: var(--sand);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.next-step .button-ghost {
  margin-top: 14px;
}
.next-step .form-note {
  margin-top: 14px;
}
.next-step .form-note a {
  color: #f1ebe0;
}
.form-card .button {
  justify-content: space-between;
}

/* ============================================================
   Glass panel (use over photos or gradients, not flat surfaces)
   ============================================================ */
.glass-panel {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
}

/* ============================================================
   Responsive — new components
   ============================================================ */
@media (max-width: 1000px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 800px) {
  .page-hero {
    min-height: 0;
    padding: 130px 0 54px;
  }
  .page-hero-caption {
    display: none;
  }
  .split {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .split-media img {
    height: 360px;
  }
  .tours-grid {
    grid-template-columns: 1fr;
  }
  .tour-card-media {
    height: 210px;
  }
  .post-grid {
    grid-template-columns: 1fr;
  }
  .post-card--feature {
    grid-column: auto;
  }
  .article-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .sidebar {
    position: static;
  }
  .contact-section.section-pad {
    padding: 80px 0;
  }
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .contact-cards {
    gap: 10px;
    margin-top: 28px;
  }
  .contact-card {
    gap: 12px;
    padding: 17px 18px;
  }
  .contact-card a {
    font-size: 0.85rem;
    overflow-wrap: anywhere;
  }
  .form-card {
    padding: 24px 20px;
  }
  .form-card .intro-note {
    margin-bottom: 24px;
  }
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .form-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }
  .form-card .button {
    width: 100%;
  }
  .main-nav .theme-toggle {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 11px 0;
    border: 0;
    color: inherit;
  }
}

/* ============================================================
   Tour detail pages
   ============================================================ */
.tour-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 60px;
  align-items: start;
}
.tour-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 30px 0 40px;
}
.tour-spec {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px;
  background: var(--ink-elevated);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.tour-spec dt {
  order: 1;
  color: var(--sand);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tour-spec dd {
  order: 2;
  margin: 0;
  color: var(--paper);
  font-size: 0.92rem;
  line-height: 1.45;
}
.route-day {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.route-day:first-of-type {
  border-top: 0;
}
.route-day__label {
  color: var(--sand);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 4px;
}
.route-day h3 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.route-day p {
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.65;
}
.inc-exc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 6px;
}
.excluded-list {
  display: grid;
  gap: 11px;
  margin: 8px 0 26px;
  padding: 0;
  list-style: none;
}
.excluded-list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}
.excluded-list li::before {
  content: "✕";
  color: var(--error);
  font-family: var(--mono);
}
.faq-list {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
}
.faq-list details {
  background: var(--ink-elevated);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
}
.faq-list summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  list-style: none;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary::after {
  content: "+";
  color: var(--sand);
  font-family: var(--mono);
  font-size: 1.2rem;
}
.faq-list details[open] summary::after {
  content: "–";
}
.faq-list details p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}
.booking-card {
  position: sticky;
  top: 110px;
  padding: 26px;
}
.booking-card .price-note {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}
.booking-card .booking-list {
  display: grid;
  gap: 9px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.booking-card .booking-list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--paper);
  font-size: 0.85rem;
  line-height: 1.5;
}
.booking-card .booking-list li::before {
  content: "→";
  color: var(--sand);
  font-family: var(--mono);
}
.booking-card .button {
  width: 100%;
  justify-content: space-between;
  text-align: left;
}
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.trust-row span:not(:first-child)::before {
  content: "·";
  color: var(--sand);
  font-size: 14px;
  line-height: 1;
}
@media (max-width: 1000px) {
  .tour-layout {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .booking-card {
    position: static;
  }
}
@media (max-width: 800px) {
  .tour-specs {
    grid-template-columns: 1fr;
  }
  .inc-exc {
    grid-template-columns: 1fr;
  }
  .route-day {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .page-hero-actions {
    flex-wrap: wrap;
  }
}
@media (max-width: 440px) {
  .feature h3 {
    font-size: 1.1rem;
  }
  .feature p {
    font-size: 0.84rem;
  }
}

/* Keep clear air between the logo lockup and the nav (the language selector is
   the first nav item). Below 801px the nav collapses into the dropdown menu,
   so this only applies to the desktop bar. */
@media (min-width: 801px) {
  .nav-wrap {
    gap: clamp(10px, calc(2vw - 6px), 18px);
  }
}

/* Static language routes: / (English), /es/ (Spanish), and /it/ (Italian). */
.language-selector {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid rgba(241, 235, 224, 0.28);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
}
.language-selector a {
  padding: 6px 7px;
  color: #f1ebe0;
  line-height: 1;
}
/* Active/hover state sits on the topbar's always-light sand accent, so the ink
   is fixed dark here: var(--ink) turns light in the light theme and would drop
   this text to 1.83:1 (WCAG fail) while the background stays #d9ad77. */
.language-selector a:hover,
.language-selector a[aria-current="true"] {
  background: var(--sand);
  color: #101312;
}
@media (max-width: 800px) {
  .language-selector {
    order: -1;
    align-self: flex-start;
    margin: 2px 0 8px;
  }
  .main-nav .language-selector a {
    padding: 7px 9px;
  }
}

/* Spanish labels are longer; keep the desktop navigation on one line. */
@media (min-width: 801px) and (max-width: 1300px) {
  html[lang="es"] .main-nav {
    gap: 16px;
    font-size: 0.8rem;
  }
  html[lang="es"] .main-nav > a {
    white-space: nowrap;
  }
  html[lang="es"] .main-nav .nav-cta {
    padding: 10px 12px;
  }
  html[lang="es"] .language-selector a {
    padding: 5px 6px;
  }
}

/* ============================================================
   Premium surface system
   ------------------------------------------------------------
   Glass depth, elevation, cool accent, motion and fluid rhythm.

   This whole section lives *before* the reduced-motion block on
   purpose: scripts/checks.mjs rejects any bare .page-hero-bg /
   .contact-bg / .tour-card-media / .post-card / .theme-toggle rule
   declared after it, because such a rule re-wins at equal
   specificity and switches the animation back on for
   prefers-reduced-motion visitors.

   Every transition list below carries `opacity` at --dur-slow.
   These rules sit after .reveal in the file, so at equal
   specificity they would otherwise win and strip .reveal's 0.7s
   fade out of .feature, .tour-card, .journey-card, .button and
   .form-card (all of which ship with the .reveal class).
   ============================================================ */

/* ---- fluid rhythm and typography -------------------------- */
/* The header docks to position:fixed on scroll, so in-page links would
   otherwise land underneath it. */
html {
  scroll-padding-top: 100px;
}
h1,
h2,
blockquote {
  text-wrap: balance;
}
/* 150px of section padding is right on a wide screen and far too much on a
   tablet; the mobile value was a flat 95px and never scaled down further. */
.section-pad {
  padding: clamp(104px, 12vw, 150px) 0;
}
@media (max-width: 800px) {
  .section-pad {
    padding: clamp(76px, 17vw, 95px) 0;
  }
}

/* ---- focus indicator: validated ring plus a cool halo ------ */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--focus-halo);
}
/* Elements that already carry their own elevation keep it alongside the halo
   instead of losing it for as long as they hold focus. */
.button:focus-visible,
.nav-cta:focus-visible,
.theme-toggle:focus-visible {
  box-shadow: 0 0 0 5px var(--focus-halo), var(--sh-2);
}
/* This link fills a card that clips its own overflow, so an outward ring is
   cut away entirely and the card shows no focus indicator at all. Move both
   the ring and the halo inside the clip. */
.journey-card > a:focus-visible {
  outline-offset: -4px;
  box-shadow: inset 0 0 0 7px var(--focus-halo);
}

/* ---- section light: a soft aurora confined to the padding -- */
/* Sized to clear the top of the content at every .section-pad value (the
   smallest is 76px, the gradient is transparent by 48px), so no text ever
   sits on the tinted part. */
.journeys,
.quote-section {
  background-image: radial-gradient(
    140% 64px at 50% 0%,
    var(--glow),
    transparent 75%
  );
  background-repeat: no-repeat;
}

/* ---- eyebrow rule ------------------------------------------ */
.eyebrow {
  padding-bottom: 7px;
  background-image: linear-gradient(90deg, var(--accent-cool), transparent);
  background-repeat: no-repeat;
  background-size: 44px 2px;
  background-position: 0 100%;
  /* In .intro-grid the eyebrow is a direct grid item, and the default
     align-items:stretch lets it fill the full row height — which pushed the
     44px accent rule to the bottom of that box, ~250px under the words it
     belongs to. Hugging content puts it back under the text. align-self is
     inert everywhere the eyebrow is not a flex/grid item, so the other 30-odd
     uses are unaffected. */
  align-self: start;
}

/* ---- glass depth ------------------------------------------- */
/* A flat rgba fill reads as "see-through grey". The diagonal sheen gives the
   panel a lit top edge and a weighted bottom one, and the inset accent hairline
   is where the cool colour lands on the glass. */
.glass-panel {
  border-radius: var(--r-md);
  background-color: var(--glass-bg);
  background-image: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.012) 52%,
    rgba(255, 255, 255, 0.042) 100%
  );
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(190%);
  backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(190%);
  box-shadow: inset 0 1px 0 var(--sheen-top),
    inset 0 -1px 0 var(--sheen-bottom), inset 0 0 0 1px var(--glass-edge),
    var(--sh-3);
  transition: opacity var(--dur-slow) var(--ease-premium),
    box-shadow var(--dur-base) var(--ease-premium),
    transform var(--dur-base) var(--ease-premium),
    border-color var(--dur-base) var(--ease-premium);
}
.booking-card {
  box-shadow: inset 0 1px 0 var(--sheen-top),
    inset 0 -1px 0 var(--sheen-bottom), inset 0 0 0 1px var(--glass-edge),
    var(--sh-4);
}

/* ---- buttons ----------------------------------------------- */
.button {
  border-radius: 12px;
  box-shadow: var(--sh-2);
  transition: opacity var(--dur-slow) var(--ease-premium),
    background-color var(--dur-base) var(--ease-premium),
    color var(--dur-base) var(--ease-premium),
    border-color var(--dur-base) var(--ease-premium),
    box-shadow var(--dur-base) var(--ease-premium),
    transform var(--dur-base) var(--ease-spring);
}
/* The sheen only reads on a filled button; on .button-ghost it would draw a
   white line across a transparent panel. */
.button-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--sh-2);
}
.nav-cta {
  border-radius: 10px;
  transition: background-color var(--dur-base) var(--ease-premium),
    color var(--dur-base) var(--ease-premium),
    border-color var(--dur-base) var(--ease-premium),
    box-shadow var(--dur-base) var(--ease-premium);
}

/* ---- elevation --------------------------------------------- */
.feature,
.tour-card,
.tour-spec,
.faq-list details,
.journey-card {
  transition: opacity var(--dur-slow) var(--ease-premium),
    transform var(--dur-base) var(--ease-premium),
    box-shadow var(--dur-base) var(--ease-premium),
    border-color var(--dur-base) var(--ease-premium),
    background-color var(--dur-base) var(--ease-premium);
}
/* Touch devices get no hover state: a lifted card would stick under the
   finger until the next tap elsewhere. */
@media (hover: hover) and (pointer: fine) {
  .feature:hover,
  .tour-card:hover,
  .journey-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-3);
    border-color: var(--accent-cool-soft);
  }
  .tour-spec:hover,
  .faq-list details:hover {
    box-shadow: var(--sh-2);
    border-color: var(--accent-cool-soft);
  }
}

/* ---- radii and surface detail ----------------------------- */
.feature,
.tour-card,
.split-media,
.post-card .post-media,
.journal-card img {
  border-radius: var(--r-md);
}
.tour-spec,
.faq-list details {
  border-radius: var(--r-sm);
}
.feature-icon {
  border-color: var(--accent-cool-soft);
}
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  border-radius: var(--r-sm);
  transition: border-color var(--dur-base) var(--ease-premium),
    background-color var(--dur-base) var(--ease-premium),
    box-shadow var(--dur-base) var(--ease-premium);
}
.theme-toggle {
  transition: border-color var(--dur-base) var(--ease-premium),
    color var(--dur-base) var(--ease-premium),
    background-color var(--dur-base) var(--ease-premium),
    box-shadow var(--dur-base) var(--ease-premium);
}
.theme-toggle:hover {
  border-color: var(--accent-cool);
}
/* Tighter, more opaque glass and a hairline that catches the light: the docked
   header is the most-used surface on the site. */
.topbar.is-scrolled {
  background: rgba(16, 19, 18, 0.94);
  -webkit-backdrop-filter: blur(22px) saturate(185%);
  backdrop-filter: blur(22px) saturate(185%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07),
    0 22px 48px -32px rgba(0, 0, 0, 0.9);
}

/* ============================================================
   Light theme — white surfaces
   ============================================================
   The photographic sections, the quote, the footer, the docked header
   and the form controls all stayed dark in both themes, so scrolling a
   page in light mode looked almost the same as dark mode. Each rule
   below re-states the light value behind a [data-theme="light"]
   prefix, which outranks the un-prefixed rule it replaces no matter
   where that rule sits in the file.
   ============================================================ */

/* ---- flat sections ------------------------------------------- */
[data-theme="light"] .quote-section {
  /* background-color, not the shorthand — `background:` outranks the
     background-image on .journeys/.quote-section above and would drop the
     aurora glow. Harmless today only because light zeroes --glow. */
  background-color: #f0eee8;
  color: var(--paper);
  --muted: #6b665b;
  --sand: #8a5e2c;
  --link: #a9412a;
}
[data-theme="light"] .site-footer-new {
  background: var(--ink2);
  color: var(--paper);
  --muted: #6b665b;
  --sand: #8a5e2c;
  --link: #a9412a;
}
[data-theme="light"] .footer-grid > div > a:not(.brand) {
  color: var(--paper);
}
[data-theme="light"] .footer-bottom {
  color: #6b665b;
}
/* The shared rule keeps its alpha so the selection tints whatever is behind
   it; on a white page that leaves #fff at 3.36:1, so the light theme takes
   the light tint with dark ink instead. */
[data-theme="light"] ::selection {
  background: rgba(201, 97, 61, 0.25);
  color: #1a1c1a;
}

/* ---- chrome and controls -------------------------------------- */
[data-theme="light"] .topbar {
  color: var(--paper);
  border-bottom-color: var(--line);
  --muted: #6b665b;
  --sand: #8a5e2c;
}
[data-theme="light"] .topbar.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 0 rgba(16, 19, 18, 0.08),
    0 22px 48px -32px rgba(16, 19, 18, 0.45);
}
[data-theme="light"] .nav-cta {
  border-color: rgba(16, 19, 18, 0.42);
}
[data-theme="light"] .button-ghost {
  border-color: rgba(16, 19, 18, 0.45);
}
[data-theme="light"] .theme-toggle {
  border-color: rgba(16, 19, 18, 0.34);
}
[data-theme="light"] .language-selector {
  border-color: rgba(16, 19, 18, 0.3);
}
[data-theme="light"] .language-selector a {
  color: var(--paper);
}
/* The active chip keeps the always-sand accent as its ground — it is a
   fill, not text — so the ink on it stays the fixed dark it has always
   been, and #101312 on #d9ad77 is 9.2:1. */
[data-theme="light"] .language-selector a:hover,
[data-theme="light"] .language-selector a[aria-current="true"] {
  background: #d9ad77;
  color: #101312;
}

/* ---- photography: light shade, dark ink ------------------------ */
[data-theme="light"] .hero-new,
[data-theme="light"] .page-hero,
[data-theme="light"] .final-cta,
[data-theme="light"] .contact-section,
[data-theme="light"] .journey-card {
  background-color: #ffffff;
  color: var(--paper);
  --sand: #8a5e2c;
  --muted: #6b665b;
  --link: #a9412a;
}
[data-theme="light"] .contact-section {
  --glass-bg: rgba(255, 255, 255, 0.74);
  --glass-border: rgba(16, 19, 18, 0.16);
}
[data-theme="light"] .hero-shade {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.94),
      rgba(255, 255, 255, 0.72) 65%
    ),
    linear-gradient(0deg, rgba(255, 255, 255, 0.82), transparent 45%);
}
[data-theme="light"] .page-hero-shade {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.95),
      rgba(255, 255, 255, 0.76) 70%
    ),
    linear-gradient(0deg, rgba(255, 255, 255, 0.86), transparent 60%);
}
/* The light theme washes both hero shades white; easing it to 0.8 lets more
   of the photograph through while the gradients keep the headline, the
   caption and the topbar readable over the brighter hero photos. It also
   means this rule re-states the whole shorthand, so the dark header scrim on
   the base rule above is not inherited here — dark ink does not need it. */
[data-theme="light"] .hero-shade,
[data-theme="light"] .page-hero-shade {
  opacity: 0.8;
}
[data-theme="light"] .final-overlay {
  background: rgba(255, 255, 255, 0.88);
  opacity: 0.8;
}
[data-theme="light"] .contact-shade {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.96),
    rgba(255, 255, 255, 0.9)
  );
}
[data-theme="light"] .journey-overlay {
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.96),
    rgba(255, 255, 255, 0.9) 32%,
    transparent 72%
  );
}
[data-theme="light"] .hero-copy,
[data-theme="light"] .page-hero .lead {
  color: #6b665b;
}

/* ---- contact page --------------------------------------------- */
[data-theme="light"] .contact-card span {
  color: #6b665b;
}
[data-theme="light"] .contact-card a {
  color: var(--paper);
}
[data-theme="light"] .form-card .intro-note {
  color: #6b665b;
}
[data-theme="light"] .form-status {
  color: #54514a;
}
[data-theme="light"] .form-note {
  color: #6b665b;
}
[data-theme="light"] .next-step {
  border-top-color: rgba(16, 19, 18, 0.18);
}
/* The collapsing menu is only a background below 800px; declaring it
   unscoped would paint a white plate behind the desktop nav row. */
@media (max-width: 800px) {
  [data-theme="light"] .main-nav {
    background: #ffffff;
    box-shadow: 0 24px 48px -28px rgba(16, 19, 18, 0.5);
  }
}
[data-theme="light"] .check {
  color: #54514a;
}
[data-theme="light"] .next-step .form-note a {
  color: #a9412a;
}
[data-theme="light"] .field input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] .field select,
[data-theme="light"] .field textarea {
  /* background-color, not the shorthand. `background:` outranks the
     no-repeat / position set on .field select above, so it would reset both
     and the arrow chevron would tile across the whole control. */
  background-color: rgba(255, 255, 255, 0.88);
  border-color: rgba(16, 19, 18, 0.3);
  color: var(--paper);
  color-scheme: light;
}
[data-theme="light"] .field input::placeholder,
[data-theme="light"] .field textarea::placeholder {
  color: rgba(22, 25, 23, 0.62);
}
/* Only swaps the arrow stroke to the darker brown — the fill comes from the
   background-color above. */
[data-theme="light"] .field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a5e2c' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
}
[data-theme="light"] .field select option {
  background: #ffffff;
  color: var(--paper);
}

/* ============================================================
   Motion engine (js/anime.js)
   ------------------------------------------------------------
   js/site.js adds html.js-motion only when the Anime.js bundle
   loaded and the visitor is not under prefers-reduced-motion,
   so everything below is inert otherwise: the CSS-only reveal,
   the slow-zoom keyframes and the reduced-motion overrides at
   the end of the file all keep working exactly as before.
   ============================================================ */

/* Anime.js drives .reveal itself. The resting translateY would stack on top
   of its own tween and the CSS transition would fight every inline update,
   so under the engine both are handed over. */
html.js-motion .reveal {
  transform: none;
  transition: none;
}

/* Masked line reveal: every <br> in a heading becomes a clip box (site.js)
   so an entrance can slide the line up from underneath it. The padding and
   matching negative margin keep descenders (j, y, g) from being cut off
   against the heading's line-height: 0.96. */
.line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.line-inner {
  display: block;
}
/* Count-up digits change while the stat is on screen; tabular figures stop
   the number from reflowing its own line as it grows. */
.count {
  font-variant-numeric: tabular-nums;
}
/* .trust-row span is an inline-flex with a 10px gap and it matches *every*
   descendant span, so without this the count-up's own wrappers become flex
   items and the stat reads "10 + years sharing Morocco". Inline boxes sit in
   normal flow again, inside one flex item. */
.trust-row .stat,
.trust-row .count {
  display: inline;
}

/* Index hero photo: the load-time zoom and the scroll parallax share one
   element, and the slow-zoom keyframes would outrank anything written inline
   (a CSS animation beats an inline transform). Both movements therefore ride
   on custom properties that a single transform declaration composes — the
   keyframes are switched off here and replayed through --ps in site.js, while
   onScroll scrubs --py. */
html.js-motion .hero-image {
  animation: none;
  transform: translateY(var(--py, 0%)) scale(var(--ps, 1.08));
}

/* Subpage hero photo: the zoom runs on its container, so the image itself can
   take a plain parallax transform. It is oversized first — a 6% drift on a
   box that only just covers the frame would uncover the top edge. */
html.js-motion .page-hero-bg img {
  position: absolute;
  top: -7%;
  width: 100%;
  height: 114%;
}

/* ============================================================
   Content refresh components (2026)
   ------------------------------------------------------------
   Price tiers on tour pages, the wider six-column feature grid,
   city tiles, team cards, guest reviews, the "more tours" band,
   the newsletter strip and the expanded footer. Everything here
   lives before the reduced-motion block on purpose — the lengths
   of the rule contexts at the end of the file are asserted by
   scripts/checks.mjs, and none of the selectors below clash with
   the five protected animation targets.
   ============================================================ */

/* ---- wider feature grid: six reasons / five values --------- */
.feature-grid--three {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1000px) {
  .feature-grid--three {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .feature-grid--three {
    grid-template-columns: 1fr;
  }
}

/* ---- cities -------------------------------------------------- */
.city-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.city-card {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border-radius: var(--r-md);
  background-color: #080a09;
  transition: opacity var(--dur-slow) var(--ease-premium),
    transform var(--dur-base) var(--ease-premium),
    box-shadow var(--dur-base) var(--ease-premium),
    border-color var(--dur-base) var(--ease-premium);
}
.city-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-premium);
}
.city-card:hover img {
  transform: scale(1.06);
}
.city-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 10, 9, 0.82), transparent 67%);
}
.city-card-body {
  position: absolute;
  right: 26px;
  bottom: 22px;
  left: 26px;
  color: #f1ebe0;
  --sand: #d9ad77;
}
.city-card-body p {
  margin: 0 0 7px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.city-card-body h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.city-card-body span {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.city-card > a {
  position: absolute;
  inset: 0;
  z-index: 1;
}
[data-theme="light"] .city-card {
  background-color: #ffffff;
}
[data-theme="light"] .city-overlay {
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.96),
    rgba(255, 255, 255, 0.9) 32%,
    transparent 72%
  );
}
[data-theme="light"] .city-card-body {
  color: var(--paper);
  --sand: #8a5e2c;
}

/* ---- guest reviews ------------------------------------------- */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.review-card {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  background: var(--ink-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: opacity var(--dur-slow) var(--ease-premium),
    transform var(--dur-base) var(--ease-premium),
    box-shadow var(--dur-base) var(--ease-premium),
    border-color var(--dur-base) var(--ease-premium),
    background-color var(--dur-base) var(--ease-premium);
}
.review-stars {
  margin: 0 0 12px;
  color: var(--sand);
  font-size: 1rem;
  letter-spacing: 0.14em;
}
.review-quote {
  margin: 0;
  color: var(--paper);
  font-size: 0.95rem;
  line-height: 1.65;
}
.review-author {
  margin: auto 0 0;
  padding-top: 20px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- hover lift for the new card surfaces -------------------- */
@media (hover: hover) and (pointer: fine) {
  .city-card:hover,
  .review-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-3);
    border-color: var(--accent-cool-soft);
  }
}

/* ---- "more tours" band ----------------------------------------- */
.more-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.more-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--ink-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: opacity var(--dur-slow) var(--ease-premium),
    transform var(--dur-base) var(--ease-premium),
    box-shadow var(--dur-base) var(--ease-premium),
    border-color var(--dur-base) var(--ease-premium),
    background-color var(--dur-base) var(--ease-premium);
}
.more-duration {
  margin: 0;
  color: var(--sand);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.more-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.more-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}
.more-card .button {
  margin-top: auto;
  justify-content: space-between;
  text-align: left;
}

/* ---- newsletter strip (footer) --------------------------------- */
.newsletter {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 26px 48px;
  align-items: center;
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
}
.newsletter-title {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.newsletter-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}
.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.newsletter-field {
  flex: 1 1 220px;
}
.newsletter-form input[type="email"] {
  width: 100%;
  padding: 13px 14px;
  background-color: rgba(16, 19, 18, 0.5);
  border: 1px solid rgba(241, 235, 224, 0.22);
  border-radius: var(--r-sm);
  color: #f1ebe0;
  font-family: var(--sans);
  font-size: 0.95rem;
  color-scheme: dark;
  transition: border-color var(--dur-base) var(--ease-premium),
    background-color var(--dur-base) var(--ease-premium),
    box-shadow var(--dur-base) var(--ease-premium);
}
.newsletter-form input::placeholder {
  color: rgba(241, 235, 224, 0.6);
}
.newsletter-form input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--sand);
}
.newsletter-status {
  flex-basis: 100%;
  margin: 0;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-theme="light"] .newsletter-form input[type="email"] {
  background-color: rgba(255, 255, 255, 0.88);
  border-color: rgba(16, 19, 18, 0.3);
  color: var(--paper);
  color-scheme: light;
}
[data-theme="light"] .newsletter-form input::placeholder {
  color: rgba(22, 25, 23, 0.55);
}

/* ---- expanded footer ------------------------------------------- */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(5, max-content);
  justify-content: space-between;
  column-gap: clamp(16px, 2vw, 28px);
  row-gap: 36px;
  align-items: start;
  padding-top: 48px;
}
.footer-grid > div:first-child {
  max-width: 17rem;
}
.footer-grid > div:last-child {
  min-width: 0;
  max-width: 20rem;
}
.footer-grid > div:not(:first-child) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.footer-grid > div:not(:first-child):not(:last-child) > a {
  white-space: nowrap;
}
.footer-contact-line {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  color: #dedbd4;
  font-size: 0.87rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
[data-theme="light"] .footer-contact-line {
  color: var(--paper);
}
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.footer-social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--paper);
  transition: border-color var(--dur-base) var(--ease-premium),
    color var(--dur-base) var(--ease-premium),
    box-shadow var(--dur-base) var(--ease-premium);
}
.footer-social a:hover {
  color: var(--sand);
  border-color: var(--sand);
  box-shadow: var(--sh-2);
}
.footer-social svg {
  display: block;
  width: 16px;
  height: 16px;
}
.footer-bottom {
  flex-wrap: wrap;
  row-gap: 12px;
}
.footer-brand small {
  line-height: 1.4;
}
.footer-legal {
  display: inline-flex;
  gap: 8px 18px;
  color: inherit;
}
.footer-legal a {
  color: inherit;
}
.footer-legal a:hover {
  color: var(--sand);
}
@media (max-width: 1100px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
    column-gap: 32px;
    row-gap: 32px;
  }
  .footer-grid > div:first-child {
    grid-column: 1/-1;
  }
  .footer-label {
    white-space: normal;
  }
  .footer-grid > div:not(:first-child):not(:last-child) > a {
    white-space: normal;
  }
  .footer-grid > div:first-child,
  .footer-grid > div:last-child {
    max-width: none;
  }
}
@media (max-width: 575px) {
  .footer-grid {
    grid-template-columns: 1fr;
    row-gap: 28px;
    padding-top: 36px;
  }
  .newsletter {
    grid-template-columns: 1fr;
  }
}

/* ---- responsive: cities, reviews, more tours -------------------- */
@media (max-width: 1000px) {
  .city-grid,
  .review-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 800px) {
  .city-grid,
  .review-grid,
  .more-grid {
    grid-template-columns: 1fr;
  }
  .city-card {
    min-height: 260px;
  }
  .newsletter {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 32px 0;
  }
}

/* ============================================================
   Reduced motion — must stay the last block in the file.

   Five of its targets (.page-hero-bg, .contact-bg img,
   .tour-card-media img, .post-card .post-media img, .theme-toggle)
   are first defined *above* it, and the universal rule below is what
   keeps them honest: a bare base rule added after this block re-wins at
   equal specificity and silently switches the animation back on for
   prefers-reduced-motion visitors. This ordering is asserted by
   scripts/checks.mjs.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-image,
  .final-image,
  .page-hero-bg,
  .contact-bg img {
    animation: none !important;
  }
  .hero-new,
  .final-cta,
  .button,
  .journey-card,
  .tour-card,
  .theme-toggle {
    transition: none !important;
  }
}

/* ============================================================
   Print — .reveal starts at opacity:0, so a page printed before
   the observer fires (or with JS off and no <noscript> override)
   came out blank. Force the content visible and drop the chrome.
   ============================================================ */
@media print {
  :root {
    color-scheme: light;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .topbar,
  .menu-toggle,
  .main-nav,
  .hero-image,
  .final-image,
  .page-hero-bg,
  .contact-bg,
  .footer-bottom,
  .language-selector {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .intro,
  .journal,
  .hero-new,
  .final-cta,
  .page-hero,
  .quote-section,
  .site-footer-new,
  .contact-section {
    background: #fff !important;
    color: #000 !important;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    word-break: break-all;
  }
}