/* ==========================================================================
   Nomad Vacation Rentals — design system
   Palette: pine / moss / clay / sand / paper / stone / ink
   Display: Fraunces (editorial serif)  ·  Body: Satoshi (Fontshare)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* brand */
  --ink: #14181a;
  --pine: #1f3d33;
  --moss: #35604f;
  --clay: #b4643c;
  --clay-deep: #9e4e2a;
  --clay-deeper: #8f4523;
  --clay-light: #d98a5b;
  --sand: #e7ded1;
  --paper: #faf8f4;
  --stone: #8a8578;

  /* semantic — light */
  --bg: var(--paper);
  --bg-alt: #f2ede4;
  --surface: #ffffff;
  --surface-sunk: #f4f0e8;
  --text: var(--ink);
  --text-muted: #5e5a50;
  --text-faint: #6b665b;
  --border: #ded6c8;
  --border-strong: #cbc1af;
  --accent: var(--clay-deep);
  --accent-hover: var(--clay-deeper);
  --accent-on: #ffffff;
  --accent-soft: #f6ece3;
  --brand: var(--pine);
  --brand-on: #ffffff;
  --shadow-sm: 0 1px 2px rgba(20, 24, 26, 0.05), 0 2px 8px rgba(20, 24, 26, 0.04);
  --shadow-md: 0 2px 6px rgba(20, 24, 26, 0.06), 0 12px 32px rgba(20, 24, 26, 0.08);
  --shadow-lg: 0 4px 12px rgba(20, 24, 26, 0.08), 0 24px 64px rgba(20, 24, 26, 0.12);
  --hero-scrim: linear-gradient(100deg, rgba(20, 24, 26, 0.82) 0%, rgba(20, 24, 26, 0.55) 42%, rgba(20, 24, 26, 0.12) 78%, rgba(20, 24, 26, 0) 100%);

  /* type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Satoshi", "Inter", system-ui, -apple-system, sans-serif;
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1.2rem + 4.2vw, 4.5rem);
  /* Header height. The mobile nav drawer, the hero's pull-up and the anchor
     scroll offset all derive from this, so the badge can be resized without
     the hero or the menu drifting out of alignment. */
  --header-h: 4.875rem;

  /* space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --section-y: clamp(3.5rem, 7vw, 7rem);
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 78rem;
  --maxw-wide: 96rem;
  --maxw-prose: 40rem;
  --radius-sm: 3px;
  --radius: 5px;
  --radius-lg: 10px;
  --ring: 2px solid var(--accent);
}

html[data-theme="dark"] {
  --bg: #14181a;
  --bg-alt: #1b2022;
  --surface: #1b2022;
  --surface-sunk: #101315;
  --text: #e7ded1;
  --text-muted: #a39c8c;
  --text-faint: #8f887a;
  --border: #2e3436;
  --border-strong: #3d4446;
  --accent: #d98a5b;
  --accent-hover: #e79f75;
  --accent-on: #14181a;
  --accent-soft: #26201c;
  --brand: #cfd8cf;
  --brand-on: #14181a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5), 0 24px 64px rgba(0, 0, 0, 0.55);
  --hero-scrim: linear-gradient(100deg, rgba(10, 12, 13, 0.9) 0%, rgba(10, 12, 13, 0.68) 42%, rgba(10, 12, 13, 0.25) 78%, rgba(10, 12, 13, 0.05) 100%);
  color-scheme: dark;
}

/* ---------- 2. Reset & base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}
/* Inline icons carry no width/height attributes, so give them a text-relative
   default. :where() keeps specificity at zero — any component rule wins. */
[hidden] {
  display: none !important;
}
:where(svg:not([width]):not([height])) {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}
img {
  height: auto;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.022em;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
  text-wrap: balance;
}
h1 {
  font-size: var(--text-2xl);
}
h2 {
  font-size: var(--text-xl);
}
h3 {
  font-size: var(--text-lg);
  letter-spacing: -0.014em;
  line-height: 1.18;
}
h4 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}
p {
  text-wrap: pretty;
}
:focus-visible {
  outline: var(--ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
::selection {
  background: var(--accent);
  color: var(--accent-on);
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- 3. Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-wide {
  max-width: var(--maxw-wide);
}
.wrap-prose {
  max-width: var(--maxw-prose);
}
.section {
  padding-block: var(--section-y);
}
.section-sunk {
  background: var(--bg-alt);
}
.section-ink {
  background: var(--pine);
  color: var(--sand);
}
.section-ink h2,
.section-ink h3 {
  color: #fff;
}
html[data-theme="dark"] .section-ink {
  background: var(--surface-sunk);
}
.grid {
  display: grid;
  gap: var(--space-8);
}
.g-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.g-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.g-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 60rem) {
  .g-3,
  .g-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 40rem) {
  .g-2,
  .g-3,
  .g-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}
.stack > * + * {
  margin-top: var(--space-4);
}
.flow > * + * {
  margin-top: var(--space-6);
}
.center {
  text-align: center;
}
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -4rem;
  z-index: 200;
  background: var(--accent);
  color: var(--accent-on);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: top 0.18s ease;
}
.skip-link:focus {
  top: var(--space-4);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 4. Type utilities ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  /* Block, not flex: eyebrows can carry two or three clauses and must wrap as
     ordinary text on narrow screens instead of one flex item per text node. */
  display: block;
  line-height: 1.6;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1.75rem;
  height: 1px;
  margin-right: var(--space-3);
  background: currentColor;
}
.eyebrow-c {
  text-align: center;
}
.lede {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--text-muted);
  letter-spacing: -0.01em;
  max-width: 44ch;
}
.muted {
  color: var(--text-muted);
}
.small {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.tiny {
  font-size: var(--text-xs);
  color: var(--text-faint);
}
.display-3 {
  font-size: var(--text-3xl);
}
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}
.section-head > div {
  max-width: 44rem;
}
.section-head h2 {
  margin-top: var(--space-4);
}
.section-head p {
  margin-top: var(--space-4);
  color: var(--text-muted);
  max-width: 52ch;
}
.rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin-block: var(--space-12);
}

/* prose (blog, guides, legal) */
.prose {
  font-size: var(--text-base);
  line-height: 1.72;
}
.prose > * + * {
  margin-top: var(--space-6);
}
.prose h2 {
  font-size: var(--text-lg);
  margin-top: var(--space-12);
  letter-spacing: -0.012em;
}
.prose h3 {
  margin-top: var(--space-8);
}
.prose ul,
.prose ol {
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-3);
}
.prose li::marker {
  color: var(--accent);
}
.prose blockquote {
  border-left: 2px solid var(--accent);
  padding-left: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.4;
}
.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:hover {
  color: var(--accent-hover);
}

/* ---------- 5. Buttons, pills, badges ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.8125rem 1.375rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  text-align: center;
  min-height: 2.75rem;
}
.btn:active {
  transform: translateY(1px);
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-on);
}
.btn-primary:hover {
  background: var(--accent-hover);
}
.btn-brand {
  background: var(--pine);
  color: #fff;
}
.btn-brand:hover {
  background: var(--moss);
}
html[data-theme="dark"] .btn-brand {
  background: var(--sand);
  color: var(--ink);
}
html[data-theme="dark"] .btn-brand:hover {
  background: #fff;
}
.btn-outline {
  border-color: var(--border-strong);
  color: var(--text);
  background: transparent;
}
.btn-outline:hover {
  border-color: var(--text);
  background: var(--surface);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  padding-inline: var(--space-3);
}
.btn-ghost:hover {
  color: var(--accent);
}
.btn-lg {
  font-size: var(--text-base);
  padding: 1rem 1.75rem;
  min-height: 3.25rem;
}
.btn-block {
  width: 100%;
}
.btn-on-dark {
  background: #fff;
  color: var(--ink);
}
.btn-on-dark:hover {
  background: var(--sand);
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  padding-bottom: 2px;
  transition: gap 0.18s ease, border-color 0.18s ease;
}
.link-arrow:hover {
  gap: 0.75rem;
  border-color: var(--accent);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.375rem 0.6875rem;
  border-radius: 100px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.pill-accent {
  background: var(--accent-soft);
  border-color: color-mix(in oklab, var(--accent) 30%, transparent);
  color: var(--accent);
}
.pill-solid {
  background: var(--pine);
  border-color: var(--pine);
  color: #fff;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--text-sm);
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.chip:hover {
  border-color: var(--text-muted);
  color: var(--text);
}
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}
.stars {
  color: var(--accent);
  letter-spacing: 0.08em;
  font-size: var(--text-sm);
}

/* ---------- 6. Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header[data-stuck="true"] {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.site-header.over-hero:not([data-stuck="true"]) {
  background: transparent;
  color: #fff;
}
.site-header.over-hero:not([data-stuck="true"]) .logo,
.site-header.over-hero:not([data-stuck="true"]) .nav-link,
.site-header.over-hero:not([data-stuck="true"]) .icon-btn {
  color: #fff;
}
.site-header.over-hero:not([data-stuck="true"]) .nav-link::after {
  background: #fff;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: var(--header-h);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  flex: none;
  color: var(--text);
}
.logo-badge {
  width: 3.25rem;
  height: 3.25rem;
  flex: none;
  display: block;
}
/*
 * Over a photographic hero the surrounding chrome turns white, but the badge is
 * fixed-colour artwork. A soft dark halo keeps its pale sky and sun edges from
 * dissolving into a bright sky in the photo behind it.
 */
.site-header.over-hero:not([data-stuck="true"]) .logo-badge {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}
.footer-brand .logo-badge {
  width: 5.5rem;
  height: 5.5rem;
}
.footer-brand .logo {
  align-items: flex-start;
  gap: 0.875rem;
}
.footer-brand .logo-word {
  padding-top: 0.35rem;
}
/*
 * The badge's own strapline, set as live text so it stays legible at any size,
 * selectable, and indexable. The two halves are separate spans rather than one
 * run of text, so in a narrow footer column it breaks on the meaning instead of
 * wherever the column edge happens to fall.
 */
.brand-strapline {
  margin-top: var(--space-3);
  max-width: none;
  display: grid;
  gap: 0.2em;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.085em;
  line-height: 1.4;
  text-transform: uppercase;
  text-wrap: balance;
  color: rgba(231, 222, 209, 0.68);
}
@media (max-width: 640px) {
  .logo-badge {
    width: 2.625rem;
    height: 2.625rem;
  }
  .footer-brand .logo-badge {
    width: 4.25rem;
    height: 4.25rem;
  }
}
.logo-word {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.logo-word small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.68;
  margin-top: 2px;
}
.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.75rem);
  margin-left: auto;
}
.nav-link {
  position: relative;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  padding-block: 0.375rem;
  white-space: nowrap;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transition: right 0.22s ease;
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
  right: 0;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.icon-btn:hover {
  border-color: var(--border-strong);
}
.icon-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}
.theme-toggle .moon {
  display: none;
}
html[data-theme="dark"] .theme-toggle .moon {
  display: block;
}
html[data-theme="dark"] .theme-toggle .sun {
  display: none;
}
.nav-toggle {
  display: none;
}
@media (max-width: 64rem) {
  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: var(--space-4) var(--gutter) var(--space-8);
    box-shadow: var(--shadow-lg);
    transform: translateY(-140%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .primary-nav[data-open="true"] {
    transform: translateY(0);
  }
  .site-header.over-hero .primary-nav .nav-link {
    color: var(--text);
  }
  .nav-link {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-base);
  }
  .nav-link::after {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .header-actions {
    margin-left: auto;
  }
}
.header-cta {
  display: inline-flex;
}
@media (max-width: 30rem) {
  .header-cta {
    display: none;
  }
}

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  min-height: min(92svh, 54rem);
  display: flex;
  align-items: flex-end;
  color: #fff;
  isolation: isolate;
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--pine);
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenburns 26s ease-out both;
}
@keyframes kenburns {
  from {
    transform: scale(1.06) translate3d(1.2%, 0.8%, 0);
  }
  to {
    transform: scale(1) translate3d(0, 0, 0);
  }
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
}
.hero-inner {
  width: 100%;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: end;
}
.hero-search {
  width: 100%;
  max-width: 60rem;
}
.hero h1 {
  font-size: var(--text-3xl);
  font-weight: 400;
  letter-spacing: -0.028em;
  max-width: 22ch;
  color: #fff;
}
.hero h1 em {
  font-style: italic;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  color: var(--sand);
}
.hero .lede {
  color: rgba(255, 255, 255, 0.86);
  max-width: 40ch;
  margin-top: var(--space-6);
}
.hero-eyebrow {
  color: var(--sand);
  margin-bottom: var(--space-6);
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.9);
}
.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.hero-meta svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--sand);
}
.hero-credit {
  font-size: var(--text-xs);
  color: #fff;
  position: absolute;
  right: var(--space-5);
  top: 6.5rem;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  background: rgba(12, 14, 15, 0.55);
  backdrop-filter: blur(4px);
}
@media (max-width: 60rem) {
  .hero-credit {
    display: none;
  }
}

/* search bar */
.searchbar {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.85fr) auto;
  gap: var(--space-2);
  align-items: end;
}
.searchbar.searchbar-inline {
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}
@media (max-width: 48rem) {
  .searchbar {
    grid-template-columns: minmax(0, 1fr);
  }
}
.field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.25rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  position: relative;
}
.field + .field {
  border-left: 1px solid var(--border);
}
@media (max-width: 48rem) {
  .field + .field {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}
.field label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.field input,
.field select {
  border: 0;
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 0.25rem 0;
  width: 100%;
  min-height: 1.75rem;
}
.field input:focus-visible,
.field select:focus-visible {
  outline-offset: 4px;
}
/* The guests field is a write-in number, not a picker. Hide the spinner so it
   reads as a plain field like the rest of the bar; the value is still typed,
   validated by min/max, and arrow keys still work. */
.field input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.autocomplete {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  min-width: 16rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 40;
  overflow: hidden;
  display: none;
}
.autocomplete[data-open="true"] {
  display: block;
}
.autocomplete button {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--border);
}
.autocomplete button:last-child {
  border-bottom: 0;
}
.autocomplete button:hover,
.autocomplete button[data-active="true"] {
  background: var(--bg-alt);
  color: var(--accent);
}
.autocomplete .ac-sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/* ---------- 8. Trust bar ---------- */
.trustbar {
  border-block: 1px solid var(--border);
  background: var(--bg-alt);
}
.trustbar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.trustbar li {
  padding: var(--space-6) var(--space-6) var(--space-6) 0;
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.trustbar li + li {
  border-left: 1px solid var(--border);
  padding-left: var(--space-6);
}
.trustbar svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent);
  flex: none;
  margin-top: 3px;
}
.trustbar strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
}
.trustbar span {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
}
@media (max-width: 64rem) {
  .trustbar ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .trustbar li:nth-child(3) {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--border);
  }
  .trustbar li:nth-child(4) {
    border-top: 1px solid var(--border);
  }
}
@media (max-width: 40rem) {
  .trustbar ul {
    grid-template-columns: minmax(0, 1fr);
  }
  .trustbar li + li {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--border);
  }
}

/* ---------- 9. Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.card-media {
  position: relative;
  overflow: hidden;
  background: var(--bg-alt);
  aspect-ratio: 4 / 3;
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover .card-media img {
  transform: scale(1.04);
}
.card-body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.card-kicker {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.card h3 {
  font-size: var(--text-lg);
}
.card h3 a:hover {
  color: var(--accent);
}
.card-foot {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.price {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.price span {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
}
.card-badges {
  position: absolute;
  inset: var(--space-4) var(--space-4) auto var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  pointer-events: none;
  z-index: 2;
}
.badge-save {
  background: color-mix(in oklab, var(--pine) 92%, transparent);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
  letter-spacing: 0.01em;
}
.card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.card-facts li {
  list-style: none;
}
.card-facts {
  padding: 0;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   vibe chooser: "where do you want to be?"
   Deliberately uses auto-fit rather than an explicit column count, so the row
   fills itself at two, three or five vibes with no count-aware rules to
   maintain. Do NOT convert this to nth-child spans — that is exactly what left
   a hole in .dest-grid.
--------------------------------------------------------------------------- */
.vibe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-5);
}
.vibe {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  /* Landscape, not portrait. At two cards each tile is ~33rem wide, and a 3/4
     portrait crop made them 44rem tall — a wall of sky with the label pushed
     off the fold. */
  aspect-ratio: 16 / 10;
  color: #fff;
  isolation: isolate;
  background: var(--pine);
}
.vibe img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Both vibe photos are wide vistas with a lot of sky. Bias the crop down so
     the ridge line and the water stay in frame. */
  object-position: center 62%;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.vibe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 20, 18, 0.9) 0%, rgba(15, 20, 18, 0.45) 46%, rgba(15, 20, 18, 0.08) 78%);
}
.vibe:hover img {
  transform: scale(1.05);
}
.vibe-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  justify-content: flex-end;
  padding: var(--space-6);
}
.vibe-label {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.vibe-pitch {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  max-width: 26rem;
}
.vibe-go {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sand);
}
.vibe-go svg {
  transition: transform 0.3s ease;
}
.vibe:hover .vibe-go svg {
  transform: translateX(0.25rem);
}
@media (max-width: 34rem) {
  .vibe {
    aspect-ratio: 5 / 4;
  }
  .vibe-body {
    padding: var(--space-5);
  }
}

/* destination card: editorial overlay */
.dest {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  color: #fff;
  isolation: isolate;
  background: var(--pine);
}
.dest img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.dest::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 20, 18, 0.86) 0%, rgba(15, 20, 18, 0.38) 42%, rgba(15, 20, 18, 0.06) 74%);
}
.dest:hover img {
  transform: scale(1.05);
}
.dest-body {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
  gap: var(--space-2);
}
.dest h3 {
  font-size: var(--text-lg);
  color: #fff;
}
.dest p {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.82);
  max-width: 30ch;
}
.dest .dest-meta {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
}
.dest-tall {
  aspect-ratio: 4 / 5;
}
.dest-wide {
  aspect-ratio: 16 / 10;
}
.dest-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-5);
}
/* A two-up feature row, then three to a row. Cards in a row always share a
   span, so they always share a height.
   The three tail rules close the final row at ANY card count, which matters
   because destinations get added: with one card left over it runs full width,
   with two left over they take a half each. Do not add a blanket
   :nth-last-child rule here — that is what previously punched a hole in the
   second row at five cards. */
.dest-grid > *:nth-child(1),
.dest-grid > *:nth-child(2) {
  grid-column: span 3;
}
.dest-grid > *:nth-child(n + 3) {
  grid-column: span 2;
}
.dest-grid > *:only-child {
  grid-column: span 6;
}
/* total % 3 == 0 -> one card left over */
.dest-grid > *:last-child:nth-child(3n) {
  grid-column: span 6;
}
/* total % 3 == 1 -> two cards left over */
.dest-grid > *:nth-child(3n):nth-last-child(2),
.dest-grid > *:nth-child(3n):nth-last-child(2) ~ * {
  grid-column: span 3;
}
@media (max-width: 62rem) {
  .dest-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dest-grid > * {
    grid-column: span 1 !important;
  }
}
@media (max-width: 34rem) {
  .dest-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- 10. Carousel ---------- */
.rail-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(19rem, 22rem);
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  padding-bottom: var(--space-4);
  margin-inline: calc(-1 * var(--gutter));
  scrollbar-width: thin;
}
.rail > * {
  scroll-snap-align: start;
}
@media (max-width: 40rem) {
  .rail {
    grid-auto-columns: minmax(16rem, 80vw);
  }
}

/* ---------- 11. Calculator ---------- */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 56rem) {
  .calc {
    grid-template-columns: minmax(0, 1fr);
  }
}
.calc-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
}
.calc-row {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.calc-row label {
  font-size: var(--text-sm);
  font-weight: 600;
}
.calc-row .hint {
  font-size: var(--text-xs);
  color: var(--text-faint);
}
.input,
select.input {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: var(--text-base);
  min-height: 2.75rem;
}
.input:focus-visible {
  border-color: var(--accent);
}
input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  min-height: 2rem;
}
.result {
  border-top: 1px solid var(--border);
  padding-top: var(--space-5);
  margin-top: var(--space-2);
  display: grid;
  gap: var(--space-3);
}
.result-line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
}
.result-line dt {
  color: var(--text-muted);
}
.result-line dd {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}
.result-line.strike dd {
  text-decoration: line-through;
  color: var(--text-faint);
  font-weight: 500;
}
.result-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.result-total .amount {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.savings-hero {
  background: var(--pine);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
html[data-theme="dark"] .savings-hero {
  background: var(--accent-soft);
  border: 1px solid var(--border);
}
.savings-hero .amount {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
html[data-theme="dark"] .savings-hero .amount {
  color: var(--accent);
}
.savings-hero .label {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
}
html[data-theme="dark"] .savings-hero .label {
  color: var(--text-muted);
}
.savings-hero .note {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.8);
  margin-top: var(--space-2);
}
html[data-theme="dark"] .savings-hero .note {
  color: var(--text-muted);
}
.bar-compare {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.bar {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.bar .track {
  display: block;
  height: 0.75rem;
  background: var(--bg-alt);
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.bar .fill {
  display: block;
  height: 100%;
  background: var(--stone);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.bar.is-nomad .fill {
  background: var(--accent);
}
.bar .val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ---------- 12. Map ---------- */
.map-shell {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-alt);
}
.map {
  width: 100%;
  height: clamp(20rem, 52vh, 34rem);
  z-index: 0;
  background: var(--bg-alt);
}
.map-sm {
  height: clamp(15rem, 32vh, 20rem);
}
.leaflet-container {
  font-family: var(--font-body) !important;
  background: var(--bg-alt) !important;
}
html[data-theme="dark"] .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.86) contrast(0.92) saturate(0.7);
}
.leaflet-popup-content-wrapper {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}
.leaflet-popup-tip {
  background: var(--surface) !important;
}
.map-pop {
  width: 14rem;
}
.map-pop img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
}
.map-pop strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.map-pop .m {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.map-pop a {
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pin {
  background: var(--accent);
  color: var(--accent-on);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border: 1.5px solid #fff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.map-legend {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 500;
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-muted);
  max-width: 15rem;
}

/* ---------- 13. Reviews / ticker ---------- */
.rating-block {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.rating-big {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
  letter-spacing: -0.03em;
}
.review {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.review blockquote {
  font-size: var(--text-base);
  line-height: 1.6;
}
.review footer {
  margin-top: auto;
  font-size: var(--text-sm);
  color: var(--text-muted);
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  flex-wrap: wrap;
}
.review footer strong {
  color: var(--text);
}
.ticker {
  border-block: 1px solid var(--border);
  background: var(--bg-alt);
  overflow: hidden;
  padding-block: var(--space-3);
}
.ticker-inner {
  display: flex;
  gap: var(--space-8);
  width: max-content;
  animation: marquee 48s linear infinite;
}
.ticker:hover .ticker-inner,
.ticker:focus-within .ticker-inner {
  animation-play-state: paused;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
}
.ticker-item strong {
  color: var(--text);
  font-weight: 600;
}
.ticker-item .dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 100px;
  background: var(--moss);
  flex: none;
}
.ticker-label {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  flex: none;
}

/* ---------- 14. Property page ---------- */
.pdp-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--space-2);
  aspect-ratio: 2.1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pdp-gallery button {
  position: relative;
  padding: 0;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  background: var(--bg-alt);
}
.pdp-gallery button:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
/* Adapt the mosaic to homes with 3 or 4 photos so no cell is left empty. */
.pdp-gallery:has(> :nth-child(4):last-child) > :last-child {
  grid-column: span 2;
}
.pdp-gallery:has(> :nth-child(3):last-child) > :not(:first-child) {
  grid-column: span 2;
}
.pdp-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
.pdp-gallery button:hover img {
  transform: scale(1.03);
  opacity: 0.94;
}
.pdp-gallery .more-badge {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  background: color-mix(in oklab, var(--ink) 82%, transparent);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
}
@media (max-width: 48rem) {
  /* Auto rows on phones: a fixed aspect-ratio container clipped the tiles that
     wrapped past row two. */
  .pdp-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    aspect-ratio: auto;
  }
  .pdp-gallery > * {
    aspect-ratio: 4 / 3;
  }
  .pdp-gallery button:first-child {
    grid-column: span 2;
    grid-row: auto;
    aspect-ratio: 3 / 2;
  }
  .pdp-gallery:has(> :nth-child(3):last-child) > :not(:first-child) {
    grid-column: auto;
  }
  .pdp-gallery:has(> :nth-child(4):last-child) > :last-child {
    grid-column: span 2;
    aspect-ratio: 2 / 1;
  }
  .pdp-gallery button:nth-child(n + 6) {
    display: none;
  }
}
.pdp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 68rem) {
  .pdp-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Stick the whole rail (card + calendar) so the card can never overlap the
   calendar and swallow its clicks. */
[data-booking] {
  align-self: start;
}
.booking {
  position: sticky;
  top: 6rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  display: grid;
  gap: var(--space-4);
}
@media (max-width: 68rem) {
  .booking {
    position: static;
  }
}
.booking-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
/* The widget card's title sits above its meta rather than beside it: the
   sidebar is ~300px wide, and a two-word title plus "3 bedrooms · sleeps 10" on
   one baseline row forces the title to wrap mid-phrase. */
.booking-head-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}
/* Mount point for the Hospitable booking widget. The vendor injects an iframe
   with id "booking-iframe" in here and resizes it by postMessage, so the height
   below is only a first-paint reservation to stop the sidebar jumping while the
   calendar loads. The iframe carries its own panel styling, so the mount sits
   flush and adds no second border of ours. */
.booking-widget-mount {
  min-height: 22rem;
}
.booking-widget-mount > iframe,
.booking-widget-mount > #booking-iframe {
  display: block;
  width: 100%;
  border: 0;
  color-scheme: light;
}
/* A tall calendar cannot usefully stick: pinning it would cut the button off on
   a short viewport. Homes on the widget path scroll with the page instead. */
.booking:has(.booking-widget-mount) {
  position: static;
}
.booking-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.booking-dates .field {
  border-radius: 0;
}
.booking-dates .field + .field {
  border-left: 1px solid var(--border-strong);
}
.avail-note {
  font-size: var(--text-xs);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--bg-alt);
  color: var(--text-muted);
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}
.avail-note[data-state="bad"] {
  background: var(--accent-soft);
  color: var(--accent);
}
.avail-note svg {
  width: 0.9375rem;
  height: 0.9375rem;
  flex: none;
  margin-top: 2px;
}
.pdp-section {
  padding-block: var(--space-12);
  border-top: 1px solid var(--border);
}
.pdp-section:first-of-type {
  border-top: 0;
  padding-top: var(--space-10);
}
.pdp-section > h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-6);
}
.amenity-group h4 {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-3);
}
.amenity-group ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.amenity-group li {
  font-size: var(--text-sm);
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  color: var(--text-muted);
}
.amenity-group li::before {
  content: "";
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 100px;
  background: var(--moss);
  flex: none;
  margin-top: 0.5rem;
}
/* A four-column data table cannot be made to fit 390px without either lying
   about the numbers or shrinking them past reading size, so it scrolls inside
   its own box instead of widening the page. The shadow on the right edge is the
   affordance — without it people do not know there is more. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
@media (max-width: 40rem) {
  .table-scroll {
    background:
      linear-gradient(to right, var(--paper) 30%, rgba(250, 248, 244, 0)) left center / 2.5rem 100% no-repeat,
      linear-gradient(to left, var(--paper) 30%, rgba(250, 248, 244, 0)) right center / 2.5rem 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(20, 24, 26, 0.13), transparent) left center / 0.75rem 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(20, 24, 26, 0.13), transparent) right center / 0.75rem 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .table-scroll table.data {
    min-width: 32rem;
  }
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
table.data caption {
  text-align: left;
  font-size: var(--text-xs);
  color: var(--text-faint);
  padding-bottom: var(--space-3);
}
table.data th,
table.data td {
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.data th {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  white-space: nowrap;
}
table.data td:first-child {
  font-weight: 500;
}
table.data .num {
  text-align: right;
  white-space: nowrap;
}
.scorebar {
  display: grid;
  grid-template-columns: 6.5rem 1fr 2.5rem;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--text-sm);
}
.scorebar .track {
  display: block;
  height: 0.5rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 100px;
  overflow: hidden;
}
.scorebar .fill {
  display: block;
  height: 100%;
  background: var(--moss);
}
.scorebar .v {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* accordion */
details.acc {
  border-bottom: 1px solid var(--border);
}
details.acc summary {
  cursor: pointer;
  padding: var(--space-5) var(--space-8) var(--space-5) 0;
  font-weight: 600;
  font-size: var(--text-base);
  position: relative;
  list-style: none;
  display: block;
}
details.acc summary::-webkit-details-marker {
  display: none;
}
details.acc summary::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 0.625rem;
  height: 0.625rem;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.22s ease;
}
details.acc[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}
details.acc .acc-body {
  padding-bottom: var(--space-5);
  color: var(--text-muted);
  font-size: var(--text-base);
  max-width: 62ch;
}
details.acc .acc-body > * + * {
  margin-top: var(--space-3);
}

/* upsells */
.upsell {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.upsell:last-child {
  border-bottom: 0;
}
.upsell .u-price {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.upsell .u-free {
  color: var(--moss);
}
html[data-theme="dark"] .upsell .u-free {
  color: #8fc0a9;
}

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(12, 14, 15, 0.975);
  backdrop-filter: blur(6px);
  display: none;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[data-open="true"] {
  display: grid;
}
/* Keep the concierge pill out of the lightbox. */
body:has(.lightbox[data-open="true"]) .concierge-launch {
  display: none;
}
.lightbox figure {
  margin: 0;
  max-width: min(72rem, 100%);
  max-height: 100%;
  display: grid;
  gap: var(--space-4);
}
.lightbox img {
  max-height: 78svh;
  width: auto;
  margin-inline: auto;
  border-radius: var(--radius);
  object-fit: contain;
}
.lightbox figcaption {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-sm);
  text-align: center;
}
.lightbox .lb-close,
.lightbox .lb-prev,
.lightbox .lb-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 100px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.lightbox .lb-close:hover,
.lightbox .lb-prev:hover,
.lightbox .lb-next:hover {
  background: rgba(255, 255, 255, 0.22);
}
.lightbox .lb-close {
  top: var(--space-5);
  right: var(--space-5);
}
.lightbox .lb-prev {
  left: var(--space-4);
  top: 50%;
}
.lightbox .lb-next {
  right: var(--space-4);
  top: 50%;
}
.lightbox svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* ---------- 15. Browse / filters ---------- */
.browse-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding-block: var(--space-4);
  border-block: 1px solid var(--border);
}
.filters .group {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}
.filters .glabel {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  margin-right: var(--space-1);
}
.filters .spacer {
  flex: 1;
}
.result-count {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.empty-state {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--text-muted);
  display: none;
}
.empty-state[data-show="true"] {
  display: block;
}

/* ---------- 16. Breadcrumbs ---------- */
.crumbs {
  padding-block: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-faint);
}
.crumbs ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}
.crumbs li {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.crumbs li + li::before {
  content: "/";
  color: var(--border-strong);
}
.crumbs a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.crumbs [aria-current="page"] {
  color: var(--text-muted);
}

/* ---------- 17. Page header (interior) ---------- */
.page-head {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
}
.page-head h1 {
  max-width: 26ch;
}
.page-head .lede {
  margin-top: var(--space-5);
  max-width: 56ch;
}
.page-head-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--bg-alt);
}
.page-head-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-6);
  padding-block: var(--space-8);
  border-block: 1px solid var(--border);
}
.stat .k {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.stat .v {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  margin-top: var(--space-2);
}
.stat .n {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* two-column editorial split */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-alt);
}
.split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (max-width: 56rem) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- 18. Newsletter, CTA band ---------- */
.band {
  background: var(--pine);
  color: var(--sand);
}
html[data-theme="dark"] .band {
  background: var(--surface-sunk);
  border-block: 1px solid var(--border);
}
.band h2 {
  color: #fff;
}
.band p {
  color: rgba(255, 255, 255, 0.8);
}
html[data-theme="dark"] .band p {
  color: var(--text-muted);
}
.signup {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  max-width: 30rem;
}
.signup input {
  flex: 1 1 14rem;
  padding: 0.8125rem 1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  min-height: 2.75rem;
}
.signup input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
html[data-theme="dark"] .signup input {
  background: var(--bg);
  border-color: var(--border-strong);
  color: var(--text);
}
.form-note {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.62);
  margin-top: var(--space-3);
}
html[data-theme="dark"] .form-note {
  color: var(--text-faint);
}
.form-status {
  font-size: var(--text-sm);
  margin-top: var(--space-3);
  display: none;
}
.form-status[data-show="true"] {
  display: block;
}

/* generic forms */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.form-grid .full {
  grid-column: 1 / -1;
}
@media (max-width: 40rem) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.form-field {
  display: grid;
  gap: var(--space-2);
}
.form-field label {
  font-size: var(--text-sm);
  font-weight: 600;
}
.consent-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  font-size: var(--text-sm);
  line-height: 1.5;
  cursor: pointer;
}
.consent-check input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .15rem;
  accent-color: var(--accent);
}
.consent-check a {
  color: var(--accent);
  text-decoration: underline;
}
textarea.input {
  min-height: 7rem;
  resize: vertical;
}

/* ---------- 19. Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--sand);
  padding-block: var(--space-20) var(--space-8);
  margin-top: var(--space-16);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
}
@media (max-width: 68rem) {
  .footer-top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 40rem) {
  .footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.site-footer h2 {
  font-size: var(--text-xs);
  font-family: var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(231, 222, 209, 0.55);
  font-weight: 600;
  margin-bottom: var(--space-4);
}
.site-footer ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.site-footer a {
  font-size: var(--text-sm);
  color: rgba(231, 222, 209, 0.86);
}
.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-brand p {
  font-size: var(--text-sm);
  color: rgba(231, 222, 209, 0.7);
  max-width: 32ch;
  margin-top: var(--space-4);
}
.footer-brand .logo {
  color: #fff;
}
.footer-contact {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.footer-contact a {
  color: #fff;
  font-weight: 600;
}
.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: var(--text-xs);
  color: rgba(231, 222, 209, 0.72);
  border: 1px solid rgba(231, 222, 209, 0.2);
  border-radius: 100px;
  padding: 0.3125rem 0.6875rem;
}
.footer-badge svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--clay-light);
}
.footer-bottom {
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(231, 222, 209, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: rgba(231, 222, 209, 0.6);
}
.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer-social {
  display: flex;
  gap: var(--space-3);
}
.footer-social a {
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(231, 222, 209, 0.2);
  border-radius: 100px;
  display: grid;
  place-items: center;
}
.footer-social svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

/* ---------- 20. Concierge ---------- */
.concierge-launch {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--pine);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 100px;
  padding: 0.875rem;
  width: 3.25rem;
  height: 3.25rem;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: transform 0.25s ease, background-color 0.2s ease, opacity 0.25s ease,
    visibility 0.25s ease;
}
/* Icon-only launcher: a labelled pill overlaps page content at every breakpoint. */
.concierge-launch span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Stay out of the way until the visitor has moved past the hero. */
.concierge-launch[data-visible="false"] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem) scale(0.9);
  pointer-events: none;
}
.concierge-launch:hover {
  transform: translateY(-2px);
  background: var(--moss);
}
.concierge-launch:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}
html[data-theme="dark"] .concierge-launch {
  background: var(--sand);
  color: var(--ink);
}
.concierge-launch svg {
  width: 1.25rem;
  height: 1.25rem;
}
.concierge {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 130;
  width: min(23rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100svh - 3rem));
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.concierge[data-open="true"] {
  display: flex;
}
.concierge-head {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.concierge-head .who {
  flex: 1;
}
.concierge-head strong {
  display: block;
  font-size: var(--text-sm);
}
.concierge-head span {
  font-size: var(--text-xs);
  color: var(--text-faint);
}
.concierge-body {
  padding: var(--space-4) var(--space-5);
  overflow-y: auto;
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.bubble {
  font-size: var(--text-sm);
  line-height: 1.55;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  max-width: 92%;
}
.bubble-bot {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-bottom-left-radius: var(--radius-sm);
}
.bubble-user {
  background: var(--accent);
  color: var(--accent-on);
  margin-left: auto;
  border-bottom-right-radius: var(--radius-sm);
}
.concierge-suggests {
  padding: var(--space-3) var(--space-5) var(--space-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  background: var(--surface);
}
.concierge-suggests button {
  font-size: var(--text-xs);
  padding: 0.4375rem 0.6875rem;
  border-radius: 100px;
  border: 1px solid var(--border-strong);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.concierge-suggests button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.demo-note {
  font-size: var(--text-xs);
  color: var(--text-faint);
  padding: 0 var(--space-5) var(--space-4);
}
.typing span {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 100px;
  background: var(--text-faint);
  margin-right: 3px;
  animation: blink 1.2s infinite ease-in-out;
}
.typing span:nth-child(2) {
  animation-delay: 0.18s;
}
.typing span:nth-child(3) {
  animation-delay: 0.36s;
}
@keyframes blink {
  0%,
  80%,
  100% {
    opacity: 0.25;
  }
  40% {
    opacity: 1;
  }
}

/* ---------- 21. Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 22. Misc ---------- */
.notice {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.kv {
  display: grid;
  gap: var(--space-3);
}
.kv > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.kv dt,
.kv .k {
  color: var(--text-muted);
}
.kv dd,
.kv .v {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
.sitemap-cols {
  columns: 3 14rem;
  column-gap: var(--space-10);
}
.sitemap-cols ul {
  list-style: none;
  padding: 0;
  break-inside: avoid;
  margin-bottom: var(--space-8);
}
.sitemap-cols li {
  font-size: var(--text-sm);
  padding-block: 0.3125rem;
}
.sitemap-cols h3 {
  font-size: var(--text-sm);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-3);
}
.error-page {
  min-height: 68svh;
  display: grid;
  place-items: center;
  text-align: center;
}

/* ---------- 23. Availability calendar ---------- */
.cal {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--surface);
}
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.cal-head strong {
  font-family: var(--font-display);
  font-size: var(--text-base);
  letter-spacing: -0.01em;
}
.cal-months {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
}
@media (max-width: 40rem) {
  .cal-months {
    grid-template-columns: minmax(0, 1fr);
  }
}
.cal-month-name {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.cal-dow,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-dow span {
  text-align: center;
  font-size: 0.625rem;
  color: var(--text-faint);
  font-weight: 600;
  padding-bottom: 4px;
}
.cal-day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  min-height: 2rem;
  transition: background-color 0.12s ease, color 0.12s ease;
}
button.cal-day:hover {
  background: var(--bg-alt);
  border-color: var(--border-strong);
}
.cal-day.is-off {
  color: var(--text-faint);
  text-decoration: line-through;
  background: repeating-linear-gradient(135deg, var(--bg-alt), var(--bg-alt) 3px, transparent 3px, transparent 6px);
  cursor: default;
}
.cal-day.is-start,
.cal-day.is-end {
  background: var(--accent);
  color: var(--accent-on);
  font-weight: 700;
}
.cal-day.is-between {
  background: var(--accent-soft);
  color: var(--accent);
}
.cal-key {
  display: inline-block;
  width: 0.6875rem;
  height: 0.6875rem;
  vertical-align: -2px;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  background: repeating-linear-gradient(135deg, var(--bg-alt), var(--bg-alt) 3px, transparent 3px, transparent 6px);
}

/* Leaflet chrome — match theme surfaces */
.leaflet-bar,
.leaflet-bar a,
.leaflet-control-attribution {
  background: var(--surface);
  color: var(--text-muted);
  border-color: var(--border);
}
.leaflet-bar a {
  color: var(--text);
}
.leaflet-bar a:hover {
  background: var(--bg-alt);
}
.leaflet-control-attribution a {
  color: var(--accent);
  text-decoration: underline;
}
.leaflet-control-attribution svg {
  display: none;
}

/* ---------- 24. Portfolio page ---------- */
.portfolio-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
  padding-top: clamp(2rem, 4vw, 3.5rem);
}
.portfolio-hero h1 {
  font-size: var(--text-2xl);
  max-width: 20ch;
  margin-top: var(--space-4);
}
.portfolio-hero .lede {
  margin-top: 0;
  max-width: 54ch;
}
.portfolio-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
@media (max-width: 60rem) {
  .portfolio-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

/* stat band — a wider, footnoted variant of .stat-row */
.glance {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.glance-item {
  background: var(--bg);
  padding: var(--space-6);
}
.glance-item .k {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.glance-item .v {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: var(--space-3);
  font-variant-numeric: tabular-nums;
}
.glance-item .n {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: var(--space-3);
  max-width: 30ch;
}
@media (max-width: 68rem) {
  .glance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 34rem) {
  .glance {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* count badge inside a pill */
.pill-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: 0.3125rem;
  border-radius: 100px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
}
.pill-accent .pill-n {
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  border-color: color-mix(in oklab, var(--accent) 30%, transparent);
  color: var(--accent);
}
.pill-quiet {
  opacity: 0.62;
}

/* region blocks */
.region {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--border-strong);
}
.region:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.region-head {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.region-head h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
}
.region-count {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.region-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.region-facts dt {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.region-facts dd {
  font-size: var(--text-sm);
  color: var(--text);
  margin-top: var(--space-2);
  max-width: 34ch;
}
.region-copy {
  margin-top: var(--space-6);
  max-width: 68ch;
  color: var(--text-muted);
}
.region-markets {
  margin-top: var(--space-6);
}
.region-grid {
  margin-top: var(--space-8);
}
.region-more {
  margin-top: var(--space-6);
}
@media (max-width: 60rem) {
  .region-head {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 34rem) {
  .region-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}

/* portfolio by character */
.character-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-10);
}
@media (max-width: 64rem) {
  .character-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 40rem) {
  .character-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.character {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.character:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.character-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-alt);
}
.character-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.character-body {
  padding: var(--space-6);
}
.character-n {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
}
.character-body h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-top: var(--space-2);
}
.character-body .small {
  margin-top: var(--space-3);
  color: var(--text-muted);
}
.character-where {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  color: var(--text-faint);
}

/* the standard — numbered intake steps */
.standard {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-10);
  padding: 0;
}
.standard > li {
  border-top: 2px solid var(--accent);
  padding-top: var(--space-5);
}
.standard h3 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}
.standard p {
  margin-top: var(--space-3);
  color: var(--text-muted);
}
.standard-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
.standard-foot p {
  max-width: 52ch;
  color: var(--text-muted);
}
.standard-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* growth roadmap columns */
.growth {
  margin-top: var(--space-10);
  gap: var(--space-8);
}
.growth-col {
  border-top: 1px solid var(--border-strong);
  padding-top: var(--space-5);
}
.growth-col[data-state="progress"] {
  border-top-color: var(--clay);
}
.growth-col[data-state="live"] {
  border-top-color: var(--moss);
}
.growth-k {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text);
}
.growth-col ul {
  list-style: none;
  padding: 0;
  margin-top: var(--space-5);
}
.growth-col li {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}
.growth-col li a {
  font-weight: 600;
}
.growth-n,
.growth-note {
  color: var(--text-muted);
  font-size: var(--text-xs);
}
.growth-col > .tiny {
  margin-top: var(--space-5);
  color: var(--text-faint);
  max-width: 34ch;
}

/* dark-outline button on the pine band */
.btn-outline-dark {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  background: transparent;
}
.btn-outline-dark:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .btn-outline-dark {
  border-color: var(--border-strong);
  color: var(--text);
}
html[data-theme="dark"] .btn-outline-dark:hover {
  background: var(--surface);
}

/* map: market cluster pin and roadmap ("expanding into") pin */
.pin-market {
  min-width: 1.5rem;
  text-align: center;
  padding: 0.3125rem 0.5rem;
  background: var(--pine);
  color: #fff;
}
html[data-theme="dark"] .pin-market {
  background: var(--moss);
}
.pin-planned {
  background: transparent;
  color: var(--pine);
  border: 1.5px dashed var(--pine);
  box-shadow: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.625rem;
  backdrop-filter: blur(2px);
}
html[data-theme="dark"] .pin-planned {
  color: var(--sand);
  border-color: var(--sand);
  background: rgba(20, 24, 26, 0.55);
}

/* ---------- 25. Portfolio-scale browse ---------- */
/* "New to the portfolio" badge on a card */
.badge-new {
  margin-left: auto;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3125rem 0.5rem;
  border-radius: 100px;
  background: var(--clay);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* facet chip counts + zero-match state */
.chip .chip-n {
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  color: var(--text-faint);
}
.chip[aria-pressed="true"] .chip-n {
  color: color-mix(in oklab, var(--accent-on) 78%, transparent);
}
.chip[data-zero="true"] {
  opacity: 0.42;
  cursor: not-allowed;
}
.chip[data-zero="true"]:hover {
  border-color: var(--border);
  color: var(--text-muted);
}
.filters .glabel {
  white-space: nowrap;
}

/* "show more" pagination under a grid */
.pager {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-10);
}
.pager[data-show="true"] {
  display: flex;
}
.pager-note {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.pager-track {
  width: min(18rem, 60vw);
  height: 3px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}
.pager-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}

/* collection fallback beneath an empty result set */
.empty-alt {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}


/* ---------- 26. Filter bar rows (scale-ready) ---------- */
.filters {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}
.filters .frow {
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
.filters .frow .glabel {
  margin: 0.4375rem 0 0;
}
.filters .frow-end {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.filters .frow-end .spacer {
  display: none;
}
@media (max-width: 46rem) {
  .filters .frow {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .filters .frow .glabel {
    margin: 0;
  }
  .filters .frow-end {
    grid-template-columns: 1fr auto;
  }
  .filters .frow-end .result-count {
    grid-column: 1 / -1;
  }
}

/* Badges stack at the top-left of the card media so neither can collide. */
.card-badges {
  inset: var(--space-4) var(--space-4) auto var(--space-4);
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.badge-new {
  margin-left: 0;
  order: -1;
}

/* Four-column walk table: drop the category column and tighten gutters on
   phones so it never forces a horizontal scroll. */
@media (max-width: 34rem) {
  table.data.data-walk td.small {
    display: none;
  }
  table.data.data-walk th,
  table.data.data-walk td {
    padding-inline: var(--space-2);
  }
  table.data.data-walk th[scope='row'] {
    white-space: normal;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
  }
}

/* ==========================================================================
   Truth refactor — components added when the fabricated ones were removed
   --------------------------------------------------------------------------
   Nothing here introduces a new colour or a new family. Every rule below
   resolves to the existing pine / sand / clay / paper tokens and to Fraunces
   and Satoshi, so the honest components sit in the same visual system as the
   ones they replaced.
   ========================================================================== */

/* ---------- Sample-build banner ------------------------------------------
   Only ever present in a --sample tree. It is fixed, non-dismissible and
   deliberately the loudest thing on the page: a design-review build must be
   impossible to mistake for the live site, including in a screenshot. */
.sample-banner {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0.5rem var(--space-5);
  background: var(--clay-deeper);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(20, 24, 26, 0.22);
}
.sample-banner strong {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.sample-banner-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #fff;
}
@media (prefers-reduced-motion: no-preference) {
  .sample-banner-dot {
    animation: sample-pulse 1.8s ease-in-out infinite;
  }
}
@keyframes sample-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
/* Push the whole document down so the banner never covers the header. */
body.is-sample {
  padding-top: 2.25rem;
}
body.is-sample .site-header {
  top: 2.25rem;
}
@media (max-width: 40rem) {
  body.is-sample { padding-top: 3.25rem; }
  body.is-sample .site-header { top: 3.25rem; }
}

/* Inline marker on individual placeholder values. */
.sample-mark {
  border-bottom: 1px dashed var(--clay);
  box-shadow: inset 0 -0.45em 0 rgba(180, 100, 60, 0.14);
  cursor: help;
}

/* ---------- Empty review state -------------------------------------------
   Rule 5. This replaced a wall of six invented Google reviews and an
   invented aggregate star rating. It is styled as a considered statement, not an error: centred,
   generous, and using the same card language as the rest of the site. */
.no-reviews {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.no-reviews-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: var(--space-5);
}
html[data-theme="dark"] .no-reviews-mark {
  background: rgba(180, 100, 60, 0.16);
}
.no-reviews h2 {
  font-size: var(--text-xl);
}
.no-reviews .lede {
  margin: var(--space-5) auto 0;
  max-width: 40ch;
}
.no-reviews .small {
  margin: var(--space-5) auto 0;
  max-width: 52ch;
  color: var(--text-muted);
}
.no-reviews-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-8);
}
/* The per-home variant, which sits inside a property page section. */
.no-reviews-inline {
  text-align: left;
  padding: var(--space-8);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-sunk);
  color: var(--text-muted);
  font-size: var(--text-sm);
  max-width: 60ch;
}
.no-reviews-inline strong {
  color: var(--text);
}

/* ---------- Zero portfolio state -----------------------------------------
   Rule 6. Live mode with zero published homes is the state the company
   actually launches in, so this has to read as a deliberate opening rather
   than a broken grid. */
.zero-state {
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--space-12) var(--space-8);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
}
.zero-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--sand);
  color: var(--pine);
  margin-bottom: var(--space-5);
}
html[data-theme="dark"] .zero-mark {
  background: rgba(231, 222, 209, 0.12);
  color: var(--sand);
}
.zero-state h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}
.zero-state .small {
  margin: var(--space-4) auto 0;
  max-width: 54ch;
  color: var(--text-muted);
}
.zero-state .signup {
  margin: var(--space-8) auto 0;
  justify-content: center;
}
.zero-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

/* Signup form on a light surface. The base .signup is drawn for the dark
   hero; this variant re-tints it for paper backgrounds. */
.signup-inline input {
  border-color: var(--border-strong);
  background: var(--bg);
  color: var(--text);
}
.signup-inline input::placeholder {
  color: var(--text-faint);
}
.hero-open .signup-inline input {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.hero-open .signup-inline input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- Hero, zero-homes variant -------------------------------------
   Replaces the search bar when there is nothing to search. */
.hero-open {
  background: rgba(20, 24, 26, 0.42);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  color: #fff;
}
.hero-open h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-top: var(--space-3);
  color: #fff;
}
.hero-open p {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.82);
  margin-top: var(--space-3);
  max-width: 42ch;
}
.hero-open .signup {
  margin-top: var(--space-6);
}

/* ---------- Portfolio opening block --------------------------------------
   The full-section counterpart of .zero-state, used on the homepage and the
   portfolio page where there is room to make the case properly. */
.opening-inner {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}
.opening-inner h2 {
  margin-top: var(--space-4);
}
.opening-inner .lede {
  margin: var(--space-5) auto 0;
  max-width: 54ch;
}
.opening-criteria {
  list-style: none;
  padding: 0;
  margin: var(--space-10) auto 0;
  max-width: 42rem;
  display: grid;
  gap: var(--space-5);
  text-align: left;
}
.opening-criteria li {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.opening-criteria li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.opening-criteria svg {
  flex: none;
  color: var(--accent);
  margin-top: 0.15rem;
}
.opening-criteria strong {
  color: var(--text);
}
.opening-inner .signup {
  margin: var(--space-10) auto 0;
  justify-content: center;
}
.opening-inner > .tiny {
  margin-top: var(--space-4);
}
.opening-links {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

/* ---------- Founder card --------------------------------------------------
   Rule 5. A named, accountable person is one of the few trust signals a
   company founded in 2026 can honestly offer, so it gets real weight. */
.founder {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-8);
  align-items: start;
  max-width: 56rem;
}
.founder-mark {
  flex: none;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pine);
  color: var(--sand);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
}
.founder-facts {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  gap: var(--space-3);
}
.founder-facts li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.founder-facts svg {
  flex: none;
  color: var(--accent);
  margin-top: 0.2rem;
}
@media (max-width: 44rem) {
  .founder {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .founder-mark {
    width: 3.5rem;
    height: 3.5rem;
    font-size: var(--text-base);
  }
}

/* ---------- "New company" honest list ------------------------------------ */
.honest-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-4);
  border-left: 2px solid var(--sand);
  padding-left: var(--space-6);
}
html[data-theme="dark"] .honest-list {
  border-left-color: var(--border-strong);
}
.honest-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.honest-list svg {
  flex: none;
  color: var(--stone);
  margin-top: 0.2rem;
}

/* ---------- Policy cards -------------------------------------------------- */
.policy {
  padding: var(--space-8);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.policy h3 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
}
.policy .small {
  margin-top: var(--space-3);
  color: var(--text-muted);
}
.policy .tiny {
  margin-top: var(--space-4);
}
.policy .tiny a {
  color: var(--accent);
}

/* ---------- Methodology block --------------------------------------------
   Rule 4 requires the working to be visible without a click, so this is a
   plain always-open block rather than a <details>. */
.methodology {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-sunk);
}
.methodology h3 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.methodology > .small {
  margin-top: var(--space-4);
  color: var(--text-muted);
}
.methodology code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--bg-alt);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}
html[data-theme="dark"] .methodology code {
  background: rgba(255, 255, 255, 0.06);
}
.method-list {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: grid;
  gap: var(--space-4);
}
.method-list li {
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding-left: var(--space-5);
  position: relative;
  line-height: 1.6;
}
.method-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--accent);
}
.method-list strong {
  color: var(--text);
}
.method-list a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.methodology .tiny {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* ---------- Calculator additions ------------------------------------------ */
.calc-legend {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
/* Two numeric inputs side by side — rate and cleaning fee. */
.calc-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 30rem) {
  .calc-row-split {
    grid-template-columns: 1fr;
  }
}
.calc-row .hint {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-faint);
  line-height: 1.5;
}
/* The final line of an estimate, which is a subtotal and not a promise. */
.result-line.strong {
  border-top: 1px solid var(--border-strong);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
}
.result-line.strong dt,
.result-line.strong dd {
  font-weight: 700;
  color: var(--text);
}

/* ---------- Company facts table (about page) ------------------------------
   Deliberately includes the unflattering rows, so it is styled as a plain
   record rather than a highlight reel. */
.facts {
  margin: var(--space-6) 0 0;
  border-top: 1px solid var(--border);
}
.facts > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}
.facts dt {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}
.facts dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Property page: disclosures, extended stays, enquiry card
   --------------------------------------------------------------------------
   Three blocks that only exist when the data exists. The disclosures block is
   deliberately full-size body copy on a tinted card: it is a trust feature,
   not fine print, so it is not set smaller, greyer or narrower than the rest
   of the page.
   ========================================================================== */
.notice-photo {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.notice-photo svg {
  flex: none;
  margin-top: 0.15em;
}

.disclosures {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-8);
}
.disclosures > h2 {
  margin-top: 0;
}
.disclosures-lede {
  color: var(--text-muted);
  max-width: 62ch;
  margin-top: var(--space-3);
}
.disclosure-list {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  gap: var(--space-5);
}
.disclosure-list > li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.disclosure-list > li > svg {
  flex: none;
  margin-top: 0.2em;
  color: var(--accent);
}
.disclosure-list > li > span {
  display: grid;
  gap: var(--space-1);
  max-width: 68ch;
}
.disclosure-list strong {
  font-size: var(--text-base);
}
.disclosure-list span span {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.ext-uses {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  gap: var(--space-2);
}
.ext-uses > li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.ext-uses > li > svg {
  flex: none;
  margin-top: 0.2em;
  color: var(--accent);
}

/* No published rate: the card carries an enquiry, never a zero. */
.booking-enquiry .price {
  line-height: 1.2;
}
.booking-enquiry .booking-head {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}
.booking-enquiry .small {
  color: var(--text-muted);
}
/* "Rates on request" is a phrase, not a figure, so it must not inherit the
   large display size the price uses — at 1.375rem it broke across two lines in
   a card column. Body font, one line. */
.price-enquiry {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Approximate location area — used on property maps so an exact address is
   never implied. Pairs with .map-approx-note beneath the map. */
.map-approx {
  fill: var(--moss);
  fill-opacity: 0.14;
  stroke: var(--moss);
  stroke-opacity: 0.55;
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}
.map-approx-note {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ---------- Hospitable availability widget ------------------------------- *
 * The widget renders into a shadow root, so its internals cannot be selected
 * from here. It reads three CSS custom properties, and custom properties do
 * inherit through a shadow boundary — but only the font one has broad effect.
 * Verified in the browser: --hospitable-main-font is honoured throughout, so
 * the widget sets in Satoshi like the rest of the site. The accent colour is
 * NOT reachable: the vendor bundle hardcodes #fd927c in thirteen places, and
 * the computed colour of its headings, card titles, prices and search button
 * resolves to that coral regardless of what these variables are set to.
 *
 * The mappings below are kept because they cost nothing and are correct for
 * the few rules that do read them. Changing the coral, the card radius, or
 * the marketplace watermark burned into the vendor's own photography has to
 * happen in the Hospitable account — it is not a stylesheet problem.         */
hospitable-direct-mps {
  --hospitable-primary-color: var(--clay);
  --hospitable-secondary-color: var(--clay);
  --hospitable-main-font: var(--font-body);
  display: block;
}

/* Keep the widget from butting against the copy above it on small screens. */
.search-widget {
  min-height: 6rem;
}

/* A card for a place or a collection we have not photographed yet. The body
   owns the whole card instead of leaving a void where an image would sit, so it
   reads as a typographic card rather than a broken one. */
.card--typographic {
  background: linear-gradient(160deg, var(--bg-alt) 0%, var(--bg) 62%);
}
.card--typographic .card-body {
  justify-content: center;
  padding-top: var(--space-7);
}
.card--typographic h3 {
  font-size: var(--text-xl);
  margin-top: var(--space-1);
}
.card--typographic .card-foot {
  margin-top: var(--space-6);
}
.dest--typographic {
  background: linear-gradient(165deg, var(--moss) 0%, var(--pine) 70%);
}
.dest--typographic::after {
  background: none;
}

/* Several two-column sections had a picture on one side; where that picture was
   a generated image it has been withdrawn, so the section collapses to a single
   measured column instead of leaving half the row empty. */
.split:not(:has(.split-media)) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 68ch;
}

/* ------------------------------------------------------------------ *
 * Searchbar feedback + the destination-page availability strip
 * ------------------------------------------------------------------ *
 * The searchbar is a grid, and the status line is appended by the script
 * rather than written into the markup, so it has to claim the full row or it
 * would sit in whichever cell came next. It occupies no space until it has
 * something to say — a permanently reserved gap under the bar would read as a
 * missing element on every page load. */
.search-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--clay);
  display: none;
}
.search-note[data-show="true"] {
  display: block;
  padding-block: var(--space-2) var(--space-1);
}
[data-theme="dark"] .search-note {
  color: #d98a5f; /* clay lifted for contrast on the dark surface */
}

/* Destination and collection pages get the date fields inline, with the place
   already filled in. Two columns where there is room; stacked on a phone. */
.avail-strip {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 62rem) {
  .avail-strip {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
}

/* Netlify Forms honeypot: must exist in the DOM, must never be seen. */
.hp, .hp * { position: absolute !important; left: -9999px !important; width: 1px !important;
  height: 1px !important; overflow: hidden !important; }
/* [hidden] must win even where a display rule would override it. */
.hp[hidden] { display: none !important; }