/* ============================================================
   LEPO MESTO — LISINE  ·  Shared stylesheet
   Design system: deep forest green + warm cream, classic serif
   display type, soft 24px rounded cards, pill buttons & chips.
   ============================================================ */

/* ---------- Self-hosted fonts (SIL Open Font License) ----------
   Served from assets/fonts/ instead of Google's CDN, so no visitor IP
   leaves for a third party just to render text. latin-ext carries the
   Serbian diacritics (č, ć, š, ž, đ). */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/jost-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/jost-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jost-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jost-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jost-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jost-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/jost-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/jost-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Design tokens ---------- */
:root {
  --green:       #1E4634;   /* primary forest green */
  --green-deep:  #173828;   /* darker green for footers / hovers */
  --green-soft:  #2A5844;   /* lighter green surface */
  --cream:       #F7EFDF;   /* page background */
  --cream-card:  #EFE4CC;   /* card / chip background */
  --cream-line:  #E2D5B8;   /* hairline borders on cream */
  --ink:         #23261F;   /* body text on cream */
  --ink-soft:    #4C5248;   /* secondary text on cream */
  --on-green:    #F4EDDC;   /* text on green */
  --on-green-soft: #CBD9C4; /* secondary text on green */
  --error:       #A6342A;

  --font-display: "Cormorant Garamond", "Georgia", serif;
  --font-body:    "Jost", "Segoe UI", sans-serif;

  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-pill: 999px;
  --maxw: 1200px;
  --shadow: 0 18px 45px rgba(23, 40, 30, 0.18);
  --header-h: 84px;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--green);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

.container {
  width: min(var(--maxw), calc(100% - 48px));
  margin-inline: auto;
}

:focus-visible { outline: 3px solid var(--on-green); outline-offset: 3px; }

/* Text that only screen readers and search engines read — used to give
   short "read more" links a meaningful target name. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.on-cream :focus-visible, .cream-card :focus-visible { outline-color: var(--green); }

@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;
  }
}

/* ---------- Type ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  color: var(--green);
}

h1 { font-size: clamp(42px, 6vw, 72px); }
h2 { font-size: clamp(32px, 4.2vw, 52px); }
h3 { font-size: clamp(22px, 2.4vw, 28px); }

.on-green h1, .on-green h2, .on-green h3 { color: var(--on-green); }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.on-green .eyebrow { color: var(--on-green-soft); }

.lead { font-size: 17px; color: var(--ink-soft); max-width: 60ch; }
.on-green .lead { color: var(--on-green-soft); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -4rem;
  z-index: 1200;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-pill);
  background: var(--on-green);
  color: var(--green);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
  transition: top 0.2s var(--ease-spring);
}
.skip-link:focus { top: 16px; }

/* ---------- Loading screen (D8) ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  transition: opacity 0.4s ease;
}
.loader img {
  width: 84px;
  height: 84px;
  animation: loader-spin 1.8s linear infinite;
}
.loader .loader-word {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--green);
}
@keyframes loader-spin {
  to { transform: rotate(360deg); }
}
.loader.is-hidden { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .loader img { animation: none; }
}
/* If JS never runs (disabled), don't trap the visitor behind the overlay */
.no-js .loader { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: transform 0.22s var(--ease-spring), background-color 0.22s, border-color 0.22s, box-shadow 0.22s;
}

.btn:hover { transform: translateY(-2px) scale(1.045); }
.btn:active { transform: translateY(0) scale(0.98); }

.btn-cream { background: var(--cream); color: var(--green); }
.btn-cream:hover { background: #fff; box-shadow: var(--shadow); }

.btn-outline {
  background: transparent;
  color: var(--on-green);
  border-color: rgba(244, 237, 220, 0.45);
}
.btn-outline:hover { border-color: var(--on-green); background: rgba(244, 237, 220, 0.08); }

.btn-green { background: var(--green); color: var(--on-green); }
.btn-green:hover { background: var(--green-deep); box-shadow: var(--shadow); }

/* Call-to-action button inside a listing (Stay rooms, Adventures package) */
.book-btn { margin-top: 22px; }

/* Booking.com-branded button: their blue + logotype-style lowercase wordmark */
.btn-booking {
  background: #003580;
  color: #ffffff;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  border-radius: 10px;
  padding: 14px 26px;
}
.btn-booking:hover { background: #0071c2; box-shadow: var(--shadow); color: #ffffff; }

/* ---------- Header / navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--green);
  color: var(--on-green);
  padding: 18px 0 14px;
  transition: box-shadow 0.25s, padding 0.25s;
}

.site-header.is-scrolled {
  padding: 12px 0;
  box-shadow: 0 10px 30px rgba(9, 20, 14, 0.35);
}

/* While the mobile menu is open, the header must read as one unbroken
   block with the panel below it — no shadow line at the seam. */
.site-header.is-menu-open {
  box-shadow: none;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.06em;
  color: var(--on-green);
  flex: none;
}

.logo span { opacity: 0.65; font-size: 15px; letter-spacing: 0.2em; }

.nav-toggle {
  display: none;
  position: relative;
  z-index: 1002;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: transform 0.22s var(--ease-spring), background-color 0.22s;
}
.nav-toggle:hover { transform: scale(1.08); background: rgba(244, 237, 220, 0.12); }
.nav-toggle span {
  width: 20px;
  height: 2px;
  background: var(--on-green);
  border-radius: 2px;
  transition: transform 0.22s, opacity 0.22s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.site-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.site-nav a {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-green-soft);
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  transition: color 0.22s, background-color 0.22s, transform 0.22s var(--ease-spring);
}

.site-nav a:hover { color: var(--on-green); background: rgba(244, 237, 220, 0.1); transform: scale(1.05); }

.site-nav a.active {
  color: var(--green);
  background: var(--cream);
}

.lang-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: rgba(244, 237, 220, 0.08);
  flex: none;
}

.lang-switch a {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--on-green-soft);
  transition: color 0.22s, background-color 0.22s, transform 0.22s var(--ease-spring);
}

.lang-switch a:hover { color: var(--on-green); transform: scale(1.08); }
.lang-switch a.active { background: var(--cream); color: var(--green); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  .nav-wrap {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    padding: 22px 28px;
    /* Same solid color as .site-header — any mismatch here is what reads
       as a seam/line at the header-to-panel join. */
    background: var(--green);
    transform: translateX(100%);
    transition: transform 0.32s var(--ease-spring);
    overflow-y: auto;
  }

  .nav-wrap.is-open { transform: translateX(0); }

  .site-nav { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav a { padding: 14px 10px; font-size: 14px; border-radius: 12px; }
  .site-nav a:hover { transform: none; }

  .lang-switch { align-self: flex-start; margin-top: 10px; }

  .nav-wrap .btn { margin-top: 14px; align-self: flex-start; }
}

/* ---------- Buttons ---------- */
/* (see above) */

/* ---------- Hero (home) ---------- */
.hero-wrap { background: var(--green); padding: 10px 0 26px; }

.hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 40px 46px;
  color: var(--on-green);
  background:
    linear-gradient(100deg, rgba(13, 36, 25, 0.82) 0%, rgba(13, 36, 25, 0.45) 55%, rgba(13, 36, 25, 0.15) 100%),
    var(--hero-img) center/cover no-repeat;
  box-shadow: var(--shadow);
}

.hero-topline {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 237, 220, 0.85);
}

.hero h1 { color: var(--on-green); max-width: 15ch; margin-top: auto; }

.hero p {
  max-width: 58ch;
  font-size: 17px;
  color: rgba(244, 237, 220, 0.92);
  margin: 0 0 30px;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Cream info band directly under hero */
.band {
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 20px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.band p { margin: 0; max-width: 62ch; font-size: 14.5px; color: var(--ink); }

.band .band-places {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  text-align: right;
}

/* ---------- Sections ---------- */
main.on-cream { background: var(--cream); }

.section { padding: 96px 0; }
.section.tight { padding: 72px 0; }

.section-green {
  background: var(--green);
  color: var(--on-green);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: center;
}

.split-header {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 48px;
}

.split-header .lead { margin: 0 0 8px; }

.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* ---------- Imagery ---------- */
.photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.photo img { width: 100%; height: 100%; object-fit: cover; }

.photo-tall img { aspect-ratio: 4 / 5; }
.photo-wide img { aspect-ratio: 21 / 9; }

.photo-note { position: relative; }

.note-card {
  position: absolute;
  right: 36px;
  bottom: 36px;
  max-width: 340px;
  background: rgba(244, 237, 220, 0.95);
  border-radius: var(--radius-md);
  padding: 24px 26px;
  box-shadow: var(--shadow);
}

.note-card h3 { margin-bottom: 10px; }
.note-card p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }

/* ---------- Feature chips ---------- */
.chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 30px;
}

.chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cream-card);
  border: 1px solid var(--cream-line);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14px;
  color: var(--ink);
}

.chip svg { flex: none; width: 18px; height: 18px; stroke: var(--green); }

/* Uppercase display type needs a little tracking and a smaller size than the
   sentence-case h2 to hold the same weight on the page. */
.heading-caps {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(26px, 3.4vw, 42px);
}

.video-cue {
  margin: 0 0 16px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Card grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.img-card {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.3s var(--ease-spring);
}
.img-card:hover { transform: translateY(-4px); }

.img-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 0.5s; }
.img-card:hover img { transform: scale(1.04); }

.img-card figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 40px 18px 16px;
  background: linear-gradient(to top, rgba(13, 36, 25, 0.85), transparent);
  color: var(--on-green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Tour step cards: the caption sits under the photo instead of over it, so a
   step can carry a name and a line of detail without crowding the image. */
.img-card--below { overflow: visible; box-shadow: none; }
.img-card--below img { border-radius: var(--radius-md); box-shadow: var(--shadow); }

.img-card--below figcaption {
  position: static;
  display: grid;
  gap: 4px;
  padding: 16px 2px 0;
  background: none;
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.tour-step-name {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}

.tour-step-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.card {
  border-radius: var(--radius-md);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
}
a.card:hover, .card.is-hoverable:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.card-cream { background: var(--cream-card); border: 1px solid var(--cream-line); }
.card-green { background: var(--green); color: var(--on-green); }
.card p { margin: 0; font-size: 15px; color: var(--ink-soft); }
/* Higher specificity than ".card p" on purpose: on-green text must win over
   the generic cream-card text color regardless of rule order in this file. */
.card.card-green h3 { color: var(--on-green); }
.card.card-green p { color: var(--on-green-soft); }

.card-img {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  padding: 26px;
  color: var(--on-green);
  background-size: cover;
  background-position: center;
  transition: transform 0.3s var(--ease-spring);
}
.card-img:hover { transform: translateY(-4px); }

.card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 36, 25, 0.75), rgba(13, 36, 25, 0.05) 60%);
}

.card-img h3 { position: relative; z-index: 1; color: var(--on-green); margin: 0; }

/* Empty photo slot for cards awaiting a real photo — same box, same radius
   and hover behavior as a filled .card-img, just no background-image yet. */
.card-img--placeholder { background: var(--green-deep); }
.card-img--placeholder::after {
  background: linear-gradient(to top, rgba(13, 36, 25, 0.75), rgba(13, 36, 25, 0.1) 65%, transparent);
}
.img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 20px;
}
.img-placeholder-icon { width: 38px; height: 38px; stroke: var(--on-green-soft); opacity: 0.85; }
.img-placeholder-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-green-soft);
}

/* ---------- Guest review (home + stay) ---------- */
/* No fixed ratio: the award graphic must never be cropped, and any photo
   swapped in later keeps its own proportions. */
.review-photo { position: relative; }
.review-photo picture { display: block; }
.review-photo img { display: block; width: 100%; height: auto; }

/* Only the empty state needs a reserved box. */
.review-photo--empty {
  aspect-ratio: 4 / 3;
  background: var(--green-deep);
}

/* Stay page puts the photo on the right; on narrow screens it leads again,
   matching .listing.reverse. */
.review--reversed .review-photo { order: 2; }

.review-quote {
  margin: 22px 0 0;
  padding: 0;
  border-left: 3px solid var(--green);
  padding-left: 22px;
}
.review-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.3vw, 25px);
  line-height: 1.45;
  color: var(--ink);
}
.review-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 14px;
  color: var(--ink-soft);
}
.review-author { font-weight: 500; color: var(--ink); }
.review-score {
  background: #003580;
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  padding: 3px 9px;
  border-radius: 6px 6px 6px 0;
}

/* Empty state: a calm dashed slot until content/site.json is filled in */
.review-quote--empty {
  border-left: none;
  border: 1px dashed var(--cream-line);
  border-radius: var(--radius-md);
  padding: 26px 24px;
}
.review-quote--empty p { color: var(--ink-soft); }
.review-empty-label {
  display: inline-block;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.8;
}

.review-btn { margin-top: 26px; }

/* ---------- Photo credit (licensed third-party images) ---------- */
.photo-credited { overflow: visible; }
.photo-credit {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 10px 2px 0;
}
.photo-credit a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.photo-credit a:hover { color: var(--green); }
.article-credit { margin-top: 34px; }

/* ---------- Jeep tour strip (Stay) ---------- */
.tour-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 26px;
}

.tour-contact {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
  padding: 34px 38px;
}
.tour-contact h3 { margin-bottom: 6px; }
.tour-contact p { max-width: 44ch; }
.tour-contact-links { display: grid; gap: 6px; }
.tour-contact-links a {
  color: var(--on-green);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tour-contact-links a:hover { text-decoration: underline; }

/* ---------- Subpage hero ---------- */
.page-hero { background: var(--green); padding: 10px 0 26px; }

.page-hero-inner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 90px 48px;
  color: var(--on-green);
  background:
    linear-gradient(100deg, rgba(13, 36, 25, 0.82), rgba(13, 36, 25, 0.35)),
    var(--hero-img) center/cover no-repeat;
  box-shadow: var(--shadow);
}

.page-hero-inner h1 { color: var(--on-green); max-width: 18ch; }
.page-hero-inner--wide h1 { max-width: 26ch; font-size: clamp(32px, 4.4vw, 54px); }
.page-hero-inner p { max-width: 58ch; font-size: 17px; color: rgba(244, 237, 220, 0.92); margin: 0; }
.page-hero-inner .eyebrow { color: rgba(244, 237, 220, .75); }

/* ---------- Detail rows ---------- */
.listing {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
  padding: 44px 0;
  border-bottom: 1px solid var(--cream-line);
}

.listing:last-child { border-bottom: none; }
.listing.reverse .photo { order: 2; }

/* Room photo gallery — multiple images per room, arrow + dot navigation. */
.room-gallery { position: relative; aspect-ratio: 4 / 3; }
.room-gallery--tall { aspect-ratio: 4 / 5; }

.room-gallery picture {
  position: absolute;
  inset: 0;
  display: block;
}

.room-gallery-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.room-gallery-slide.is-active { opacity: 1; }

.room-gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(23, 40, 30, 0.55);
  color: var(--on-green);
  transition: background-color 0.22s, transform 0.22s var(--ease-spring);
}
.room-gallery-arrow:hover { background: rgba(23, 40, 30, 0.85); transform: translateY(-50%) scale(1.08); }
.room-gallery-arrow svg { width: 18px; height: 18px; }
.room-gallery-arrow--prev { left: 14px; }
.room-gallery-arrow--next { right: 14px; }

.room-gallery-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 7px;
}

.room-gallery-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(244, 237, 220, 0.5);
  transition: transform 0.22s var(--ease-spring), background-color 0.22s;
}
.room-gallery-dot:hover { background: rgba(244, 237, 220, 0.8); }
.room-gallery-dot.is-active { background: var(--on-green); transform: scale(1.35); }

.meta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.tag {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--cream-card);
  border: 1px solid var(--cream-line);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
}

/* ---------- Package carousel (Adventures) ----------
   Native scroll snapping does the sliding, so touch swipe and keyboard
   scrolling work before a single line of JS runs; the arrows and dots only
   drive scrollLeft. The negative inline margin gives each photo's shadow
   room inside the scroll container while the slide content stays aligned
   with the rest of the page grid. */
.package-carousel { margin-inline: -14px; }

.package-viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.package-viewport::-webkit-scrollbar { display: none; }

.package-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 12px 14px 40px;
}

.package-price {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--green);
  margin: 0 0 16px;
}

.package-includes-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 24px 0 12px;
}

.package-includes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.package-includes li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Tick drawn from two borders, so the list needs no icon font or inline SVG. */
.package-includes li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 6px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

/* The package name heads its own slide: uppercase and heavy, but set in
   the body face so it reads as a label rather than competing with the
   display-type offer title under it. */
.package-name {
  font-family: var(--font-body);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 14px;
}

.package-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.package-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  background: var(--cream-card);
  border: 1px solid var(--cream-line);
  transition: background-color 0.22s, color 0.22s, transform 0.22s var(--ease-spring), opacity 0.22s;
}

.package-arrow svg { width: 18px; height: 18px; }
.package-arrow:hover:not(:disabled) { background: var(--green); color: var(--on-green); transform: scale(1.06); }
.package-arrow:disabled { opacity: 0.35; cursor: default; }

.package-dots { display: flex; align-items: center; gap: 2px; }

/* The tap target is the full 30x44 button; the visible dot is the ::after. */
.package-dot {
  width: 30px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.package-dot::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cream-line);
  transition: background-color 0.22s, transform 0.22s var(--ease-spring);
}

.package-dot:hover::after { background: var(--ink-soft); }
.package-dot.is-active::after { background: var(--green); transform: scale(1.4); }


/* ---------- Journal ---------- */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 40px;
}

.filter-pill {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--cream-line);
  background: var(--cream-card);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: transform 0.22s var(--ease-spring), background-color 0.22s, color 0.22s;
}
.filter-pill:hover { transform: scale(1.05); }
.filter-pill.active { background: var(--green); color: var(--on-green); border-color: var(--green); }

.post {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cream-card);
  border: 1px solid var(--cream-line);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
}
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.post img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.post-body { padding: 24px 24px 28px; }
.post-body .eyebrow { margin-bottom: 10px; }
.post-body h3 { margin-bottom: 8px; }
.post-body p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.post-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
}
.post-read-more svg { width: 14px; height: 14px; transition: transform 0.2s; }
.post:hover .post-read-more svg { transform: translateX(3px); }

.load-more-wrap { text-align: center; margin-top: 12px; }
.post[hidden] { display: none; }

/* Landmark blocks (Explore) */
.landmark {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
  padding: 56px 0;
  border-bottom: 1px solid var(--cream-line);
}
.landmark:last-child { border-bottom: none; }
.landmark.reverse .photo { order: 2; }
.landmark .practical {
  display: block;
  margin-top: 18px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}
.landmark .practical strong { text-transform: none; letter-spacing: normal; font-weight: 600; color: var(--ink-soft); }

/* Drive times (Explore) */
.drive-times-section { background: var(--cream-card); }
.drive-times {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--cream-line);
}
.drive-time {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px 20px 8px;
  border-left: 1px solid var(--cream-line);
}
.drive-time:first-child { border-left: none; padding-left: 0; }
.drive-time-minutes {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  color: var(--green);
}
.drive-time-minutes small {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.drive-time-place { font-weight: 600; color: var(--ink); }
.drive-time-mode { font-size: 14px; color: var(--ink-soft); }
.read-more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  padding: 12px 22px;
  border: 1px solid var(--green);
  border-radius: var(--radius-pill);
  transition: transform 0.22s var(--ease-spring), background-color 0.22s, color 0.22s;
}
.read-more-link:hover { background: var(--green); color: var(--on-green); transform: translateY(-2px) scale(1.03); }

/* ---------- Video section (D1) ---------- */
.video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--green-deep);
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Article page ---------- */
.article-body { max-width: 70ch; margin-inline: auto; }
.article-body p { margin: 0 0 22px; font-size: 17px; color: var(--ink); line-height: 1.85; }

/* Subheadings inside an article are waypoints in a column of prose, so they
   stay far smaller than the section headings elsewhere on the site. */
.article-body h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  margin: 42px 0 16px;
}

.article-body h2:first-of-type { margin-top: 28px; }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 56px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}
.back-link svg { width: 14px; height: 14px; }
.article-hero {
  max-width: 70ch;
  margin: 0 auto 40px;
}

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin-inline: auto; }

.faq-list details {
  background: var(--cream-card);
  border: 1px solid var(--cream-line);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  overflow: hidden;
}

.faq-list summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 20px 26px;
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--green);
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 22px;
  color: var(--green);
  transition: transform 0.25s;
}

.faq-list details[open] summary::after { transform: rotate(45deg); }

.faq-list details p {
  margin: 0;
  padding: 0 26px 22px;
  color: var(--ink-soft);
  font-size: 15px;
}

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }

.contact-info p { margin: 0 0 8px; color: var(--ink-soft); }
.contact-info strong { color: var(--green); font-weight: 600; }
.contact-block { margin-bottom: 26px; }
.contact-info a:hover { color: var(--green); text-decoration: underline; }

/* Map sits in the info column so it ends beside the form, never under it. */
.contact-map {
  margin-top: 30px;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--cream-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.contact-map iframe { display: block; width: 100%; height: 100%; border: 0; }

.form {
  background: var(--cream-card);
  border: 1px solid var(--cream-line);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: grid;
  gap: 18px;
}

.form label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: grid;
  gap: 8px;
}

.form input, .form textarea, .form select {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--cream-line);
  border-radius: 12px;
  padding: 13px 16px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form input:focus, .form textarea:focus, .form select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(30, 70, 52, 0.14);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.form-error {
  display: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--error);
  text-transform: none;
  letter-spacing: normal;
}
.field-group.has-error input,
.field-group.has-error textarea { border-color: var(--error); }
.field-group.has-error .form-error { display: block; }
.form-note { grid-column: 1 / -1; font-size: 13px; color: var(--ink-soft); }
.form-note.is-success { color: var(--green); font-weight: 700; }
.form-note.is-error { color: var(--error); font-weight: 700; }

/* Spam trap: must stay reachable in the DOM but invisible to people. */
.hp-field { position: absolute; left: -9999px; opacity: 0; }

.form-consent label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.5;
}
.form-consent input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  accent-color: var(--green);
}
.form-consent a { color: var(--green); text-decoration: underline; }

/* ---------- Legal / policy prose ----------
   Section headings here are reference points in a long text, not display
   type, so they stay far smaller than the site-wide h2. */
.legal-body h2 {
  font-size: clamp(20px, 2.2vw, 24px);
  margin: 44px 0 12px;
}
.legal-body h1 { margin-bottom: 16px; }
.legal-body .lead { margin-bottom: 8px; }

/* ---------- Simple confirmation / utility pages ---------- */
.confirmation-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--green);
  color: var(--on-green);
}
.confirmation-icon svg { width: 30px; height: 30px; }
.utility-card {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  padding: 56px 40px;
}
.utility-card h1 { margin-bottom: 14px; }
.utility-card .lead { margin: 0 auto 30px; }

/* ---------- Big CTA ---------- */
.cta { text-align: center; padding: 110px 0; }
.cta h2 { max-width: 22ch; margin-inline: auto; }
.cta .lead { margin: 0 auto 34px; }

/* ---------- Footer (D7) ---------- */
.site-footer {
  background: var(--green-deep);
  color: var(--on-green-soft);
  padding: 64px 0 26px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(244, 237, 220, 0.14);
}

.footer-brand-col .logo { margin-bottom: 14px; }
.footer-brand-col p { max-width: 34ch; font-size: 14px; color: var(--on-green-soft); line-height: 1.7; }

.footer-heading {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-green-soft);
  margin-bottom: 16px;
}

.footer-links { display: grid; gap: 10px; }
.footer-links a { font-size: 14px; color: var(--on-green-soft); transition: color 0.2s; }
.footer-links a:hover { color: var(--on-green); }

.footer-contact { display: grid; gap: 10px; font-size: 14px; }
.footer-contact a { color: var(--on-green-soft); transition: color 0.2s; }
.footer-contact a:hover { color: var(--on-green); }

.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(244, 237, 220, 0.1);
  transition: transform 0.22s var(--ease-spring), background-color 0.22s;
}
.footer-social a:hover { transform: scale(1.1); background: var(--cream); color: var(--green); }
.footer-social svg { width: 16px; height: 16px; }

.site-footer .bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 22px;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.foot-brand { color: var(--on-green); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .split, .split-header, .contact-grid, .listing, .landmark { grid-template-columns: 1fr; gap: 36px; }
  .grid-3, .tour-grid { grid-template-columns: 1fr 1fr; }
  .listing.reverse .photo, .landmark.reverse .photo { order: 0; }
  .review--reversed .review-photo { order: 0; }
  .hero { min-height: 70vh; padding: 24px 24px 34px; }
  .page-hero-inner { padding: 64px 28px; }
  .section { padding: 68px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .drive-times { grid-template-columns: repeat(3, 1fr); }
  .drive-time:nth-child(3n + 1) { border-left: none; padding-left: 0; }
}

@media (max-width: 620px) {
  .grid-3, .grid-2, .chips, .form-row, .tour-grid { grid-template-columns: 1fr; }
  .band { flex-direction: column; align-items: flex-start; }
  .band .band-places { text-align: left; }
  .note-card { position: static; margin: 14px; max-width: none; }
  .photo-note { display: flex; flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; }
  .site-footer .bottom-row { flex-direction: column; align-items: flex-start; }
  .drive-times { grid-template-columns: 1fr; }
  .drive-time {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 2px;
    align-items: baseline;
    padding: 18px 0;
    border-left: none;
    border-bottom: 1px solid var(--cream-line);
  }
  .drive-time-minutes { grid-row: span 2; font-size: 44px; }
}