/* ============================================================
   At Home on Holmes · design system
   Palette: forest coastal. Deep pine green + bone white,
   amber reserved for rating stars only.
   Shape rule: containers/cards/images 16px, interactive pills 999px.
   Theme: light, locked at page level.
   ============================================================ */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/hanken-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* calmer sage-washed light theme (was near-white) */
  --bone: #e6ebdd;
  --paper: #eef1e7;
  --white: #f8faf3;
  --ink: #182420;
  --ink-soft: #3f5049;
  --ink-mute: #5f6f65;
  --pine: #26584a;
  --pine-deep: #1d4539;
  --pine-dark: #132520;
  --tint: #dbe2d0;
  --line: #d2dbc7;
  --amber: #c9922e;
  --r-card: 16px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 72px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--pine); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
ul { list-style: none; }

h1, h2, h3, .display {
  font-family: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.45rem, 5.4vw, 4.1rem); }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.45rem); line-height: 1.25; }

p { max-width: 65ch; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: var(--ink-soft); }
.muted { color: var(--ink-mute); }
.small { font-size: 0.9rem; }

.eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--pine);
  margin-bottom: 1.1rem;
}

.icon {
  width: 1.25em; height: 1.25em;
  fill: currentColor;
  flex: none;
  vertical-align: -0.25em;
}

.wrap { max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(4rem, 9vw, 7rem); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--pine);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.15s var(--ease);
}
.btn:hover { background: var(--pine-deep); text-decoration: none; }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn .icon { width: 1.1em; height: 1.1em; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 28%, transparent);
}
.btn-ghost:hover { background: var(--tint); border-color: var(--ink); }

.btn-light { background: #fff; color: var(--pine-dark); }
.btn-light:hover { background: var(--bone); }

:is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible { border-radius: var(--r-pill); }

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.nav.scrolled {
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px rgb(24 36 32 / 0.06);
}
.nav-inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 1.14rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.brand:hover { text-decoration: none; color: var(--pine); }
.brand span { color: var(--pine); }
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
}
.nav-links a:not(.btn) {
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.98rem;
}
.nav-links a:not(.btn):hover { color: var(--ink); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.nav-links .btn { padding: 0.6rem 1.25rem; font-size: 0.95rem; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  padding: 0.4rem;
}
.nav-toggle .icon { width: 1.7rem; height: 1.7rem; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px rgb(24 36 32 / 0.12);
    padding: 0.5rem var(--gutter) 1.25rem;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a:not(.btn) { padding: 0.85rem 0.25rem; border-bottom: 1px solid var(--line); }
  .nav-links .btn { margin-top: 1rem; justify-content: center; }
}

/* ---------- reveals (disabled under reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .rv { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  html.js .rv.on { opacity: 1; transform: none; }
  html.js .rv-d1 { transition-delay: 0.08s; }
  html.js .rv-d2 { transition-delay: 0.16s; }
  html.js .rv-d3 { transition-delay: 0.24s; }
}

/* ---------- home: full-bleed hero (photo backdrop behind the text) ---------- */
.hero-full {
  position: relative;
  min-height: clamp(560px, calc(100dvh - var(--nav-h)), 880px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-full > img,
.hero-full > picture {
  position: absolute;
  inset: 0;
}
.hero-full > img,
.hero-full > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 58%;
}
.hero-full::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(98deg,
    rgb(19 37 32 / 0.86) 0%,
    rgb(19 37 32 / 0.62) 34%,
    rgb(19 37 32 / 0.22) 62%,
    rgb(19 37 32 / 0.05) 82%);
}
.hero-full .wrap { position: relative; z-index: 1; width: 100%; }
.hero-copy { max-width: 620px; padding-block: clamp(3rem, 8vw, 5rem); }
.hero-copy .eyebrow { color: rgb(255 255 255 / 0.72); }
.hero-copy h1 { color: #fff; }
.hero-copy .lead { margin-top: 1.4rem; color: rgb(255 255 255 / 0.88); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.1rem; }
.btn-outline-light {
  background: transparent;
  color: #fff;
  border-color: rgb(255 255 255 / 0.55);
}
.btn-outline-light:hover { background: rgb(255 255 255 / 0.14); border-color: #fff; }
@media (max-width: 900px) {
  .hero-full { align-items: flex-end; min-height: clamp(520px, 88dvh, 760px); }
  .hero-full::after {
    background: linear-gradient(185deg,
      rgb(19 37 32 / 0.08) 28%,
      rgb(19 37 32 / 0.55) 58%,
      rgb(19 37 32 / 0.88) 88%);
  }
  .hero-copy { padding-block: 2.5rem; }
}

/* Hero on phones ---------------------------------------------------
   The house is wide, spanning about 82% of the landscape photo. `cover`
   scales to whichever side needs more, and in a phone-shaped hero that
   is the HEIGHT, so it throws away well over half the width and slices
   the carport off one end. No object-position fixes that: the house is
   simply wider than the slice a portrait box can hold.

   So phones load a portrait variant of the same photo (see the <picture>
   in index.html) built by extending its own sky upward and lawn
   downward. That gives the frame enough vertical room for the whole
   house to sit in the upper half with the copy over the lawn below it,
   keeping the text on the photo rather than under it.

   The variant is 0.75 aspect, which at a typical ~390px phone width is
   about 520px tall -- hence the height below. Matching the two means
   `cover` has almost nothing left to crop. */
@media (max-width: 720px) {
  /* 700px at ~390px wide matches the variant's 0.557 aspect, so `cover` has
     nothing left to trim sideways. Shorter phones only lose sky and lawn off
     the top and bottom, never the house. */
  .hero-full { min-height: min(700px, 84dvh); }
  .hero-full > picture > img { object-position: center; }
  .hero-copy { max-width: none; padding-block: 1.5rem; }

  /* The house sits in the top third of the variant and the copy sits on the
     lawn below it, so the scrim stays almost clear over the house and then
     ramps hard once it is past it. The inherited 900px scrim is too light where
     the copy starts, which left the eyebrow washed out over bright grass. */
  .hero-full::after {
    background: linear-gradient(180deg,
      rgb(19 37 32 / 0.04) 0%,
      rgb(19 37 32 / 0.08) 28%,
      rgb(19 37 32 / 0.55) 44%,
      rgb(19 37 32 / 0.82) 62%,
      rgb(19 37 32 / 0.92) 100%);
  }
  /* belt and braces: the lawn is bright and its tone shifts across the frame */
  .hero-copy .eyebrow { color: rgb(255 255 255 / 0.9); }
  .hero-copy .eyebrow,
  .hero-copy h1,
  .hero-copy .lead { text-shadow: 0 1px 12px rgb(19 37 32 / 0.5); }
}

/* ---------- fact strip ---------- */
.facts {
  border-block: 1px solid var(--line);
  background: var(--bone);
}
.facts-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  padding-block: 1.6rem;
}
.fact {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.98rem;
}
.fact .icon { width: 1.5rem; height: 1.5rem; color: var(--pine); }
@media (max-width: 900px) {
  .facts-row { grid-template-columns: repeat(2, 1fr); justify-items: start; }
  .fact { justify-content: flex-start; }
  .fact:last-child { grid-column: span 2; }
}

/* ---------- editorial split ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.25rem, 5vw, 5rem);
  align-items: start;
}
.split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split-copy { position: sticky; top: calc(var(--nav-h) + 2rem); }
.split-copy p { margin-top: 1.1rem; }
.split-copy .btn { margin-top: 1.8rem; }
.stack-media { display: grid; gap: 1.4rem; }
.stack-media img {
  border-radius: var(--r-card);
  width: 100%;
  object-fit: cover;
}
.stack-media img:first-child { height: clamp(260px, 30vw, 420px); }
.stack-media img:last-child { height: clamp(200px, 24vw, 330px); width: 82%; justify-self: end; }
@media (max-width: 900px) {
  .split, .split.flip { grid-template-columns: 1fr; }
  .split-copy { position: static; }
}

/* ---------- full-bleed band ---------- */
.band {
  position: relative;
  min-height: clamp(420px, 60vw, 620px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.band > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgb(19 37 32 / 0) 30%, rgb(19 37 32 / 0.78) 82%);
}
.band-panel {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: clamp(2rem, 5vw, 4rem);
  max-width: 640px;
}
.band-panel h2 { color: #fff; }
.band-panel p { margin-top: 1rem; color: rgb(255 255 255 / 0.88); }
.band-panel .btn { margin-top: 1.6rem; }

/* ---------- reviews teaser ---------- */
.score-line {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.score-big {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: clamp(3.4rem, 7vw, 5.2rem);
  line-height: 1;
  color: var(--pine);
}
.stars { color: var(--amber); display: inline-flex; gap: 0.15rem; }
.quote-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 1.4rem;
  margin-top: 2.6rem;
}
.quote-col { display: grid; gap: 1.4rem; align-content: start; }
.quote {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 1.75rem;
}
.quote.big { padding: clamp(1.75rem, 3.5vw, 2.75rem); background: var(--bone); border-color: var(--tint); }
.quote blockquote {
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.quote.big blockquote {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.4;
}
.quote-who {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.3rem;
}
.avatar {
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--pine);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex: none;
}
.quote-who strong { display: block; font-size: 0.98rem; }
.quote-who .small { color: var(--ink-mute); }
@media (max-width: 900px) { .quote-grid { grid-template-columns: 1fr; } }

/* ---------- photo bento ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(150px, 17vw, 230px);
  gap: 1.1rem;
  margin-top: 2.6rem;
}
.bento a { position: relative; border-radius: var(--r-card); overflow: hidden; display: block; }
.bento img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .bento a:hover img { transform: scale(1.045); }
}
.b-tall { grid-row: span 2; }
.b-wide { grid-column: span 2; }
@media (max-width: 720px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(130px, 30vw, 200px); }
}

/* ---------- CTA band ---------- */
.cta {
  background: var(--pine-dark);
  color: #fff;
  border-radius: var(--r-card);
  padding: clamp(2.75rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 2fr) auto;
  gap: 2rem;
  align-items: center;
}
.cta h2 { color: #fff; }
.cta p { color: rgb(255 255 255 / 0.82); margin-top: 0.9rem; }
@media (max-width: 800px) { .cta { grid-template-columns: 1fr; } }

/* ---------- page hero (inner pages) ---------- */
.page-head { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.page-head .lead { margin-top: 1.2rem; }
.page-head-img {
  border-radius: var(--r-card);
  width: 100%;
  height: clamp(260px, 40vw, 480px);
  object-fit: cover;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ---------- room feature rows ---------- */
/* Room grid. The owner's photos are a mix of 4:3 landscape and 3:4 portrait,
   so nothing here forces a height — each photo keeps its own shape and is never
   cropped. Two even columns, tops aligned; one column on small screens. */
.room-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  align-items: start;
}
.room-grid figure {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  margin: 0;
}
.room-grid img { width: 100%; height: auto; display: block; }
/* Legacy mosaic spans neutralised — kept so the markup needn't change. */
.rg-a, .rg-b, .rg-c, .rg-d { grid-column: auto; min-height: 0; }
@media (max-width: 720px) {
  .room-grid { grid-template-columns: 1fr; }
}
figcaption {
  position: static;
  font-size: 0.9rem;
  color: var(--ink-mute);
  padding-top: 0.6rem;
}

/* ---------- amenity clusters ---------- */
.clusters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2.6rem;
}
.cluster h3 { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.cluster h3 .icon { color: var(--pine); width: 1.35rem; height: 1.35rem; }
.cluster li {
  padding-block: 0.45rem;
  color: var(--ink-soft);
  display: flex;
  gap: 0.55rem;
  align-items: baseline;
}
.cluster li .icon { width: 0.95rem; height: 0.95rem; color: var(--pine); }

/* ---------- info cards (good to know / book aside) ---------- */
.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem;
  margin-top: 2.6rem;
}
.info-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 1.6rem;
}
.info-card.tinted { background: var(--bone); border-color: var(--tint); }
.info-card h3 { display: flex; gap: 0.6rem; align-items: center; font-size: 1.08rem; margin-bottom: 0.7rem; }
.info-card h3 .icon { color: var(--pine); }
.info-card p, .info-card li { color: var(--ink-soft); font-size: 0.98rem; }
.info-card li { padding-block: 0.3rem; }

/* ---------- gallery ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
.filter-btn {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.55rem 1.2rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.filter-btn:hover { border-color: var(--pine); color: var(--pine); }
.filter-btn.active { background: var(--pine); border-color: var(--pine); color: #fff; }
.masonry { columns: 3 300px; column-gap: 1.1rem; margin-top: 2.2rem; }
.masonry a {
  display: block;
  margin-bottom: 1.1rem;
  border-radius: var(--r-card);
  overflow: hidden;
  break-inside: avoid;
}
.masonry img { width: 100%; transition: transform 0.6s var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .masonry a:hover img { transform: scale(1.03); }
}
.masonry a.hidden { display: none; }

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgb(19 37 32 / 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 3rem);
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: min(1200px, 100%);
  max-height: 82vh;
  border-radius: 10px;
  object-fit: contain;
}
.lb-caption {
  position: absolute;
  bottom: clamp(0.9rem, 3vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  color: rgb(255 255 255 / 0.85);
  font-size: 0.95rem;
  text-align: center;
  max-width: 90%;
}
.lb-btn {
  position: absolute;
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.25);
  color: #fff;
  width: 2.9rem; height: 2.9rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s;
}
.lb-btn:hover { background: rgb(255 255 255 / 0.22); }
.lb-btn .icon { width: 1.3rem; height: 1.3rem; }
.lb-close { top: 1.1rem; right: 1.1rem; }
.lb-prev { left: 1.1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1.1rem; top: 50%; transform: translateY(-50%); }

/* ---------- score page ---------- */
.score-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.1rem;
  margin-top: 2.6rem;
}
.score-cat {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 1.4rem 1.5rem;
}
.score-cat .num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: var(--pine);
  line-height: 1;
}
.score-cat .lbl { color: var(--ink-mute); font-size: 0.92rem; margin-top: 0.35rem; }
.masonry-quotes { columns: 3 300px; column-gap: 1.4rem; }
.masonry-quotes .quote { margin-bottom: 1.4rem; break-inside: avoid; }

/* host card */
.host-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.75rem;
  background: var(--bone);
  border: 1px solid var(--tint);
  border-radius: var(--r-card);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  align-items: start;
}
.host-avatar {
  width: 4.2rem; height: 4.2rem;
  border-radius: 50%;
  background: var(--pine);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
}
@media (max-width: 640px) { .host-card { grid-template-columns: 1fr; } }

/* ---------- explore ---------- */
.place-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.4rem;
  margin-top: 2.6rem;
}
.place {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  color: #fff;
}
.place > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.place::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(185deg, rgb(19 37 32 / 0) 42%, rgb(19 37 32 / 0.82) 100%);
}
.place-info { position: relative; z-index: 1; padding: 1.5rem; }
.place-info h3 { color: #fff; }
.place-info p { color: rgb(255 255 255 / 0.85); font-size: 0.95rem; margin-top: 0.3rem; }
.pl-a { grid-column: span 7; min-height: clamp(300px, 36vw, 440px); }
.pl-b { grid-column: span 5; min-height: clamp(300px, 36vw, 440px); }
.pl-c { grid-column: span 5; }
.pl-d { grid-column: span 7; }
@media (max-width: 720px) { .pl-a, .pl-b, .pl-c, .pl-d { grid-column: span 12; min-height: 240px; } }

.food-list { margin-top: 2.4rem; display: grid; gap: 0; max-width: 760px; }
.food-item { display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline; padding-block: 1.1rem; }
.food-item + .food-item { border-top: 1px solid var(--line); }
.food-item strong { font-size: 1.08rem; }
.food-item p { color: var(--ink-mute); font-size: 0.95rem; margin-top: 0.2rem; }
.food-item .dist { color: var(--pine); font-weight: 700; font-size: 0.92rem; white-space: nowrap; }

.trip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
  margin-top: 2.6rem;
}
.map-frame {
  border: 0;
  width: 100%;
  height: clamp(320px, 44vw, 460px);
  border-radius: var(--r-card);
  filter: saturate(0.9);
}

/* ---------- booking form ---------- */
.book-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .book-grid { grid-template-columns: 1fr; } }
.book-aside { display: grid; gap: 1.4rem; position: sticky; top: calc(var(--nav-h) + 2rem); }
@media (max-width: 900px) { .book-aside { position: static; } }

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 0.4rem; margin-bottom: 1.2rem; }
.field label { font-weight: 600; font-size: 0.95rem; }
.field .hint { font-size: 0.85rem; color: var(--ink-mute); }
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  width: 100%;
  transition: border-color 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--pine);
  outline: 2px solid color-mix(in srgb, var(--pine) 25%, transparent);
  outline-offset: 0;
}
.field textarea { min-height: 130px; resize: vertical; }
.field.invalid input, .field.invalid select { border-color: #a63a2b; }
.field .error {
  display: none;
  font-size: 0.85rem;
  color: #a63a2b;
  align-items: center;
  gap: 0.35rem;
}
.field.invalid .error { display: flex; }
.check-row { display: flex; align-items: center; gap: 0.6rem; padding-block: 0.3rem; }
.check-row input { width: 1.1rem; height: 1.1rem; accent-color: var(--pine); }
.check-row label { font-weight: 500; font-size: 0.98rem; }

.form-note { font-size: 0.9rem; color: var(--ink-mute); margin-top: 1rem; }
.form-status { display: none; margin-top: 1.2rem; border-radius: 10px; padding: 1rem 1.2rem; font-size: 0.98rem; }
.form-status.ok { display: block; background: var(--bone); border: 1px solid var(--tint); color: var(--pine-deep); }
.form-status.err { display: block; background: #faf0ee; border: 1px solid #ead4cf; color: #8c3325; }
.form-success { text-align: left; }
.form-success .icon { width: 2.6rem; height: 2.6rem; color: var(--pine); }
.form-success h3 { margin-top: 0.9rem; }
.form-success p { margin-top: 0.7rem; color: var(--ink-soft); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.6rem; }
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; } }
.step { border-top: 3px solid var(--pine); padding-top: 1.1rem; }
.step h3 { font-size: 1.1rem; }
.step p { color: var(--ink-soft); font-size: 0.96rem; margin-top: 0.5rem; }

/* ---------- footer ---------- */
footer {
  background: var(--pine-dark);
  color: rgb(255 255 255 / 0.78);
  margin-top: clamp(4rem, 8vw, 6rem);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: 0.97rem;
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
footer .brand { color: #fff; font-size: 1.2rem; }
footer .brand span { color: #9fc4ae; }
footer p { margin-top: 0.9rem; max-width: 34ch; }
footer h3 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.14em; font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; margin-bottom: 1rem; }
footer li { padding-block: 0.3rem; }
footer a { color: rgb(255 255 255 / 0.78); }
footer a:hover { color: #fff; }
footer .icon { width: 1rem; height: 1rem; margin-right: 0.45rem; }
.foot-bottom {
  border-top: 1px solid rgb(255 255 255 / 0.14);
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: rgb(255 255 255 / 0.55);
}
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- concierge chat ---------- */
.chat-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 50;
  width: 3.6rem; height: 3.6rem;
  border-radius: 50%;
  border: none;
  background: var(--pine);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 14px 34px rgb(19 37 32 / 0.35);
  transition: transform 0.2s var(--ease), background 0.2s;
}
.chat-fab:hover { background: var(--pine-deep); transform: translateY(-2px); }
.chat-fab:active { transform: scale(0.96); }
.chat-fab .icon { width: 1.7rem; height: 1.7rem; }

.chat-panel {
  position: fixed;
  right: clamp(0.5rem, 2vw, 1.75rem);
  bottom: clamp(5.4rem, 9vw, 6.1rem);
  z-index: 50;
  width: min(390px, calc(100vw - 1.5rem));
  height: min(560px, calc(100dvh - 8rem));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 30px 70px rgb(19 37 32 / 0.3);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.chat-panel.open { display: flex; }
.chat-head {
  background: var(--pine-dark);
  color: #fff;
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.chat-head .avatar { background: rgb(255 255 255 / 0.14); width: 2.5rem; height: 2.5rem; }
.chat-head strong { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.05rem; }
.chat-head .small { color: rgb(255 255 255 / 0.65); }
.chat-close { margin-left: auto; background: none; border: none; color: rgb(255 255 255 / 0.8); cursor: pointer; padding: 0.3rem; }
.chat-close:hover { color: #fff; }
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  scroll-behavior: smooth;
}
.msg {
  max-width: 86%;
  padding: 0.7rem 1rem;
  border-radius: 14px;
  font-size: 0.96rem;
  line-height: 1.5;
  white-space: pre-line;
}
.msg.bot { background: var(--bone); border: 1px solid var(--tint); color: var(--ink); border-bottom-left-radius: 5px; align-self: flex-start; }
.msg.user { background: var(--pine); color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; }
.msg.typing { color: var(--ink-mute); font-style: italic; }
.chat-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-self: flex-start; max-width: 92%; }
.chat-actions a, .chat-actions button {
  border: 1px solid var(--pine);
  color: var(--pine);
  background: var(--white);
  border-radius: var(--r-pill);
  padding: 0.45rem 0.95rem;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.chat-actions a:hover, .chat-actions button:hover { background: var(--pine); color: #fff; text-decoration: none; }
.chat-input {
  display: flex;
  gap: 0.6rem;
  padding: 0.9rem;
  border-top: 1px solid var(--line);
  background: var(--white);
}
.chat-input input {
  flex: 1;
  font-family: inherit;
  font-size: 0.98rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.65rem 1.1rem;
  background: var(--paper);
}
.chat-input input:focus { border-color: var(--pine); outline: none; }
.chat-send {
  width: 2.9rem; height: 2.9rem;
  border-radius: 50%;
  border: none;
  background: var(--pine);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
}
.chat-send:hover { background: var(--pine-deep); }
.chat-send .icon { width: 1.2rem; height: 1.2rem; }

@media (max-width: 480px) {
  .chat-panel { right: 0.5rem; left: 0.5rem; width: auto; }
}

/* Draft-message send actions on the booking confirmation ---------------- */
.send-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.send-actions .btn { flex: 0 0 auto; }
.send-actions .send-hint {
  flex: 1 0 100%;
  margin: .3rem 0 0;
  font-size: .9rem;
  opacity: .8;
}


/* Gallery room groups — photos of the same room stay together ----------- */
.gal-group {
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem);
  margin: 2.6rem 0 0.2rem;
  letter-spacing: -0.01em;
}
.gal-group:first-of-type { margin-top: 1.6rem; }
.gal-group.hidden { display: none; }
.masonry { margin-top: 1rem; }
.masonry.hidden { display: none; }

/* Review summary + quote cards — same structure as Old Pier, Holmes palette -- */
.review-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.4rem, 3.5vw, 2.2rem) clamp(1.4rem, 4vw, 2.8rem);
  margin-top: 2rem;
}
.review-score { display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; }
.review-score-badge {
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  border-radius: 22px 22px 22px 6px;
  background: linear-gradient(150deg, var(--pine) 0%, var(--pine-dark) 100%);
  color: #fff;
  font-size: 2.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 24px rgba(19, 37, 32, .28);
}
.review-score-label { font-size: 1.15rem; font-weight: 700; color: var(--pine-deep); }
.review-score-count { font-size: .82rem; color: var(--ink-mute); }

.review-bars { list-style: none; padding: 0; display: grid; gap: .55rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.review-bars li { display: grid; grid-template-columns: 8.6em 1fr 2.4em; align-items: center; gap: .7rem; font-size: .9rem; }
.review-bars .bar-label { color: var(--ink); font-weight: 500; }
.review-bars .bar-track { height: 7px; border-radius: 99px; background: var(--tint); overflow: hidden; }
.review-bars .bar-fill {
  display: block; height: 100%; width: var(--w, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pine) 0%, var(--pine-deep) 100%);
}
.review-bars .bar-num { color: var(--pine-deep); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

.quote-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
  margin-top: 2rem;
}
.quote-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.3rem, 3vw, 1.8rem);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  height: 100%;
}
.quote-card blockquote { font-size: 1rem; color: var(--ink); }
.quote-card .quote-attr { font-size: .9rem; color: var(--ink-mute); font-weight: 600; margin-top: auto; }
.quote-theme {
  display: inline-block;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--pine);
  font-weight: 700;
}
.quote-score {
  align-self: flex-start;
  display: inline-grid; place-items: center;
  min-width: 40px; height: 40px;
  padding-inline: .45rem;
  border-radius: 10px 10px 10px 3px;
  background: var(--pine);
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .review-summary { grid-template-columns: 1fr; }
  .review-bars { grid-template-columns: 1fr; }
}